/* ============================================================
   cloudeUNI — Final Stylesheet v4
   Logo Colors: Blue-Cyan (#1A7FFF→#00C8FF) + Orange-Gold (#FF6600→#FFB800)
   Full Light / Dark Theme Support
   ============================================================ */
/*@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700;800&family=Orbitron:wght@500;700;900&display=swap');*/

/* ============================================================
   DARK THEME (default) — Navy base
   ============================================================ */
/*:root, [data-theme="dark"] {*/
    /* Backgrounds */
    /*--bg-body: #04090F;
    --bg-s1: #080F1A;
    --bg-s2: #0B1523;
    --bg-card: #0D1B2A;
    --bg-input: #0A1422;
    --bg-hero: linear-gradient(145deg,#04090F 0%,#081425 55%,#060E1C 100%);
    --bg-nav: rgba(4,9,15,0.95);
    --bg-footer: #020509;*/
    /* Borders */
    /*--border: rgba(26,127,255,0.18);
    --border-card: rgba(26,127,255,0.12);
    --border-focus: rgba(26,127,255,0.6);*/
    /* Text - MUST be clearly visible on dark bg */
    /*--text-h: #F0F8FF;
    --text-p: #D8EEFF;
    --text-s: #96C0E0;
    --text-m: #5888AA;
    --text-btn: #FFFFFF;*/
    /* Brand Blue (logo C) */
    /*--blue-a: #0055CC;
    --blue-b: #1A7FFF;
    --blue-c: #3FA0FF;
    --blue-d: #80C4FF;
    --blue-e: #BDE0FF;
    --grad-blue: linear-gradient(135deg,#1A7FFF 0%,#00C8FF 100%);*/
    /* Brand Orange (logo U) */
    /*--orng-a: #CC4400;
    --orng-b: #FF6600;
    --orng-c: #FF8C2A;
    --orng-d: #FFB800;
    --orng-e: #FFD980;
    --grad-orng: linear-gradient(135deg,#FF6600 0%,#FFB800 100%);*/
    /* Glows */
    /*--glow-b: 0 0 32px rgba(26,127,255,0.5);
    --glow-bs: 0 0 16px rgba(0,160,255,0.35);
    --glow-o: 0 0 32px rgba(255,102,0,0.5);
    --glow-os: 0 0 16px rgba(255,140,42,0.3);*/
    /* Shadows */
    /*--shadow: 0 6px 28px rgba(0,0,0,0.55);
    --shadow-l: 0 16px 48px rgba(0,0,0,0.65);
}*/

/* ============================================================
   LIGHT THEME — Clean white base
   ============================================================ */
/*[data-theme="light"] {
    --bg-body: #F4F8FF;
    --bg-s1: #FFFFFF;
    --bg-s2: #EBF2FF;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-hero: linear-gradient(145deg,#0A1E42 0%,#1A3A80 55%,#0C1F4A 100%);
    --bg-nav: rgba(255,255,255,0.97);
    --bg-footer: #06101E;
    --border: rgba(26,127,255,0.18);
    --border-card: rgba(26,127,255,0.12);
    --border-focus: rgba(26,127,255,0.5);*/
    /* Text — MUST be visible on white */
    /*--text-h: #061428;
    --text-p: #0D2040;
    --text-s: #2A4A6A;
    --text-m: #4A6A8A;
    --text-btn: #FFFFFF;
    --blue-a: #0044BB;
    --blue-b: #0066EE;
    --blue-c: #1A7FFF;
    --blue-d: #4A9FFF;
    --blue-e: #99CCFF;
    --grad-blue: linear-gradient(135deg,#0066EE 0%,#00AADD 100%);
    --orng-a: #BB3300;
    --orng-b: #EE5500;
    --orng-c: #FF7700;
    --orng-d: #FFAA00;
    --orng-e: #FFCC66;
    --grad-orng: linear-gradient(135deg,#EE5500 0%,#FFAA00 100%);
    --glow-b: 0 0 20px rgba(26,127,255,0.25);
    --glow-bs: 0 0 10px rgba(0,102,238,0.2);
    --glow-o: 0 0 20px rgba(238,85,0,0.25);
    --glow-os: 0 0 10px rgba(255,119,0,0.2);
    --shadow: 0 4px 20px rgba(10,40,100,0.1);
    --shadow-l: 0 12px 40px rgba(10,40,100,0.14);
}*/

/* ============================================================
   TOKENS & RESET
   ============================================================ */
/*:root {
    --font-d: 'Rajdhani',sans-serif;
    --font-b: 'Nunito',sans-serif;
    --font-t: 'Orbitron',sans-serif;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 9999px;
    --tr: 280ms cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-b);
    background: var(--bg-body);
    color: var(--text-p);
    overflow-x: hidden;
    line-height: 1.7;
    transition: background 0.4s,color 0.4s;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

button, input, textarea, select {
    font-family: var(--font-b);
}

.container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 1.5rem;
}*/
/* ============================================================
   TYPEWRITER — prevent layout reflow / flicker
   ============================================================ */
/*#typewriter {
    display: inline-block;
    min-width: 14ch;          
    vertical-align: bottom;  
}*/
/* ============================================================
   HERO BG — Minimal Professional (Ring + 2 Meteors)
   ============================================================ */

/* ── Outer ring ── */
/*.hero-ring-a {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 0.75px solid rgba(63,160,255,0.13);
    pointer-events: none;
    z-index: 0;
    animation: ringCW 40s linear infinite;
    will-change: transform;
}*/
    /* Middle concentric ring */
    /*.hero-ring-a::before {
        content: '';
        position: absolute;
        inset: 70px;
        border-radius: 50%;
        border: 0.5px solid rgba(0,200,255,0.08);
    }*/
    /* Inner concentric ring */
    /*.hero-ring-a::after {
        content: '';
        position: absolute;
        inset: 148px;
        border-radius: 50%;
        border: 0.5px solid rgba(63,160,255,0.05);
    }*/

/* ── Orbiting dot + comet tail on outer ring ── */
/*.hero-ring-a-dot {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: ringCW 40s linear infinite;
    will-change: transform;
}*/
    /* Glowing dot at 12 o'clock */
    /*.hero-ring-a-dot::before {
        content: '';
        position: absolute;
        top: -4px;
        left: 50%;
        width: 7px;
        height: 7px;
        margin-left: -3.5px;
        border-radius: 50%;
        background: #3FA0FF;
        box-shadow: 0 0 0 2px rgba(63,160,255,0.18), 0 0 10px 4px rgba(63,160,255,0.55), 0 0 22px 7px rgba(26,127,255,0.28);
        animation: dotGlow 3s ease-in-out infinite;
    }*/
    /* Comet tail */
    /*.hero-ring-a-dot::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 50%;
        width: 1px;
        height: 62px;
        margin-left: -0.5px;
        background: linear-gradient( 180deg, rgba(63,160,255,0.50) 0%, rgba(63,160,255,0.12) 55%, transparent 100% );
        border-radius: 1px;
    }*/

/* ── Slow counter-rotating dashed arc (same ring size) ── */
/*.hero-ring-arc {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient( circle at 50% 50%, transparent calc(50% - 0.75px), rgba(63,160,255,0.07) calc(50% - 0.75px), rgba(63,160,255,0.07) calc(50% + 0.5px), transparent calc(50% + 0.5px) );
    animation: ringCCW 80s linear infinite;
    will-change: transform;
    mask-image: conic-gradient( from 0deg, black 0deg 55deg, transparent 55deg 115deg, black 115deg 170deg, transparent 170deg 230deg, black 230deg 285deg, transparent 285deg 360deg );
    -webkit-mask-image: conic-gradient( from 0deg, black 0deg 55deg, transparent 55deg 115deg, black 115deg 170deg, transparent 170deg 230deg, black 230deg 285deg, transparent 285deg 360deg );
}*/

/* ── Crosshair at ring center ── */
/*.hero-crosshair {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 0;
}

    .hero-crosshair::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 1px;
        margin: -0.5px 0 0 -9px;
        background: rgba(63,160,255,0.20);
        box-shadow: 0 0 5px 1px rgba(63,160,255,0.12);
    }

    .hero-crosshair::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 18px;
        margin: -9px 0 0 -0.5px;
        background: rgba(63,160,255,0.20);
        box-shadow: 0 0 5px 1px rgba(63,160,255,0.12);
    }*/

/* ── 2 Meteors only ── */
/*.hero-meteor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    border-radius: 50px;
    will-change: transform, opacity;
}

    .hero-meteor::after {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: inherit;
        filter: blur(2px);
        opacity: 0.4;
    }*/
/* Blue meteor — upper third */
/*.hero-m1 {
    top: 22%;
    left: -240px;
    width: 200px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(63,160,255,0.75) 60%, rgba(255,255,255,0.95) );
    animation: meteorFly 16s 1s linear infinite;
}*/
/* Orange meteor — lower half, fires well after blue */
/*.hero-m2 {
    top: 60%;
    left: -180px;
    width: 150px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(255,140,42,0.65) 60%, rgba(255,220,180,0.9) );
    animation: meteorFly 16s 9s linear infinite;
}*/

/* ── Shared keyframes ── */
/*@keyframes ringCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ringCCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes dotGlow {
    0%,100% {
        box-shadow: 0 0 0 2px rgba(63,160,255,0.18), 0 0 10px 4px rgba(63,160,255,0.55), 0 0 22px 7px rgba(26,127,255,0.28);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(63,160,255,0.26), 0 0 16px 7px rgba(63,160,255,0.80), 0 0 34px 11px rgba(26,127,255,0.42);
    }
}

@keyframes meteorFly {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    84% {
        opacity: 0.4;
    }

    100% {
        transform: translateX(135vw);
        opacity: 0;
    }
}*/

/* ============================================================
   NAVBAR
   ============================================================ */
/*.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 0;
    transition: all var(--tr);
    border-bottom: 1px solid transparent;
}

    .navbar.scrolled, [data-theme="light"] .navbar {
        background: var(--bg-nav);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom-color: var(--border);
        box-shadow: var(--shadow);
        padding: 0.5rem 0;
    }

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}*/

/* Brand */
/*.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}*/

/*.nav-logo {
    height: 55px;
    width: auto;
}*/
/*.nav-logo {
    height: 60px;
    width: auto;
}*/

/* Dark theme (default) — show white/transparent logo */
/*[data-theme="dark"] .logo-dark {
    display: block;
}

[data-theme="dark"] .logo-light {
    display: none;
}*/

/* Light theme — show dark logo */
/*[data-theme="light"] .logo-dark {
    display: none;
}

[data-theme="light"] .logo-light {
    display: block;
}*/

/* Fallback if no data-theme set yet */
/*.logo-dark {
    display: block;
}

.logo-light {
    display: none;
}.brand-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-family: var(--font-d);
    font-size: 1.4rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}

.brand-sub {
    font-size: 0.58rem;
    color: var(--text-m);
    letter-spacing: 0.5px;
    font-weight: 600;
}*/

/* Desktop links */
/*.nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    justify-content: center;
}

.nav-link {
    position: relative;
    font-family: var(--font-d);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-s);
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-sm);
    letter-spacing: 0.4px;
    transition: color var(--tr);
    white-space: nowrap;
}

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        right: 50%;
        height: 2px;
        background: var(--grad-blue);
        border-radius: 2px;
        transition: all var(--tr);
    }

    .nav-link:hover, .nav-link.active {
        color: var(--text-h);
    }

        .nav-link:hover::after, .nav-link.active::after {
            left: 0.85rem;
            right: 0.85rem;
        }

.nav-item {
    position: relative;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 210px;
    background: var(--bg-nav);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--tr);
    box-shadow: var(--shadow-l);
    z-index: 200;
}

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

.nav-dropdown a {
    display: block;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    color: var(--text-s);
    border-radius: var(--r-sm);
    transition: all var(--tr);
    font-weight: 500;
}

    .nav-dropdown a:hover {
        background: rgba(26,127,255,0.1);
        color: var(--blue-c);
        padding-left: 1.1rem;
    }*/

/* Right controls */
/*.nav-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-s);
    transition: all var(--tr);
}

    .theme-toggle:hover {
        border-color: var(--blue-c);
        color: var(--text-h);
        transform: rotate(18deg);
        background: rgba(26,127,255,0.1);
    }

    .theme-toggle .i-sun {
        display: none;
    }

    .theme-toggle .i-moon {
        display: block;
    }

[data-theme="light"] .theme-toggle .i-sun {
    display: block;
}

[data-theme="light"] .theme-toggle .i-moon {
    display: none;
}

.btn-nav-demo {
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.5rem 1.25rem;
    background: var(--grad-orng);
    color: #0A1220 !important;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(255,102,0,0.3);
    -webkit-text-fill-color: #0A1220 !important;
    display: inline-block;
}

    .btn-nav-demo:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-o);
    }

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text-p);
        border-radius: 2px;
        transition: var(--tr);
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

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

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }*/
/* ============================================================
   MOBILE OVERLAY — Right-slide Panel
   ============================================================ */
/*.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4, 9, 15, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;*/
    /* row: backdrop on left, panel on right */
    /*flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
}

    .mobile-overlay.open {
        display: flex;
        opacity: 1;
        pointer-events: all;
    }*/

/* ── Panel ────────────────────────────────────────────────── */
/*.mob-panel {
    width: 300px;
    max-width: 88vw;
    background: var(--bg-nav);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;*/ /* stack header/nav/footer vertically */
    /*overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.mobile-overlay.open .mob-panel {
    transform: translateX(0);
}*/

/* ── Header ───────────────────────────────────────────────── */
/*.mob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.mob-logo-img {
    height: 42px;
    width: auto;
}

.mobile-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.22);
    color: var(--text-s);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tr);
    flex-shrink: 0;
}

    .mobile-close-btn:hover {
        background: rgba(255,70,60,0.15);
        border-color: rgba(255,70,60,0.4);
        color: #FF4A3C;
        transform: rotate(90deg);
    }*/

/* ── Divider ──────────────────────────────────────────────── */
/*.mob-divider {
    display: none;
}*/
/* header border handles this */

/* ── Nav ──────────────────────────────────────────────────── */
/*.mob-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.65rem;
    flex: 1;
}

.mob-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.78rem 0.9rem;
    border-radius: var(--r-md);
    font-family: var(--font-d);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-s);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    text-align: left;
    min-height: 44px;
}

    .mob-link:hover {
        background: rgba(26,127,255,0.1);
        color: var(--blue-d);
    }

    .mob-link.active {
        background: rgba(26,127,255,0.12);
        color: var(--blue-c);
    }

.mob-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}*/

/* ── Submenu accordion ────────────────────────────────────── */
/*.mob-has-sub {
    display: flex;
    flex-direction: column;
}

.mob-arrow {
    margin-left: auto;
    color: var(--text-m);
    flex-shrink: 0;
    transition: transform 0.28s ease;
}

.mob-has-sub.open > .mob-toggle {
    background: rgba(26,127,255,0.1);
    color: var(--blue-c);
}

    .mob-has-sub.open > .mob-toggle .mob-arrow {
        transform: rotate(180deg);
        color: var(--blue-c);
    }

.mob-sub {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.2rem 0 0.3rem 1.1rem;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(26,127,255,0.25);
}

.mob-has-sub.open .mob-sub {
    display: flex;
}

.mob-sub-link {
    display: flex;
    align-items: center;
    padding: 0.62rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-m);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
    min-height: 40px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(26,127,255,0.15);
}

    .mob-sub-link:hover, .mob-sub-link:active {
        background: rgba(26,127,255,0.1);
        color: var(--blue-c);
        padding-left: 1rem;
    }*/

/* ── Footer ───────────────────────────────────────────────── */
/*.mob-footer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem 1.2rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.mob-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.8rem 1.5rem;
    background: var(--grad-orng);
    color: #0A1220 !important;
    -webkit-text-fill-color: #0A1220 !important;
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 700;
    border-radius: var(--r-full);
    text-decoration: none;
    transition: all var(--tr);
    box-shadow: 0 3px 14px rgba(255,102,0,0.3);
    min-height: 44px;
}

    .mob-cta:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-o);
    }

.mob-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    background: rgba(26,127,255,0.05);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
}

.mob-theme-lbl {
    font-size: 0.78rem;
    color: var(--text-m);
    font-weight: 600;
}

.mob-theme-btn {
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.2);
    border-radius: var(--r-full);
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-c);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font-b);
}

    .mob-theme-btn .i-sun {
        display: none;
    }

    .mob-theme-btn .i-moon {
        display: inline;
    }

[data-theme="light"] .mob-theme-btn .i-sun {
    display: inline;
}

[data-theme="light"] .mob-theme-btn .i-moon {
    display: none;
}*/

/* ── Light theme ──────────────────────────────────────────── */
/*[data-theme="light"] .mobile-overlay {
    background: rgba(10,30,80,0.35);
}

[data-theme="light"] .mob-panel {
    background: rgba(255,255,255,0.98);
    border-left-color: rgba(26,127,255,0.12);
}

[data-theme="light"] .mob-link {
    color: var(--text-s);
}

    [data-theme="light"] .mob-link:hover {
        background: rgba(26,127,255,0.07);
        color: var(--blue-b);
    }

[data-theme="light"] .mob-sub-link {
    color: var(--text-m);
}

    [data-theme="light"] .mob-sub-link:hover {
        color: var(--blue-b);
    }*/

/* ── Sizes ────────────────────────────────────────────────── */
/*@media (min-width: 480px) {
    .mob-panel {
        width: 320px;
    }
}

@media (max-width: 360px) {
    .mob-panel {
        width: 100vw;
        max-width: 100vw;
        border-left: none;
    }
}*/

/* ============================================================
   BUTTONS
   ============================================================ */
/*.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.85rem 2rem;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    font-size: 1rem;
    white-space: nowrap;
    line-height: 1;
}

.btn-primary {
    background: var(--grad-blue);
    color: #fff;
    box-shadow: var(--glow-bs);
}

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-b);
    }

.btn-orange {
    background: var(--grad-orng);
    color: #0A1220;
}

    .btn-orange:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-o);
    }

.btn-ghost {
    background: transparent;
    color: var(--text-s);
    border: 1.5px solid var(--border);
}

    .btn-ghost:hover {
        background: rgba(26,127,255,0.09);
        border-color: var(--blue-c);
        color: var(--text-h);
        transform: translateY(-2px);
    }*/
/* On light theme: ghost btn text must be dark */
/*[data-theme="light"] .btn-ghost {
    color: var(--text-s);
    border-color: rgba(26,127,255,0.3);
}

    [data-theme="light"] .btn-ghost:hover {
        color: var(--text-h);
    }*/

/* ============================================================
   SECTION SYSTEM
   ============================================================ */
/*.section {
    padding: 6rem 0;
}

.bg-s1 {
    background: var(--bg-s1);
}

.bg-s2 {
    background: var(--bg-s2);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.25);
    border-radius: var(--r-full);
    padding: 0.28rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--blue-c);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

    .section-chip.orng {
        background: rgba(255,102,0,0.1);
        border-color: rgba(255,140,42,0.3);
        color: var(--orng-c);
    }

[data-theme="light"] .section-chip {
    color: var(--blue-b);
}

    [data-theme="light"] .section-chip.orng {
        color: var(--orng-b);
    }

.section-title {
    font-family: var(--font-d);
    font-size: clamp(1.9rem,3.5vw,2.7rem);
    font-weight: 700;
    color: var(--text-h);
    line-height: 1.15;
    margin-bottom: 1rem;
}*/
/* Gradient text */
/*.t-b {
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.t-o {
    background: var(--grad-orng);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-desc {
    color: var(--text-s);
    font-size: 1rem;
    line-height: 1.8;
}*/
/* Ensure section desc visible on both themes */
/*[data-theme="light"] .section-desc {
    color: var(--text-s);
}*/

/* ============================================================
   HERO SECTION
   ============================================================ */
/*.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--bg-hero);padding-top:80px;}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:0.5;}
.hero-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;animation:orbFloat 8s ease-in-out infinite;}
.hero-orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(26,127,255,0.22) 0%,transparent 70%);top:-120px;left:-100px;}
.hero-orb-2{width:420px;height:420px;background:radial-gradient(circle,rgba(255,102,0,0.2) 0%,transparent 70%);bottom:-100px;right:8%;animation-delay:-4s;}
.hero-orb-3{width:280px;height:280px;background:radial-gradient(circle,rgba(0,200,255,0.12) 0%,transparent 70%);top:35%;right:28%;animation-delay:-2s;}
@keyframes orbFloat{0%,100%{transform:translate(0,0);}33%{transform:translate(18px,-18px);}66%{transform:translate(-14px,14px);}}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

.hero-orb-1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle,rgba(26,127,255,0.18) 0%,transparent 70%);
    filter: blur(70px);
    top: -120px;
    left: -100px;
    animation: orbFloat1 12s ease-in-out infinite;
}

.hero-orb-2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle,rgba(255,102,0,0.15) 0%,transparent 70%);
    filter: blur(70px);
    bottom: -100px;
    right: 8%;
    animation: orbFloat2 15s ease-in-out infinite;
}

.hero-orb-3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle,rgba(0,200,255,0.1) 0%,transparent 70%);
    filter: blur(60px);
    top: 35%;
    right: 28%;
    animation: orbFloat1 10s 3s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(16px,-16px,0);
    }
}

@keyframes orbFloat2 {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(-14px,12px,0);
    }
}

.hero-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    padding: 4rem 1.5rem;
    max-width: 1220px;
    margin: 0 auto;
    width: 100%;
}*/

/* Hero text — always on dark hero bg, always white */
/*.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(26,127,255,0.15);
    border: 1px solid rgba(26,127,255,0.35);
    border-radius: var(--r-full);
    padding: 0.38rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #80C4FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.6s ease both;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    background: #3FA0FF;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

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

    50% {
        opacity: 0.4;
        transform: scale(1.4);
    }
}

.hero-title {
    font-family: var(--font-d);
    font-size: clamp(2.8rem,5vw,4.2rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.08;
    margin-bottom: 1.2rem;
    animation: fadeUp 0.7s 0.1s ease both;
}

    .hero-title .line-b {
        display: block;
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-title .line-o {
        display: block;
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.hero-desc {
    font-size: 1.05rem;
    color: rgba(216,238,255,0.88);
    max-width: 520px;
    margin-bottom: 2rem;
    line-height: 1.8;
    animation: fadeUp 0.7s 0.2s ease both;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    animation: fadeUp 0.7s 0.3s ease both;
}

.hero-stats {
    display: flex;
    animation: fadeUp 0.7s 0.4s ease both;
}

.hero-stat {
    text-align: center;
    padding: 0 1.4rem;
    border-right: 1px solid rgba(26,127,255,0.2);
}

    .hero-stat:first-child {
        padding-left: 0;
    }

    .hero-stat:last-child {
        border-right: none;
    }

.stat-num {
    font-family: var(--font-t);
    font-size: 1.9rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-lbl {
    font-size: 0.68rem;
    color: rgba(150,192,224,0.8);
    margin-top: 0.2rem;
    letter-spacing: 0.5px;
    font-weight: 600;
}*/

/* Dashboard Mockup */
/*.hero-right {
    position: relative;
    animation: fadeRight 0.8s 0.3s ease both;
}

.hero-float-card {
    position: absolute;
    background: rgba(8,20,35,0.97);
    border: 1px solid rgba(26,127,255,0.28);
    border-radius: var(--r-md);
    padding: 0.6rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    font-size: 0.78rem;
    font-weight: 600;
    color: #96C0E0;
    white-space: nowrap;
    z-index: 2;
}

    .hero-float-card.card-tl {
        top: -18px;
        left: -38px;
        animation: fc1 4s ease-in-out infinite;
    }

    .hero-float-card.card-br {
        bottom: -18px;
        right: -28px;
        border-color: rgba(255,102,0,0.28);
        animation: fc2 5s ease-in-out infinite;
    }

@keyframes fc1 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes fc2 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

.dashboard-frame {
    background: rgba(8,16,28,0.94);
    border: 1px solid rgba(26,127,255,0.2);
    border-radius: var(--r-xl);
    padding: 1.2rem;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6),0 0 60px rgba(26,127,255,0.07);
}

.db-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(26,127,255,0.1);
}

.db-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.db-dot-r {
    background: #FF5F57;
}

.db-dot-y {
    background: #FEBC2E;
}

.db-dot-g {
    background: #28C840;
}

.db-title {
    font-family: var(--font-t);
    font-size: 0.6rem;
    color: #5888AA;
    margin-left: auto;
    letter-spacing: 1px;
}

.db-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.db-metric {
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
    padding: 0.8rem;
}

.db-metric-icon {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.db-metric-value {
    font-family: var(--font-t);
    font-size: 1.3rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

    .db-metric-value.b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .db-metric-value.o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.db-metric-label {
    font-size: 0.65rem;
    color: #5888AA;
    margin-top: 0.12rem;
    font-weight: 600;
}

.db-bar-box, .db-notif-box {
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
    padding: 0.8rem;
    margin-bottom: 0.7rem;
}

.db-notif-box {
    margin-bottom: 0;
}

.db-bar-title {
    font-size: 0.65rem;
    color: #5888AA;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.db-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

    .db-bar-row:last-child {
        margin-bottom: 0;
    }

.db-bar-label {
    font-size: 0.65rem;
    color: #96C0E0;
    width: 72px;
    flex-shrink: 0;
}

.db-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
}

.db-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.fill-b {
    background: var(--grad-blue);
}

.fill-o {
    background: var(--grad-orng);
}

.fill-t {
    background: linear-gradient(90deg,#00B4D8,#00E5B8);
}

.db-bar-pct {
    font-family: var(--font-t);
    font-size: 0.6rem;
    color: #5888AA;
    width: 26px;
    text-align: right;
}

.db-notif-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

    .db-notif-row:last-child {
        border: none;
        padding-bottom: 0;
    }

.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.notif-text {
    font-size: 0.68rem;
    color: #96C0E0;
    flex: 1;
}

.notif-time {
    font-size: 0.6rem;
    color: #5888AA;
}*/

/* ============================================================
   MARQUEE
   ============================================================ */
/*.marquee-section {
    background: linear-gradient(90deg,rgba(26,127,255,0.07),rgba(255,102,0,0.07));
    border-top: 1px solid rgba(26,127,255,0.1);
    border-bottom: 1px solid rgba(26,127,255,0.1);
    padding: 0.9rem 0;
    overflow: hidden;
}

[data-theme="light"] .marquee-section {
    background: linear-gradient(90deg,rgba(26,127,255,0.05),rgba(255,102,0,0.05));
}

.marquee-track {
    display: flex;
    animation: marquee 32s linear infinite;
    width: max-content;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1.75rem;
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-m);
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 1px solid rgba(26,127,255,0.1);
}

    .marquee-item .mi-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue-c);
        flex-shrink: 0;
    }

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}*/

/* ============================================================
   USP / FEATURE CARDS
   ============================================================ */
/*.usp-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.usp-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 2rem 1.5rem;
    transition: all var(--tr);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}*/
    /* Top accent line on card */
    /*.usp-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--grad-blue);
        transform: scaleX(0);
        transition: transform var(--tr);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

    .usp-card:hover::before {
        transform: scaleX(1);
    }

    .usp-card:hover {
        border-color: rgba(26,127,255,0.35);
        transform: translateY(-6px);
        box-shadow: var(--shadow-l),var(--glow-bs);
    }

.usp-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.15rem;
    flex-shrink: 0;
}

    .usp-icon-wrap.b {
        background: rgba(26,127,255,0.12);
    }

    .usp-icon-wrap.o {
        background: rgba(255,102,0,0.12);
    }

    .usp-icon-wrap.t {
        background: rgba(0,180,200,0.12);
    }

[data-theme="light"] .usp-icon-wrap.b {
    background: rgba(26,127,255,0.08);
}

[data-theme="light"] .usp-icon-wrap.o {
    background: rgba(238,85,0,0.08);
}

[data-theme="light"] .usp-icon-wrap.t {
    background: rgba(0,150,170,0.08);
}

.usp-title {
    font-family: var(--font-d);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.55rem;
}

.usp-desc {
    font-size: 0.88rem;
    color: var(--text-s);
    line-height: 1.72;
}*/
/* Ensure card text visible */
/*[data-theme="light"] .usp-title {
    color: var(--text-h);
}

[data-theme="light"] .usp-desc {
    color: var(--text-s);
}*/

/* ============================================================
   MODULE CARDS
   ============================================================ */
/*.modules-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.module-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: all var(--tr);
    text-decoration: none;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

    .module-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--grad-blue);
        transform: scaleX(0);
        transition: transform var(--tr);
    }

    .module-card:hover {
        border-color: rgba(26,127,255,0.35);
        transform: translateY(-4px);
        box-shadow: var(--shadow-l),var(--glow-bs);
    }

        .module-card:hover::after {
            transform: scaleX(1);
        }

.mc-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: rgba(26,127,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

    .mc-icon.o {
        background: rgba(255,102,0,0.1);
    }

    .mc-icon.t {
        background: rgba(0,180,200,0.1);
    }

.mc-title {
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-h);
}

.mc-desc {
    font-size: 0.77rem;
    color: var(--text-m);
    line-height: 1.6;
}

.mc-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--blue-c);
    margin-top: auto;
    transition: gap var(--tr);
}

.module-card:hover .mc-link {
    gap: 0.55rem;
}

[data-theme="light"] .mc-title {
    color: var(--text-h);
}

[data-theme="light"] .mc-desc {
    color: var(--text-m);
}

[data-theme="light"] .mc-link {
    color: var(--blue-b);
}

.modules-cta {
    text-align: center;
    margin-top: 2.5rem;
}*/

/* ============================================================
   BENEFITS / FEATURES LAYOUT
   ============================================================ */
/*.features-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    transition: all var(--tr);
    box-shadow: var(--shadow);
}

    .benefit-item:hover {
        border-color: rgba(26,127,255,0.3);
        transform: translateX(5px);
    }

.bi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--grad-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

    .bi-icon.o {
        background: var(--grad-orng);
    }

.bi-title {
    font-family: var(--font-d);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.15rem;
}

.bi-desc {
    font-size: 0.8rem;
    color: var(--text-s);
}

[data-theme="light"] .bi-title {
    color: var(--text-h);
}

[data-theme="light"] .bi-desc {
    color: var(--text-s);
}*/

/* Metric cards */
/*.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--tr);
    box-shadow: var(--shadow);
}

    .metric-card:hover {
        border-color: rgba(26,127,255,0.3);
        transform: scale(1.025);
        box-shadow: var(--shadow-l);
    }

.metric-num {
    font-family: var(--font-t);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.3rem;
}

    .metric-num.b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .metric-num.o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.metric-lbl {
    font-size: 0.78rem;
    color: var(--text-m);
    font-weight: 600;
}

[data-theme="light"] .metric-lbl {
    color: var(--text-m);
}

.tech-strip {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    padding: 0.9rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.tech-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-m);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .tech-badge::before {
        content: '✓';
        color: var(--blue-c);
        font-size: 0.88rem;
    }

[data-theme="light"] .tech-badge {
    color: var(--text-m);
}

    [data-theme="light"] .tech-badge::before {
        color: var(--blue-b);
    }*/

/* ============================================================
   HOW IT WORKS
   ============================================================ */
/*.hiw-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    position: relative;
}

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 40px;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: linear-gradient(90deg,transparent,var(--blue-c),var(--orng-c),transparent);
    }

.hiw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.9rem;
}

.step-num {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 2px solid rgba(26,127,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-t);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--blue-c);
    background: var(--bg-s2);
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 1;
    transition: all var(--tr);
}

.hiw-step:hover .step-num {
    background: rgba(26,127,255,0.12);
    border-color: var(--blue-c);
    box-shadow: var(--glow-bs);
    color: var(--text-h);
}

.hiw-step:nth-child(even) .step-num {
    border-color: rgba(255,102,0,0.3);
    color: var(--orng-c);
}

.hiw-step:nth-child(even):hover .step-num {
    background: rgba(255,102,0,0.12);
    border-color: var(--orng-c);
    box-shadow: var(--glow-os);
}

.step-title {
    font-family: var(--font-d);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.45rem;
}

.step-desc {
    font-size: 0.84rem;
    color: var(--text-m);
    line-height: 1.6;
}

[data-theme="light"] .step-title {
    color: var(--text-h);
}

[data-theme="light"] .step-desc {
    color: var(--text-m);
}*/

/* ============================================================
   TESTIMONIALS
   ============================================================ */
/*.testi-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.testi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 2rem;
    transition: all var(--tr);
    position: relative;
    box-shadow: var(--shadow);
}

    .testi-card::before {
        content: '"';
        position: absolute;
        top: 0;
        right: 1.2rem;
        font-size: 5rem;
        color: rgba(26,127,255,0.07);
        font-family: Georgia,serif;
        line-height: 1.1;
    }

    .testi-card:hover {
        border-color: rgba(26,127,255,0.3);
        transform: translateY(-4px);
        box-shadow: var(--shadow-l);
    }

.testi-stars {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
}

.star {
    color: var(--orng-d);
    font-size: 0.95rem;
}

.testi-text {
    color: var(--text-s);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
    font-style: italic;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--grad-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-d);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

    .author-avatar.o {
        background: var(--grad-orng);
        color: #0A1220;
    }

.author-name {
    font-family: var(--font-d);
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text-h);
}

.author-role {
    font-size: 0.75rem;
    color: var(--text-m);
}

[data-theme="light"] .testi-text {
    color: var(--text-s);
}

[data-theme="light"] .author-name {
    color: var(--text-h);
}*/

/* ============================================================
   CTA SECTION — always dark background
   ============================================================ */
/*.cta-section {
    background: linear-gradient(145deg,#04090F 0%,#081422 55%,#05101E 100%);
    position: relative;
    overflow: hidden;
}

    .cta-section::before {
        content: '';
        position: absolute;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 700px;
        height: 350px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(26,127,255,0.14) 0%,transparent 70%);
    }

    .cta-section::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        height: 250px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(255,102,0,0.1) 0%,transparent 70%);
    }

.cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}*/
    /* CTA text always white — it's on dark bg */
    /*.cta-inner .section-title, .cta-inner .section-title span {
        color: #F0F8FF !important;
        -webkit-text-fill-color: #F0F8FF !important;
    }

        .cta-inner .section-title .t-b {
            background: var(--grad-blue);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-clip: text;
        }

        .cta-inner .section-title .t-o {
            background: var(--grad-orng);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-clip: text;
        }

    .cta-inner .section-desc {
        color: rgba(216,238,255,0.82) !important;
    }

.cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}*/

/* PAGE HERO — always dark */
/*.page-hero {
    min-height: 290px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(145deg,#06101E 0%,#0D2040 100%);
    padding: 7rem 0 3.8rem;
    position: relative;
    overflow: hidden;
}

.page-hero-orb {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(26,127,255,0.1) 0%,transparent 70%);
    pointer-events: none;
}

.page-hero-title {
    font-family: var(--font-d);
    font-size: clamp(2rem,4vw,3.1rem);
    font-weight: 700;
    color: #F0F8FF;
    line-height: 1.12;
}

    .page-hero-title .t-b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .page-hero-title .t-o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-hero-desc {
    color: rgba(216,238,255,0.82);
    max-width: 540px;
    margin-top: 0.9rem;
}*/
/* Page hero badge */
/*.page-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(26,127,255,0.15);
    border: 1px solid rgba(26,127,255,0.35);
    border-radius: var(--r-full);
    padding: 0.32rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #80C4FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}*/

/* ============================================================
   FORMS — visible in BOTH themes
   ============================================================ */
/*.form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.4rem;
    box-shadow: var(--shadow);
}

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

.form-label {
    display: block;
    font-family: var(--font-d);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-s);
    letter-spacing: 0.5px;
    margin-bottom: 0.42rem;
}

.form-control {
    width: 100%;
    padding: 0.72rem 1rem;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-h);
    font-family: var(--font-b);
    font-size: 0.94rem;
    transition: all var(--tr);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

    .form-control:focus {
        border-color: var(--blue-c);
        box-shadow: 0 0 0 3px rgba(26,127,255,0.12);
    }

    .form-control::placeholder {
        color: var(--text-m);
    }*/
/* Light theme forms */
/*[data-theme="light"] .form-wrap {
    background: #FFFFFF;
    border-color: rgba(26,127,255,0.15);
}

[data-theme="light"] .form-control {
    background: #F8FBFF;
    color: #0D2040;
    border-color: rgba(26,127,255,0.2);
}

    [data-theme="light"] .form-control:focus {
        border-color: var(--blue-b);
        box-shadow: 0 0 0 3px rgba(26,127,255,0.1);
    }

    [data-theme="light"] .form-control::placeholder {
        color: #7A9AB8;
    }

[data-theme="light"] .form-label {
    color: var(--text-s);
}

select.form-control {
    cursor: pointer;
}

    select.form-control option {
        background: var(--bg-s2);
        color: var(--text-h);
    }

[data-theme="light"] select.form-control option {
    background: #FFFFFF;
    color: #0D2040;
}

textarea.form-control {
    min-height: 108px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}*/
/* Status messages */
/*.form-msg {
    display: block;
    padding: 0.8rem 1.1rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.15rem;
    min-height: 0;
}

    .form-msg:empty {
        display: none;
        padding: 0;
        margin: 0;
        border: none;
    }

.msg-ok {
    background: rgba(0,200,100,0.1);
    border: 1px solid rgba(0,200,100,0.3);
    color: #00CC78;
}

.msg-err {
    background: rgba(255,70,60,0.1);
    border: 1px solid rgba(255,70,60,0.3);
    color: #FF4A3C;
}

[data-theme="light"] .msg-ok {
    background: rgba(0,180,90,0.08);
    color: #00882A;
}

[data-theme="light"] .msg-err {
    background: rgba(220,30,20,0.08);
    color: #CC1A10;
}*/

/* ============================================================
   PRICING
   ============================================================ */
/*.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.4rem 1.9rem;
    display: flex;
    flex-direction: column;
    transition: all var(--tr);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

    .pricing-card.popular {
        border-color: var(--blue-c);
        box-shadow: 0 0 36px rgba(26,127,255,0.14);
    }

    .pricing-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-l);
    }

.popular-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: var(--grad-blue);
    color: #fff;
    font-family: var(--font-t);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.22rem 0.7rem;
    border-radius: var(--r-full);
    letter-spacing: 1px;
}

.pricing-plan {
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-m);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.pricing-price {
    font-family: var(--font-t);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-h);
    line-height: 1;
    margin-bottom: 0.2rem;
}

    .pricing-price .curr {
        font-size: 1.35rem;
        vertical-align: top;
        margin-top: 0.28rem;
        display: inline-block;
    }

.pricing-period {
    font-size: 0.76rem;
    color: var(--text-m);
    margin-bottom: 1.4rem;
}

.pricing-desc {
    font-size: 0.87rem;
    color: var(--text-s);
    margin-bottom: 1.6rem;
    line-height: 1.6;
}

.pricing-features {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    margin-bottom: 1.8rem;
    flex: 1;
}

    .pricing-features li {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.85rem;
        color: var(--text-s);
    }

        .pricing-features li::before {
            content: '✓';
            color: var(--blue-c);
            font-weight: 700;
            flex-shrink: 0;
        }

        .pricing-features li.no {
            color: var(--text-m);
            opacity: 0.55;
        }

            .pricing-features li.no::before {
                content: '✗';
            }

.pricing-cta {
    margin-top: auto;
}

[data-theme="light"] .pricing-plan {
    color: var(--text-m);
}

[data-theme="light"] .pricing-price {
    color: var(--text-h);
}

[data-theme="light"] .pricing-desc {
    color: var(--text-s);
}

[data-theme="light"] .pricing-features li {
    color: var(--text-s);
}*/

/* ============================================================
   FAQ
   ============================================================ */
/*.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--tr);
    box-shadow: var(--shadow);
}

    .faq-item.open {
        border-color: rgba(26,127,255,0.38);
    }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-d);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-p);
    text-align: left;
    transition: color var(--tr);
}

    .faq-question:hover {
        color: var(--blue-c);
    }

[data-theme="light"] .faq-question {
    color: var(--text-h);
}

    [data-theme="light"] .faq-question:hover {
        color: var(--blue-b);
    }

.faq-arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(26,127,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--blue-c);
    transition: transform var(--tr),background var(--tr);
}

.faq-item.open .faq-arrow {
    transform: rotate(180deg);
    background: var(--blue-b);
    color: #fff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s ease;
}

.faq-answer-inner {
    padding: 0 1.4rem 1.2rem;
    color: var(--text-s);
    font-size: 0.92rem;
    line-height: 1.8;
}

.faq-item.open .faq-answer {
    max-height: 500px;
}

[data-theme="light"] .faq-answer-inner {
    color: var(--text-s);
}*/

/* ============================================================
   FOOTER — always dark
   ============================================================ */
/*.footer-iso-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1.4rem;
    max-width: 345px;
}

.iso-badge {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(26, 127, 255, 0.14);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: all var(--tr);
    overflow: hidden;
}

    .iso-badge:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(26, 127, 255, 0.38);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(26, 127, 255, 0.12);
    }

    .iso-badge img {*/
        /* Show only the shield icon — crop out the dark text portion */
        /*width: 38px;
        height: 38px;
        object-fit: cover;
        object-position: left center;
        flex-shrink: 0;
    }

.iso-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.iso-code {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-d);
    color: #80C4FF;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.iso-name {
    font-size: 0.6rem;
    color: #a3c4e3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}*/

/* Responsive */
/*@media (max-width: 991px) {
    .footer-iso-row {
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .footer-iso-row {
        grid-template-columns: 1fr 1fr;
    }
}
.footer {
    background: var(--bg-footer);
    border-top: 1px solid rgba(26,127,255,0.1);
}

.footer-top {
    padding: 4rem 0 3rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

    .footer-logo-wrap img {
        height: 55px;
    }

.footer-brand-nm {
    font-family: var(--font-d);
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand-sb {
    font-size: 0.6rem;
    color: #4A6A88;
    letter-spacing: 0.5px;
    display: block;
    margin-top: 0.1rem;
}

.footer-desc {
    font-size: 0.85rem;
    color: #a3c4e3;
    line-height: 1.72;
    max-width: 295px;
    margin-bottom: 1.2rem;
}

.footer-social {
    display: flex;
    gap: 0.55rem;
}

.social-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: rgba(26,127,255,0.08);
    border: 1px solid rgba(26,127,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-family: var(--font-d);
    font-weight: 700;
    color: #a3c4e3;
    cursor: pointer;
    transition: all var(--tr);
    text-decoration: none;
    letter-spacing: 0;
}

    .social-btn:hover {
        background: rgba(26,127,255,0.2);
        border-color: var(--blue-c);
        color: #fff;
        transform: translateY(-2px);
    }

.footer-col-title {
    font-family: var(--font-d);
    font-size: 0.78rem;
    font-weight: 700;
    color: #F0F8FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.15rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

    .footer-links a {
        font-size: 0.85rem;
        color: #a3c4e3;
        transition: all var(--tr);
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

        .footer-links a:hover {
            color: #80C4FF;
            padding-left: 0.3rem;
        }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.fc-item {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.fc-icon {
    font-size: 0.88rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.fc-text {
    font-size: 0.83rem;
    color: #a3c4e3;
    line-height: 1.5;
}

    .fc-text a {
        color: #a3c4e3;
        transition: color var(--tr);
    }

        .fc-text a:hover {
            color: #80C4FF;
        }

.footer-bottom {
    padding: 1.15rem 0;
    border-top: 1px solid rgba(26,127,255,0.08);
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-copy {
    font-size: 0.78rem;
    color: #a3c4e3;
}

.footer-cin {
    font-size: 0.74rem;
    color: rgb(255 255 255 / 58%);
}

    .footer-cin a {
        color: #3FA0FF;
        transition: color var(--tr);
    }

        .footer-cin a:hover {
            color: #80C4FF;
        }*/

/* ============================================================
   SCROLL TOP
   ============================================================ */
/*.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad-blue);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
    box-shadow: var(--glow-bs);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all var(--tr);
    z-index: 100;
}

    .scroll-top.visible {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    .scroll-top:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-b);
    }*/

/* ============================================================
   ANIMATIONS
   ============================================================ */
/*@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

    .reveal.visible, .reveal-left.visible, .reveal-right.visible {
        opacity: 1;
        transform: none;
    }

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}

.delay-6 {
    transition-delay: 0.6s;
}*/

/* ============================================================
   RESPONSIVE
   ============================================================ */
/*@media(max-width:1100px) {
    .modules-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:900px) {
    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-right {
        display: none;
    }

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

    .features-layout {
        grid-template-columns: 1fr;
    }

    .features-right {
        display: none;
    }

    .hiw-steps {
        grid-template-columns: 1fr 1fr;
    }

        .hiw-steps::before {
            display: none;
        }

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

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }
}

@media(max-width:640px) {
    .usp-grid {
        grid-template-columns: 1fr;
    }

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

    .hiw-steps {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

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

    .hero-stat {
        border: none;
        padding-left: 0;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 4rem 0;
    }
}*/
/* ============================================================
   cloudeUNI — Responsive Additions
   Append to END of styles.css
   Covers: Navbar · Footer · ISO · Cards · Forms · All Grids
   ============================================================ */

/* ── 1280px — Large Tablet / Small Desktop ───────────────── */
/*@media (max-width: 1280px) {
    .footer-top {
        grid-template-columns: 1.8fr 1fr 1fr 1fr;
        gap: 2rem;
    }

    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-title {
        font-size: clamp(2.4rem, 4vw, 3.6rem);
    }
}*/

/* ── 1100px — Tablet Landscape ───────────────────────────── */
/*@media (max-width: 1100px) {
    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .usp-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .pricing-card {
        padding: 1.8rem 1.4rem;
    }

    .hiw-steps {
        gap: 0;
    }
}*/

/* ── 900px — Tablet Portrait ─────────────────────────────── */
/*@media (max-width: 900px) {*/

    /* Navbar */
    /*.nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-logo {
        height: 50px;
    }

    .btn-nav-demo {
        font-size: 0.8rem;
        padding: 0.45rem 1rem;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .nav-right {
        gap: 0.45rem;
    }*/

    /* Hero */
    /*.hero-container {
        grid-template-columns: 1fr;
        padding: 3rem 1.5rem;
    }

    .hero-right {
        display: none;
    }

    .hero-title {
        font-size: clamp(2.2rem, 5vw, 3rem);
    }*/

    /* Cards */
    /*.usp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .features-right {
        display: none;
    }

    .hiw-steps {
        grid-template-columns: 1fr 1fr;
    }

        .hiw-steps::before {
            display: none;
        }

    .testi-grid {
        grid-template-columns: 1fr;
    }*/

    /* Pricing */
    /*.pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }*/

    /* Footer */
    /*.footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-iso-row {
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-logo-wrap img {
        height: 46px;
    }*/

    /* Metrics */
    /*.metrics-grid {
        grid-template-columns: 1fr 1fr;
    }
}*/

/* ── 768px — Large Phone / Small Tablet ──────────────────── */
/*@media (max-width: 768px) {*/

    /* Sections */
    /*.section {
        padding: 4.5rem 0;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }*/

    /* Page hero */
    /*.page-hero {
        min-height: 220px;
        padding: 6rem 0 2.8rem;
    }*/

    /* Hero */
    /*.hero-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.8rem;
    }

    .hero-cta {
        gap: 0.75rem;
    }

        .hero-cta .btn {
            padding: 0.75rem 1.6rem;
            font-size: 0.92rem;
        }

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

    .hero-stat {
        border-right: none;
        padding: 0 0.8rem;
    }

        .hero-stat:first-child {
            padding-left: 0;
        }*/

    /* Module cards */
    /*.modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    .module-card {
        padding: 1.1rem;
    }*/

    /* USP */
    /*.usp-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }*/

    /* How It Works */
    /*.hiw-steps {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }*/

    /* Testimonials */
    /*.testi-grid {
        grid-template-columns: 1fr;
    }*/

    /* Footer */
    /*.footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
        padding: 3rem 0 2.5rem;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.35rem;
    }*/

    /* Forms */
    /*.form-row {
        grid-template-columns: 1fr;
    }

    .form-wrap {
        padding: 1.8rem 1.4rem;
    }*/

    /* CTA buttons */
    /*.cta-btns {
        flex-direction: column;
        align-items: center;
    }*/

    /* ISO badges — 2 col on small tablet */
    /*.iso-badge img {
        width: 32px;
        height: 32px;
    }

    .iso-code {
        font-size: 0.62rem;
    }

    .iso-name {
        font-size: 0.56rem;
    }
}*/

/* ── 640px — Phone Landscape ─────────────────────────────── */
/*@media (max-width: 640px) {*/

    /* Navbar */
    /*.nav-logo {
        height: 44px;
    }

    .btn-nav-demo {
        display: none;*/ /* hide on small phones — available in mobile menu */
    /*}*/

    /* Hero */
    /*.hero-title {
        font-size: clamp(2rem, 7vw, 2.6rem);
    }

    .hero-desc {
        font-size: 0.95rem;
    }

    .hero-cta {
        flex-direction: column;
    }

        .hero-cta .btn {
            width: 100%;
            justify-content: center;
        }*/

    /* Grids */
    /*.usp-grid {
        grid-template-columns: 1fr;
    }

    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hiw-steps {
        grid-template-columns: 1fr;
    }*/

    /* Footer */
    /*.footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-desc {
        max-width: 100%;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-logo-wrap img {
        height: 42px;
    }*/

    /* Pricing */
    /*.pricing-card {
        padding: 1.8rem 1.4rem;
    }*/

    /* Metrics */
    /*.metrics-grid {
        grid-template-columns: 1fr 1fr;
    }*/

    /* Section */
    /*.section {
        padding: 3.5rem 0;
    }*/

    /* Page hero */
    /*.page-hero-title {
        font-size: clamp(1.7rem, 5.5vw, 2.4rem);
    }*/

    /* Tech strip */
    /*.tech-strip {
        gap: 0.75rem;
    }

    .tech-badge {
        font-size: 0.72rem;
    }
}*/

/* ── 480px — Phone Portrait ──────────────────────────────── */
/*@media (max-width: 480px) {*/

    /* Container */
    /*.container {
        padding: 0 1rem;
    }*/

    /* Navbar */
    /*.nav-logo {
        height: 40px;
    }

    .nav-container {
        gap: 0.5rem;
    }

    .nav-right {
        gap: 0.35rem;
    }

    .theme-toggle {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }*/

    /* Hero */
    /*.hero-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    .hero-stat .stat-num {
        font-size: 1.5rem;
    }*/

    /* Modules — stay 2 col */
    /*.modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem;
    }

    .mc-title {
        font-size: 0.85rem;
    }

    .mc-desc {
        display: none;*/ /* too cramped on small phones */
    /*}*/

    /* USP */
    /*.usp-card {
        padding: 1.4rem 1.1rem;
    }*/

    /* ISO badges — 2x2 grid */
    /*.footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .iso-badge {
        padding: 0.4rem 0.45rem;
        gap: 0.35rem;
    }

        .iso-badge img {
            width: 28px;
            height: 28px;
        }

    .iso-code {
        font-size: 0.58rem;
    }

    .iso-name {
        display: none;*/ /* too small — icon + code is enough */
    /*}*/

    /* Footer bottom */
    /*.footer-copy,
    .footer-cin {
        font-size: 0.7rem;
        text-align: center;
    }*/

    /* Forms */
    /*.form-wrap {
        padding: 1.4rem 1rem;
    }

    .form-control {
        font-size: 0.88rem;
        padding: 0.65rem 0.85rem;
    }*/

    /* FAQ */
    /*.faq-question {
        font-size: 0.9rem;
        padding: 1rem 1.1rem;
    }

    .faq-answer-inner {
        padding: 0 1.1rem 1rem;
        font-size: 0.86rem;
    }*/

    /* Buttons */
    /*.btn {
        padding: 0.78rem 1.5rem;
        font-size: 0.9rem;
    }*/

    /* Pricing */
    /*.pricing-price {
        font-size: 2rem;
    }*/

    /* Section */
    /*.section {
        padding: 3rem 0;
    }

    .section-title {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem);
    }*/

    /* Page hero */
    /*.page-hero {
        min-height: 180px;
        padding: 5.5rem 0 2.2rem;
    }
}*/

/* ── 375px — Small Phones (iPhone SE etc.) ───────────────── */
/*@media (max-width: 375px) {

    .nav-logo {
        height: 36px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .modules-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .module-card {
        padding: 0.9rem;
    }

    .mc-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .iso-badge img {
        width: 24px;
        height: 24px;
    }

    .footer-logo-wrap img {
        height: 36px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.85rem;
    }

    .stat-num {
        font-size: 1.3rem;
    }

    .stat-lbl {
        font-size: 0.62rem;
    }
}*/





/* ============================================================
   cloudeUNI — Final Stylesheet v4
   Logo Colors: Blue-Cyan (#1A7FFF→#00C8FF) + Orange-Gold (#FF6600→#FFB800)
   Full Light / Dark Theme Support
   ============================================================ */
/*@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700;800&family=Orbitron:wght@500;700;900&display=swap');*/

/* ============================================================
   DARK THEME (default) — Navy base
   ============================================================ */
/*:root, [data-theme="dark"] {*/
    /* Backgrounds */
    /*--bg-body: #04090F;
    --bg-s1: #080F1A;
    --bg-s2: #0B1523;
    --bg-card: #0D1B2A;
    --bg-input: #0A1422;
    --bg-hero: linear-gradient(145deg,#04090F 0%,#081425 55%,#060E1C 100%);
    --bg-nav: rgba(4,9,15,0.95);
    --bg-footer: #020509;*/
    /* Borders */
    /*--border: rgba(26,127,255,0.18);
    --border-card: rgba(26,127,255,0.12);
    --border-focus: rgba(26,127,255,0.6);*/
    /* Text - MUST be clearly visible on dark bg */
    /*--text-h: #F0F8FF;
    --text-p: #D8EEFF;
    --text-s: #96C0E0;
    --text-m: #5888AA;
    --text-btn: #FFFFFF;*/
    /* Brand Blue (logo C) */
    /*--blue-a: #0055CC;
    --blue-b: #1A7FFF;
    --blue-c: #3FA0FF;
    --blue-d: #80C4FF;
    --blue-e: #BDE0FF;
    --grad-blue: linear-gradient(135deg,#1A7FFF 0%,#00C8FF 100%);*/
    /* Brand Orange (logo U) */
    /*--orng-a: #CC4400;
    --orng-b: #FF6600;
    --orng-c: #FF8C2A;
    --orng-d: #FFB800;
    --orng-e: #FFD980;
    --grad-orng: linear-gradient(135deg,#FF6600 0%,#FFB800 100%);*/
    /* Glows */
    /*--glow-b: 0 0 32px rgba(26,127,255,0.5);
    --glow-bs: 0 0 16px rgba(0,160,255,0.35);
    --glow-o: 0 0 32px rgba(255,102,0,0.5);
    --glow-os: 0 0 16px rgba(255,140,42,0.3);*/
    /* Shadows */
    /*--shadow: 0 6px 28px rgba(0,0,0,0.55);
    --shadow-l: 0 16px 48px rgba(0,0,0,0.65);
}*/

/* ============================================================
   LIGHT THEME — Clean white base
   ============================================================ */
/*[data-theme="light"] {
    --bg-body: #F4F8FF;
    --bg-s1: #FFFFFF;
    --bg-s2: #EBF2FF;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-hero: linear-gradient(145deg,#0A1E42 0%,#1A3A80 55%,#0C1F4A 100%);
    --bg-nav: rgba(255,255,255,0.97);
    --bg-footer: #06101E;
    --border: rgba(26,127,255,0.18);
    --border-card: rgba(26,127,255,0.12);
    --border-focus: rgba(26,127,255,0.5);*/
    /* Text — MUST be visible on white */
    /*--text-h: #061428;
    --text-p: #0D2040;
    --text-s: #2A4A6A;
    --text-m: #4A6A8A;
    --text-btn: #FFFFFF;
    --blue-a: #0044BB;
    --blue-b: #0066EE;
    --blue-c: #1A7FFF;
    --blue-d: #4A9FFF;
    --blue-e: #99CCFF;
    --grad-blue: linear-gradient(135deg,#0066EE 0%,#00AADD 100%);
    --orng-a: #BB3300;
    --orng-b: #EE5500;
    --orng-c: #FF7700;
    --orng-d: #FFAA00;
    --orng-e: #FFCC66;
    --grad-orng: linear-gradient(135deg,#EE5500 0%,#FFAA00 100%);
    --glow-b: 0 0 20px rgba(26,127,255,0.25);
    --glow-bs: 0 0 10px rgba(0,102,238,0.2);
    --glow-o: 0 0 20px rgba(238,85,0,0.25);
    --glow-os: 0 0 10px rgba(255,119,0,0.2);
    --shadow: 0 4px 20px rgba(10,40,100,0.1);
    --shadow-l: 0 12px 40px rgba(10,40,100,0.14);
}*/

/* ============================================================
   TOKENS & RESET
   ============================================================ */
/*:root {
    --font-d: 'Rajdhani',sans-serif;
    --font-b: 'Nunito',sans-serif;
    --font-t: 'Orbitron',sans-serif;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 9999px;
    --tr: 280ms cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-b);
    background: var(--bg-body);
    color: var(--text-p);
    overflow-x: hidden;
    line-height: 1.7;
    transition: background 0.4s,color 0.4s;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

button, input, textarea, select {
    font-family: var(--font-b);
}

.container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 1.5rem;
}*/
/* ============================================================
   TYPEWRITER — prevent layout reflow / flicker
   ============================================================ */
/*#typewriter {
    display: inline-block;
    min-width: 14ch;
    vertical-align: bottom;
}*/
/* ============================================================
   HERO BG — Minimal Professional (Ring + 2 Meteors)
   ============================================================ */

/* ── Outer ring ── */
/*.hero-ring-a {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 0.75px solid rgba(63,160,255,0.13);
    pointer-events: none;
    z-index: 0;
    animation: ringCW 40s linear infinite;
    will-change: transform;
}*/
    /* Middle concentric ring */
    /*.hero-ring-a::before {
        content: '';
        position: absolute;
        inset: 70px;
        border-radius: 50%;
        border: 0.5px solid rgba(0,200,255,0.08);
    }*/
    /* Inner concentric ring */
    /*.hero-ring-a::after {
        content: '';
        position: absolute;
        inset: 148px;
        border-radius: 50%;
        border: 0.5px solid rgba(63,160,255,0.05);
    }*/

/* ── Orbiting dot + comet tail on outer ring ── */
/*.hero-ring-a-dot {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: ringCW 40s linear infinite;
    will-change: transform;
}*/
    /* Glowing dot at 12 o'clock */
    /*.hero-ring-a-dot::before {
        content: '';
        position: absolute;
        top: -4px;
        left: 50%;
        width: 7px;
        height: 7px;
        margin-left: -3.5px;
        border-radius: 50%;
        background: #3FA0FF;
        box-shadow: 0 0 0 2px rgba(63,160,255,0.18), 0 0 10px 4px rgba(63,160,255,0.55), 0 0 22px 7px rgba(26,127,255,0.28);
        animation: dotGlow 3s ease-in-out infinite;
    }*/
    /* Comet tail */
    /*.hero-ring-a-dot::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 50%;
        width: 1px;
        height: 62px;
        margin-left: -0.5px;
        background: linear-gradient( 180deg, rgba(63,160,255,0.50) 0%, rgba(63,160,255,0.12) 55%, transparent 100% );
        border-radius: 1px;
    }*/

/* ── Slow counter-rotating dashed arc (same ring size) ── */
/*.hero-ring-arc {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient( circle at 50% 50%, transparent calc(50% - 0.75px), rgba(63,160,255,0.07) calc(50% - 0.75px), rgba(63,160,255,0.07) calc(50% + 0.5px), transparent calc(50% + 0.5px) );
    animation: ringCCW 80s linear infinite;
    will-change: transform;
    mask-image: conic-gradient( from 0deg, black 0deg 55deg, transparent 55deg 115deg, black 115deg 170deg, transparent 170deg 230deg, black 230deg 285deg, transparent 285deg 360deg );
    -webkit-mask-image: conic-gradient( from 0deg, black 0deg 55deg, transparent 55deg 115deg, black 115deg 170deg, transparent 170deg 230deg, black 230deg 285deg, transparent 285deg 360deg );
}*/

/* ── Crosshair at ring center ── */
/*.hero-crosshair {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 0;
}

    .hero-crosshair::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 1px;
        margin: -0.5px 0 0 -9px;
        background: rgba(63,160,255,0.20);
        box-shadow: 0 0 5px 1px rgba(63,160,255,0.12);
    }

    .hero-crosshair::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 18px;
        margin: -9px 0 0 -0.5px;
        background: rgba(63,160,255,0.20);
        box-shadow: 0 0 5px 1px rgba(63,160,255,0.12);
    }*/

/* ── 2 Meteors only ── */
/*.hero-meteor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    border-radius: 50px;
    will-change: transform, opacity;
}

    .hero-meteor::after {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: inherit;
        filter: blur(2px);
        opacity: 0.4;
    }*/
/* Blue meteor — upper third */
/*.hero-m1 {
    top: 22%;
    left: -240px;
    width: 200px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(63,160,255,0.75) 60%, rgba(255,255,255,0.95) );
    animation: meteorFly 16s 1s linear infinite;
}*/
/* Orange meteor — lower half, fires well after blue */
/*.hero-m2 {
    top: 60%;
    left: -180px;
    width: 150px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(255,140,42,0.65) 60%, rgba(255,220,180,0.9) );
    animation: meteorFly 16s 9s linear infinite;
}*/

/* ── Shared keyframes ── */
/*@keyframes ringCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ringCCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes dotGlow {
    0%,100% {
        box-shadow: 0 0 0 2px rgba(63,160,255,0.18), 0 0 10px 4px rgba(63,160,255,0.55), 0 0 22px 7px rgba(26,127,255,0.28);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(63,160,255,0.26), 0 0 16px 7px rgba(63,160,255,0.80), 0 0 34px 11px rgba(26,127,255,0.42);
    }
}

@keyframes meteorFly {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    84% {
        opacity: 0.4;
    }

    100% {
        transform: translateX(135vw);
        opacity: 0;
    }
}*/

/* ============================================================
   NAVBAR
   ============================================================ */
/*.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 0;
    transition: all var(--tr);
    border-bottom: 1px solid transparent;
}

    .navbar.scrolled, [data-theme="light"] .navbar {
        background: var(--bg-nav);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom-color: var(--border);
        box-shadow: var(--shadow);
        padding: 0.5rem 0;
    }

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}*/

/* Brand */
/*.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}*/

/*.nav-logo {
    height: 55px;
    width: auto;
}*/
/*.nav-logo {
    height: 60px;
    width: auto;
}*/

/* Dark theme (default) — show white/transparent logo */
/*[data-theme="dark"] .logo-dark {
    display: block;
}

[data-theme="dark"] .logo-light {
    display: none;
}*/

/* Light theme — show dark logo */
/*[data-theme="light"] .logo-dark {
    display: none;
}

[data-theme="light"] .logo-light {
    display: block;
}*/

/* Fallback if no data-theme set yet */
/*.logo-dark {
    display: block;
}

.logo-light {
    display: none;
}

.brand-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-family: var(--font-d);
    font-size: 1.4rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}

.brand-sub {
    font-size: 0.58rem;
    color: var(--text-m);
    letter-spacing: 0.5px;
    font-weight: 600;
}*/

/* Desktop links */
/*.nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    justify-content: center;
}

.nav-link {
    position: relative;
    font-family: var(--font-d);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-s);
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-sm);
    letter-spacing: 0.4px;
    transition: color var(--tr);
    white-space: nowrap;
}

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        right: 50%;
        height: 2px;
        background: var(--grad-blue);
        border-radius: 2px;
        transition: all var(--tr);
    }

    .nav-link:hover, .nav-link.active {
        color: var(--text-h);
    }

        .nav-link:hover::after, .nav-link.active::after {
            left: 0.85rem;
            right: 0.85rem;
        }

.nav-item {
    position: relative;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 210px;
    background: var(--bg-nav);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--tr);
    box-shadow: var(--shadow-l);
    z-index: 200;
}

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

.nav-dropdown a {
    display: block;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    color: var(--text-s);
    border-radius: var(--r-sm);
    transition: all var(--tr);
    font-weight: 500;
}

    .nav-dropdown a:hover {
        background: rgba(26,127,255,0.1);
        color: var(--blue-c);
        padding-left: 1.1rem;
    }*/

/* Right controls */
/*.nav-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-s);
    transition: all var(--tr);
}

    .theme-toggle:hover {
        border-color: var(--blue-c);
        color: var(--text-h);
        transform: rotate(18deg);
        background: rgba(26,127,255,0.1);
    }

    .theme-toggle .i-sun {
        display: none;
    }

    .theme-toggle .i-moon {
        display: block;
    }

[data-theme="light"] .theme-toggle .i-sun {
    display: block;
}

[data-theme="light"] .theme-toggle .i-moon {
    display: none;
}

.btn-nav-demo {
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.5rem 1.25rem;
    background: var(--grad-orng);
    color: #0A1220 !important;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(255,102,0,0.3);
    -webkit-text-fill-color: #0A1220 !important;
    display: inline-block;
}

    .btn-nav-demo:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-o);
    }

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text-p);
        border-radius: 2px;
        transition: var(--tr);
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

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

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }*/
/* ============================================================
   MOBILE OVERLAY — Right-slide Panel
   ============================================================ */
/*.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4, 9, 15, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;*/
    /* row: backdrop on left, panel on right */
    /*flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
}

    .mobile-overlay.open {
        display: flex;
        opacity: 1;
        pointer-events: all;
    }*/

/* ── Panel ────────────────────────────────────────────────── */
/*.mob-panel {
    width: 300px;
    max-width: 88vw;
    background: var(--bg-nav);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;*/ /* stack header/nav/footer vertically */
    /*overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.mobile-overlay.open .mob-panel {
    transform: translateX(0);
}*/

/* ── Header ───────────────────────────────────────────────── */
/*.mob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.mob-logo-img {
    height: 42px;
    width: auto;
}

.mobile-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.22);
    color: var(--text-s);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tr);
    flex-shrink: 0;
}

    .mobile-close-btn:hover {
        background: rgba(255,70,60,0.15);
        border-color: rgba(255,70,60,0.4);
        color: #FF4A3C;
        transform: rotate(90deg);
    }*/

/* ── Divider ──────────────────────────────────────────────── */
/*.mob-divider {
    display: none;
}*/
/* header border handles this */

/* ── Nav ──────────────────────────────────────────────────── */
/*.mob-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.65rem;
    flex: 1;
}

.mob-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.78rem 0.9rem;
    border-radius: var(--r-md);
    font-family: var(--font-d);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-s);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    text-align: left;
    min-height: 44px;
}

    .mob-link:hover {
        background: rgba(26,127,255,0.1);
        color: var(--blue-d);
    }

    .mob-link.active {
        background: rgba(26,127,255,0.12);
        color: var(--blue-c);
    }

.mob-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}*/

/* ── Submenu accordion ────────────────────────────────────── */
/*.mob-has-sub {
    display: flex;
    flex-direction: column;
}

.mob-arrow {
    margin-left: auto;
    color: var(--text-m);
    flex-shrink: 0;
    transition: transform 0.28s ease;
}

.mob-has-sub.open > .mob-toggle {
    background: rgba(26,127,255,0.1);
    color: var(--blue-c);
}

    .mob-has-sub.open > .mob-toggle .mob-arrow {
        transform: rotate(180deg);
        color: var(--blue-c);
    }

.mob-sub {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.2rem 0 0.3rem 1.1rem;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(26,127,255,0.25);
}

.mob-has-sub.open .mob-sub {
    display: flex;
}

.mob-sub-link {
    display: flex;
    align-items: center;
    padding: 0.62rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-m);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
    min-height: 40px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(26,127,255,0.15);
}

    .mob-sub-link:hover, .mob-sub-link:active {
        background: rgba(26,127,255,0.1);
        color: var(--blue-c);
        padding-left: 1rem;
    }*/

/* ── Footer ───────────────────────────────────────────────── */
/*.mob-footer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem 1.2rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.mob-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.8rem 1.5rem;
    background: var(--grad-orng);
    color: #0A1220 !important;
    -webkit-text-fill-color: #0A1220 !important;
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 700;
    border-radius: var(--r-full);
    text-decoration: none;
    transition: all var(--tr);
    box-shadow: 0 3px 14px rgba(255,102,0,0.3);
    min-height: 44px;
}

    .mob-cta:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-o);
    }

.mob-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    background: rgba(26,127,255,0.05);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
}

.mob-theme-lbl {
    font-size: 0.78rem;
    color: var(--text-m);
    font-weight: 600;
}

.mob-theme-btn {
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.2);
    border-radius: var(--r-full);
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-c);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font-b);
}

    .mob-theme-btn .i-sun {
        display: none;
    }

    .mob-theme-btn .i-moon {
        display: inline;
    }

[data-theme="light"] .mob-theme-btn .i-sun {
    display: inline;
}

[data-theme="light"] .mob-theme-btn .i-moon {
    display: none;
}*/

/* ── Light theme ──────────────────────────────────────────── */
/*[data-theme="light"] .mobile-overlay {
    background: rgba(10,30,80,0.35);
}

[data-theme="light"] .mob-panel {
    background: rgba(255,255,255,0.98);
    border-left-color: rgba(26,127,255,0.12);
}

[data-theme="light"] .mob-link {
    color: var(--text-s);
}

    [data-theme="light"] .mob-link:hover {
        background: rgba(26,127,255,0.07);
        color: var(--blue-b);
    }

[data-theme="light"] .mob-sub-link {
    color: var(--text-m);
}

    [data-theme="light"] .mob-sub-link:hover {
        color: var(--blue-b);
    }*/

/* ── Sizes ────────────────────────────────────────────────── */
/*@media (min-width: 480px) {
    .mob-panel {
        width: 320px;
    }
}

@media (max-width: 360px) {
    .mob-panel {
        width: 100vw;
        max-width: 100vw;
        border-left: none;
    }
}*/

/* ============================================================
   BUTTONS
   ============================================================ */
/*.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.85rem 2rem;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    font-size: 1rem;
    white-space: nowrap;
    line-height: 1;
}

.btn-primary {
    background: var(--grad-blue);
    color: #fff;
    box-shadow: var(--glow-bs);
}

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-b);
    }

.btn-orange {
    background: var(--grad-orng);
    color: #0A1220;
}

    .btn-orange:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-o);
    }

.btn-ghost {
    background: transparent;
    color: var(--text-s);
    border: 1.5px solid var(--border);
}

    .btn-ghost:hover {
        background: rgba(26,127,255,0.09);
        border-color: var(--blue-c);
        color: var(--text-h);
        transform: translateY(-2px);
    }*/
/* On light theme: ghost btn text must be dark */
/*[data-theme="light"] .btn-ghost {
    color: var(--text-s);
    border-color: rgba(26,127,255,0.3);
}

    [data-theme="light"] .btn-ghost:hover {
        color: var(--text-h);
    }*/

/* ============================================================
   SECTION SYSTEM
   ============================================================ */
/*.section {
    padding: 6rem 0;
}

.bg-s1 {
    background: var(--bg-s1);
}

.bg-s2 {
    background: var(--bg-s2);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.25);
    border-radius: var(--r-full);
    padding: 0.28rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--blue-c);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

    .section-chip.orng {
        background: rgba(255,102,0,0.1);
        border-color: rgba(255,140,42,0.3);
        color: var(--orng-c);
    }

[data-theme="light"] .section-chip {
    color: var(--blue-b);
}

    [data-theme="light"] .section-chip.orng {
        color: var(--orng-b);
    }

.section-title {
    font-family: var(--font-d);
    font-size: clamp(1.9rem,3.5vw,2.7rem);
    font-weight: 700;
    color: var(--text-h);
    line-height: 1.15;
    margin-bottom: 1rem;
}*/
/* Gradient text */
/*.t-b {
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.t-o {
    background: var(--grad-orng);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-desc {
    color: var(--text-s);
    font-size: 1rem;
    line-height: 1.8;
}*/
/* Ensure section desc visible on both themes */
/*[data-theme="light"] .section-desc {
    color: var(--text-s);
}*/

/* ============================================================
   HERO SECTION
   ============================================================ */
/*.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bg-hero);
    padding-top: 80px;
}

#heroCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    animation: orbFloat 8s ease-in-out infinite;
}

.hero-orb-1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle,rgba(26,127,255,0.22) 0%,transparent 70%);
    top: -120px;
    left: -100px;
}

.hero-orb-2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle,rgba(255,102,0,0.2) 0%,transparent 70%);
    bottom: -100px;
    right: 8%;
    animation-delay: -4s;
}

.hero-orb-3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle,rgba(0,200,255,0.12) 0%,transparent 70%);
    top: 35%;
    right: 28%;
    animation-delay: -2s;
}

@keyframes orbFloat {
    0%,100% {
        transform: translate(0,0);
    }

    33% {
        transform: translate(18px,-18px);
    }

    66% {
        transform: translate(-14px,14px);
    }
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

.hero-orb-1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle,rgba(26,127,255,0.18) 0%,transparent 70%);
    filter: blur(70px);
    top: -120px;
    left: -100px;
    animation: orbFloat1 12s ease-in-out infinite;
}

.hero-orb-2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle,rgba(255,102,0,0.15) 0%,transparent 70%);
    filter: blur(70px);
    bottom: -100px;
    right: 8%;
    animation: orbFloat2 15s ease-in-out infinite;
}

.hero-orb-3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle,rgba(0,200,255,0.1) 0%,transparent 70%);
    filter: blur(60px);
    top: 35%;
    right: 28%;
    animation: orbFloat1 10s 3s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(16px,-16px,0);
    }
}

@keyframes orbFloat2 {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(-14px,12px,0);
    }
}

.hero-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    padding: 4rem 1.5rem;
    max-width: 1220px;
    margin: 0 auto;
    width: 100%;
}*/

/* Hero text — always on dark hero bg, always white */
/*.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(26,127,255,0.15);
    border: 1px solid rgba(26,127,255,0.35);
    border-radius: var(--r-full);
    padding: 0.38rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #80C4FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.6s ease both;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    background: #3FA0FF;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

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

    50% {
        opacity: 0.4;
        transform: scale(1.4);
    }
}

.hero-title {
    font-family: var(--font-d);
    font-size: clamp(2.8rem,5vw,4.2rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.08;
    margin-bottom: 1.2rem;
    animation: fadeUp 0.7s 0.1s ease both;
}

    .hero-title .line-b {
        display: block;
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-title .line-o {
        display: block;
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.hero-desc {
    font-size: 1.05rem;
    color: rgba(216,238,255,0.88);
    max-width: 520px;
    margin-bottom: 2rem;
    line-height: 1.8;
    animation: fadeUp 0.7s 0.2s ease both;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    animation: fadeUp 0.7s 0.3s ease both;
}

.hero-stats {
    display: flex;
    animation: fadeUp 0.7s 0.4s ease both;
}

.hero-stat {
    text-align: center;
    padding: 0 1.4rem;
    border-right: 1px solid rgba(26,127,255,0.2);
}

    .hero-stat:first-child {
        padding-left: 0;
    }

    .hero-stat:last-child {
        border-right: none;
    }

.stat-num {
    font-family: var(--font-t);
    font-size: 1.9rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-lbl {
    font-size: 0.68rem;
    color: rgba(150,192,224,0.8);
    margin-top: 0.2rem;
    letter-spacing: 0.5px;
    font-weight: 600;
}*/

/* Dashboard Mockup */
/*.hero-right {
    position: relative;
    animation: fadeRight 0.8s 0.3s ease both;
}

.hero-float-card {
    position: absolute;
    background: rgba(8,20,35,0.97);
    border: 1px solid rgba(26,127,255,0.28);
    border-radius: var(--r-md);
    padding: 0.6rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    font-size: 0.78rem;
    font-weight: 600;
    color: #96C0E0;
    white-space: nowrap;
    z-index: 2;
}

    .hero-float-card.card-tl {
        top: -18px;
        left: -38px;
        animation: fc1 4s ease-in-out infinite;
    }

    .hero-float-card.card-br {
        bottom: -18px;
        right: -28px;
        border-color: rgba(255,102,0,0.28);
        animation: fc2 5s ease-in-out infinite;
    }

@keyframes fc1 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes fc2 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

.dashboard-frame {
    background: rgba(8,16,28,0.94);
    border: 1px solid rgba(26,127,255,0.2);
    border-radius: var(--r-xl);
    padding: 1.2rem;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6),0 0 60px rgba(26,127,255,0.07);
}

.db-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(26,127,255,0.1);
}

.db-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.db-dot-r {
    background: #FF5F57;
}

.db-dot-y {
    background: #FEBC2E;
}

.db-dot-g {
    background: #28C840;
}

.db-title {
    font-family: var(--font-t);
    font-size: 0.6rem;
    color: #5888AA;
    margin-left: auto;
    letter-spacing: 1px;
}

.db-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.db-metric {
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
    padding: 0.8rem;
}

.db-metric-icon {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.db-metric-value {
    font-family: var(--font-t);
    font-size: 1.3rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

    .db-metric-value.b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .db-metric-value.o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.db-metric-label {
    font-size: 0.65rem;
    color: #5888AA;
    margin-top: 0.12rem;
    font-weight: 600;
}

.db-bar-box, .db-notif-box {
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
    padding: 0.8rem;
    margin-bottom: 0.7rem;
}

.db-notif-box {
    margin-bottom: 0;
}

.db-bar-title {
    font-size: 0.65rem;
    color: #5888AA;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.db-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

    .db-bar-row:last-child {
        margin-bottom: 0;
    }

.db-bar-label {
    font-size: 0.65rem;
    color: #96C0E0;
    width: 72px;
    flex-shrink: 0;
}

.db-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
}

.db-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.fill-b {
    background: var(--grad-blue);
}

.fill-o {
    background: var(--grad-orng);
}

.fill-t {
    background: linear-gradient(90deg,#00B4D8,#00E5B8);
}

.db-bar-pct {
    font-family: var(--font-t);
    font-size: 0.6rem;
    color: #5888AA;
    width: 26px;
    text-align: right;
}

.db-notif-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

    .db-notif-row:last-child {
        border: none;
        padding-bottom: 0;
    }

.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.notif-text {
    font-size: 0.68rem;
    color: #96C0E0;
    flex: 1;
}

.notif-time {
    font-size: 0.6rem;
    color: #5888AA;
}*/

/* ============================================================
   MARQUEE
   ============================================================ */
/*.marquee-section {
    background: linear-gradient(90deg,rgba(26,127,255,0.07),rgba(255,102,0,0.07));
    border-top: 1px solid rgba(26,127,255,0.1);
    border-bottom: 1px solid rgba(26,127,255,0.1);
    padding: 0.9rem 0;
    overflow: hidden;
}

[data-theme="light"] .marquee-section {
    background: linear-gradient(90deg,rgba(26,127,255,0.05),rgba(255,102,0,0.05));
}

.marquee-track {
    display: flex;
    animation: marquee 32s linear infinite;
    width: max-content;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1.75rem;
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-m);
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 1px solid rgba(26,127,255,0.1);
}

    .marquee-item .mi-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue-c);
        flex-shrink: 0;
    }

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}*/

/* ============================================================
   USP / FEATURE CARDS
   ============================================================ */
/*.usp-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.usp-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 2rem 1.5rem;
    transition: all var(--tr);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}*/
    /* Top accent line on card */
    /*.usp-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--grad-blue);
        transform: scaleX(0);
        transition: transform var(--tr);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

    .usp-card:hover::before {
        transform: scaleX(1);
    }

    .usp-card:hover {
        border-color: rgba(26,127,255,0.35);
        transform: translateY(-6px);
        box-shadow: var(--shadow-l),var(--glow-bs);
    }

.usp-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.15rem;
    flex-shrink: 0;
}

    .usp-icon-wrap.b {
        background: rgba(26,127,255,0.12);
    }

    .usp-icon-wrap.o {
        background: rgba(255,102,0,0.12);
    }

    .usp-icon-wrap.t {
        background: rgba(0,180,200,0.12);
    }

[data-theme="light"] .usp-icon-wrap.b {
    background: rgba(26,127,255,0.08);
}

[data-theme="light"] .usp-icon-wrap.o {
    background: rgba(238,85,0,0.08);
}

[data-theme="light"] .usp-icon-wrap.t {
    background: rgba(0,150,170,0.08);
}

.usp-title {
    font-family: var(--font-d);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.55rem;
}

.usp-desc {
    font-size: 0.88rem;
    color: var(--text-s);
    line-height: 1.72;
}*/
/* Ensure card text visible */
/*[data-theme="light"] .usp-title {
    color: var(--text-h);
}

[data-theme="light"] .usp-desc {
    color: var(--text-s);
}*/

/* ============================================================
   MODULE CARDS
   ============================================================ */
/*.modules-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.module-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: all var(--tr);
    text-decoration: none;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

    .module-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--grad-blue);
        transform: scaleX(0);
        transition: transform var(--tr);
    }

    .module-card:hover {
        border-color: rgba(26,127,255,0.35);
        transform: translateY(-4px);
        box-shadow: var(--shadow-l),var(--glow-bs);
    }

        .module-card:hover::after {
            transform: scaleX(1);
        }

.mc-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: rgba(26,127,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

    .mc-icon.o {
        background: rgba(255,102,0,0.1);
    }

    .mc-icon.t {
        background: rgba(0,180,200,0.1);
    }

.mc-title {
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-h);
}

.mc-desc {
    font-size: 0.77rem;
    color: var(--text-m);
    line-height: 1.6;
}

.mc-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--blue-c);
    margin-top: auto;
    transition: gap var(--tr);
}

.module-card:hover .mc-link {
    gap: 0.55rem;
}

[data-theme="light"] .mc-title {
    color: var(--text-h);
}

[data-theme="light"] .mc-desc {
    color: var(--text-m);
}

[data-theme="light"] .mc-link {
    color: var(--blue-b);
}

.modules-cta {
    text-align: center;
    margin-top: 2.5rem;
}*/

/* ============================================================
   BENEFITS / FEATURES LAYOUT
   ============================================================ */
/*.features-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    transition: all var(--tr);
    box-shadow: var(--shadow);
}

    .benefit-item:hover {
        border-color: rgba(26,127,255,0.3);
        transform: translateX(5px);
    }

.bi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--grad-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

    .bi-icon.o {
        background: var(--grad-orng);
    }

.bi-title {
    font-family: var(--font-d);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.15rem;
}

.bi-desc {
    font-size: 0.8rem;
    color: var(--text-s);
}

[data-theme="light"] .bi-title {
    color: var(--text-h);
}

[data-theme="light"] .bi-desc {
    color: var(--text-s);
}*/

/* Metric cards */
/*.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--tr);
    box-shadow: var(--shadow);
}

    .metric-card:hover {
        border-color: rgba(26,127,255,0.3);
        transform: scale(1.025);
        box-shadow: var(--shadow-l);
    }

.metric-num {
    font-family: var(--font-t);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.3rem;
}

    .metric-num.b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .metric-num.o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.metric-lbl {
    font-size: 0.78rem;
    color: var(--text-m);
    font-weight: 600;
}

[data-theme="light"] .metric-lbl {
    color: var(--text-m);
}

.tech-strip {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    padding: 0.9rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.tech-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-m);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .tech-badge::before {
        content: '✓';
        color: var(--blue-c);
        font-size: 0.88rem;
    }

[data-theme="light"] .tech-badge {
    color: var(--text-m);
}

    [data-theme="light"] .tech-badge::before {
        color: var(--blue-b);
    }*/

/* ============================================================
   HOW IT WORKS
   ============================================================ */
/*.hiw-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    position: relative;
}

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 40px;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: linear-gradient(90deg,transparent,var(--blue-c),var(--orng-c),transparent);
    }

.hiw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.9rem;
}

.step-num {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 2px solid rgba(26,127,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-t);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--blue-c);
    background: var(--bg-s2);
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 1;
    transition: all var(--tr);
}

.hiw-step:hover .step-num {
    background: rgba(26,127,255,0.12);
    border-color: var(--blue-c);
    box-shadow: var(--glow-bs);
    color: var(--text-h);
}

.hiw-step:nth-child(even) .step-num {
    border-color: rgba(255,102,0,0.3);
    color: var(--orng-c);
}

.hiw-step:nth-child(even):hover .step-num {
    background: rgba(255,102,0,0.12);
    border-color: var(--orng-c);
    box-shadow: var(--glow-os);
}

.step-title {
    font-family: var(--font-d);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.45rem;
}

.step-desc {
    font-size: 0.84rem;
    color: var(--text-m);
    line-height: 1.6;
}

[data-theme="light"] .step-title {
    color: var(--text-h);
}

[data-theme="light"] .step-desc {
    color: var(--text-m);
}*/

/* ============================================================
   TESTIMONIALS
   ============================================================ */
/*.testi-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.testi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 2rem;
    transition: all var(--tr);
    position: relative;
    box-shadow: var(--shadow);
}

    .testi-card::before {
        content: '"';
        position: absolute;
        top: 0;
        right: 1.2rem;
        font-size: 5rem;
        color: rgba(26,127,255,0.07);
        font-family: Georgia,serif;
        line-height: 1.1;
    }

    .testi-card:hover {
        border-color: rgba(26,127,255,0.3);
        transform: translateY(-4px);
        box-shadow: var(--shadow-l);
    }

.testi-stars {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
}

.star {
    color: var(--orng-d);
    font-size: 0.95rem;
}

.testi-text {
    color: var(--text-s);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
    font-style: italic;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--grad-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-d);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

    .author-avatar.o {
        background: var(--grad-orng);
        color: #0A1220;
    }

.author-name {
    font-family: var(--font-d);
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text-h);
}

.author-role {
    font-size: 0.75rem;
    color: var(--text-m);
}

[data-theme="light"] .testi-text {
    color: var(--text-s);
}

[data-theme="light"] .author-name {
    color: var(--text-h);
}*/

/* ============================================================
   CTA SECTION — always dark background
   ============================================================ */
/*.cta-section {
    background: linear-gradient(145deg,#04090F 0%,#081422 55%,#05101E 100%);
    position: relative;
    overflow: hidden;
}

    .cta-section::before {
        content: '';
        position: absolute;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 700px;
        height: 350px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(26,127,255,0.14) 0%,transparent 70%);
    }

    .cta-section::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        height: 250px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(255,102,0,0.1) 0%,transparent 70%);
    }

.cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}*/
    /* CTA text always white — it's on dark bg */
    /*.cta-inner .section-title, .cta-inner .section-title span {
        color: #F0F8FF !important;
        -webkit-text-fill-color: #F0F8FF !important;
    }

        .cta-inner .section-title .t-b {
            background: var(--grad-blue);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-clip: text;
        }

        .cta-inner .section-title .t-o {
            background: var(--grad-orng);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-clip: text;
        }

    .cta-inner .section-desc {
        color: rgba(216,238,255,0.82) !important;
    }

.cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}*/

/* PAGE HERO — always dark */
/*.page-hero {
    min-height: 290px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(145deg,#06101E 0%,#0D2040 100%);
    padding: 7rem 0 3.8rem;
    position: relative;
    overflow: hidden;
}

.page-hero-orb {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(26,127,255,0.1) 0%,transparent 70%);
    pointer-events: none;
}

.page-hero-title {
    font-family: var(--font-d);
    font-size: clamp(2rem,4vw,3.1rem);
    font-weight: 700;
    color: #F0F8FF;
    line-height: 1.12;
}

    .page-hero-title .t-b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .page-hero-title .t-o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-hero-desc {
    color: rgba(216,238,255,0.82);
    max-width: 540px;
    margin-top: 0.9rem;
}*/
/* Page hero badge */
/*.page-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(26,127,255,0.15);
    border: 1px solid rgba(26,127,255,0.35);
    border-radius: var(--r-full);
    padding: 0.32rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #80C4FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}*/

/* ============================================================
   FORMS — visible in BOTH themes
   ============================================================ */
/*.form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.4rem;
    box-shadow: var(--shadow);
}

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

.form-label {
    display: block;
    font-family: var(--font-d);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-s);
    letter-spacing: 0.5px;
    margin-bottom: 0.42rem;
}

.form-control {
    width: 100%;
    padding: 0.72rem 1rem;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-h);
    font-family: var(--font-b);
    font-size: 0.94rem;
    transition: all var(--tr);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

    .form-control:focus {
        border-color: var(--blue-c);
        box-shadow: 0 0 0 3px rgba(26,127,255,0.12);
    }

    .form-control::placeholder {
        color: var(--text-m);
    }*/
/* Light theme forms */
/*[data-theme="light"] .form-wrap {
    background: #FFFFFF;
    border-color: rgba(26,127,255,0.15);
}

[data-theme="light"] .form-control {
    background: #F8FBFF;
    color: #0D2040;
    border-color: rgba(26,127,255,0.2);
}

    [data-theme="light"] .form-control:focus {
        border-color: var(--blue-b);
        box-shadow: 0 0 0 3px rgba(26,127,255,0.1);
    }

    [data-theme="light"] .form-control::placeholder {
        color: #7A9AB8;
    }

[data-theme="light"] .form-label {
    color: var(--text-s);
}

select.form-control {
    cursor: pointer;
}

    select.form-control option {
        background: var(--bg-s2);
        color: var(--text-h);
    }

[data-theme="light"] select.form-control option {
    background: #FFFFFF;
    color: #0D2040;
}

textarea.form-control {
    min-height: 108px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}*/
/* Status messages */
/*.form-msg {
    display: block;
    padding: 0.8rem 1.1rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.15rem;
    min-height: 0;
}

    .form-msg:empty {
        display: none;
        padding: 0;
        margin: 0;
        border: none;
    }

.msg-ok {
    background: rgba(0,200,100,0.1);
    border: 1px solid rgba(0,200,100,0.3);
    color: #00CC78;
}

.msg-err {
    background: rgba(255,70,60,0.1);
    border: 1px solid rgba(255,70,60,0.3);
    color: #FF4A3C;
}

[data-theme="light"] .msg-ok {
    background: rgba(0,180,90,0.08);
    color: #00882A;
}

[data-theme="light"] .msg-err {
    background: rgba(220,30,20,0.08);
    color: #CC1A10;
}*/

/* ============================================================
   PRICING
   ============================================================ */
/*.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.4rem 1.9rem;
    display: flex;
    flex-direction: column;
    transition: all var(--tr);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

    .pricing-card.popular {
        border-color: var(--blue-c);
        box-shadow: 0 0 36px rgba(26,127,255,0.14);
    }

    .pricing-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-l);
    }

.popular-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: var(--grad-blue);
    color: #fff;
    font-family: var(--font-t);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.22rem 0.7rem;
    border-radius: var(--r-full);
    letter-spacing: 1px;
}

.pricing-plan {
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-m);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.pricing-price {
    font-family: var(--font-t);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-h);
    line-height: 1;
    margin-bottom: 0.2rem;
}

    .pricing-price .curr {
        font-size: 1.35rem;
        vertical-align: top;
        margin-top: 0.28rem;
        display: inline-block;
    }

.pricing-period {
    font-size: 0.76rem;
    color: var(--text-m);
    margin-bottom: 1.4rem;
}

.pricing-desc {
    font-size: 0.87rem;
    color: var(--text-s);
    margin-bottom: 1.6rem;
    line-height: 1.6;
}

.pricing-features {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    margin-bottom: 1.8rem;
    flex: 1;
}

    .pricing-features li {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.85rem;
        color: var(--text-s);
    }

        .pricing-features li::before {
            content: '✓';
            color: var(--blue-c);
            font-weight: 700;
            flex-shrink: 0;
        }

        .pricing-features li.no {
            color: var(--text-m);
            opacity: 0.55;
        }

            .pricing-features li.no::before {
                content: '✗';
            }

.pricing-cta {
    margin-top: auto;
}

[data-theme="light"] .pricing-plan {
    color: var(--text-m);
}

[data-theme="light"] .pricing-price {
    color: var(--text-h);
}

[data-theme="light"] .pricing-desc {
    color: var(--text-s);
}

[data-theme="light"] .pricing-features li {
    color: var(--text-s);
}*/

/* ============================================================
   FAQ
   ============================================================ */
/*.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--tr);
    box-shadow: var(--shadow);
}

    .faq-item.open {
        border-color: rgba(26,127,255,0.38);
    }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-d);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-p);
    text-align: left;
    transition: color var(--tr);
}

    .faq-question:hover {
        color: var(--blue-c);
    }

[data-theme="light"] .faq-question {
    color: var(--text-h);
}

    [data-theme="light"] .faq-question:hover {
        color: var(--blue-b);
    }

.faq-arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(26,127,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--blue-c);
    transition: transform var(--tr),background var(--tr);
}

.faq-item.open .faq-arrow {
    transform: rotate(180deg);
    background: var(--blue-b);
    color: #fff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s ease;
}

.faq-answer-inner {
    padding: 0 1.4rem 1.2rem;
    color: var(--text-s);
    font-size: 0.92rem;
    line-height: 1.8;
}

.faq-item.open .faq-answer {
    max-height: 500px;
}

[data-theme="light"] .faq-answer-inner {
    color: var(--text-s);
}*/

/* ============================================================
   FOOTER — always dark
   ============================================================ */
/*.footer-iso-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1.4rem;
    max-width: 345px;
}

.iso-badge {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(26, 127, 255, 0.14);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: all var(--tr);
    overflow: hidden;
}

    .iso-badge:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(26, 127, 255, 0.38);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(26, 127, 255, 0.12);
    }

    .iso-badge img {*/
        /* Show only the shield icon — crop out the dark text portion */
        /*width: 38px;
        height: 38px;
        object-fit: cover;
        object-position: left center;
        flex-shrink: 0;
    }

.iso-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.iso-code {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-d);
    color: #80C4FF;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.iso-name {
    font-size: 0.6rem;
    color: #a3c4e3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}*/

/* Responsive */
/*@media (max-width: 991px) {
    .footer-iso-row {
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .footer-iso-row {
        grid-template-columns: 1fr 1fr;
    }
}

.footer {
    background: var(--bg-footer);
    border-top: 1px solid rgba(26,127,255,0.1);
}

.footer-top {
    padding: 4rem 0 3rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

    .footer-logo-wrap img {
        height: 55px;
    }

.footer-brand-nm {
    font-family: var(--font-d);
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand-sb {
    font-size: 0.6rem;
    color: #4A6A88;
    letter-spacing: 0.5px;
    display: block;
    margin-top: 0.1rem;
}

.footer-desc {
    font-size: 0.85rem;
    color: #a3c4e3;
    line-height: 1.72;
    max-width: 295px;
    margin-bottom: 1.2rem;
}

.footer-social {
    display: flex;
    gap: 0.55rem;
}

.social-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: rgba(26,127,255,0.08);
    border: 1px solid rgba(26,127,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-family: var(--font-d);
    font-weight: 700;
    color: #a3c4e3;
    cursor: pointer;
    transition: all var(--tr);
    text-decoration: none;
    letter-spacing: 0;
}

    .social-btn:hover {
        background: rgba(26,127,255,0.2);
        border-color: var(--blue-c);
        color: #fff;
        transform: translateY(-2px);
    }

.footer-col-title {
    font-family: var(--font-d);
    font-size: 0.78rem;
    font-weight: 700;
    color: #F0F8FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.15rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

    .footer-links a {
        font-size: 0.85rem;
        color: #a3c4e3;
        transition: all var(--tr);
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

        .footer-links a:hover {
            color: #80C4FF;
            padding-left: 0.3rem;
        }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.fc-item {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.fc-icon {
    font-size: 0.88rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.fc-text {
    font-size: 0.83rem;
    color: #a3c4e3;
    line-height: 1.5;
}

    .fc-text a {
        color: #a3c4e3;
        transition: color var(--tr);
    }

        .fc-text a:hover {
            color: #80C4FF;
        }

.footer-bottom {
    padding: 1.15rem 0;
    border-top: 1px solid rgba(26,127,255,0.08);
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-copy {
    font-size: 0.78rem;
    color: #a3c4e3;
}

.footer-cin {
    font-size: 0.74rem;
    color: rgb(255 255 255 / 58%);
}

    .footer-cin a {
        color: #3FA0FF;
        transition: color var(--tr);
    }

        .footer-cin a:hover {
            color: #80C4FF;
        }*/

/* ============================================================
   SCROLL TOP
   ============================================================ */
/*.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad-blue);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
    box-shadow: var(--glow-bs);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all var(--tr);
    z-index: 100;
}

    .scroll-top.visible {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    .scroll-top:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-b);
    }*/

/* ============================================================
   ANIMATIONS
   ============================================================ */
/*@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

    .reveal.visible, .reveal-left.visible, .reveal-right.visible {
        opacity: 1;
        transform: none;
    }

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}

.delay-6 {
    transition-delay: 0.6s;
}*/

/* ============================================================
   RESPONSIVE
   ============================================================ */
/*@media(max-width:1100px) {
    .modules-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:900px) {
    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-right {
        display: none;
    }

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

    .features-layout {
        grid-template-columns: 1fr;
    }

    .features-right {
        display: none;
    }

    .hiw-steps {
        grid-template-columns: 1fr 1fr;
    }

        .hiw-steps::before {
            display: none;
        }

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

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }
}

@media(max-width:640px) {
    .usp-grid {
        grid-template-columns: 1fr;
    }

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

    .hiw-steps {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

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

    .hero-stat {
        border: none;
        padding-left: 0;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 4rem 0;
    }
}*/
/* ============================================================
   cloudeUNI — Responsive Additions
   Append to END of styles.css
   Covers: Navbar · Footer · ISO · Cards · Forms · All Grids
   ============================================================ */

/* ── 1280px — Large Tablet / Small Desktop ───────────────── */
/*@media (max-width: 1280px) {
    .footer-top {
        grid-template-columns: 1.8fr 1fr 1fr 1fr;
        gap: 2rem;
    }

    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-title {
        font-size: clamp(2.4rem, 4vw, 3.6rem);
    }
}*/

/* ── 1100px — Tablet Landscape ───────────────────────────── */
/*@media (max-width: 1100px) {
    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .usp-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .pricing-card {
        padding: 1.8rem 1.4rem;
    }

    .hiw-steps {
        gap: 0;
    }
}*/

/* ── 900px — Tablet Portrait ─────────────────────────────── */
/*@media (max-width: 900px) {*/

    /* Navbar */
    /*.nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-logo {
        height: 50px;
    }

    .btn-nav-demo {
        font-size: 0.8rem;
        padding: 0.45rem 1rem;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .nav-right {
        gap: 0.45rem;
    }*/

    /* Hero */
    /*.hero-container {
        grid-template-columns: 1fr;
        padding: 3rem 1.5rem;
    }

    .hero-right {
        display: none;
    }

    .hero-title {
        font-size: clamp(2.2rem, 5vw, 3rem);
    }*/

    /* Cards */
    /*.usp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .features-right {
        display: none;
    }

    .hiw-steps {
        grid-template-columns: 1fr 1fr;
    }

        .hiw-steps::before {
            display: none;
        }

    .testi-grid {
        grid-template-columns: 1fr;
    }*/

    /* Pricing */
    /*.pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }*/

    /* Footer */
    /*.footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-iso-row {
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-logo-wrap img {
        height: 46px;
    }*/

    /* Metrics */
    /*.metrics-grid {
        grid-template-columns: 1fr 1fr;
    }
}*/

/* ── 768px — Large Phone / Small Tablet ──────────────────── */
/*@media (max-width: 768px) {*/

    /* Sections */
    /*.section {
        padding: 4.5rem 0;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }*/

    /* Page hero */
    /*.page-hero {
        min-height: 220px;
        padding: 6rem 0 2.8rem;
    }*/

    /* Hero */
    /*.hero-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.8rem;
    }

    .hero-cta {
        gap: 0.75rem;
    }

        .hero-cta .btn {
            padding: 0.75rem 1.6rem;
            font-size: 0.92rem;
        }

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

    .hero-stat {
        border-right: none;
        padding: 0 0.8rem;
    }

        .hero-stat:first-child {
            padding-left: 0;
        }*/

    /* Module cards */
    /*.modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    .module-card {
        padding: 1.1rem;
    }*/

    /* USP */
    /*.usp-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }*/

    /* How It Works */
    /*.hiw-steps {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }*/

    /* Testimonials */
    /*.testi-grid {
        grid-template-columns: 1fr;
    }*/

    /* Footer */
    /*.footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
        padding: 3rem 0 2.5rem;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.35rem;
    }*/

    /* Forms */
    /*.form-row {
        grid-template-columns: 1fr;
    }

    .form-wrap {
        padding: 1.8rem 1.4rem;
    }*/

    /* CTA buttons */
    /*.cta-btns {
        flex-direction: column;
        align-items: center;
    }*/

    /* ISO badges — 2 col on small tablet */
    /*.iso-badge img {
        width: 32px;
        height: 32px;
    }

    .iso-code {
        font-size: 0.62rem;
    }

    .iso-name {
        font-size: 0.56rem;
    }
}*/

/* ── 640px — Phone Landscape ─────────────────────────────── */
/*@media (max-width: 640px) {*/

    /* Navbar */
    /*.nav-logo {
        height: 44px;
    }

    .btn-nav-demo {
        display: none;*/ /* hide on small phones — available in mobile menu */
    /*}*/

    /* Hero */
    /*.hero-title {
        font-size: clamp(2rem, 7vw, 2.6rem);
    }

    .hero-desc {
        font-size: 0.95rem;
    }

    .hero-cta {
        flex-direction: column;
    }

        .hero-cta .btn {
            width: 100%;
            justify-content: center;
        }*/

    /* Grids */
    /*.usp-grid {
        grid-template-columns: 1fr;
    }

    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hiw-steps {
        grid-template-columns: 1fr;
    }*/

    /* Footer */
    /*.footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-desc {
        max-width: 100%;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-logo-wrap img {
        height: 42px;
    }*/

    /* Pricing */
    /*.pricing-card {
        padding: 1.8rem 1.4rem;
    }*/

    /* Metrics */
    /*.metrics-grid {
        grid-template-columns: 1fr 1fr;
    }*/

    /* Section */
    /*.section {
        padding: 3.5rem 0;
    }*/

    /* Page hero */
    /*.page-hero-title {
        font-size: clamp(1.7rem, 5.5vw, 2.4rem);
    }*/

    /* Tech strip */
    /*.tech-strip {
        gap: 0.75rem;
    }

    .tech-badge {
        font-size: 0.72rem;
    }
}*/

/* ── 480px — Phone Portrait ──────────────────────────────── */
/*@media (max-width: 480px) {*/

    /* Container */
    /*.container {
        padding: 0 1rem;
    }*/

    /* Navbar */
    /*.nav-logo {
        height: 40px;
    }

    .nav-container {
        gap: 0.5rem;
    }

    .nav-right {
        gap: 0.35rem;
    }

    .theme-toggle {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }*/

    /* Hero */
    /*.hero-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    .hero-stat .stat-num {
        font-size: 1.5rem;
    }*/

    /* Modules — stay 2 col */
    /*.modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem;
    }

    .mc-title {
        font-size: 0.85rem;
    }

    .mc-desc {
        display: none;*/ /* too cramped on small phones */
    /*}*/

    /* USP */
    /*.usp-card {
        padding: 1.4rem 1.1rem;
    }*/

    /* ISO badges — 2x2 grid */
    /*.footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .iso-badge {
        padding: 0.4rem 0.45rem;
        gap: 0.35rem;
    }

        .iso-badge img {
            width: 28px;
            height: 28px;
        }

    .iso-code {
        font-size: 0.58rem;
    }

    .iso-name {
        display: none;*/ /* too small — icon + code is enough */
    /*}*/

    /* Footer bottom */
    /*.footer-copy,
    .footer-cin {
        font-size: 0.7rem;
        text-align: center;
    }*/

    /* Forms */
    /*.form-wrap {
        padding: 1.4rem 1rem;
    }

    .form-control {
        font-size: 0.88rem;
        padding: 0.65rem 0.85rem;
    }*/

    /* FAQ */
    /*.faq-question {
        font-size: 0.9rem;
        padding: 1rem 1.1rem;
    }

    .faq-answer-inner {
        padding: 0 1.1rem 1rem;
        font-size: 0.86rem;
    }*/

    /* Buttons */
    /*.btn {
        padding: 0.78rem 1.5rem;
        font-size: 0.9rem;
    }*/

    /* Pricing */
    /*.pricing-price {
        font-size: 2rem;
    }*/

    /* Section */
    /*.section {
        padding: 3rem 0;
    }

    .section-title {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem);
    }*/

    /* Page hero */
    /*.page-hero {
        min-height: 180px;
        padding: 5.5rem 0 2.2rem;
    }
}*/

/* ── 375px — Small Phones (iPhone SE etc.) ───────────────── */
/*@media (max-width: 375px) {

    .nav-logo {
        height: 36px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .modules-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .module-card {
        padding: 0.9rem;
    }

    .mc-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .iso-badge img {
        width: 24px;
        height: 24px;
    }

    .footer-logo-wrap img {
        height: 36px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.85rem;
    }

    .stat-num {
        font-size: 1.3rem;
    }

    .stat-lbl {
        font-size: 0.62rem;
    }
}*/



/* ============================================================
   cloudeUNI — Final Stylesheet v4
   Logo Colors: Blue-Cyan (#1A7FFF→#00C8FF) + Orange-Gold (#FF6600→#FFB800)
   Full Light / Dark Theme Support
   ============================================================ */
/*@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700;800&family=Orbitron:wght@500;700;900&display=swap');*/

/* ============================================================
   DARK THEME (default) — Navy base
   ============================================================ */
/*:root, [data-theme="dark"] {*/
/* Backgrounds */
/*--bg-body: #04090F;
    --bg-s1: #080F1A;
    --bg-s2: #0B1523;
    --bg-card: #0D1B2A;
    --bg-input: #0A1422;
    --bg-hero: linear-gradient(145deg,#04090F 0%,#081425 55%,#060E1C 100%);
    --bg-nav: rgba(4,9,15,0.95);
    --bg-footer: #020509;*/
/* Borders */
/*--border: rgba(26,127,255,0.18);
    --border-card: rgba(26,127,255,0.12);
    --border-focus: rgba(26,127,255,0.6);*/
/* Text - MUST be clearly visible on dark bg */
/*--text-h: #F0F8FF;
    --text-p: #D8EEFF;
    --text-s: #96C0E0;
    --text-m: #5888AA;
    --text-btn: #FFFFFF;*/
/* Brand Blue (logo C) */
/*--blue-a: #0055CC;
    --blue-b: #1A7FFF;
    --blue-c: #3FA0FF;
    --blue-d: #80C4FF;
    --blue-e: #BDE0FF;
    --grad-blue: linear-gradient(135deg,#1A7FFF 0%,#00C8FF 100%);*/
/* Brand Orange (logo U) */
/*--orng-a: #CC4400;
    --orng-b: #FF6600;
    --orng-c: #FF8C2A;
    --orng-d: #FFB800;
    --orng-e: #FFD980;
    --grad-orng: linear-gradient(135deg,#FF6600 0%,#FFB800 100%);*/
/* Glows */
/*--glow-b: 0 0 32px rgba(26,127,255,0.5);
    --glow-bs: 0 0 16px rgba(0,160,255,0.35);
    --glow-o: 0 0 32px rgba(255,102,0,0.5);
    --glow-os: 0 0 16px rgba(255,140,42,0.3);*/
/* Shadows */
/*--shadow: 0 6px 28px rgba(0,0,0,0.55);
    --shadow-l: 0 16px 48px rgba(0,0,0,0.65);
}*/

/* ============================================================
   LIGHT THEME — Clean white base
   ============================================================ */
/*[data-theme="light"] {
    --bg-body: #F4F8FF;
    --bg-s1: #FFFFFF;
    --bg-s2: #EBF2FF;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-hero: linear-gradient(145deg,#0A1E42 0%,#1A3A80 55%,#0C1F4A 100%);
    --bg-nav: rgba(255,255,255,0.97);
    --bg-footer: #06101E;
    --border: rgba(26,127,255,0.18);
    --border-card: rgba(26,127,255,0.12);
    --border-focus: rgba(26,127,255,0.5);*/
/* Text — MUST be visible on white */
/*--text-h: #061428;
    --text-p: #0D2040;
    --text-s: #2A4A6A;
    --text-m: #4A6A8A;
    --text-btn: #FFFFFF;
    --blue-a: #0044BB;
    --blue-b: #0066EE;
    --blue-c: #1A7FFF;
    --blue-d: #4A9FFF;
    --blue-e: #99CCFF;
    --grad-blue: linear-gradient(135deg,#0066EE 0%,#00AADD 100%);
    --orng-a: #BB3300;
    --orng-b: #EE5500;
    --orng-c: #FF7700;
    --orng-d: #FFAA00;
    --orng-e: #FFCC66;
    --grad-orng: linear-gradient(135deg,#EE5500 0%,#FFAA00 100%);
    --glow-b: 0 0 20px rgba(26,127,255,0.25);
    --glow-bs: 0 0 10px rgba(0,102,238,0.2);
    --glow-o: 0 0 20px rgba(238,85,0,0.25);
    --glow-os: 0 0 10px rgba(255,119,0,0.2);
    --shadow: 0 4px 20px rgba(10,40,100,0.1);
    --shadow-l: 0 12px 40px rgba(10,40,100,0.14);
}*/

/* ============================================================
   TOKENS & RESET
   ============================================================ */
/*:root {
    --font-d: 'Rajdhani',sans-serif;
    --font-b: 'Nunito',sans-serif;
    --font-t: 'Orbitron',sans-serif;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 9999px;
    --tr: 280ms cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-b);
    background: var(--bg-body);
    color: var(--text-p);
    overflow-x: hidden;
    line-height: 1.7;
    transition: background 0.4s,color 0.4s;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

button, input, textarea, select {
    font-family: var(--font-b);
}

.container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 1.5rem;
}*/
/* ============================================================
   TYPEWRITER — prevent layout reflow / flicker
   ============================================================ */
/*#typewriter {
    display: inline-block;
    min-width: 14ch;          
    vertical-align: bottom;  
}*/
/* ============================================================
   HERO BG — Minimal Professional (Ring + 2 Meteors)
   ============================================================ */

/* ── Outer ring ── */
/*.hero-ring-a {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 0.75px solid rgba(63,160,255,0.13);
    pointer-events: none;
    z-index: 0;
    animation: ringCW 40s linear infinite;
    will-change: transform;
}*/
/* Middle concentric ring */
/*.hero-ring-a::before {
        content: '';
        position: absolute;
        inset: 70px;
        border-radius: 50%;
        border: 0.5px solid rgba(0,200,255,0.08);
    }*/
/* Inner concentric ring */
/*.hero-ring-a::after {
        content: '';
        position: absolute;
        inset: 148px;
        border-radius: 50%;
        border: 0.5px solid rgba(63,160,255,0.05);
    }*/

/* ── Orbiting dot + comet tail on outer ring ── */
/*.hero-ring-a-dot {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: ringCW 40s linear infinite;
    will-change: transform;
}*/
/* Glowing dot at 12 o'clock */
/*.hero-ring-a-dot::before {
        content: '';
        position: absolute;
        top: -4px;
        left: 50%;
        width: 7px;
        height: 7px;
        margin-left: -3.5px;
        border-radius: 50%;
        background: #3FA0FF;
        box-shadow: 0 0 0 2px rgba(63,160,255,0.18), 0 0 10px 4px rgba(63,160,255,0.55), 0 0 22px 7px rgba(26,127,255,0.28);
        animation: dotGlow 3s ease-in-out infinite;
    }*/
/* Comet tail */
/*.hero-ring-a-dot::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 50%;
        width: 1px;
        height: 62px;
        margin-left: -0.5px;
        background: linear-gradient( 180deg, rgba(63,160,255,0.50) 0%, rgba(63,160,255,0.12) 55%, transparent 100% );
        border-radius: 1px;
    }*/

/* ── Slow counter-rotating dashed arc (same ring size) ── */
/*.hero-ring-arc {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient( circle at 50% 50%, transparent calc(50% - 0.75px), rgba(63,160,255,0.07) calc(50% - 0.75px), rgba(63,160,255,0.07) calc(50% + 0.5px), transparent calc(50% + 0.5px) );
    animation: ringCCW 80s linear infinite;
    will-change: transform;
    mask-image: conic-gradient( from 0deg, black 0deg 55deg, transparent 55deg 115deg, black 115deg 170deg, transparent 170deg 230deg, black 230deg 285deg, transparent 285deg 360deg );
    -webkit-mask-image: conic-gradient( from 0deg, black 0deg 55deg, transparent 55deg 115deg, black 115deg 170deg, transparent 170deg 230deg, black 230deg 285deg, transparent 285deg 360deg );
}*/

/* ── Crosshair at ring center ── */
/*.hero-crosshair {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 0;
}

    .hero-crosshair::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 1px;
        margin: -0.5px 0 0 -9px;
        background: rgba(63,160,255,0.20);
        box-shadow: 0 0 5px 1px rgba(63,160,255,0.12);
    }

    .hero-crosshair::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 18px;
        margin: -9px 0 0 -0.5px;
        background: rgba(63,160,255,0.20);
        box-shadow: 0 0 5px 1px rgba(63,160,255,0.12);
    }*/

/* ── 2 Meteors only ── */
/*.hero-meteor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    border-radius: 50px;
    will-change: transform, opacity;
}

    .hero-meteor::after {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: inherit;
        filter: blur(2px);
        opacity: 0.4;
    }*/
/* Blue meteor — upper third */
/*.hero-m1 {
    top: 22%;
    left: -240px;
    width: 200px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(63,160,255,0.75) 60%, rgba(255,255,255,0.95) );
    animation: meteorFly 16s 1s linear infinite;
}*/
/* Orange meteor — lower half, fires well after blue */
/*.hero-m2 {
    top: 60%;
    left: -180px;
    width: 150px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(255,140,42,0.65) 60%, rgba(255,220,180,0.9) );
    animation: meteorFly 16s 9s linear infinite;
}*/

/* ── Shared keyframes ── */
/*@keyframes ringCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ringCCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes dotGlow {
    0%,100% {
        box-shadow: 0 0 0 2px rgba(63,160,255,0.18), 0 0 10px 4px rgba(63,160,255,0.55), 0 0 22px 7px rgba(26,127,255,0.28);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(63,160,255,0.26), 0 0 16px 7px rgba(63,160,255,0.80), 0 0 34px 11px rgba(26,127,255,0.42);
    }
}

@keyframes meteorFly {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    84% {
        opacity: 0.4;
    }

    100% {
        transform: translateX(135vw);
        opacity: 0;
    }
}*/

/* ============================================================
   NAVBAR
   ============================================================ */
/*.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 0;
    transition: all var(--tr);
    border-bottom: 1px solid transparent;
}

    .navbar.scrolled, [data-theme="light"] .navbar {
        background: var(--bg-nav);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom-color: var(--border);
        box-shadow: var(--shadow);
        padding: 0.5rem 0;
    }

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}*/

/* Brand */
/*.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}*/

/*.nav-logo {
    height: 55px;
    width: auto;
}*/
/*.nav-logo {
    height: 60px;
    width: auto;
}*/

/* Dark theme (default) — show white/transparent logo */
/*[data-theme="dark"] .logo-dark {
    display: block;
}

[data-theme="dark"] .logo-light {
    display: none;
}*/

/* Light theme — show dark logo */
/*[data-theme="light"] .logo-dark {
    display: none;
}

[data-theme="light"] .logo-light {
    display: block;
}*/

/* Fallback if no data-theme set yet */
/*.logo-dark {
    display: block;
}

.logo-light {
    display: none;
}.brand-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-family: var(--font-d);
    font-size: 1.4rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}

.brand-sub {
    font-size: 0.58rem;
    color: var(--text-m);
    letter-spacing: 0.5px;
    font-weight: 600;
}*/

/* Desktop links */
/*.nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    justify-content: center;
}

.nav-link {
    position: relative;
    font-family: var(--font-d);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-s);
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-sm);
    letter-spacing: 0.4px;
    transition: color var(--tr);
    white-space: nowrap;
}

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        right: 50%;
        height: 2px;
        background: var(--grad-blue);
        border-radius: 2px;
        transition: all var(--tr);
    }

    .nav-link:hover, .nav-link.active {
        color: var(--text-h);
    }

        .nav-link:hover::after, .nav-link.active::after {
            left: 0.85rem;
            right: 0.85rem;
        }

.nav-item {
    position: relative;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 210px;
    background: var(--bg-nav);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--tr);
    box-shadow: var(--shadow-l);
    z-index: 200;
}

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

.nav-dropdown a {
    display: block;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    color: var(--text-s);
    border-radius: var(--r-sm);
    transition: all var(--tr);
    font-weight: 500;
}

    .nav-dropdown a:hover {
        background: rgba(26,127,255,0.1);
        color: var(--blue-c);
        padding-left: 1.1rem;
    }*/

/* Right controls */
/*.nav-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-s);
    transition: all var(--tr);
}

    .theme-toggle:hover {
        border-color: var(--blue-c);
        color: var(--text-h);
        transform: rotate(18deg);
        background: rgba(26,127,255,0.1);
    }

    .theme-toggle .i-sun {
        display: none;
    }

    .theme-toggle .i-moon {
        display: block;
    }

[data-theme="light"] .theme-toggle .i-sun {
    display: block;
}

[data-theme="light"] .theme-toggle .i-moon {
    display: none;
}

.btn-nav-demo {
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.5rem 1.25rem;
    background: var(--grad-orng);
    color: #0A1220 !important;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(255,102,0,0.3);
    -webkit-text-fill-color: #0A1220 !important;
    display: inline-block;
}

    .btn-nav-demo:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-o);
    }

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text-p);
        border-radius: 2px;
        transition: var(--tr);
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

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

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }*/
/* ============================================================
   MOBILE OVERLAY — Right-slide Panel
   ============================================================ */
/*.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4, 9, 15, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;*/
/* row: backdrop on left, panel on right */
/*flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
}

    .mobile-overlay.open {
        display: flex;
        opacity: 1;
        pointer-events: all;
    }*/

/* ── Panel ────────────────────────────────────────────────── */
/*.mob-panel {
    width: 300px;
    max-width: 88vw;
    background: var(--bg-nav);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;*/ /* stack header/nav/footer vertically */
/*overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.mobile-overlay.open .mob-panel {
    transform: translateX(0);
}*/

/* ── Header ───────────────────────────────────────────────── */
/*.mob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.mob-logo-img {
    height: 42px;
    width: auto;
}

.mobile-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.22);
    color: var(--text-s);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tr);
    flex-shrink: 0;
}

    .mobile-close-btn:hover {
        background: rgba(255,70,60,0.15);
        border-color: rgba(255,70,60,0.4);
        color: #FF4A3C;
        transform: rotate(90deg);
    }*/

/* ── Divider ──────────────────────────────────────────────── */
/*.mob-divider {
    display: none;
}*/
/* header border handles this */

/* ── Nav ──────────────────────────────────────────────────── */
/*.mob-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.65rem;
    flex: 1;
}

.mob-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.78rem 0.9rem;
    border-radius: var(--r-md);
    font-family: var(--font-d);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-s);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    text-align: left;
    min-height: 44px;
}

    .mob-link:hover {
        background: rgba(26,127,255,0.1);
        color: var(--blue-d);
    }

    .mob-link.active {
        background: rgba(26,127,255,0.12);
        color: var(--blue-c);
    }

.mob-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}*/

/* ── Submenu accordion ────────────────────────────────────── */
/*.mob-has-sub {
    display: flex;
    flex-direction: column;
}

.mob-arrow {
    margin-left: auto;
    color: var(--text-m);
    flex-shrink: 0;
    transition: transform 0.28s ease;
}

.mob-has-sub.open > .mob-toggle {
    background: rgba(26,127,255,0.1);
    color: var(--blue-c);
}

    .mob-has-sub.open > .mob-toggle .mob-arrow {
        transform: rotate(180deg);
        color: var(--blue-c);
    }

.mob-sub {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.2rem 0 0.3rem 1.1rem;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(26,127,255,0.25);
}

.mob-has-sub.open .mob-sub {
    display: flex;
}

.mob-sub-link {
    display: flex;
    align-items: center;
    padding: 0.62rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-m);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
    min-height: 40px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(26,127,255,0.15);
}

    .mob-sub-link:hover, .mob-sub-link:active {
        background: rgba(26,127,255,0.1);
        color: var(--blue-c);
        padding-left: 1rem;
    }*/

/* ── Footer ───────────────────────────────────────────────── */
/*.mob-footer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem 1.2rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.mob-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.8rem 1.5rem;
    background: var(--grad-orng);
    color: #0A1220 !important;
    -webkit-text-fill-color: #0A1220 !important;
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 700;
    border-radius: var(--r-full);
    text-decoration: none;
    transition: all var(--tr);
    box-shadow: 0 3px 14px rgba(255,102,0,0.3);
    min-height: 44px;
}

    .mob-cta:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-o);
    }

.mob-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    background: rgba(26,127,255,0.05);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
}

.mob-theme-lbl {
    font-size: 0.78rem;
    color: var(--text-m);
    font-weight: 600;
}

.mob-theme-btn {
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.2);
    border-radius: var(--r-full);
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-c);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font-b);
}

    .mob-theme-btn .i-sun {
        display: none;
    }

    .mob-theme-btn .i-moon {
        display: inline;
    }

[data-theme="light"] .mob-theme-btn .i-sun {
    display: inline;
}

[data-theme="light"] .mob-theme-btn .i-moon {
    display: none;
}*/

/* ── Light theme ──────────────────────────────────────────── */
/*[data-theme="light"] .mobile-overlay {
    background: rgba(10,30,80,0.35);
}

[data-theme="light"] .mob-panel {
    background: rgba(255,255,255,0.98);
    border-left-color: rgba(26,127,255,0.12);
}

[data-theme="light"] .mob-link {
    color: var(--text-s);
}

    [data-theme="light"] .mob-link:hover {
        background: rgba(26,127,255,0.07);
        color: var(--blue-b);
    }

[data-theme="light"] .mob-sub-link {
    color: var(--text-m);
}

    [data-theme="light"] .mob-sub-link:hover {
        color: var(--blue-b);
    }*/

/* ── Sizes ────────────────────────────────────────────────── */
/*@media (min-width: 480px) {
    .mob-panel {
        width: 320px;
    }
}

@media (max-width: 360px) {
    .mob-panel {
        width: 100vw;
        max-width: 100vw;
        border-left: none;
    }
}*/

/* ============================================================
   BUTTONS
   ============================================================ */
/*.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.85rem 2rem;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    font-size: 1rem;
    white-space: nowrap;
    line-height: 1;
}

.btn-primary {
    background: var(--grad-blue);
    color: #fff;
    box-shadow: var(--glow-bs);
}

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-b);
    }

.btn-orange {
    background: var(--grad-orng);
    color: #0A1220;
}

    .btn-orange:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-o);
    }

.btn-ghost {
    background: transparent;
    color: var(--text-s);
    border: 1.5px solid var(--border);
}

    .btn-ghost:hover {
        background: rgba(26,127,255,0.09);
        border-color: var(--blue-c);
        color: var(--text-h);
        transform: translateY(-2px);
    }*/
/* On light theme: ghost btn text must be dark */
/*[data-theme="light"] .btn-ghost {
    color: var(--text-s);
    border-color: rgba(26,127,255,0.3);
}

    [data-theme="light"] .btn-ghost:hover {
        color: var(--text-h);
    }*/

/* ============================================================
   SECTION SYSTEM
   ============================================================ */
/*.section {
    padding: 6rem 0;
}

.bg-s1 {
    background: var(--bg-s1);
}

.bg-s2 {
    background: var(--bg-s2);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.25);
    border-radius: var(--r-full);
    padding: 0.28rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--blue-c);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

    .section-chip.orng {
        background: rgba(255,102,0,0.1);
        border-color: rgba(255,140,42,0.3);
        color: var(--orng-c);
    }

[data-theme="light"] .section-chip {
    color: var(--blue-b);
}

    [data-theme="light"] .section-chip.orng {
        color: var(--orng-b);
    }

.section-title {
    font-family: var(--font-d);
    font-size: clamp(1.9rem,3.5vw,2.7rem);
    font-weight: 700;
    color: var(--text-h);
    line-height: 1.15;
    margin-bottom: 1rem;
}*/
/* Gradient text */
/*.t-b {
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.t-o {
    background: var(--grad-orng);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-desc {
    color: var(--text-s);
    font-size: 1rem;
    line-height: 1.8;
}*/
/* Ensure section desc visible on both themes */
/*[data-theme="light"] .section-desc {
    color: var(--text-s);
}*/

/* ============================================================
   HERO SECTION
   ============================================================ */
/*.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--bg-hero);padding-top:80px;}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:0.5;}
.hero-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;animation:orbFloat 8s ease-in-out infinite;}
.hero-orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(26,127,255,0.22) 0%,transparent 70%);top:-120px;left:-100px;}
.hero-orb-2{width:420px;height:420px;background:radial-gradient(circle,rgba(255,102,0,0.2) 0%,transparent 70%);bottom:-100px;right:8%;animation-delay:-4s;}
.hero-orb-3{width:280px;height:280px;background:radial-gradient(circle,rgba(0,200,255,0.12) 0%,transparent 70%);top:35%;right:28%;animation-delay:-2s;}
@keyframes orbFloat{0%,100%{transform:translate(0,0);}33%{transform:translate(18px,-18px);}66%{transform:translate(-14px,14px);}}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

.hero-orb-1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle,rgba(26,127,255,0.18) 0%,transparent 70%);
    filter: blur(70px);
    top: -120px;
    left: -100px;
    animation: orbFloat1 12s ease-in-out infinite;
}

.hero-orb-2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle,rgba(255,102,0,0.15) 0%,transparent 70%);
    filter: blur(70px);
    bottom: -100px;
    right: 8%;
    animation: orbFloat2 15s ease-in-out infinite;
}

.hero-orb-3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle,rgba(0,200,255,0.1) 0%,transparent 70%);
    filter: blur(60px);
    top: 35%;
    right: 28%;
    animation: orbFloat1 10s 3s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(16px,-16px,0);
    }
}

@keyframes orbFloat2 {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(-14px,12px,0);
    }
}

.hero-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    padding: 4rem 1.5rem;
    max-width: 1220px;
    margin: 0 auto;
    width: 100%;
}*/

/* Hero text — always on dark hero bg, always white */
/*.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(26,127,255,0.15);
    border: 1px solid rgba(26,127,255,0.35);
    border-radius: var(--r-full);
    padding: 0.38rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #80C4FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.6s ease both;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    background: #3FA0FF;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

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

    50% {
        opacity: 0.4;
        transform: scale(1.4);
    }
}

.hero-title {
    font-family: var(--font-d);
    font-size: clamp(2.8rem,5vw,4.2rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.08;
    margin-bottom: 1.2rem;
    animation: fadeUp 0.7s 0.1s ease both;
}

    .hero-title .line-b {
        display: block;
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-title .line-o {
        display: block;
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.hero-desc {
    font-size: 1.05rem;
    color: rgba(216,238,255,0.88);
    max-width: 520px;
    margin-bottom: 2rem;
    line-height: 1.8;
    animation: fadeUp 0.7s 0.2s ease both;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    animation: fadeUp 0.7s 0.3s ease both;
}

.hero-stats {
    display: flex;
    animation: fadeUp 0.7s 0.4s ease both;
}

.hero-stat {
    text-align: center;
    padding: 0 1.4rem;
    border-right: 1px solid rgba(26,127,255,0.2);
}

    .hero-stat:first-child {
        padding-left: 0;
    }

    .hero-stat:last-child {
        border-right: none;
    }

.stat-num {
    font-family: var(--font-t);
    font-size: 1.9rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-lbl {
    font-size: 0.68rem;
    color: rgba(150,192,224,0.8);
    margin-top: 0.2rem;
    letter-spacing: 0.5px;
    font-weight: 600;
}*/

/* Dashboard Mockup */
/*.hero-right {
    position: relative;
    animation: fadeRight 0.8s 0.3s ease both;
}

.hero-float-card {
    position: absolute;
    background: rgba(8,20,35,0.97);
    border: 1px solid rgba(26,127,255,0.28);
    border-radius: var(--r-md);
    padding: 0.6rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    font-size: 0.78rem;
    font-weight: 600;
    color: #96C0E0;
    white-space: nowrap;
    z-index: 2;
}

    .hero-float-card.card-tl {
        top: -18px;
        left: -38px;
        animation: fc1 4s ease-in-out infinite;
    }

    .hero-float-card.card-br {
        bottom: -18px;
        right: -28px;
        border-color: rgba(255,102,0,0.28);
        animation: fc2 5s ease-in-out infinite;
    }

@keyframes fc1 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes fc2 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

.dashboard-frame {
    background: rgba(8,16,28,0.94);
    border: 1px solid rgba(26,127,255,0.2);
    border-radius: var(--r-xl);
    padding: 1.2rem;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6),0 0 60px rgba(26,127,255,0.07);
}

.db-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(26,127,255,0.1);
}

.db-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.db-dot-r {
    background: #FF5F57;
}

.db-dot-y {
    background: #FEBC2E;
}

.db-dot-g {
    background: #28C840;
}

.db-title {
    font-family: var(--font-t);
    font-size: 0.6rem;
    color: #5888AA;
    margin-left: auto;
    letter-spacing: 1px;
}

.db-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.db-metric {
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
    padding: 0.8rem;
}

.db-metric-icon {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.db-metric-value {
    font-family: var(--font-t);
    font-size: 1.3rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

    .db-metric-value.b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .db-metric-value.o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.db-metric-label {
    font-size: 0.65rem;
    color: #5888AA;
    margin-top: 0.12rem;
    font-weight: 600;
}

.db-bar-box, .db-notif-box {
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
    padding: 0.8rem;
    margin-bottom: 0.7rem;
}

.db-notif-box {
    margin-bottom: 0;
}

.db-bar-title {
    font-size: 0.65rem;
    color: #5888AA;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.db-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

    .db-bar-row:last-child {
        margin-bottom: 0;
    }

.db-bar-label {
    font-size: 0.65rem;
    color: #96C0E0;
    width: 72px;
    flex-shrink: 0;
}

.db-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
}

.db-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.fill-b {
    background: var(--grad-blue);
}

.fill-o {
    background: var(--grad-orng);
}

.fill-t {
    background: linear-gradient(90deg,#00B4D8,#00E5B8);
}

.db-bar-pct {
    font-family: var(--font-t);
    font-size: 0.6rem;
    color: #5888AA;
    width: 26px;
    text-align: right;
}

.db-notif-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

    .db-notif-row:last-child {
        border: none;
        padding-bottom: 0;
    }

.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.notif-text {
    font-size: 0.68rem;
    color: #96C0E0;
    flex: 1;
}

.notif-time {
    font-size: 0.6rem;
    color: #5888AA;
}*/

/* ============================================================
   MARQUEE
   ============================================================ */
/*.marquee-section {
    background: linear-gradient(90deg,rgba(26,127,255,0.07),rgba(255,102,0,0.07));
    border-top: 1px solid rgba(26,127,255,0.1);
    border-bottom: 1px solid rgba(26,127,255,0.1);
    padding: 0.9rem 0;
    overflow: hidden;
}

[data-theme="light"] .marquee-section {
    background: linear-gradient(90deg,rgba(26,127,255,0.05),rgba(255,102,0,0.05));
}

.marquee-track {
    display: flex;
    animation: marquee 32s linear infinite;
    width: max-content;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1.75rem;
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-m);
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 1px solid rgba(26,127,255,0.1);
}

    .marquee-item .mi-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue-c);
        flex-shrink: 0;
    }

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}*/

/* ============================================================
   USP / FEATURE CARDS
   ============================================================ */
/*.usp-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.usp-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 2rem 1.5rem;
    transition: all var(--tr);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}*/
/* Top accent line on card */
/*.usp-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--grad-blue);
        transform: scaleX(0);
        transition: transform var(--tr);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

    .usp-card:hover::before {
        transform: scaleX(1);
    }

    .usp-card:hover {
        border-color: rgba(26,127,255,0.35);
        transform: translateY(-6px);
        box-shadow: var(--shadow-l),var(--glow-bs);
    }

.usp-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.15rem;
    flex-shrink: 0;
}

    .usp-icon-wrap.b {
        background: rgba(26,127,255,0.12);
    }

    .usp-icon-wrap.o {
        background: rgba(255,102,0,0.12);
    }

    .usp-icon-wrap.t {
        background: rgba(0,180,200,0.12);
    }

[data-theme="light"] .usp-icon-wrap.b {
    background: rgba(26,127,255,0.08);
}

[data-theme="light"] .usp-icon-wrap.o {
    background: rgba(238,85,0,0.08);
}

[data-theme="light"] .usp-icon-wrap.t {
    background: rgba(0,150,170,0.08);
}

.usp-title {
    font-family: var(--font-d);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.55rem;
}

.usp-desc {
    font-size: 0.88rem;
    color: var(--text-s);
    line-height: 1.72;
}*/
/* Ensure card text visible */
/*[data-theme="light"] .usp-title {
    color: var(--text-h);
}

[data-theme="light"] .usp-desc {
    color: var(--text-s);
}*/

/* ============================================================
   MODULE CARDS
   ============================================================ */
/*.modules-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.module-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: all var(--tr);
    text-decoration: none;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

    .module-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--grad-blue);
        transform: scaleX(0);
        transition: transform var(--tr);
    }

    .module-card:hover {
        border-color: rgba(26,127,255,0.35);
        transform: translateY(-4px);
        box-shadow: var(--shadow-l),var(--glow-bs);
    }

        .module-card:hover::after {
            transform: scaleX(1);
        }

.mc-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: rgba(26,127,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

    .mc-icon.o {
        background: rgba(255,102,0,0.1);
    }

    .mc-icon.t {
        background: rgba(0,180,200,0.1);
    }

.mc-title {
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-h);
}

.mc-desc {
    font-size: 0.77rem;
    color: var(--text-m);
    line-height: 1.6;
}

.mc-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--blue-c);
    margin-top: auto;
    transition: gap var(--tr);
}

.module-card:hover .mc-link {
    gap: 0.55rem;
}

[data-theme="light"] .mc-title {
    color: var(--text-h);
}

[data-theme="light"] .mc-desc {
    color: var(--text-m);
}

[data-theme="light"] .mc-link {
    color: var(--blue-b);
}

.modules-cta {
    text-align: center;
    margin-top: 2.5rem;
}*/

/* ============================================================
   BENEFITS / FEATURES LAYOUT
   ============================================================ */
/*.features-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    transition: all var(--tr);
    box-shadow: var(--shadow);
}

    .benefit-item:hover {
        border-color: rgba(26,127,255,0.3);
        transform: translateX(5px);
    }

.bi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--grad-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

    .bi-icon.o {
        background: var(--grad-orng);
    }

.bi-title {
    font-family: var(--font-d);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.15rem;
}

.bi-desc {
    font-size: 0.8rem;
    color: var(--text-s);
}

[data-theme="light"] .bi-title {
    color: var(--text-h);
}

[data-theme="light"] .bi-desc {
    color: var(--text-s);
}*/

/* Metric cards */
/*.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--tr);
    box-shadow: var(--shadow);
}

    .metric-card:hover {
        border-color: rgba(26,127,255,0.3);
        transform: scale(1.025);
        box-shadow: var(--shadow-l);
    }

.metric-num {
    font-family: var(--font-t);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.3rem;
}

    .metric-num.b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .metric-num.o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.metric-lbl {
    font-size: 0.78rem;
    color: var(--text-m);
    font-weight: 600;
}

[data-theme="light"] .metric-lbl {
    color: var(--text-m);
}

.tech-strip {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    padding: 0.9rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.tech-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-m);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .tech-badge::before {
        content: '✓';
        color: var(--blue-c);
        font-size: 0.88rem;
    }

[data-theme="light"] .tech-badge {
    color: var(--text-m);
}

    [data-theme="light"] .tech-badge::before {
        color: var(--blue-b);
    }*/

/* ============================================================
   HOW IT WORKS
   ============================================================ */
/*.hiw-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    position: relative;
}

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 40px;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: linear-gradient(90deg,transparent,var(--blue-c),var(--orng-c),transparent);
    }

.hiw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.9rem;
}

.step-num {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 2px solid rgba(26,127,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-t);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--blue-c);
    background: var(--bg-s2);
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 1;
    transition: all var(--tr);
}

.hiw-step:hover .step-num {
    background: rgba(26,127,255,0.12);
    border-color: var(--blue-c);
    box-shadow: var(--glow-bs);
    color: var(--text-h);
}

.hiw-step:nth-child(even) .step-num {
    border-color: rgba(255,102,0,0.3);
    color: var(--orng-c);
}

.hiw-step:nth-child(even):hover .step-num {
    background: rgba(255,102,0,0.12);
    border-color: var(--orng-c);
    box-shadow: var(--glow-os);
}

.step-title {
    font-family: var(--font-d);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.45rem;
}

.step-desc {
    font-size: 0.84rem;
    color: var(--text-m);
    line-height: 1.6;
}

[data-theme="light"] .step-title {
    color: var(--text-h);
}

[data-theme="light"] .step-desc {
    color: var(--text-m);
}*/

/* ============================================================
   TESTIMONIALS
   ============================================================ */
/*.testi-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.testi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 2rem;
    transition: all var(--tr);
    position: relative;
    box-shadow: var(--shadow);
}

    .testi-card::before {
        content: '"';
        position: absolute;
        top: 0;
        right: 1.2rem;
        font-size: 5rem;
        color: rgba(26,127,255,0.07);
        font-family: Georgia,serif;
        line-height: 1.1;
    }

    .testi-card:hover {
        border-color: rgba(26,127,255,0.3);
        transform: translateY(-4px);
        box-shadow: var(--shadow-l);
    }

.testi-stars {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
}

.star {
    color: var(--orng-d);
    font-size: 0.95rem;
}

.testi-text {
    color: var(--text-s);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
    font-style: italic;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--grad-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-d);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

    .author-avatar.o {
        background: var(--grad-orng);
        color: #0A1220;
    }

.author-name {
    font-family: var(--font-d);
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text-h);
}

.author-role {
    font-size: 0.75rem;
    color: var(--text-m);
}

[data-theme="light"] .testi-text {
    color: var(--text-s);
}

[data-theme="light"] .author-name {
    color: var(--text-h);
}*/

/* ============================================================
   CTA SECTION — always dark background
   ============================================================ */
/*.cta-section {
    background: linear-gradient(145deg,#04090F 0%,#081422 55%,#05101E 100%);
    position: relative;
    overflow: hidden;
}

    .cta-section::before {
        content: '';
        position: absolute;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 700px;
        height: 350px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(26,127,255,0.14) 0%,transparent 70%);
    }

    .cta-section::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        height: 250px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(255,102,0,0.1) 0%,transparent 70%);
    }

.cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}*/
/* CTA text always white — it's on dark bg */
/*.cta-inner .section-title, .cta-inner .section-title span {
        color: #F0F8FF !important;
        -webkit-text-fill-color: #F0F8FF !important;
    }

        .cta-inner .section-title .t-b {
            background: var(--grad-blue);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-clip: text;
        }

        .cta-inner .section-title .t-o {
            background: var(--grad-orng);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-clip: text;
        }

    .cta-inner .section-desc {
        color: rgba(216,238,255,0.82) !important;
    }

.cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}*/

/* PAGE HERO — always dark */
/*.page-hero {
    min-height: 290px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(145deg,#06101E 0%,#0D2040 100%);
    padding: 7rem 0 3.8rem;
    position: relative;
    overflow: hidden;
}

.page-hero-orb {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(26,127,255,0.1) 0%,transparent 70%);
    pointer-events: none;
}

.page-hero-title {
    font-family: var(--font-d);
    font-size: clamp(2rem,4vw,3.1rem);
    font-weight: 700;
    color: #F0F8FF;
    line-height: 1.12;
}

    .page-hero-title .t-b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .page-hero-title .t-o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-hero-desc {
    color: rgba(216,238,255,0.82);
    max-width: 540px;
    margin-top: 0.9rem;
}*/
/* Page hero badge */
/*.page-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(26,127,255,0.15);
    border: 1px solid rgba(26,127,255,0.35);
    border-radius: var(--r-full);
    padding: 0.32rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #80C4FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}*/

/* ============================================================
   FORMS — visible in BOTH themes
   ============================================================ */
/*.form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.4rem;
    box-shadow: var(--shadow);
}

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

.form-label {
    display: block;
    font-family: var(--font-d);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-s);
    letter-spacing: 0.5px;
    margin-bottom: 0.42rem;
}

.form-control {
    width: 100%;
    padding: 0.72rem 1rem;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-h);
    font-family: var(--font-b);
    font-size: 0.94rem;
    transition: all var(--tr);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

    .form-control:focus {
        border-color: var(--blue-c);
        box-shadow: 0 0 0 3px rgba(26,127,255,0.12);
    }

    .form-control::placeholder {
        color: var(--text-m);
    }*/
/* Light theme forms */
/*[data-theme="light"] .form-wrap {
    background: #FFFFFF;
    border-color: rgba(26,127,255,0.15);
}

[data-theme="light"] .form-control {
    background: #F8FBFF;
    color: #0D2040;
    border-color: rgba(26,127,255,0.2);
}

    [data-theme="light"] .form-control:focus {
        border-color: var(--blue-b);
        box-shadow: 0 0 0 3px rgba(26,127,255,0.1);
    }

    [data-theme="light"] .form-control::placeholder {
        color: #7A9AB8;
    }

[data-theme="light"] .form-label {
    color: var(--text-s);
}

select.form-control {
    cursor: pointer;
}

    select.form-control option {
        background: var(--bg-s2);
        color: var(--text-h);
    }

[data-theme="light"] select.form-control option {
    background: #FFFFFF;
    color: #0D2040;
}

textarea.form-control {
    min-height: 108px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}*/
/* Status messages */
/*.form-msg {
    display: block;
    padding: 0.8rem 1.1rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.15rem;
    min-height: 0;
}

    .form-msg:empty {
        display: none;
        padding: 0;
        margin: 0;
        border: none;
    }

.msg-ok {
    background: rgba(0,200,100,0.1);
    border: 1px solid rgba(0,200,100,0.3);
    color: #00CC78;
}

.msg-err {
    background: rgba(255,70,60,0.1);
    border: 1px solid rgba(255,70,60,0.3);
    color: #FF4A3C;
}

[data-theme="light"] .msg-ok {
    background: rgba(0,180,90,0.08);
    color: #00882A;
}

[data-theme="light"] .msg-err {
    background: rgba(220,30,20,0.08);
    color: #CC1A10;
}*/

/* ============================================================
   PRICING
   ============================================================ */
/*.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.4rem 1.9rem;
    display: flex;
    flex-direction: column;
    transition: all var(--tr);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

    .pricing-card.popular {
        border-color: var(--blue-c);
        box-shadow: 0 0 36px rgba(26,127,255,0.14);
    }

    .pricing-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-l);
    }

.popular-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: var(--grad-blue);
    color: #fff;
    font-family: var(--font-t);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.22rem 0.7rem;
    border-radius: var(--r-full);
    letter-spacing: 1px;
}

.pricing-plan {
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-m);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.pricing-price {
    font-family: var(--font-t);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-h);
    line-height: 1;
    margin-bottom: 0.2rem;
}

    .pricing-price .curr {
        font-size: 1.35rem;
        vertical-align: top;
        margin-top: 0.28rem;
        display: inline-block;
    }

.pricing-period {
    font-size: 0.76rem;
    color: var(--text-m);
    margin-bottom: 1.4rem;
}

.pricing-desc {
    font-size: 0.87rem;
    color: var(--text-s);
    margin-bottom: 1.6rem;
    line-height: 1.6;
}

.pricing-features {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    margin-bottom: 1.8rem;
    flex: 1;
}

    .pricing-features li {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.85rem;
        color: var(--text-s);
    }

        .pricing-features li::before {
            content: '✓';
            color: var(--blue-c);
            font-weight: 700;
            flex-shrink: 0;
        }

        .pricing-features li.no {
            color: var(--text-m);
            opacity: 0.55;
        }

            .pricing-features li.no::before {
                content: '✗';
            }

.pricing-cta {
    margin-top: auto;
}

[data-theme="light"] .pricing-plan {
    color: var(--text-m);
}

[data-theme="light"] .pricing-price {
    color: var(--text-h);
}

[data-theme="light"] .pricing-desc {
    color: var(--text-s);
}

[data-theme="light"] .pricing-features li {
    color: var(--text-s);
}*/

/* ============================================================
   FAQ
   ============================================================ */
/*.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--tr);
    box-shadow: var(--shadow);
}

    .faq-item.open {
        border-color: rgba(26,127,255,0.38);
    }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-d);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-p);
    text-align: left;
    transition: color var(--tr);
}

    .faq-question:hover {
        color: var(--blue-c);
    }

[data-theme="light"] .faq-question {
    color: var(--text-h);
}

    [data-theme="light"] .faq-question:hover {
        color: var(--blue-b);
    }

.faq-arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(26,127,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--blue-c);
    transition: transform var(--tr),background var(--tr);
}

.faq-item.open .faq-arrow {
    transform: rotate(180deg);
    background: var(--blue-b);
    color: #fff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s ease;
}

.faq-answer-inner {
    padding: 0 1.4rem 1.2rem;
    color: var(--text-s);
    font-size: 0.92rem;
    line-height: 1.8;
}

.faq-item.open .faq-answer {
    max-height: 500px;
}

[data-theme="light"] .faq-answer-inner {
    color: var(--text-s);
}*/

/* ============================================================
   FOOTER — always dark
   ============================================================ */
/*.footer-iso-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1.4rem;
    max-width: 345px;
}

.iso-badge {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(26, 127, 255, 0.14);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: all var(--tr);
    overflow: hidden;
}

    .iso-badge:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(26, 127, 255, 0.38);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(26, 127, 255, 0.12);
    }

    .iso-badge img {*/
/* Show only the shield icon — crop out the dark text portion */
/*width: 38px;
        height: 38px;
        object-fit: cover;
        object-position: left center;
        flex-shrink: 0;
    }

.iso-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.iso-code {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-d);
    color: #80C4FF;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.iso-name {
    font-size: 0.6rem;
    color: #a3c4e3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}*/

/* Responsive */
/*@media (max-width: 991px) {
    .footer-iso-row {
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .footer-iso-row {
        grid-template-columns: 1fr 1fr;
    }
}
.footer {
    background: var(--bg-footer);
    border-top: 1px solid rgba(26,127,255,0.1);
}

.footer-top {
    padding: 4rem 0 3rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

    .footer-logo-wrap img {
        height: 55px;
    }

.footer-brand-nm {
    font-family: var(--font-d);
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand-sb {
    font-size: 0.6rem;
    color: #4A6A88;
    letter-spacing: 0.5px;
    display: block;
    margin-top: 0.1rem;
}

.footer-desc {
    font-size: 0.85rem;
    color: #a3c4e3;
    line-height: 1.72;
    max-width: 295px;
    margin-bottom: 1.2rem;
}

.footer-social {
    display: flex;
    gap: 0.55rem;
}

.social-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: rgba(26,127,255,0.08);
    border: 1px solid rgba(26,127,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-family: var(--font-d);
    font-weight: 700;
    color: #a3c4e3;
    cursor: pointer;
    transition: all var(--tr);
    text-decoration: none;
    letter-spacing: 0;
}

    .social-btn:hover {
        background: rgba(26,127,255,0.2);
        border-color: var(--blue-c);
        color: #fff;
        transform: translateY(-2px);
    }

.footer-col-title {
    font-family: var(--font-d);
    font-size: 0.78rem;
    font-weight: 700;
    color: #F0F8FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.15rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

    .footer-links a {
        font-size: 0.85rem;
        color: #a3c4e3;
        transition: all var(--tr);
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

        .footer-links a:hover {
            color: #80C4FF;
            padding-left: 0.3rem;
        }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.fc-item {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.fc-icon {
    font-size: 0.88rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.fc-text {
    font-size: 0.83rem;
    color: #a3c4e3;
    line-height: 1.5;
}

    .fc-text a {
        color: #a3c4e3;
        transition: color var(--tr);
    }

        .fc-text a:hover {
            color: #80C4FF;
        }

.footer-bottom {
    padding: 1.15rem 0;
    border-top: 1px solid rgba(26,127,255,0.08);
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-copy {
    font-size: 0.78rem;
    color: #a3c4e3;
}

.footer-cin {
    font-size: 0.74rem;
    color: rgb(255 255 255 / 58%);
}

    .footer-cin a {
        color: #3FA0FF;
        transition: color var(--tr);
    }

        .footer-cin a:hover {
            color: #80C4FF;
        }*/

/* ============================================================
   SCROLL TOP
   ============================================================ */
/*.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad-blue);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
    box-shadow: var(--glow-bs);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all var(--tr);
    z-index: 100;
}

    .scroll-top.visible {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    .scroll-top:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-b);
    }*/

/* ============================================================
   ANIMATIONS
   ============================================================ */
/*@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

    .reveal.visible, .reveal-left.visible, .reveal-right.visible {
        opacity: 1;
        transform: none;
    }

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}

.delay-6 {
    transition-delay: 0.6s;
}*/

/* ============================================================
   RESPONSIVE
   ============================================================ */
/*@media(max-width:1100px) {
    .modules-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:900px) {
    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-right {
        display: none;
    }

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

    .features-layout {
        grid-template-columns: 1fr;
    }

    .features-right {
        display: none;
    }

    .hiw-steps {
        grid-template-columns: 1fr 1fr;
    }

        .hiw-steps::before {
            display: none;
        }

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

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }
}

@media(max-width:640px) {
    .usp-grid {
        grid-template-columns: 1fr;
    }

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

    .hiw-steps {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

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

    .hero-stat {
        border: none;
        padding-left: 0;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 4rem 0;
    }
}*/
/* ============================================================
   cloudeUNI — Responsive Additions
   Append to END of styles.css
   Covers: Navbar · Footer · ISO · Cards · Forms · All Grids
   ============================================================ */

/* ── 1280px — Large Tablet / Small Desktop ───────────────── */
/*@media (max-width: 1280px) {
    .footer-top {
        grid-template-columns: 1.8fr 1fr 1fr 1fr;
        gap: 2rem;
    }

    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-title {
        font-size: clamp(2.4rem, 4vw, 3.6rem);
    }
}*/

/* ── 1100px — Tablet Landscape ───────────────────────────── */
/*@media (max-width: 1100px) {
    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .usp-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .pricing-card {
        padding: 1.8rem 1.4rem;
    }

    .hiw-steps {
        gap: 0;
    }
}*/

/* ── 900px — Tablet Portrait ─────────────────────────────── */
/*@media (max-width: 900px) {*/

/* Navbar */
/*.nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-logo {
        height: 50px;
    }

    .btn-nav-demo {
        font-size: 0.8rem;
        padding: 0.45rem 1rem;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .nav-right {
        gap: 0.45rem;
    }*/

/* Hero */
/*.hero-container {
        grid-template-columns: 1fr;
        padding: 3rem 1.5rem;
    }

    .hero-right {
        display: none;
    }

    .hero-title {
        font-size: clamp(2.2rem, 5vw, 3rem);
    }*/

/* Cards */
/*.usp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .features-right {
        display: none;
    }

    .hiw-steps {
        grid-template-columns: 1fr 1fr;
    }

        .hiw-steps::before {
            display: none;
        }

    .testi-grid {
        grid-template-columns: 1fr;
    }*/

/* Pricing */
/*.pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }*/

/* Footer */
/*.footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-iso-row {
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-logo-wrap img {
        height: 46px;
    }*/

/* Metrics */
/*.metrics-grid {
        grid-template-columns: 1fr 1fr;
    }
}*/

/* ── 768px — Large Phone / Small Tablet ──────────────────── */
/*@media (max-width: 768px) {*/

/* Sections */
/*.section {
        padding: 4.5rem 0;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }*/

/* Page hero */
/*.page-hero {
        min-height: 220px;
        padding: 6rem 0 2.8rem;
    }*/

/* Hero */
/*.hero-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.8rem;
    }

    .hero-cta {
        gap: 0.75rem;
    }

        .hero-cta .btn {
            padding: 0.75rem 1.6rem;
            font-size: 0.92rem;
        }

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

    .hero-stat {
        border-right: none;
        padding: 0 0.8rem;
    }

        .hero-stat:first-child {
            padding-left: 0;
        }*/

/* Module cards */
/*.modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    .module-card {
        padding: 1.1rem;
    }*/

/* USP */
/*.usp-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }*/

/* How It Works */
/*.hiw-steps {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }*/

/* Testimonials */
/*.testi-grid {
        grid-template-columns: 1fr;
    }*/

/* Footer */
/*.footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
        padding: 3rem 0 2.5rem;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.35rem;
    }*/

/* Forms */
/*.form-row {
        grid-template-columns: 1fr;
    }

    .form-wrap {
        padding: 1.8rem 1.4rem;
    }*/

/* CTA buttons */
/*.cta-btns {
        flex-direction: column;
        align-items: center;
    }*/

/* ISO badges — 2 col on small tablet */
/*.iso-badge img {
        width: 32px;
        height: 32px;
    }

    .iso-code {
        font-size: 0.62rem;
    }

    .iso-name {
        font-size: 0.56rem;
    }
}*/

/* ── 640px — Phone Landscape ─────────────────────────────── */
/*@media (max-width: 640px) {*/

/* Navbar */
/*.nav-logo {
        height: 44px;
    }

    .btn-nav-demo {
        display: none;*/ /* hide on small phones — available in mobile menu */
/*}*/

/* Hero */
/*.hero-title {
        font-size: clamp(2rem, 7vw, 2.6rem);
    }

    .hero-desc {
        font-size: 0.95rem;
    }

    .hero-cta {
        flex-direction: column;
    }

        .hero-cta .btn {
            width: 100%;
            justify-content: center;
        }*/

/* Grids */
/*.usp-grid {
        grid-template-columns: 1fr;
    }

    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hiw-steps {
        grid-template-columns: 1fr;
    }*/

/* Footer */
/*.footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-desc {
        max-width: 100%;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-logo-wrap img {
        height: 42px;
    }*/

/* Pricing */
/*.pricing-card {
        padding: 1.8rem 1.4rem;
    }*/

/* Metrics */
/*.metrics-grid {
        grid-template-columns: 1fr 1fr;
    }*/

/* Section */
/*.section {
        padding: 3.5rem 0;
    }*/

/* Page hero */
/*.page-hero-title {
        font-size: clamp(1.7rem, 5.5vw, 2.4rem);
    }*/

/* Tech strip */
/*.tech-strip {
        gap: 0.75rem;
    }

    .tech-badge {
        font-size: 0.72rem;
    }
}*/

/* ── 480px — Phone Portrait ──────────────────────────────── */
/*@media (max-width: 480px) {*/

/* Container */
/*.container {
        padding: 0 1rem;
    }*/

/* Navbar */
/*.nav-logo {
        height: 40px;
    }

    .nav-container {
        gap: 0.5rem;
    }

    .nav-right {
        gap: 0.35rem;
    }

    .theme-toggle {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }*/

/* Hero */
/*.hero-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    .hero-stat .stat-num {
        font-size: 1.5rem;
    }*/

/* Modules — stay 2 col */
/*.modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem;
    }

    .mc-title {
        font-size: 0.85rem;
    }

    .mc-desc {
        display: none;*/ /* too cramped on small phones */
/*}*/

/* USP */
/*.usp-card {
        padding: 1.4rem 1.1rem;
    }*/

/* ISO badges — 2x2 grid */
/*.footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .iso-badge {
        padding: 0.4rem 0.45rem;
        gap: 0.35rem;
    }

        .iso-badge img {
            width: 28px;
            height: 28px;
        }

    .iso-code {
        font-size: 0.58rem;
    }

    .iso-name {
        display: none;*/ /* too small — icon + code is enough */
/*}*/

/* Footer bottom */
/*.footer-copy,
    .footer-cin {
        font-size: 0.7rem;
        text-align: center;
    }*/

/* Forms */
/*.form-wrap {
        padding: 1.4rem 1rem;
    }

    .form-control {
        font-size: 0.88rem;
        padding: 0.65rem 0.85rem;
    }*/

/* FAQ */
/*.faq-question {
        font-size: 0.9rem;
        padding: 1rem 1.1rem;
    }

    .faq-answer-inner {
        padding: 0 1.1rem 1rem;
        font-size: 0.86rem;
    }*/

/* Buttons */
/*.btn {
        padding: 0.78rem 1.5rem;
        font-size: 0.9rem;
    }*/

/* Pricing */
/*.pricing-price {
        font-size: 2rem;
    }*/

/* Section */
/*.section {
        padding: 3rem 0;
    }

    .section-title {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem);
    }*/

/* Page hero */
/*.page-hero {
        min-height: 180px;
        padding: 5.5rem 0 2.2rem;
    }
}*/

/* ── 375px — Small Phones (iPhone SE etc.) ───────────────── */
/*@media (max-width: 375px) {

    .nav-logo {
        height: 36px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .modules-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .module-card {
        padding: 0.9rem;
    }

    .mc-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .iso-badge img {
        width: 24px;
        height: 24px;
    }

    .footer-logo-wrap img {
        height: 36px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.85rem;
    }

    .stat-num {
        font-size: 1.3rem;
    }

    .stat-lbl {
        font-size: 0.62rem;
    }
}*/





/* ============================================================
   cloudeUNI — Final Stylesheet v4
   Logo Colors: Blue-Cyan (#1A7FFF→#00C8FF) + Orange-Gold (#FF6600→#FFB800)
   Full Light / Dark Theme Support
   ============================================================ */
/*@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700;800&family=Orbitron:wght@500;700;900&display=swap');*/

/* ============================================================
   DARK THEME (default) — Navy base
   ============================================================ */
/*:root, [data-theme="dark"] {*/
/* Backgrounds */
/*--bg-body: #04090F;
    --bg-s1: #080F1A;
    --bg-s2: #0B1523;
    --bg-card: #0D1B2A;
    --bg-input: #0A1422;
    --bg-hero: linear-gradient(145deg,#04090F 0%,#081425 55%,#060E1C 100%);
    --bg-nav: rgba(4,9,15,0.95);
    --bg-footer: #020509;*/
/* Borders */
/*--border: rgba(26,127,255,0.18);
    --border-card: rgba(26,127,255,0.12);
    --border-focus: rgba(26,127,255,0.6);*/
/* Text - MUST be clearly visible on dark bg */
/*--text-h: #F0F8FF;
    --text-p: #D8EEFF;
    --text-s: #96C0E0;
    --text-m: #5888AA;
    --text-btn: #FFFFFF;*/
/* Brand Blue (logo C) */
/*--blue-a: #0055CC;
    --blue-b: #1A7FFF;
    --blue-c: #3FA0FF;
    --blue-d: #80C4FF;
    --blue-e: #BDE0FF;
    --grad-blue: linear-gradient(135deg,#1A7FFF 0%,#00C8FF 100%);*/
/* Brand Orange (logo U) */
/*--orng-a: #CC4400;
    --orng-b: #FF6600;
    --orng-c: #FF8C2A;
    --orng-d: #FFB800;
    --orng-e: #FFD980;
    --grad-orng: linear-gradient(135deg,#FF6600 0%,#FFB800 100%);*/
/* Glows */
/*--glow-b: 0 0 32px rgba(26,127,255,0.5);
    --glow-bs: 0 0 16px rgba(0,160,255,0.35);
    --glow-o: 0 0 32px rgba(255,102,0,0.5);
    --glow-os: 0 0 16px rgba(255,140,42,0.3);*/
/* Shadows */
/*--shadow: 0 6px 28px rgba(0,0,0,0.55);
    --shadow-l: 0 16px 48px rgba(0,0,0,0.65);
}*/

/* ============================================================
   LIGHT THEME — Clean white base
   ============================================================ */
/*[data-theme="light"] {
    --bg-body: #F4F8FF;
    --bg-s1: #FFFFFF;
    --bg-s2: #EBF2FF;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-hero: linear-gradient(145deg,#0A1E42 0%,#1A3A80 55%,#0C1F4A 100%);
    --bg-nav: rgba(255,255,255,0.97);
    --bg-footer: #06101E;
    --border: rgba(26,127,255,0.18);
    --border-card: rgba(26,127,255,0.12);
    --border-focus: rgba(26,127,255,0.5);*/
/* Text — MUST be visible on white */
/*--text-h: #061428;
    --text-p: #0D2040;
    --text-s: #2A4A6A;
    --text-m: #4A6A8A;
    --text-btn: #FFFFFF;
    --blue-a: #0044BB;
    --blue-b: #0066EE;
    --blue-c: #1A7FFF;
    --blue-d: #4A9FFF;
    --blue-e: #99CCFF;
    --grad-blue: linear-gradient(135deg,#0066EE 0%,#00AADD 100%);
    --orng-a: #BB3300;
    --orng-b: #EE5500;
    --orng-c: #FF7700;
    --orng-d: #FFAA00;
    --orng-e: #FFCC66;
    --grad-orng: linear-gradient(135deg,#EE5500 0%,#FFAA00 100%);
    --glow-b: 0 0 20px rgba(26,127,255,0.25);
    --glow-bs: 0 0 10px rgba(0,102,238,0.2);
    --glow-o: 0 0 20px rgba(238,85,0,0.25);
    --glow-os: 0 0 10px rgba(255,119,0,0.2);
    --shadow: 0 4px 20px rgba(10,40,100,0.1);
    --shadow-l: 0 12px 40px rgba(10,40,100,0.14);
}*/

/* ============================================================
   TOKENS & RESET
   ============================================================ */
/*:root {
    --font-d: 'Rajdhani',sans-serif;
    --font-b: 'Nunito',sans-serif;
    --font-t: 'Orbitron',sans-serif;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 9999px;
    --tr: 280ms cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-b);
    background: var(--bg-body);
    color: var(--text-p);
    overflow-x: hidden;
    line-height: 1.7;
    transition: background 0.4s,color 0.4s;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

button, input, textarea, select {
    font-family: var(--font-b);
}

.container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 1.5rem;
}*/
/* ============================================================
   TYPEWRITER — prevent layout reflow / flicker
   ============================================================ */
/*#typewriter {
    display: inline-block;
    min-width: 14ch;
    vertical-align: bottom;
}*/
/* ============================================================
   HERO BG — Minimal Professional (Ring + 2 Meteors)
   ============================================================ */

/* ── Outer ring ── */
/*.hero-ring-a {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 0.75px solid rgba(63,160,255,0.13);
    pointer-events: none;
    z-index: 0;
    animation: ringCW 40s linear infinite;
    will-change: transform;
}*/
/* Middle concentric ring */
/*.hero-ring-a::before {
        content: '';
        position: absolute;
        inset: 70px;
        border-radius: 50%;
        border: 0.5px solid rgba(0,200,255,0.08);
    }*/
/* Inner concentric ring */
/*.hero-ring-a::after {
        content: '';
        position: absolute;
        inset: 148px;
        border-radius: 50%;
        border: 0.5px solid rgba(63,160,255,0.05);
    }*/

/* ── Orbiting dot + comet tail on outer ring ── */
/*.hero-ring-a-dot {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: ringCW 40s linear infinite;
    will-change: transform;
}*/
/* Glowing dot at 12 o'clock */
/*.hero-ring-a-dot::before {
        content: '';
        position: absolute;
        top: -4px;
        left: 50%;
        width: 7px;
        height: 7px;
        margin-left: -3.5px;
        border-radius: 50%;
        background: #3FA0FF;
        box-shadow: 0 0 0 2px rgba(63,160,255,0.18), 0 0 10px 4px rgba(63,160,255,0.55), 0 0 22px 7px rgba(26,127,255,0.28);
        animation: dotGlow 3s ease-in-out infinite;
    }*/
/* Comet tail */
/*.hero-ring-a-dot::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 50%;
        width: 1px;
        height: 62px;
        margin-left: -0.5px;
        background: linear-gradient( 180deg, rgba(63,160,255,0.50) 0%, rgba(63,160,255,0.12) 55%, transparent 100% );
        border-radius: 1px;
    }*/

/* ── Slow counter-rotating dashed arc (same ring size) ── */
/*.hero-ring-arc {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient( circle at 50% 50%, transparent calc(50% - 0.75px), rgba(63,160,255,0.07) calc(50% - 0.75px), rgba(63,160,255,0.07) calc(50% + 0.5px), transparent calc(50% + 0.5px) );
    animation: ringCCW 80s linear infinite;
    will-change: transform;
    mask-image: conic-gradient( from 0deg, black 0deg 55deg, transparent 55deg 115deg, black 115deg 170deg, transparent 170deg 230deg, black 230deg 285deg, transparent 285deg 360deg );
    -webkit-mask-image: conic-gradient( from 0deg, black 0deg 55deg, transparent 55deg 115deg, black 115deg 170deg, transparent 170deg 230deg, black 230deg 285deg, transparent 285deg 360deg );
}*/

/* ── Crosshair at ring center ── */
/*.hero-crosshair {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 0;
}

    .hero-crosshair::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 1px;
        margin: -0.5px 0 0 -9px;
        background: rgba(63,160,255,0.20);
        box-shadow: 0 0 5px 1px rgba(63,160,255,0.12);
    }

    .hero-crosshair::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 18px;
        margin: -9px 0 0 -0.5px;
        background: rgba(63,160,255,0.20);
        box-shadow: 0 0 5px 1px rgba(63,160,255,0.12);
    }*/

/* ── 2 Meteors only ── */
/*.hero-meteor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    border-radius: 50px;
    will-change: transform, opacity;
}

    .hero-meteor::after {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: inherit;
        filter: blur(2px);
        opacity: 0.4;
    }*/
/* Blue meteor — upper third */
/*.hero-m1 {
    top: 22%;
    left: -240px;
    width: 200px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(63,160,255,0.75) 60%, rgba(255,255,255,0.95) );
    animation: meteorFly 16s 1s linear infinite;
}*/
/* Orange meteor — lower half, fires well after blue */
/*.hero-m2 {
    top: 60%;
    left: -180px;
    width: 150px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(255,140,42,0.65) 60%, rgba(255,220,180,0.9) );
    animation: meteorFly 16s 9s linear infinite;
}*/

/* ── Shared keyframes ── */
/*@keyframes ringCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ringCCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes dotGlow {
    0%,100% {
        box-shadow: 0 0 0 2px rgba(63,160,255,0.18), 0 0 10px 4px rgba(63,160,255,0.55), 0 0 22px 7px rgba(26,127,255,0.28);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(63,160,255,0.26), 0 0 16px 7px rgba(63,160,255,0.80), 0 0 34px 11px rgba(26,127,255,0.42);
    }
}

@keyframes meteorFly {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    84% {
        opacity: 0.4;
    }

    100% {
        transform: translateX(135vw);
        opacity: 0;
    }
}*/

/* ============================================================
   NAVBAR
   ============================================================ */
/*.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 0;
    transition: all var(--tr);
    border-bottom: 1px solid transparent;
}

    .navbar.scrolled, [data-theme="light"] .navbar {
        background: var(--bg-nav);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom-color: var(--border);
        box-shadow: var(--shadow);
        padding: 0.5rem 0;
    }

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}*/

/* Brand */
/*.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}*/

/*.nav-logo {
    height: 55px;
    width: auto;
}*/
/*.nav-logo {
    height: 60px;
    width: auto;
}*/

/* Dark theme (default) — show white/transparent logo */
/*[data-theme="dark"] .logo-dark {
    display: block;
}

[data-theme="dark"] .logo-light {
    display: none;
}*/

/* Light theme — show dark logo */
/*[data-theme="light"] .logo-dark {
    display: none;
}

[data-theme="light"] .logo-light {
    display: block;
}*/

/* Fallback if no data-theme set yet */
/*.logo-dark {
    display: block;
}

.logo-light {
    display: none;
}

.brand-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-family: var(--font-d);
    font-size: 1.4rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}

.brand-sub {
    font-size: 0.58rem;
    color: var(--text-m);
    letter-spacing: 0.5px;
    font-weight: 600;
}*/

/* Desktop links */
/*.nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    justify-content: center;
}

.nav-link {
    position: relative;
    font-family: var(--font-d);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-s);
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-sm);
    letter-spacing: 0.4px;
    transition: color var(--tr);
    white-space: nowrap;
}

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        right: 50%;
        height: 2px;
        background: var(--grad-blue);
        border-radius: 2px;
        transition: all var(--tr);
    }

    .nav-link:hover, .nav-link.active {
        color: var(--text-h);
    }

        .nav-link:hover::after, .nav-link.active::after {
            left: 0.85rem;
            right: 0.85rem;
        }

.nav-item {
    position: relative;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 210px;
    background: var(--bg-nav);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--tr);
    box-shadow: var(--shadow-l);
    z-index: 200;
}

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

.nav-dropdown a {
    display: block;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    color: var(--text-s);
    border-radius: var(--r-sm);
    transition: all var(--tr);
    font-weight: 500;
}

    .nav-dropdown a:hover {
        background: rgba(26,127,255,0.1);
        color: var(--blue-c);
        padding-left: 1.1rem;
    }*/

/* Right controls */
/*.nav-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-s);
    transition: all var(--tr);
}

    .theme-toggle:hover {
        border-color: var(--blue-c);
        color: var(--text-h);
        transform: rotate(18deg);
        background: rgba(26,127,255,0.1);
    }

    .theme-toggle .i-sun {
        display: none;
    }

    .theme-toggle .i-moon {
        display: block;
    }

[data-theme="light"] .theme-toggle .i-sun {
    display: block;
}

[data-theme="light"] .theme-toggle .i-moon {
    display: none;
}

.btn-nav-demo {
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.5rem 1.25rem;
    background: var(--grad-orng);
    color: #0A1220 !important;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(255,102,0,0.3);
    -webkit-text-fill-color: #0A1220 !important;
    display: inline-block;
}

    .btn-nav-demo:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-o);
    }

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text-p);
        border-radius: 2px;
        transition: var(--tr);
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

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

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }*/
/* ============================================================
   MOBILE OVERLAY — Right-slide Panel
   ============================================================ */
/*.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4, 9, 15, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;*/
/* row: backdrop on left, panel on right */
/*flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
}

    .mobile-overlay.open {
        display: flex;
        opacity: 1;
        pointer-events: all;
    }*/

/* ── Panel ────────────────────────────────────────────────── */
/*.mob-panel {
    width: 300px;
    max-width: 88vw;
    background: var(--bg-nav);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;*/ /* stack header/nav/footer vertically */
/*overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.mobile-overlay.open .mob-panel {
    transform: translateX(0);
}*/

/* ── Header ───────────────────────────────────────────────── */
/*.mob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.mob-logo-img {
    height: 42px;
    width: auto;
}

.mobile-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.22);
    color: var(--text-s);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tr);
    flex-shrink: 0;
}

    .mobile-close-btn:hover {
        background: rgba(255,70,60,0.15);
        border-color: rgba(255,70,60,0.4);
        color: #FF4A3C;
        transform: rotate(90deg);
    }*/

/* ── Divider ──────────────────────────────────────────────── */
/*.mob-divider {
    display: none;
}*/
/* header border handles this */

/* ── Nav ──────────────────────────────────────────────────── */
/*.mob-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.65rem;
    flex: 1;
}

.mob-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.78rem 0.9rem;
    border-radius: var(--r-md);
    font-family: var(--font-d);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-s);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    text-align: left;
    min-height: 44px;
}

    .mob-link:hover {
        background: rgba(26,127,255,0.1);
        color: var(--blue-d);
    }

    .mob-link.active {
        background: rgba(26,127,255,0.12);
        color: var(--blue-c);
    }

.mob-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}*/

/* ── Submenu accordion ────────────────────────────────────── */
/*.mob-has-sub {
    display: flex;
    flex-direction: column;
}

.mob-arrow {
    margin-left: auto;
    color: var(--text-m);
    flex-shrink: 0;
    transition: transform 0.28s ease;
}

.mob-has-sub.open > .mob-toggle {
    background: rgba(26,127,255,0.1);
    color: var(--blue-c);
}

    .mob-has-sub.open > .mob-toggle .mob-arrow {
        transform: rotate(180deg);
        color: var(--blue-c);
    }

.mob-sub {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.2rem 0 0.3rem 1.1rem;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(26,127,255,0.25);
}

.mob-has-sub.open .mob-sub {
    display: flex;
}

.mob-sub-link {
    display: flex;
    align-items: center;
    padding: 0.62rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-m);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
    min-height: 40px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(26,127,255,0.15);
}

    .mob-sub-link:hover, .mob-sub-link:active {
        background: rgba(26,127,255,0.1);
        color: var(--blue-c);
        padding-left: 1rem;
    }*/

/* ── Footer ───────────────────────────────────────────────── */
/*.mob-footer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem 1.2rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.mob-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.8rem 1.5rem;
    background: var(--grad-orng);
    color: #0A1220 !important;
    -webkit-text-fill-color: #0A1220 !important;
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 700;
    border-radius: var(--r-full);
    text-decoration: none;
    transition: all var(--tr);
    box-shadow: 0 3px 14px rgba(255,102,0,0.3);
    min-height: 44px;
}

    .mob-cta:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-o);
    }

.mob-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    background: rgba(26,127,255,0.05);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
}

.mob-theme-lbl {
    font-size: 0.78rem;
    color: var(--text-m);
    font-weight: 600;
}

.mob-theme-btn {
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.2);
    border-radius: var(--r-full);
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-c);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font-b);
}

    .mob-theme-btn .i-sun {
        display: none;
    }

    .mob-theme-btn .i-moon {
        display: inline;
    }

[data-theme="light"] .mob-theme-btn .i-sun {
    display: inline;
}

[data-theme="light"] .mob-theme-btn .i-moon {
    display: none;
}*/

/* ── Light theme ──────────────────────────────────────────── */
/*[data-theme="light"] .mobile-overlay {
    background: rgba(10,30,80,0.35);
}

[data-theme="light"] .mob-panel {
    background: rgba(255,255,255,0.98);
    border-left-color: rgba(26,127,255,0.12);
}

[data-theme="light"] .mob-link {
    color: var(--text-s);
}

    [data-theme="light"] .mob-link:hover {
        background: rgba(26,127,255,0.07);
        color: var(--blue-b);
    }

[data-theme="light"] .mob-sub-link {
    color: var(--text-m);
}

    [data-theme="light"] .mob-sub-link:hover {
        color: var(--blue-b);
    }*/

/* ── Sizes ────────────────────────────────────────────────── */
/*@media (min-width: 480px) {
    .mob-panel {
        width: 320px;
    }
}

@media (max-width: 360px) {
    .mob-panel {
        width: 100vw;
        max-width: 100vw;
        border-left: none;
    }
}*/

/* ============================================================
   BUTTONS
   ============================================================ */
/*.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.85rem 2rem;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    font-size: 1rem;
    white-space: nowrap;
    line-height: 1;
}

.btn-primary {
    background: var(--grad-blue);
    color: #fff;
    box-shadow: var(--glow-bs);
}

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-b);
    }

.btn-orange {
    background: var(--grad-orng);
    color: #0A1220;
}

    .btn-orange:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-o);
    }

.btn-ghost {
    background: transparent;
    color: var(--text-s);
    border: 1.5px solid var(--border);
}

    .btn-ghost:hover {
        background: rgba(26,127,255,0.09);
        border-color: var(--blue-c);
        color: var(--text-h);
        transform: translateY(-2px);
    }*/
/* On light theme: ghost btn text must be dark */
/*[data-theme="light"] .btn-ghost {
    color: var(--text-s);
    border-color: rgba(26,127,255,0.3);
}

    [data-theme="light"] .btn-ghost:hover {
        color: var(--text-h);
    }*/

/* ============================================================
   SECTION SYSTEM
   ============================================================ */
/*.section {
    padding: 6rem 0;
}

.bg-s1 {
    background: var(--bg-s1);
}

.bg-s2 {
    background: var(--bg-s2);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.25);
    border-radius: var(--r-full);
    padding: 0.28rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--blue-c);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

    .section-chip.orng {
        background: rgba(255,102,0,0.1);
        border-color: rgba(255,140,42,0.3);
        color: var(--orng-c);
    }

[data-theme="light"] .section-chip {
    color: var(--blue-b);
}

    [data-theme="light"] .section-chip.orng {
        color: var(--orng-b);
    }

.section-title {
    font-family: var(--font-d);
    font-size: clamp(1.9rem,3.5vw,2.7rem);
    font-weight: 700;
    color: var(--text-h);
    line-height: 1.15;
    margin-bottom: 1rem;
}*/
/* Gradient text */
/*.t-b {
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.t-o {
    background: var(--grad-orng);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-desc {
    color: var(--text-s);
    font-size: 1rem;
    line-height: 1.8;
}*/
/* Ensure section desc visible on both themes */
/*[data-theme="light"] .section-desc {
    color: var(--text-s);
}*/

/* ============================================================
   HERO SECTION
   ============================================================ */
/*.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bg-hero);
    padding-top: 80px;
}

#heroCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    animation: orbFloat 8s ease-in-out infinite;
}

.hero-orb-1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle,rgba(26,127,255,0.22) 0%,transparent 70%);
    top: -120px;
    left: -100px;
}

.hero-orb-2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle,rgba(255,102,0,0.2) 0%,transparent 70%);
    bottom: -100px;
    right: 8%;
    animation-delay: -4s;
}

.hero-orb-3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle,rgba(0,200,255,0.12) 0%,transparent 70%);
    top: 35%;
    right: 28%;
    animation-delay: -2s;
}

@keyframes orbFloat {
    0%,100% {
        transform: translate(0,0);
    }

    33% {
        transform: translate(18px,-18px);
    }

    66% {
        transform: translate(-14px,14px);
    }
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

.hero-orb-1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle,rgba(26,127,255,0.18) 0%,transparent 70%);
    filter: blur(70px);
    top: -120px;
    left: -100px;
    animation: orbFloat1 12s ease-in-out infinite;
}

.hero-orb-2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle,rgba(255,102,0,0.15) 0%,transparent 70%);
    filter: blur(70px);
    bottom: -100px;
    right: 8%;
    animation: orbFloat2 15s ease-in-out infinite;
}

.hero-orb-3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle,rgba(0,200,255,0.1) 0%,transparent 70%);
    filter: blur(60px);
    top: 35%;
    right: 28%;
    animation: orbFloat1 10s 3s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(16px,-16px,0);
    }
}

@keyframes orbFloat2 {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(-14px,12px,0);
    }
}

.hero-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    padding: 4rem 1.5rem;
    max-width: 1220px;
    margin: 0 auto;
    width: 100%;
}*/

/* Hero text — always on dark hero bg, always white */
/*.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(26,127,255,0.15);
    border: 1px solid rgba(26,127,255,0.35);
    border-radius: var(--r-full);
    padding: 0.38rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #80C4FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.6s ease both;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    background: #3FA0FF;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

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

    50% {
        opacity: 0.4;
        transform: scale(1.4);
    }
}

.hero-title {
    font-family: var(--font-d);
    font-size: clamp(2.8rem,5vw,4.2rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.08;
    margin-bottom: 1.2rem;
    animation: fadeUp 0.7s 0.1s ease both;
}

    .hero-title .line-b {
        display: block;
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-title .line-o {
        display: block;
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.hero-desc {
    font-size: 1.05rem;
    color: rgba(216,238,255,0.88);
    max-width: 520px;
    margin-bottom: 2rem;
    line-height: 1.8;
    animation: fadeUp 0.7s 0.2s ease both;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    animation: fadeUp 0.7s 0.3s ease both;
}

.hero-stats {
    display: flex;
    animation: fadeUp 0.7s 0.4s ease both;
}

.hero-stat {
    text-align: center;
    padding: 0 1.4rem;
    border-right: 1px solid rgba(26,127,255,0.2);
}

    .hero-stat:first-child {
        padding-left: 0;
    }

    .hero-stat:last-child {
        border-right: none;
    }

.stat-num {
    font-family: var(--font-t);
    font-size: 1.9rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-lbl {
    font-size: 0.68rem;
    color: rgba(150,192,224,0.8);
    margin-top: 0.2rem;
    letter-spacing: 0.5px;
    font-weight: 600;
}*/

/* Dashboard Mockup */
/*.hero-right {
    position: relative;
    animation: fadeRight 0.8s 0.3s ease both;
}

.hero-float-card {
    position: absolute;
    background: rgba(8,20,35,0.97);
    border: 1px solid rgba(26,127,255,0.28);
    border-radius: var(--r-md);
    padding: 0.6rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    font-size: 0.78rem;
    font-weight: 600;
    color: #96C0E0;
    white-space: nowrap;
    z-index: 2;
}

    .hero-float-card.card-tl {
        top: -18px;
        left: -38px;
        animation: fc1 4s ease-in-out infinite;
    }

    .hero-float-card.card-br {
        bottom: -18px;
        right: -28px;
        border-color: rgba(255,102,0,0.28);
        animation: fc2 5s ease-in-out infinite;
    }

@keyframes fc1 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes fc2 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

.dashboard-frame {
    background: rgba(8,16,28,0.94);
    border: 1px solid rgba(26,127,255,0.2);
    border-radius: var(--r-xl);
    padding: 1.2rem;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6),0 0 60px rgba(26,127,255,0.07);
}

.db-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(26,127,255,0.1);
}

.db-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.db-dot-r {
    background: #FF5F57;
}

.db-dot-y {
    background: #FEBC2E;
}

.db-dot-g {
    background: #28C840;
}

.db-title {
    font-family: var(--font-t);
    font-size: 0.6rem;
    color: #5888AA;
    margin-left: auto;
    letter-spacing: 1px;
}

.db-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.db-metric {
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
    padding: 0.8rem;
}

.db-metric-icon {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.db-metric-value {
    font-family: var(--font-t);
    font-size: 1.3rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

    .db-metric-value.b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .db-metric-value.o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.db-metric-label {
    font-size: 0.65rem;
    color: #5888AA;
    margin-top: 0.12rem;
    font-weight: 600;
}

.db-bar-box, .db-notif-box {
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
    padding: 0.8rem;
    margin-bottom: 0.7rem;
}

.db-notif-box {
    margin-bottom: 0;
}

.db-bar-title {
    font-size: 0.65rem;
    color: #5888AA;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.db-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

    .db-bar-row:last-child {
        margin-bottom: 0;
    }

.db-bar-label {
    font-size: 0.65rem;
    color: #96C0E0;
    width: 72px;
    flex-shrink: 0;
}

.db-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
}

.db-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.fill-b {
    background: var(--grad-blue);
}

.fill-o {
    background: var(--grad-orng);
}

.fill-t {
    background: linear-gradient(90deg,#00B4D8,#00E5B8);
}

.db-bar-pct {
    font-family: var(--font-t);
    font-size: 0.6rem;
    color: #5888AA;
    width: 26px;
    text-align: right;
}

.db-notif-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

    .db-notif-row:last-child {
        border: none;
        padding-bottom: 0;
    }

.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.notif-text {
    font-size: 0.68rem;
    color: #96C0E0;
    flex: 1;
}

.notif-time {
    font-size: 0.6rem;
    color: #5888AA;
}*/

/* ============================================================
   MARQUEE
   ============================================================ */
/*.marquee-section {
    background: linear-gradient(90deg,rgba(26,127,255,0.07),rgba(255,102,0,0.07));
    border-top: 1px solid rgba(26,127,255,0.1);
    border-bottom: 1px solid rgba(26,127,255,0.1);
    padding: 0.9rem 0;
    overflow: hidden;
}

[data-theme="light"] .marquee-section {
    background: linear-gradient(90deg,rgba(26,127,255,0.05),rgba(255,102,0,0.05));
}

.marquee-track {
    display: flex;
    animation: marquee 32s linear infinite;
    width: max-content;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1.75rem;
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-m);
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 1px solid rgba(26,127,255,0.1);
}

    .marquee-item .mi-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue-c);
        flex-shrink: 0;
    }

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}*/

/* ============================================================
   USP / FEATURE CARDS
   ============================================================ */
/*.usp-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.usp-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 2rem 1.5rem;
    transition: all var(--tr);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}*/
/* Top accent line on card */
/*.usp-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--grad-blue);
        transform: scaleX(0);
        transition: transform var(--tr);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

    .usp-card:hover::before {
        transform: scaleX(1);
    }

    .usp-card:hover {
        border-color: rgba(26,127,255,0.35);
        transform: translateY(-6px);
        box-shadow: var(--shadow-l),var(--glow-bs);
    }

.usp-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.15rem;
    flex-shrink: 0;
}

    .usp-icon-wrap.b {
        background: rgba(26,127,255,0.12);
    }

    .usp-icon-wrap.o {
        background: rgba(255,102,0,0.12);
    }

    .usp-icon-wrap.t {
        background: rgba(0,180,200,0.12);
    }

[data-theme="light"] .usp-icon-wrap.b {
    background: rgba(26,127,255,0.08);
}

[data-theme="light"] .usp-icon-wrap.o {
    background: rgba(238,85,0,0.08);
}

[data-theme="light"] .usp-icon-wrap.t {
    background: rgba(0,150,170,0.08);
}

.usp-title {
    font-family: var(--font-d);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.55rem;
}

.usp-desc {
    font-size: 0.88rem;
    color: var(--text-s);
    line-height: 1.72;
}*/
/* Ensure card text visible */
/*[data-theme="light"] .usp-title {
    color: var(--text-h);
}

[data-theme="light"] .usp-desc {
    color: var(--text-s);
}*/

/* ============================================================
   MODULE CARDS
   ============================================================ */
/*.modules-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.module-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: all var(--tr);
    text-decoration: none;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

    .module-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--grad-blue);
        transform: scaleX(0);
        transition: transform var(--tr);
    }

    .module-card:hover {
        border-color: rgba(26,127,255,0.35);
        transform: translateY(-4px);
        box-shadow: var(--shadow-l),var(--glow-bs);
    }

        .module-card:hover::after {
            transform: scaleX(1);
        }

.mc-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: rgba(26,127,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

    .mc-icon.o {
        background: rgba(255,102,0,0.1);
    }

    .mc-icon.t {
        background: rgba(0,180,200,0.1);
    }

.mc-title {
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-h);
}

.mc-desc {
    font-size: 0.77rem;
    color: var(--text-m);
    line-height: 1.6;
}

.mc-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--blue-c);
    margin-top: auto;
    transition: gap var(--tr);
}

.module-card:hover .mc-link {
    gap: 0.55rem;
}

[data-theme="light"] .mc-title {
    color: var(--text-h);
}

[data-theme="light"] .mc-desc {
    color: var(--text-m);
}

[data-theme="light"] .mc-link {
    color: var(--blue-b);
}

.modules-cta {
    text-align: center;
    margin-top: 2.5rem;
}*/

/* ============================================================
   BENEFITS / FEATURES LAYOUT
   ============================================================ */
/*.features-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    transition: all var(--tr);
    box-shadow: var(--shadow);
}

    .benefit-item:hover {
        border-color: rgba(26,127,255,0.3);
        transform: translateX(5px);
    }

.bi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--grad-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

    .bi-icon.o {
        background: var(--grad-orng);
    }

.bi-title {
    font-family: var(--font-d);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.15rem;
}

.bi-desc {
    font-size: 0.8rem;
    color: var(--text-s);
}

[data-theme="light"] .bi-title {
    color: var(--text-h);
}

[data-theme="light"] .bi-desc {
    color: var(--text-s);
}*/

/* Metric cards */
/*.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--tr);
    box-shadow: var(--shadow);
}

    .metric-card:hover {
        border-color: rgba(26,127,255,0.3);
        transform: scale(1.025);
        box-shadow: var(--shadow-l);
    }

.metric-num {
    font-family: var(--font-t);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.3rem;
}

    .metric-num.b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .metric-num.o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.metric-lbl {
    font-size: 0.78rem;
    color: var(--text-m);
    font-weight: 600;
}

[data-theme="light"] .metric-lbl {
    color: var(--text-m);
}

.tech-strip {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    padding: 0.9rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.tech-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-m);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .tech-badge::before {
        content: '✓';
        color: var(--blue-c);
        font-size: 0.88rem;
    }

[data-theme="light"] .tech-badge {
    color: var(--text-m);
}

    [data-theme="light"] .tech-badge::before {
        color: var(--blue-b);
    }*/

/* ============================================================
   HOW IT WORKS
   ============================================================ */
/*.hiw-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    position: relative;
}

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 40px;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: linear-gradient(90deg,transparent,var(--blue-c),var(--orng-c),transparent);
    }

.hiw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.9rem;
}

.step-num {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 2px solid rgba(26,127,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-t);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--blue-c);
    background: var(--bg-s2);
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 1;
    transition: all var(--tr);
}

.hiw-step:hover .step-num {
    background: rgba(26,127,255,0.12);
    border-color: var(--blue-c);
    box-shadow: var(--glow-bs);
    color: var(--text-h);
}

.hiw-step:nth-child(even) .step-num {
    border-color: rgba(255,102,0,0.3);
    color: var(--orng-c);
}

.hiw-step:nth-child(even):hover .step-num {
    background: rgba(255,102,0,0.12);
    border-color: var(--orng-c);
    box-shadow: var(--glow-os);
}

.step-title {
    font-family: var(--font-d);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.45rem;
}

.step-desc {
    font-size: 0.84rem;
    color: var(--text-m);
    line-height: 1.6;
}

[data-theme="light"] .step-title {
    color: var(--text-h);
}

[data-theme="light"] .step-desc {
    color: var(--text-m);
}*/

/* ============================================================
   TESTIMONIALS
   ============================================================ */
/*.testi-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.testi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 2rem;
    transition: all var(--tr);
    position: relative;
    box-shadow: var(--shadow);
}

    .testi-card::before {
        content: '"';
        position: absolute;
        top: 0;
        right: 1.2rem;
        font-size: 5rem;
        color: rgba(26,127,255,0.07);
        font-family: Georgia,serif;
        line-height: 1.1;
    }

    .testi-card:hover {
        border-color: rgba(26,127,255,0.3);
        transform: translateY(-4px);
        box-shadow: var(--shadow-l);
    }

.testi-stars {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
}

.star {
    color: var(--orng-d);
    font-size: 0.95rem;
}

.testi-text {
    color: var(--text-s);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
    font-style: italic;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--grad-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-d);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

    .author-avatar.o {
        background: var(--grad-orng);
        color: #0A1220;
    }

.author-name {
    font-family: var(--font-d);
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text-h);
}

.author-role {
    font-size: 0.75rem;
    color: var(--text-m);
}

[data-theme="light"] .testi-text {
    color: var(--text-s);
}

[data-theme="light"] .author-name {
    color: var(--text-h);
}*/

/* ============================================================
   CTA SECTION — always dark background
   ============================================================ */
/*.cta-section {
    background: linear-gradient(145deg,#04090F 0%,#081422 55%,#05101E 100%);
    position: relative;
    overflow: hidden;
}

    .cta-section::before {
        content: '';
        position: absolute;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 700px;
        height: 350px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(26,127,255,0.14) 0%,transparent 70%);
    }

    .cta-section::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        height: 250px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(255,102,0,0.1) 0%,transparent 70%);
    }

.cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}*/
/* CTA text always white — it's on dark bg */
/*.cta-inner .section-title, .cta-inner .section-title span {
        color: #F0F8FF !important;
        -webkit-text-fill-color: #F0F8FF !important;
    }

        .cta-inner .section-title .t-b {
            background: var(--grad-blue);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-clip: text;
        }

        .cta-inner .section-title .t-o {
            background: var(--grad-orng);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-clip: text;
        }

    .cta-inner .section-desc {
        color: rgba(216,238,255,0.82) !important;
    }

.cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}*/

/* PAGE HERO — always dark */
/*.page-hero {
    min-height: 290px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(145deg,#06101E 0%,#0D2040 100%);
    padding: 7rem 0 3.8rem;
    position: relative;
    overflow: hidden;
}

.page-hero-orb {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(26,127,255,0.1) 0%,transparent 70%);
    pointer-events: none;
}

.page-hero-title {
    font-family: var(--font-d);
    font-size: clamp(2rem,4vw,3.1rem);
    font-weight: 700;
    color: #F0F8FF;
    line-height: 1.12;
}

    .page-hero-title .t-b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .page-hero-title .t-o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-hero-desc {
    color: rgba(216,238,255,0.82);
    max-width: 540px;
    margin-top: 0.9rem;
}*/
/* Page hero badge */
/*.page-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(26,127,255,0.15);
    border: 1px solid rgba(26,127,255,0.35);
    border-radius: var(--r-full);
    padding: 0.32rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #80C4FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}*/

/* ============================================================
   FORMS — visible in BOTH themes
   ============================================================ */
/*.form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.4rem;
    box-shadow: var(--shadow);
}

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

.form-label {
    display: block;
    font-family: var(--font-d);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-s);
    letter-spacing: 0.5px;
    margin-bottom: 0.42rem;
}

.form-control {
    width: 100%;
    padding: 0.72rem 1rem;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-h);
    font-family: var(--font-b);
    font-size: 0.94rem;
    transition: all var(--tr);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

    .form-control:focus {
        border-color: var(--blue-c);
        box-shadow: 0 0 0 3px rgba(26,127,255,0.12);
    }

    .form-control::placeholder {
        color: var(--text-m);
    }*/
/* Light theme forms */
/*[data-theme="light"] .form-wrap {
    background: #FFFFFF;
    border-color: rgba(26,127,255,0.15);
}

[data-theme="light"] .form-control {
    background: #F8FBFF;
    color: #0D2040;
    border-color: rgba(26,127,255,0.2);
}

    [data-theme="light"] .form-control:focus {
        border-color: var(--blue-b);
        box-shadow: 0 0 0 3px rgba(26,127,255,0.1);
    }

    [data-theme="light"] .form-control::placeholder {
        color: #7A9AB8;
    }

[data-theme="light"] .form-label {
    color: var(--text-s);
}

select.form-control {
    cursor: pointer;
}

    select.form-control option {
        background: var(--bg-s2);
        color: var(--text-h);
    }

[data-theme="light"] select.form-control option {
    background: #FFFFFF;
    color: #0D2040;
}

textarea.form-control {
    min-height: 108px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}*/
/* Status messages */
/*.form-msg {
    display: block;
    padding: 0.8rem 1.1rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.15rem;
    min-height: 0;
}

    .form-msg:empty {
        display: none;
        padding: 0;
        margin: 0;
        border: none;
    }

.msg-ok {
    background: rgba(0,200,100,0.1);
    border: 1px solid rgba(0,200,100,0.3);
    color: #00CC78;
}

.msg-err {
    background: rgba(255,70,60,0.1);
    border: 1px solid rgba(255,70,60,0.3);
    color: #FF4A3C;
}

[data-theme="light"] .msg-ok {
    background: rgba(0,180,90,0.08);
    color: #00882A;
}

[data-theme="light"] .msg-err {
    background: rgba(220,30,20,0.08);
    color: #CC1A10;
}*/

/* ============================================================
   PRICING
   ============================================================ */
/*.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.4rem 1.9rem;
    display: flex;
    flex-direction: column;
    transition: all var(--tr);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

    .pricing-card.popular {
        border-color: var(--blue-c);
        box-shadow: 0 0 36px rgba(26,127,255,0.14);
    }

    .pricing-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-l);
    }

.popular-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: var(--grad-blue);
    color: #fff;
    font-family: var(--font-t);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.22rem 0.7rem;
    border-radius: var(--r-full);
    letter-spacing: 1px;
}

.pricing-plan {
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-m);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.pricing-price {
    font-family: var(--font-t);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-h);
    line-height: 1;
    margin-bottom: 0.2rem;
}

    .pricing-price .curr {
        font-size: 1.35rem;
        vertical-align: top;
        margin-top: 0.28rem;
        display: inline-block;
    }

.pricing-period {
    font-size: 0.76rem;
    color: var(--text-m);
    margin-bottom: 1.4rem;
}

.pricing-desc {
    font-size: 0.87rem;
    color: var(--text-s);
    margin-bottom: 1.6rem;
    line-height: 1.6;
}

.pricing-features {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    margin-bottom: 1.8rem;
    flex: 1;
}

    .pricing-features li {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.85rem;
        color: var(--text-s);
    }

        .pricing-features li::before {
            content: '✓';
            color: var(--blue-c);
            font-weight: 700;
            flex-shrink: 0;
        }

        .pricing-features li.no {
            color: var(--text-m);
            opacity: 0.55;
        }

            .pricing-features li.no::before {
                content: '✗';
            }

.pricing-cta {
    margin-top: auto;
}

[data-theme="light"] .pricing-plan {
    color: var(--text-m);
}

[data-theme="light"] .pricing-price {
    color: var(--text-h);
}

[data-theme="light"] .pricing-desc {
    color: var(--text-s);
}

[data-theme="light"] .pricing-features li {
    color: var(--text-s);
}*/

/* ============================================================
   FAQ
   ============================================================ */
/*.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--tr);
    box-shadow: var(--shadow);
}

    .faq-item.open {
        border-color: rgba(26,127,255,0.38);
    }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-d);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-p);
    text-align: left;
    transition: color var(--tr);
}

    .faq-question:hover {
        color: var(--blue-c);
    }

[data-theme="light"] .faq-question {
    color: var(--text-h);
}

    [data-theme="light"] .faq-question:hover {
        color: var(--blue-b);
    }

.faq-arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(26,127,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--blue-c);
    transition: transform var(--tr),background var(--tr);
}

.faq-item.open .faq-arrow {
    transform: rotate(180deg);
    background: var(--blue-b);
    color: #fff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s ease;
}

.faq-answer-inner {
    padding: 0 1.4rem 1.2rem;
    color: var(--text-s);
    font-size: 0.92rem;
    line-height: 1.8;
}

.faq-item.open .faq-answer {
    max-height: 500px;
}

[data-theme="light"] .faq-answer-inner {
    color: var(--text-s);
}*/

/* ============================================================
   FOOTER — always dark
   ============================================================ */
/*.footer-iso-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1.4rem;
    max-width: 345px;
}

.iso-badge {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(26, 127, 255, 0.14);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: all var(--tr);
    overflow: hidden;
}

    .iso-badge:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(26, 127, 255, 0.38);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(26, 127, 255, 0.12);
    }

    .iso-badge img {*/
/* Show only the shield icon — crop out the dark text portion */
/*width: 38px;
        height: 38px;
        object-fit: cover;
        object-position: left center;
        flex-shrink: 0;
    }

.iso-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.iso-code {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-d);
    color: #80C4FF;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.iso-name {
    font-size: 0.6rem;
    color: #a3c4e3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}*/

/* Responsive */
/*@media (max-width: 991px) {
    .footer-iso-row {
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .footer-iso-row {
        grid-template-columns: 1fr 1fr;
    }
}

.footer {
    background: var(--bg-footer);
    border-top: 1px solid rgba(26,127,255,0.1);
}

.footer-top {
    padding: 4rem 0 3rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

    .footer-logo-wrap img {
        height: 55px;
    }

.footer-brand-nm {
    font-family: var(--font-d);
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand-sb {
    font-size: 0.6rem;
    color: #4A6A88;
    letter-spacing: 0.5px;
    display: block;
    margin-top: 0.1rem;
}

.footer-desc {
    font-size: 0.85rem;
    color: #a3c4e3;
    line-height: 1.72;
    max-width: 295px;
    margin-bottom: 1.2rem;
}

.footer-social {
    display: flex;
    gap: 0.55rem;
}

.social-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: rgba(26,127,255,0.08);
    border: 1px solid rgba(26,127,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-family: var(--font-d);
    font-weight: 700;
    color: #a3c4e3;
    cursor: pointer;
    transition: all var(--tr);
    text-decoration: none;
    letter-spacing: 0;
}

    .social-btn:hover {
        background: rgba(26,127,255,0.2);
        border-color: var(--blue-c);
        color: #fff;
        transform: translateY(-2px);
    }

.footer-col-title {
    font-family: var(--font-d);
    font-size: 0.78rem;
    font-weight: 700;
    color: #F0F8FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.15rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

    .footer-links a {
        font-size: 0.85rem;
        color: #a3c4e3;
        transition: all var(--tr);
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

        .footer-links a:hover {
            color: #80C4FF;
            padding-left: 0.3rem;
        }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.fc-item {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.fc-icon {
    font-size: 0.88rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.fc-text {
    font-size: 0.83rem;
    color: #a3c4e3;
    line-height: 1.5;
}

    .fc-text a {
        color: #a3c4e3;
        transition: color var(--tr);
    }

        .fc-text a:hover {
            color: #80C4FF;
        }

.footer-bottom {
    padding: 1.15rem 0;
    border-top: 1px solid rgba(26,127,255,0.08);
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-copy {
    font-size: 0.78rem;
    color: #a3c4e3;
}

.footer-cin {
    font-size: 0.74rem;
    color: rgb(255 255 255 / 58%);
}

    .footer-cin a {
        color: #3FA0FF;
        transition: color var(--tr);
    }

        .footer-cin a:hover {
            color: #80C4FF;
        }*/

/* ============================================================
   SCROLL TOP
   ============================================================ */
/*.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad-blue);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
    box-shadow: var(--glow-bs);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all var(--tr);
    z-index: 100;
}

    .scroll-top.visible {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    .scroll-top:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-b);
    }*/

/* ============================================================
   ANIMATIONS
   ============================================================ */
/*@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

    .reveal.visible, .reveal-left.visible, .reveal-right.visible {
        opacity: 1;
        transform: none;
    }

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}

.delay-6 {
    transition-delay: 0.6s;
}*/

/* ============================================================
   RESPONSIVE
   ============================================================ */
/*@media(max-width:1100px) {
    .modules-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:900px) {
    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-right {
        display: none;
    }

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

    .features-layout {
        grid-template-columns: 1fr;
    }

    .features-right {
        display: none;
    }

    .hiw-steps {
        grid-template-columns: 1fr 1fr;
    }

        .hiw-steps::before {
            display: none;
        }

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

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }
}

@media(max-width:640px) {
    .usp-grid {
        grid-template-columns: 1fr;
    }

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

    .hiw-steps {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

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

    .hero-stat {
        border: none;
        padding-left: 0;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 4rem 0;
    }
}*/
/* ============================================================
   cloudeUNI — Responsive Additions
   Append to END of styles.css
   Covers: Navbar · Footer · ISO · Cards · Forms · All Grids
   ============================================================ */

/* ── 1280px — Large Tablet / Small Desktop ───────────────── */
/*@media (max-width: 1280px) {
    .footer-top {
        grid-template-columns: 1.8fr 1fr 1fr 1fr;
        gap: 2rem;
    }

    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-title {
        font-size: clamp(2.4rem, 4vw, 3.6rem);
    }
}*/

/* ── 1100px — Tablet Landscape ───────────────────────────── */
/*@media (max-width: 1100px) {
    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .usp-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .pricing-card {
        padding: 1.8rem 1.4rem;
    }

    .hiw-steps {
        gap: 0;
    }
}*/

/* ── 900px — Tablet Portrait ─────────────────────────────── */
/*@media (max-width: 900px) {*/

/* Navbar */
/*.nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-logo {
        height: 50px;
    }

    .btn-nav-demo {
        font-size: 0.8rem;
        padding: 0.45rem 1rem;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .nav-right {
        gap: 0.45rem;
    }*/

/* Hero */
/*.hero-container {
        grid-template-columns: 1fr;
        padding: 3rem 1.5rem;
    }

    .hero-right {
        display: none;
    }

    .hero-title {
        font-size: clamp(2.2rem, 5vw, 3rem);
    }*/

/* Cards */
/*.usp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .features-right {
        display: none;
    }

    .hiw-steps {
        grid-template-columns: 1fr 1fr;
    }

        .hiw-steps::before {
            display: none;
        }

    .testi-grid {
        grid-template-columns: 1fr;
    }*/

/* Pricing */
/*.pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }*/

/* Footer */
/*.footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-iso-row {
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-logo-wrap img {
        height: 46px;
    }*/

/* Metrics */
/*.metrics-grid {
        grid-template-columns: 1fr 1fr;
    }
}*/

/* ── 768px — Large Phone / Small Tablet ──────────────────── */
/*@media (max-width: 768px) {*/

/* Sections */
/*.section {
        padding: 4.5rem 0;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }*/

/* Page hero */
/*.page-hero {
        min-height: 220px;
        padding: 6rem 0 2.8rem;
    }*/

/* Hero */
/*.hero-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.8rem;
    }

    .hero-cta {
        gap: 0.75rem;
    }

        .hero-cta .btn {
            padding: 0.75rem 1.6rem;
            font-size: 0.92rem;
        }

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

    .hero-stat {
        border-right: none;
        padding: 0 0.8rem;
    }

        .hero-stat:first-child {
            padding-left: 0;
        }*/

/* Module cards */
/*.modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    .module-card {
        padding: 1.1rem;
    }*/

/* USP */
/*.usp-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }*/

/* How It Works */
/*.hiw-steps {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }*/

/* Testimonials */
/*.testi-grid {
        grid-template-columns: 1fr;
    }*/

/* Footer */
/*.footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
        padding: 3rem 0 2.5rem;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.35rem;
    }*/

/* Forms */
/*.form-row {
        grid-template-columns: 1fr;
    }

    .form-wrap {
        padding: 1.8rem 1.4rem;
    }*/

/* CTA buttons */
/*.cta-btns {
        flex-direction: column;
        align-items: center;
    }*/

/* ISO badges — 2 col on small tablet */
/*.iso-badge img {
        width: 32px;
        height: 32px;
    }

    .iso-code {
        font-size: 0.62rem;
    }

    .iso-name {
        font-size: 0.56rem;
    }
}*/

/* ── 640px — Phone Landscape ─────────────────────────────── */
/*@media (max-width: 640px) {*/

/* Navbar */
/*.nav-logo {
        height: 44px;
    }

    .btn-nav-demo {
        display: none;*/ /* hide on small phones — available in mobile menu */
/*}*/

/* Hero */
/*.hero-title {
        font-size: clamp(2rem, 7vw, 2.6rem);
    }

    .hero-desc {
        font-size: 0.95rem;
    }

    .hero-cta {
        flex-direction: column;
    }

        .hero-cta .btn {
            width: 100%;
            justify-content: center;
        }*/

/* Grids */
/*.usp-grid {
        grid-template-columns: 1fr;
    }

    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hiw-steps {
        grid-template-columns: 1fr;
    }*/

/* Footer */
/*.footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-desc {
        max-width: 100%;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-logo-wrap img {
        height: 42px;
    }*/

/* Pricing */
/*.pricing-card {
        padding: 1.8rem 1.4rem;
    }*/

/* Metrics */
/*.metrics-grid {
        grid-template-columns: 1fr 1fr;
    }*/

/* Section */
/*.section {
        padding: 3.5rem 0;
    }*/

/* Page hero */
/*.page-hero-title {
        font-size: clamp(1.7rem, 5.5vw, 2.4rem);
    }*/

/* Tech strip */
/*.tech-strip {
        gap: 0.75rem;
    }

    .tech-badge {
        font-size: 0.72rem;
    }
}*/

/* ── 480px — Phone Portrait ──────────────────────────────── */
/*@media (max-width: 480px) {*/

/* Container */
/*.container {
        padding: 0 1rem;
    }*/

/* Navbar */
/*.nav-logo {
        height: 40px;
    }

    .nav-container {
        gap: 0.5rem;
    }

    .nav-right {
        gap: 0.35rem;
    }

    .theme-toggle {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }*/

/* Hero */
/*.hero-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    .hero-stat .stat-num {
        font-size: 1.5rem;
    }*/

/* Modules — stay 2 col */
/*.modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem;
    }

    .mc-title {
        font-size: 0.85rem;
    }

    .mc-desc {
        display: none;*/ /* too cramped on small phones */
/*}*/

/* USP */
/*.usp-card {
        padding: 1.4rem 1.1rem;
    }*/

/* ISO badges — 2x2 grid */
/*.footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .iso-badge {
        padding: 0.4rem 0.45rem;
        gap: 0.35rem;
    }

        .iso-badge img {
            width: 28px;
            height: 28px;
        }

    .iso-code {
        font-size: 0.58rem;
    }

    .iso-name {
        display: none;*/ /* too small — icon + code is enough */
/*}*/

/* Footer bottom */
/*.footer-copy,
    .footer-cin {
        font-size: 0.7rem;
        text-align: center;
    }*/

/* Forms */
/*.form-wrap {
        padding: 1.4rem 1rem;
    }

    .form-control {
        font-size: 0.88rem;
        padding: 0.65rem 0.85rem;
    }*/

/* FAQ */
/*.faq-question {
        font-size: 0.9rem;
        padding: 1rem 1.1rem;
    }

    .faq-answer-inner {
        padding: 0 1.1rem 1rem;
        font-size: 0.86rem;
    }*/

/* Buttons */
/*.btn {
        padding: 0.78rem 1.5rem;
        font-size: 0.9rem;
    }*/

/* Pricing */
/*.pricing-price {
        font-size: 2rem;
    }*/

/* Section */
/*.section {
        padding: 3rem 0;
    }

    .section-title {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem);
    }*/

/* Page hero */
/*.page-hero {
        min-height: 180px;
        padding: 5.5rem 0 2.2rem;
    }
}*/

/* ── 375px — Small Phones (iPhone SE etc.) ───────────────── */
/*@media (max-width: 375px) {

    .nav-logo {
        height: 36px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .modules-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .module-card {
        padding: 0.9rem;
    }

    .mc-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .iso-badge img {
        width: 24px;
        height: 24px;
    }

    .footer-logo-wrap img {
        height: 36px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.85rem;
    }

    .stat-num {
        font-size: 1.3rem;
    }

    .stat-lbl {
        font-size: 0.62rem;
    }
}*/
/* ============================================================
   cloudeUNI — Complete Stylesheet
   Version: Final | Dark + Light Theme | Full Responsive
   Logo: Blue-Cyan (#1A7FFF→#00C8FF) + Orange-Gold (#FF6600→#FFB800)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700;800&family=Orbitron:wght@500;700;900&display=swap');

/* ============================================================
   DARK THEME (default)
   ============================================================ */
:root, [data-theme="dark"] {
    --bg-body: #04090F;
    --bg-s1: #080F1A;
    --bg-s2: #0B1523;
    --bg-card: #0D1B2A;
    --bg-input: #0A1422;
    --bg-hero: linear-gradient(145deg,#04090F 0%,#081425 55%,#060E1C 100%);
    --bg-nav: rgba(4,9,15,0.95);
    --bg-footer: #020509;
    --border: rgba(26,127,255,0.18);
    --border-card: rgba(26,127,255,0.12);
    --border-focus: rgba(26,127,255,0.6);
    --text-h: #F0F8FF;
    --text-p: #D8EEFF;
    --text-s: #96C0E0;
    --text-m: #5888AA;
    --text-btn: #FFFFFF;
    --blue-a: #0055CC;
    --blue-b: #1A7FFF;
    --blue-c: #3FA0FF;
    --blue-d: #80C4FF;
    --blue-e: #BDE0FF;
    --grad-blue: linear-gradient(135deg,#1A7FFF 0%,#00C8FF 100%);
    --orng-a: #CC4400;
    --orng-b: #FF6600;
    --orng-c: #FF8C2A;
    --orng-d: #FFB800;
    --orng-e: #FFD980;
    --grad-orng: linear-gradient(135deg,#FF6600 0%,#FFB800 100%);
    --glow-b: 0 0 32px rgba(26,127,255,0.5);
    --glow-bs: 0 0 16px rgba(0,160,255,0.35);
    --glow-o: 0 0 32px rgba(255,102,0,0.5);
    --glow-os: 0 0 16px rgba(255,140,42,0.3);
    --shadow: 0 6px 28px rgba(0,0,0,0.55);
    --shadow-l: 0 16px 48px rgba(0,0,0,0.65);
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
    --bg-body: #F4F8FF;
    --bg-s1: #FFFFFF;
    --bg-s2: #EBF2FF;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-hero: linear-gradient(145deg,#0A1E42 0%,#1A3A80 55%,#0C1F4A 100%);
    --bg-nav: rgba(255,255,255,0.97);
    --bg-footer: #06101E;
    --border: rgba(26,127,255,0.18);
    --border-card: rgba(26,127,255,0.12);
    --border-focus: rgba(26,127,255,0.5);
    --text-h: #061428;
    --text-p: #0D2040;
    --text-s: #2A4A6A;
    --text-m: #4A6A8A;
    --text-btn: #FFFFFF;
    --blue-a: #0044BB;
    --blue-b: #0066EE;
    --blue-c: #1A7FFF;
    --blue-d: #4A9FFF;
    --blue-e: #99CCFF;
    --grad-blue: linear-gradient(135deg,#0066EE 0%,#00AADD 100%);
    --orng-a: #BB3300;
    --orng-b: #EE5500;
    --orng-c: #FF7700;
    --orng-d: #FFAA00;
    --orng-e: #FFCC66;
    --grad-orng: linear-gradient(135deg,#EE5500 0%,#FFAA00 100%);
    --glow-b: 0 0 20px rgba(26,127,255,0.25);
    --glow-bs: 0 0 10px rgba(0,102,238,0.2);
    --glow-o: 0 0 20px rgba(238,85,0,0.25);
    --glow-os: 0 0 10px rgba(255,119,0,0.2);
    --shadow: 0 4px 20px rgba(10,40,100,0.1);
    --shadow-l: 0 12px 40px rgba(10,40,100,0.14);
}

/* ============================================================
   TOKENS & RESET
   ============================================================ */
:root {
    --font-d: 'Rajdhani',sans-serif;
    --font-b: 'Nunito',sans-serif;
    --font-t: 'Orbitron',sans-serif;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 9999px;
    --tr: 280ms cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-b);
    background: var(--bg-body);
    color: var(--text-p);
    overflow-x: hidden;
    line-height: 1.7;
    transition: background 0.4s, color 0.4s;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

button, input, textarea, select {
    font-family: var(--font-b);
}

.container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ============================================================
   TYPEWRITER
   ============================================================ */
#typewriter {
    display: inline-block;
    min-width: 14ch;
    vertical-align: bottom;
}

/* ============================================================
   HERO BG DECORATIONS
   ============================================================ */
.hero-ring-a {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 0.75px solid rgba(63,160,255,0.13);
    pointer-events: none;
    z-index: 0;
    animation: ringCW 40s linear infinite;
    will-change: transform;
}

    .hero-ring-a::before {
        content: '';
        position: absolute;
        inset: 70px;
        border-radius: 50%;
        border: 0.5px solid rgba(0,200,255,0.08);
    }

    .hero-ring-a::after {
        content: '';
        position: absolute;
        inset: 148px;
        border-radius: 50%;
        border: 0.5px solid rgba(63,160,255,0.05);
    }

.hero-ring-a-dot {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: ringCW 40s linear infinite;
    will-change: transform;
}

    .hero-ring-a-dot::before {
        content: '';
        position: absolute;
        top: -4px;
        left: 50%;
        width: 7px;
        height: 7px;
        margin-left: -3.5px;
        border-radius: 50%;
        background: #3FA0FF;
        box-shadow: 0 0 0 2px rgba(63,160,255,0.18),0 0 10px 4px rgba(63,160,255,0.55),0 0 22px 7px rgba(26,127,255,0.28);
        animation: dotGlow 3s ease-in-out infinite;
    }

    .hero-ring-a-dot::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 50%;
        width: 1px;
        height: 62px;
        margin-left: -0.5px;
        background: linear-gradient(180deg,rgba(63,160,255,0.50) 0%,rgba(63,160,255,0.12) 55%,transparent 100%);
        border-radius: 1px;
    }

.hero-ring-arc {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 50% 50%,transparent calc(50% - 0.75px),rgba(63,160,255,0.07) calc(50% - 0.75px),rgba(63,160,255,0.07) calc(50% + 0.5px),transparent calc(50% + 0.5px));
    animation: ringCCW 80s linear infinite;
    will-change: transform;
    mask-image: conic-gradient(from 0deg,black 0deg 55deg,transparent 55deg 115deg,black 115deg 170deg,transparent 170deg 230deg,black 230deg 285deg,transparent 285deg 360deg);
    -webkit-mask-image: conic-gradient(from 0deg,black 0deg 55deg,transparent 55deg 115deg,black 115deg 170deg,transparent 170deg 230deg,black 230deg 285deg,transparent 285deg 360deg);
}

.hero-crosshair {
    position: absolute;
    top: -100px;
    right: -110px;
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 0;
}

    .hero-crosshair::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 1px;
        margin: -0.5px 0 0 -9px;
        background: rgba(63,160,255,0.20);
        box-shadow: 0 0 5px 1px rgba(63,160,255,0.12);
    }

    .hero-crosshair::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 18px;
        margin: -9px 0 0 -0.5px;
        background: rgba(63,160,255,0.20);
        box-shadow: 0 0 5px 1px rgba(63,160,255,0.12);
    }

.hero-meteor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    border-radius: 50px;
    will-change: transform,opacity;
}

    .hero-meteor::after {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: inherit;
        filter: blur(2px);
        opacity: 0.4;
    }

.hero-m1 {
    top: 22%;
    left: -240px;
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(63,160,255,0.75) 60%,rgba(255,255,255,0.95));
    animation: meteorFly 16s 1s linear infinite;
}

.hero-m2 {
    top: 60%;
    left: -180px;
    width: 150px;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(255,140,42,0.65) 60%,rgba(255,220,180,0.9));
    animation: meteorFly 16s 9s linear infinite;
}

@keyframes ringCW {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes ringCCW {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-360deg)
    }
}

@keyframes dotGlow {
    0%,100% {
        box-shadow: 0 0 0 2px rgba(63,160,255,0.18),0 0 10px 4px rgba(63,160,255,0.55),0 0 22px 7px rgba(26,127,255,0.28);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(63,160,255,0.26),0 0 16px 7px rgba(63,160,255,0.80),0 0 34px 11px rgba(26,127,255,0.42);
    }
}

@keyframes meteorFly {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    84% {
        opacity: 0.4;
    }

    100% {
        transform: translateX(135vw);
        opacity: 0;
    }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 0;
    transition: all var(--tr);
    border-bottom: 1px solid transparent;
}

    .navbar.scrolled, [data-theme="light"] .navbar {
        background: var(--bg-nav);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom-color: var(--border);
        box-shadow: var(--shadow);
        padding: 0.5rem 0;
    }

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

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.nav-logo {
    height: 60px;
    width: auto;
}

/* Logo theme switching */
.logo-dark {
    display: block;
}

.logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="light"] .logo-dark {
    display: none;
}

[data-theme="light"] .logo-light {
    display: block;
}

.brand-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-family: var(--font-d);
    font-size: 1.4rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}

.brand-sub {
    font-size: 0.58rem;
    color: var(--text-m);
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Desktop nav links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    justify-content: center;
}

.nav-link {
    position: relative;
    font-family: var(--font-d);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-s);
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-sm);
    letter-spacing: 0.4px;
    transition: color var(--tr);
    white-space: nowrap;
}

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        right: 50%;
        height: 2px;
        background: var(--grad-blue);
        border-radius: 2px;
        transition: all var(--tr);
    }

    .nav-link:hover, .nav-link.active {
        color: var(--text-h);
    }

        .nav-link:hover::after, .nav-link.active::after {
            left: 0.85rem;
            right: 0.85rem;
        }

.nav-item {
    position: relative;
}

.nav-item-drop {
    position: relative;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 210px;
    background: var(--bg-nav);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--tr);
    box-shadow: var(--shadow-l);
    z-index: 200;
}

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

.nav-dropdown a {
    display: block;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    color: var(--text-s);
    border-radius: var(--r-sm);
    transition: all var(--tr);
    font-weight: 500;
}

    .nav-dropdown a:hover {
        background: rgba(26,127,255,0.1);
        color: var(--blue-c);
        padding-left: 1.1rem;
    }

/* Nav right controls */
.nav-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-s);
    transition: all var(--tr);
}

    .theme-toggle:hover {
        border-color: var(--blue-c);
        color: var(--text-h);
        transform: rotate(18deg);
        background: rgba(26,127,255,0.1);
    }

    .theme-toggle .i-sun {
        display: none;
    }

    .theme-toggle .i-moon {
        display: block;
    }

[data-theme="light"] .theme-toggle .i-sun {
    display: block;
}

[data-theme="light"] .theme-toggle .i-moon {
    display: none;
}

.btn-nav-demo {
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.5rem 1.25rem;
    background: var(--grad-orng);
    color: #0A1220 !important;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(255,102,0,0.3);
    -webkit-text-fill-color: #0A1220 !important;
    display: inline-block;
}

    .btn-nav-demo:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-o);
    }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text-p);
        border-radius: 2px;
        transition: var(--tr);
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

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

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/* ============================================================
   MOBILE OVERLAY — Right-slide Panel
   ============================================================ */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4,9,15,0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
}

    .mobile-overlay.open {
        display: flex;
        opacity: 1;
        pointer-events: all;
    }

.mob-panel {
    width: 300px;
    max-width: 88vw;
    background: var(--bg-nav);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
}

.mobile-overlay.open .mob-panel {
    transform: translateX(0);
}

.mob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.mob-logo-img {
    height: 44px;
    width: auto;
}

[data-theme="light"] .mob-logo-img {
    content: url('assets/images/CU_WT.png');
}

.mobile-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.22);
    color: var(--text-s);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tr);
    flex-shrink: 0;
}

    .mobile-close-btn:hover {
        background: rgba(255,70,60,0.15);
        border-color: rgba(255,70,60,0.4);
        color: #FF4A3C;
        transform: rotate(90deg);
    }

.mob-divider {
    display: none;
}

.mob-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.65rem;
    flex: 1;
}

.mob-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.78rem 0.9rem;
    border-radius: var(--r-md);
    font-family: var(--font-d);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-s);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.18s,color 0.18s;
    text-align: left;
    min-height: 44px;
}

    .mob-link:hover {
        background: rgba(26,127,255,0.1);
        color: var(--blue-d);
    }

    .mob-link.active {
        background: rgba(26,127,255,0.12);
        color: var(--blue-c);
    }

.mob-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Mobile submenu */
.mob-has-sub {
    display: flex;
    flex-direction: column;
}

.mob-arrow {
    margin-left: auto;
    color: var(--text-m);
    flex-shrink: 0;
    transition: transform 0.28s ease;
}

.mob-has-sub.open > .mob-toggle {
    background: rgba(26,127,255,0.1);
    color: var(--blue-c);
}

    .mob-has-sub.open > .mob-toggle .mob-arrow {
        transform: rotate(180deg);
        color: var(--blue-c);
    }

.mob-sub {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.2rem 0 0.3rem 1.1rem;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(26,127,255,0.25);
}

.mob-has-sub.open .mob-sub {
    display: flex;
}

.mob-sub-link {
    display: flex;
    align-items: center;
    padding: 0.62rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-m);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: background 0.15s,color 0.15s,padding-left 0.15s;
    min-height: 40px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(26,127,255,0.15);
}

    .mob-sub-link:hover, .mob-sub-link:active {
        background: rgba(26,127,255,0.1);
        color: var(--blue-c);
        padding-left: 1rem;
    }

.mob-footer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem 1.2rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.mob-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.8rem 1.5rem;
    background: var(--grad-orng);
    color: #0A1220 !important;
    -webkit-text-fill-color: #0A1220 !important;
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 700;
    border-radius: var(--r-full);
    text-decoration: none;
    transition: all var(--tr);
    box-shadow: 0 3px 14px rgba(255,102,0,0.3);
    min-height: 44px;
}

    .mob-cta:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-o);
    }

.mob-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    background: rgba(26,127,255,0.05);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
}

.mob-theme-lbl {
    font-size: 0.78rem;
    color: var(--text-m);
    font-weight: 600;
}

.mob-theme-btn {
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.2);
    border-radius: var(--r-full);
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-c);
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--font-b);
}

    .mob-theme-btn .i-sun {
        display: none;
    }

    .mob-theme-btn .i-moon {
        display: inline;
    }

[data-theme="light"] .mob-theme-btn .i-sun {
    display: inline;
}

[data-theme="light"] .mob-theme-btn .i-moon {
    display: none;
}

/* Light theme overlay */
[data-theme="light"] .mobile-overlay {
    background: rgba(10,30,80,0.35);
}

[data-theme="light"] .mob-panel {
    background: rgba(255,255,255,0.98);
    border-left-color: rgba(26,127,255,0.12);
}

[data-theme="light"] .mob-link {
    color: var(--text-s);
}

    [data-theme="light"] .mob-link:hover {
        background: rgba(26,127,255,0.07);
        color: var(--blue-b);
    }

[data-theme="light"] .mob-sub-link {
    color: var(--text-m);
}

    [data-theme="light"] .mob-sub-link:hover {
        color: var(--blue-b);
    }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 0.85rem 2rem;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    font-size: 1rem;
    white-space: nowrap;
    line-height: 1;
}

.btn-primary {
    background: var(--grad-blue);
    color: #fff;
    box-shadow: var(--glow-bs);
}

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-b);
    }

.btn-orange {
    background: var(--grad-orng);
    color: #0A1220;
}

    .btn-orange:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-o);
    }

.btn-ghost {
    background: transparent;
    color: var(--text-s);
    border: 1.5px solid var(--border);
}

    .btn-ghost:hover {
        background: rgba(26,127,255,0.09);
        border-color: var(--blue-c);
        color: var(--text-h);
        transform: translateY(-2px);
    }

[data-theme="light"] .btn-ghost {
    color: #5c81a7;
    border-color: rgba(26,127,255,0.3);
}

    [data-theme="light"] .btn-ghost:hover {
        color: var(--text-h);
    }

/* ============================================================
   SECTION SYSTEM
   ============================================================ */
.section {
    padding: 6rem 0;
}

.bg-s1 {
    background: var(--bg-s1);
}

.bg-s2 {
    background: var(--bg-s2);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.25);
    border-radius: var(--r-full);
    padding: 0.28rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--blue-c);
    letter-spacing: 2px;
    /*text-transform: uppercase;*/
    margin-bottom: 0.85rem;
}

    .section-chip.orng {
        background: rgba(255,102,0,0.1);
        border-color: rgba(255,140,42,0.3);
        color: var(--orng-c);
    }

[data-theme="light"] .section-chip {
    color: var(--blue-b);
}

    [data-theme="light"] .section-chip.orng {
        color: var(--orng-b);
    }

.section-title {
    font-family: var(--font-d);
    font-size: clamp(1.9rem,3.5vw,2.7rem);
    font-weight: 700;
    color: var(--text-h);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.t-b {
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.t-o {
    background: var(--grad-orng);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-desc {
    color: var(--text-s);
    font-size: 1rem;
    line-height: 1.8;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bg-hero);
    padding-top: 80px;
}

#heroCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

.hero-orb-1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle,rgba(26,127,255,0.18) 0%,transparent 70%);
    filter: blur(70px);
    top: -120px;
    left: -100px;
    animation: orbFloat1 12s ease-in-out infinite;
}

.hero-orb-2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle,rgba(255,102,0,0.15) 0%,transparent 70%);
    filter: blur(70px);
    bottom: -100px;
    right: 8%;
    animation: orbFloat2 15s ease-in-out infinite;
}

.hero-orb-3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle,rgba(0,200,255,0.1) 0%,transparent 70%);
    filter: blur(60px);
    top: 35%;
    right: 28%;
    animation: orbFloat1 10s 3s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%,100% {
        transform: translate3d(0,0,0)
    }

    50% {
        transform: translate3d(16px,-16px,0)
    }
}

@keyframes orbFloat2 {
    0%,100% {
        transform: translate3d(0,0,0)
    }

    50% {
        transform: translate3d(-14px,12px,0)
    }
}

.hero-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    padding: 4rem 1.5rem;
    max-width: 1220px;
    margin: 0 auto;
    width: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(26,127,255,0.15);
    border: 1px solid rgba(26,127,255,0.35);
    border-radius: var(--r-full);
    padding: 0.38rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #80C4FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.6s ease both;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    background: #3FA0FF;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

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

    50% {
        opacity: 0.4;
        transform: scale(1.4)
    }
}

.hero-title {
    font-family: var(--font-d);
    font-size: clamp(2.2rem,5vw,4.2rem);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.08;
    margin-bottom: 1.2rem;
    animation: fadeUp 0.7s 0.1s ease both;
}

    .hero-title .line-b {
        display: block;
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-title .line-o {
        display: block;
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.hero-desc {
    font-size: 1.05rem;
    color: rgba(216,238,255,0.88);
    max-width: 520px;
    margin-bottom: 2rem;
    line-height: 1.8;
    animation: fadeUp 0.7s 0.2s ease both;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    animation: fadeUp 0.7s 0.3s ease both;
}

.hero-stats {
    display: flex;
    animation: fadeUp 0.7s 0.4s ease both;
}

.hero-stat {
    text-align: center;
    padding: 0 1.4rem;
    border-right: 1px solid rgba(26,127,255,0.2);
}

    .hero-stat:first-child {
        padding-left: 0;
    }

    .hero-stat:last-child {
        border-right: none;
    }

.stat-num {
    font-family: var(--font-t);
    font-size: 1.9rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-lbl {
    font-size: 0.68rem;
    color: rgba(150,192,224,0.8);
    margin-top: 0.2rem;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Hero right dashboard */
.hero-right {
    position: relative;
    animation: fadeRight 0.8s 0.3s ease both;
}

.hero-float-card {
    position: absolute;
    background: rgba(8,20,35,0.97);
    border: 1px solid rgba(26,127,255,0.28);
    border-radius: var(--r-md);
    padding: 0.6rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    font-size: 0.78rem;
    font-weight: 600;
    color: #96C0E0;
    white-space: nowrap;
    z-index: 2;
}

    .hero-float-card.card-tl {
        top: -18px;
        left: -38px;
        animation: fc1 4s ease-in-out infinite;
    }

    .hero-float-card.card-br {
        bottom: -18px;
        right: -28px;
        border-color: rgba(255,102,0,0.28);
        animation: fc2 5s ease-in-out infinite;
    }

@keyframes fc1 {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-9px)
    }
}

@keyframes fc2 {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(8px)
    }
}

.dashboard-frame {
    background: rgba(8,16,28,0.94);
    border: 1px solid rgba(26,127,255,0.2);
    border-radius: var(--r-xl);
    padding: 1.2rem;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6),0 0 60px rgba(26,127,255,0.07);
}

.db-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(26,127,255,0.1);
}

.db-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.db-dot-r {
    background: #FF5F57
}

.db-dot-y {
    background: #FEBC2E
}

.db-dot-g {
    background: #28C840
}

.db-title {
    font-family: var(--font-t);
    font-size: 0.6rem;
    color: #5888AA;
    margin-left: auto;
    letter-spacing: 1px;
}

.db-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.db-metric {
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
    padding: 0.8rem;
}

.db-metric-icon {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.db-metric-value {
    font-family: var(--font-t);
    font-size: 1.3rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}

    .db-metric-value.b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .db-metric-value.o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.db-metric-label {
    font-size: 0.65rem;
    color: #5888AA;
    margin-top: 0.12rem;
    font-weight: 600;
}

.db-bar-box, .db-notif-box {
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(26,127,255,0.1);
    border-radius: var(--r-md);
    padding: 0.8rem;
    margin-bottom: 0.7rem;
}

.db-notif-box {
    margin-bottom: 0;
}

.db-bar-title {
    font-size: 0.65rem;
    color: #5888AA;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.db-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

    .db-bar-row:last-child {
        margin-bottom: 0;
    }

.db-bar-label {
    font-size: 0.65rem;
    color: #96C0E0;
    width: 72px;
    flex-shrink: 0;
}

.db-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
}

.db-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.fill-b {
    background: var(--grad-blue);
}

.fill-o {
    background: var(--grad-orng);
}

.fill-t {
    background: linear-gradient(90deg,#00B4D8,#00E5B8);
}

.db-bar-pct {
    font-family: var(--font-t);
    font-size: 0.6rem;
    color: #5888AA;
    width: 26px;
    text-align: right;
}

.db-notif-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

    .db-notif-row:last-child {
        border: none;
        padding-bottom: 0;
    }

.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.notif-text {
    font-size: 0.68rem;
    color: #96C0E0;
    flex: 1;
}

.notif-time {
    font-size: 0.6rem;
    color: #5888AA;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-section {
    background: linear-gradient(90deg,rgba(26,127,255,0.07),rgba(255,102,0,0.07));
    border-top: 1px solid rgba(26,127,255,0.1);
    border-bottom: 1px solid rgba(26,127,255,0.1);
    padding: 0.9rem 0;
    overflow: hidden;
}

[data-theme="light"] .marquee-section {
    background: linear-gradient(90deg,rgba(26,127,255,0.05),rgba(255,102,0,0.05));
}

.marquee-track {
    display: flex;
    animation: marquee 32s linear infinite;
    width: max-content;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1.75rem;
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-m);
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 1px solid rgba(26,127,255,0.1);
}

    .marquee-item .mi-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--blue-c);
        flex-shrink: 0;
    }

@keyframes marquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/* ============================================================
   USP / FEATURE CARDS
   ============================================================ */
.usp-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.usp-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 2rem 1.5rem;
    transition: all var(--tr);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

    .usp-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--grad-blue);
        transform: scaleX(0);
        transition: transform var(--tr);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

    .usp-card:hover::before {
        transform: scaleX(1);
    }

    .usp-card:hover {
        border-color: rgba(26,127,255,0.35);
        transform: translateY(-6px);
        box-shadow: var(--shadow-l),var(--glow-bs);
    }

.usp-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.15rem;
    flex-shrink: 0;
}

    .usp-icon-wrap.b {
        background: rgba(26,127,255,0.12);
    }

    .usp-icon-wrap.o {
        background: rgba(255,102,0,0.12);
    }

    .usp-icon-wrap.t {
        background: rgba(0,180,200,0.12);
    }

.usp-title {
    font-family: var(--font-d);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.55rem;
}

.usp-desc {
    font-size: 0.88rem;
    color: var(--text-s);
    line-height: 1.72;
}

/* ============================================================
   MODULE CARDS
   ============================================================ */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.module-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: all var(--tr);
    text-decoration: none;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

    .module-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--grad-blue);
        transform: scaleX(0);
        transition: transform var(--tr);
    }

    .module-card:hover {
        border-color: rgba(26,127,255,0.35);
        transform: translateY(-4px);
        box-shadow: var(--shadow-l),var(--glow-bs);
    }

        .module-card:hover::after {
            transform: scaleX(1);
        }

.mc-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: rgba(26,127,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

    .mc-icon.o {
        background: rgba(255,102,0,0.1);
    }

    .mc-icon.t {
        background: rgba(0,180,200,0.1);
    }

.mc-title {
    font-family: var(--font-d);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-h);
}

.mc-desc {
    font-size: 0.77rem;
    color: var(--text-m);
    line-height: 1.6;
}

.mc-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--blue-c);
    margin-top: auto;
    transition: gap var(--tr);
}

.module-card:hover .mc-link {
    gap: 0.55rem;
}

[data-theme="light"] .mc-link {
    color: var(--blue-b);
}

.modules-cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* ============================================================
   FEATURES LAYOUT
   ============================================================ */
.features-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    transition: all var(--tr);
    box-shadow: var(--shadow);
}

    .benefit-item:hover {
        border-color: rgba(26,127,255,0.3);
        transform: translateX(5px);
    }

.bi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--grad-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

    .bi-icon.o {
        background: var(--grad-orng);
    }

.bi-title {
    font-family: var(--font-d);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.15rem;
}

.bi-desc {
    font-size: 0.8rem;
    color: var(--text-s);
}

.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--tr);
    box-shadow: var(--shadow);
}

    .metric-card:hover {
        border-color: rgba(26,127,255,0.3);
        transform: scale(1.025);
        box-shadow: var(--shadow-l);
    }

.metric-num {
    font-family: var(--font-t);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.3rem;
}

    .metric-num.b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .metric-num.o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.metric-lbl {
    font-size: 0.78rem;
    color: var(--text-m);
    font-weight: 600;
}

.tech-strip {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    padding: 0.9rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.tech-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-m);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .tech-badge::before {
        content: '✓';
        color: var(--blue-c);
        font-size: 0.88rem;
    }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.hiw-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    position: relative;
}

    .hiw-steps::before {
        content: '';
        position: absolute;
        top: 40px;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: linear-gradient(90deg,transparent,var(--blue-c),var(--orng-c),transparent);
    }

.hiw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.9rem;
}

.step-num {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 2px solid rgba(26,127,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-t);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--blue-c);
    background: var(--bg-s2);
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 1;
    transition: all var(--tr);
}

.hiw-step:hover .step-num {
    background: rgba(26,127,255,0.12);
    border-color: var(--blue-c);
    box-shadow: var(--glow-bs);
    color: var(--text-h);
}

.hiw-step:nth-child(even) .step-num {
    border-color: rgba(255,102,0,0.3);
    color: var(--orng-c);
}

.hiw-step:nth-child(even):hover .step-num {
    background: rgba(255,102,0,0.12);
    border-color: var(--orng-c);
    box-shadow: var(--glow-os);
}

.step-title {
    font-family: var(--font-d);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 0.45rem;
}

.step-desc {
    font-size: 0.84rem;
    color: var(--text-m);
    line-height: 1.6;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.testi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 2rem;
    transition: all var(--tr);
    position: relative;
    box-shadow: var(--shadow);
}

    .testi-card::before {
        content: '"';
        position: absolute;
        top: 0;
        right: 1.2rem;
        font-size: 5rem;
        color: rgba(26,127,255,0.07);
        font-family: Georgia,serif;
        line-height: 1.1;
    }

    .testi-card:hover {
        border-color: rgba(26,127,255,0.3);
        transform: translateY(-4px);
        box-shadow: var(--shadow-l);
    }

.testi-stars {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
}

.star {
    color: var(--orng-d);
    font-size: 0.95rem;
}

.testi-text {
    color: var(--text-s);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
    font-style: italic;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--grad-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-d);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

    .author-avatar.o {
        background: var(--grad-orng);
        color: #0A1220;
    }

.author-name {
    font-family: var(--font-d);
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text-h);
}

.author-role {
    font-size: 0.75rem;
    color: var(--text-m);
}

/* ============================================================
   CTA SECTION — always dark
   ============================================================ */
.cta-section {
    background: linear-gradient(145deg,#04090F 0%,#081422 55%,#05101E 100%);
    position: relative;
    overflow: hidden;
}

    .cta-section::before {
        content: '';
        position: absolute;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 700px;
        height: 350px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(26,127,255,0.14) 0%,transparent 70%);
    }

    .cta-section::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        height: 250px;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(255,102,0,0.1) 0%,transparent 70%);
    }

.cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

    .cta-inner .section-title, .cta-inner .section-title span {
        color: #F0F8FF !important;
        -webkit-text-fill-color: #F0F8FF !important;
    }

        .cta-inner .section-title .t-b {
            background: var(--grad-blue);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-clip: text;
        }

        .cta-inner .section-title .t-o {
            background: var(--grad-orng);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-clip: text;
        }

    .cta-inner .section-desc {
        color: rgba(216,238,255,0.82) !important;
    }

.cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   PAGE HERO — always dark
   ============================================================ */
.page-hero {
    min-height: 290px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(145deg,#06101E 0%,#0D2040 100%);
    padding: 7rem 0 3.8rem;
    position: relative;
    overflow: hidden;
}

.page-hero-orb {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(26,127,255,0.1) 0%,transparent 70%);
    pointer-events: none;
}

.page-hero-title {
    font-family: var(--font-d);
    font-size: clamp(2rem,4vw,3.1rem);
    font-weight: 700;
    color: #F0F8FF;
    line-height: 1.12;
}

    .page-hero-title .t-b {
        background: var(--grad-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .page-hero-title .t-o {
        background: var(--grad-orng);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-hero-desc {
    color: rgba(216,238,255,0.82);
    max-width: 540px;
    margin-top: 0.9rem;
}

.page-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(26,127,255,0.15);
    border: 1px solid rgba(26,127,255,0.35);
    border-radius: var(--r-full);
    padding: 0.32rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #80C4FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.4rem;
    box-shadow: var(--shadow);
}

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

.form-label {
    display: block;
    font-family: var(--font-d);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-s);
    letter-spacing: 0.5px;
    margin-bottom: 0.42rem;
}

.form-control {
    width: 100%;
    padding: 0.72rem 1rem;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-h);
    font-family: var(--font-b);
    font-size: 0.94rem;
    transition: all var(--tr);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

    .form-control:focus {
        border-color: var(--blue-c);
        box-shadow: 0 0 0 3px rgba(26,127,255,0.12);
    }

    .form-control::placeholder {
        color: var(--text-m);
    }

[data-theme="light"] .form-wrap {
    background: #FFFFFF;
    border-color: rgba(26,127,255,0.15);
}

[data-theme="light"] .form-control {
    background: #F8FBFF;
    color: #0D2040;
    border-color: rgba(26,127,255,0.2);
}

    [data-theme="light"] .form-control:focus {
        border-color: var(--blue-b);
        box-shadow: 0 0 0 3px rgba(26,127,255,0.1);
    }

    [data-theme="light"] .form-control::placeholder {
        color: #7A9AB8;
    }

[data-theme="light"] .form-label {
    color: var(--text-s);
}

select.form-control {
    cursor: pointer;
}

    select.form-control option {
        background: var(--bg-s2);
        color: var(--text-h);
    }

[data-theme="light"] select.form-control option {
    background: #FFFFFF;
    color: #0D2040;
}

textarea.form-control {
    min-height: 108px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-msg {
    display: block;
    padding: 0.8rem 1.1rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.15rem;
}

    .form-msg:empty {
        display: none;
        padding: 0;
        margin: 0;
        border: none;
    }

.msg-ok {
    background: rgba(0,200,100,0.1);
    border: 1px solid rgba(0,200,100,0.3);
    color: #00CC78;
}

.msg-err {
    background: rgba(255,70,60,0.1);
    border: 1px solid rgba(255,70,60,0.3);
    color: #FF4A3C;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.4rem 1.9rem;
    display: flex;
    flex-direction: column;
    transition: all var(--tr);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

    .pricing-card.popular {
        border-color: var(--blue-c);
        box-shadow: 0 0 36px rgba(26,127,255,0.14);
    }

    .pricing-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-l);
    }

.popular-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: var(--grad-blue);
    color: #fff;
    font-family: var(--font-t);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.22rem 0.7rem;
    border-radius: var(--r-full);
    letter-spacing: 1px;
}

.pricing-plan {
    font-family: var(--font-d);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-m);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.pricing-price {
    font-family: var(--font-t);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-h);
    line-height: 1;
    margin-bottom: 0.2rem;
}

    .pricing-price .curr {
        font-size: 1.35rem;
        vertical-align: top;
        margin-top: 0.28rem;
        display: inline-block;
    }

.pricing-period {
    font-size: 0.76rem;
    color: var(--text-m);
    margin-bottom: 1.4rem;
}

.pricing-desc {
    font-size: 0.87rem;
    color: var(--text-s);
    margin-bottom: 1.6rem;
    line-height: 1.6;
}

.pricing-features {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    margin-bottom: 1.8rem;
    flex: 1;
}

    .pricing-features li {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.85rem;
        color: var(--text-s);
    }

        .pricing-features li::before {
            content: '✓';
            color: var(--blue-c);
            font-weight: 700;
            flex-shrink: 0;
        }

        .pricing-features li.no {
            color: var(--text-m);
            opacity: 0.55;
        }

            .pricing-features li.no::before {
                content: '✗';
            }

.pricing-cta {
    margin-top: auto;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--tr);
    box-shadow: var(--shadow);
}

    .faq-item.open {
        border-color: rgba(26,127,255,0.38);
    }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-d);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-p);
    text-align: left;
    transition: color var(--tr);
}

    .faq-question:hover {
        color: var(--blue-c);
    }

[data-theme="light"] .faq-question {
    color: var(--text-h);
}

    [data-theme="light"] .faq-question:hover {
        color: var(--blue-b);
    }

.faq-arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(26,127,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--blue-c);
    transition: transform var(--tr),background var(--tr);
}

.faq-item.open .faq-arrow {
    transform: rotate(180deg);
    background: var(--blue-b);
    color: #fff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s ease;
}

.faq-answer-inner {
    padding: 0 1.4rem 1.2rem;
    color: var(--text-s);
    font-size: 0.92rem;
    line-height: 1.8;
}

.faq-item.open .faq-answer {
    max-height: 500px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: var(--bg-footer);
    border-top: 1px solid rgba(26,127,255,0.1);
}

.footer-top {
    padding: 4rem 0 3rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

    .footer-logo-wrap img {
        height: 55px;
    }

.footer-logo-dark {
    display: block;
}

.footer-logo-light {
    display: none;
}

[data-theme="light"] .footer-logo-dark {
    display: none;
}

[data-theme="light"] .footer-logo-light {
    display: block;
}

.footer-brand-nm {
    font-family: var(--font-d);
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--grad-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand-sb {
    font-size: 0.6rem;
    color: #4A6A88;
    letter-spacing: 0.5px;
    display: block;
    margin-top: 0.1rem;
}

.footer-desc {
    font-size: 0.85rem;
    color: #a3c4e3;
    line-height: 1.72;
    max-width: 295px;
    margin-bottom: 1.2rem;
}

.footer-social {
    display: flex;
    gap: 0.55rem;
}

.social-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: rgba(26,127,255,0.08);
    border: 1px solid rgba(26,127,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-family: var(--font-d);
    font-weight: 700;
    color: #a3c4e3;
    cursor: pointer;
    transition: all var(--tr);
    text-decoration: none;
    letter-spacing: 0;
}

    .social-btn:hover {
        background: rgba(26,127,255,0.2);
        border-color: var(--blue-c);
        color: #fff;
        transform: translateY(-2px);
    }

.footer-col-title {
    font-family: var(--font-d);
    font-size: 0.78rem;
    font-weight: 700;
    color: #F0F8FF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.15rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

    .footer-links a {
        font-size: 0.85rem;
        color: #a3c4e3;
        transition: all var(--tr);
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

        .footer-links a:hover {
            color: #80C4FF;
            padding-left: 0.3rem;
        }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.fc-item {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.fc-icon {
    font-size: 0.88rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.fc-text {
    font-size: 0.83rem;
    color: #a3c4e3;
    line-height: 1.5;
}

    .fc-text a {
        color: #a3c4e3;
        transition: color var(--tr);
    }

        .fc-text a:hover {
            color: #80C4FF;
        }

.footer-bottom {
    padding: 1.15rem 0;
    border-top: 1px solid rgba(26,127,255,0.08);
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-copy {
    font-size: 0.78rem;
    color: #a3c4e3;
}

.footer-cin {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.58);
}

    .footer-cin a {
        color: #3FA0FF;
        transition: color var(--tr);
    }

        .footer-cin a:hover {
            color: #80C4FF;
        }

/* ISO Certificates */
.footer-iso-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1.4rem;
    max-width: 345px;
}
/* Dropdown arrow fix */

.iso-badge {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(26,127,255,0.14);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: all var(--tr);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none; /* add this */
}

    .iso-badge:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(26,127,255,0.38);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(26,127,255,0.12);
    }

    .iso-badge img {
        width: 38px;
        height: 38px;
        object-fit: cover;
        object-position: left center;
        flex-shrink: 0;
    }

.iso-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.iso-code {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-d);
    color: #80C4FF;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.iso-name {
    font-size: 0.6rem;
    color: #a3c4e3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   SCROLL TOP
   ============================================================ */
.scroll-top {
    position: fixed;
    bottom: 85px;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad-blue);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
    box-shadow: var(--glow-bs);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all var(--tr);
    z-index: 100;
}

    .scroll-top.visible {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    .scroll-top:hover {
        transform: translateY(-3px);
        box-shadow: var(--glow-b);
    }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(36px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

    .reveal.visible, .reveal-left.visible, .reveal-right.visible {
        opacity: 1;
        transform: none;
    }

.delay-1 {
    transition-delay: 0.1s
}

.delay-2 {
    transition-delay: 0.2s
}

.delay-3 {
    transition-delay: 0.3s
}

.delay-4 {
    transition-delay: 0.4s
}

.delay-5 {
    transition-delay: 0.5s
}

.delay-6 {
    transition-delay: 0.6s
}

.wa-float-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    border-radius: 50px;
    padding: 12px 20px 12px 14px;
    font-size: 14px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .wa-float-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.55);
        color: #fff;
        text-decoration: none;
    }

    .wa-float-btn svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

/* ============================================================
   RESPONSIVE — 1280px
   ============================================================ */
@media(max-width:1280px) {
    .footer-top {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 2rem;
    }

    .modules-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .hero-title {
        font-size: clamp(2.4rem,4vw,3.8rem);
    }
}

/* ============================================================
   RESPONSIVE — 1100px
   ============================================================ */
@media(max-width:1100px) {
    .modules-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .usp-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .testi-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(3,1fr);
        gap: 1rem;
    }

    .pricing-card {
        padding: 1.8rem 1.4rem;
    }

    .hiw-steps::before {
        display: none;
    }
}

/* ============================================================
   RESPONSIVE — 900px  (main mobile trigger)
   ============================================================ */
@media(max-width:900px) {
    /* Navbar */
    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .nav-logo {
        height: 48px;
    }

    .btn-nav-demo {
        font-size: 0.8rem;
        padding: 0.42rem 0.9rem;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .nav-right {
        gap: 0.4rem;
    }

    /* Mob panel wider on tablet */
    .mob-panel {
        width: 320px;
    }

    /* Hero */
    .hero-container {
        grid-template-columns: 1fr;
        padding: 3rem 1.5rem;
    }

    .hero-right {
        display: none;
    }

    .hero-title {
        font-size: clamp(2.2rem,5vw,3rem);
    }

    /* Grids */
    .usp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .modules-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .features-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .features-right {
        display: none;
    }

    .hiw-steps {
        grid-template-columns: 1fr 1fr;
    }

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

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

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-iso-row {
        max-width: 100%;
        grid-template-columns: repeat(4,1fr);
    }

    .footer-logo-wrap img {
        height: 46px;
    }
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media(max-width:768px) {
    .section {
        padding: 4rem 0;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }

    .page-hero {
        min-height: 200px;
        padding: 5.5rem 0 2.5rem;
    }

    .page-hero-title {
        font-size: clamp(1.7rem,5vw,2.4rem);
    }

    .hero-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.8rem;
    }

    .hero-cta {
        gap: 0.75rem;
    }

        .hero-cta .btn {
            padding: 0.75rem 1.5rem;
            font-size: 0.92rem;
        }

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

    .hero-stat {
        border-right: none;
        padding: 0 0.8rem;
    }

        .hero-stat:first-child {
            padding-left: 0;
        }

    .modules-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 0.85rem;
    }

    .module-card {
        padding: 1.1rem;
    }

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

    .hiw-steps {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

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

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
        padding: 2.5rem 0 2rem;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2,1fr);
        max-width: 100%;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.3rem;
    }

    .iso-badge img {
        width: 30px;
        height: 30px;
    }

    .iso-code {
        font-size: 0.6rem;
    }

    .iso-name {
        font-size: 0.55rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-wrap {
        padding: 1.8rem 1.4rem;
    }

    .cta-btns {
        flex-direction: column;
        align-items: center;
    }
}
/* ============================================================
   HERO — Small Device Fixes
   ============================================================ */

/* ── 768px ── */
@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding-top: 75px;
        padding-bottom: 2rem;
        align-items: flex-start;
    }

    .hero-container {
        padding: 2.5rem 1.25rem 2rem;
        gap: 0;
    }

    .hero-badge {
        font-size: 0.68rem;
        padding: 0.28rem 0.75rem;
        letter-spacing: 1px;
        margin-bottom: 1.1rem;
        white-space: normal;
        line-height: 1.4;
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(1.85rem, 7vw, 2.6rem);
        margin-bottom: 1rem;
    }

    .hero-desc {
        font-size: 0.92rem;
        margin-bottom: 1.5rem;
        line-height: 1.75;
    }

    .hero-cta {
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 2rem;
    }

        .hero-cta .btn {
            width: 100%;
            justify-content: center;
            padding: 0.85rem 1.5rem;
        }

    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        flex-wrap: unset;
    }

    .hero-stat {
        border-right: none !important;
        border: 1px solid rgba(26,127,255,0.15);
        border-radius: var(--r-md);
        padding: 0.6rem 0.75rem !important;
        background: rgba(26,127,255,0.05);
        text-align: center;
    }

    .stat-num {
        font-size: 1.5rem !important;
    }

    .stat-lbl {
        font-size: 0.65rem;
    }
}

/* ── 480px ── */
@media (max-width: 480px) {
    .hero {
        padding-top: 68px;
    }

    .hero-container {
        padding: 2rem 1rem 1.75rem;
    }

    .hero-badge {
        font-size: 0.63rem;
        padding: 0.25rem 0.65rem;
        letter-spacing: 0.8px;
        margin-bottom: 0.9rem;
    }

    .hero-title {
        font-size: clamp(1.65rem, 8vw, 2.1rem);
        margin-bottom: 0.85rem;
        line-height: 1.1;
    }

    .hero-desc {
        font-size: 0.88rem;
        margin-bottom: 1.35rem;
        line-height: 1.7;
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .stat-num {
        font-size: 1.35rem !important;
    }

    .stat-lbl {
        font-size: 0.62rem;
        margin-top: 0.15rem;
    }
}

/* ── 375px ── */
@media (max-width: 375px) {
    .hero {
        padding-top: 64px;
    }

    .hero-container {
        padding: 1.75rem 0.9rem 1.5rem;
    }

    .hero-badge {
        font-size: 0.6rem;
        padding: 0.22rem 0.6rem;
        letter-spacing: 0.6px;
        margin-bottom: 0.8rem;
        display: flex;
        flex-wrap: wrap;
        line-height: 1.5;
    }

    .hero-title {
        font-size: clamp(1.55rem, 8.5vw, 1.9rem);
        margin-bottom: 0.75rem;
    }

    .hero-desc {
        font-size: 0.84rem;
        margin-bottom: 1.2rem;
    }

    .hero-cta .btn {
        font-size: 0.88rem;
        padding: 0.78rem 1.2rem;
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .stat-num {
        font-size: 1.25rem !important;
    }

    .stat-lbl {
        font-size: 0.6rem;
    }
}

/* ── 320px ── */
@media (max-width: 320px) {
    .hero-container {
        padding: 1.5rem 0.75rem;
    }

    .hero-badge {
        font-size: 0.56rem;
    }

    .hero-title {
        font-size: 1.45rem;
    }

    .hero-desc {
        font-size: 0.82rem;
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .stat-num {
        font-size: 1.15rem !important;
    }
}

/* ============================================================
   RESPONSIVE — 640px
   ============================================================ */
@media(max-width:640px) {
    .nav-logo {
        height: 42px;
    }

    .btn-nav-demo {
        display: none;
    }

    .hero-title {
        font-size: clamp(1.9rem,7vw,2.6rem);
    }

    .hero-desc {
        font-size: 0.95rem;
    }

    .hero-cta {
        flex-direction: column;
    }

        .hero-cta .btn {
            width: 100%;
            justify-content: center;
        }

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

    .modules-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .hiw-steps {
        grid-template-columns: 1fr;
    }

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

    .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-desc {
        max-width: 100%;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2,1fr);
    }

    .footer-logo-wrap img {
        height: 40px;
    }

    .pricing-card {
        padding: 1.8rem 1.4rem;
    }

    .section {
        padding: 3.5rem 0;
    }

    .page-hero-title {
        font-size: clamp(1.6rem,5.5vw,2.2rem);
    }

    .scroll-top {
        bottom: 1.2rem;
        right: 1.2rem;
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media(max-width:480px) {
    .container {
        padding: 0 1rem;
    }

    .nav-logo {
        height: 38px;
    }

    .nav-container {
        gap: 0.4rem;
    }

    .nav-right {
        gap: 0.3rem;
    }

    .theme-toggle {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .hero-title {
        font-size: clamp(1.75rem,8vw,2.3rem);
    }

    .stat-num {
        font-size: 1.5rem !important;
    }

    .modules-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 0.7rem;
    }

    .module-card {
        padding: 1rem;
        gap: 0.5rem;
    }

    .mc-title {
        font-size: 0.85rem;
    }

    .mc-desc {
        display: none;
    }

    .mc-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .usp-card {
        padding: 1.4rem 1.1rem;
    }

    .footer-iso-row {
        grid-template-columns: repeat(2,1fr);
        gap: 0.4rem;
    }

    .iso-badge {
        padding: 0.4rem 0.45rem;
        gap: 0.3rem;
    }

        .iso-badge img {
            width: 26px;
            height: 26px;
        }

    .iso-code {
        font-size: 0.56rem;
    }

    .iso-name {
        display: none;
    }

    .footer-copy, .footer-cin {
        font-size: 0.7rem;
        text-align: center;
    }

    .form-wrap {
        padding: 1.4rem 1rem;
    }

    .form-control {
        font-size: 0.88rem;
        padding: 0.65rem 0.85rem;
    }

    .faq-question {
        font-size: 0.9rem;
        padding: 1rem 1.1rem;
    }

    .faq-answer-inner {
        padding: 0 1.1rem 1rem;
        font-size: 0.86rem;
    }

    .btn {
        padding: 0.78rem 1.4rem;
        font-size: 0.9rem;
    }

    .pricing-price {
        font-size: 2rem;
    }

    .section {
        padding: 3rem 0;
    }

    .section-title {
        font-size: clamp(1.55rem,5.5vw,2.1rem);
    }

    .page-hero {
        min-height: 175px;
        padding: 5rem 0 2rem;
    }
}

/* ============================================================
   RESPONSIVE — 375px  (small phones)
   ============================================================ */
@media(max-width:375px) {
    .nav-logo {
        height: 34px;
    }

    .hero-title {
        font-size: 1.7rem;
    }

    .section-title {
        font-size: 1.45rem;
    }

    .modules-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .module-card {
        padding: 0.85rem;
    }

    .mc-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .mc-title {
        font-size: 0.8rem;
    }

    .footer-logo-wrap img {
        height: 34px;
    }

    .iso-badge img {
        width: 22px;
        height: 22px;
    }

    .btn {
        padding: 0.7rem 1.1rem;
        font-size: 0.85rem;
    }

    .mob-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        border-left: none !important;
    }
}

/* ============================================================
   CONTACT.ASPX — Complete Styles + Responsive
   ============================================================ */

/* Fix undefined CSS variables used in Contact.aspx inline style */
:root,
[data-theme="dark"] {
    --card-bg: var(--bg-card);
    --glass-border: rgba(26,127,255,0.18);
    --radius-xl: var(--r-xl);
    --radius-md: var(--r-md);
    --text-primary: var(--text-h);
    --text-secondary: var(--text-s);
    --blue-400: var(--blue-c);
    --font-display: var(--font-d);
    --font-body: var(--font-b);
}

[data-theme="light"] {
    --card-bg: #FFFFFF;
    --glass-border: rgba(26,127,255,0.15);
    --text-primary: var(--text-h);
    --text-secondary: var(--text-s);
    --blue-400: var(--blue-b);
}

/* ── Contact grid (replaces inline style) ─────────────────── */
.contact-section-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
}

/* ── Contact Info column ──────────────────────────────────── */
.contact-info-col .usp-title {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--text-h);
}

.contact-info-col .footer-contact {
    gap: 1.25rem;
}

.contact-info-col .fc-item {
    padding: 1rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-md);
    border-left: 3px solid var(--blue-c);
    transition: all var(--tr);
    gap: 0.85rem;
    align-items: flex-start;
}

    .contact-info-col .fc-item:hover {
        border-left-color: var(--orng-c);
        transform: translateX(4px);
        box-shadow: var(--shadow);
    }

.contact-info-col .fc-icon {
    font-size: 1.2rem !important;
    margin-top: 0.15rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.contact-info-col .fc-text {
    font-size: 0.88rem;
    color: var(--text-s);
    line-height: 1.65;
}

    .contact-info-col .fc-text strong {
        display: block;
        color: var(--text-h);
        font-weight: 700;
        font-family: var(--font-d);
        font-size: 0.9rem;
        margin-bottom: 0.2rem;
        letter-spacing: 0.3px;
    }

    .contact-info-col .fc-text a {
        color: var(--blue-c);
        transition: color var(--tr);
    }

        .contact-info-col .fc-text a:hover {
            color: var(--blue-d);
        }

/* Light theme info col */
[data-theme="light"] .contact-info-col .fc-item {
    background: #fff;
    box-shadow: 0 2px 12px rgba(10,40,100,0.07);
}

[data-theme="light"] .contact-info-col .fc-text {
    color: var(--text-s);
}

    [data-theme="light"] .contact-info-col .fc-text strong {
        color: var(--text-h);
    }

    [data-theme="light"] .contact-info-col .fc-text a {
        color: var(--blue-b);
    }

/* ── Contact Form Wrap ────────────────────────────────────── */
.contact-form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 2.2rem;
    box-shadow: var(--shadow);
}

    .contact-form-wrap .usp-title {
        font-size: 1.4rem;
        color: var(--text-h);
        margin-bottom: 0.4rem !important;
    }

    /* Form controls — override the inline style block */
    .contact-form-wrap .form-group {
        margin-bottom: 1.15rem;
    }

    .contact-form-wrap .form-label {
        display: block;
        font-family: var(--font-d);
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--text-s);
        letter-spacing: 0.5px;
        margin-bottom: 0.45rem;
    }

    .contact-form-wrap .form-control {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--bg-input);
        border: 1.5px solid var(--border);
        border-radius: var(--r-md);
        color: var(--text-h);
        font-family: var(--font-b);
        font-size: 0.94rem;
        transition: all var(--tr);
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
    }

        .contact-form-wrap .form-control:focus {
            border-color: var(--blue-c);
            box-shadow: 0 0 0 3px rgba(26,127,255,0.12);
            background: var(--bg-input);
        }

        .contact-form-wrap .form-control::placeholder {
            color: var(--text-m);
            opacity: 1;
        }

    .contact-form-wrap textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }

    /* Submit button */
    .contact-form-wrap .btn {
        margin-top: 0.5rem;
        width: 100% !important;
        justify-content: center;
        display: flex;
    }

    /* form-row inside form wrap */
    .contact-form-wrap .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 0;
    }

    /* Success/error message */
    .contact-form-wrap .form-msg {
        display: block;
        padding: 0.8rem 1.1rem;
        border-radius: var(--r-md);
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 1.15rem;
    }

        .contact-form-wrap .form-msg:empty {
            display: none;
        }

/* Light theme form */
[data-theme="light"] .contact-form-wrap {
    background: #FFFFFF;
    border-color: rgba(26,127,255,0.14);
    box-shadow: 0 4px 24px rgba(10,40,100,0.08);
}

    [data-theme="light"] .contact-form-wrap .form-control {
        background: #F8FBFF;
        color: #0D2040;
        border-color: rgba(26,127,255,0.2);
    }

        [data-theme="light"] .contact-form-wrap .form-control:focus {
            border-color: var(--blue-b);
            box-shadow: 0 0 0 3px rgba(26,127,255,0.1);
        }

        [data-theme="light"] .contact-form-wrap .form-control::placeholder {
            color: #7A9AB8;
        }

    [data-theme="light"] .contact-form-wrap .form-label {
        color: var(--text-s);
    }

/* ── page-hero-title on Contact.aspx ─────────────────────── */
.page-hero-title .line-o {
    background: var(--grad-orng);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── RESPONSIVE: 900px ────────────────────────────────────── */
@media (max-width: 900px) {
    .contact-section-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Info cards take full width */
    .contact-info-col .footer-contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem;
    }

    .contact-info-col .fc-item:hover {
        transform: translateY(-2px) translateX(0);
    }

    .contact-form-wrap {
        padding: 1.8rem;
    }
}

/* ── RESPONSIVE: 768px ────────────────────────────────────── */
@media (max-width: 768px) {
    .contact-section-grid {
        gap: 1.8rem;
    }

    .contact-info-col .footer-contact {
        grid-template-columns: 1fr;
    }

    .contact-form-wrap {
        padding: 1.5rem;
    }

        .contact-form-wrap .form-row {
            grid-template-columns: 1fr;
            gap: 0;
        }
}

/* ── RESPONSIVE: 640px ────────────────────────────────────── */
@media (max-width: 640px) {
    .contact-form-wrap {
        padding: 1.2rem;
        border-radius: var(--r-lg);
    }

        .contact-form-wrap .usp-title {
            font-size: 1.2rem;
        }

    .contact-info-col .usp-title {
        font-size: 1.2rem;
    }

    .contact-form-wrap .form-control {
        font-size: 0.88rem;
        padding: 0.65rem 0.85rem;
    }

    .contact-form-wrap .btn {
        font-size: 0.92rem;
        padding: 0.78rem 1.5rem;
    }
}

/* ── RESPONSIVE: 480px ────────────────────────────────────── */
@media (max-width: 480px) {
    .contact-form-wrap {
        padding: 1rem;
    }

    .contact-info-col .fc-item {
        padding: 0.85rem 1rem;
    }

    .contact-info-col .fc-icon {
        font-size: 1rem !important;
    }

    .contact-info-col .fc-text {
        font-size: 0.84rem;
    }

    .contact-form-wrap .form-control {
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }

    .contact-form-wrap .form-group {
        margin-bottom: 0.9rem;
    }

    .contact-form-wrap .form-label {
        font-size: 0.78rem;
    }
}


/* ============================================================
   FOOTER — Professional Redesign Additions
   APPEND THIS ENTIRE BLOCK TO THE END OF styles.css
   Uses existing CSS variables — safe at global stylesheet level
   ============================================================ */

/* ── Gradient accent line (replaces old border-top) ── */
.footer {
    border-top: none; /* override */
    position: relative;
    overflow: hidden;
}

    /* Ambient glow overlays */
    .footer::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 65% 40% at 8% 18%, rgba(26,127,255,0.05) 0%, transparent 60%), radial-gradient(ellipse 45% 30% at 92% 82%, rgba(255,102,0,0.04) 0%, transparent 55%);
        pointer-events: none;
        z-index: 0;
    }

    .footer > * {
        position: relative;
        z-index: 1;
    }

.footer-accent-line {
    height: 3px;
    background: linear-gradient(90deg, var(--blue-b) 0%, #00C8FF 35%, var(--orng-b) 68%, var(--orng-d) 100%);
    position: relative;
    z-index: 2;
}

    .footer-accent-line::after {
        content: '';
        position: absolute;
        inset: 0;
        background: inherit;
        filter: blur(8px);
        opacity: 0.55;
        z-index: -1;
        transform: translateY(2px);
    }

/* ── Pre-footer CTA band ── */
.footer-cta-band {
    padding: 2.2rem 0;
    border-bottom: 1px solid rgba(26,127,255,0.1);
    background: linear-gradient(135deg, rgba(26,127,255,0.07) 0%, rgba(0,200,255,0.03) 50%, rgba(255,102,0,0.05) 100%);
    position: relative;
    z-index: 1;
}

    .footer-cta-band::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient( 90deg, rgba(26,127,255,0.015) 0px, rgba(26,127,255,0.015) 1px, transparent 1px, transparent 80px );
        pointer-events: none;
    }

.footer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
}

.footer-cta-text-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.footer-cta-headline {
    font-family: var(--font-d);
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--text-h);
    margin: 0;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

/* footer is always dark, so force white text */
.footer .footer-cta-headline {
    color: #F0F8FF;
}

.footer-cta-subline {
    font-size: 0.87rem;
    color: #6A8FAD;
    margin: 0;
}

.footer-cta-btns {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Orange primary button */
.footer-cta-btn-a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.68rem 1.5rem;
    background: linear-gradient(135deg, #FF6600, #FFB800);
    color: #0A1220;
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: var(--r-full);
    text-decoration: none;
    transition: all var(--tr);
    box-shadow: 0 3px 16px rgba(255,102,0,0.3);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

    .footer-cta-btn-a:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(255,102,0,0.42);
        color: #0A1220;
    }

/* Ghost outline button */
.footer-cta-btn-b {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.4rem;
    background: transparent;
    color: #80C4FF;
    font-family: var(--font-d);
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: var(--r-full);
    text-decoration: none;
    border: 1.5px solid rgba(26,127,255,0.32);
    transition: all var(--tr);
    white-space: nowrap;
}

    .footer-cta-btn-b:hover {
        background: rgba(26,127,255,0.1);
        border-color: rgba(26,127,255,0.65);
        color: #BDE0FF;
        transform: translateY(-2px);
    }

/* ── Enhanced footer-top spacing ── */
.footer-top {
    padding-top: 3.5rem; /* override the 4rem default */
}

/* ── Social buttons — upgraded ── */
.social-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(26,127,255,0.08);
    border: 1px solid rgba(26,127,255,0.18);
    color: #6A8FAD;
    position: relative;
    overflow: hidden;
}

    .social-btn:hover {
        background: rgba(26,127,255,0.2);
        border-color: var(--blue-c);
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(26,127,255,0.25);
    }

/* ── ISO label ── */
.footer-iso-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #3A5A78;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 1.4rem 0 0.6rem;
}

/* ── ISO badges — enhanced ── */
.footer-iso-row {
    margin-top: 0; /* footer-iso-label now provides the top gap */
}

.iso-badge {
    background: rgba(26,127,255,0.04);
    border: 1px solid rgba(26,127,255,0.12);
    border-left: 2px solid rgba(26,127,255,0.5);
}

    .iso-badge:hover {
        background: rgba(26,127,255,0.09);
        border-left-color: var(--blue-b);
        border-color: rgba(26,127,255,0.28);
        transform: translateY(-2px);
        box-shadow: 0 5px 16px rgba(26,127,255,0.11);
    }

/* ── Column headings — glow accent line ── */
.footer-col-title::after {
    box-shadow: 0 0 8px rgba(26,127,255,0.55);
}

/* ── Nav link arrow animation (pure CSS) ── */
.footer-links a {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.035);
    gap: 0;
}

.footer-links li:last-child a {
    border-bottom: none;
}

.footer-links a::before {
    content: '\203A';
    color: var(--blue-b);
    font-size: 1.05rem;
    line-height: 1;
    width: 0;
    margin-right: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition: all var(--tr);
    display: inline-block;
    overflow: hidden;
}

.footer-links a:hover::before {
    opacity: 1;
    width: 14px;
    margin-right: 0.2rem;
    transform: translateX(0);
}

.footer-links a:hover {
    color: #9DCFFF;
    padding-left: 0.1rem;
}

/* ── Contact items — icon as tile ── */
.footer-contact {
    gap: 0;
}

.fc-item {
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.035);
    transition: padding-left var(--tr);
    gap: 0.7rem;
}

    .fc-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .fc-item:hover {
        padding-left: 0.18rem;
    }

.fc-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: rgba(26,127,255,0.1);
    border: 1px solid rgba(26,127,255,0.18);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    line-height: 1;
    text-align: center;
    margin-top: 0.1rem;
    flex-shrink: 0;
    opacity: 1; /* override old 0.8 */
}

/* Region label replaces inline var(--blue-400) style */
.fc-region-label {
    display: block;
    color: #3FA0FF;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--font-d);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

/* ── Footer bottom — tighter ── */
.footer-bottom-inner {
    padding: 0;
}

.footer-copy {
    color: #6A8FAD;
}

/* ── Responsive additions for CTA band ── */
@media (max-width: 900px) {
    .footer-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }
}

@media (max-width: 768px) {
    .footer-cta-band {
        padding: 1.6rem 0;
    }

    .footer .footer-cta-headline {
        font-size: 1.08rem;
    }
}

@media (max-width: 640px) {
    .footer-cta-btns {
        flex-direction: column;
        width: 100%;
    }

    .footer-cta-btn-a, .footer-cta-btn-b {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer-cta-band {
        padding: 1.2rem 0;
    }
}