/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Home Preloader */
.home-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-bg);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Grid Background */
.home-preloader-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(0, 200, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 200, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: homePreloaderGridMove 20s linear infinite;
    opacity: 0.6;
}

/* Animated Pulse Circles */
.home-preloader-pulse {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(0, 200, 255, 0.2);
    animation: homePreloaderPulse 4s ease-in-out infinite;
    z-index: 0;
}

.home-preloader-pulse:nth-child(2) {
    width: 200px;
    height: 200px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.home-preloader-pulse:nth-child(3) {
    width: 150px;
    height: 150px;
    bottom: 15%;
    right: 15%;
    animation-delay: 1.3s;
}

.home-preloader-pulse:nth-child(4) {
    width: 100px;
    height: 100px;
    top: 60%;
    left: 80%;
    animation-delay: 2.6s;
}

.home-preloader-binary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        );
    background-size: 40px 40px;
    animation: homePreloaderBinary 30s linear infinite;
    opacity: 0.3;
    will-change: transform;
}

.home-preloader-binary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(0, 200, 255, 0.05) 50%, transparent 100%),
        linear-gradient(0deg, transparent 0%, rgba(0, 200, 255, 0.05) 50%, transparent 100%);
    background-size: 300% 300%;
    animation: homePreloaderHex 20s ease-in-out infinite;
    opacity: 0.3;
    will-change: background-position;
}

.home-preloader-binary::after {
    content: '01001000 01100101 01101100 01101100 01101111 00100000 01010111 01101111 01110010 01101100 01100100 00100000 01001101 01110101 01101100 01110100 01101001 01100011 01101111 01101101 00100000 01001000 01100101 01101100 01101100 01101111 00100000 01010111 01101111 01110010 01101100 01100100 00100000 01001101 01110101 01101100 01110100 01101001 01100011 01101111 01101101 00100000 01001000 01100101 01101100 01101100 01101111 00100000 01010111 01101111 01110010 01101100 01100100 00100000 01001101 01110101 01101100 01110100 01101001 01100011 01101111 01101101';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: rgba(0, 200, 255, 0.06);
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
    padding: 30px;
    animation: homePreloaderText 30s linear infinite;
    overflow: hidden;
    letter-spacing: 2px;
    will-change: transform;
}

.home-preloader-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: homePreloaderFadeIn 0.5s ease-in;
}

.home-preloader-logo {
    max-width: 300px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    animation: homePreloaderLogoGlow 2s ease-in-out infinite;
}

.home-preloader-line {
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-cyan), transparent);
    margin-top: 20px;
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
    animation: homePreloaderLineDraw 2s ease-in-out 2s forwards;
    max-width: 300px;
}

@keyframes homePreloaderBinary {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(40px, 40px);
    }
}

@keyframes homePreloaderHex {
    0% {
        background-position: 0% 0%, 0% 0%;
    }
    50% {
        background-position: 50% 50%, 50% 50%;
    }
    100% {
        background-position: 100% 100%, 100% 100%;
    }
}

@keyframes homePreloaderText {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes homePreloaderFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes homePreloaderLogoGlow {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(0, 200, 255, 0.6));
    }
}

@keyframes homePreloaderLineDraw {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

@keyframes homePreloaderGridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

@keyframes homePreloaderPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
        box-shadow: 0 0 0 0 rgba(0, 200, 255, 0.4);
    }
    50% {
        transform: scale(1.2);
        opacity: 0.6;
        box-shadow: 0 0 0 20px rgba(0, 200, 255, 0);
    }
}

@media (max-width: 768px) {
    .home-preloader-logo {
        max-width: 200px;
    }
    
    .home-preloader-line {
        max-width: 200px;
    }
    
    .home-preloader-binary::after {
        font-size: 8px;
    }
}

:root {
    --primary-bg: rgb(47, 57, 129);
    --primary-dark: rgb(35, 43, 95);
    --primary-light: rgb(60, 72, 150);
    --primary-cyan: rgb(0, 200, 255);
    --text-white: #ffffff;
    --text-light: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.6);
    --accent: rgba(255, 255, 255, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode Variables */
:root[data-theme="light"] {
    --primary-bg: #f8f9fa;
    --primary-dark: #e9ecef;
    --primary-light: #dee2e6;
    --primary-cyan: rgb(47, 57, 129);
    --text-white: rgb(47, 57, 129);
    --text-light: rgba(47, 57, 129, 0.8);
    --text-muted: rgba(47, 57, 129, 0.6);
    --accent: rgba(47, 57, 129, 0.1);
}

/* Smooth transition for theme change */
html {
    transition: background-color 0.5s ease, color 0.5s ease;
}

body {
    transition: background-color 0.5s ease, color 0.5s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--primary-bg);
    color: var(--text-white);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
    position: relative;
    /* Prevent font-related layout shift */
    font-display: swap;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(47, 57, 129, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

/* Light mode navbar */
:root[data-theme="light"] .navbar {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(47, 57, 129, 0.1);
}


.navbar.scrolled {
    padding: 0.75rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
    text-decoration: none;
    letter-spacing: -0.5px;
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.logo-img {
    height: 40px;
    width: auto;
    display: block;
}

.logo-text {
    display: inline-block;
}

.logo a:hover {
    opacity: 0.8;
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: nowrap;
}

.nav-menu li {
    position: relative;
    white-space: nowrap;
}

.nav-menu > li > a {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    position: relative;
    white-space: nowrap;
}

.nav-menu > li > a::before {
    content: attr(data-number);
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1;
    margin-bottom: 0.15rem;
    opacity: 0.6;
    text-align: right;
    width: 100%;
    display: block;
}

.nav-menu > li > a .nav-text {
    display: inline-block;
    line-height: 1.2;
    white-space: nowrap;
}

.nav-menu > li > a .arrow {
    font-size: 0.7rem;
    transition: var(--transition);
    display: inline;
    vertical-align: baseline;
    margin-left: 0.25rem;
}

.nav-menu a {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-menu a:hover {
    opacity: 0.7;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--primary-dark);
    list-style: none;
    min-width: 220px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu a {
    padding: 0.75rem 1.5rem;
    display: block;
    font-size: 0.9rem;
}

.dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.arrow {
    font-size: 0.7rem;
    transition: var(--transition);
}

.dropdown:hover .arrow,
.dropdown.active .arrow {
    transform: rotate(180deg);
}

.lang-switch {
    display: flex;
    gap: 0.5rem;
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    align-items: center;
}

.lang-switch a {
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.flag-icon {
    width: 100px;
    height: 100px;
    max-width: 24px;
    max-height: 24px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.lang-switch a.active .flag-icon {
    opacity: 1;
}

.lang-switch a:not(.active) .flag-icon {
    opacity: 0.6;
}

.lang-switch a:hover .flag-icon {
    opacity: 1;
    transform: scale(1.1);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 2px;
    background-color: var(--text-white);
    transition: var(--transition);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content {
    text-align: center;
    max-width: 800px;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    /* Prevent layout shift */
    min-height: 1.2em;
    will-change: auto;
}

/* Home Hero Title Animation */
.home-hero-title-animated {
    position: relative;
    color: var(--text-white);
    animation: homeHeroTitleGlow 3s ease-in-out infinite;
}

.home-hero-title-animated span {
    position: relative;
    display: inline-block;
}

.home-hero-title-animated span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-cyan), transparent);
    animation: homeHeroTitleUnderline 3s ease-in-out infinite;
}

@keyframes homeHeroTitleGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(0, 200, 255, 0.2);
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 60px rgba(0, 200, 255, 0.4), 0 0 80px rgba(0, 200, 255, 0.2);
    }
}

@keyframes homeHeroTitleUnderline {
    0% {
        width: 0;
        left: 0;
    }
    50% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}

.hero-subtitle {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--text-light);
    margin-bottom: 1rem;
    font-weight: 400;
    /* Prevent layout shift */
    min-height: 1.5em;
    display: block;
    will-change: auto;
}

.hero-description {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    line-height: 1.8;
}

/* Home Hero Cyber Effects */
.home-hero-cyber {
    position: relative;
}

.home-hero-cyber-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(0, 200, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 200, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: homeHeroGrid 20s linear infinite;
    opacity: 0.4;
    z-index: 0;
}

@keyframes homeHeroGrid {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.home-hero-cyber-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(0, 200, 255, 0.3), transparent);
    animation: homeHeroLine 8s ease-in-out infinite;
    z-index: 0;
}

.home-hero-cyber-line:nth-child(2) {
    left: 20%;
    animation-delay: 0s;
}

.home-hero-cyber-line:nth-child(3) {
    right: 20%;
    animation-delay: 4s;
}

@keyframes homeHeroLine {
    0%, 100% {
        opacity: 0;
        transform: translateY(-100%);
    }
    50% {
        opacity: 1;
        transform: translateY(100%);
    }
}

.home-hero-cyber-pulse {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid rgba(0, 200, 255, 0.2);
    animation: homeHeroPulse 4s ease-in-out infinite;
    z-index: 0;
}

.home-hero-cyber-pulse:nth-child(4) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.home-hero-cyber-pulse:nth-child(5) {
    bottom: 10%;
    right: 10%;
    animation-delay: 2s;
}

.home-hero-cyber-pulse:nth-child(6) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 1s;
    width: 300px;
    height: 300px;
}

@keyframes homeHeroPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.hero-logo-wrapper {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo {
    max-width: 150px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    animation: heroLogoPulse 3s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

@keyframes heroLogoPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 30px rgba(0, 200, 255, 0.5));
    }
}

/* Products Section */
.products {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.product-card {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 16px;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: var(--transition);
    z-index: 1;
    pointer-events: none;
}

.product-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.product-card:hover::before {
    opacity: 1;
}

.product-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 16px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    margin-bottom: 1.5rem;
    display: block;
}

.product-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-white);
    position: relative;
    z-index: 2;
}

.product-subtitle {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.7;
    font-size: 0.95rem;
    position: relative;
    z-index: 2;
}

.product-link {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
    margin-top: auto;
}

.product-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-white);
    transition: width 0.3s ease;
}

.product-link:hover {
    transform: translateX(5px);
}

.product-link:hover::after {
    width: 100%;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.btn-primary {
    background-color: var(--text-white);
    color: var(--primary-bg);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Section Styles */
section {
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 4rem;
    letter-spacing: -0.5px;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-cyan), transparent);
}

/* Services Section */
.services {
    background-color: var(--primary-dark);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.service-card {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 16px;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: var(--transition);
    z-index: 1;
    pointer-events: none;
}

.service-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.service-card:hover::before {
    opacity: 1;
}

.service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 16px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.service-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    color: var(--text-white);
    transition: var(--transition);
}

.service-card:hover .service-icon {
    transform: rotate(5deg) scale(1.1);
}

.service-icon-wrapper {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    opacity: 0.9;
    transition: var(--transition);
}

.service-card:hover .service-icon-wrapper {
    opacity: 1;
    transform: scale(1.1);
}

.service-icon-svg {
    width: 48px;
    height: 48px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.service-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

.service-card:hover .service-image {
    transform: scale(1.05);
}

.service-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.service-card h3,
.service-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-white);
    text-transform: capitalize;
}

.service-card p,
.service-description {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.service-link {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.service-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-white);
    transition: width 0.3s ease;
}

.service-link:hover {
    transform: translateX(5px);
}

.service-link:hover::after {
    width: 100%;
}

/* News Section */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.news-card {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 0;
    border-radius: 16px;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.news-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 16px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.news-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    display: block;
}

.news-card-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.news-card:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.news-date {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-weight: 500;
    margin-top: 1rem;
}

.news-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
    color: var(--text-white);
}

.news-excerpt {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.7;
    flex: 1;
}

.news-social {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.social-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: var(--transition);
}

.social-link:hover {
    color: var(--text-white);
}

.news-link {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.news-link:hover {
    opacity: 0.8;
}

.view-more {
    text-align: center;
}

/* EU Projects Section */
.eu-projects {
    background-color: var(--primary-dark);
    text-align: center;
}

.eu-content {
    max-width: 800px;
    margin: 0 auto;
}

.eu-content p {
    font-size: 1.125rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    line-height: 1.8;
}

/* Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-item {
    margin-bottom: 2.5rem;
}

.contact-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-white);
}

.contact-item p {
    color: var(--text-muted);
    font-size: 1rem;
}

.contact-form-wrapper {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-white);
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.15);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer - Fresh Modern Design */
.footer {
    background: linear-gradient(180deg, var(--primary-dark) 0%, #0a0e1f 100%);
    padding: 4rem 0 2rem;
    border-top: 1px solid rgba(0, 200, 255, 0.1);
    position: relative;
    overflow: visible;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-cyan), transparent);
    opacity: 0.3;
}

.footer-content {
    display: grid !important;
    grid-template-columns: 1.2fr 2fr !important;
    gap: 5rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.footer-brand {
    max-width: 400px;
}

.footer-logo {
    height: 45px;
    width: auto;
    margin-bottom: 1.5rem;
    display: block;
    filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.2));
    transition: var(--transition);
}

.footer-logo:hover {
    filter: drop-shadow(0 0 12px rgba(0, 200, 255, 0.4));
    transform: scale(1.05);
}

.footer-description {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.footer-contact {
    display: flex;
    gap: 1rem;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-cyan);
    text-decoration: none;
    transition: var(--transition);
    background: transparent;
    border: none;
    padding: 0;
}

.footer-contact-item svg {
    width: 36px;
    height: 36px;
    transition: var(--transition);
    color: var(--primary-cyan);
}

.footer-contact-item:hover {
    background: transparent;
    border: none;
    transform: none;
    box-shadow: none;
    text-decoration: none;
}

.footer-contact-item:hover svg {
    color: var(--text-white);
    transform: scale(1.15);
}

.footer-links {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3rem;
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-white);
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 0.75rem;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-cyan), transparent);
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-list li {
    margin: 0;
}

.footer-list a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
    display: inline-block;
}

.footer-list a:hover {
    color: var(--primary-cyan);
    transform: translateX(3px);
}

.footer-list a:hover::before {
    content: '→';
    color: var(--primary-cyan);
    margin-right: 0.5rem;
    display: inline-block;
    transition: var(--transition);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    position: relative;
    z-index: 2;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0;
    width: 100%;
    clear: both;
}

.footer-bottom-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    margin: 0;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.875rem;
    transition: var(--transition);
}

.footer-legal a:hover {
    color: var(--text-white);
    text-decoration: none;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.3);
}

.footer-design {
    display: flex;
    align-items: center;
}

.designer2-link {
    display: inline-block;
    position: relative;
    transition: var(--transition);
    opacity: 0.7;
}

.designer2-link:hover {
    opacity: 1;
}

.designer2-logo {
    width: 92px;
    height: 24px;
    display: block;
    transition: opacity 1.5s ease;
}

.designer2-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 92px;
    height: 24px;
    background-image: url('https://designer2.org/wp-content/uploads/2025/11/web-by2-b.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease;
    pointer-events: none;
}

.designer2-link:hover .designer2-logo {
    opacity: 0;
}

.designer2-link:hover::after {
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 968px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        flex-direction: column;
        background-color: var(--primary-dark);
        width: 100%;
        text-align: center;
        transition: var(--transition);
        padding: 2rem 0;
        gap: 0;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.3);
        align-items: center;
        justify-content: center;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu li {
        padding: 0.3rem 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-menu > li > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 1.3rem;
        padding: 0.1rem 1rem;
        width: 100%;
        max-width: 90%;
    }

    .nav-menu > li > a::before {
        text-align: center;
        margin-bottom: 0.2rem;
        font-size: 0.9rem;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background-color: rgba(255, 255, 255, 0.05);
        margin-top: 0;
        border: none;
        box-shadow: none;
        display: none;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }

    /* Full-screen submenu for mobile */
    .nav-menu.submenu-open {
        overflow-y: auto;
        height: calc(100vh - 70px);
    }

    .nav-menu.submenu-open > li:not(.dropdown.active) {
        display: none !important;
    }

    .nav-menu.submenu-open .dropdown.active {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .nav-menu.submenu-open .dropdown.active > a {
        display: none !important;
    }

    .nav-menu.submenu-open .dropdown.active .dropdown-menu {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        background-color: var(--primary-dark);
        padding: 0;
        margin: 0;
        position: relative;
        top: 0;
        left: 0;
        min-height: 100%;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .nav-menu.submenu-open .dropdown.active .dropdown-menu li {
        width: 100%;
    }

    .nav-menu.submenu-open .dropdown.active .dropdown-menu a {
        padding: 0.1rem 1rem;
        font-size: 0.875rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        width: 100%;
    }

    /* Back button for submenu */
    .submenu-back {
        display: none;
        padding: 1.2rem 1.5rem;
        background-color: rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--text-white);
        text-decoration: none;
        align-items: center;
        gap: 0.75rem;
        transition: var(--transition);
        width: 100%;
        justify-content: flex-start;
    }

    .nav-menu.submenu-open .submenu-back {
        display: flex;
    }

    .submenu-back:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .submenu-back::before {
        content: '←';
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .lang-switch {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .services-grid,
    .about-grid,
    .achievements-section,
    .products-grid,
    .certifications-grid {
        grid-template-columns: 1fr;
    }

    .about-section-with-image {
        grid-template-columns: 1fr;
    }

    .product-intro > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .about-card-with-image {
        flex-direction: column;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .about-intro,
    .about-section,
    .about-section-fullwidth {
        max-width: 100%;
    }
    
    .about-logo {
        max-width: 200px;
    }

    .technologies-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 968px) and (min-width: 641px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Footer Responsive */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 3rem;
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.5rem;
    }
    
    .footer-brand {
        max-width: 100%;
    }
    
    .footer-bottom {
        flex-direction: column !important;
        text-align: center;
        gap: 1.5rem;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-separator {
        display: none;
    }
}

@media (min-width: 1025px) {
    .footer-content {
        display: grid !important;
        grid-template-columns: 1.2fr 2fr !important;
    }
    
    .footer-links {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .footer-bottom {
        display: flex !important;
        flex-direction: row !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 640px) {
    section {
        padding: 60px 0;
    }
    
    /* Hero sekcije za Blog i News - padding kao About Us */
    .page-hero:not(.about-us-hero):not(.mbill-hero):not(.careers-hero):not(.references-hero) {
        padding: 120px 0 60px;
    }
    
    .footer {
        padding: 3rem 0 1.5rem;
    }
    
    .footer-content {
        gap: 2.5rem;
        margin-bottom: 2rem;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-separator {
        display: none;
    }
}

    .hero {
        padding: 100px 0 60px;
    }

    .service-card,
    .news-card,
    .contact-form-wrapper {
        padding: 1.5rem;
    }

    .news-card-content {
        padding: 1.5rem;
    }
}

/* Page Hero (for About Us and other pages) */
.page-hero {
    padding: 140px 0 80px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    position: relative;
    overflow: hidden;
}

.page-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Technologies Hero with Animated Effects */
.technologies-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--primary-bg);
}

.technologies-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    animation: pulseGlow 4s ease-in-out infinite;
    z-index: 0;
}

.technologies-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%),
        linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
    background-size: 200% 200%, 200% 200%;
    background-position: 0% 0%, 0% 0%;
    animation: techScan 8s linear infinite;
    z-index: 0;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes techScan {
    0% {
        background-position: -100% -100%, -100% -100%;
    }
    100% {
        background-position: 200% 200%, 200% 200%;
    }
}

.technologies-hero .container {
    position: relative;
    z-index: 2;
}

/* Animated Tech Grid Overlay */
.technologies-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMoveTech 20s linear infinite;
    opacity: 0.4;
    z-index: 1;
}

@keyframes gridMoveTech {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

/* Floating Tech Elements */
.technologies-hero .tech-float {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    z-index: 1;
    animation: floatTech 6s ease-in-out infinite;
}

.technologies-hero .tech-float:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.technologies-hero .tech-float:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.technologies-hero .tech-float:nth-child(3) {
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes floatTech {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
        opacity: 0.6;
    }
}

.page-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--text-white);
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

/* Technologies Page */
.technologies-content {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.technologies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
}

.technology-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.technology-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 16px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.technology-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.technology-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.technology-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.technology-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-white);
    text-transform: capitalize;
}

.technology-description {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 1rem;
}

/* Services Page */
.services-content {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.services-content .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

@media (max-width: 768px) {
    .services-content .services-grid {
        grid-template-columns: 1fr;
    }
}

/* Ensure hover effect works on Services page */
.services-content .service-card {
    transition: var(--transition);
    cursor: pointer;
}

.services-content .service-card:hover {
    transform: translateY(-8px) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

/* Services Hero with Animated Effects */
.services-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--primary-bg);
}

.services-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
    animation: servicesRotate 20s linear infinite;
    z-index: 0;
}

.services-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%),
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%);
    background-size: 100% 200px, 200px 100%;
    animation: servicesFlow 8s ease-in-out infinite;
    z-index: 0;
}

@keyframes servicesRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes servicesFlow {
    0%, 100% {
        background-position: 0% 0%, 0% 0%;
        opacity: 0.5;
    }
    50% {
        background-position: 100% 100%, 100% 100%;
        opacity: 0.8;
    }
}

.services-hero .container {
    position: relative;
    z-index: 2;
}

.services-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0;
    opacity: 0.4;
    z-index: 1;
    animation: servicesGridFade 6s ease-in-out infinite;
}

@keyframes servicesGridFade {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.5;
    }
}

/* Billing & Revenue Management Page */
.billing-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--primary-bg);
}

.billing-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: billingGridMove 12s linear infinite;
    opacity: 0.4;
    z-index: 1;
}

/* Light mode - hide grid or use blue color */
:root[data-theme="light"] .billing-hero-grid {
    background-image: none !important;
}

@keyframes billingGridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(40px, 40px);
    }
}

.billing-hero-pulse {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: billingPulse 4s ease-in-out infinite;
    z-index: 1;
}

/* Light mode - hide pulse or use blue color */
:root[data-theme="light"] .billing-hero-pulse {
    display: none !important;
}

.billing-hero-pulse:nth-child(2) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.billing-hero-pulse:nth-child(3) {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

@keyframes billingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.6;
    }
}

.billing-content {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.billing-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.billing-product-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.billing-product-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 16px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.billing-product-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.billing-product-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

.billing-product-card:hover .billing-product-image {
    transform: scale(1.05);
}

.billing-product-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.billing-product-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-white);
    text-transform: none;
}

.billing-product-subtitle {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.billing-product-link {
    color: var(--text-white);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1rem;
    display: inline-block;
    transition: var(--transition);
    position: relative;
    z-index: 2;
}

.billing-product-link:hover {
    color: var(--text-light);
    transform: translateX(5px);
}

.billing-product-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-white);
    transition: width 0.3s ease;
}

.billing-product-link:hover::after {
    width: 100%;
}

.billing-solutions-section {
    padding: 80px 0;
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.02);
}

.billing-solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    align-items: stretch;
}

.billing-solution-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    min-height: 150px;
    flex-direction: column;
}

.billing-solution-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 16px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.billing-solution-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.billing-solution-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-white);
    text-transform: capitalize;
    position: relative;
    z-index: 2;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.references-section {
    margin-bottom: 4rem;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.references-category-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-white) !important;
    text-align: center;
}

.references-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-cyan), transparent);
    opacity: 0.5;
}

.references-section:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.references-category-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-white) !important;
    margin-bottom: 2rem;
    text-align: center;
    text-transform: none;
    position: relative;
    z-index: 1;
}

.billing-references-section {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.billing-references-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.billing-reference-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.billing-reference-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 16px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.billing-reference-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.billing-reference-image {
    width: 100%;
    height: auto;
    display: block;
    transition: var(--transition);
    object-fit: contain;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.billing-reference-card:hover .billing-reference-image {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.05);
}

/* Responsive Design for Billing Page */
@media (max-width: 768px) {
    .billing-products-grid {
        grid-template-columns: 1fr; /* Jedna kolona na mobitelu */
        gap: 1.5rem;
    }
    
    .billing-solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .billing-references-grid {
        grid-template-columns: repeat(2, 1fr); /* Dvije kolone na mobitelu */
        gap: 1.5rem;
    }

    .references-section {
        padding: 2rem 1.5rem;
    }

    .references-category-title {
        font-size: 1.5rem;
    }
}

/* About Us Content */
.about-content {
    padding: 80px 0;
}

.about-intro {
    margin-bottom: 4rem;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-logo-wrapper {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-logo {
    max-width: 300px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}

.section-title-left {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
    color: var(--text-white);
}

.lead-text {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--text-light);
    line-height: 1.8;
    width: 100%;
    text-align: center;
    max-width: 100%;
}

.about-section {
    margin-bottom: 4rem;
    max-width: 900px;
}

.about-section-fullwidth {
    margin-bottom: 4rem;
    width: 100%;
}

.about-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-white);
}

.about-section p {
    font-size: 1.125rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.about-card {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.about-card:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.about-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-white);
}

.about-card p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 1rem;
}

.achievements-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.achievement-item {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.achievement-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 12px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.achievement-item h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-white);
}

.achievement-item p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 1rem;
}

/* Smooth Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-card,
.news-card,
.about-card {
    animation: fadeInUp 0.6s ease-out;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--primary-dark);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Cyber Background Effects */
.cyber-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* Prevent layout shift */
    will-change: transform;
    contain: layout style paint;
}

/* Animated Grid */
.cyber-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
    opacity: 0.4;
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

/* Animated Lines */
.cyber-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    height: 1px;
    width: 100%;
    animation: lineMove 8s linear infinite;
}

.cyber-line:nth-child(1) {
    top: 20%;
    animation-delay: 0s;
}

.cyber-line:nth-child(2) {
    top: 40%;
    animation-delay: 2s;
}

.cyber-line:nth-child(3) {
    top: 60%;
    animation-delay: 4s;
}

.cyber-line:nth-child(4) {
    top: 80%;
    animation-delay: 6s;
}

@keyframes lineMove {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Animated Particles */
.cyber-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: particleFloat 15s infinite ease-in-out;
}

.cyber-particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.cyber-particle:nth-child(2) {
    left: 30%;
    animation-delay: 2s;
}

.cyber-particle:nth-child(3) {
    left: 50%;
    animation-delay: 4s;
}

.cyber-particle:nth-child(4) {
    left: 70%;
    animation-delay: 6s;
}

.cyber-particle:nth-child(5) {
    left: 90%;
    animation-delay: 8s;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    50% {
        transform: translateY(-100px) scale(1);
    }
}

/* Digital Code Rain Effect */
.code-rain {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.02) 50%,
        transparent 100%
    );
    animation: codeRain 10s linear infinite;
}

@keyframes codeRain {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* Pulsing Circles */
.cyber-pulse {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: pulse 4s ease-in-out infinite;
}

.cyber-pulse:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.cyber-pulse:nth-child(2) {
    top: 60%;
    right: 10%;
    animation-delay: 2s;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.1;
    }
}

/* Scan Line Effect */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: scanMove 3s linear infinite;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    /* Prevent layout shift */
    will-change: transform, opacity;
    contain: layout style paint;
    visibility: hidden;
    opacity: 0;
    animation-delay: 0.1s;
}

.scan-line.loaded {
    visibility: visible;
    opacity: 1;
}

@keyframes scanMove {
    0% {
        top: 0;
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Additional styles for billing page and service links */
.service-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-white);
    transition: width 0.3s ease;
}

.service-link:hover {
    transform: translateX(5px);
}

.service-link:hover::after {
    width: 100%;
}

.billing-references-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

@media (min-width: 768px) {
    .billing-references-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .billing-references-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.billing-reference-image {
    object-fit: contain;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.billing-reference-card:hover .billing-reference-image {
    background: rgba(255, 255, 255, 0.05);
}

/* Ensure service cards on index.html have cyber effect */
#services .service-card {
    position: relative;
}

#services .service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 16px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}


/* Customer Management Hero Animation */
.customer-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--primary-bg);
}

.customer-hero-waves {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%),
        linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    background-size: 200% 200%, 200% 200%;
    animation: customerWaves 8s ease-in-out infinite;
    opacity: 0.6;
    z-index: 1;
}

@keyframes customerWaves {
    0%, 100% {
        background-position: 0% 0%, 0% 0%;
    }
    50% {
        background-position: 100% 100%, 100% 100%;
    }
}

.customer-hero-orb {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    animation: customerOrb 6s ease-in-out infinite;
    z-index: 1;
}

.customer-hero-orb:nth-child(2) {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.customer-hero-orb:nth-child(3) {
    bottom: 20%;
    right: 15%;
    animation-delay: 3s;
}

@keyframes customerOrb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(30px, -30px) scale(1.2);
        opacity: 0.7;
    }
}

.customer-hero .container {
    position: relative;
    z-index: 2;
}

/* Data & Analytics Hero Animation */
.data-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--primary-bg);
}

.data-hero-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px);
    animation: dataLines 10s linear infinite;
    opacity: 0.5;
    z-index: 1;
}

@keyframes dataLines {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(20px, 20px);
    }
}

.data-hero-pulse {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: dataPulse 3s ease-in-out infinite;
    z-index: 1;
}

.data-hero-pulse:nth-child(2) {
    top: 30%;
    left: 20%;
    animation-delay: 0s;
}

.data-hero-pulse:nth-child(3) {
    bottom: 30%;
    right: 20%;
    animation-delay: 1.5s;
}

@keyframes dataPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(2);
        opacity: 0.1;
    }
}

.data-hero .container {
    position: relative;
    z-index: 2;
}

/* Business Process Management Hero Animation */
.bpm-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--primary-bg);
}

.bpm-hero-flow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.04) 50%, transparent 70%);
    background-size: 300% 300%;
    animation: bpmFlow 12s ease-in-out infinite;
    z-index: 1;
}

@keyframes bpmFlow {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

.bpm-hero-node {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: bpmNode 8s ease-in-out infinite;
    z-index: 1;
}

.bpm-hero-node:nth-child(2) {
    top: 25%;
    left: 25%;
    animation-delay: 0s;
}

.bpm-hero-node:nth-child(3) {
    top: 50%;
    left: 50%;
    animation-delay: 2s;
}

.bpm-hero-node:nth-child(4) {
    bottom: 25%;
    right: 25%;
    animation-delay: 4s;
}

@keyframes bpmNode {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translate(20px, -20px) scale(1.1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-20px, 20px) scale(0.9);
        opacity: 0.5;
    }
    75% {
        transform: translate(20px, 20px) scale(1.1);
        opacity: 0.6;
    }
}

.bpm-hero .container {
    position: relative;
    z-index: 2;
}

/* Finance Industry Solutions Hero Animation */
.finance-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--primary-bg);
}

.finance-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: financeGrid 15s linear infinite;
    opacity: 0.4;
    z-index: 1;
}

@keyframes financeGrid {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(60px, 60px);
    }
}

.finance-hero-circle {
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: financeCircle 10s ease-in-out infinite;
    z-index: 1;
}

.finance-hero-circle:nth-child(2) {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.finance-hero-circle:nth-child(3) {
    bottom: 15%;
    right: 10%;
    animation-delay: 5s;
}

@keyframes financeCircle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.5;
    }
}

.finance-hero .container {
    position: relative;
    z-index: 2;
}

/* Product Pages Styles */
.product-intro {
    max-width: 900px;
    margin: 0 auto 4rem;
    text-align: center;
}

.product-description {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-light);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-light);
    margin-top: 1rem;
    font-weight: 400;
}

/* Product Video Section */
.product-video-section {
    margin: 4rem 0;
}

.product-video-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}

.product-video {
    width: 100%;
    height: auto;
    display: block;
}

/* Three videos in a row */
.three-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 4rem 0;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.three-videos-grid .video-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.three-videos-grid .product-video-wrapper {
    max-width: 100%;
    margin: 0;
    width: 100%;
}

.three-videos-grid .product-video {
    width: 100%;
    height: auto;
}

.three-videos-grid .video-caption {
    margin-top: 1rem;
    text-align: center;
    font-size: 1rem;
    color: var(--text-color);
    font-weight: 500;
}

@media (max-width: 968px) {
    .three-videos-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Product Features Section */
.product-features-section {
    margin: 6rem 0;
}

.product-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .product-features-grid {
        grid-template-columns: 1fr;
    }
}

.product-feature-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.product-feature-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 16px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.product-feature-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.product-feature-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

.product-feature-card:hover .product-feature-image {
    transform: scale(1.05);
}

.product-feature-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.product-feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-white);
    text-transform: capitalize;
}

/* Disable capitalize for product names on product pages */
.mbill-hero ~ .billing-content .product-feature-title,
.mbill-hero ~ .billing-content .product-download-title {
    text-transform: none;
}

.product-feature-description {
    color: var(--text-muted);
    line-height: 1.7;
}

/* Product Capabilities Section */
.product-capabilities-section {
    margin: 4rem 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.product-capabilities-list {
    list-style: none;
    padding: 0;
    color: var(--text-light);
    line-height: 1.7;
}

.product-capabilities-list li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.product-capabilities-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--text-white);
    font-weight: bold;
    font-size: 1.2rem;
}

.product-capabilities-list li strong {
    color: var(--text-white);
    font-weight: 600;
}

.product-capabilities-sublist {
    list-style: none;
    padding-left: 2rem;
    margin-top: 0.5rem;
}

.product-capabilities-sublist li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}

.product-capabilities-sublist li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--text-muted);
}

/* Product Download Section */
.product-download-section {
    margin: 6rem 0;
}

.product-download-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.product-download-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 42%, transparent 42%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: bottom right, bottom right, bottom right, bottom right;
    opacity: 0.6;
    pointer-events: none;
    border-radius: 0 0 16px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: 1;
}

.product-download-image {
    width: 400px;
    height: 300px;
    object-fit: cover;
    flex-shrink: 0;
}

.product-download-content {
    padding: 3rem;
    flex: 1;
    position: relative;
    z-index: 2;
}

.product-download-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-white);
}

.product-download-description {
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.7;
}

/* mBill Hero Animation */
.mbill-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--primary-bg);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* References Hero Animation */
.references-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--primary-bg);
    padding: 140px 0 80px;
    text-align: center;
}

.references-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: referencesGrid 15s linear infinite;
    opacity: 0.6;
    z-index: 1;
}

@keyframes referencesGrid {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(60px, 60px);
    }
}

.references-hero-badge {
    position: absolute;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    z-index: 1;
    animation: referencesBadgeFloat 8s ease-in-out infinite;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.references-hero-badge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: referencesBadgePulse 2s ease-in-out infinite;
}

.references-hero-badge:nth-child(2) {
    top: 10%;
    left: 8%;
    animation-delay: 0s;
    transform: rotate(-15deg);
}

.references-hero-badge:nth-child(3) {
    top: 20%;
    right: 12%;
    animation-delay: 1s;
    transform: rotate(20deg);
}

.references-hero-badge:nth-child(4) {
    bottom: 25%;
    left: 15%;
    animation-delay: 2s;
    transform: rotate(-25deg);
}

.references-hero-badge:nth-child(5) {
    bottom: 15%;
    right: 10%;
    animation-delay: 3s;
    transform: rotate(15deg);
}

.references-hero-badge:nth-child(6) {
    top: 50%;
    left: 5%;
    animation-delay: 1.5s;
    transform: rotate(-10deg);
}

.references-hero-badge:nth-child(7) {
    top: 45%;
    right: 8%;
    animation-delay: 2.5s;
    transform: rotate(25deg);
}

@keyframes referencesBadgeFloat {
    0%, 100% {
        transform: translateY(0) rotate(var(--rotation, 0deg));
        opacity: 0.6;
    }
    25% {
        transform: translateY(-20px) rotate(calc(var(--rotation, 0deg) + 5deg));
        opacity: 0.8;
    }
    50% {
        transform: translateY(-10px) rotate(var(--rotation, 0deg));
        opacity: 0.7;
    }
    75% {
        transform: translateY(-25px) rotate(calc(var(--rotation, 0deg) - 5deg));
        opacity: 0.9;
    }
}

@keyframes referencesBadgePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.8;
    }
}

.references-hero-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: referencesShimmer 4s ease-in-out infinite;
    z-index: 2;
}

@keyframes referencesShimmer {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

.references-hero .container {
    position: relative;
    z-index: 3;
}

.references-hero .page-title {
    animation: referencesTitleGlow 3s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

@keyframes referencesTitleGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(0, 200, 255, 0.2);
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 60px rgba(0, 200, 255, 0.4);
    }
}

.mbill-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: mbillGrid 15s linear infinite;
}

/* Light mode - hide mbill hero grid (sive crte na bijeloj podlozi) */
:root[data-theme="light"] .mbill-hero-grid {
    background-image: none !important;
}

@keyframes mbillGrid {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(60px, 60px);
    }
}

.mbill-hero-pulse {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: mbillPulse 3s ease-in-out infinite;
    z-index: 1;
}

/* Light mode - hide mbill hero pulse (sivi krugovi na bijeloj podlozi) */
:root[data-theme="light"] .mbill-hero-pulse {
    display: none !important;
}

/* Light mode - Starry sky background with grid */
:root[data-theme="light"] .mbill-hero {
    background: linear-gradient(180deg, rgba(47, 57, 129, 0.02) 0%, rgba(47, 57, 129, 0.05) 100%);
    position: relative;
    overflow: hidden;
}

:root[data-theme="light"] .mbill-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Horizontal lines connecting stars */
        linear-gradient(to right, rgba(47, 57, 129, 0.15) 1px, transparent 1px),
        /* Vertical lines connecting stars */
        linear-gradient(to bottom, rgba(47, 57, 129, 0.15) 1px, transparent 1px);
    background-size: 120px 120px;
    background-position: 0 0;
    animation: mbillStarGrid 30s linear infinite;
    opacity: 0.3;
    z-index: 0;
}

:root[data-theme="light"] .mbill-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Diagonal lines */
        linear-gradient(45deg, rgba(47, 57, 129, 0.1) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(47, 57, 129, 0.1) 1px, transparent 1px);
    background-size: 120px 120px;
    background-position: 0 0;
    animation: mbillStarGrid 25s linear infinite reverse;
    opacity: 0.2;
    z-index: 0;
}

@keyframes mbillStarGrid {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(120px, 120px);
    }
}

/* Light mode - Stars (connected by grid lines) */
:root[data-theme="light"] .mbill-hero .light-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(47, 57, 129, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(47, 57, 129, 0.4);
    animation: mbillStarTwinkle 3s ease-in-out infinite;
    z-index: 1;
}

/* Larger stars */
:root[data-theme="light"] .mbill-hero .light-particle:nth-child(2),
:root[data-theme="light"] .mbill-hero .light-particle:nth-child(4),
:root[data-theme="light"] .mbill-hero .light-particle:nth-child(6) {
    width: 4px;
    height: 4px;
    box-shadow: 0 0 6px rgba(47, 57, 129, 0.5);
}

/* Star positions */
:root[data-theme="light"] .mbill-hero .light-particle:nth-child(1) {
    top: 15%;
    left: 20%;
    animation-delay: 0s;
}

:root[data-theme="light"] .mbill-hero .light-particle:nth-child(2) {
    top: 25%;
    right: 25%;
    animation-delay: 0.5s;
}

:root[data-theme="light"] .mbill-hero .light-particle:nth-child(3) {
    top: 45%;
    left: 15%;
    animation-delay: 1s;
}

:root[data-theme="light"] .mbill-hero .light-particle:nth-child(4) {
    top: 55%;
    right: 20%;
    animation-delay: 1.5s;
}

:root[data-theme="light"] .mbill-hero .light-particle:nth-child(5) {
    top: 35%;
    left: 50%;
    animation-delay: 0.8s;
}

:root[data-theme="light"] .mbill-hero .light-particle:nth-child(6) {
    bottom: 20%;
    right: 35%;
    animation-delay: 2s;
}

/* Additional stars for better coverage */
:root[data-theme="light"] .mbill-hero .light-particle:nth-child(7) {
    top: 20%;
    left: 60%;
    animation-delay: 1.2s;
}

:root[data-theme="light"] .mbill-hero .light-particle:nth-child(8) {
    bottom: 30%;
    left: 40%;
    animation-delay: 1.8s;
}

:root[data-theme="light"] .mbill-hero .light-particle:nth-child(9) {
    top: 50%;
    left: 70%;
    animation-delay: 0.6s;
}

:root[data-theme="light"] .mbill-hero .light-particle:nth-child(10) {
    bottom: 25%;
    left: 10%;
    animation-delay: 2.2s;
}

@keyframes mbillStarTwinkle {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* Light mode - Hide existing animations */
:root[data-theme="light"] .about-us-hero-grid,
:root[data-theme="light"] .about-us-hero-ring,
:root[data-theme="light"] .services-hero-grid,
:root[data-theme="light"] .technologies-hero-grid,
:root[data-theme="light"] .tech-float {
    display: none !important;
}

/* Light mode - Starry sky effect for About Us, Services, Technologies */
:root[data-theme="light"] .about-us-hero,
:root[data-theme="light"] .services-hero,
:root[data-theme="light"] .technologies-hero {
    background: linear-gradient(180deg, rgba(47, 57, 129, 0.02) 0%, rgba(47, 57, 129, 0.05) 100%);
    position: relative;
    overflow: hidden;
}

:root[data-theme="light"] .about-us-hero::before,
:root[data-theme="light"] .services-hero::before,
:root[data-theme="light"] .technologies-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(to right, rgba(47, 57, 129, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(47, 57, 129, 0.15) 1px, transparent 1px);
    background-size: 120px 120px;
    background-position: 0 0;
    animation: mbillStarGrid 30s linear infinite;
    opacity: 0.3;
    z-index: 0;
}

:root[data-theme="light"] .about-us-hero::after,
:root[data-theme="light"] .services-hero::after,
:root[data-theme="light"] .technologies-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, rgba(47, 57, 129, 0.1) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(47, 57, 129, 0.1) 1px, transparent 1px);
    background-size: 120px 120px;
    background-position: 0 0;
    animation: mbillStarGrid 25s linear infinite reverse;
    opacity: 0.2;
    z-index: 0;
}

/* Stars for About Us, Services, Technologies */
:root[data-theme="light"] .about-us-hero .light-particle,
:root[data-theme="light"] .services-hero .light-particle,
:root[data-theme="light"] .technologies-hero .light-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(47, 57, 129, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(47, 57, 129, 0.4);
    animation: mbillStarTwinkle 3s ease-in-out infinite;
    z-index: 1;
}

/* Larger stars */
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(2),
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(4),
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(6),
:root[data-theme="light"] .services-hero .light-particle:nth-child(2),
:root[data-theme="light"] .services-hero .light-particle:nth-child(4),
:root[data-theme="light"] .services-hero .light-particle:nth-child(6),
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(2),
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(4),
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(6) {
    width: 4px;
    height: 4px;
    box-shadow: 0 0 6px rgba(47, 57, 129, 0.5);
}

/* Star positions - About Us */
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(2) { top: 25%; right: 25%; animation-delay: 0.5s; }
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(3) { top: 45%; left: 15%; animation-delay: 1s; }
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(4) { top: 55%; right: 20%; animation-delay: 1.5s; }
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(5) { top: 35%; left: 50%; animation-delay: 0.8s; }
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(6) { bottom: 20%; right: 35%; animation-delay: 2s; }
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(7) { top: 20%; left: 60%; animation-delay: 1.2s; }
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(8) { bottom: 30%; left: 40%; animation-delay: 1.8s; }
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(9) { top: 50%; left: 70%; animation-delay: 0.6s; }
:root[data-theme="light"] .about-us-hero .light-particle:nth-child(10) { bottom: 25%; left: 10%; animation-delay: 2.2s; }

/* Star positions - Services */
:root[data-theme="light"] .services-hero .light-particle:nth-child(1) { top: 18%; left: 22%; animation-delay: 0s; }
:root[data-theme="light"] .services-hero .light-particle:nth-child(2) { top: 28%; right: 28%; animation-delay: 0.5s; }
:root[data-theme="light"] .services-hero .light-particle:nth-child(3) { top: 48%; left: 18%; animation-delay: 1s; }
:root[data-theme="light"] .services-hero .light-particle:nth-child(4) { top: 58%; right: 22%; animation-delay: 1.5s; }
:root[data-theme="light"] .services-hero .light-particle:nth-child(5) { top: 38%; left: 52%; animation-delay: 0.8s; }
:root[data-theme="light"] .services-hero .light-particle:nth-child(6) { bottom: 22%; right: 38%; animation-delay: 2s; }
:root[data-theme="light"] .services-hero .light-particle:nth-child(7) { top: 22%; left: 62%; animation-delay: 1.2s; }
:root[data-theme="light"] .services-hero .light-particle:nth-child(8) { bottom: 32%; left: 42%; animation-delay: 1.8s; }
:root[data-theme="light"] .services-hero .light-particle:nth-child(9) { top: 52%; left: 72%; animation-delay: 0.6s; }
:root[data-theme="light"] .services-hero .light-particle:nth-child(10) { bottom: 28%; left: 12%; animation-delay: 2.2s; }

/* Star positions - Technologies */
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(1) { top: 16%; left: 24%; animation-delay: 0s; }
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(2) { top: 26%; right: 26%; animation-delay: 0.5s; }
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(3) { top: 46%; left: 16%; animation-delay: 1s; }
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(4) { top: 56%; right: 24%; animation-delay: 1.5s; }
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(5) { top: 36%; left: 48%; animation-delay: 0.8s; }
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(6) { bottom: 24%; right: 32%; animation-delay: 2s; }
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(7) { top: 24%; left: 64%; animation-delay: 1.2s; }
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(8) { bottom: 34%; left: 44%; animation-delay: 1.8s; }
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(9) { top: 54%; left: 68%; animation-delay: 0.6s; }
:root[data-theme="light"] .technologies-hero .light-particle:nth-child(10) { bottom: 26%; left: 14%; animation-delay: 2.2s; }

.mbill-hero-pulse:nth-child(2) {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.mbill-hero-pulse:nth-child(3) {
    bottom: 15%;
    right: 10%;
    animation-delay: 1.5s;
}

@keyframes mbillPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        transform: scale(1.8);
        opacity: 0.2;
        box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
    }
}

.mbill-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: mbillGlow 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes mbillGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.9;
    }
}

.mbill-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: mbillShimmer 6s ease-in-out infinite;
    z-index: 1;
}

@keyframes mbillShimmer {
    0%, 100% {
        background-position: 0% 0%, 100% 100%;
    }
    50% {
        background-position: 100% 100%, 0% 0%;
    }
}

.mbill-hero .container {
    position: relative;
    z-index: 2;
    animation: mbillFadeIn 1s ease-out;
}

@keyframes mbillFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mbill-hero .page-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
    animation: mbillTitleGlow 3s ease-in-out infinite;
}

@keyframes mbillTitleGlow {
    0%, 100% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 60px rgba(255, 255, 255, 0.1);
    }
    50% {
        text-shadow: 0 0 40px rgba(255, 255, 255, 0.5), 0 0 80px rgba(255, 255, 255, 0.2);
    }
}

/* About Us Hero - Rings Animation (similar to mBill but different) */
.about-us-hero {
    padding: 140px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--primary-bg);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: aboutUsGrid 15s linear infinite;
    opacity: 0.6;
    z-index: 1;
}

@keyframes aboutUsGrid {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(60px, 60px);
    }
}

.about-us-hero-ring {
    position: absolute;
    width: 250px;
    height: 250px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    animation: aboutUsRing 4s ease-in-out infinite;
    z-index: 1;
}

.about-us-hero-ring:nth-child(2) {
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}

.about-us-hero-ring:nth-child(3) {
    bottom: 10%;
    right: 15%;
    animation-delay: 2s;
    width: 200px;
    height: 200px;
}

.about-us-hero-ring:nth-child(4) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 1s;
    width: 350px;
    height: 350px;
    border-color: rgba(255, 255, 255, 0.1);
}

@keyframes aboutUsRing {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.7;
    }
}

.about-us-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: aboutUsShimmer 6s ease-in-out infinite;
    z-index: 1;
}

@keyframes aboutUsShimmer {
    0%, 100% {
        background-position: 0% 0%, 100% 100%;
    }
    50% {
        background-position: 100% 100%, 0% 0%;
    }
}

.about-us-hero .container {
    position: relative;
    z-index: 2;
}

.about-us-hero .page-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
    animation: aboutUsTitleGlow 3s ease-in-out infinite;
}

@keyframes aboutUsTitleGlow {
    0%, 100% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 60px rgba(255, 255, 255, 0.1);
    }
    50% {
        text-shadow: 0 0 40px rgba(255, 255, 255, 0.5), 0 0 80px rgba(255, 255, 255, 0.2);
    }
}

/* About Section with Image */
.about-section-with-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-top: 2rem;
}

.about-section-text {
    flex: 1;
}

.about-section-image {
    flex: 1;
}

.about-us-image {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* About Card with Image */
.about-card-with-image {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.about-card-with-image:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.about-card-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

/* 1CustomerView specific image height */
.product-intro .about-card-image {
    height: 500px;
}

.about-card-content-bottom {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

/* Certifications Section */
.certifications-section {
    padding: 4rem 0;
    margin-top: 4rem;
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.certification-card {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: var(--transition);
}

.certification-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.certification-image {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    border-radius: 8px;
}

.certification-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-white);
}

.certification-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* CTA Section */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    position: relative;
    z-index: 1;
}

.cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-white);
}

.cta-description {
    font-size: 1.125rem;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

/* EU Projects Section */
.eu-projects {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    position: relative;
    z-index: 1;
}

.eu-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.eu-content .section-title {
    margin-bottom: 1.5rem;
}

.eu-content p {
    font-size: 1.125rem;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* Alternative Hero Effects - Different Circle Animations */

/* Customer Management - Rotating Circles */
.customer-hero-pulse {
    position: absolute;
    width: 250px;
    height: 250px;
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 50%;
    animation: customerRotate 8s linear infinite;
    z-index: 1;
}

.customer-hero-pulse:nth-child(2) {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.customer-hero-pulse:nth-child(3) {
    bottom: 20%;
    right: 15%;
    animation-delay: 4s;
}

@keyframes customerRotate {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: rotate(180deg) scale(1.3);
        opacity: 0.7;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.4;
    }
}

/* Data Analytics - Expanding Rings */
.data-hero-pulse {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    animation: dataExpand 4s ease-out infinite;
    z-index: 1;
}

.data-hero-pulse:nth-child(2) {
    top: 25%;
    left: 20%;
    animation-delay: 0s;
}

.data-hero-pulse:nth-child(3) {
    top: 25%;
    right: 20%;
    animation-delay: 1.3s;
}

.data-hero-pulse:nth-child(4) {
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 2.6s;
}

@keyframes dataExpand {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.3;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Business Process Management - Orbiting Circles */
.bpm-hero-pulse {
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: bpmOrbit 10s linear infinite;
    z-index: 1;
}

.bpm-hero-pulse:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: bpmOrbit1 10s linear infinite;
}

.bpm-hero-pulse:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: bpmOrbit2 10s linear infinite;
}

@keyframes bpmOrbit1 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(200px) rotate(0deg);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(200px) rotate(-360deg);
        opacity: 0.5;
    }
}

@keyframes bpmOrbit2 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(-200px) rotate(0deg);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) rotate(-360deg) translateX(-200px) rotate(360deg);
        opacity: 0.5;
    }
}

/* Finance Industry Solutions - Pulsing Hexagons */
.finance-hero-pulse {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: financePulse 3s ease-in-out infinite;
    z-index: 1;
}

.finance-hero-pulse:nth-child(2) {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.finance-hero-pulse:nth-child(3) {
    bottom: 15%;
    right: 10%;
    animation-delay: 1.5s;
}

.finance-hero-pulse:nth-child(4) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0.75s;
}

@keyframes financePulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.4) rotate(180deg);
        opacity: 0.7;
    }
}

/* Product Pages - Various Effects */

/* mBill - Keep original (already using mbill-hero) */

/* uOM - Floating Bubbles */
.uom-hero-pulse {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    animation: uomFloat 6s ease-in-out infinite;
    z-index: 1;
}

.uom-hero-pulse:nth-child(2) {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.uom-hero-pulse:nth-child(3) {
    top: 60%;
    right: 20%;
    animation-delay: 2s;
}

.uom-hero-pulse:nth-child(4) {
    bottom: 20%;
    left: 50%;
    animation-delay: 4s;
}

@keyframes uomFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-30px) scale(1.2);
        opacity: 0.8;
    }
}

/* mCollection - Ripple Effect */
.mcollection-hero-pulse {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: mcollectionRipple 4s ease-out infinite;
    z-index: 1;
}

.mcollection-hero-pulse:nth-child(2) {
    top: 30%;
    left: 20%;
    animation-delay: 0s;
}

.mcollection-hero-pulse:nth-child(3) {
    bottom: 30%;
    right: 20%;
    animation-delay: 2s;
}

@keyframes mcollectionRipple {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
        border-width: 3px;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.3;
        border-width: 1px;
    }
    100% {
        transform: scale(2);
        opacity: 0;
        border-width: 0px;
    }
}

/* Customer HUB - Spinning Rings */
.customerhub-hero-pulse {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px dashed rgba(0, 255, 255, 0.3);
    border-radius: 50%;
    animation: hubSpin 5s linear infinite;
    z-index: 1;
}

.customerhub-hero-pulse:nth-child(2) {
    top: 25%;
    left: 15%;
    animation-delay: 0s;
}

.customerhub-hero-pulse:nth-child(3) {
    bottom: 25%;
    right: 15%;
    animation-delay: 2.5s;
}

@keyframes hubSpin {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: rotate(180deg) scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.5;
    }
}

/* mConsent - Glowing Orbs */
.mconsent-hero-pulse {
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    animation: mconsentGlow 4s ease-in-out infinite;
    z-index: 1;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
}

.mconsent-hero-pulse:nth-child(2) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.mconsent-hero-pulse:nth-child(3) {
    bottom: 20%;
    right: 20%;
    animation-delay: 2s;
}

@keyframes mconsentGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
        box-shadow: 0 0 60px rgba(0, 255, 255, 0.6);
    }
}

/* 1CustomerView - Concentric Circles */
.onecustomer-hero-pulse {
    position: absolute;
    width: 250px;
    height: 250px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: onecustomerConcentric 5s ease-in-out infinite;
    z-index: 1;
}

.onecustomer-hero-pulse:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
}

.onecustomer-hero-pulse:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    animation-delay: 1.5s;
}

.onecustomer-hero-pulse:nth-child(4) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
    animation-delay: 3s;
}

@keyframes onecustomerConcentric {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.6;
    }
}

/* PPS - Wave Circles */
.pps-hero-pulse {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: ppsWave 6s ease-in-out infinite;
    z-index: 1;
}

.pps-hero-pulse:nth-child(2) {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.pps-hero-pulse:nth-child(3) {
    top: 20%;
    right: 15%;
    animation-delay: 2s;
}

.pps-hero-pulse:nth-child(4) {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 4s;
}

@keyframes ppsWave {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
    }
    25% {
        transform: translateY(-20px) scale(1.1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(0) scale(1.2);
        opacity: 0.5;
    }
    75% {
        transform: translateY(20px) scale(1.1);
        opacity: 0.7;
    }
}

/* mDQ - Scattered Dots */
.mdq-hero-pulse {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: mdqScatter 5s ease-in-out infinite;
    z-index: 1;
}

.mdq-hero-pulse:nth-child(2) {
    top: 15%;
    left: 20%;
    animation-delay: 0s;
}

.mdq-hero-pulse:nth-child(3) {
    top: 15%;
    right: 20%;
    animation-delay: 1s;
}

.mdq-hero-pulse:nth-child(4) {
    bottom: 15%;
    left: 20%;
    animation-delay: 2s;
}

.mdq-hero-pulse:nth-child(5) {
    bottom: 15%;
    right: 20%;
    animation-delay: 3s;
}

@keyframes mdqScatter {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(30px, -30px) scale(1.3);
        opacity: 0.9;
    }
}

/* Proactive Care Platform - Energy Rings */
.proactive-hero-pulse {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 50%;
    animation: proactiveEnergy 4s ease-in-out infinite;
    z-index: 1;
}

.proactive-hero-pulse:nth-child(2) {
    top: 25%;
    left: 15%;
    animation-delay: 0s;
}

.proactive-hero-pulse:nth-child(3) {
    bottom: 25%;
    right: 15%;
    animation-delay: 2s;
}

.proactive-hero-pulse:nth-child(4) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 1s;
}

@keyframes proactiveEnergy {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
        border-color: rgba(0, 255, 255, 0.4);
    }
    50% {
        transform: scale(1.4);
        opacity: 0.8;
        border-color: rgba(0, 255, 255, 0.8);
    }
}

/* mCash - Money Flow */
.mcash-hero-pulse {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
    animation: mcashFlow 5s ease-in-out infinite;
    z-index: 1;
}

.mcash-hero-pulse:nth-child(2) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.mcash-hero-pulse:nth-child(3) {
    top: 60%;
    right: 20%;
    animation-delay: 2.5s;
}

.mcash-hero-pulse:nth-child(4) {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 1.25s;
}

@keyframes mcashFlow {
    0%, 100% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.5;
    }
    33% {
        transform: translateX(20px) translateY(-20px) scale(1.2);
        opacity: 0.7;
    }
    66% {
        transform: translateX(-20px) translateY(20px) scale(1.1);
        opacity: 0.6;
    }
}

/* mFlow - Flow Lines */
.mflow-hero-pulse {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    animation: mflowLines 6s linear infinite;
    z-index: 1;
}

.mflow-hero-pulse:nth-child(2) {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.mflow-hero-pulse:nth-child(3) {
    bottom: 20%;
    right: 15%;
    animation-delay: 3s;
}

@keyframes mflowLines {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.5;
        border-style: solid;
    }
    50% {
        transform: rotate(180deg) scale(1.3);
        opacity: 0.7;
        border-style: dashed;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.5;
        border-style: solid;
    }
}

/* mRisk - Risk Waves */
.mrisk-hero-pulse {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 100, 100, 0.2) 0%, transparent 70%);
    animation: mriskWaves 5s ease-in-out infinite;
    z-index: 1;
}

.mrisk-hero-pulse:nth-child(2) {
    top: 25%;
    left: 20%;
    animation-delay: 0s;
}

.mrisk-hero-pulse:nth-child(3) {
    bottom: 25%;
    right: 20%;
    animation-delay: 2.5s;
}

.mrisk-hero-pulse:nth-child(4) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 1.25s;
}

@keyframes mriskWaves {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    25% {
        transform: scale(1.2);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.4);
        opacity: 0.5;
    }
    75% {
        transform: scale(1.2);
        opacity: 0.6;
    }
}

/* Finance Industry Solutions Timeline */
.finance-timeline {
    position: relative;
    max-width: 1000px;
    margin: 4rem auto;
    padding: 2rem 0;
}

.finance-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(0, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0.2) 100%);
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-item {
    position: relative;
    margin-bottom: 4rem;
    display: flex;
    align-items: center;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-marker {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 20px;
    background: var(--primary-cyan);
    border: 4px solid var(--primary-bg);
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    animation: timelinePulse 2s ease-in-out infinite;
}

@keyframes timelinePulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
    }
}

.timeline-content {
    width: 45%;
    position: relative;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-right: auto;
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-content {
    margin-left: auto;
    text-align: left;
}

.timeline-product-link {
    display: block;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    position: relative;
}

.timeline-product-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: var(--transition);
}

.timeline-product-link:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.timeline-product-link:hover::after {
    opacity: 1;
}

.timeline-product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

.timeline-product-link:hover .timeline-product-image {
    transform: scale(1.05);
}

.timeline-product-info {
    padding: 1.5rem;
}

.timeline-product-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-white);
    text-transform: none;
}

.timeline-product-subtitle {
    font-size: 0.95rem;
    color: var(--text-light);
    margin: 0;
}

@media (max-width: 768px) {
    .finance-timeline::before {
        left: 20px;
    }

    .timeline-item {
        flex-direction: row !important;
        padding-left: 3rem;
    }

    .timeline-marker {
        left: 20px;
    }

    .timeline-content {
        width: 100%;
        text-align: left !important;
    }
}

/* Responsive Design for Product Pages */
@media (max-width: 768px) {
    .product-features-grid {
        grid-template-columns: 1fr;
    }

    .product-capabilities-grid-three {
        grid-template-columns: 1fr !important;
    }

    .product-feature-card[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .product-feature-card[style*="grid-template-columns"] img {
        order: -1;
    }

    .product-feature-card[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .product-feature-card[style*="grid-template-columns: 1fr 1fr 1fr"] img:first-child {
        order: 1;
    }

    .product-feature-card[style*="grid-template-columns: 1fr 1fr 1fr"] .product-feature-content {
        order: 2;
    }

    .product-feature-card[style*="grid-template-columns: 1fr 1fr 1fr"] img:last-child {
        order: 3;
    }

    .product-features-grid[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    .product-download-card {
        flex-direction: column;
    }

    .product-download-image {
        width: 100%;
        height: 250px;
    }

    .product-download-content {
        padding: 2rem;
    }

    .product-video-wrapper {
        border-radius: 8px;
    }
}

/* Global link hover effect - underline animation */
a:not(.btn):not(.service-link):not(.billing-product-link):not(.designer2-link):not(.flag-icon):not(.logo-img):not(.footer-logo):not(.designer2-logo):not(.hamburger):not(.hamburger span):not(.nav-text):not(.dropdown-menu a):not(.footer-section ul li a):not(.nav-menu a):not(.back-link) {
    position: relative;
    text-decoration: none;
    display: inline-block;
}

a:not(.btn):not(.service-link):not(.billing-product-link):not(.designer2-link):not(.flag-icon):not(.logo-img):not(.footer-logo):not(.designer2-logo):not(.hamburger):not(.hamburger span):not(.nav-text):not(.dropdown-menu a):not(.footer-section ul li a):not(.nav-menu a):not(.back-link)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-white);
    transition: width 0.3s ease;
}

a:not(.btn):not(.service-link):not(.billing-product-link):not(.designer2-link):not(.flag-icon):not(.logo-img):not(.footer-logo):not(.designer2-logo):not(.hamburger):not(.hamburger span):not(.nav-text):not(.dropdown-menu a):not(.footer-section ul li a):not(.nav-menu a):not(.back-link):hover {
    transform: translateX(5px);
}

a:not(.btn):not(.service-link):not(.billing-product-link):not(.designer2-link):not(.flag-icon):not(.logo-img):not(.footer-logo):not(.designer2-logo):not(.hamburger):not(.hamburger span):not(.nav-text):not(.dropdown-menu a):not(.footer-section ul li a):not(.nav-menu a):not(.back-link):hover::after {
    width: 100%;
}

/* Header navigation links - only underline, no translate */
.nav-menu a,
.dropdown-menu a {
    position: relative;
    text-decoration: none;
}

.nav-menu a::after,
.dropdown-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-white);
    transition: width 0.3s ease;
}

.nav-menu a:hover::after,
.dropdown-menu a:hover::after {
    width: 100%;
}

/* Careers Hero - Career Path Animation */
.careers-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--primary-bg);
    padding: 140px 0 80px;
    text-align: center;
}

.careers-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: careersGrid 15s linear infinite;
    opacity: 0.6;
    z-index: 1;
}

@keyframes careersGrid {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

.careers-hero-star {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: careersStar 4s ease-in-out infinite;
    z-index: 1;
    opacity: 0.7;
}

.careers-hero-star:nth-child(2) {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.careers-hero-star:nth-child(3) {
    top: 25%;
    right: 15%;
    animation-delay: 0.8s;
}

.careers-hero-star:nth-child(4) {
    bottom: 30%;
    left: 20%;
    animation-delay: 1.6s;
}

.careers-hero-star:nth-child(5) {
    bottom: 20%;
    right: 10%;
    animation-delay: 2.4s;
}

.careers-hero-star:nth-child(6) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 3.2s;
}

@keyframes careersStar {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-15px) rotate(180deg) scale(1.2);
        opacity: 1;
    }
}

.careers-hero-path {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(45deg, transparent 30%, rgba(0, 200, 255, 0.05) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(0, 200, 255, 0.05) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: careersPath 6s ease-in-out infinite;
    z-index: 1;
    opacity: 0.6;
}

@keyframes careersPath {
    0%, 100% {
        background-position: 0% 0%, 0% 0%;
    }
    50% {
        background-position: 100% 100%, 100% 100%;
    }
}

.careers-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(45deg, transparent 30%, rgba(0, 200, 255, 0.05) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(0, 200, 255, 0.05) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: careersShimmer 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes careersShimmer {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

.careers-hero .page-title {
    animation: careersTitleGlow 3s ease-in-out infinite alternate;
}

@keyframes careersTitleGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(0, 200, 255, 0.5), 0 0 20px rgba(0, 200, 255, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(0, 200, 255, 0.8), 0 0 40px rgba(0, 200, 255, 0.5);
    }
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(10, 14, 31, 0.98) 0%, rgba(20, 30, 50, 0.98) 100%);
    backdrop-filter: blur(20px);
    border-top: 2px solid rgba(0, 200, 255, 0.3);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    padding: 1.5rem 0;
    z-index: 10000;
    display: none;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-banner.show {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    min-width: 300px;
}

.cookie-banner-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.cookie-banner-text a {
    color: var(--primary-cyan);
    text-decoration: underline;
    transition: var(--transition);
}

.cookie-banner-text a:hover {
    color: var(--text-white);
    text-decoration: none;
}

.cookie-banner-buttons {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.cookie-banner-buttons .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Cookie Policy Page Styles */
.policy-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.policy-section {
    margin-bottom: 3rem;
}

.policy-section h2 {
    color: var(--text-white);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 200, 255, 0.3);
}

.policy-section p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.policy-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.policy-list li {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
}

.policy-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary-cyan);
    font-weight: bold;
}

.policy-list li strong {
    color: var(--text-white);
}

.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.policy-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    transition: var(--transition);
}

.policy-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 200, 255, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 200, 255, 0.1);
}

.policy-card h3 {
    color: var(--text-white);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.policy-card p {
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}

.policy-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.policy-footer p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-style: italic;
    margin: 0;
}

/* Cookie Policy Links */
.policy-content a {
    color: var(--primary-cyan);
    text-decoration: none;
    transition: var(--transition);
}

.policy-content a:hover {
    color: var(--text-white);
    text-decoration: underline;
}

/* Cookie Banner Responsive */
@media (max-width: 768px) {
    .cookie-banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .cookie-banner-buttons {
        width: 100%;
        flex-direction: column;
    }
    
    .cookie-banner-buttons .btn {
        width: 100%;
    }
    
    .policy-grid {
        grid-template-columns: 1fr;
    }
}

/* Dark/Light Mode Toggle Switch */
.theme-toggle {
    position: fixed !important;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.theme-toggle-switch {
    position: relative;
    width: 60px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.theme-toggle-switch:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.theme-toggle-switch.light-mode {
    background-color: rgba(47, 57, 129, 0.1);
    border-color: rgba(47, 57, 129, 0.2);
}

.theme-toggle-switch.light-mode:hover {
    background-color: rgba(47, 57, 129, 0.15);
    border-color: rgba(47, 57, 129, 0.3);
}

.theme-toggle-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: var(--transition);
    flex-shrink: 0;
    margin: 0 auto; /* Center horizontally */
}

.theme-toggle-switch.light-mode .theme-toggle-icon {
    color: rgba(47, 57, 129, 0.6);
}

.theme-toggle-icon.active {
    color: var(--text-white);
    opacity: 1;
}

.theme-toggle-switch.light-mode .theme-toggle-icon.active {
    color: rgb(47, 57, 129);
}

.theme-toggle-handle {
    position: absolute;
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    top: 8px;
    z-index: 1;
}

.theme-toggle-switch.light-mode .theme-toggle-handle {
    top: calc(100% - 52px);
    background-color: rgb(47, 57, 129);
}

/* Moon icon (dark mode) */
.theme-toggle-icon.moon {
    margin-top: 4px;
}

/* Sun icon (light mode) */
.theme-toggle-icon.sun {
    margin-bottom: 4px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        left: 20px;
        bottom: 20px;
        top: auto;
        transform: none;
    }
    
    .theme-toggle-switch {
        width: 50px;
        height: 100px;
        padding: 6px;
    }
    
    .theme-toggle-handle {
        width: 38px;
        height: 38px;
    }
    
    .theme-toggle-icon {
        width: 28px;
        height: 28px;
    }
    
    .theme-toggle-switch.light-mode .theme-toggle-handle {
        top: calc(100% - 44px);
    }
}

/* Light Mode Overrides - Invert all colors */
:root[data-theme="light"] .navbar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(47, 57, 129, 0.1) !important;
}

/* Cards and backgrounds */
:root[data-theme="light"] .product-card,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .news-card,
:root[data-theme="light"] .billing-product-card,
:root[data-theme="light"] .billing-solution-card,
:root[data-theme="light"] .billing-reference-card,
:root[data-theme="light"] .product-feature-card,
:root[data-theme="light"] .product-download-card {
    background-color: rgba(47, 57, 129, 0.05) !important;
    border-color: rgba(47, 57, 129, 0.1) !important;
}

:root[data-theme="light"] .product-card:hover,
:root[data-theme="light"] .service-card:hover,
:root[data-theme="light"] .news-card:hover {
    background-color: rgba(47, 57, 129, 0.08) !important;
    border-color: rgba(47, 57, 129, 0.3) !important;
}

/* Footer - Light Mode */
:root[data-theme="light"] .footer {
    background: linear-gradient(180deg, #e9ecef 0%, #f8f9fa 100%) !important;
    border-top-color: rgba(47, 57, 129, 0.2) !important;
}

:root[data-theme="light"] .footer-content,
:root[data-theme="light"] .footer-section h3,
:root[data-theme="light"] .footer-section p,
:root[data-theme="light"] .footer-section a,
:root[data-theme="light"] .footer-description,
:root[data-theme="light"] .footer-bottom,
:root[data-theme="light"] .footer-bottom p,
:root[data-theme="light"] .footer-bottom a {
    color: rgb(47, 57, 129) !important;
}

:root[data-theme="light"] .footer-section ul li a {
    color: rgb(47, 57, 129) !important;
}

:root[data-theme="light"] .footer-section ul li a:hover {
    color: rgb(35, 43, 95) !important;
}

/* Light Mode - Borders (light blue) */
:root[data-theme="light"] .navbar {
    border-bottom-color: rgba(47, 57, 129, 0.2) !important;
}

:root[data-theme="light"] .product-card,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .news-card,
:root[data-theme="light"] .billing-product-card,
:root[data-theme="light"] .billing-solution-card,
:root[data-theme="light"] .billing-reference-card,
:root[data-theme="light"] .product-feature-card,
:root[data-theme="light"] .product-download-card,
:root[data-theme="light"] .contact-form-wrapper,
:root[data-theme="light"] .news-detail-text,
:root[data-theme="light"] .about-card-with-image,
:root[data-theme="light"] .contact-card,
:root[data-theme="light"] .reference-card,
:root[data-theme="light"] .about-card,
:root[data-theme="light"] .technologies-card,
:root[data-theme="light"] .careers-card,
:root[data-theme="light"] .eu-project-card,
:root[data-theme="light"] .references-section,
:root[data-theme="light"] .billing-references-section {
    border-color: rgba(47, 57, 129, 0.2) !important;
}

:root[data-theme="light"] .product-card:hover,
:root[data-theme="light"] .service-card:hover,
:root[data-theme="light"] .news-card:hover,
:root[data-theme="light"] .billing-product-card:hover,
:root[data-theme="light"] .billing-solution-card:hover,
:root[data-theme="light"] .billing-reference-card:hover,
:root[data-theme="light"] .product-feature-card:hover,
:root[data-theme="light"] .product-download-card:hover,
:root[data-theme="light"] .contact-form-wrapper:hover,
:root[data-theme="light"] .contact-card:hover,
:root[data-theme="light"] .reference-card:hover,
:root[data-theme="light"] .about-card:hover,
:root[data-theme="light"] .technologies-card:hover,
:root[data-theme="light"] .careers-card:hover,
:root[data-theme="light"] .eu-project-card:hover,
:root[data-theme="light"] .references-section:hover,
:root[data-theme="light"] .billing-references-section:hover {
    border-color: rgba(47, 57, 129, 0.4) !important;
}

:root[data-theme="light"] .btn-secondary {
    border-color: rgba(47, 57, 129, 0.3) !important;
    color: rgb(47, 57, 129) !important;
}

:root[data-theme="light"] .btn-secondary:hover {
    border-color: rgba(47, 57, 129, 0.5) !important;
    background-color: rgba(47, 57, 129, 0.1) !important;
}

:root[data-theme="light"] .btn-primary {
    border-color: rgb(47, 57, 129) !important;
}

:root[data-theme="light"] .dropdown-menu {
    border-color: rgba(47, 57, 129, 0.2) !important;
}

:root[data-theme="light"] .lang-switch {
    border-left-color: rgba(47, 57, 129, 0.2) !important;
}

:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
    border-color: rgba(47, 57, 129, 0.2) !important;
}

:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus {
    border-color: rgba(47, 57, 129, 0.4) !important;
}

/* Light Mode - Hero Animations */
:root[data-theme="light"] .home-hero-cyber-grid {
    background-image:
        linear-gradient(rgba(47, 57, 129, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 57, 129, 0.12) 1px, transparent 1px) !important;
}

:root[data-theme="light"] .home-hero-cyber-line {
    background: linear-gradient(180deg, transparent, rgba(47, 57, 129, 0.5), transparent) !important;
}

:root[data-theme="light"] .home-hero-cyber-pulse {
    border-color: rgba(47, 57, 129, 0.4) !important;
}

/* Light mode - billing hero animations are hidden (handled in main styles above) */

:root[data-theme="light"] .careers-hero-grid {
    background-image:
        linear-gradient(rgba(47, 57, 129, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 57, 129, 0.15) 1px, transparent 1px) !important;
}

:root[data-theme="light"] .careers-hero-star {
    background: radial-gradient(circle, rgba(47, 57, 129, 0.9) 0%, transparent 70%) !important;
}

:root[data-theme="light"] .careers-hero-path {
    background:
        linear-gradient(45deg, transparent 30%, rgba(47, 57, 129, 0.12) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(47, 57, 129, 0.12) 50%, transparent 70%) !important;
}

:root[data-theme="light"] .home-preloader-grid {
    background-image:
        linear-gradient(rgba(47, 57, 129, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 57, 129, 0.15) 1px, transparent 1px) !important;
}

:root[data-theme="light"] .home-preloader-pulse {
    border-color: rgba(47, 57, 129, 0.4) !important;
}

:root[data-theme="light"] .home-preloader-binary::after {
    color: rgba(47, 57, 129, 0.15) !important;
}

/* Logo - Light Mode (handled by JavaScript, but add filter if needed) */
:root[data-theme="light"] .logo-img,
:root[data-theme="light"] .footer-logo {
    filter: none !important;
}

/* CSS Effects - Light Mode (light blue) */
:root[data-theme="light"] .cyber-grid,
:root[data-theme="light"] .home-preloader-grid {
    background-image:
        linear-gradient(rgba(47, 57, 129, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 57, 129, 0.15) 1px, transparent 1px) !important;
}

:root[data-theme="light"] .cyber-line {
    background: linear-gradient(90deg, transparent, rgba(47, 57, 129, 0.4), transparent) !important;
}

:root[data-theme="light"] .cyber-particle {
    background-color: rgba(47, 57, 129, 0.35) !important;
}

:root[data-theme="light"] .cyber-pulse {
    border-color: rgba(47, 57, 129, 0.4) !important;
}

:root[data-theme="light"] .home-preloader-pulse {
    border-color: rgba(47, 57, 129, 0.4) !important;
}

:root[data-theme="light"] .home-preloader-binary {
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(47, 57, 129, 0.05) 2px,
            rgba(47, 57, 129, 0.05) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(47, 57, 129, 0.05) 2px,
            rgba(47, 57, 129, 0.05) 4px
        ) !important;
}

:root[data-theme="light"] .scan-line {
    background: linear-gradient(180deg, transparent, rgba(47, 57, 129, 0.3), transparent) !important;
}

:root[data-theme="light"] .code-rain {
    color: rgba(47, 57, 129, 0.5) !important;
}

/* Background effects */
:root[data-theme="light"] .cyber-background,
:root[data-theme="light"] .cyber-grid {
    opacity: 0.3;
}

/* Text colors */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6,
:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .page-title,
:root[data-theme="light"] .section-title,
:root[data-theme="light"] .product-title,
:root[data-theme="light"] .service-card h3,
:root[data-theme="light"] .news-title {
    color: rgb(47, 57, 129) !important;
}

/* Links */
:root[data-theme="light"] a:not(.btn):not(.service-link):not(.billing-product-link) {
    color: rgb(47, 57, 129) !important;
}

/* Buttons */
:root[data-theme="light"] .btn-primary {
    background-color: rgb(47, 57, 129) !important;
    color: #ffffff !important;
}

:root[data-theme="light"] .btn-primary:hover {
    background-color: rgb(35, 43, 95) !important;
}