/* ══════════════════════════════
       TOKENS — AIRU Brand System v1
    ══════════════════════════════ */
    :root {
      --navy:   #0F1A2E;
      --navy2:  #162035;
      --sky:    #1B98E0;
      --sky2:   #3aabee;
      --amber:  #F0A500;
      --amber2: #ffb81c;
      --cloud:  #F7F8FA;
      --ink:    #1A1A2E;
      --muted:  rgba(247,248,250,0.5);
      --border: rgba(247,248,250,0.1);
      --font-d: 'Plus Jakarta Sans', system-ui, sans-serif;
      --font-b: 'DM Sans', system-ui, sans-serif;
      --font-m: 'JetBrains Mono', monospace;
      --ease:   cubic-bezier(0.22, 1, 0.36, 1);
      --shadow: 0 4px 32px rgba(15,26,46,0.4);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; cursor: none; }
    body {
      font-family: var(--font-b);
      background: var(--cloud);
      color: var(--ink);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; cursor: none; }
    img { display: block; max-width: 100%; }
    button { font-family: var(--font-b); cursor: none; }

    /* WIND LOGO ANIMATION */

    /* GRAIN */
    body::after {
      content: '';
      position: fixed; inset: 0; z-index: 1001; pointer-events: none; opacity: 0.018;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 150px;
    }

    /* CURSOR */
    #cdot, #cring {
      position: fixed; border-radius: 50%; pointer-events: none; z-index: 9999;
      top: 0; left: 0; /* anchor at origin — move via transform only */
      will-change: transform;
    }
    #cdot { width: 7px; height: 7px; background: var(--navy); transition: width .15s, height .15s, background .2s; }
    #cring { width: 32px; height: 32px; border: 1.5px solid rgba(27,152,224,0.5); transition: width .3s, height .3s, border-color .3s; }
    .dark-section #cdot { background: var(--cloud); }
    body.ch #cdot { width: 11px; height: 11px; background: var(--amber); }
    body.ch #cring { width: 50px; height: 50px; border-color: var(--amber); }

    /* REVEAL */
    .r { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
    .r.d1{transition-delay:.1s} .r.d2{transition-delay:.2s} .r.d3{transition-delay:.3s} .r.d4{transition-delay:.4s}
    .r.on { opacity: 1; transform: none; }

    /* ══════ NAV ══════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 500;
      background: var(--navy);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 52px; height: 68px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .nav-logo {
      display: flex; align-items: center;
      font-family: var(--font-d); font-size: 1.3rem; font-weight: 800;
      color: var(--cloud); letter-spacing: 0px;
      position: relative; overflow: hidden; padding: 6px 2px;
    }
    .nav-logo svg.wind-nav {
      position: absolute; inset: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 0;
    }
    .nav-logo span { position: relative; z-index: 1; }
    .logo-a {
      width: 30px; height: 30px;
    }
    .nav-links { display: flex; gap: 32px; list-style: none; }
    .nav-links a { font-family: var(--font-d); font-size: 0.82rem; font-weight: 500; color: rgba(247,248,250,0.6); letter-spacing: .3px; transition: color .2s; }
    .nav-links a:hover { color: var(--cloud); }
    .nav-cta {
      background: var(--amber); color: var(--navy);
      padding: 10px 22px; border-radius: 100px;
      font-family: var(--font-d); font-size: 0.8rem; font-weight: 700;
      letter-spacing: .3px; text-transform: uppercase;
      transition: background .2s, transform .2s;
    }
    .nav-cta:hover { background: var(--amber2); transform: scale(1.03); }
    @media (max-width: 768px) { nav { padding: 0 20px; } .nav-links { display: none; } }

    /* ══════ HERO ══════ */
    .hero {
      min-height: 100svh;
      background: var(--navy);
      display: flex; flex-direction: column; justify-content: center;
      position: relative; overflow: hidden;
      padding: 100px 52px 80px;
    }

    /* Airflow lines */
    .airflow {
      position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    }
    .afl {
      position: absolute; height: 1.5px;
      background: linear-gradient(90deg, transparent, rgba(27,152,224,0.55), rgba(27,152,224,0.2), transparent);
      animation: airMove linear infinite;
    }
    /* Amber accent line */
    .afl:nth-child(2) {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(240,165,0,0.4), transparent);
    }
    .afl:nth-child(1){top:18%;width:55%;left:-55%;animation-duration:7s;animation-delay:0s;opacity:1}
    .afl:nth-child(2){top:35%;width:38%;left:-38%;animation-duration:9s;animation-delay:2s;opacity:1}
    .afl:nth-child(3){top:52%;width:65%;left:-65%;animation-duration:8s;animation-delay:1s;opacity:1}
    .afl:nth-child(4){top:68%;width:44%;left:-44%;animation-duration:11s;animation-delay:3.5s;opacity:1}
    .afl:nth-child(5){top:82%;width:50%;left:-50%;animation-duration:9s;animation-delay:1.8s;opacity:1}

    /* Amber glow bottom */
    .hero-glow {
      position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%);
      width: 700px; height: 300px; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(240,165,0,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; width: 100%; }

    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(27,152,224,0.12); border: 1px solid rgba(27,152,224,0.25);
      color: var(--sky2); font-family: var(--font-d);
      font-size: 0.68rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
      padding: 7px 16px; border-radius: 100px; margin-bottom: 32px;
    }
    .bdot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 8px var(--sky); animation: blink 2s infinite; }

    .hero-h1 {
      font-family: var(--font-d); font-weight: 800;
      font-size: clamp(3.5rem, 9vw, 8rem);
      line-height: 0.95; letter-spacing: -2px;
      color: var(--cloud); margin-bottom: 28px;
    }
    .h1-amber { color: var(--amber); }

    .hero-sub {
      font-family: var(--font-b); font-weight: 300;
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: rgba(247,248,250,0.55); max-width: 560px; line-height: 1.75;
      margin-bottom: 44px;
    }

    .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .btn-amber {
      background: var(--amber); color: var(--navy); border: none;
      padding: 16px 36px; border-radius: 100px;
      font-family: var(--font-d); font-weight: 700; font-size: 0.9rem;
      text-transform: uppercase; letter-spacing: .5px;
      display: flex; align-items: center; gap: 8px;
      transition: background .2s, transform .2s, box-shadow .2s;
      box-shadow: 0 8px 24px rgba(240,165,0,0.25);
    }
    .btn-amber:hover { background: var(--amber2); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(240,165,0,0.4); }
    .btn-sky-outline {
      border: 1.5px solid rgba(27,152,224,0.4); color: rgba(247,248,250,0.65); background: none;
      padding: 15px 28px; border-radius: 100px;
      font-family: var(--font-d); font-size: 0.9rem;
      transition: border-color .2s, color .2s;
    }
    .btn-sky-outline:hover { border-color: var(--sky); color: var(--cloud); }

    .hero-stats {
      display: flex; gap: 52px; flex-wrap: wrap;
      margin-top: 68px; padding-top: 44px;
      border-top: 1px solid rgba(247,248,250,0.08);
    }
    .hstat-n {
      font-family: var(--font-d); font-size: 2.2rem; font-weight: 800; line-height: 1;
      color: var(--amber);
    }
    .hstat-l { font-size: 0.75rem; color: rgba(247,248,250,0.45); margin-top: 4px; }
    @media (max-width: 768px) { .hero { padding: 100px 20px 80px; } .hero-stats { gap: 28px; } }

    /* HERO LAYOUT — TWO COLUMN */
    .hero-inner { display: flex; align-items: center; gap: 60px; }
    .hero-text { flex: 1; min-width: 0; }
    .hero-visual { flex: 0 0 420px; display: flex; align-items: center; justify-content: center; position: relative; }
    .hero-visual dotlottie-player { filter: drop-shadow(0 0 60px rgba(27,152,224,0.2)); }
    .hero-visual-ring { position: absolute; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(27,152,224,0.12); animation: spin 18s linear infinite; }
    .hero-visual-ring2 { position: absolute; width: 310px; height: 310px; border-radius: 50%; border: 1px solid rgba(240,165,0,0.1); animation: spin 12s linear infinite reverse; }
    @media (max-width: 1024px) { .hero-visual { flex: 0 0 320px; } .hero-visual-ring { width: 280px; height: 280px; } .hero-visual-ring2 { width: 220px; height: 220px; } }
    @media (max-width: 768px) { .hero-inner { flex-direction: column; } .hero-visual { display: none; } }

    /* LOTTIE ICONS IN CARDS */
    .svc-lottie { width: 80px; height: 80px; margin-bottom: 12px; display: block; }
    .proc-lottie { width: 64px; height: 64px; margin-bottom: 8px; display: block; }
    .cta-lottie-wrap { margin: 0 auto 32px; width: 160px; height: 160px; opacity: 0.9; }

    /* SHIMMER on amber text */
    .h1-amber { animation: shimmer 4s ease-in-out infinite; }

    /* COUNTER ANIMATION */
    .hstat-n { transition: color 0.3s; }
    .hstat-n.counting { color: var(--sky2); }

    /* PULSING ORB on hero visual */
    .hero-visual-orb { position:absolute; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(27,152,224,0.15),transparent 70%); animation:orbPulse 4s ease-in-out infinite; pointer-events:none; }



    /* GLOW PING on chatbot */
    #cbot-btn { animation: floatY 3s ease-in-out infinite, pingGlow 3s ease-in-out infinite; }

    /* ══════ TICKER ══════ */
    .ticker-wrap { background: var(--sky); padding: 11px 0; overflow: hidden; }
    .ticker { display: flex; width: max-content; animation: tickMove 28s linear infinite; }
    .tick { padding: 0 32px; font-family: var(--font-d); font-size: 0.7rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 2px; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
    .tick::after { content: '◆'; font-size: 0.4rem; opacity: 0.4; }

    /* ══════ SECTIONS ══════ */
    .sec { max-width: 1100px; margin: 0 auto; padding: 96px 52px; }
    .sec-dark { background: var(--navy); }
    .sec-cloud { background: var(--cloud); }
    .sec-mid { background: #F0F3F7; }
    .s-tag { font-family: var(--font-d); font-size: 0.65rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; }
    .s-tag-amber { color: var(--amber); }
    .s-h { font-family: var(--font-d); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 48px; color: var(--navy); }
    .s-h.light { color: var(--cloud); }
    .s-h .amber { color: var(--amber); }
    .s-h .sky { color: var(--sky); }
    @media (max-width: 768px) { .sec { padding: 64px 20px; } }



    /* ══════ SERVICES ══════ */
    .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
    .svc {
      background: var(--cloud); border: 1px solid #e2e6ed;
      border-radius: 12px; padding: 36px 32px;
      transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
      position: relative; overflow: hidden;
    }
    .svc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sky), var(--amber)); opacity: 0; transition: opacity .3s; }
    .svc:hover { transform: translateY(-4px); border-color: rgba(27,152,224,0.3); box-shadow: 0 12px 40px rgba(15,26,46,0.1); }
    .svc:hover::before { opacity: 1; }
    .svc-icon { font-size: 1.8rem; margin-bottom: 16px; }
    .svc-name { font-family: var(--font-d); font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
    .svc-desc { font-size: 0.85rem; color: #5a6272; line-height: 1.7; margin-bottom: 20px; }
    .svc-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
    .svc-list li { font-size: 0.8rem; color: #5a6272; display: flex; gap: 8px; align-items: flex-start; }
    .svc-list li::before { content: '✓'; color: var(--sky); font-weight: 700; flex-shrink: 0; }
    .svc-tag { display: inline-block; background: rgba(27,152,224,0.08); border: 1px solid rgba(27,152,224,0.2); color: var(--sky); font-family: var(--font-d); font-size: 0.64rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
    .svc-tag-amber { background: rgba(240,165,0,0.1); border-color: rgba(240,165,0,0.3); color: var(--amber); }
    @media (max-width: 768px) { .svc-grid { grid-template-columns: 1fr; } }

    /* ══════ PRICING ══════ */
    .pricing-bg { background: var(--navy); padding: 96px 52px; }
    .pricing-in { max-width: 1100px; margin: 0 auto; }
    .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
    .ptier {
      background: rgba(247,248,250,0.04); border: 1px solid rgba(247,248,250,0.1);
      border-radius: 12px; padding: 36px 28px;
      transition: border-color .3s, background .3s;
    }
    .ptier:hover { border-color: rgba(27,152,224,0.4); background: rgba(247,248,250,0.06); }
    .ptier.featured {
      background: var(--sky); border-color: var(--sky);
    }
    .ptier.featured .pt-name, .ptier.featured .pt-desc, .ptier.featured .pt-li { color: var(--navy); }
    .ptier.featured .pt-price { color: var(--navy); }
    .ptier.featured .pt-per { color: rgba(15,26,46,0.65); }
    .pt-badge { display: inline-block; background: var(--amber); color: var(--navy); font-family: var(--font-d); font-size: 0.62rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; margin-bottom: 16px; }
    .pt-name { font-family: var(--font-d); font-size: 1.1rem; font-weight: 700; color: var(--cloud); margin-bottom: 6px; }
    .pt-desc { font-size: 0.8rem; color: rgba(247,248,250,0.5); line-height: 1.55; margin-bottom: 20px; }
    .pt-price { font-family: var(--font-d); font-size: 2.8rem; font-weight: 800; color: var(--amber); line-height: 1; }
    .pt-per { font-family: var(--font-m); font-size: 0.75rem; color: rgba(247,248,250,0.4); margin-bottom: 24px; display: block; }
    .pt-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
    .pt-li { font-size: 0.8rem; color: rgba(247,248,250,0.7); display: flex; gap: 8px; }
    .pt-li::before { content: '✓'; color: var(--sky); font-weight: 700; flex-shrink: 0; }
    .ptier.featured .pt-li::before { color: var(--navy); }
    .pt-cta { width: 100%; padding: 14px; border: 1.5px solid rgba(247,248,250,0.2); background: none; color: var(--cloud); border-radius: 100px; font-family: var(--font-d); font-weight: 700; font-size: 0.85rem; transition: all .2s; }
    .pt-cta:hover { border-color: var(--sky); color: var(--sky); }
    .ptier.featured .pt-cta { background: var(--navy); border-color: var(--navy); color: var(--cloud); }
    .ptier.featured .pt-cta:hover { background: rgba(15,26,46,0.8); }
    @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-bg { padding: 64px 20px; } }



    /* PRICE CALCULATOR */
    .calc-bg { background: #F0F3F7; padding: 96px 52px; }
    .calc-in { max-width: 1100px; margin: 0 auto; }
    .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 48px; align-items: start; }
    .clabel { font-family: var(--font-d); font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #7a8499; margin-bottom: 10px; display: block; }
    .cgroup { margin-bottom: 24px; }
    .copts { display: flex; gap: 8px; flex-wrap: wrap; }
    .copt {
      padding: 9px 18px; border-radius: 100px; border: 1.5px solid #dde1e9;
      background: var(--cloud); color: #7a8499;
      font-family: var(--font-d); font-size: 0.8rem; font-weight: 600;
      transition: all .2s;
    }
    .copt:hover { border-color: var(--sky); color: var(--navy); }
    .copt.on { background: var(--navy); border-color: var(--navy); color: var(--cloud); }
    .cadds { display: flex; gap: 8px; flex-wrap: wrap; }
    .cadd {
      padding: 7px 14px; border-radius: 100px; border: 1.5px solid #dde1e9;
      background: var(--cloud); color: #7a8499;
      font-family: var(--font-d); font-size: 0.75rem; font-weight: 500;
      transition: all .2s;
    }
    .cadd:hover { border-color: var(--amber); color: var(--amber); }
    .cadd.on { background: rgba(240,165,0,0.08); border-color: var(--amber); color: var(--amber); font-weight: 600; }
    .cresult {
      background: var(--navy); border-radius: 14px; padding: 40px;
      position: sticky; top: 80px; box-shadow: var(--shadow);
    }
    .cr-tag { font-family: var(--font-d); font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(247,248,250,0.45); margin-bottom: 8px; }
    .cr-price { font-family: var(--font-d); font-size: 4rem; font-weight: 800; color: var(--amber); line-height: 1; margin-bottom: 4px; }
    .cr-cur { font-family: var(--font-m); font-size: 0.75rem; color: rgba(247,248,250,0.35); margin-bottom: 24px; }
    .cr-breakdown { margin-bottom: 28px; }
    .cr-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(247,248,250,0.07); font-size: 0.8rem; }
    .cr-lname { color: rgba(247,248,250,0.5); } .cr-lprice { color: var(--cloud); font-weight: 500; }
    .cr-cta { width: 100%; padding: 16px; background: var(--amber); color: var(--navy); border: none; border-radius: 100px; font-family: var(--font-d); font-size: 0.9rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 20px rgba(240,165,0,0.3); transition: background .2s, transform .2s; }
    .cr-cta:hover { background: var(--amber2); transform: scale(1.02); }
    .cr-note { font-size: 0.7rem; color: rgba(247,248,250,0.35); text-align: center; margin-top: 12px; }
    @media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } .calc-bg { padding: 64px 20px; } }

    /* PROCESS */
    .proc-bg { background: var(--cloud); padding: 96px 0; overflow: hidden; }
    .proc-hd { max-width: 1100px; margin: 0 auto 48px; padding: 0 52px; }
    .proc-scroll { display: flex; gap: 16px; overflow-x: auto; padding: 0 52px; scrollbar-width: none; }
    .proc-scroll::-webkit-scrollbar { display: none; }
    .pstep {
      min-width: 260px; flex-shrink: 0;
      background: var(--cloud); border: 1px solid #dde1e9;
      border-radius: 12px; padding: 32px 26px;
      transition: border-color .3s, box-shadow .3s;
    }
    .pstep:hover { border-color: rgba(27,152,224,0.4); box-shadow: 0 8px 28px rgba(15,26,46,0.08); }
    .ps-n { font-family: var(--font-d); font-size: 3.5rem; font-weight: 800; color: rgba(15,26,46,0.06); line-height: 1; margin-bottom: 14px; }
    .ps-i { font-size: 1.4rem; margin-bottom: 10px; }
    .ps-t { font-family: var(--font-d); font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
    .ps-d { font-size: 0.8rem; color: #7a8499; line-height: 1.65; }
    @media (max-width: 768px) { .proc-bg { padding: 64px 0; } .proc-hd { padding: 0 20px; } .proc-scroll { padding: 0 20px; } }

    /* PORTFOLIO */
    .port-bg { background: var(--navy); padding: 96px 52px; }
    .port-in { max-width: 1100px; margin: 0 auto; }
    .port-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
    .pcard { background: rgba(247,248,250,0.04); border: 1px solid rgba(247,248,250,0.1); border-radius: 12px; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
    .pcard:hover { transform: translateY(-6px); border-color: rgba(240,165,0,0.3); }
    .pcard-img { height: 220px; overflow: hidden; }
    .pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
    .pcard:hover .pcard-img img { transform: scale(1.04); }
    .pcard-body { padding: 24px; }
    .ptag { font-family: var(--font-d); font-size: 0.62rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
    .pname { font-family: var(--font-d); font-size: 1.1rem; font-weight: 700; color: var(--cloud); margin-bottom: 6px; }
    .pdesc { font-size: 0.8rem; color: rgba(247,248,250,0.5); line-height: 1.6; margin-bottom: 14px; }
    .plink { font-family: var(--font-d); font-size: 0.78rem; color: var(--sky); font-weight: 600; transition: color .2s; }
    .plink:hover { color: var(--sky2); }
    .pcoming { height: 220px; display: flex; align-items: center; justify-content: center; background: rgba(247,248,250,0.02); border-bottom: 1px solid rgba(247,248,250,0.08); }
    @media (max-width: 768px) { .port-bg { padding: 64px 20px; } .port-grid { grid-template-columns: 1fr; } }

    /* FAQ */
    .faq-bg { background: #F0F3F7; padding: 96px 52px; }
    .faq-in { max-width: 700px; margin: 0 auto; }
    .fi { border-bottom: 1px solid #dde1e9; }
    .fq { width: 100%; text-align: left; background: none; border: none; display: flex; align-items: center; justify-content: space-between; padding: 22px 0; gap: 16px; font-family: var(--font-d); font-size: 0.92rem; font-weight: 600; color: var(--navy); transition: color .2s; }
    .fq:hover { color: var(--sky); }
    .ficon { width: 27px; height: 27px; border-radius: 50%; border: 1.5px solid #dde1e9; display: flex; align-items: center; justify-content: center; color: var(--sky); font-size: 1rem; flex-shrink: 0; transition: transform .3s, background .2s, border-color .2s; }
    .fi.open .ficon { transform: rotate(45deg); background: var(--sky); border-color: var(--sky); color: var(--cloud); }
    .fa { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
    .fa-in { padding: 0 0 22px; font-size: 0.88rem; color: #5a6272; line-height: 1.8; }
    .fi.open .fa { max-height: 300px; }
    @media (max-width: 768px) { .faq-bg { padding: 64px 20px; } }

    /* CTA FINAL */
    .cta-bg { background: var(--navy); padding: 120px 52px; text-align: center; position: relative; overflow: hidden; }
    .cta-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 400px; border-radius: 50%; background: radial-gradient(ellipse, rgba(240,165,0,0.07) 0%, transparent 60%); pointer-events: none; }
    .cta-in { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
    .cta-h { font-family: var(--font-d); font-size: clamp(3rem, 8vw, 7rem); font-weight: 800; letter-spacing: -2px; line-height: 0.92; color: var(--cloud); margin-bottom: 20px; }
    .cta-h .amber { color: var(--amber); }
    .cta-sub { font-size: 1rem; color: rgba(247,248,250,0.5); line-height: 1.75; margin-bottom: 40px; }
    .btn-wa { display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #fff; padding: 18px 42px; border-radius: 100px; font-family: var(--font-d); font-weight: 800; font-size: 1rem; box-shadow: 0 8px 28px rgba(37,211,102,0.3); transition: transform .2s, box-shadow .2s; }
    .btn-wa:hover { transform: scale(1.03); box-shadow: 0 12px 40px rgba(37,211,102,0.45); }
    .cta-note { font-size: 0.72rem; color: rgba(247,248,250,0.35); margin-top: 16px; }
    @media (max-width: 768px) { .cta-bg { padding: 80px 20px; } }

    /* FOOTER */
    footer { background: var(--navy); border-top: 1px solid rgba(247,248,250,0.07); padding: 40px 52px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
    .fl {
      font-family: var(--font-d); font-size: 1.1rem; font-weight: 800;
      position: relative; overflow: hidden; padding: 4px 2px; display: inline-block;
    }
    .fl svg.wf { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
    .fl span { position: relative; z-index: 1; }
    footer p { font-family: var(--font-b); font-size: 0.72rem; color: rgba(247,248,250,0.35); }
    .flinks { display: flex; gap: 22px; }
    .flinks a { font-family: var(--font-b); font-size: 0.78rem; color: rgba(247,248,250,0.45); transition: color .2s; }
    .flinks a:hover { color: var(--cloud); }
    @media (max-width: 768px) { footer { flex-direction: column; padding: 28px 20px; text-align: center; } }

    /* CHATBOT */
    #cbot-btn { position: fixed; bottom: 28px; right: 20px; z-index: 400; width: 58px; height: 58px; border-radius: 50%; background: var(--amber); border: none; color: var(--navy); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(240,165,0,0.35); animation: flt 3s ease-in-out infinite; }
    #cbot-btn:hover { animation: none; transform: scale(1.1); }
    #cbot-panel { position: fixed; bottom: 98px; right: 28px; z-index: 400; width: 340px; background: var(--navy); border: 1px solid rgba(247,248,250,0.1); border-radius: 16px; overflow: hidden; display: none; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
    #cbot-panel.open { display: flex; }
    .cb-head { background: linear-gradient(135deg, var(--navy2), #0a1420); border-bottom: 1px solid rgba(247,248,250,0.08); padding: 16px 20px; display: flex; align-items: center; gap: 10px; }
    .cb-av { width: 32px; height: 32px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
    .cb-name { font-family: var(--font-d); font-size: 0.88rem; font-weight: 700; color: var(--cloud); }
    .cb-status { font-size: 0.68rem; color: rgba(247,248,250,0.45); }
    .cb-close { margin-left: auto; background: none; border: none; color: rgba(247,248,250,0.4); font-size: 1.1rem; transition: color .2s; }
    .cb-close:hover { color: var(--cloud); }
    .cb-msgs { flex: 1; max-height: 280px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
    .cm { max-width: 84%; padding: 10px 14px; border-radius: 12px; font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; }
    .cm.bot { background: rgba(247,248,250,0.06); border: 1px solid rgba(247,248,250,0.08); border-radius: 4px 12px 12px 12px; align-self: flex-start; color: var(--cloud); }
    .cm.usr { background: var(--amber); color: var(--navy); font-weight: 600; border-radius: 12px 4px 12px 12px; align-self: flex-end; }
    .cb-qr { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; }
    .qr { padding: 5px 11px; border-radius: 100px; border: 1px solid rgba(240,165,0,0.25); background: none; color: rgba(240,165,0,0.8); font-family: var(--font-d); font-size: 0.7rem; font-weight: 600; transition: all .2s; }
    .qr:hover { background: rgba(240,165,0,0.1); border-color: var(--amber); color: var(--amber); }
    .cb-in { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(247,248,250,0.07); }
    .cb-input { flex: 1; background: rgba(247,248,250,0.06); border: 1px solid rgba(247,248,250,0.1); border-radius: 100px; padding: 9px 14px; color: var(--cloud); font-family: var(--font-b); font-size: 0.8rem; outline: none; transition: border-color .2s; }
    .cb-input:focus { border-color: var(--amber); }
    .cb-send { width: 34px; height: 34px; border-radius: 50%; background: var(--amber); border: none; color: var(--navy); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; transition: transform .2s; }
    .cb-send:hover { transform: scale(1.1); }

    /* MOBILE STICKY */
    .ms { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; background: rgba(15,26,46,0.97); backdrop-filter: blur(20px); border-top: 1px solid rgba(247,248,250,0.07); padding: 12px 20px; }
    .ms a { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--amber); color: var(--navy); padding: 15px; border-radius: 100px; font-family: var(--font-d); font-weight: 800; font-size: 0.9rem; }
    @media (max-width: 768px) {
      .ms { display: block; }
      #cbot-btn { bottom: 90px; right: 16px; width: 50px; height: 50px; font-size: 1.1rem; }
      #cbot-panel { bottom: 152px; right: 12px; width: calc(100vw - 24px); max-width: 360px; }
    }

    /* HERO CANVAS BG */
    #hero-canvas { position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0.55; }

    /* RULE 10 — Reduced Motion: kill all animations */

    /* COMMISSION CLOCK SECTION */
    .clock-section { background:#020810;padding:100px 52px;text-align:center;position:relative;overflow:hidden; }
    .clock-section::before { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:900px;height:500px;border-radius:50%;background:radial-gradient(ellipse,rgba(240,80,0,0.06) 0%,transparent 65%);pointer-events:none; }
    .clock-inner { position:relative;z-index:1;max-width:900px;margin:0 auto; }
    .clock-live-tag { display:inline-flex;align-items:center;gap:8px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);color:#fca5a5;font-family:var(--font-m);font-size:0.68rem;font-weight:700;letter-spacing:2px;padding:6px 16px;border-radius:100px;margin-bottom:28px; }
    .clock-live-dot { width:6px;height:6px;border-radius:50%;background:#ef4444;animation:clockBlink 1.2s ease-in-out infinite; }
    .clock-label { font-size:1rem;color:rgba(247,248,250,0.4);margin-bottom:16px;font-weight:500; }
    .clock-display { font-family:var(--font-m);font-size:clamp(3.5rem,11vw,9rem);font-weight:700;color:#F0A500;line-height:1;letter-spacing:-2px;text-shadow:0 0 80px rgba(240,165,0,0.3),0 0 40px rgba(240,165,0,0.15);margin-bottom:8px; }
    .clock-prefix { font-size:0.55em;vertical-align:super;color:rgba(240,165,0,0.6); }
    .clock-since { font-family:var(--font-m);font-size:0.72rem;color:rgba(247,248,250,0.2);margin-bottom:40px; }
    .clock-desc { font-size:1rem;color:rgba(247,248,250,0.45);max-width:600px;margin:0 auto 40px;line-height:1.85; }
    .clock-desc strong { color:#F7F8FA; }
    @media(max-width:768px) { .clock-section{padding:72px 20px;} }

    /* ═══════════════ WOW LAYER ═══════════════ */

    /* SCROLL PROGRESS */
    #scroll-prog { position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--sky),var(--amber));z-index:9000;transform:scaleX(0);transform-origin:left;will-change:transform;box-shadow:0 0 8px var(--amber); }



    /* HERO TYPEWRITER */
    .hero-niche { font-family:var(--font-d);font-size:0.88rem;font-weight:600;color:rgba(247,248,250,0.45);margin-top:-16px;margin-bottom:28px;display:flex;align-items:center;gap:8px; }
    .tw-chip { background:rgba(27,152,224,0.12);border:1px solid rgba(27,152,224,0.2);color:var(--sky2);padding:4px 14px;border-radius:100px;font-family:var(--font-d);font-size:0.82rem;font-weight:700;display:inline-flex;align-items:center;gap:6px;min-width:160px; }
    .tw-cursor { display:inline-block;width:2px;height:14px;background:var(--sky);margin-left:2px;animation:twBlink .75s step-end infinite;vertical-align:middle; }



    /* ═══ SITE BUILDER SECTION ═══ */
    .builder-bg { background:var(--navy);padding:96px 52px;overflow:hidden;position:relative; }
    .builder-bg::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(27,152,224,0.06),transparent 60%),radial-gradient(ellipse at 70% 50%,rgba(240,165,0,0.04),transparent 60%);pointer-events:none; }
    .builder-in { max-width:1100px;margin:0 auto;position:relative;z-index:1; }
    .builder-grid { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:48px; }

    /* CONTROLS LEFT */
    .builder-controls { display:flex;flex-direction:column;gap:28px; }
    .bc-step { display:flex;flex-direction:column;gap:10px; }
    .bc-label { font-family:var(--font-d);font-size:0.7rem;font-weight:700;letter-spacing:2px;color:rgba(247,248,250,0.35);text-transform:uppercase; }
    .bc-input { background:rgba(247,248,250,0.06);border:1px solid rgba(247,248,250,0.12);border-radius:12px;padding:14px 18px;color:var(--cloud);font-family:var(--font-d);font-size:1.1rem;font-weight:600;outline:none;transition:border-color .2s,box-shadow .2s;width:100%; }
    .bc-input:focus { border-color:var(--sky);box-shadow:0 0 0 3px rgba(27,152,224,0.12); }
    .bc-input::placeholder { color:rgba(247,248,250,0.2);font-weight:400; }
    .bc-types { display:flex;gap:8px;flex-wrap:wrap; }
    .btype { padding:10px 18px;border-radius:100px;border:1.5px solid rgba(247,248,250,0.1);background:none;color:rgba(247,248,250,0.5);font-family:var(--font-d);font-size:0.82rem;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:6px; }
    .btype:hover { border-color:rgba(247,248,250,0.3);color:var(--cloud); }
    .btype.active { background:rgba(27,152,224,0.15);border-color:var(--sky);color:var(--sky2);box-shadow:0 0 16px rgba(27,152,224,0.15); }
    .bc-colors { display:flex;gap:10px;align-items:center; }
    .bcolor { width:32px;height:32px;border-radius:50%;border:3px solid transparent;transition:all .2s;position:relative; }
    .bcolor.active { border-color:var(--cloud);transform:scale(1.2); }
    .bcolor.active::after { content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.65rem;color:#fff;font-weight:700; }
    .builder-go { display:flex;align-items:center;gap:10px;background:var(--amber);color:var(--navy);border:none;padding:16px 32px;border-radius:100px;font-family:var(--font-d);font-size:0.95rem;font-weight:800;box-shadow:0 8px 28px rgba(240,165,0,0.3);transition:all .2s;width:100%;justify-content:center;margin-top:8px; }
    .builder-go:hover { background:var(--amber2);transform:scale(1.02);box-shadow:0 12px 40px rgba(240,165,0,0.45); }
    .builder-go svg { transition:transform .3s; }
    .builder-go:hover svg { transform:translateX(4px); }

    /* PHONE MOCKUP */
    .builder-preview { display:flex;flex-direction:column;align-items:center;gap:16px; }
    .phone-wrap { position:relative; }
    .phone-frame { width:260px;background:#1a1a2e;border-radius:36px;padding:14px 10px;box-shadow:0 40px 100px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.08),inset 0 0 0 1px rgba(255,255,255,0.04);position:relative;overflow:hidden; }
    .phone-frame::before { content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:6px;background:#0a0a14;border-radius:0 0 8px 8px;z-index:5; }
    .phone-screen { background:#f0f3f7;border-radius:26px;overflow:hidden;min-height:480px;position:relative;transform:translateZ(0); }
    .phone-glow { position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);width:200px;height:100px;border-radius:50%;background:radial-gradient(ellipse,var(--sky),transparent 70%);opacity:0.15;pointer-events:none;filter:blur(20px);z-index:-1; }
    .phone-live-badge { background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);color:#10b981;font-family:var(--font-d);font-size:0.68rem;font-weight:700;padding:5px 12px;border-radius:100px;display:flex;align-items:center;gap:6px; }
    .phone-live-dot { width:6px;height:6px;border-radius:50%;background:#10b981;animation:twBlink .8s infinite; }

    /* PHONE PREVIEW ELEMENTS */
    .pp-nav { padding:10px 12px;display:flex;align-items:center;justify-content:space-between;font-family:'Plus Jakarta Sans',sans-serif; }
    .pp-logo { font-weight:800;font-size:0.8rem;color:#fff;letter-spacing:-0.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px; }
    .pp-menu { font-size:0.7rem;color:rgba(255,255,255,0.6); }
    .pp-hero { padding:22px 14px;background:linear-gradient(160deg,#0F1A2E 0%,#162035 100%); }
    .pp-tag { font-family:'Plus Jakarta Sans',sans-serif;font-size:0.58rem;font-weight:700;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.7);padding:3px 8px;border-radius:100px;display:inline-block;margin-bottom:8px; }
    .pp-h { font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem;font-weight:800;color:#fff;line-height:1.2;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .pp-sub { font-size:0.68rem;color:rgba(255,255,255,0.5);margin-bottom:14px;line-height:1.5; }
    .pp-btn { padding:9px 18px;border-radius:100px;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.72rem;font-weight:800;border:none;color:#fff;cursor:default;transition:background .3s; }
    .pp-features { display:flex;gap:0;border-top:1px solid rgba(15,26,46,0.08); }
    .pp-feat { flex:1;padding:12px 6px;text-align:center;border-right:1px solid rgba(15,26,46,0.06); }
    .pp-feat:last-child { border-right:none; }
    .pp-feat-n { font-family:'Plus Jakarta Sans',sans-serif;font-size:0.82rem;font-weight:800;color:#0F1A2E; }
    .pp-feat-l { font-size:0.58rem;color:#7a8499;margin-top:1px; }
    .pp-gallery { display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;padding:2px; }
    .pp-gimg { height:60px;border-radius:4px;overflow:hidden; }
    .pp-gimg div { width:100%;height:100%;transition:background .3s; }
    .pp-section { padding:14px;background:#fff; }
    .pp-sec-title { font-family:'Plus Jakarta Sans',sans-serif;font-size:0.75rem;font-weight:800;color:#0F1A2E;margin-bottom:8px; }
    .pp-review { background:#f8f9fa;border-radius:8px;padding:8px 10px;font-size:0.6rem;color:#5a6272;line-height:1.5;font-family:'Plus Jakarta Sans',sans-serif; }
    .pp-stars { color:#F0A500;font-size:0.65rem;margin-bottom:3px; }
    .pp-animate { animation:ppFadeIn .4s var(--ease) both; }

    @media(max-width:900px) { .builder-bg{padding:64px 20px;} .builder-grid{grid-template-columns:1fr;gap:40px;} .builder-preview{order:-1;} }
    @media(max-width:768px) { .hero-niche{font-size:0.78rem;} }
/* Hide custom cursor on touch/mobile devices */
@media (hover: none), (pointer: coarse) {
  #cdot, #cring { display: none !important; }
  html { cursor: auto; }
  a, button { cursor: pointer; }
}