/* Bootstrap Overrides and Custom Styles - Typography System Updated */
:root {
    --bs-primary: #0066ff;
    --bs-primary-rgb: 0, 102, 255;
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
    --bs-info: #17a2b8;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    
    /* Typography System */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    --bs-font-family-base: 'Inter', sans-serif;
    
    --white: #ffffff;
    --black: #000000;
}

/* Force Firefox compatibility */
@media (max-width: 991.98px) {
    .about-page-wrapper .about-pill-row { align-items: stretch; }
    .about-page-wrapper .about-pill-card {
        border-radius: 28px;
        padding: 30px 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    .about-page-wrapper .about-pill-icon {
        width: 64px;
        height: 64px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.45rem;
    }
    .about-page-wrapper .about-pill-card.mission .about-pill-icon {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(29, 78, 216, 0.12));
        border-color: rgba(37, 99, 235, 0.24);
        color: #1d4ed8;
    }
    .about-page-wrapper .about-pill-card.north-star .about-pill-icon {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(15, 118, 110, 0.12));
        border-color: rgba(16, 185, 129, 0.24);
        color: #0f766e;
    }
    .about-page-wrapper .about-grounded-grid { align-items: stretch; }
    .about-page-wrapper .grounded-card {
        padding: 24px 20px;
        gap: 0.75rem;
    }
    .about-page-wrapper .grounded-title {
        font-size: 1.05rem;
        color: #1e3a8a;
    }
    .about-page-wrapper .grounded-copy {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    .about-page-wrapper .milestone-badge {
        font-size: 0.8rem;
        letter-spacing: 0.12em;
        margin-bottom: 0.95rem;
    }
    .about-page-wrapper .milestone-title {
        font-size: 1.1rem;
        color: #1e3a8a;
    }
    .about-page-wrapper .milestone-copy {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    .about-page-wrapper .about-learning-card {
        padding: 26px 22px 30px;
        gap: 0.9rem;
    }
    .about-page-wrapper .about-learning-title {
        font-size: 1.14rem;
    }
    .about-page-wrapper .about-learning-list {
        gap: 0.7rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 991.98px) {
    h4, .h4 { font-size: 20px; }
    .display-1, .display-2 { font-size: 36px; }
    .display-3, .display-4 { font-size: 32px; }
    .display-5 { font-size: 28px; }
    p { font-size: 15px; }
    .lead { font-size: 17px; }
}

@media (max-width: 575.98px) {
    h1, .h1 { font-size: 28px; }
    h2, .h2 { font-size: 24px; }
    h3, .h3 { font-size: 20px; }
}

/* Animated Mesh Gradient Background - Site Wide */
#particle-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    overflow: hidden;
}

/* Animated gradient overlay */
#particle-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 85% 25%, rgba(168, 85, 247, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 45% 75%, rgba(59, 130, 246, 0.09) 0%, transparent 45%),
        radial-gradient(circle at 90% 85%, rgba(139, 92, 246, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(96, 165, 250, 0.07) 0%, transparent 45%);
    background-size: 200% 200%;
    animation: siteGradientFlow 25s ease infinite;
    opacity: 1;
}

/* Additional layer for more depth */
#particle-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 65% 55%, rgba(147, 51, 234, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 25% 80%, rgba(79, 70, 229, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 75% 15%, rgba(59, 130, 246, 0.05) 0%, transparent 40%);
    background-size: 250% 250%;
    animation: siteGradientFlow 30s ease-in-out infinite reverse;
    opacity: 0.8;
}

@keyframes siteGradientFlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 60%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 40%;
    }
}

#particle-canvas {
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0.8;
}

/* Hero layering adjustments: ensure particle background stays BEHIND text */
.hero, .hero-section, .services-hero, .hero-quantistry { position: relative; z-index: 1; }
#particle-background, #particle-background::before, #particle-background::after { z-index: -2; }
/* In case any canvas wrapper was inserted inside hero, push it back */
.hero .hero-particles, .services-hero .hero-particles { position: absolute; inset:0; z-index:-1; }

/* Mobile specific hero fix: keep animation behind, prevent stacking below */
@media (max-width: 767.98px) {
    .hero, .hero-section, .services-hero { overflow: hidden; }
    .hero .hero-particles canvas, .services-hero .hero-particles canvas { width:100%!important; height:100%!important; }
}

/* Header Fixes - Quantistry Style */
#header {
    background: transparent;
    z-index: 1050;
    padding-top: 20px;
}

#header .container {
    justify-content: space-between;
    align-items: center;
    max-width: 1230px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
}

#header .navbar {
    background-color: #ffffff4d;
    border: 1px solid #fff9;
    border-radius: 84px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 24px;
    display: flex;
    box-shadow: 0 8px 20px #b5c6da33;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.3s ease;
    min-height: 72px;
}

/* (Removed earlier duplicate mobile header block; consolidated at main mobile query below around line ~650) */

/* Generic two-column layout utility (desktop) - stack on mobile */
.nx-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 40px 56px;
    align-items: start;
}
@media (max-width: 991.98px) {
    .nx-two-col { gap: 32px 32px; }
}
@media (max-width: 575.98px) {
    .nx-two-col { gap: 28px 24px; }
}

/* Prevent text cropping in two-column sections */
.nx-two-col .col-text, .nx-two-col p, .nx-two-col li { 
    overflow: visible; 
    word-wrap: break-word; 
}

/* Slightly smaller text for large paragraphs on mid screens */
@media (max-width: 1199.98px) {
    .nx-two-col p { font-size: 0.95rem; line-height: 1.55; }
}
@media (max-width: 767.98px) {
    .nx-two-col p { font-size: 0.93rem; }
}

#header .navbar:hover {
    background-color: #ffffff66;
    box-shadow: 0 12px 32px #b5c6da4d;
}

#header .navbar-collapse {
    background-color: transparent;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

@media (min-width: 992px) {
    .core-services-section .nx-two-col {
        grid-template-columns: repeat(3, minmax(320px, 1fr)) !important;
        gap: 32px 36px;
    }
    .core-services-section .nx-two-col > [class*="col-"] {
        width: 100%;
    }
    .core-services-section .service-detail-card h3,
    .core-services-section .service-detail-card > p,
    .core-services-section .service-detail-card li { overflow-wrap: normal; word-break: normal; hyphens: manual; }

    .industries-section .nx-two-col {
        grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
        gap: 28px 32px;
    }
    .industries-section .nx-two-col > [class*="col-"] {
        width: 100%;
    }
    .industries-section .industry-card h4,
    .industries-section .industry-card p { overflow-wrap: normal; word-break: normal; hyphens: manual; }
}

.navbar-brand .brand-text {
    font-weight: 600;
    font-size: 1.25rem;
    font-family: 'Montserrat', sans-serif;
}

.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
    font-weight: 400;
    color: #374151 !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--bs-primary) !important;
}

.navbar-nav .nav-link.active {
    position: relative;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--bs-primary);
    border-radius: 1px;
}

.btn-primary {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0052cc, #003d99);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,102,255,0.3);
}

/* Dropdown Menu Styles */
#header .navbar {
    position: relative;
}

.navbar-nav .dropdown {
    position: static;
}

.navbar-nav .dropdown-toggle::after {
    content: none;
}

.navbar-nav .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.navbar-nav .dropdown-toggle .dropdown-caret {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #6366f1;
    transition: transform 0.22s ease, color 0.22s ease;
}

.navbar-nav .dropdown.show > .dropdown-toggle .dropdown-caret,
.navbar-nav .dropdown-toggle.show .dropdown-caret {
    transform: rotate(180deg);
    color: #0f172a;
}

.navbar-nav .dropdown-toggle .dropdown-caret i {
    line-height: 1;
}

.navbar-nav .mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 18px);
    width: 100%;
    padding: 32px 0;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 28px;
    box-shadow: 0 32px 64px rgba(15, 23, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
    z-index: 1050;
}

.navbar-nav .mega-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -36px;
    height: 36px;
    background: transparent;
    pointer-events: auto;
}

.navbar-nav .mega-menu.show,
.navbar-nav .dropdown:hover > .mega-menu,
.navbar-nav .dropdown.show > .mega-menu,
.navbar-nav .mega-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-menu-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 48px;
    align-items: stretch;
    padding: 0 32px;
}

.mega-menu-nav {
    padding-right: 32px;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
}

.mega-menu-list > li::marker,
.mega-menu-list > li > a::before {
    content: none;
}

.navbar-nav .mega-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.navbar-nav .mega-menu-list > li {
    margin: 0;
}

.navbar-nav .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.3rem;
    color: #0f172a;
    font-weight: 600;
    border-radius: 16px;
    transition: all 0.18s ease;
    background: transparent;
    border: 1px solid transparent;
}

.navbar-nav .dropdown > .nav-link,
.navbar-nav .dropdown > .nav-link:focus,
.navbar-nav .dropdown > .nav-link.show {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    color: var(--bs-primary);
}

.navbar-nav .dropdown-item .menu-link-text {
    flex: 1;
}

.mega-menu-feature {
    background: linear-gradient(140deg, rgba(30, 64, 175, 0.12), rgba(59, 130, 246, 0.2));
    border-radius: 26px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    position: relative;
    overflow: hidden;
}

.mega-menu-feature::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at center, rgba(79, 70, 229, 0.25), rgba(79, 70, 229, 0));
    top: -140px;
    right: -120px;
    pointer-events: none;
}

.feature-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1d4ed8;
}

.feature-title {
    font-size: 1.9rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.2;
    max-width: 19ch;
}

.feature-copy {
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 38ch;
}

.feature-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.feature-highlights li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    color: #1f2937;
}

.feature-highlights i {
    font-size: 0.8rem;
    color: #1d4ed8;
}

.feature-highlights span {
    flex: 1;
}

.btn-gradient {
    background: linear-gradient(135deg, #2563eb, #4338ca);
    border: none;
    color: #ffffff;
    border-radius: 999px;
    padding: 0.65rem 1.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
    align-self: flex-start;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.28);
    color: #fff;
}

/* Mobile navbar styling (consolidated) */
@media (max-width: 991.98px) {
    #header {
        padding-top: 15px;
    }
    
    #header .container {
        padding-left: 0; /* allow navbar itself to span */
        padding-right: 0;
    }
    
    #header .navbar {
        border-radius: 0; /* full width bar */
        margin: 0;
        padding: 12px 16px;
        min-height: 60px;
        width: 100%;
        background: rgba(255,255,255,0.94);
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    }
    
    .hero-quantistry {
        padding: 120px 0 60px;
    }
    
    .hero-left {
        min-height: 50vh;
    }
    
    .navbar-collapse {
        /* Transform into hidden off-canvas overlay by default */
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        max-width: 100%;
        background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(230,242,255,0.95));
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        padding: 5rem 2rem 3rem;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        overflow-y: auto;
        box-shadow: 0 0 0 100vmax rgba(15,23,42,0.25);
        transform: translateX(-105%);
        opacity: 0;
        pointer-events: none;
        transition: transform .45s cubic-bezier(.65,.05,.36,1), opacity .35s ease;
        border-radius: 0;
    }
    
    body.nav-open {
        overflow: hidden;
    }

    /* Show state (Bootstrap adds .show on collapse) */
    .navbar-collapse.show {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .navbar-collapse::-webkit-scrollbar { width: 6px; }
    .navbar-collapse::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; }

    /* Style nav items larger for full-screen menu */
    .navbar-nav { width: 100%; gap: .25rem; }
    .navbar-nav .nav-item { width: 100%; }
    .navbar-nav .nav-link { font-size: 1.02rem; padding: .75rem 0 !important; font-weight: 500; width: 100%; }
    .navbar-nav .dropdown-menu { position: static; float: none; background: transparent; border: 0; box-shadow: none; padding-left: .75rem; }
    .navbar-nav .dropdown-item { padding: .35rem 0; font-size: .9rem; }

    /* Custom close button (reuse toggler) positioning */
    .navbar-toggler {
        z-index: 1100;
    }

    .navbar-nav .nav-item {
        text-align: left;
    }

    /* Mobile dropdown styles */
    .navbar-nav .mega-menu {
        position: static;
        margin: 0.75rem 0 0;
        padding: 1rem 1.25rem 1.25rem;
        background: rgba(15, 23, 42, 0.92);
        border-radius: 18px;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    .navbar-nav .mega-menu.show {
        display: block;
    }

    .mega-menu-inner {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0;
    }

    .mega-menu-nav {
        padding-right: 0;
        border-right: none;
    }

    .navbar-nav .dropdown-item {
        text-align: left;
        color: #f8fafc;
        justify-content: flex-start;
        gap: 0.75rem;
        padding: 0.95rem 1.1rem;
        border-radius: 12px;
        border: 1px solid transparent;
    }

    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:focus {
        background: rgba(148, 163, 184, 0.24);
        color: #ffffff;
        border-color: transparent;
    }

    .mega-menu-feature {
        background: rgba(148, 163, 184, 0.18);
        border-radius: 16px;
        padding: 1.25rem 1.5rem;
        color: #f1f5f9;
    }

    .mega-menu-feature .feature-copy,
    .mega-menu-feature .feature-highlights li {
        color: #e2e8f0;
    }
}

/* Hero Section Fixes */
/* === QUANTISTRY-STYLE HERO === */
.hero-quantistry {
    background: transparent;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 110px 0 60px;
    position: relative;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}

.hero-quantistry .container-fluid {
    max-width: 1200px;
    margin: 0 auto;
}

.hero-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 60vh;
    padding-left: 2rem;
}

.hero-content {
    text-align: left;
    padding: 2rem 0;
    width: 100%;
    max-width: 600px;
}

.hero-left {
    padding: 0 3rem;
    z-index: 2;
}

.hero-quantistry .hero-left {
    justify-content: center;
}

.hero-quantistry .hero-content {
    text-align: center;
    margin: 0 auto;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-quantistry .hero-cta {
    display: flex;
    justify-content: center;
}

.hero-quantistry .hero-tagline,
.hero-quantistry .hero-content p {
    text-align: center;
}

.hero-tagline {
    font-size: 1rem;
    color: #1e40af;
    font-weight: 500;
    margin-bottom: 1rem;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
}

.hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}
.hero-animation { position: relative; width:100%; min-height: 500px; border-radius: 24px; overflow:hidden; background: transparent !important; }
#heroWebGL { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; background: transparent !important; border: 0; outline: none; }

.hero-title {
    font-size: clamp(3.2rem, 5.5vw, 4.4rem);
    line-height: 1.1;
    color: #1e3a8a;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 2.5rem;
    font-family: 'Montserrat', sans-serif;
    max-width: 640px;
    margin-top: 4em;
}

.hero-quantistry .hero-title {
    max-width: 680px;
}

.hero-title .text-primary {
    color: #3b82f6 !important;
    font-weight: 400;
}

/* === WHAT IS SECTION (inspired by paraUSD block) === */
.what-is-section { 
    position: relative; 
    padding: 100px 0; 
    background: transparent; 
    overflow: hidden; 
    z-index: 1;
}

.what-is-section:before {
    display: none;
}

.what-copy .gradient-text {
    background: linear-gradient(120deg,#1e3a8a,#2563eb,#3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-points li {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

.feature-points li .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg,#2563eb,#3b82f6);
    margin-top: 6px;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.15),0 0 8px rgba(59,130,246,0.4);
    flex-shrink: 0;
}

.what-visual {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    perspective: 1200px;
}

/* Video mode */
.what-visual.video-mode { position:relative; min-height:460px; border-radius:28px; background:transparent !important; box-shadow:none !important; overflow:hidden; }
.what-visual.video-mode canvas.globe-canvas { background:transparent !important; border:none !important; outline:none !important; box-shadow:none !important; display:block; } 
/* Fallback if injected styles override */
.what-visual.video-mode:before { content:""; position:absolute; inset:0; background:transparent !important; pointer-events:none; }

.what-visual .core-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg,#1e3a8a,#3b82f6 60%,#60a5fa);
    box-shadow: 0 0 0 6px rgba(255,255,255,0.4),0 15px 40px -10px rgba(30,58,138,0.45),0 0 60px rgba(59,130,246,0.6);
    animation: pulseCore 4.5s ease-in-out infinite;
}

.what-visual .orb {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg,rgba(59,130,246,0.9),rgba(147,197,253,0.7));
    box-shadow: 0 4px 14px rgba(59,130,246,0.35),0 0 18px rgba(59,130,246,0.5);
    backdrop-filter: blur(6px);
    animation: floatNode 9s linear infinite;
}

.orb-1 { top: 14%; left: 32%; animation-delay: 0s; }
.orb-2 { top: 68%; left: 70%; animation-delay: 2.2s; }
.orb-3 { top: 24%; left: 78%; animation-delay: 4.1s; }

.what-visual .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(59,130,246,0.25);
    transform: translate(-50%, -50%) rotateX(65deg);
    animation: rotateRing 18s linear infinite;
}

.ring-1 { width: 420px; height: 420px; animation-duration: 22s; }
.ring-2 { width: 300px; height: 300px; animation-duration: 16s; }

@keyframes rotateRing {
    0% { transform: translate(-50%, -50%) rotateX(65deg) rotateZ(0deg); }
    100% { transform: translate(-50%, -50%) rotateX(65deg) rotateZ(360deg); }
}

@keyframes pulseCore {
    0%,100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 6px rgba(255,255,255,0.4),0 15px 40px -10px rgba(30,58,138,0.45),0 0 60px rgba(59,130,246,0.6); }
    50% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 10px rgba(255,255,255,0.3),0 20px 55px -12px rgba(30,58,138,0.55),0 0 80px rgba(59,130,246,0.75); }
}

@keyframes floatNode {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    50% { transform: translateY(-26px) scale(1.08); filter: brightness(1.15); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@media (max-width: 991.98px) {
    .what-is-section { padding: 80px 0 60px; }
    .what-copy h2 { font-size: 2.1rem; }
    .ring-1 { width: 320px; height: 320px; }
    .ring-2 { width: 230px; height: 230px; }
    .what-visual .core-node { width: 90px; height: 90px; }
}

/* === AI PRODUCT MODULES SECTION === */
.ai-products-section { background:transparent; position:relative; overflow:hidden; z-index:1; }
.ai-modules-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.ai-module { position:relative; background:#ffffff; border:1px solid #e2e8f0; padding:1.6rem 1.4rem 1.55rem; border-radius:24px; box-shadow:0 4px 18px -6px rgba(15,23,42,0.12); transition:.45s cubic-bezier(.4,0,.2,1); overflow:hidden; }
.ai-module:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(59,130,246,0.12),rgba(99,102,241,0.08)); opacity:0; transition:.5s; }
.ai-module:hover { transform:translateY(-6px); box-shadow:0 12px 38px -10px rgba(15,23,42,0.22); }
.ai-module:hover:before { opacity:1; }
.ai-module .module-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.badge-soft { background:linear-gradient(135deg,#e0edff,#d9d9ff); color:#1e3a8a; font-size:.65rem; font-weight:600; padding:.35rem .55rem; border-radius:6px; letter-spacing:.5px; text-transform:uppercase; }
.ai-module p { font-size:.9rem; line-height:1.45; color:#334155; }
.mini-list.small { font-size:.7rem; display:flex; flex-wrap:wrap; gap:.5rem .75rem; margin:0 0 .9rem; padding:0; list-style:none; }
.mini-list.small li { background:#f1f5f9; padding:.4rem .55rem; border-radius:30px; font-weight:500; letter-spacing:.3px; color:#1e3a8a; }
.ai-module .module-link { font-size:.8rem; font-weight:600; text-decoration:none; color:#1e3a8a; position:relative; padding-right:1rem; }
.ai-module .module-link:after { content:""; position:absolute; right:.15rem; top:50%; width:.55rem; height:.55rem; border-right:2px solid #1e3a8a; border-top:2px solid #1e3a8a; transform:translateY(-50%) rotate(45deg); transition:.4s; }
.ai-module .module-link:hover:after { right:0; }
@media (max-width: 640px){ .ai-module{padding:1.3rem 1.1rem 1.35rem; border-radius:20px;} }


.hero-cta .btn {
    font-weight: 500;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.hero-cta .btn-primary {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    border: none;
    box-shadow: 0 4px 12px rgba(30,64,175,0.25);
    color: #ffffff;
    font-weight: 500;
}

.hero-cta .btn-primary:hover {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(30,64,175,0.35);
    color: #ffffff;
}

.hero-cta .btn-outline-primary {
    border: 2px solid #3b82f6;
    color: #1e40af;
    background: transparent;
    font-weight: 500;
}

.hero-cta .btn-outline-primary:hover {
    background: #3b82f6;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59,130,246,0.25);
}

/* Clean Floating Animation */
.floating-elements {
    position: relative;
    width: 450px;
    height: 450px;
    margin: 0 auto;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(147,197,253,0.2));
    border: 1px solid rgba(59,130,246,0.2);
    animation: gentleFloat 8s ease-in-out infinite;
}

.shape-1 {
    width: 60px;
    height: 60px;
    top: 20%;
    left: 30%;
    animation-delay: 0s;
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(147,197,253,0.25));
}

.shape-2 {
    width: 40px;
    height: 40px;
    top: 60%;
    left: 70%;
    animation-delay: 2s;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(196,181,253,0.22));
}

.shape-3 {
    width: 80px;
    height: 80px;
    top: 40%;
    left: 10%;
    animation-delay: 4s;
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(147,197,253,0.18));
}

.shape-4 {
    width: 35px;
    height: 35px;
    top: 70%;
    left: 40%;
    animation-delay: 1s;
    background: linear-gradient(135deg, rgba(147,197,253,0.2), rgba(219,234,254,0.3));
}

.shape-5 {
    width: 50px;
    height: 50px;
    top: 15%;
    left: 75%;
    animation-delay: 3s;
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(147,197,253,0.22));
}

.shape-6 {
    width: 25px;
    height: 25px;
    top: 80%;
    left: 15%;
    animation-delay: 5s;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(196,181,253,0.28));
}

@keyframes gentleFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(15px, -20px) scale(1.1);
        opacity: 1;
    }
}

/* Mobile responsiveness */
@media (max-width: 991.98px) {
    .hero-quantistry {
        padding: 80px 0 60px;
        text-align: center;
    }
    
    .hero-left {
        padding: 0 1.5rem;
        margin-bottom: 3rem;
    }
    
    .hero-right {
        padding: 0 1.5rem;
    }

    .hero-quantistry .hero-title {
        font-size: clamp(2.4rem, 6vw, 3.2rem);
    }
    
    .molecular-visual {
        width: 320px;
        height: 320px;
    }
    
    .hero-tagline {
        font-size: 0.9rem;
    }
    
    .hero-cta .btn {
        font-size: 1rem;
        padding: 0.75rem 2.5rem !important;
        margin: 0 auto;
        display: block;
        max-width: 200px;
    }
}

@media (max-height: 820px) {
  .hero-quantistry { padding: 80px 0 40px; }
  .hero-animation { min-height: 460px; }
}
@media (max-width: 991.98px) {
  .hero-quantistry { padding: 100px 0 50px; }
  .hero-animation { min-height: 420px; }
}

/* === CAPABILITIES GRID === */
.capabilities-section{background:transparent;color:#1f2937;position:relative;padding:100px 0;z-index:1;}
.section-intro.narrow{max-width:880px;margin:0 auto 4rem;text-align:center;}
.section-intro h2{font-size:2.5rem;font-weight:700;color:#111827 !important;margin-bottom:1rem;}
.section-intro p{font-size:1.1rem;color:#6b7280 !important;line-height:1.6;}
.capability-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:1200px;margin:0 auto;}
.cap-card{background:rgba(255,255,255,0.75);border:1px solid rgba(200,210,225,0.5);padding:2rem 1.5rem;border-radius:18px;position:relative;overflow:hidden;transition:.4s ease;box-shadow:0 4px 20px -8px rgba(30,60,90,0.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.cap-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px -10px rgba(30,60,90,0.25);} 
.cap-card h3{font-weight:600;color:#111827 !important;font-size:1.1rem;margin-bottom:0.75rem;}
.cap-card p{color:#6b7280 !important;font-size:0.9rem;line-height:1.5;margin-bottom:1rem;}
.mini-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;font-size:.75rem;}
.mini-list li{background:#f3f4f6;padding:.4rem .7rem;border-radius:6px;font-weight:500;color:#374151;}

/* === STACK SECTION === */
.stack-section{background:transparent;color:#1f2937;position:relative;padding:100px 0;z-index:1;}
.sticky-col{position:sticky;top:120px;}
.sticky-col h2{font-size:2.2rem;font-weight:700;color:#111827 !important;margin-bottom:1rem;}
.sticky-col p{color:#6b7280 !important;font-size:1rem;line-height:1.6;}
.stack-layer{background:rgba(255,255,255,0.75);border:1px solid rgba(200,210,225,0.5);padding:1.8rem 2rem;border-radius:18px;margin-bottom:24px;position:relative;overflow:hidden;box-shadow:0 4px 20px -8px rgba(30,60,90,0.15);transition:.4s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.stack-layer:hover{box-shadow:0 12px 36px -10px rgba(30,60,90,0.25);transform:translateY(-3px);} 
.stack-layer h3{font-size:1.2rem;font-weight:600;margin-bottom:.5rem;color:#111827 !important;}
.stack-layer p{color:#6b7280 !important;font-size:0.9rem;line-height:1.5;margin-bottom:.75rem;}
.stack-layer .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:.5rem;}
.stack-layer .tags span{font-size:.75rem;background:#f3f4f6;padding:.4rem .7rem;border-radius:6px;color:#374151;font-weight:500;}
.stack-progress{height:4px;width:160px;border-radius:3px;background:#e5e7eb;position:relative;margin-bottom:2rem;overflow:hidden;}
.stack-progress .bar{position:absolute;inset:0;background:linear-gradient(90deg,#3b82f6,#6366f1);animation:progressSlide 4.5s linear infinite;}
@keyframes progressSlide{0%{transform:translateX(-100%);}60%{transform:translateX(0);}100%{transform:translateX(100%);}}

/* === OUTCOMES === */
.outcomes-section{background:transparent;padding:100px 0;z-index:1;}
.outcome-tile{background:rgba(255,255,255,0.75);border:1px solid rgba(200,210,225,0.5);border-radius:18px;padding:2rem 1.5rem;box-shadow:0 4px 20px -8px rgba(30,60,90,0.15);text-align:center;transition:.4s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.outcome-tile:hover{transform:translateY(-4px);box-shadow:0 12px 36px -10px rgba(30,60,90,0.25);}
.outcome-tile .value{font-size:2.8rem;font-weight:700;line-height:1;color:#3b82f6 !important;margin-bottom:0.5rem;}
.outcome-tile .label{font-size:.85rem;color:#6b7280 !important;margin-top:.5rem;font-weight:500;line-height:1.4;}

@media (max-width:992px){.sticky-col{position:static;top:auto;margin-bottom:2rem;}}

.gradient-text {
    background: linear-gradient(135deg, #0066ff, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-primary-light {
    background-color: rgba(0, 102, 255, 0.1) !important;
}

/* === SERVICES GRID LAYOUT === */
.services-grid-container {
    background: transparent;
    padding: 1.25rem;
}

.services-grid .service-card {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    isolation: isolate;
    border-radius: 22px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 28px -8px rgba(15,30,60,0.35);
    overflow: hidden;
    margin-bottom: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-end; /* Move content to bottom */
}


.services-grid.row {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.5rem;
}

.services-grid .col-6,
.services-grid .col-md-3 {
    display: flex;
}

.services-grid .service-card {
    width: 100%;
    min-height: 240px;
}

.services-grid .service-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(5,15,30,0.7) 0%,rgba(5,15,30,0.55) 55%,rgba(5,15,30,0.35) 100%);
    z-index: 0;
    transition: .45s ease;
}

.services-grid .service-card > div {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.services-grid .service-card .title-h6, 
.services-grid .service-card .sub-txt {
    color: #fff !important; 
    letter-spacing: .5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.services-grid .service-card img {
    filter: brightness(0) saturate(100%) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.8)) drop-shadow(0 0 16px rgba(255,255,255,0.6)) drop-shadow(0 0 24px rgba(255,255,255,0.4));
    margin-bottom: 0.5rem;
    width: 72px !important;
    height: 72px !important;
    transition: all 0.3s ease;
}

.services-grid .service-card.active, 
.services-grid .service-card:hover {
    box-shadow: 0 16px 42px -10px rgba(10,25,50,.55); 
    transform: translateY(-6px);
    text-decoration: none;
} 

/* Fix: first service card transition baseline
   Set its initial transform to translate(0px, 50px), while keeping hover/active lift */
.services-grid .col-6:first-child .service-card,
.services-grid .col-md-3:first-child .service-card {
    transform: translate(0px, 50px);
}
.services-grid .col-6:first-child .service-card:hover,
.services-grid .col-6:first-child .service-card.active,
.services-grid .col-md-3:first-child .service-card:hover,
.services-grid .col-md-3:first-child .service-card.active {
    transform: translateY(-6px);
}

.services-grid .service-card:hover img {
    filter: brightness(0) saturate(100%) invert(1) drop-shadow(0 0 12px rgba(255,255,255,1)) drop-shadow(0 0 20px rgba(255,255,255,0.8)) drop-shadow(0 0 32px rgba(255,255,255,0.6));
    transform: scale(1.05);
    width: 72px !important;
    height: 72px !important;
} 

.services-grid .service-card.active:before, 
.services-grid .service-card:hover:before {
    background: linear-gradient(190deg,rgba(0,30,90,0.85) 0%,rgba(0,45,120,0.70) 65%,rgba(0,55,140,0.55) 100%);
}

/* Defensive: ensure service cards are never hidden by stray animation code - Updated Sept 17, 2025 */
.services-grid .service-card {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 991.98px) {
    .services-grid .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767.98px) { 
    .services-grid .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .services-grid.row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1.25rem;
    }
}

/* Remove background/border for active AI & ML text panel */
#services .tab-content #al-ml-solutions-tab .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Provide bottom breathing space below services grid */
#services .services-grid-container { padding-bottom: 2.5rem; }
#services { padding-bottom: 60px; }

/* Ensure service cards look balanced */
.services-section .card {
    border-radius: 16px;
}
.services-section .service-icon {
    width: 72px;
    height: 72px;
}
.services-section .service-svg { width: 40px; height: 40px; }

.services-section .section-title { line-height: 1.2; }
.services-section .section-description { max-width: 900px; }

/* Portfolio Cards Enhancement */
.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important;
}

.portfolio-overlay {
    transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1 !important;
}

.transition-all {
    transition: all 0.3s ease;
}

/* Responsive Fixes */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 80px !important;
        min-height: auto !important;
    }
    
    .display-1 {
        font-size: 2.5rem;
    }
    
    .display-4 {
        font-size: 2rem;
    }
}

/* Larger screen tweaks to avoid overly slim columns */
@media (min-width: 1200px) {
    .services-section .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .services-section .card { height: 100%; }
}

/* Section spacing consistency */
.section-padding { padding: 100px 0; z-index: 1; position: relative; }
.section-padding .section-header { margin-bottom: 50px; }

/* Contact section */
.contact-section {
    background: #f8f9fa;
    min-height: 70vh;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

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

/* Main CSS - Components and Layout */

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.navbar {
    padding: 1rem 0;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    text-decoration: none;
}

.logo-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

.nav-link {
    color: var(--gray-700);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-blue);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.what-is-section .what-copy { max-width: 560px; }
.what-is-section .what-copy h2 { line-height:1.15; }

.languages-bar { display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center; }
.languages-bar .lang-item { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.7rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#1f2937; position:relative; }
.languages.bar .lang-item img { width:34px; height:34px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.12)); }
.languages-bar .lang-item:after { content:""; position:absolute; bottom:-6px; width:18px; height:2px; background:linear-gradient(90deg,#2563eb,#3b82f6); border-radius:2px; opacity:0; transition:opacity .3s, transform .3s; transform:translateY(4px); }
.languages-bar .lang-item:hover:after { opacity:1; transform:translateY(0); }

/* ================= Tech Tabs Section ================= */
.tech-tabs-section { background:transparent; color:#0d213b; position:relative; }
.tech-tabs-section h2 { color:#111827; font-weight:700; }
.tech-tabs { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.tech-tab { background:#ffffff; color:#111; border:none; font-size:.9rem; font-weight:600; padding:14px 32px; border-radius:12px; cursor:pointer; position:relative; transition:.35s; box-shadow:0 2px 4px rgba(0,0,0,0.12); }
.tech-tab.active { background:linear-gradient(145deg,#ff0d55,#ff136d); color:#fff; box-shadow:0 6px 18px -4px rgba(255,30,90,0.45); }
.tech-tab:not(.active):hover { transform:translateY(-3px); box-shadow:0 8px 20px -6px rgba(0,0,0,0.25); }
.tech-panels { margin-top:50px; }
.tech-panel { display:none; }
.tech-panel.active { display:block; animation:fadeIn .5s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
.tech-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:50px 40px; justify-items:center; }
.tech-item { display:flex; flex-direction:column; align-items:center; gap:14px; font-size:.8rem; font-weight:600; letter-spacing:.5px; text-align:center; }
/* Increase label contrast & readability */
/* Higher contrast label (light background assumption) */
.tech-item span { color:#334155; font-weight:600; letter-spacing:.4px; font-size:.75rem; text-shadow:none; }
/* Dark mode adjustments if body has .dark-mode (optional) */
body.dark-mode .tech-tabs-section h2 { color:#ffffff; }
body.dark-mode .tech-tabs-section .tech-item span { color:#d1d5db; }

/* ===================== HOMEPAGE SECTION RESTORATION ===================== */
/* Services Tabs Section */
.our-services { position:relative; }
.services-glassmorphism { background:linear-gradient(140deg,rgba(255,255,255,0.55),rgba(255,255,255,0.25)); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.6); border-radius:40px; padding:16px; box-shadow:0 12px 42px -18px rgba(15,23,42,0.4); }
.services-glassmorphism .bg-light-box { background:linear-gradient(150deg,rgba(255,255,255,0.8),rgba(255,255,255,0.35)); border:1px solid rgba(255,255,255,0.6); backdrop-filter:blur(8px); border-radius:30px; }
.all-services-tabs .nav-link { border:0; background:transparent; padding:0; border-radius:26px; position:relative; min-height:170px; display:flex; align-items:flex-end; transition:all .45s cubic-bezier(.55,.1,.25,1); }
.all-services-tabs .nav-link > div { border:1px solid rgba(255,255,255,0); background:linear-gradient(160deg,rgba(255,255,255,0.75),rgba(255,255,255,0.3)); backdrop-filter:blur(6px); border-radius:26px; padding:20px 18px 14px; height:100%; transition:all .45s; box-shadow:0 4px 18px -8px rgba(15,23,42,0.25); }
.all-services-tabs .nav-link img { filter:drop-shadow(0 4px 6px rgba(13,79,133,.35)); }
.all-services-tabs .nav-link .title-h6 { font-size:.85rem; letter-spacing:.5px; }
.all-services-tabs .nav-link .sub-txt { font-size:.6rem; letter-spacing:1px; opacity:.8; }
.all-services-tabs .nav-link.active > div, .all-services-tabs .nav-link:hover > div { border-color:rgba(255,255,255,0.7); box-shadow:0 8px 26px -10px rgba(15,23,42,0.45); transform:translateY(-6px); }
.all-services-tabs .nav-link.active > div { background:linear-gradient(160deg,rgba(255,255,255,0.9),rgba(255,255,255,0.45)); }
.tab-content .card { background:linear-gradient(155deg,rgba(255,255,255,0.9),rgba(255,255,255,0.4)); border:1px solid rgba(255,255,255,0.65); border-radius:30px; box-shadow:0 10px 40px -14px rgba(15,23,42,0.5); }
.tab-content .card .desc { font-size:.85rem; line-height:1.5; }
@media (max-width: 991.98px){ .all-services-tabs .nav-link { min-height:150px; } }
@media (max-width: 575.98px){ .services-glassmorphism { border-radius:32px; padding:12px; } .all-services-tabs .nav-link { min-height:130px; } }
body.dark-mode .services-glassmorphism { background:linear-gradient(140deg,rgba(17,34,56,0.75),rgba(17,34,56,0.4)); border-color:rgba(255,255,255,0.15); }
body.dark-mode .services-glassmorphism .bg-light-box { background:linear-gradient(150deg,rgba(17,34,56,0.85),rgba(17,34,56,0.55)); border-color:rgba(255,255,255,0.2); }
body.dark-mode .all-services-tabs .nav-link > div { background:linear-gradient(160deg,rgba(17,34,56,0.85),rgba(17,34,56,0.45)); }
body.dark-mode .tab-content .card { background:linear-gradient(155deg,rgba(17,34,56,0.95),rgba(17,34,56,0.55)); border-color:rgba(255,255,255,0.2); }

/* Industries icon images inside existing tile-icon */
.industry-tile .tile-icon img { width:40px; height:40px; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25)); }
/* Build Section */
.build-section { position:relative; padding:100px 0 90px; overflow:hidden; }
.build-section .section-intro h2 { font-size: clamp(1.9rem,3.2vw,2.75rem); }
/* Build section background - Updated to match Quantistry light blue center tint */
.build-bg { position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 50% 50%, rgba(139, 213, 255, 0.08), transparent 70%); }
.build-gradient-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%); backdrop-filter:blur(8px); mix-blend-mode:overlay; }
.build-lines { position:absolute; inset:0; display:grid; grid-template-columns:repeat(5,1fr); opacity:0.2; }
.build-lines .line { border-left:1px solid rgba(255,255,255,0.3); backdrop-filter:blur(3px); }
.build-grid { position:relative; z-index:1; display:grid; gap:32px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
/* Build cards styled to match Quantistry Use-Case Modules - Updated Sept 17 2025 */
.build-card { 
    background-color: rgba(227, 236, 250, 0.3); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(229, 231, 235, 0.8); 
    padding: 40px 36px 44px; 
    border-radius: 20px; 
    box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.05), 0 1px 6px -1px rgba(0, 0, 0, 0.03); 
    position: relative; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
    min-height: 360px;
}
.build-card:hover { 
    transform: translateY(-2px); 
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 8px 32px -8px rgba(37, 99, 235, 0.4), 0 4px 16px -4px rgba(37, 99, 235, 0.3); 
    border-color: rgba(37, 99, 235, 0.8);
}

.build-card:hover h3 {
    color: white;
}

.build-card:hover p {
    color: rgba(255, 255, 255, 0.9);
}

.build-card:hover .learn-more {
    color: white;
}

.build-card:hover .lm-dot {
    background-color: white;
}
.build-card h3 { 
    font-size: 1.125rem; 
    font-weight: 600; 
    margin-bottom: 0; 
    color: #1e293b; 
    letter-spacing: -0.025em; 
    line-height: 1.4;
}
.build-card p { 
    font-size: 0.95rem; 
    line-height: 1.6; 
    margin-bottom: 20px; 
    color: #64748b; 
    flex-grow: 1;
    text-align: left;
    text-align-last: auto;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.build-card .bc-icon { 
    width: 48px; 
    height: 48px; 
    border-radius: 12px; 
    background: linear-gradient(135deg, #f8fafc, #e2e8f0); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 16px;
    margin-bottom: 0; 
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1); 
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
/* Header container for icon and title alignment */
.build-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.build-card-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}
.build-card .bc-icon svg { display:block; }
.learn-more { 
    font-size: 0.875rem; 
    letter-spacing: 0.025em; 
    font-weight: 500; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    position: relative; 
    color: #3b82f6; 
    margin-top: auto;
    transition: color 0.2s ease;
}
.learn-more:hover {
    color: #2563eb;
}
.learn-more .lm-dot { 
    width: 4px; 
    height: 4px; 
    border-radius: 50%; 
    background: #3b82f6; 
    display: inline-block; 
    transition: transform 0.2s ease; 
}
.learn-more:hover .lm-dot { 
    transform: scale(1.2); 
    background: #2563eb;
}
@media (max-width: 575.98px){ .build-section { padding:70px 0 60px; } .build-card { padding:24px 22px 26px; } }

/* About page focused components */
.about-page-wrapper .about-pill-row { align-items: stretch; }
.about-page-wrapper .about-pill-card {
    background: linear-gradient(150deg, rgba(255,255,255,0.95), rgba(240,244,255,0.85));
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 28px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    height: 100%;
    box-shadow: 0 22px 60px -40px rgba(15, 23, 42, 0.35);
}
.about-page-wrapper .about-pill-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ffffff;
    box-shadow: 0 18px 40px -18px rgba(37, 99, 235, 0.45);
}
.about-page-wrapper .about-pill-card.mission .about-pill-icon {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.about-page-wrapper .about-pill-card.north-star .about-pill-icon {
    background: linear-gradient(135deg, #10b981, #0f766e);
}
.about-page-wrapper .about-pill-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}
.about-page-wrapper .about-pill-copy {
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0;
}

.about-page-wrapper .about-grounded-grid { align-items: stretch; }
.about-page-wrapper .grounded-card {
    border-radius: 24px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    height: 100%;
}
.about-page-wrapper .grounded-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: inherit;
}
.about-page-wrapper .grounded-title {
    font-size: 1.08rem;
    font-weight: 600;
    color: #1e3a8a;
    margin: 0;
}
.about-page-wrapper .grounded-copy {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}
.about-page-wrapper .about-milestones { align-items: stretch; }
.about-page-wrapper .milestone-card {
    border-radius: 26px;
}
.about-page-wrapper .milestone-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
}
.about-page-wrapper .milestone-title {
    font-size: 1.12rem;
    font-weight: 600;
    color: #1e3a8a;
    margin-bottom: 0.5rem;
}
.about-page-wrapper .milestone-copy {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

.about-page-wrapper .about-learning-grid { align-items: stretch; }
.about-page-wrapper .about-learning-card {
    border-radius: 28px;
    padding: 30px 26px 32px;
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    height: 100%;
    position: relative;
}
.about-page-wrapper .about-learning-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 34px -24px rgba(37,99,235,0.3);
}
.about-page-wrapper .about-learning-icon img { width: 40px; height: 40px; }
.about-page-wrapper .about-learning-title {
    font-size: 1.18rem;
    font-weight: 600;
    color: #1e3a8a;
    margin: 0;
}
.about-page-wrapper .about-learning-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.92rem;
    line-height: 1.65;
}
.about-page-wrapper .about-learning-list li {
    position: relative;
    padding-left: 1.6rem;
}
.about-page-wrapper .about-learning-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.about-page-wrapper .about-community-grid {
    gap: 22px;
}
.about-page-wrapper .about-community-grid .community-card {
    min-height: 260px;
}

.about-page-wrapper .about-ideas-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
    margin: 0 auto;
}
.about-page-wrapper .idea-card {
    border-radius: 24px;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    color: #1e3a8a;
}
.about-page-wrapper .idea-tag {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e3a8a;
    letter-spacing: 0.02em;
}

@media (max-width: 767.98px) {
    .about-page-wrapper .about-pill-card { padding: 28px 22px; }
    .about-page-wrapper .about-pill-copy { font-size: 0.95rem; }
    .about-page-wrapper .grounded-card { padding: 20px 16px; gap: 0.65rem; }
    .about-page-wrapper .milestone-card .card-body { padding: 24px 18px; }
    .about-page-wrapper .about-learning-card { border-radius: 24px; padding: 26px 22px; }
    .about-page-wrapper .about-learning-list li { padding-left: 1.4rem; }
    .about-page-wrapper .about-community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-page-wrapper .about-ideas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 575.98px) {
    .about-page-wrapper .about-pill-row { margin-left: -8px; margin-right: -8px; }
    .about-page-wrapper .about-pill-row > [class^="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 16px;
    }
    .about-page-wrapper .about-pill-card { padding: 24px 18px; }
    .about-page-wrapper .about-pill-title { font-size: 1.05rem; }
    .about-page-wrapper .about-pill-copy { font-size: 0.85rem; }
    .about-page-wrapper .about-pill-icon { width: 52px; height: 52px; font-size: 1.25rem; }
    .about-page-wrapper .grounded-card { padding: 18px 14px; }
    .about-page-wrapper .grounded-title { font-size: 0.95rem; }
    .about-page-wrapper .grounded-copy { font-size: 0.8rem; }
    .about-page-wrapper .milestone-card .card-body { padding: 22px 16px; }
    .about-page-wrapper .milestone-title { font-size: 0.95rem; }
    .about-page-wrapper .about-learning-card { padding: 24px 20px; }
    .about-page-wrapper .about-learning-list { font-size: 0.85rem; }
    .about-page-wrapper .about-community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .about-page-wrapper .community-card { padding: 26px 22px; }
    .about-page-wrapper .about-ideas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .about-page-wrapper .idea-tag { font-size: 0.85rem; }
    .industries-section .nx-two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .industries-section .nx-two-col > [class^="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Communities Section */
.communities-section {
    position: relative;
    padding: 104px 0;
}

.communities-section .container {
    position: relative;
    z-index: 1;
    max-width: 1120px;
}

.community-cards-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.community-card {
    padding: 2.1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
    min-height: 270px;
}

.community-card:hover {
    border-color: rgba(99, 102, 241, 0.22);
}

.community-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 34px -24px rgba(37, 99, 235, 0.28);
}

.community-card-icon img {
    width: 28px;
    height: 28px;
}

.community-card-title {
    margin: 0;
    color: #0f172a;
}

.community-card-description {
    color: #475569;
    margin-bottom: 0.25rem;
    line-height: 1.65;
}

.community-card-points {
    margin: 0;
    padding-left: 0;
    color: #64748b;
    font-size: 0.9rem;
    display: grid;
    gap: 0.45rem;
    list-style: none;
}

.community-card-points li {
    position: relative;
    padding-left: 18px;
}

.community-card-points li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.community-card:hover .community-card-title,
.community-card:hover .community-card-description,
.community-card:hover .community-card-points {
    color: #111827;
}

.community-card:hover .community-card-points li::before {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
}

@media (max-width: 575.98px) {
    .communities-section {
        padding: 80px 0;
    }

    .community-card {
        padding: 28px 26px;
        min-height: auto;
    }
}

/* Blog Page */
.blog-page-wrapper {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 24%, #f5f7ff 100%);
}

.blog-hero-section {
    position: relative;
    padding: 140px 0 90px;
}

.blog-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.22), transparent 60%),
        radial-gradient(circle at 80% 0%, rgba(16, 185, 129, 0.18), transparent 55%),
        radial-gradient(circle at 50% 90%, rgba(59, 130, 246, 0.16), transparent 60%);
    opacity: 0.6;
}

.blog-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.blog-hero-badge {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-featured-section {
    padding: 0 0 90px;
}

.blog-featured-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 32px;
    box-shadow: 0 30px 70px -45px rgba(15, 23, 42, 0.45);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    overflow: hidden;
}

.blog-featured-media { position: relative; }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; }

.blog-featured-link { display: block; height: 100%; }

.blog-featured-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 320px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(129, 140, 248, 0.18));
    color: #1e3a8a;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.blog-featured-body {
    padding: 48px 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(160deg, rgba(246, 248, 255, 0.9), rgba(255, 255, 255, 0.95));
}

.blog-featured-title {
    font-size: clamp(1.8rem, 2.2vw, 2.4rem);
    font-weight: 700;
    color: #0f172a;
    margin: 24px 0 16px;
}

.blog-featured-title a { color: inherit; text-decoration: none; }
.blog-featured-title a:hover { color: #1d4ed8; }

.blog-featured-excerpt { font-size: 1rem; line-height: 1.7; }

.blog-meta {
    font-size: 0.92rem;
    color: #475569;
}

.blog-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.blog-meta-separator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.7);
}

.blog-meta-category {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
}

.blog-meta-category:hover { color: #2563eb; }

.blog-grid-section { padding: 0 0 100px; }

.blog-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 24px;
    box-shadow: 0 22px 55px -38px rgba(15, 23, 42, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}

.blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 32px 68px -40px rgba(99, 102, 241, 0.45);
}

.blog-card-media img { width: 100%; height: 220px; object-fit: cover; }

.blog-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.22));
    color: #1e3a8a;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-card-body { padding: 28px 28px 32px; }

.blog-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 14px;
}

.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: #2563eb; }

.blog-card-excerpt { font-size: 0.95rem; line-height: 1.6; }

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.blog-card:hover .blog-card-link { gap: 12px; color: #1d4ed8; }

.blog-cta-section { padding: 0 0 120px; }

.blog-cta-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(99, 102, 241, 0.12));
    border-radius: 32px;
    padding: 48px 56px;
    box-shadow: 0 40px 80px -48px rgba(37, 99, 235, 0.45);
}

.blog-cta-title {
    font-size: clamp(1.8rem, 2.3vw, 2.4rem);
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.blog-cta-copy { font-size: 1rem; }

@media (max-width: 1199.98px) {
    .blog-featured-card { grid-template-columns: 1fr; }
    .blog-featured-media img { height: 340px; }
    .blog-featured-body { padding: 36px 32px 40px; }
}

@media (max-width: 991.98px) {
    .blog-hero-section { padding: 110px 0 70px; }
    .blog-featured-section { padding-bottom: 70px; }
    .blog-grid-section { padding-bottom: 80px; }
    .blog-cta-card { padding: 40px 32px; }
}

@media (max-width: 575.98px) {
    .blog-featured-body { padding: 30px 22px 34px; }
    .blog-card-body { padding: 24px 22px 28px; }
    .blog-card-media img, .blog-card-placeholder { height: 200px; }
    .blog-cta-card { text-align: center; }
}

    /* Single Blog */
    .single-blog-wrapper {
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 30%, #f5f7ff 100%);
    }

    .single-blog-hero {
        position: relative;
        padding: 140px 0 80px;
        overflow: hidden;
    }

    .single-blog-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 18% 15%, rgba(59, 130, 246, 0.28), transparent 60%),
            radial-gradient(circle at 82% 0%, rgba(99, 102, 241, 0.2), transparent 65%),
            radial-gradient(circle at 50% 90%, rgba(14, 165, 233, 0.2), transparent 70%);
        opacity: 0.65;
    }

    .single-blog-hero .container { position: relative; z-index: 1; }

    .single-blog-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: rgba(59, 130, 246, 0.12);
        color: #1d4ed8;
        padding: 0.55rem 1.3rem;
        border-radius: 999px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .single-blog-title {
        font-size: clamp(2.4rem, 4vw, 3.4rem);
        line-height: 1.2;
        color: #0f172a;
        font-weight: 700;
        margin: 1.5rem 0;
    }

    .single-blog-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.25rem;
        color: #475569;
        font-weight: 500;
    }

    .single-blog-meta .meta-item { display: inline-flex; align-items: center; gap: 0.45rem; }
    .single-blog-meta .meta-separator {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(148, 163, 184, 0.75);
    }

    .single-blog-featured {
        max-width: 1080px;
        margin: -60px auto 60px;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 40px 80px -48px rgba(15, 23, 42, 0.38);
    }

    .single-blog-featured img { width: 100%; height: auto; display: block; }

    .single-blog-body {
        max-width: 820px;
        margin: 0 auto;
        padding: 0 1.5rem 120px;
        color: #1f2937;
        font-size: 1.05rem;
        line-height: 1.85;
    }

    .single-blog-body h2,
    .single-blog-body h3,
    .single-blog-body h4 {
        color: #0f172a;
        margin-top: 2.5rem;
        font-weight: 600;
    }

    .single-blog-body p { margin-bottom: 1.5rem; }
    .single-blog-body ul,
    .single-blog-body ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
    .single-blog-body blockquote {
        margin: 2rem 0;
        padding: 1.8rem 2rem;
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(129, 140, 248, 0.12));
        color: #1e3a8a;
        font-size: 1.15rem;
        line-height: 1.7;
        border-left: 4px solid rgba(59, 130, 246, 0.4);
    }

    .single-blog-share {
        margin-top: 60px;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
        justify-content: space-between;
    }

    .single-blog-share .share-label { font-weight: 600; color: #0f172a; }

    .single-blog-share .share-actions { display: flex; gap: 0.75rem; }
    .single-blog-share a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(59, 130, 246, 0.12);
        color: #1d4ed8;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .single-blog-share a:hover { background: rgba(29, 78, 216, 0.2); color: #1e3a8a; }

    .single-blog-nav {
        margin-top: 60px;
        padding: 40px 0;
        border-top: 1px solid rgba(148, 163, 184, 0.2);
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.5rem;
    }

    .single-blog-nav a {
        color: #1d4ed8;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
    }

    .single-blog-prev { text-align: left; }
    .single-blog-next { text-align: right; }

    .single-blog-nav a:hover { color: #2563eb; }

    .single-blog-cta {
        margin-top: 80px;
        padding: 56px;
        border-radius: 28px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(129, 140, 248, 0.12));
        box-shadow: 0 32px 72px -44px rgba(37, 99, 235, 0.45);
        text-align: center;
    }

    .single-blog-cta h2 {
        font-size: clamp(1.8rem, 2.6vw, 2.4rem);
        color: #0f172a;
        margin-bottom: 0.75rem;
    }

    .single-blog-cta p { color: #475569; margin-bottom: 1.75rem; }

    @media (max-width: 991.98px) {
        .single-blog-hero { padding: 120px 0 70px; }
        .single-blog-featured { margin: -40px auto 50px; }
        .single-blog-body { padding: 0 1.25rem 90px; }
        .single-blog-share { flex-direction: column; align-items: flex-start; gap: 1rem; }
        .single-blog-cta { padding: 42px 32px; }
        .single-blog-prev,
        .single-blog-next { text-align: left; }
    }

    @media (max-width: 575.98px) {
        .single-blog-title { font-size: clamp(2rem, 9vw, 2.4rem); }
        .single-blog-meta { gap: 0.75rem; }
        .single-blog-featured { border-radius: 20px; }
        .single-blog-body { padding: 0 1rem 70px; }
        .single-blog-cta { padding: 36px 24px; }
    }

/* Journey Section */
section.journey-wrapper {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.header-section .tagline {
    color: #ff6b6b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.header-section .main-title {
    font-size: 44px;
    font-weight: 900;
    margin-bottom: 20px;
    color: #2d3436;
    line-height: 1.2;
}

.header-section .subtitle {
    font-size: 16px;
    color: #636e72;
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 400px;
}

.btn-started {
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: #fff;
    border: none;
    padding: 14px 35px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
}

.btn-started:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.4);
}

/* Timeline */
.timeline-container {
    position: relative;
    width: 100%;
    margin-top: 50px;
}

svg.timeline-path {
    width: 100%;
    height: 300px;
    overflow: visible;
}

.timeline-path path {
    stroke: #ff6b6b;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    transition: stroke-dashoffset 2.5s ease-in-out;
}

.timeline-path.animate path {
    stroke-dashoffset: 0;
}

.timeline-step {
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
    opacity: 0;
    transition: all 1s ease;
    padding: 0 0.75rem;
}

.timeline-step.animate {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.timeline-dot {
    width: 28px;
    height: 28px;
    background: #fff;
    border: 4px solid #ff6b6b;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    box-shadow: 0 0 0 6px rgba(255, 107, 107, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Pulse & glow on hover */
.timeline-dot:hover {
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.7);
    transform: scale(1.2);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 6px rgba(255, 107, 107, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 107, 107, 0.7); }
    100% { box-shadow: 0 0 0 6px rgba(255, 107, 107, 0.2); }
}

.timeline-step h5 {
    font-size: 18px;
    font-weight: 700;
    color: #2d3436;
    margin-bottom: 8px;
}

.timeline-step p {
    font-size: 14px;
    color: #636e72;
    line-height: 1.6;
}

/* Step Positions aligned with curve */
.step-1 { top: 150px; left: 15%; }
.step-2 { top: 60px; left: 50%; }
.step-3 { top: 170px; left: 85%; }

/* Tracker */
.tracker {
    position: absolute;
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, #ff6b6b 0%, #ff0000 80%);
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(255, 107, 107, 0.8);
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-out;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

.tracker.active {
    opacity: 1;
}

@media (max-width: 768px) {
    svg.timeline-path { display: none; }
    .timeline-step { position: relative; opacity: 1; transform: none; margin-bottom: 50px; }
    .tracker { display: none; }
}


/* Industries Section */
.industries-section { position:relative; padding:100px 0; }
.industries-section .section-intro h2 { font-size: clamp(1.9rem,3.1vw,2.6rem); }
.industries-grid { display:grid; gap:32px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); position:relative; z-index:1; }
@media (max-width: 991.98px){ .industries-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; } }
@media (max-width: 575.98px){ .industries-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; } }
.industry-tile { background:linear-gradient(155deg,rgba(255,255,255,0.65),rgba(255,255,255,0.3)); border:1px solid rgba(255,255,255,0.5); box-shadow:0 4px 24px -8px rgba(15,23,42,0.25); border-radius:28px; padding:28px 26px 30px; position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:14px; transition:all .5s cubic-bezier(.55,.1,.25,1); }
.industry-tile:before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 70% 30%,rgba(56,189,248,.25),transparent 60%), radial-gradient(circle at 25% 75%,rgba(14,165,233,.2),transparent 65%); opacity:0; transition:opacity .6s; }
.industry-tile:hover { transform:translateY(-8px); box-shadow:0 12px 42px -12px rgba(15,23,42,0.5); }
.industry-tile:hover:before { opacity:.9; }
.industry-tile .tile-head { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; }
.industry-tile .tile-icon { width:48px; height:48px; border-radius:16px; background:linear-gradient(140deg,#0ea5e9,#0284c7); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px -6px rgba(2,132,199,0.55); }
.industry-tile .tile-icon .icon-letter { font-weight:700; color:#fff; font-size:.95rem; letter-spacing:.5px; }
.industry-tile .tile-title { font-size:1.05rem; font-weight:600; margin:0; letter-spacing:.5px; color:#0c355a; text-align:center; }
.industry-tile .tile-desc { font-size:.85rem; line-height:1.45; color:#0f2743; margin:4px 0 8px; text-align:center; }
.industry-tile .tile-actions { display:flex; align-items:center; justify-content:center; gap:10px; }
.industry-tile .tile-btn { --btn-bg:#0f4e88; background:var(--btn-bg); color:#fff; border:none; font-size:.75rem; letter-spacing:.5px; font-weight:600; padding:9px 16px 9px; border-radius:100px; position:relative; overflow:hidden; cursor:pointer; box-shadow:0 6px 16px -6px rgba(15,78,136,0.5); transition:background .4s, transform .4s; }
.industry-tile .tile-btn:hover { background:#0d4171; transform:translateY(-2px); }
.industry-tile .tile-more { background:rgba(255,255,255,0.85); border:1px solid rgba(0,0,0,0.06); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; cursor:pointer; transition:all .35s; }
.industry-tile .tile-more:hover { background:#fff; box-shadow:0 4px 12px -6px rgba(0,0,0,0.3); }
@media (max-width: 575.98px){ .industries-section { padding:70px 0; } .industries-grid { gap:24px; } .industry-tile { padding:24px 22px 26px; } }

/* CTA Section */
.cta-section { position:relative; padding:110px 0 120px; background:radial-gradient(circle at 25% 35%,rgba(14,165,233,.15),transparent 60%), radial-gradient(circle at 75% 65%,rgba(56,189,248,.15),transparent 65%); }
.cta-glass-card { position:relative; max-width:1100px; margin:0 auto; background:linear-gradient(150deg,rgba(255,255,255,0.75),rgba(255,255,255,0.35)); border:1px solid rgba(255,255,255,0.6); border-radius:42px; padding:70px clamp(1.5rem,3.5vw,3.6rem); box-shadow:0 12px 46px -14px rgba(15,23,42,0.5),0 0 0 1px rgba(255,255,255,0.55) inset; backdrop-filter:blur(10px); display:flex; align-items:center; }
.cta-content-flex { display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:space-between; width:100%; }
.cta-title { background:linear-gradient(120deg,#0f4e88,#0284c7 45%,#0ea5e9); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:1px; }
.cta-description { max-width:580px; color:#0f2743; }
.cta-section .btn { font-weight:600; letter-spacing:.5px; box-shadow:0 8px 26px -8px rgba(15,78,136,0.55); }
@media (max-width: 991.98px){ .cta-glass-card { padding:60px 2.2rem; border-radius:34px; } .cta-title { font-size:clamp(2rem,5vw,3rem); } }
@media (max-width: 575.98px){ .cta-section { padding:90px 0 100px; } .cta-content-flex { gap:28px; } .cta-glass-card { padding:50px 1.6rem 54px; } }

/* Minor tuning of outcomes counters for visibility */
.outcomes-section .outcome-tile { background:linear-gradient(140deg,rgba(255,255,255,0.9),rgba(255,255,255,0.55)); border:1px solid rgba(255,255,255,0.65); border-radius:28px; padding:34px 26px 36px; text-align:center; box-shadow:0 6px 26px -10px rgba(15,23,42,0.35); }
.outcome-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:30px; margin-top:40px; position:relative; z-index:1; }
@media (max-width: 991.98px){ .outcome-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
@media (max-width: 575.98px){ .outcome-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
.outcomes-section .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1.5rem; }
.outcomes-section .row > [class*="col-"] { display:flex; }
.outcomes-section .outcome-tile { width:100%; }
@media (max-width: 575.98px){
    .outcomes-section .row > [class*="col-"] { flex:0 0 50%; max-width:50%; }
}
.outcomes-section .outcome-tile .value { font-size:2.2rem; font-weight:700; background:linear-gradient(120deg,#0f4e88,#0ea5e9); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:1px; }
.outcomes-section .outcome-tile .label { font-size:.75rem; font-weight:600; letter-spacing:.5px; margin-top:10px; color:#0f2743; text-transform:uppercase; }
@media (max-width: 575.98px){ .outcomes-section { padding:80px 0; } .outcomes-section .outcome-tile { padding:28px 22px 30px; } }

/* Dark mode adjustments (if dark-mode class applied) */
body.dark-mode .build-card { background:rgba(17,34,56,0.75); border-color:rgba(255,255,255,0.15); }
body.dark-mode .build-card p, body.dark-mode .industry-tile .tile-desc, body.dark-mode .cta-description { color:#d1e2f3; }
body.dark-mode .industry-tile { background:linear-gradient(155deg,rgba(17,34,56,0.85),rgba(17,34,56,0.55)); border-color:rgba(255,255,255,0.15); }
body.dark-mode .industry-tile .tile-title { color:#e6f4ff; }
body.dark-mode .cta-glass-card { background:linear-gradient(150deg,rgba(17,34,56,0.9),rgba(17,34,56,0.55)); border-color:rgba(255,255,255,0.2); }
body.dark-mode .outcomes-section .outcome-tile { background:linear-gradient(140deg,rgba(17,34,56,0.95),rgba(17,34,56,0.6)); border-color:rgba(255,255,255,0.2); }

/* ===================== QUOTE SECTION ===================== */
.quote-section { position:relative; padding:120px 0 110px; background:linear-gradient(180deg,#f5f9fc,#f0f5fa); }
.quote-section .badge.bg-soft-primary { background:#eef4ff; color:#0f4e88; font-weight:600; letter-spacing:.5px; }
.quote-card, .quote-form-card { background:#ffffff; border:1px solid #e6eef5; border-radius:26px; padding:42px 40px 44px; box-shadow:0 10px 34px -12px rgba(15,23,42,0.15); position:relative; }
.quote-card:before, .quote-form-card:before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 80% 25%,rgba(14,165,233,.18),transparent 70%), radial-gradient(circle at 15% 80%,rgba(56,189,248,.18),transparent 65%); opacity:.4; pointer-events:none; mix-blend-mode:overlay; }
.quote-card h3 { letter-spacing:.5px; }
.quote-card .contact-list .contact-icon { width:42px; height:42px; border-radius:14px; background:linear-gradient(140deg,#0d5ec1,#1062d1); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -6px rgba(13,94,193,0.5); flex-shrink:0; }
.quote-card .contact-list a { color:#0f4e88; font-weight:500; }
.quote-card .social-inline .social-btn { width:34px; height:34px; background:#eef4fa; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#0f4e88; font-size:.8rem; transition:all .35s; }
.quote-card .social-inline .social-btn:hover { background:#0f4e88; color:#fff; }
.quote-form-card .form-label { color:#0a2f52; }
.quote-form-card .form-control, .quote-form-card .form-select { border:1px solid #d6e2ec; background:#fff; border-radius:14px; padding:.7rem .9rem; font-size:.9rem; transition:border-color .3s, box-shadow .3s; }
.quote-form-card .form-control:focus, .quote-form-card .form-select:focus { border-color:#0f4e88; box-shadow:0 0 0 3px rgba(15,78,136,0.15); }
.quote-form-card textarea.form-control { resize:vertical; min-height:140px; }
.quote-form-card .submit-btn { background:linear-gradient(120deg,#0052d9,#036bff,#0080ff); border:none; box-shadow:0 10px 28px -10px rgba(0,82,217,0.55); font-weight:600; letter-spacing:.5px; }
.quote-form-card .submit-btn:hover { filter:brightness(1.05); }
.quote-form-card .submit-btn:active { transform:translateY(1px); }
.quote-form-card .form-check-input { border:1px solid #9db4c5; }
.quote-form-card .form-check-input:checked { background-color:#0f4e88; border-color:#0f4e88; }
@media (max-width: 991.98px){ .quote-card, .quote-form-card { padding:38px 34px 40px; } }
@media (max-width: 575.98px){ .quote-section { padding:90px 0 90px; } .quote-card, .quote-form-card { padding:32px 26px 34px; } }
body.dark-mode .quote-section { background:linear-gradient(180deg,#0f2439,#0b1b2c); }
body.dark-mode .quote-card, body.dark-mode .quote-form-card { background:linear-gradient(140deg,#142d45,#13283f); border-color:#1f3a55; box-shadow:0 10px 34px -12px rgba(0,0,0,0.55); }
body.dark-mode .quote-card:before, body.dark-mode .quote-form-card:before { opacity:.55; }
body.dark-mode .quote-form-card .form-control, body.dark-mode .quote-form-card .form-select { background:#153045; border-color:#254960; color:#d6e2ec; }
body.dark-mode .quote-form-card .form-control:focus { border-color:#3aa8ff; box-shadow:0 0 0 3px rgba(58,168,255,0.25); }
body.dark-mode .quote-form-card .submit-btn { background:linear-gradient(120deg,#0d79ff,#35a2ff,#55b7ff); }

/* ===================== CTA BANNER ===================== */
.cta-banner { padding:90px 0 110px; background:transparent; position:relative; }
.cta-banner-inner { position:relative; background:#f4f8fc; border:1px solid #e1ebf3; border-radius:26px; padding:70px 70px 85px; overflow:hidden; box-shadow:0 10px 34px -14px rgba(15,23,42,0.15); isolation:isolate; }
.cta-banner-inner:before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,255,255,0.75),rgba(255,255,255,0.3)); mix-blend-mode:overlay; pointer-events:none; z-index:1; }
.cta-banner-inner .row { position:relative; z-index:3; }
.cta-banner h2 { color:#0e2237; letter-spacing:.5px; }
.cta-banner-desc { max-width:720px; color:#2a465f; font-size:1.05rem; line-height:1.45; }
.cta-banner-btn { background:#ffffff; border:1px solid #d4e2ee; font-size:1.05rem; box-shadow:0 6px 22px -10px rgba(15,23,42,0.25); text-decoration:none; color:#0e3d68; transition:all .4s; position:relative; padding:.95rem 1.5rem; will-change:transform, box-shadow; }
/* different vibe: underline sweep and gentle motion on hover (no idle loop) */
.cta-banner-btn { animation:none; }
.cta-banner-btn .status-dot { width:12px; height:12px; background:#0d62ff; border-radius:50%; box-shadow:0 0 0 6px rgba(13,98,255,0.18); transition:transform .35s ease, box-shadow .35s ease, background-color .35s ease; }
/* create an underline runner */
.cta-banner-btn::before { content:""; position:absolute; left:16px; right:16px; bottom:10px; height:2px; background:linear-gradient(90deg, transparent 0, rgba(255,255,255,.95) 45%, rgba(255,255,255,.95) 55%, transparent 100%); transform:scaleX(0); transform-origin:0 50%; opacity:0; transition:transform .55s ease, opacity .35s ease; border-radius:2px; }
/* sheen sweep on hover (kept) */
.cta-banner-btn::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.65) 50%, transparent 70%); transform:translateX(-120%) skewX(-20deg); transition:transform .9s ease; pointer-events:none; }
.cta-banner-btn:hover { background:linear-gradient(120deg,#0d62ff,#238bff); color:#fff; border-color:#0d62ff; box-shadow:0 10px 30px -12px rgba(13,98,255,0.55); transform:translateY(-2px); }
.cta-banner-btn:hover .status-dot { background:#fff; box-shadow:0 0 0 6px rgba(255,255,255,0.35); transform:translateX(4px) scale(1.05); }
.cta-banner-btn:hover::after { transform:translateX(120%) skewX(-20deg); }
.cta-banner-btn:hover::before { opacity:1; transform:scaleX(1); }
/* micro text movement for emphasis */
.cta-banner-btn .fw-semibold { transition:letter-spacing .3s ease, transform .3s ease; }
.cta-banner-btn:hover .fw-semibold { letter-spacing:.02em; transform:translateX(2px); }
.cta-wave { position:absolute; inset:-18% -30%; width:220%; height:140%; background:radial-gradient(ellipse at 16% 72%, rgba(13,98,255,0.16) 0%, rgba(13,98,255,0) 62%), radial-gradient(ellipse at 68% 28%, rgba(35,139,255,0.12) 0%, rgba(35,139,255,0) 65%); opacity:.65; animation:waveShift 30s ease-in-out infinite; pointer-events:none; z-index:0; }
.cta-wave:before, .cta-wave:after { content:""; position:absolute; inset:-22% -18%; background:radial-gradient(ellipse at 15% 45%, rgba(13,98,255,0.25) 0%, rgba(13,98,255,0) 70%); mix-blend-mode:screen; opacity:.6; animation:waveDrift 36s cubic-bezier(.55,.03,.37,.99) infinite; }
.cta-wave:after { inset:-18% -12%; background:radial-gradient(ellipse at 82% 55%, rgba(99,190,255,0.2) 0%, rgba(99,190,255,0) 72%); animation-duration:44s; animation-direction:reverse; animation-delay:-8s; opacity:.5; }
@keyframes waveShift { 0% { transform:translateX(-38%); } 50% { transform:translateX(-6%); } 100% { transform:translateX(-38%); } }
@keyframes waveDrift { 0% { transform:translateX(0); } 50% { transform:translateX(-12%); } 100% { transform:translateX(0); } }
.cta-ambient { position:absolute; inset:-5% 0; z-index:2; overflow:hidden; pointer-events:none; }
.cta-ambient .cta-orb { position:absolute; display:block; border-radius:999px; background:linear-gradient(125deg, rgba(13,98,255,0.4), rgba(120,182,255,0.16)); filter:blur(0); opacity:.75; animation-fill-mode:both; mix-blend-mode:screen; }
.cta-ambient .orb-one { width:360px; height:190px; top:12%; left:-32%; animation:orbGlideA 30s ease-in-out infinite alternate; }
.cta-ambient .orb-two { width:280px; height:170px; bottom:16%; left:-28%; animation:orbGlideB 24s ease-in-out infinite alternate; }
.cta-ambient .orb-three { width:420px; height:210px; top:48%; left:-42%; animation:orbGlideC 36s ease-in-out infinite alternate; }
@keyframes orbGlideA { 0% { transform:translateX(0) translateY(-6%); } 100% { transform:translateX(150%) translateY(8%); } }
@keyframes orbGlideB { 0% { transform:translateX(0) translateY(6%); } 100% { transform:translateX(135%) translateY(-10%); } }
@keyframes orbGlideC { 0% { transform:translateX(0) translateY(-4%); } 100% { transform:translateX(160%) translateY(10%); } }
@media (max-width: 991.98px){ .cta-banner-inner { padding:60px 50px 75px; } .cta-banner { padding:70px 0 90px; } }
@media (max-width: 575.98px){ .cta-banner-inner { padding:50px 32px 70px; } .cta-banner { padding:60px 0 80px; } .cta-banner-btn { width:100%; justify-content:center; } .cta-ambient { display:none; } }
body.dark-mode .cta-banner-inner { background:#142a3d; border-color:#1d3b53; box-shadow:0 10px 34px -12px rgba(0,0,0,0.55); }
body.dark-mode .cta-banner h2 { color:#e7f4ff; }
body.dark-mode .cta-banner-desc { color:#c2d6e4; }
body.dark-mode .cta-banner-btn { background:#17354b; border-color:#224b63; color:#e0f2ff; }
body.dark-mode .cta-banner-btn:hover { background:linear-gradient(120deg,#0d62ff,#2d9eff); color:#fff; border-color:#0d62ff; }
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
    .cta-banner-btn { animation:none !important; }
    .cta-banner-btn .status-dot { animation:none !important; }
    .cta-banner-btn::after { transition:none !important; }
}

/* ===================== SERVICE DETAIL PAGES ===================== */
.service-custom-software-page {
    padding-top: clamp(120px, 14vh, 160px);
    position: relative;
}

/* ===================== ABOUT PAGE ===================== */
.about-page-wrapper {
    position: relative;
    background: linear-gradient(160deg, rgba(245,249,255,0.95), rgba(255,255,255,1) 45%);
}
.about-page-wrapper .about-hero-section {
    position: relative;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}
.about-page-wrapper .about-hero-section header {
    animation: fadeInUp 0.8s ease-out;
}
.about-page-wrapper .card {
    transition: transform .35s ease, box-shadow .35s ease;
}
.about-page-wrapper .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -18px rgba(13,98,255,0.35);
}
.about-page-wrapper .bg-primary-subtle {
    background: linear-gradient(135deg, rgba(227,239,255,0.95), rgba(235,245,255,0.92)) !important;
    border: 1px solid rgba(13,98,255,0.12);
}
.about-page-wrapper img.rounded-3 {
    box-shadow: 0 18px 44px -16px rgba(15,23,42,0.4);
}
.about-hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(620px, 95vh, 860px);
    padding: clamp(6rem, 12vw, 9rem) clamp(1.5rem, 6vw, 5rem);
    overflow: hidden;
}
.about-hero-animated-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(10, 1fr);
    opacity: 0.75;
    pointer-events: none;
}
.about-hero-grid-tile {
    position: relative;
}
.about-hero-grid-tile::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: rgba(102,126,234,0.34);
    box-shadow:
        3.5rem 0 0 -0.45rem rgba(102,126,234,0.25),
        -3.5rem 0 0 -0.45rem rgba(102,126,234,0.25),
        0 3.5rem 0 -0.45rem rgba(102,126,234,0.22),
        0 -3.5rem 0 -0.45rem rgba(102,126,234,0.22),
        3.5rem 3.5rem 0 -0.55rem rgba(59,130,246,0.18),
        3.5rem -3.5rem 0 -0.55rem rgba(59,130,246,0.18),
        -3.5rem 3.5rem 0 -0.55rem rgba(59,130,246,0.18),
        -3.5rem -3.5rem 0 -0.55rem rgba(59,130,246,0.18);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.68s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.55s ease,
                opacity 0.45s ease;
    will-change: transform, box-shadow, background-color, opacity;
}
.about-hero-grid-tile:nth-child(5n)::before {
    background: rgba(99,102,241,0.34);
}
.about-hero-grid-tile:nth-child(7n)::before {
    background: rgba(14,165,233,0.28);
}
.about-hero-grid-tile.is-active::before,
.about-hero-grid-tile:hover::before,
.about-hero-grid-tile:focus-visible::before {
    transform: translate(-50%, -50%) scale(5.1);
    box-shadow:
        0 0 0 1.8rem rgba(59,130,246,0.12),
        0 0 0 2.8rem rgba(125,211,252,0.1),
        0 0 0 3.8rem rgba(148,163,184,0.08);
    background: rgba(180,205,255,0.92);
}
.about-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 960px;
    text-align: center;
}
.about-hero-copy h1 {
    line-height: 1.12;
}
.about-hero-copy p {
    max-width: 640px;
    margin: 0 auto;
}
.about-page-content {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
@media (prefers-reduced-motion: reduce) {
    .about-hero-grid-tile::before {
        transition: none;
    }
}
@media (max-width: 1199.98px) {
    .about-hero-section {
        padding: clamp(5.5rem, 11vw, 7.5rem) clamp(1.5rem, 6vw, 4rem);
    }
    .about-hero-animated-grid {
        grid-template-columns: repeat(10, 1fr);
    }
}
@media (max-width: 991.98px) {
    .about-hero-section {
        min-height: clamp(540px, 90vh, 720px);
        padding: clamp(5rem, 14vw, 7rem) clamp(1.25rem, 7vw, 3rem);
    }
    .about-hero-inner {
        max-width: 720px;
    }
    .about-hero-copy h1 {
        font-size: clamp(2.25rem, 6.6vw, 3rem);
    }
    .about-hero-copy p {
        font-size: clamp(1.05rem, 2.6vw, 1.2rem);
    }
}
@media (max-width: 575.98px) {
    .about-hero-section {
        min-height: clamp(480px, 92vh, 640px);
        padding: clamp(4.5rem, 18vw, 6rem) clamp(1rem, 8vw, 2.25rem);
    }
    .about-hero-animated-grid {
        grid-template-columns: repeat(8, 1fr);
    }
    .about-hero-copy h1 {
        font-size: clamp(2rem, 9vw, 2.5rem);
    }
    .about-hero-copy p {
        font-size: clamp(1rem, 3.6vw, 1.15rem);
    }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 991.98px) {
    .about-page-wrapper { padding-top: clamp(90px, 16vw, 120px); }
}
@media (max-width: 575.98px) {
    .about-page-wrapper { padding-top: 80px; }
    .about-page-wrapper .about-hero-section { padding-top: 2rem; }
}

.service-custom-software-page .glass-surface {
    background: linear-gradient(135deg, rgba(255,255,255,0.76), rgba(246,250,255,0.42)) !important;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 18px 44px -18px rgba(15,23,42,0.38);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.service-custom-software-page .glass-surface:hover,
.service-custom-software-page .glass-surface:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 30px 64px -28px rgba(13,98,255,0.45);
    border-color: rgba(13,98,255,0.55);
}
.service-custom-software-page .glass-surface .card-body,
.service-custom-software-page .glass-surface p,
.service-custom-software-page .glass-surface li {
    color: rgba(14,34,55,0.82);
}
.service-custom-software-page .glass-surface h3,
.service-custom-software-page .glass-surface h4,
.service-custom-software-page .glass-surface .h5,
.service-custom-software-page .glass-surface .h6 {
    color: #0e2237;
}
.service-custom-software-page .section-title {
    position: relative;
    padding-left: 36px;
    letter-spacing: .015em;
}
.service-custom-software-page .section-title::before {
    content:"";
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    width:22px;
    height:22px;
    border-radius:10px;
    background:linear-gradient(135deg,#0d62ff,#7ad7ff);
    box-shadow:0 8px 18px -8px rgba(13,98,255,0.65);
}
.service-custom-software-page .section-title::after {
    content:"";
    position:absolute;
    left:26px;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:42px;
    background:linear-gradient(180deg, rgba(13,98,255,0.0) 0%, rgba(13,98,255,0.4) 60%, rgba(13,98,255,0) 100%);
}
.service-custom-software-page .badge {
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(230,240,255,0.48));
    border: 1px solid rgba(13,98,255,0.18);
    box-shadow: 0 8px 18px -12px rgba(15,23,42,0.35);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-custom-software-page .badge:hover,
.service-custom-software-page .badge:focus {
    transform: translateY(-3px);
    border-color: rgba(13,98,255,0.42);
    box-shadow: 0 16px 28px -16px rgba(13,98,255,0.45);
}
.service-custom-software-page .timeline-step {
    position: relative;
    padding: 1.5rem 1.6rem 1.5rem 2.6rem;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(250,252,255,0.92), rgba(232,243,255,0.75));
    box-shadow: 0 18px 44px -26px rgba(15,23,42,0.45);
    border: 1px solid rgba(255,255,255,0.65);
}
.service-custom-software-page .timeline-step::before {
    content:"";
    position:absolute;
    left:18px;
    top:22px;
    width:6px;
    height: calc(100% - 44px);
    border-radius:4px;
    background:linear-gradient(180deg, rgba(13,98,255,0.7), rgba(122,215,255,0.4));
}
.service-custom-software-page .timeline-step + .timeline-step { margin-top: 1.2rem; }
.service-custom-software-page .timeline-step .badge { margin-left: -8px; }
.service-custom-software-page section:not(:first-of-type) {
    position: relative;
}
.service-custom-software-page section:not(:first-of-type)::before {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:min(90%, 1080px);
    height:1px;
    background:linear-gradient(90deg, rgba(13,98,255,0), rgba(13,98,255,0.25), rgba(13,98,255,0));
    opacity:.85;
}
@media (max-width: 991.98px){
    .service-custom-software-page { padding-top: clamp(96px, 18vw, 130px); }
    .service-custom-software-page .section-title { padding-left: 32px; }
}
@media (max-width: 575.98px){
    .service-custom-software-page { padding-top: 88px; }
    .service-custom-software-page .section-title::after { height:32px; }
}

/* ===================== CONTACT FORM SECTION ===================== */
.contact-form-section { 
    background: transparent; 
    position: relative; 
}
.contact-form-section:before { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    background: radial-gradient(circle at 80% 15%, rgba(14,165,233,.18), transparent 60%), radial-gradient(circle at 15% 85%, rgba(2,132,199,.15), transparent 65%); 
    opacity: .4; 
    pointer-events: none; 
}
.contact-info-card, .contact-form-card { 
    background: #ffffff; 
    border: 1px solid #e3edf3; 
    border-radius: 26px; 
    padding: 42px 40px 44px; 
    box-shadow: 0 10px 34px -14px rgba(15,23,42,0.18); 
    position: relative; 
}
.contact-info-card h3 { 
    letter-spacing: .5px; 
}
.contact-info-card .ci-icon { 
    width: 38px; 
    height: 38px; 
    border-radius: 12px; 
    background: #0d5ec1; 
    color: #fff; 
    font-size: 1rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 6px 16px -6px rgba(13,94,193,0.45); 
}
.social-btn-sm { 
    width: 34px; 
    height: 34px; 
    background: #eef4fa; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: .75rem; 
    color: #0f4e88; 
    text-decoration: none; 
    transition: all .35s; 
}
.social-btn-sm:hover { 
    background: #0f4e88; 
    color: #fff; 
}
.contact-form-card .form-label { 
    color: #0a2f52; 
}
.contact-form-card .form-control, .contact-form-card .form-select { 
    border: 1px solid #d2dfe9; 
    background: #fff; 
    border-radius: 14px; 
    padding: .7rem .9rem; 
    font-size: .9rem; 
    transition: border-color .3s, box-shadow .3s; 
}
.contact-form-card .form-control:focus, .contact-form-card .form-select:focus { 
    border-color: #0f4e88; 
    box-shadow: 0 0 0 3px rgba(15,78,136,0.15); 
}
.contact-form-card textarea { 
    resize: vertical; 
}
.contact-submit-btn { 
    background: linear-gradient(120deg, #0052d9, #036bff, #0080ff); 
    border: none; 
    font-weight: 600; 
    letter-spacing: .5px; 
    box-shadow: 0 10px 28px -10px rgba(0,82,217,0.55); 
    padding: .95rem 1.25rem; 
    border-radius: 14px; 
}
.contact-submit-btn:hover { 
    filter: brightness(1.05); 
}
.contact-submit-btn:active { 
    transform: translateY(1px); 
}
@media (max-width: 991.98px){ .contact-info-card, .contact-form-card { padding:38px 34px 40px; } }
@media (max-width: 575.98px){ .contact-info-card, .contact-form-card { padding:32px 26px 34px; } .contact-form-section { padding:70px 0 80px; } }

/* Robot Mascot on Contact Form */
.contact-form-wrapper {
    position: relative;
    padding-top: 80px;
}

.robot-mascot {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

.robot-image {
    width: 180px;
    height: auto;
    display: block;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.25));
    animation: robotFloat 3s ease-in-out infinite;
}

@keyframes robotFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.robot-image:hover {
    animation: robotWave 0.6s ease-in-out;
}

@keyframes robotWave {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

@media (max-width: 991.98px) {
    .robot-mascot {
        top: -30px;
    }
    
    .robot-image {
        width: 150px;
    }
}

@media (max-width: 767.98px) {
    .contact-form-wrapper {
        padding-top: 60px;
    }
    
    .robot-mascot {
        top: -25px;
    }
    
    .robot-image {
        width: 120px;
    }
}

body.dark-mode .contact-form-section { 
    background: transparent; 
}
body.dark-mode .contact-form-section:before { 
    opacity: .55; 
}
body.dark-mode .contact-info-card, body.dark-mode .contact-form-card { 
    background: #132a3f; 
    border-color: #1f3a55; 
    box-shadow: 0 10px 34px -12px rgba(0,0,0,0.55); 
}
body.dark-mode .contact-form-card .form-control, body.dark-mode .contact-form-card .form-select { 
    background: #17354b; 
    border-color: #254960; 
    color: #d6e2ec; 
}
body.dark-mode .contact-form-card .form-control:focus { 
    border-color: #3aa8ff; 
    box-shadow: 0 0 0 3px rgba(58,168,255,0.25); 
}
body.dark-mode .contact-submit-btn { 
    background: linear-gradient(120deg, #0d79ff, #35a2ff, #55b7ff); 
}
/* Icon container updated to allow real SVG <img> tags */
/* Glassmorphism icon container */
.tech-item .icon { width:80px; height:80px; border-radius:26px; background:rgba(255,255,255,0.06); position:relative; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px -4px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.06),0 0 0 6px rgba(255,255,255,0.02); overflow:hidden; backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); }
.tech-item .icon:before { content:""; position:absolute; inset:1px; border-radius:inherit; background:linear-gradient(160deg,rgba(255,255,255,0.25),rgba(255,255,255,0.04)); pointer-events:none; mix-blend-mode:overlay; }
.tech-item .icon:after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 30% 25%,rgba(255,255,255,0.35),rgba(255,255,255,0) 60%); opacity:.9; pointer-events:none; }
/* Direct <img> inside icon */
.tech-item .icon img { width:60%; height:60%; object-fit:contain; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35)); transition:transform .5s; }
/* Hover effect subtle scale */
.tech-panel .tech-item:hover .icon img { transform:scale(1.08); }
.tech-item .icon.android { background:#0d0d0d url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="%23a4c639"><path d="M17.6 9l1.8-3.1c.1-.2.1-.5-.2-.6-.2-.1-.5-.1-.6.2l-1.9 3.2c-1.1-.5-2.3-.8-3.7-.8s-2.6.3-3.7.8L5.4 5.5c-.1-.2-.4-.3-.6-.2-.2.1-.3.4-.2.6L6.4 9C4.4 10.2 3 12.4 3 15v3c0 .6.4 1 1 1h1v2c0 .6.4 1 1 1s1-.4 1-1v-2h10v2c0 .6.4 1 1 1s1-.4 1-1v-2h1c.6 0 1-.4 1-1v-3c0-2.6-1.4-4.8-3.4-6zM8 13c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm8 0c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/></svg>') center/44px 44px no-repeat; }
.tech-item .icon.ios { background:#0d0d0d url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M16.365 1.43c0 1.14-.416 2.087-1.247 2.84-.94.87-1.955 1.37-3.04 1.29-.053-1.1.415-2.09 1.337-2.93.92-.85 2.03-1.33 3.3-1.45.043.08.053.16.053.25h-.403zM20.69 17.26c-.53 1.2-.79 1.75-1.48 2.82-.96 1.48-2.31 3.33-3.98 3.35-1.48.02-1.86-.93-3.86-.93-2 0-2.42.91-3.9.95-1.66.03-2.93-1.69-3.9-3.17-2.68-4.03-2.96-8.76-1.3-11.28 1.18-1.82 3.04-2.88 4.8-2.88 1.78 0 2.9.97 4.37.97 1.42 0 2.28-.98 4.32-.98 1.57 0 3.23.86 4.4 2.35-3.86 2.13-3.24 7.68.33 8.75z"/></svg>') center/40px 40px no-repeat; }
.tech-item .icon.swift { background:#0d0d0d url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="%23fa6423" d="M112.4 35.7c-4.2-15.3-21.9-22.1-38.9-15.1-3.2-3.7-7.1-7-11.6-9.7C55 8.2 47 6 38.4 6 19.9 6 4.6 16.9 4.6 30.1c0 7.9 4.8 14.9 12.3 19.9-.9 2.6-1.4 5.3-1.4 8 0 17.2 17.7 31.2 39.5 31.2 5.2 0 10.3-.7 15.1-2 7.5 5.1 16.7 8.1 26.6 8.1 3.7 0 7.3-.4 10.8-1.2 3-.7 5.9-1.6 8.7-2.7 1.9-.8 3.8-1.7 5.5-2.7 1.6-.9 3.1-1.9 4.5-3 3.9-3.1 6.9-6.8 8.6-10.8 4.6-10.5 2.7-22.8-2.7-40.2z"/></svg>') center/42px 42px no-repeat; }
/* Additional icons can be added similarly (placeholders kept minimal) */
.tech-item .icon.react { background:#0d0d0d url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><g fill="none" stroke="%2357d5ff" stroke-width="12"><ellipse cx="128" cy="128" rx="26" ry="26" fill="%23111"/><ellipse cx="128" cy="128" rx="80" ry="30"/><ellipse cx="128" cy="128" rx="80" ry="30" transform="rotate(60 128 128)"/><ellipse cx="128" cy="128" rx="80" ry="30" transform="rotate(120 128 128)"/></g></svg>') center/44px 44px no-repeat; }
.tech-item .icon.flutter { background:#0d0d0d linear-gradient(145deg,#0e2a47,#09111a); }
.tech-item .icon.kotlin { background:#0d0d0d linear-gradient(135deg,#7f3df4,#ff2fae); }
.tech-item .icon.xamarin { background:#0d0d0d linear-gradient(135deg,#0c65a7,#14b4ff); }
.tech-item .icon.ionic { background:#0d0d0d linear-gradient(145deg,#0a1626,#0f2138); }
.tech-item .icon.next { background:#0d0d0d; }
.tech-item .icon.node { background:#0d0d0d linear-gradient(145deg,#0f3d20,#082313); }
.tech-item .icon.python { background:#0d0d0d linear-gradient(145deg,#1d3d63,#10263a); }
.tech-item .icon.django { background:#0d0d0d linear-gradient(145deg,#0a2d26,#041512); }
.tech-item .icon.laravel { background:#0d0d0d linear-gradient(145deg,#3e0d0d,#180404); }
.tech-item .icon.php { background:#0d0d0d linear-gradient(145deg,#292b5a,#16172f); }
.tech-item .icon.go { background:#0d0d0d linear-gradient(145deg,#0c4a5d,#062e3b); }
.tech-item .icon.java { background:#0d0d0d linear-gradient(145deg,#3d2b0c,#1d1405); }
.tech-item .icon.rust { background:#0d0d0d linear-gradient(145deg,#2e2e2e,#121212); }
.tech-item .icon.postgres { background:#0d0d0d linear-gradient(145deg,#0d2f4a,#071722); }
.tech-item .icon.mysql { background:#0d0d0d linear-gradient(145deg,#1a3136,#0d181a); }
.tech-item .icon.mongodb { background:#0d0d0d linear-gradient(145deg,#123d23,#081c10); }
.tech-item .icon.redis { background:#0d0d0d linear-gradient(145deg,#4a0d0d,#1e0606); }
.tech-item .icon.elastic { background:#0d0d0d linear-gradient(145deg,#1d1d3a,#0c0c18); }
.tech-item .icon.kafka { background:#0d0d0d linear-gradient(145deg,#262626,#101010); }
.tech-item .icon.dynamo { background:#0d0d0d linear-gradient(145deg,#17324a,#0a1620); }
.tech-item .icon.clickhouse { background:#0d0d0d linear-gradient(145deg,#4a3904,#221b02); }
.tech-item .icon.docker { background:#0d0d0d linear-gradient(145deg,#0b2742,#081b2e); }
.tech-item .icon.kubernetes { background:#0d0d0d linear-gradient(145deg,#112a5c,#081636); }
.tech-item .icon.terraform { background:#0d0d0d linear-gradient(145deg,#2c1463,#140732); }
.tech-item .icon.github { background:#0d0d0d linear-gradient(145deg,#242426,#111); }
.tech-item .icon.aws { background:#0d0d0d linear-gradient(145deg,#2d1f07,#140e03); }
.tech-item .icon.azure { background:#0d0d0d linear-gradient(145deg,#042d5c,#02152c); }
.tech-item .icon.gcp { background:#0d0d0d linear-gradient(145deg,#272b11,#101204); }
.tech-item .icon.vercel { background:#0d0d0d; }
.tech-item .icon.wordpress { background:#0d0d0d linear-gradient(145deg,#0d2f44,#061722); }
.tech-item .icon.strapi { background:#0d0d0d linear-gradient(145deg,#2d1763,#140a30); }
.tech-item .icon.sanity { background:#0d0d0d linear-gradient(145deg,#631717,#300a0a); }
.tech-item .icon.ghost { background:#0d0d0d linear-gradient(145deg,#1e1e1e,#101010); }
.tech-item .icon.shopify { background:#0d0d0d linear-gradient(145deg,#1f3314,#0f180a); }
.tech-item .icon.wagtail { background:#0d0d0d linear-gradient(145deg,#083e4a,#032126); }
.tech-item .icon.drupal { background:#0d0d0d linear-gradient(145deg,#0d3b63,#061b2a); }
.tech-item .icon.contentful { background:#0d0d0d linear-gradient(145deg,#28364a,#121a22); }
.tech-item .icon.magento { background:#0d0d0d linear-gradient(145deg,#4a1f04,#240f02); }
.tech-item .icon.bigcommerce { background:#0d0d0d linear-gradient(145deg,#1e1f26,#0d0e11); }
.tech-item .icon.woocommerce { background:#0d0d0d linear-gradient(145deg,#2f1a44,#160c22); }
.tech-item .icon.stripe { background:#0d0d0d linear-gradient(145deg,#1b1680,#0e0a40); }
.tech-item .icon.paypal { background:#0d0d0d linear-gradient(145deg,#092c53,#041628); }
.tech-item .icon.razorpay { background:#0d0d0d linear-gradient(145deg,#0d2a63,#06132f); }
.tech-item .icon.shopifyplus { background:#0d0d0d linear-gradient(145deg,#332507,#191202); }
.tech-item .icon.fastapi { background:#0d0d0d linear-gradient(145deg,#0d4a45,#062824); }
.tech-item .icon.nest { background:#0d0d0d linear-gradient(145deg,#4a0d28,#200513); }
.tech-item .icon.flask { background:#0d0d0d linear-gradient(145deg,#2f2f2f,#121212); }
.tech-item .icon.micronaut { background:#0d0d0d linear-gradient(145deg,#1c2d4a,#0c1422); }
.tech-item .icon.kratos { background:#0d0d0d linear-gradient(145deg,#1f1f1f,#0e0e0e); }
.tech-item .icon.remix { background:#0d0d0d linear-gradient(145deg,#111,#000); }
.tech-panel .tech-item:hover .icon { box-shadow:0 10px 26px -8px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.15),0 0 0 6px rgba(255,255,255,0.04); transform:translateY(-6px); }
.tech-panel .tech-item .icon { transition:.5s; }

@media (max-width: 992px){
    .tech-grid { gap:40px 30px; }
    .tech-item .icon { width:66px; height:66px; }
}
@media (max-width: 600px){
    .tech-tabs { gap:10px; }
    .tech-tab { padding:10px 18px; font-size:.75rem; }
    .tech-grid { grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:34px 26px; }
}
/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 8px;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: var(--gray-700);
    transition: var(--transition);
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
    color: #ffffff;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}

.mobile-menu-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-item {
    margin-bottom: 1.5rem;
}

.mobile-nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 500;
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.mobile-nav-link:hover {
    color: var(--primary-blue);
    padding-left: 1rem;
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
}

.hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 80vh;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-blue);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2rem;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.title-line {
    display: block;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 500px;
}

.hero-cta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.btn-lg {
    padding: 20px 40px;
    font-size: 1.1rem;
}

.hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-blue);
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* AI Brain Animation */
.ai-brain-container {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.ai-brain {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
}

.brain-svg {
    width: 100%;
    height: 100%;
    max-width: 400px;
    opacity: 0.9;
    filter: drop-shadow(0 0 20px rgba(0, 102, 255, 0.4));
    animation: brainPulse 4s ease-in-out infinite;
}

@keyframes brainPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.02);
        opacity: 1;
    }
}

/* Hero Canvas */
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.brain-core {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--gradient-primary);
    position: relative;
    animation: pulse-glow 3s ease-in-out infinite;
}

.brain-core::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: inner-pulse 2s ease-in-out infinite reverse;
}

.neural-network {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
}

.node {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-cyan);
    animation: node-pulse 2s ease-in-out infinite;
}

.node-1 { top: 20px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.node-2 { top: 50%; right: 20px; transform: translateY(-50%); animation-delay: 0.5s; }
.node-3 { bottom: 20px; left: 50%; transform: translateX(-50%); animation-delay: 1s; }
.node-4 { top: 50%; left: 20px; transform: translateY(-50%); animation-delay: 1.5s; }

.connection {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-cyan), var(--primary-blue));
    opacity: 0.6;
    animation: connection-flow 3s linear infinite;
}

.connection-1 {
    top: 26px;
    left: 50%;
    width: 100px;
    transform: translateX(-50%) rotate(45deg);
    transform-origin: left center;
}

.connection-2 {
    top: 50%;
    right: 26px;
    width: 100px;
    transform: translateY(-50%) rotate(135deg);
    transform-origin: left center;
    animation-delay: 1s;
}

.connection-3 {
    bottom: 26px;
    left: 50%;
    width: 100px;
    transform: translateX(-50%) rotate(-45deg);
    transform-origin: left center;
    animation-delay: 2s;
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.float-element {
    position: absolute;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-blue);
    border: 1px solid rgba(59,130,246,0.2);
    animation: float 6s ease-in-out infinite;
}

.float-element:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.float-element:nth-child(2) { top: 20%; right: 10%; animation-delay: 1.5s; }
.float-element:nth-child(3) { bottom: 20%; left: 15%; animation-delay: 3s; }
.float-element:nth-child(4) { bottom: 10%; right: 20%; animation-delay: 4.5s; }

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-500);
}

.scroll-line {
    width: 2px;
    height: 30px;
    background: var(--gradient-primary);
    animation: scroll-bounce 2s ease-in-out infinite;
}

.scroll-text {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-badge {
    display: inline-block;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-blue);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--gray-900);
}

.section-description {
    font-size: 1.1rem;
    color: var(--gray-600);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

/* Services Section */
.services-section {
    background: var(--gray-50);
}

.service-svg {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 102, 255, 0.3);
}

.service-card:hover .service-svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}

/* AI/ML Section Styling for better alignment with service cards */
#al-ml-solutions-tab .card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 3rem;
}

#al-ml-solutions-tab .title-h5 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 1rem;
}

#al-ml-solutions-tab .desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 2rem;
}

#al-ml-solutions-tab .list-gp-circle li {
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

#al-ml-solutions-tab .list-gp-circle li .desc {
    color: #475569;
    font-weight: 500;
    margin-bottom: 0;
}
.services-overview .so-block{position:relative;padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem);} 
.services-overview .so-block + .so-block{margin-top:clamp(1rem,3vw,2.75rem);border-top:1px solid rgba(15,40,70,0.06);} 
.services-overview .section-title{font-weight:700;letter-spacing:-.5px;background:linear-gradient(120deg,#1e3a8a,#2563eb,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.services-overview .glass{background:rgba(255,255,255,0.55);backdrop-filter:saturate(140%) blur(18px);-webkit-backdrop-filter:saturate(140%) blur(18px);border:1px solid rgba(255,255,255,0.45);border-radius:18px;box-shadow:0 8px 28px -8px rgba(30,60,110,0.15),0 2px 6px -2px rgba(30,60,110,0.12);} 
.services-overview .glass.strong{background:linear-gradient(145deg,rgba(255,255,255,0.7),rgba(255,255,255,0.5));}
.services-overview .so-panel{position:relative;display:flex;flex-direction:column;}
.services-overview .so-panel-body{padding:1.4rem 1.5rem;}
.services-overview .so-check{transition:transform .35s, box-shadow .4s;} 
.services-overview .so-check:hover{transform:translateY(-4px);box-shadow:0 10px 26px -10px rgba(30,70,140,0.25);} 

/* New styling for updated cards */
.services-overview .so-check-new {
    background-color: rgba(227, 236, 250, 0.3);
    border: 1px solid rgb(233, 236, 239) !important;
    border-radius: 20px !important;
    padding: 40px 36px !important;
    transition: transform .35s, box-shadow .4s;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.services-overview .so-check-new:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px -10px rgba(30,70,140,0.25);
}

.services-overview .so-check-new .icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.services-overview .so-check-new div {
    flex: 1;
} 
.services-overview .so-kpi{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:1.75rem 1.5rem;} 
.services-overview .so-kpi-value{font-size:2.25rem;font-weight:800;background:linear-gradient(90deg,#2563eb,#6366f1);-webkit-background-clip:text;background-clip:text;color:transparent;} 
.services-overview .so-kpi-label{font-size:.85rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:#1e293b;opacity:.7;margin-top:.35rem;} 
.services-overview .so-quote{padding:1.5rem 1.5rem;} 
.services-overview .so-quote p{font-size:.95rem;line-height:1.5;} 
.services-overview .so-quote:before{content:"";position:absolute;top:14px;left:18px;width:34px;height:34px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,0.9),rgba(255,255,255,0));opacity:.55;pointer-events:none;}
.services-overview .so-catalog .so-card{border:1px solid rgba(255,255,255,0.55);background:rgba(255,255,255,.5);backdrop-filter:blur(14px);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .45s, transform .45s;} 
.services-overview .so-catalog .so-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -12px rgba(37,99,235,0.28);} 
.services-overview .so-catalog .so-card-media{position:relative;height:150px;border-radius:0;} 
.services-overview .so-catalog .so-card-media:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,31,68,0) 0%,rgba(13,31,68,0.5) 95%);} 
.services-overview .so-catalog .so-card-badge{position:absolute;top:10px;left:10px;font-size:.6rem;letter-spacing:.5px;padding:.3rem .55rem;border-radius:30px;background:rgba(255,255,255,.85);color:#0f3e91;font-weight:600;} 
.services-overview .so-catalog .so-card-body{padding:1rem 1rem 1.15rem;} 
.services-overview .so-catalog .so-card-title{font-weight:600;letter-spacing:.2px;} 
.services-overview .so-catalog .so-card-desc{opacity:.75;}
.services-overview .so-filters button{background:rgba(255,255,255,.65);border:1px solid rgba(30,60,110,0.12);} 
.services-overview .so-filters button.active{background:linear-gradient(90deg,#2563eb,#3b82f6);color:#fff;border-color:#2563eb;box-shadow:0 4px 14px -4px rgba(37,99,235,0.5);} 
.services-overview .so-filters button:not(.active):hover{background:rgba(255,255,255,.9);} 
.services-overview .so-features-cta .so-panel{height:100%;}
.services-overview .so-features-cta .so-cta{height:100%;}
.services-overview .so-inquiry .so-cta{box-shadow:0 14px 38px -14px rgba(37,99,235,0.35);} 
.services-overview .so-inquiry .so-cta:hover{box-shadow:0 18px 48px -12px rgba(37,99,235,0.45);} 
.services-overview .tracking-wide{letter-spacing:.08em;}
.services-overview .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
@media (min-width:992px){
  .services-overview .so-block{padding-top:clamp(3.5rem,4vw,5.25rem);padding-bottom:clamp(3.5rem,4vw,5.25rem);} 
  .services-overview .so-catalog .so-card-media{height:170px;} 
}
/* === End Services Overview Structured Layout Additions === */

/* === Reconstructed Footer & Global Section Styles (Restored) === */
.footer {position:relative;color:#1e293b;font-size:.95rem;line-height:1.5;background:linear-gradient(180deg,#f8faff 0%,#ffffff 60%,#e6eef7 100%);} 
.footer a{text-decoration:none;color:#1e3a8a;transition:color .3s;} 
.footer a:hover{color:#0d56e0;} 
.footer-main{padding:4rem 0 2rem;position:relative;} 
.footer-content{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start;} 
.footer-brand .footer-logo{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem;} 
.footer-logo-text{font-weight:700;font-size:1.05rem;letter-spacing:.5px;background:linear-gradient(90deg,#0066ff,#6366f1);-webkit-background-clip:text;background-clip:text;color:transparent;} 
.footer-description{max-width:380px;font-size:.85rem;opacity:.75;margin-bottom:1.25rem;} 
.footer-social{margin-top:1.75rem;} 
.footer-social-animated{display:grid;grid-template-columns:repeat(4, 64px);grid-auto-rows:64px;gap:20px;padding:0;margin:0;list-style:none;position:relative;justify-content:flex-start;align-content:start;} 
/* grid span on hover disabled to avoid layout shift */
.footer-social-animated li{position:relative;width:64px;height:64px;border-radius:64px;background:linear-gradient(145deg,#ffffff,#eef4ff);box-shadow:0 12px 28px rgba(23,43,77,0.12);transition:transform .35s ease, box-shadow .35s ease;display:flex;align-items:center;justify-content:center;overflow:visible;cursor:pointer;}
.footer-social-animated li::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(45deg,var(--i),var(--j));opacity:.25;transition:opacity .5s ease;z-index:1;pointer-events:none;} 
.footer-social-animated li::after{content:"";position:absolute;top:12px;width:100%;height:100%;border-radius:inherit;background:linear-gradient(45deg,var(--i),var(--j));filter:blur(18px);opacity:0;transition:opacity .5s ease;z-index:0;} 
.footer-social-animated li:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(24,64,120,0.28);z-index:20;} 
.footer-social-animated li:hover::before{opacity:.9;} 
.footer-social-animated li:hover::after{opacity:.45;} 
.footer-social-anchor{position:relative;display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;text-decoration:none;padding:0 18px 0 13px;gap:12px;z-index:10;overflow:visible;} 
.footer-social-anchor::after{content:"";position:absolute;left:24px;top:50%;height:48px;width:168px;border-radius:999px;background:linear-gradient(45deg,var(--i),var(--j));box-shadow:0 10px 24px rgba(24,64,120,0.28);transform:translateY(-50%) scaleX(0);transform-origin:left center;opacity:0;transition:transform .28s ease, opacity .28s ease;z-index:1;pointer-events:none;}
.footer-social-anchor .icon{display:flex !important;align-items:center;justify-content:center;font-size:1.6rem;color:#000000 !important;transition:all .5s ease;line-height:1;position:relative;z-index:2;font-weight:900;background:rgba(255,255,255,0.9);border-radius:50%;width:40px;height:40px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,0.2);} 
.footer-social-anchor .icon svg{color:#2c5282;width:16px;height:16px;display:inline-block;position:relative;z-index:101;opacity:1;visibility:visible;transition:color .35s ease;}
.footer-social-animated li .title{position:absolute;left:68px;top:50%;transform:translateY(-50%) translateX(8px);opacity:0;background:transparent;color:#ffffff;padding:0 16px;font-size:.9rem;font-weight:800;letter-spacing:.06em;white-space:nowrap;z-index:3;pointer-events:none;transition:opacity .25s ease, transform .25s ease;}
/* SVG icon styling - guaranteed to be visible */
.footer-social-anchor .icon svg path { fill:currentColor; }
.footer-social-animated li:hover .title, .footer-social-animated li:focus-within .title{opacity:1 !important;transform:translateY(-50%) translateX(0);transition-delay:.05s;visibility:visible !important;display:block !important;}
.footer-social-animated li:hover .footer-social-anchor::after, .footer-social-animated li:focus-within .footer-social-anchor::after{opacity:1;transform:translateY(-50%) scaleX(1);} 
/* Brand icon color on hover/focus (fallbacks to base if vars missing) */
.footer-social-animated li:hover .icon svg, .footer-social-animated li:focus-within .icon svg{color:var(--icon-color, var(--i, #2c5282));}
.footer-social-animated li:hover .footer-social-anchor::after, .footer-social-animated li:focus-within .footer-social-anchor::after{opacity:1;transform:translateY(-50%) scaleX(1);} 
.footer-social-animated li:focus-within{box-shadow:0 18px 38px rgba(24,64,120,0.3);} 
.footer-social-animated li:focus-within::before{opacity:1;} 
.footer-social-animated li:focus-within::after{opacity:.45;} 
.footer-social-anchor:focus-visible{outline:3px solid rgba(255,255,255,0.6);outline-offset:6px;} 
.footer-social-anchor ion-icon{pointer-events:none;} 
@media (max-width: 575.98px){.footer-social-animated{grid-template-columns:repeat(4, 58px);grid-auto-rows:58px;gap:16px;}.footer-social-animated li{width:58px;height:58px;}.footer-social-animated li:hover,.footer-social-animated li:focus-within{transform:translateY(-2px);width:58px;grid-column:auto;}.footer-social-anchor{padding:0;gap:0;}.footer-social-animated li .title{display:none !important;}} 
.footer-links{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));} 
.footer-title{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;color:#0f3e91;} 
.footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;} 
.footer-link{font-size:.78rem;font-weight:500;opacity:.85;} 
.footer-link:hover{opacity:1;} 
.footer-bottom{border-top:1px solid rgba(15,40,70,0.08);padding:1.25rem 0;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(12px);} 
.footer-bottom-content{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;font-size:.7rem;font-weight:500;letter-spacing:.25px;} 
.footer-legal{display:flex;flex-wrap:wrap;gap:.85rem;} 
.footer-legal-link{position:relative;padding-right:.5rem;} 
.footer-legal-link:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(30,50,80,0.25);} 
.footer-legal-link:last-child:after{display:none;} 
@media (max-width:768px){
    .footer-main{padding:3rem 0 1.5rem;} 
    .footer-content{gap:2rem;} 
    .footer-links{grid-template-columns:repeat(2,minmax(140px,1fr));} 
}

/* Back To Top / FAB */
.back-to-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border:none;border-radius:16px;background:linear-gradient(145deg,#0066ff,#4f46e5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 22px -8px rgba(0,86,200,0.55);opacity:0;pointer-events:none;transition:.4s;} 
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);} 
.back-to-top:hover{transform:translateY(-4px);box-shadow:0 14px 32px -8px rgba(0,86,200,0.6);} 
.fab-container{position:fixed;right:20px;bottom:90px;display:flex;flex-direction:column;align-items:flex-end;z-index:800;} 
.fab-main{width:58px;height:58px;border-radius:22px;background:linear-gradient(145deg,#ffffff,#e6edf4);color:#0f3e91;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(30,60,110,.3),inset 0 0 0 1px rgba(255,255,255,.8);cursor:pointer;transition:.4s;} 
.fab-main:hover{transform:translateY(-4px);} 
.fab-menu{display:flex;flex-direction:column;gap:.65rem;margin-top:.85rem;transform:translateY(10px);opacity:0;pointer-events:none;transition:.4s;} 
.fab-container.open .fab-menu{transform:translateY(0);opacity:1;pointer-events:auto;} 
.fab-item{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#ffffff,#e6eef5);box-shadow:0 4px 10px -2px rgba(30,50,90,.25),inset 0 0 0 1px rgba(255,255,255,.75);color:#0f3e91;position:relative;} 
.fab-item:before{content:attr(data-tooltip);position:absolute;right:105%;top:50%;transform:translateY(-50%) scale(.9);background:#0f3e91;color:#fff;font-size:.6rem;font-weight:600;padding:.35rem .5rem;border-radius:6px;letter-spacing:.5px;opacity:0;pointer-events:none;transition:.3s;white-space:nowrap;} 
.fab-item:hover:before{opacity:1;transform:translateY(-50%) scale(1);} 

/* Homepage Hero (restored generic styles if missing) */
.hero-section{position:relative;padding:6rem 0 4rem;} 
.hero-section .hero-headline{font-weight:700;letter-spacing:-1px;font-size:clamp(2.4rem,5vw,3.2rem);line-height:1.1;background:linear-gradient(120deg,#0f3e91,#2563eb,#4f46e5);-webkit-background-clip:text;background-clip:text;color:transparent;} 
.hero-section .hero-subhead{font-size:1.05rem;max-width:640px;opacity:.8;} 
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem;} 
.hero-metrics{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:2.5rem;} 
.hero-metric{min-width:140px;} 
.hero-metric-value{font-weight:700;font-size:1.75rem;background:linear-gradient(90deg,#2563eb,#6366f1);-webkit-background-clip:text;background-clip:text;color:transparent;} 
.hero-metric-label{font-size:.65rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase;opacity:.7;margin-top:.25rem;} 
@media (max-width: 768px){
    .hero-section{padding:4.5rem 0 3rem;} 
    .hero-actions{justify-content:flex-start;} 
    .hero-metrics{gap:1rem;margin-top:2rem;} 
}
/* === End Reconstructed Footer & Global Section Styles === */

/* --------------------------------------------------------------
   Service pages layout + CTA polish
--------------------------------------------------------------- */

main.service-page {
    padding-top: 0;
    background: #ffffff;
}

main.service-page section {
    padding-block: clamp(3.25rem, 4vw, 5rem);
    scroll-margin-top: clamp(7rem, 10vw, 9rem);
}

main.service-page section + section {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

main.service-page section:nth-of-type(even) {
    position: relative;
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.85) 0%, rgba(255, 255, 255, 0.97) 100%);
}

main.service-page section:nth-of-type(even)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 10%, rgba(14, 165, 233, 0.08), transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.08), transparent 60%);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

main.service-page section:nth-of-type(even) > * {
    position: relative;
    z-index: 1;
}

main.service-page .service-hero {
    position: relative;
    margin-top: 100px;
    margin-bottom: 0;
    padding: clamp(4rem, 6vw, 6rem) 0 clamp(4rem, 6vw, 6rem) 0 !important;
    border-radius: 0;
    background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 255, 0.6) 100%);
    border: none;
    box-shadow: none;
    overflow: hidden;
}

main.service-page .service-hero::before,
main.service-page .service-hero::after {
    content: "";
    position: absolute;
    width: clamp(22rem, 30vw, 32rem);
    height: clamp(22rem, 30vw, 32rem);
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.18), rgba(14, 165, 233, 0.12) 40%, transparent 70%);
    filter: blur(60px);
    opacity: 0.85;
    pointer-events: none;
}

main.service-page .service-hero::before {
    top: -30%;
    left: -15%;
}

main.service-page .service-hero::after {
    bottom: -35%;
    right: -15%;
    background: radial-gradient(circle at center, rgba(236, 72, 153, 0.12), rgba(99, 102, 241, 0.15) 40%, transparent 70%);
}

main.service-page .service-hero .container,
main.service-page .service-hero .row,
main.service-page .service-hero .col-md-6,
main.service-page .service-hero .col-lg-6 {
    position: relative;
    z-index: 1;
}

main.service-page .service-hero .col-md-6:first-child,
main.service-page .service-hero .col-lg-6:first-child {
    opacity: 0;
    transform: translateY(24px);
    animation: serviceFadeUp 0.85s ease forwards;
}

main.service-page .service-hero .col-md-6:last-child,
main.service-page .service-hero .col-lg-6:last-child {
    opacity: 0;
    transform: translateY(24px);
    animation: serviceFadeUp 0.85s ease 0.18s forwards;
}

main.service-page .service-hero .ratio {
    border-radius: clamp(1.5rem, 3vw, 2rem);
    box-shadow: 0 40px 70px -45px rgba(15, 23, 42, 0.45);
    border: none;
}

main.service-page .section-title {
    font-size: clamp(1.75rem, 2.2vw, 2.35rem);
    font-weight: 600;
    line-height: 1.2;
}

main.service-page .card {
    position: relative;
    border-radius: 1rem;
    border: 1px solid rgba(99, 102, 241, 0.08);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(236, 242, 255, 0.92));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform 0.32s ease, box-shadow 0.32s ease;
    box-shadow: 0 26px 60px -48px rgba(15, 23, 42, 0.55);
    overflow: hidden;
    opacity: 0;
    transform: translateY(28px);
    animation: serviceFadeUp 0.85s ease 0.12s forwards;
}

main.service-page .card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 32px 72px -32px rgba(79, 70, 229, 0.35);
}

main.service-page .card-body {
    padding: 1.75rem;
}

main.service-page .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

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

main.service-page .card > * {
    position: relative;
    z-index: 1;
}

main.service-page .timeline-step {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.75rem;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 12px 28px -20px rgba(15, 23, 42, 0.3);
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(28px);
    animation: serviceFadeUp 0.9s ease 0.18s forwards;
}

main.service-page .timeline-step + .timeline-step {
    margin-top: 1rem;
}

main.service-page .timeline-step::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(59, 130, 246, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 0;
}

main.service-page .timeline-step:hover::before {
    opacity: 1;
}

main.service-page .timeline-step > * {
    position: relative;
    z-index: 1;
}

main.service-page .timeline-step .badge {
    letter-spacing: 0.06em;
}

main.service-page .badge.bg-primary-subtle {
    background-color: rgba(13, 110, 253, 0.12) !important;
    color: #0d6efd !important;
}

main.service-page .tech-tile {
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 12px 24px -18px rgba(15, 23, 42, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    opacity: 0;
    transform: translateY(24px);
    animation: serviceFadeUp 0.85s ease 0.24s forwards;
}

main.service-page .tech-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px -20px rgba(15, 23, 42, 0.28);
}

main.service-page .tech-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 0;
}

main.service-page .tech-tile:hover::before {
    opacity: 1;
}

main.service-page .tech-tile > * {
    position: relative;
    z-index: 1;
}

/* Old CTA section styles - REMOVED to avoid conflicts with new design below */

.btn-cta-animate {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 2.8rem;
    background: linear-gradient(135deg, #22d3ee, #6366f1);
    border: none;
    border-radius: 50px;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 18px 35px -15px rgba(99, 102, 241, 0.65);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
    overflow: hidden;
}

.btn-cta-animate::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: cta-shimmer 2.4s ease-in-out infinite;
}

.btn-cta-animate:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 24px 48px -18px rgba(79, 70, 229, 0.72);
}

.btn-cta-animate:hover::after {
    animation-duration: 1.6s;
}

.btn-cta-animate:focus-visible {
    outline: 3px solid rgba(34, 211, 238, 0.75);
    outline-offset: 4px;
}

@keyframes cta-shimmer {
    0% {
        transform: translateX(-100%);
    }
    60% {
        transform: translateX(150%);
    }
    100% {
        transform: translateX(150%);
    }
}

@keyframes serviceFadeUp {
    0% {
        opacity: 0;
        transform: translateY(28px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-cta-animate,
    .btn-cta-animate::after,
    main.service-page .service-hero .col-md-6,
    main.service-page .service-hero .col-lg-6,
    main.service-page .card,
    main.service-page .timeline-step,
    main.service-page .tech-tile,
    main.service-page .cta-section {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 991.98px) {
    main.service-page section {
        padding-block: clamp(2.5rem, 6vw, 3.5rem);
    }

    main.service-page .cta-section {
        border-radius: 18px;
    }
}

@media (max-width: 575.98px) {
    .btn-cta-animate {
        width: 100%;
    }
}

/* ============================================================
   SEAMLESS HOMEPAGE LAYOUT - Professional Single-Flow Design
   ============================================================ */

/* Remove all section borders and create smooth transitions */
body, #page, main {
    background: linear-gradient(180deg, #f8faff 0%, #ffffff 35%, #fefeff 65%, #f4f7fc 100%);
}

/* Hero section - anchors the top */
.hero-quantistry {
    padding: clamp(6rem, 10vh, 8rem) 0 clamp(4rem, 8vh, 6rem);
    margin-bottom: 0;
    border-bottom: none;
}

/* Build section - seamless connection */
.build-section {
    padding: clamp(4rem, 8vh, 6rem) 0 clamp(4rem, 8vh, 6rem);
    margin-top: 0;
    border-top: none;
    background: transparent;
}

.build-section .build-bg {
    opacity: 0.15;
}

/* What-is section - flow continuation */
.what-is-section {
    padding: clamp(4rem, 8vh, 6rem) 0 clamp(4rem, 8vh, 6rem);
    margin-top: 0;
    background: transparent;
    border-top: none;
}

/* Services section - integrated flow */
.our-services, #services {
    padding: clamp(4rem, 8vh, 6rem) 0 clamp(4rem, 8vh, 6rem);
    margin-top: 0;
    background: transparent;
    border-top: none;
}

/* Remove visual section dividers */
section + section {
    border-top: none !important;
    margin-top: 0 !important;
}

/* Infographic-style numbered process cards */
.process-infographic {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2.5rem;
    padding: 2rem 0;
    margin: 3rem 0;
}

.process-step {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.92));
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 20px 45px -35px rgba(15, 23, 42, 0.22);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px -30px rgba(99, 102, 241, 0.35);
}

.process-step-number {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -8px rgba(99, 102, 241, 0.5), 0 0 0 4px #ffffff;
}

.process-step-icon {
    width: 72px;
    height: 72px;
    margin: 1rem auto 1.5rem;
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.06));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(99, 102, 241, 0.12);
}

.process-step-icon svg {
    width: 36px;
    height: 36px;
    color: #3b82f6;
}

.process-step h4 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #1e3a8a;
}

.process-step p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* Timeline connector between process steps */
.process-infographic .process-step::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 100%;
    width: calc(100% - 40px);
    height: 2px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0.1));
    z-index: -1;
}

.process-infographic .process-step:last-child::after {
    display: none;
}

@media (max-width: 991.98px) {
    .process-infographic {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2rem;
    }
    
    .process-infographic .process-step::after {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .process-infographic {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* Improve typography hierarchy - reduce text clutter */
.section-intro h2,
.services-header h2 {
    font-size: clamp(2rem, 3vw, 2.5rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 1rem !important;
}

.section-intro p,
.services-header p {
    font-size: clamp(1rem, 1.15vw, 1.1rem) !important;
    line-height: 1.7 !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #64748b !important;
}

.lead {
    font-size: clamp(1rem, 1.1vw, 1.08rem) !important;
    line-height: 1.65 !important;
}

/* Reduce excessive whitespace but maintain readability */
.container-xl {
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
}

/* Build cards - infographic style with icons and numbers */
.build-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(248, 250, 255, 0.4));
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 18px;
    padding: 2rem 1.75rem;
    box-shadow: 0 18px 42px -32px rgba(15, 23, 42, 0.28);
    transition: all 0.5s ease;
}

.build-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 52px -28px rgba(99, 102, 241, 0.38);
    border-color: rgba(99, 102, 241, 0.18);
    transition:0.8s all;
}

.build-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.build-card-header h3 {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #1e3a8a;
}

.build-card p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: #64748b;
    margin-bottom: 1.25rem !important;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    text-align: left;
    text-align-last: auto;
}

.bc-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(99, 102, 241, 0.12);
    transition: all 0.3s ease;
}

.build-card:hover .bc-icon {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.15), rgba(59, 130, 246, 0.12));
    transform: scale(1.08);
}

/* Improve learn-more links */
.learn-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
    transition: all 0.25s ease;
}

.learn-more:hover {
    color: #2563eb;
    gap: 0.75rem;
}

.lm-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* Service cards - cleaner, more professional */
.service-card {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(99, 102, 241, 0.08) !important;
    box-shadow: 0 16px 38px -28px rgba(15, 23, 42, 0.3) !important;
    transition: all 0.3s ease !important;
}

.service-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 22px 48px -24px rgba(99, 102, 241, 0.4) !important;
    border-color: rgba(99, 102, 241, 0.15) !important;
}

/* Better visual hierarchy for service titles */
.service-card .title-h6 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.service-card .sub-txt {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    opacity: 0.75 !important;
}

/* Glassmorphism enhancement - more subtle */
.services-glassmorphism {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 48px -36px rgba(15, 23, 42, 0.25) !important;
}

/* Mobile refinements */
@media (max-width: 991.98px) {
    .hero-quantistry {
        padding: 5rem 0 3rem;
    }
    
    .build-section,
    .what-is-section,
    .our-services {
        padding: 3rem 0;
    }
    
    .build-grid {
        gap: 1.5rem !important;
    }
}

@media (max-width: 767.98px) {
    .hero-quantistry {
        padding: 72px 0 56px;
    }

    .hero-quantistry .container-fluid {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height: calc(100vh - 96px);
    }

    .hero-quantistry .row {
        position: relative;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        min-height: 100%;
        margin: 0;
    }

    .hero-quantistry .hero-left {
        padding: 0 1.25rem;
        min-height: auto;
        position: relative;
        z-index: 2;
        justify-content: center;
        display: flex;
        margin-bottom: 0;
    }

    .hero-quantistry .hero-content {
        text-align: center;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: 1.1rem;
    }

    .hero-quantistry .hero-cta {
        justify-content: center;
        display: flex;
        margin-top: 0.5rem;
    }

    .hero-quantistry .hero-right {
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0.45;
        pointer-events: none;
    }

    .hero-quantistry .hero-animation {
        min-height: 100%;
        border-radius: 0;
    }

    .hero-quantistry #heroWebGL {
        border-radius: 0;
    }

    .hero-quantistry .hero-title {
        font-size: clamp(2.15rem, 7.5vw, 2.7rem) !important;
        margin-bottom: 0.75rem !important;
    }

    .build-card-header {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        text-align: center;
    }

    .build-card-header h3 {
        text-align: center;
    }

    .bc-icon {
        margin: 0;
    }
}

@media (max-width: 575.98px) {
    .hero-quantistry {
        padding: 4rem 0 2.5rem;
    }
    
    .build-section,
    .what-is-section,
    .our-services {
        padding: 2.5rem 0;
    }
    
    .process-infographic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    .process-step {
        padding: 1.75rem 1rem;
    }

    .build-card {
        padding: 1.5rem 1.25rem;
    }

    /* Force two-column layout for build section cards on very small screens */
    .build-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1rem !important;
    }
    .build-card { min-height: 300px; }

    .build-card-header h3 {
        font-size: 0.95rem !important;
    }

    .build-card p {
        font-size: 0.85rem !important;
    }
}

/* ============================================================
   SERVICES OVERVIEW PAGE - Professional Design
   ============================================================ */

.services-overview-page {
    background: linear-gradient(180deg, #f8faff 0%, #ffffff 30%, #fefeff 70%, #f4f7fc 100%);
}

/* Services Hero Section */
.services-hero {
    padding: clamp(8rem, 14vh, 10rem) 0 clamp(5rem, 10vh, 7rem);
    position: relative;
    overflow: hidden;
}

.services-hero::before {
    content: "";
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.06), transparent 70%);
    pointer-events: none;
}

.badge-pill {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(59, 130, 246, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #3b82f6;
    text-transform: uppercase;
}

.services-hero .hero-title {
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.15;
    color: #1e3a8a;
    letter-spacing: -0.02em;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.services-hero .hero-description {
    font-size: clamp(1.05rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: #475569;
    text-align: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.services-hero .hero-subdescription {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #64748b;
    text-align: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Why Choose Section */
.why-choose-section {
    padding: clamp(4rem, 8vh, 6rem) 0;
}

/* Core Services Section */
.core-services-section {
    padding: clamp(4rem, 8vh, 6rem) 0;
    background: transparent;
}

.section-title {
    font-size: clamp(2.2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    color: #1e3a8a;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.section-description {
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.7;
    color: #64748b;
    max-width: 720px;
    margin: 0 auto;
}

/* Service Detail Cards */
.service-detail-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
    box-shadow: 0 20px 45px -35px rgba(15, 23, 42, 0.22);
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
}

.service-detail-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px -30px rgba(99, 102, 241, 0.5);
    border-color: rgba(99, 102, 241, 0.3);
    background: linear-gradient(135deg, #6366f1, #3b82f6);
}

.service-detail-card:hover h3,
.service-detail-card:hover > p,
.service-detail-card:hover ul li,
.service-detail-card:hover .service-link {
    color: #ffffff;
}

.service-detail-card:hover ul li::before {
    color: #ffffff;
}

.service-detail-card:hover .service-detail-icon {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.service-detail-card:hover .service-detail-icon svg {
    color: #ffffff;
}

.service-detail-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(99, 102, 241, 0.12);
    transition: all 0.3s ease;
}

.service-detail-card:hover .service-detail-icon {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.15), rgba(59, 130, 246, 0.12));
    transform: scale(1.08);
}

.service-detail-icon svg {
    color: #3b82f6;
}

.service-detail-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.service-detail-card > p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 1.25rem;
}

.service-detail-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    flex-grow: 1;
}

.service-detail-card ul li {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #64748b;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
    position: relative;
}

.service-detail-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #3b82f6;
    font-weight: 700;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
    transition: gap 0.25s ease;
    margin-top: auto;
}

.service-link:hover {
    color: #2563eb;
    gap: 0.75rem;
}

/* Mobile typography & wrapping improvements for two-column cards */
@media (max-width: 767.98px) {
    .nx-two-col .service-detail-card h3 { font-size: 1.05rem; }
    .nx-two-col .service-detail-card > p { font-size: 0.85rem; line-height:1.5; }
    .nx-two-col .service-detail-card ul li { font-size: 0.8rem; line-height:1.4; }
    .nx-two-col .process-step h4 { font-size: 1rem; }
    .nx-two-col .process-step p { font-size: 0.82rem; line-height:1.45; }
    .nx-two-col .industry-card h4 { font-size: 0.95rem; }
    .nx-two-col .industry-card p { font-size: 0.78rem; line-height:1.4; }
    .nx-two-col .tech-category h4 { font-size: 0.9rem; }
    .nx-two-col .tech-category .tech-tag { font-size: 0.65rem; }
    /* Wrap long words / prevent overflow */
    .nx-two-col h3, .nx-two-col h4, .nx-two-col p, .nx-two-col li, .nx-two-col a { word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; }
}

/* Development Process Timeline */
.development-process-section {
    padding: clamp(4rem, 8vh, 6rem) 0;
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.5), rgba(255, 255, 255, 0.8));
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #6366f1, #3b82f6);
    opacity: 0.2;
}

.timeline-item {
    position: relative;
    padding-left: 80px;
    padding-bottom: 3rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px -10px rgba(99, 102, 241, 0.5), 0 0 0 4px #ffffff;
    z-index: 2;
}

.timeline-content {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 16px 38px -28px rgba(15, 23, 42, 0.25);
}

.timeline-content h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 0.75rem;
}

.timeline-content p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* Industries Section */
.industries-section {
    padding: clamp(4rem, 8vh, 6rem) 0;
}

.industry-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    box-shadow: 0 16px 38px -28px rgba(15, 23, 42, 0.22);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.industry-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -24px rgba(99, 102, 241, 0.35);
}

.industry-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.industry-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 0.6rem;
}

.industry-card p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

/* Technologies Section */
.technologies-section {
    padding: clamp(4rem, 8vh, 6rem) 0;
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.5), rgba(255, 255, 255, 0.8));
}

.tech-categories {
    display: grid;
    gap: 2rem;
}

.tech-category {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 18px 42px -32px rgba(15, 23, 42, 0.25);
}

.tech-category h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 1.25rem;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tech-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.06));
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3b82f6;
    transition: all 0.25s ease;
}

.tech-tag:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px -8px rgba(99, 102, 241, 0.4);
}

/* Colorful Tech Tags */
.tech-react { background: linear-gradient(135deg, #61dafb15, #61dafb08); border-color: #61dafb30; color: #61dafb; }
.tech-react:hover { background: linear-gradient(135deg, #61dafb, #149eca); color: #ffffff; border-color: #61dafb; }

.tech-vue { background: linear-gradient(135deg, #42b88315, #42b88308); border-color: #42b88330; color: #42b883; }
.tech-vue:hover { background: linear-gradient(135deg, #42b883, #35495e); color: #ffffff; border-color: #42b883; }

.tech-angular { background: linear-gradient(135deg, #dd0031 15, #dd003108); border-color: #dd003130; color: #dd0031; }
.tech-angular:hover { background: linear-gradient(135deg, #dd0031, #c3002a); color: #ffffff; border-color: #dd0031; }

.tech-next { background: linear-gradient(135deg, #00000015, #00000008); border-color: #00000030; color: #000000; }
.tech-next:hover { background: linear-gradient(135deg, #000000, #333333); color: #ffffff; border-color: #000000; }

.tech-typescript { background: linear-gradient(135deg, #3178c615, #3178c608); border-color: #3178c630; color: #3178c6; }
.tech-typescript:hover { background: linear-gradient(135deg, #3178c6, #235a97); color: #ffffff; border-color: #3178c6; }

.tech-tailwind { background: linear-gradient(135deg, #06b6d415, #06b6d408); border-color: #06b6d430; color: #06b6d4; }
.tech-tailwind:hover { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #ffffff; border-color: #06b6d4; }

.tech-bootstrap { background: linear-gradient(135deg, #7952b315, #7952b308); border-color: #7952b330; color: #7952b3; }
.tech-bootstrap:hover { background: linear-gradient(135deg, #7952b3, #563d7c); color: #ffffff; border-color: #7952b3; }

.tech-node { background: linear-gradient(135deg, #68a06315, #68a06308); border-color: #68a06330; color: #68a063; }
.tech-node:hover { background: linear-gradient(135deg, #68a063, #4a7c42); color: #ffffff; border-color: #68a063; }

.tech-python { background: linear-gradient(135deg, #3776ab15, #3776ab08); border-color: #3776ab30; color: #3776ab; }
.tech-python:hover { background: linear-gradient(135deg, #3776ab, #ffd43b); color: #ffffff; border-color: #3776ab; }

.tech-django { background: linear-gradient(135deg, #092e2015, #092e2008); border-color: #092e2030; color: #092e20; }
.tech-django:hover { background: linear-gradient(135deg, #092e20, #0c4b33); color: #ffffff; border-color: #092e20; }

.tech-fastapi { background: linear-gradient(135deg, #009688 15, #00968808); border-color: #00968830; color: #009688; }
.tech-fastapi:hover { background: linear-gradient(135deg, #009688, #00796b); color: #ffffff; border-color: #009688; }

.tech-php { background: linear-gradient(135deg, #777bb415, #777bb408); border-color: #777bb430; color: #777bb4; }
.tech-php:hover { background: linear-gradient(135deg, #777bb4, #4f5b93); color: #ffffff; border-color: #777bb4; }

.tech-laravel { background: linear-gradient(135deg, #ff2d2015, #ff2d2008); border-color: #ff2d2030; color: #ff2d20; }
.tech-laravel:hover { background: linear-gradient(135deg, #ff2d20, #e3342f); color: #ffffff; border-color: #ff2d20; }

.tech-java { background: linear-gradient(135deg, #007396 15, #00739608); border-color: #00739630; color: #007396; }
.tech-java:hover { background: linear-gradient(135deg, #007396, #f89820); color: #ffffff; border-color: #007396; }

.tech-springboot { background: linear-gradient(135deg, #6db33f15, #6db33f08); border-color: #6db33f30; color: #6db33f; }
.tech-springboot:hover { background: linear-gradient(135deg, #6db33f, #5a9e31); color: #ffffff; border-color: #6db33f; }

.tech-flutter { background: linear-gradient(135deg, #02569b15, #02569b08); border-color: #02569b30; color: #02569b; }
.tech-flutter:hover { background: linear-gradient(135deg, #02569b, #0175c2); color: #ffffff; border-color: #02569b; }

.tech-react-native { background: linear-gradient(135deg, #61dafb15, #61dafb08); border-color: #61dafb30; color: #61dafb; }
.tech-react-native:hover { background: linear-gradient(135deg, #61dafb, #21a1c4); color: #ffffff; border-color: #61dafb; }

.tech-swift { background: linear-gradient(135deg, #fa7343 15, #fa734308); border-color: #fa734330; color: #fa7343; }
.tech-swift:hover { background: linear-gradient(135deg, #fa7343, #f05138); color: #ffffff; border-color: #fa7343; }

.tech-kotlin { background: linear-gradient(135deg, #7f52ff15, #7f52ff08); border-color: #7f52ff30; color: #7f52ff; }
.tech-kotlin:hover { background: linear-gradient(135deg, #7f52ff, #b255f6); color: #ffffff; border-color: #7f52ff; }

.tech-swiftui { background: linear-gradient(135deg, #fa7343 15, #fa734308); border-color: #fa734330; color: #fa7343; }
.tech-swiftui:hover { background: linear-gradient(135deg, #fa7343, #0066cc); color: #ffffff; border-color: #fa7343; }

.tech-jetpack { background: linear-gradient(135deg, #4285f415, #4285f408); border-color: #4285f430; color: #4285f4; }
.tech-jetpack:hover { background: linear-gradient(135deg, #4285f4, #3367d6); color: #ffffff; border-color: #4285f4; }

.tech-wordpress { background: linear-gradient(135deg, #21759b15, #21759b08); border-color: #21759b30; color: #21759b; }
.tech-wordpress:hover { background: linear-gradient(135deg, #21759b, #0085ba); color: #ffffff; border-color: #21759b; }

.tech-drupal { background: linear-gradient(135deg, #0678be15, #0678be08); border-color: #0678be30; color: #0678be; }
.tech-drupal:hover { background: linear-gradient(135deg, #0678be, #0a7dc0); color: #ffffff; border-color: #0678be; }

.tech-shopify { background: linear-gradient(135deg, #96bf4815, #96bf4808); border-color: #96bf4830; color: #96bf48; }
.tech-shopify:hover { background: linear-gradient(135deg, #96bf48, #5e8e3e); color: #ffffff; border-color: #96bf48; }

.tech-woocommerce { background: linear-gradient(135deg, #96588a15, #96588a08); border-color: #96588a30; color: #96588a; }
.tech-woocommerce:hover { background: linear-gradient(135deg, #96588a, #7b3a6e); color: #ffffff; border-color: #96588a; }

.tech-magento { background: linear-gradient(135deg, #ee672f15, #ee672f08); border-color: #ee672f30; color: #ee672f; }
.tech-magento:hover { background: linear-gradient(135deg, #ee672f, #f16523); color: #ffffff; border-color: #ee672f; }

.tech-strapi { background: linear-gradient(135deg, #2f2e8b15, #2f2e8b08); border-color: #2f2e8b30; color: #2f2e8b; }
.tech-strapi:hover { background: linear-gradient(135deg, #2f2e8b, #4945ff); color: #ffffff; border-color: #2f2e8b; }

.tech-contentful { background: linear-gradient(135deg, #2478cc15, #2478cc08); border-color: #2478cc30; color: #2478cc; }
.tech-contentful:hover { background: linear-gradient(135deg, #2478cc, #1a5fa8); color: #ffffff; border-color: #2478cc; }

.tech-sanity { background: linear-gradient(135deg, #f0365815, #f0365808); border-color: #f0365830; color: #f03658; }
.tech-sanity:hover { background: linear-gradient(135deg, #f03658, #d02746); color: #ffffff; border-color: #f03658; }

.tech-tensorflow { background: linear-gradient(135deg, #ff6f0015, #ff6f0008); border-color: #ff6f0030; color: #ff6f00; }
.tech-tensorflow:hover { background: linear-gradient(135deg, #ff6f00, #e65100); color: #ffffff; border-color: #ff6f00; }

.tech-pytorch { background: linear-gradient(135deg, #ee4c2c15, #ee4c2c08); border-color: #ee4c2c30; color: #ee4c2c; }
.tech-pytorch:hover { background: linear-gradient(135deg, #ee4c2c, #d9391e); color: #ffffff; border-color: #ee4c2c; }

.tech-openai { background: linear-gradient(135deg, #41295715, #41295708); border-color: #41295730; color: #412957; }
.tech-openai:hover { background: linear-gradient(135deg, #412957, #10a37f); color: #ffffff; border-color: #412957; }

.tech-sklearn { background: linear-gradient(135deg, #f7931e15, #f7931e08); border-color: #f7931e30; color: #f7931e; }
.tech-sklearn:hover { background: linear-gradient(135deg, #f7931e, #3499cd); color: #ffffff; border-color: #f7931e; }

.tech-keras { background: linear-gradient(135deg, #d00000 15, #d0000008); border-color: #d0000030; color: #d00000; }
.tech-keras:hover { background: linear-gradient(135deg, #d00000, #a30000); color: #ffffff; border-color: #d00000; }

.tech-huggingface { background: linear-gradient(135deg, #ffcc0015, #ffcc0008); border-color: #ffcc0030; color: #ffae00; }
.tech-huggingface:hover { background: linear-gradient(135deg, #ffcc00, #ff9000); color: #ffffff; border-color: #ffcc00; }

.tech-aws { background: linear-gradient(135deg, #ff990015, #ff990008); border-color: #ff990030; color: #ff9900; }
.tech-aws:hover { background: linear-gradient(135deg, #ff9900, #ec7211); color: #ffffff; border-color: #ff9900; }

.tech-azure { background: linear-gradient(135deg, #0078d415, #0078d408); border-color: #0078d430; color: #0078d4; }
.tech-azure:hover { background: linear-gradient(135deg, #0078d4, #005a9e); color: #ffffff; border-color: #0078d4; }

.tech-gcp { background: linear-gradient(135deg, #4285f415, #4285f408); border-color: #4285f430; color: #4285f4; }
.tech-gcp:hover { background: linear-gradient(135deg, #4285f4, #ea4335); color: #ffffff; border-color: #4285f4; }

.tech-docker { background: linear-gradient(135deg, #2496ed15, #2496ed08); border-color: #2496ed30; color: #2496ed; }
.tech-docker:hover { background: linear-gradient(135deg, #2496ed, #1d7ac7); color: #ffffff; border-color: #2496ed; }

.tech-kubernetes { background: linear-gradient(135deg, #326ce515, #326ce508); border-color: #326ce530; color: #326ce5; }
.tech-kubernetes:hover { background: linear-gradient(135deg, #326ce5, #2553be); color: #ffffff; border-color: #326ce5; }

.tech-terraform { background: linear-gradient(135deg, #7b42bc15, #7b42bc08); border-color: #7b42bc30; color: #7b42bc; }
.tech-terraform:hover { background: linear-gradient(135deg, #7b42bc, #5c4ee5); color: #ffffff; border-color: #7b42bc; }

.tech-jenkins { background: linear-gradient(135deg, #d24939 15, #d2493908); border-color: #d2493930; color: #d24939; }
.tech-jenkins:hover { background: linear-gradient(135deg, #d24939, #b0382d); color: #ffffff; border-color: #d24939; }

.tech-postgresql { background: linear-gradient(135deg, #336791 15, #33679108); border-color: #33679130; color: #336791; }
.tech-postgresql:hover { background: linear-gradient(135deg, #336791, #254d73); color: #ffffff; border-color: #336791; }

.tech-mongodb { background: linear-gradient(135deg, #47a24815, #47a24808); border-color: #47a24830; color: #47a248; }
.tech-mongodb:hover { background: linear-gradient(135deg, #47a248, #3d8b3d); color: #ffffff; border-color: #47a248; }

.tech-redis { background: linear-gradient(135deg, #dc382d15, #dc382d08); border-color: #dc382d30; color: #dc382d; }
.tech-redis:hover { background: linear-gradient(135deg, #dc382d, #c4281f); color: #ffffff; border-color: #dc382d; }

.tech-mysql { background: linear-gradient(135deg, #4479a115, #4479a108); border-color: #4479a130; color: #4479a1; }
.tech-mysql:hover { background: linear-gradient(135deg, #4479a1, #00546b); color: #ffffff; border-color: #4479a1; }

.tech-firebase { background: linear-gradient(135deg, #ffca2815, #ffca2808); border-color: #ffca2830; color: #ffca28; }
.tech-firebase:hover { background: linear-gradient(135deg, #ffca28, #ffa000); color: #ffffff; border-color: #ffca28; }

.tech-elasticsearch { background: linear-gradient(135deg, #005571 15, #00557108); border-color: #00557130; color: #005571; }
.tech-elasticsearch:hover { background: linear-gradient(135deg, #005571, #00bfb3); color: #ffffff; border-color: #005571; }

/* CTA Section */
.cta-section {
    padding: clamp(5rem, 10vh, 7rem) 0;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    position: relative;
    overflow: hidden;
}

.cta-section::before,
.cta-section::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
    pointer-events: none;
}

.cta-section::before {
    top: -250px;
    right: -200px;
}

.cta-section::after {
    bottom: -300px;
    left: -200px;
}

.cta-title {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.cta-description {
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    max-width: 720px;
    margin: 0 auto;
}

.cta-section .btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.cta-section .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .services-hero {
        padding: 6rem 0 4rem;
    }
    
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item {
        padding-left: 60px;
    }
    
    .timeline-marker {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .tech-tag {
        font-size: 0.8rem;
        padding: 0.45rem 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .services-hero {
        padding: 5rem 0 3rem;
    }
    
    .badge-pill {
        font-size: 0.7rem;
        padding: 0.55rem 1.25rem;
    }
    
    .services-hero .hero-title {
        font-size: 2rem;
    }
    
    .services-hero .hero-description {
        font-size: 1rem;
    }
    
    .process-infographic {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .timeline-item {
        padding-left: 50px;
        padding-bottom: 2rem;
    }
    
    .timeline-marker {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .timeline-content {
        padding: 1.25rem;
    }
    
    .tech-category {
        padding: 1.5rem;
    }
    
    .tech-tag {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }
    
    .cta-section {
        padding: 4rem 0;
    }
}

/* ============================================================
   INDIVIDUAL SERVICE PAGES - Enhanced Professional Design
   ============================================================ */

/* Remove default Bootstrap bg-light, apply custom background */
.service-page .service-hero.bg-light {
    background: transparent !important;
}

/* Enhanced section styling */
.service-page section {
    position: relative;
}

.service-page section.py-5 {
    padding-top: clamp(4rem, 6vh, 5rem) !important;
    padding-bottom: clamp(4rem, 6vh, 5rem) !important;
}

.service-page section.border-bottom {
    border-bottom: 1px solid rgba(99, 102, 241, 0.06) !important;
}

/* Section titles */
.service-page .section-title {
    font-size: clamp(1.5rem, 2.5vw, 1.85rem);
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

/* Results Card - Sidebar */
.service-page .col-lg-4 > div:first-child {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.08) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    box-shadow: 0 20px 45px -35px rgba(15, 23, 42, 0.25) !important;
}

.service-page .col-lg-4 > div:first-child h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 1.25rem;
}

.service-page .col-lg-4 > div:first-child ul li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #64748b;
    padding: 0.5rem 0;
}

/* Feature Cards Grid */
.service-page .card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px -32px rgba(15, 23, 42, 0.28) !important;
    transition: all 0.3s ease;
}

.service-page .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 52px -28px rgba(99, 102, 241, 0.38) !important;
    border-color: rgba(99, 102, 241, 0.15) !important;
}

.service-page .card .card-body {
    padding: 1.75rem;
}

.service-page .card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 0.75rem;
    text-transform: none;
}

.service-page .card p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #64748b;
}

/* Timeline Steps */
.service-page .timeline-step {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 16px 38px -28px rgba(15, 23, 42, 0.25);
    transition: all 0.3s ease;
}

.service-page .timeline-step:hover {
    transform: translateX(4px);
    box-shadow: 0 20px 48px -24px rgba(99, 102, 241, 0.35);
}

.service-page .timeline-step .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    letter-spacing: 0.05em;
}

.service-page .timeline-step h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 0.75rem;
    margin-top: 0.5rem;
}

.service-page .timeline-step p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #64748b;
}

/* Solution Cards */
.service-page .border.rounded-4 {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.95)) !important;
    border: 1px solid rgba(99, 102, 241, 0.08) !important;
    border-radius: 18px !important;
    padding: 1.75rem !important;
    box-shadow: 0 16px 38px -28px rgba(15, 23, 42, 0.22);
    transition: all 0.3s ease;
}

.service-page .border.rounded-4:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px -24px rgba(99, 102, 241, 0.35);
    border-color: rgba(99, 102, 241, 0.15) !important;
}

.service-page .border.rounded-4 h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 0.75rem;
}

.service-page .border.rounded-4 p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #64748b;
}

/* Tech Tiles / Feature Tiles */
.service-page .tech-tile {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.08) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    box-shadow: 0 14px 32px -24px rgba(15, 23, 42, 0.2);
    transition: all 0.25s ease;
}

.service-page .tech-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.12) !important;
}

.service-page .tech-tile h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 0.5rem;
}

.service-page .tech-tile p {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #64748b;
}

/* Industry Badges */
.service-page .badge {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.06)) !important;
    border: 1px solid rgba(99, 102, 241, 0.12) !important;
    color: #3b82f6 !important;
    transition: all 0.25s ease;
}

.service-page .badge:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(59, 130, 246, 0.12)) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
    transform: translateY(-2px);
}

/* Sidebar Sticky Card */
.service-page aside.card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96));
    border: 1px solid rgba(99, 102, 241, 0.1) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px -40px rgba(15, 23, 42, 0.3) !important;
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start;
}

.service-page aside.card h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e3a8a;
}

.service-page aside.card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #64748b;
}

.service-page aside.card ul li {
    font-size: 0.88rem;
    color: #64748b;
}

.service-page aside.card .bg-light {
    background: rgba(248, 250, 255, 0.6) !important;
    border: 1px solid rgba(99, 102, 241, 0.08);
}

/* CTA Section at bottom */
.service-page .cta-section {
    background: linear-gradient(180deg, #f8fafff0 0%, rgba(99, 102, 241, 0.15) 15%, #5b5fc9 60%, #4f52b3 100%);
    padding: clamp(5rem, 10vh, 8rem) 0;
    border-radius: 0;
    margin-top: 0;
    position: relative;
}

.service-page .cta-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.3) 0%, transparent 100%);
    pointer-events: none;
}

.service-page .cta-section .container {
    position: relative;
    z-index: 1;
}

.service-page .cta-section .section-title {
    color: #1e3a8a;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);
}

.service-page .cta-section p {
    color: #334155;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.7;
}

.service-page .cta-section .btn-light {
    background: #ffffff;
    color: #1e3a8a;
    border: none;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.15);
    transition: all 0.3s ease;
}

.service-page .cta-section .btn-light:hover {
    background: #f8faff;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(30, 58, 138, 0.25);
}

.service-page .cta-section .btn-outline-light {
    background: transparent;
    color: #1e3a8a;
    border: 2px solid #1e3a8a;
    font-weight: 600;
    transition: all 0.3s ease;
}

.service-page .cta-section .btn-outline-light:hover {
    background: #1e3a8a;
    color: #ffffff;
    border-color: #1e3a8a;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(30, 58, 138, 0.25);
}

/* Responsive */
@media (max-width: 991.98px) {
    .service-page section.py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .service-page aside.card {
        position: relative !important;
        top: auto !important;
        margin-top: 2rem;
    }
}

@media (max-width: 575.98px) {
    .service-page section.py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .service-page .section-title {
        font-size: 1.35rem;
    }
    
    .service-page .timeline-step {
        padding: 1.5rem;
    }
    
    .service-page .tech-tile {
        padding: 1.25rem !important;
    }
}

/* ============================================================
   REQUEST A QUOTE PAGE - Animated Parallax Design
   ============================================================ */

.quote-page-section {
    position: relative;
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 80px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafff0 100%);
}

/* Parallax Background Layer */
.quote-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

#quote-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.65;
    mix-blend-mode: lighten;
}

#quote-bg-canvas.fade-in {
    animation: canvasFade 1.4s ease forwards;
}

@keyframes canvasFade {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 0.65; filter: blur(0); }
}

.quote-parallax-bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
        padding: 20px 18px;
    background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
                radial-gradient(circle at 50% 80%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
    animation: parallaxFloat 25s ease-in-out infinite;
}

@keyframes parallaxFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(3%, -3%) scale(1.05);
    }
    50% {
        transform: translate(-2%, 2%) scale(1.02);
    }
    75% {
        transform: translate(2%, -2%) scale(1.08);
    }
}

/* Animated Abstract Shapes */
.quote-animated-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.quote-animated-shapes .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: floatShape 20s ease-in-out infinite;
}

.quote-animated-shapes .shape-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.2));
    top: 10%;
    left: 5%;
    animation-duration: 22s;
    animation-delay: 0s;
}

.quote-animated-shapes .shape-2 {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(99, 102, 241, 0.2));
    top: 60%;
    right: 10%;
    animation-duration: 18s;
    animation-delay: -5s;
}

.quote-animated-shapes .shape-3 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(59, 130, 246, 0.15));
    bottom: 15%;
    left: 15%;
    animation-duration: 25s;
    animation-delay: -10s;
}

.quote-animated-shapes .shape-4 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(99, 102, 241, 0.15));
    top: 35%;
    right: 25%;
    animation-duration: 20s;
    animation-delay: -7s;
}

.quote-animated-shapes .shape-5 {
    width: 320px;
    height: 320px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(14, 165, 233, 0.15));
    bottom: 30%;
    right: 5%;
    animation-duration: 23s;
    animation-delay: -12s;
}

@keyframes floatShape {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(30px, -30px) rotate(90deg) scale(1.1);
    }
    50% {
        transform: translate(-20px, 40px) rotate(180deg) scale(0.95);
    }
    75% {
        transform: translate(40px, 20px) rotate(270deg) scale(1.05);
    }
}

/* Content Container with Z-index */
.quote-page-section .container {
    position: relative;
    z-index: 1;
}

/* Header Animation */
.quote-page-section header {
    animation: fadeSlideUp 0.8s ease forwards;
    opacity: 0;
}

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

/* Card Animations */
.quote-page-section .card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.1);
    box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.15);
    animation: fadeScaleIn 0.8s ease 0.2s forwards;
    opacity: 0;
    transition: all 0.4s ease;
}

.quote-page-section .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px -20px rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.2);
}

@keyframes fadeScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Sidebar Card */
.quote-page-section .bg-light {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96)) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.08);
    box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.15);
    animation: fadeScaleIn 0.8s ease 0.3s forwards;
    opacity: 0;
    transition: all 0.4s ease;
}

.quote-page-section .bg-light:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 65px -20px rgba(99, 102, 241, 0.2);
}

/* Form Elements Enhanced */
.quote-page-section .form-control,
.quote-page-section .form-select {
    border: 1.5px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
}

.quote-page-section .form-control:focus,
.quote-page-section .form-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    background: #ffffff;
    transform: translateY(-2px);
}

/* Button Animations */
.quote-page-section .btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.quote-page-section .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.quote-page-section .btn:hover::before {
    width: 300px;
    height: 300px;
}

.quote-page-section .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.4);
}

/* Badge Styling */
.quote-page-section .badge {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
    }
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .quote-page-section {
        padding-top: 120px;
        padding-bottom: 60px;
    }
    
    .quote-animated-shapes .shape {
        filter: blur(50px);
    }
}

@media (max-width: 575.98px) {
    .quote-page-section {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    
    .quote-animated-shapes .shape {
        filter: blur(40px);
        opacity: 0.3;
    }
    
    .quote-animated-shapes .shape-1,
    .quote-animated-shapes .shape-2,
    .quote-animated-shapes .shape-3 {
        width: 200px;
        height: 200px;
    }
}