:root {
      --bg: #050816;
      --bg-card: #0c0a1e;
      --bg-card-hover: #13102a;
      --blue: #38C8FF;
      --blue-dark: #0A52E8;
      --purple: #8B5CF6;
      --purple-mid: #7C3AED;
      --violet: #A78BFA;
      --cyan: #22D3EE;
      --white: #FFFFFF;
      --text: #FFFFFF;
      --text-muted: rgba(226,232,255,0.78);
      --text-dim: rgba(200,210,255,0.55);
      --border: rgba(255,255,255,0.07);
      --border-hover: rgba(255,255,255,0.14);
      --max-w: 1200px;
      --px: clamp(24px, 5vw, 64px);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    /* Safety net: nothing may exceed viewport width */
    .section, .hero, .testimonials, .final-cta, .workflow-section, footer { overflow-x: clip; }
    html { scroll-behavior: smooth; background-color: #050816; overflow-x: clip; max-width: 100%; }

    body {
      font-family: 'Montserrat', -apple-system, sans-serif;
      font-size: 17px; line-height: 1.65;
      color: var(--text); background: transparent;
      overflow-x: clip;
      max-width: 100%;
      -webkit-font-smoothing: antialiased;
      position: relative;
    }
    /* Subtle enterprise ambient, one refined gradient, no sparkle */
    body::before {
      content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
      background:
        radial-gradient(ellipse 900px 600px at 50% 0%, rgba(109,40,217,0.14), transparent 70%),
        radial-gradient(ellipse 600px 400px at 0% 60%, rgba(56,200,255,0.06), transparent 70%),
        radial-gradient(ellipse 600px 400px at 100% 40%, rgba(109,40,217,0.08), transparent 70%);
    }
    @media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); }

    /* ===== NAV ===== */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 16px 0;
      background: transparent;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav.scrolled {
      background: rgba(5,8,22,0.72);
      backdrop-filter: blur(28px) saturate(1.6);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      padding: 12px 0;
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: flex-end; gap: 18px;
    }
    .nav-logo {
      font-family: 'Gentium Plus', Georgia, serif; font-weight: 700; letter-spacing: -.02em; font-weight: 700; font-size: 20px;
      color: var(--white); display: flex; align-items: center; gap: 0;
      letter-spacing: 0.01em;
      flex: 0 0 auto;
      min-width: 0;
      margin-right: auto;
    }
    .nav-logo img { height: 70px; width: 70px; object-fit: contain; margin-right: -16px; }
    .nav-logo span { font-size: 22px; letter-spacing: -0.012em; }
    .nav-links {
      display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2.1vw, 32px);
      margin-left: 0;
      min-width: 0;
      flex: 0 1 auto;
    }
    .nav-links a {
      font-size: 13px; font-weight: 500; color: var(--text-muted);
      transition: color 0.2s; letter-spacing: 0.01em;
      white-space: nowrap;
    }
    .nav-links a:hover { color: var(--white); }
    a.nav-cta {
      font-size: 14px; font-weight: 700; color: #FFFFFF;
      padding: 9px 22px; border-radius: 8px;
      background: linear-gradient(135deg, var(--blue-dark) 0%, var(--purple) 100%);
      border: none;
      transition: all 0.25s;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
      letter-spacing: 0.01em;
      flex: 0 0 auto;
      min-width: max-content;
    }
    a.nav-cta:hover {
      filter: brightness(1.2);
      box-shadow: 0 0 24px rgba(26,107,255,0.4);
      transform: translateY(-1px);
    }
    .nav-toggle {
      display: none; background: none; border: none; cursor: pointer;
      width: 36px; height: 36px; align-items: center; justify-content: center;
    }
    .nav-toggle svg { width: 20px; height: 20px; stroke: var(--white); }
    @media (min-width: 1041px) {
      .nav-inner { gap: 8px; }
      .nav-logo img { width: 50px; height: 50px; margin-right: -10px; }
      .nav-logo span { font-size: 19px; }
      .nav-links { gap: 10px; }
      .nav-links a { font-size: 12px; }
      a.nav-cta { font-size: 12px; padding: 9px 10px; }
      .nav-inner > .language-bar { margin-left: 0; }
      .nav-inner > .theme-toggle { margin: 0; }
    }

    /* ===== HERO (Editorial + Dashboard) ===== */
    .hero {
      min-height: auto; display: flex; flex-direction: column;
      align-items: center; position: relative; overflow: hidden;
      background: transparent;
      text-align: center; padding: 0 20px clamp(20px, 4vh, 60px);
    }
    .hero-stage {
      width: 100%; min-height: 100vh; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: clamp(180px, 24vh, 280px) 0 clamp(28px, 6vh, 64px);
    }
    /* Decorative arc lines */
    .hero-arcs {
      position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    }
    .hero-arc {
      position: absolute; border: 1px solid rgba(56,182,255,0.06);
      border-radius: 50%;
    }
    .hero-arc:nth-child(1) { width: 1200px; height: 1200px; top: -600px; left: 50%; margin-left: -600px; }
    .hero-arc:nth-child(2) { width: 900px; height: 900px; top: -400px; left: 50%; margin-left: -450px; border-color: rgba(124,58,237,0.05); }
    .hero-arc:nth-child(3) { width: 600px; height: 600px; top: -200px; left: 50%; margin-left: -300px; border-color: rgba(56,182,255,0.04); }

    .hero-glow {
      will-change: transform;
      position: absolute; z-index: 0;
      width: 1000px; height: 640px; top: 4%; left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(ellipse,
        rgba(56,200,255,0.22) 0%, rgba(109,40,217,0.12) 45%, transparent 72%);
      filter: blur(60px); pointer-events: none;
    }

    /* Central light ray (Nantara blue→purple) */
    .hero-beam {
      will-change: transform;
      position: absolute; z-index: 0; pointer-events: none;
      left: 50%; top: 1%; transform: translateX(-50%);
      width: 340px; height: clamp(440px, 62vh, 700px);
      background: linear-gradient(to top,
        rgba(0,229,255,0) 0%,
        rgba(56,200,255,0.22) 18%,
        rgba(109,40,217,0.12) 48%,
        rgba(80,20,150,0.05) 70%,
        transparent 92%);
      filter: blur(44px); mix-blend-mode: screen;
      animation: heroBeam 5.5s ease-in-out infinite;
    }
    .hero-beam::before {
      content: ''; position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
      width: 3px; height: 72%; border-radius: 3px;
      background: linear-gradient(to top, rgba(200,230,255,0.85), rgba(124,58,237,0.32) 55%, transparent 90%);
      filter: blur(2.5px);
    }
    .hero-beam::after {
      content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
      width: 440px; height: 140px; border-radius: 50%;
      background: radial-gradient(50% 50% at 50% 50%, rgba(56,182,255,0.38), rgba(124,58,237,0.15) 55%, transparent 72%);
      filter: blur(38px);
    }
    @keyframes heroBeam { 0%,100%{opacity:.82} 50%{opacity:1} }

    /* Glowing horizontal seam between hero and dashboard */
    .hero-divider {
      position: relative; z-index: 1; pointer-events: none;
      width: min(1060px, 92%); height: 2px;
      margin: 0 auto clamp(80px, 12vw, 150px);
      background: linear-gradient(90deg, transparent 0%, rgba(56,182,255,0.10) 10%, rgba(56,182,255,0.85) 50%, rgba(56,182,255,0.10) 90%, transparent 100%);
    }
    .hero-divider::before {
      content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
      width: 72%; height: 24px;
      background: radial-gradient(50% 50% at 50% 50%, rgba(56,182,255,0.62), rgba(124,58,237,0.22) 56%, transparent 78%);
      filter: blur(13px); animation: dividerGlow 5s ease-in-out infinite;
    }
    .hero-divider::after {
      content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
      width: 250px; height: 3px; border-radius: 3px;
      background: linear-gradient(90deg, transparent, rgba(224,240,255,1) 44%, rgba(214,234,255,1) 56%, transparent);
    }
    @keyframes dividerGlow { 0%,100%{opacity:.72} 50%{opacity:1} }

    /* ===== HERO CHAT HIGHLIGHT (phone center, text on sides) ===== */
    .hero-chat { position: relative; z-index: 2; width: 100%; max-width: 1160px; margin: 0 auto clamp(40px, 8vw, 96px); }
    .hc-2col { display: grid; grid-template-columns: 1fr minmax(330px, 366px); gap: clamp(30px, 4.5vw, 72px); align-items: center; }
    .hc-side { display: flex; flex-direction: column; }
    .hc-left { align-items: flex-start; text-align: left; }
    .hc-right { align-items: flex-end; }
    .hero-chat .hc-title, .hero-chat .hc-sub, .hero-chat .hc-asks-row, .hero-chat .hc-hint, .hero-chat .hc-cz { animation: hcRise .8s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--hd, 0s); }
    .hero-chat .wa-phone { animation: dashFloat 8s ease-in-out infinite, hcFadeOnly .9s ease both; animation-delay: 0s, var(--hd, .9s); }
    @keyframes hcRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    @keyframes hcFadeOnly { from { opacity: 0; } to { opacity: 1; } }
    .hc-badge { display: inline-flex; align-items: center; gap: 8px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); border: 1px solid rgba(56,182,255,.22); background: rgba(56,182,255,.06); padding: 7px 14px; border-radius: 999px; }
    .hc-badge i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: ltPulse 1.4s infinite; }
    .hc-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 31px); letter-spacing: -.02em; line-height: 1.14; color: var(--white); margin: 16px 0 0; }
    .hc-title .g { background: linear-gradient(120deg, var(--blue), var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .hc-sub { color: var(--text-muted); font-size: clamp(13.5px, 1.4vw, 15.5px); line-height: 1.6; margin: 14px 0 0; }
    .hc-asks-row { display: flex; flex-wrap: wrap; gap: 9px; width: 100%; margin-top: 24px; }
    .hc-asks-row .wa-ask { width: auto; }
    .hero-chat .wa-ask { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font-size: 14px; color: var(--text-muted); background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; cursor: pointer; font-family: inherit; transition: border-color .2s, background .2s, color .2s, transform .2s; }
    .hero-chat .wa-ask:hover { border-color: rgba(56,182,255,.4); background: rgba(56,182,255,.07); color: #fff; transform: translateX(3px); }
    .hero-chat .wa-ask-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; }
    .hero-chat .wa-ask-ico svg { width: 15px; height: 15px; }
    .hc-hint { margin-top: 14px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; color: var(--text-dim); letter-spacing: .03em; }
    .hc-feats { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 26px); margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); width: 100%; }
    .hc-feat { display: flex; flex-direction: column; gap: 3px; }
    .hc-feat b { font-family: 'Segoe UI', Arial, sans-serif; font-size: clamp(17px, 2vw, 22px); font-weight: 500; color: var(--white); line-height: 1; }
    .hc-feat span { font-size: 11.5px; color: var(--text-dim); letter-spacing: .01em; }
    .hero-chat .wa-header { gap: 10px; padding: 11px 15px; align-items: center; }
    .hero-chat .wa-avatar { width: 50px; height: 50px; color: #fff; font-weight: 700; font-size: 19px; }
    .hero-chat .wa-avatar img { width: 46px; height: 46px; }
    .hero-chat .wa-hd-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
    .hero-chat .wa-hd-name { font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
    .hero-chat .wa-hd-status { font-size: 12px; line-height: 1.1; }
    @media (max-width: 1024px) {
      .hc-2col { grid-template-columns: 1fr; justify-items: center; gap: 30px; }
      .hc-left, .hc-right { align-items: center; text-align: center; max-width: 480px; width: 100%; }
      .hc-left .hc-asks-row { justify-content: center; }
      .hc-cz { margin-left: auto; margin-right: auto; }
    }

    .hero-headline {
      position: relative; z-index: 2;
      font-family: 'Gentium Plus', Georgia, serif;
      font-size: clamp(40px, 5.4vw, 72px);
      font-weight: 400; line-height: 1.08;
      color: var(--white); letter-spacing: -0.02em;
      max-width: 820px; margin: 0 auto 24px; text-align: center;
    }
    .hero-headline .accel {
      background: linear-gradient(100deg, var(--purple) 0%, var(--violet) 45%, var(--blue) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-subline {
      position: relative; z-index: 2;
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(17px, 2.2vw, 22px);
      color: var(--text-muted); line-height: 1.6; margin-bottom: 40px;
    }
    .hero-subline em { font-style: italic; }
    .hero-subline .growth {
      color: var(--blue); font-style: italic;
    }
    .hero-headline em {
      font-style: italic;
      background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-headline strong {
      font-weight: 400;
      background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    .hero-actions {
      position: relative; z-index: 3;
      display: flex; align-items: center; justify-content: center;
      gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
    }

    /* Hero eyebrow pill */
    .hero-eyebrow {
      position: relative; z-index: 3;
      display: inline-flex; align-items: center; gap: 9px;
      font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; letter-spacing: .04em;
      color: var(--text-muted); background: rgba(255,255,255,0.04);
      border: 1px solid var(--border); border-radius: 999px;
      padding: 7px 15px 7px 11px; margin-bottom: 26px;
    }
    .hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 9px #34D399; animation: ltPulse 1.5s infinite; }
    .hero-eyebrow b { color: var(--white); font-weight: 500; }

    /* Hero secondary "watch demo" CTA */
    .cta-watch {
      position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
      font-size: 15px; font-weight: 600; color: var(--white); cursor: pointer;
      padding: 13px 22px 13px 14px; border-radius: 12px; font-family: inherit;
      border: 1px solid var(--border-hover); background: rgba(255,255,255,0.03);
      transition: border-color .25s, background .25s, transform .2s;
    }
    .cta-watch:hover { border-color: rgba(56,182,255,.45); background: rgba(56,182,255,.06); transform: translateY(-1px); }
    .cta-watch .play {
      width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--blue-dark), var(--purple));
    }
    .cta-watch .play svg { width: 12px; height: 12px; fill: #fff; }
    .cta-watch small { display: block; font-size: 11px; font-weight: 400; color: var(--text-dim); margin-top: 1px; }
    .cta-watch .ctw-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }

    /* Hero trust micro-row */
    .hero-trust {
      position: relative; z-index: 3;
      display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
      margin-bottom: clamp(46px, 7vw, 78px);
    }
    .hero-trust .ht {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 12.5px; color: var(--text-dim);
    }
    .hero-trust .ht svg { width: 15px; height: 15px; stroke: #34D399; fill: none; stroke-width: 2.2; flex-shrink: 0; }
    .hero-trust .ht b { color: var(--text); font-weight: 600; }

    /* ===== STICKY BOOK-DEMO BAR ===== */
    .demo-bar {
      position: fixed; bottom: 24px; right: 20px; transform: translateX(140%);
      z-index: 120; width: min(460px, calc(100vw - 40px));
      box-sizing: border-box;
      display: flex; align-items: center; gap: 10px; padding: 12px 14px;
      background: linear-gradient(135deg, rgba(79,190,255,.12) 0%, rgba(124,58,237,.12) 100%);
      border: 1px solid rgba(124,58,237,.3);
      border-radius: 10px;
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 20px rgba(79,190,255,.15);
      opacity: 0; transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .45s ease;
    }
    .demo-bar.show { transform: translateX(0); opacity: 1; }
    .demo-bar-txt { flex: 1; min-width: 0; }
    .demo-bar-txt strong { display: block; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -.01em; line-height: 1.2; }
    .demo-bar-txt span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .demo-bar .cta-magnetic { padding: 8px 16px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
    .demo-bar-x {
      flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
      background: transparent; border: none; color: var(--text-dim); font-size: 18px; line-height: 1;
      display: flex; align-items: center; justify-content: center; transition: all .2s;
    }
    .demo-bar-x:hover { color: #fff; background: rgba(255,255,255,0.08); }
    @media (max-width: 768px) {
      .demo-bar { bottom: 16px; right: 12px; width: min(410px, calc(100vw - 24px)); }
      .demo-bar-txt span { display: none; }
      .demo-bar-txt strong { font-size: 13px; }
    }
    @media (max-width: 560px) {
      .demo-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 32px;
        width: calc(100vw - 24px);
        padding: 14px;
        gap: 10px 8px;
      }
      .demo-bar-txt { grid-column: 1; min-width: 0; }
      .demo-bar-txt strong { font-size: 13px; line-height: 1.35; }
      .demo-bar .cta-magnetic {
        grid-column: 1;
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        padding: 10px 14px;
        font-size: 12px;
      }
      .demo-bar-x { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .demo-bar { transition: opacity .3s ease; }
    }


    /* ===== COUNT-UP METRICS ===== */
    .metric-value { font-variant-numeric: tabular-nums; }

    /* ===== 3D TILT CARDS ===== */
    .bento-card {
      perspective: 1200px;
      transform-style: preserve-3d;
      transition: transform .3s cubic-bezier(.23,1,.320,1), box-shadow .3s ease;
    }
    .bento-card:hover { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(10px); box-shadow: 0 24px 48px rgba(79,190,255,.25); }

    /* ===== INTEGRATIONS ORBIT ===== */
    .integ-orbit { position: relative; width: 240px; height: 240px; margin: 0 auto; }
    .integ-core {
      position: absolute; inset: 50%; width: 60px; height: 60px;
      transform: translate(-50%, -50%); border-radius: 12px;
      background: linear-gradient(135deg, var(--blue-dark), var(--purple));
      display: flex; align-items: center; justify-content: center;
      z-index: 10; box-shadow: 0 0 30px rgba(79,190,255,.4);
    }
    .integ-logo {
      position: absolute; inset: 50%; width: 44px; height: 44px;
      transform: translate(-50%, -50%);
      border-radius: 10px; background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 700; color: #fff;
      animation: orbitSpin 16s linear infinite;
      animation-delay: var(--delay, 0s);
      box-shadow: 0 0 20px rgba(124,58,237,.2);
    }
    @keyframes orbitSpin {
      from { transform: translate(-50%, -50%) rotate(0deg) translateY(-90px) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg) translateY(-90px) rotate(-360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .integ-logo { animation: none; }
      body::before { opacity: 0 !important; }
      .bento-card:hover { transform: none; }
    }

    /* ===== SCROLL PROGRESS BAR ===== */
    .scroll-progress {
      position: fixed; top: 0; left: 0; height: 2.5px; width: 0%;
      z-index: 200; pointer-events: none; border-radius: 0 3px 3px 0;
      background: linear-gradient(90deg, var(--blue-dark), var(--blue) 45%, var(--purple));
      box-shadow: 0 0 12px rgba(56,182,255,.7), 0 0 4px rgba(124,58,237,.6);
      transition: width .12s linear;
    }

    /* ===== HERO HEADLINE WORD REVEAL + SWEEP ===== */
    .hero-headline .hw { display: inline-block; overflow: visible; vertical-align: baseline; line-height: 1.35; padding: 0 .08em; margin: 0 -.08em; }
    .hero-headline .hw-i { display: inline-block; line-height: 1.35; padding-top: .06em; padding-bottom: .12em; will-change: transform, opacity; }
    .hero-headline .hw-grad {
      background: linear-gradient(100deg, var(--purple) 0%, var(--violet) 45%, var(--blue) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-headline.swept { position: relative; }
    .hero-headline.swept::after {
      content: ''; position: absolute; inset: -6% -4%; pointer-events: none;
      background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
      transform: translateX(-120%) skewX(-12deg); mix-blend-mode: screen;
      animation: headlineSweep 1.1s cubic-bezier(.4,0,.2,1) forwards;
    }
    @keyframes headlineSweep { to { transform: translateX(120%) skewX(-12deg); } }

    /* ===== CONFETTI (success burst) ===== */
    .confetti-layer { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 9; }
    .confetti-bit {
      position: absolute; width: 8px; height: 8px; border-radius: 1.5px;
      will-change: transform, opacity; opacity: 0;
      animation: confettiFly var(--cdur, 1100ms) cubic-bezier(.18,.7,.4,1) forwards;
    }
    @keyframes confettiFly {
      0% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
      100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(.7); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-headline.swept::after { animation: none; display: none; }
      .confetti-bit { animation: none; display: none; }
      .scroll-progress { transition: none; }
    }

    /* ===== DASHBOARD MOCKUP ===== */
    .hero-dashboard {
      position: relative; z-index: 2;
      width: 100%; max-width: 1060px;
      margin: 0 auto clamp(56px, 10vw, 120px);
      border: 1px solid rgba(56,182,255,0.16);
      border-radius: 18px; overflow: hidden;
      background: rgba(28,32,52,0.55);
      backdrop-filter: blur(16px);
      box-shadow: 0 44px 100px -28px rgba(6,10,40,0.9), 0 0 80px -30px rgba(56,182,255,0.3);
      animation: dashFloat 7s ease-in-out infinite;
    }
    @keyframes dashFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
    /* Dashboard nav bar */
    .dash-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.06);
      flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-muted);
    }
    .dash-topbar-left { display:flex; align-items:center; gap:2px; font-weight:600; color:var(--white); font-size:13px; }
    .dash-topbar-left img { height: 56px; width: 56px; object-fit: contain; margin-right: -6px; }
    .dash-topbar-left span { font-size: 17px; }
    .dash-tabs { display: flex; gap: 4px; }
    .dash-tab {
      font-size: 12px; color: var(--text-muted); padding: 6px 14px;
      border-radius: 8px; cursor: pointer; transition: all .2s;
      border: 1px solid transparent; background: none; font-family: inherit; letter-spacing: 0.01em;
    }
    .dash-tab:hover { color: var(--white); background: rgba(255,255,255,0.04); }
    .dash-tab.active { color: var(--blue); background: rgba(56,182,255,0.08); border-color: rgba(56,182,255,0.16); }

    /* Sidebar */
    .dash-sidebar {
      padding: 4px 18px 4px 0; border-right: 1px solid rgba(255,255,255,0.06);
      display: flex; flex-direction: column; gap: 6px;
    }
    .dash-sidebar-title {
      font-size: 18px; font-weight: 700; color: var(--white);
      line-height: 1.2; margin-bottom: 2px;
    }
    .dash-sidebar-sub {
      font-size: 11px; color: var(--text-dim); margin-bottom: 12px;
    }
    .dash-sidebar-label {
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--blue); margin: 8px 0 4px;
    }
    .dash-month {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 12px; border-radius: 8px; font-size: 13px;
      color: var(--text-muted); cursor: default; transition: all 0.2s;
      border: 1px solid transparent;
    }
    .dash-month:hover { background: rgba(255,255,255,0.03); }
    .dash-month.active {
      background: rgba(56,182,255,0.06); border-color: rgba(56,182,255,0.12);
      color: var(--white);
    }
    .dash-month-plus { font-size: 16px; color: var(--text-dim); }
    .dash-month-stats {
      margin-top: 4px; font-size: 11px; color: var(--text-dim);
      display: none; line-height: 1.6;
    }
    .dash-month.active .dash-month-stats { display: block; }
    .dash-month.active .dash-month-plus { display: none; }

    /* Main content */
    .dash-main { padding: 0; display: flex; flex-direction: column; gap: 16px; }

    /* Metric cards row */
    .dash-metrics {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    .dash-metric {
      background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px; padding: 16px;
    }
    .dash-metric-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
    .dash-metric-value {
      font-family: 'Segoe UI', Arial, sans-serif; font-size: clamp(22px, 2.5vw, 32px);
      font-weight: 500; color: var(--white); line-height: 1;
    }
    .dash-metric-value.blue { color: var(--blue); }
    .dash-metric-value.purple { color: var(--violet); }
    .dash-metric-sub { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

    /* Chart area */
    .dash-chart {
      background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px; padding: 20px; flex: 1;
    }
    .dash-chart-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px;
    }
    .dash-chart-title { font-size: 13px; font-weight: 600; color: var(--white); }
    .dash-chart-badge {
      font-family: 'Segoe UI', Arial, sans-serif; font-size: 18px; font-weight: 600;
      color: #22c55e;
    }
    .dash-chart-note { font-size: 11px; color: var(--text-dim); text-align: right; }

    /* SVG chart */
    .chart-svg { width: 100%; height: 120px; }
    .chart-bar { fill: rgba(56,182,255,0.2); rx: 3; }
    .chart-bar:hover { fill: rgba(56,182,255,0.4); }
    .chart-line { fill: none; stroke: var(--violet); stroke-width: 2; }
    .chart-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-top: 6px; }

    /* Interactive panels */
    .dash-body { position: relative; padding: 20px; min-height: 300px; }
    .dash-panel { display: none; }
    .dash-panel.active { display: block; animation: panelSlide .45s cubic-bezier(.16,1,.3,1); }
    @keyframes panelSlide { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
    .dash-overview { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }

    /* Orders table */
    .ord-table { width: 100%; border-collapse: collapse; }
    .ord-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding: 8px 12px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .ord-table td { font-size: 13px; color: var(--text-muted); padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
    .ord-table tr:last-child td { border-bottom: none; }
    .ord-table tbody tr { transition: background .15s; }
    .ord-table tbody tr:hover { background: rgba(255,255,255,0.02); }
    .ord-id { font-family: 'Segoe UI', Arial, sans-serif; color: var(--blue); font-size: 12px; }
    .ord-val { font-family: 'Segoe UI', Arial, sans-serif; color: var(--white); }
    .chan { display: inline-flex; align-items: center; gap: 7px; }
    .chan-dot { width: 7px; height: 7px; border-radius: 50%; }
    .ord-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
    .ord-status.done { background: rgba(34,197,94,0.1); color: #22c55e; }
    .ord-status.routing { background: rgba(56,182,255,0.1); color: var(--blue); }
    .ord-status.pending { background: rgba(234,179,8,0.1); color: #eab308; }

    /* Buyers */
    .buyer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .buyer-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 16px; display: flex; align-items: center; gap: 14px; transition: border-color .2s; }
    .buyer-card:hover { border-color: rgba(56,182,255,0.18); }
    .buyer-ava { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; }
    .buyer-info { flex: 1; min-width: 0; }
    .buyer-name { font-size: 14px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
    .buyer-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
    .tier { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 5px; }
    .tier.plat { background: rgba(167,139,250,0.14); color: var(--violet); }
    .tier.gold { background: rgba(234,179,8,0.14); color: #eab308; }
    .tier.silver { background: rgba(148,163,184,0.16); color: #cbd5e1; }
    .buyer-ltv { text-align: right; }
    .buyer-ltv-val { font-family: 'Segoe UI', Arial, sans-serif; font-size: 16px; color: var(--white); }
    .buyer-ltv-lbl { font-size: 10px; color: var(--text-dim); }

    /* Analytics */
    .an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .an-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 18px; }
    .an-title { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
    .an-big { font-family: 'Segoe UI', Arial, sans-serif; font-size: 34px; color: var(--blue); line-height: 1; }
    .an-big-sub { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
    .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
    .bar-row:last-child { margin-bottom: 0; }
    .bar-label { font-size: 11px; color: var(--text-muted); width: 72px; flex-shrink: 0; }
    .bar-track { flex: 1; height: 7px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
    .bar-fill { height: 100%; border-radius: 4px; }
    .bar-val { font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; color: var(--text-muted); width: 34px; text-align: right; }
    .peak-bars { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
    .peak-bars span { flex: 1; background: linear-gradient(180deg, var(--blue), rgba(56,182,255,0.18)); border-radius: 3px 3px 0 0; }

    @media (max-width: 900px) {
      .hero-dashboard { max-width: 520px; }
      .dash-overview { grid-template-columns: 1fr; }
      .dash-sidebar { display: none; }
      .dash-metrics { grid-template-columns: 1fr; }
      .buyer-grid, .an-grid { grid-template-columns: 1fr; }
      .dash-tabs { width: 100%; justify-content: space-between; }
      .dash-tab { padding: 6px 8px; flex: 1; text-align: center; }
      .ord-table th:nth-child(3), .ord-table td:nth-child(3) { display: none; }
    }

    /* Magnetic CTA */
    .cta-magnetic {
      position: relative; display: inline-flex; align-items: center; gap: 10px;
      font-size: 15px; font-weight: 600; color: var(--white);
      padding: 14px 28px; border-radius: 12px; border: none; cursor: pointer;
      background: linear-gradient(135deg, var(--blue-dark) 0%, var(--purple) 100%);
      overflow: hidden; transition: transform 0.2s, box-shadow 0.3s;
      font-family: inherit;
    }
    .cta-magnetic::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
      opacity: 0; transition: opacity 0.3s;
    }
    .cta-magnetic:hover::before { opacity: 1; }
    .cta-magnetic:hover {
      box-shadow: 0 0 32px rgba(26,107,255,0.35), 0 8px 24px rgba(0,0,0,0.4);
    }
    .cta-magnetic svg { width: 16px; height: 16px; transition: transform 0.2s; }
    .cta-magnetic:hover svg { transform: translateX(3px); }

    .cta-ghost {
      font-size: 15px; font-weight: 500; color: var(--text-muted);
      padding: 13px 22px; border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
      cursor: pointer; transition: all 0.25s; font-family: inherit;
    }
    .cta-ghost:hover {
      color: var(--white); border-color: rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.08);
    }

    /* ===== ASK NANTARA (WhatsApp) ===== */
    .wa-section { padding: clamp(80px, 10vw, 140px) 0; position: relative; border-top: 1px solid var(--border); }
    .wa-wrap {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: clamp(32px, 5vw, 72px); align-items: center;
    }
    .wa-copy .section-eyebrow { margin-bottom: 14px; }
    .wa-copy h2 { margin-bottom: 18px; }
    .wa-copy .section-desc { margin-bottom: 28px; max-width: 440px; }
    .wa-asks { display: flex; flex-direction: column; gap: 12px; }
    .wa-ask {
      display: flex; align-items: center; gap: 12px;
      font-size: 15px; color: var(--text-muted);
    }
    .wa-ask-ico {
      width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(56,182,255,0.08); border: 1px solid rgba(56,182,255,0.14);
    }
    .wa-ask-ico svg { width: 16px; height: 16px; stroke: var(--blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* Phone */
    .wa-phone {
      max-width: 348px; width: 100%; margin: 0 auto;
      position: relative;
      border-radius: 28px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.1);
      background: #0B141A;
      box-shadow: 0 50px 110px -34px rgba(0,0,0,0.85), 0 0 80px -40px rgba(56,182,255,0.25);
      animation: dashFloat 8s ease-in-out infinite;
    }
    .wa-header {
      background: #202C33; display: flex; align-items: center; gap: 11px;
      padding: 13px 15px;
    }
    .wa-back { color: #8696A0; font-size: 20px; line-height: 1; }
    .wa-avatar {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #1A6BFF, #8B3DFF);
    }
    .wa-avatar img { width: 30px; height: 30px; object-fit: contain; }
    .wa-hd-name { font-size: 15px; font-weight: 600; color: #E9EDF0; line-height: 1.2; }
    .wa-hd-status { font-size: 12px; color: #8696A0; }
    .wa-hd-icons { margin-left: auto; display: flex; gap: 18px; color: #8696A0; }
    .wa-hd-icons svg { width: 18px; height: 18px; fill: currentColor; }
    .wa-body {
      background: #0B141A; padding: 16px 12px;
      display: flex; flex-direction: column; gap: 7px;
      height: clamp(380px, 52vh, 460px); overflow-y: auto; scroll-behavior: smooth;
    }
    .wa-body::-webkit-scrollbar { width: 5px; }
    .wa-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
    .wa-msg.live { opacity: 1 !important; transform: none !important; animation: none !important; }
    .wa-typing { display: flex; gap: 4px; align-items: center; padding: 11px 13px !important; }
    .wa-typing span { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: waTyp 1s infinite; }
    .wa-typing span:nth-child(2) { animation-delay: .15s; }
    .wa-typing span:nth-child(3) { animation-delay: .3s; }
    @keyframes waTyp { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
    .wa-day {
      align-self: center; background: #1D282F; color: #8696A0;
      font-size: 11px; padding: 4px 12px; border-radius: 7px; margin: 4px 0 8px;
    }
    .wa-msg {
      max-width: 84%; padding: 8px 11px 7px; border-radius: 9px;
      font-size: 13.5px; line-height: 1.5; position: relative;
      opacity: 0; transform: translateY(8px);
    }
    .wa-go .wa-msg { animation: waPop .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d, 0s); }
    @keyframes waPop { to { opacity: 1; transform: none; } }
    .wa-in { align-self: flex-start; background: #202C33; color: #E9EDF0; border-top-left-radius: 2px; }
    .wa-out { align-self: flex-end; background: #005C4B; color: #E9EDF0; border-top-right-radius: 2px; }
    .wa-time { font-size: 10px; color: rgba(233,237,240,0.45); display: inline-block; margin-left: 10px; vertical-align: bottom; float: right; margin-top: 5px; }
    .wa-out .wa-time::after { content: ' ✓✓'; color: #53BDEB; }
    .wa-recap-title {
      font-size: 12px; font-weight: 700; color: #53BDEB;
      letter-spacing: 0.02em; margin-bottom: 9px;
      display: flex; align-items: center; gap: 6px;
    }
    .wa-recap-row {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 12.5px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.06);
      color: #AEBAC1;
    }
    .wa-recap-row:first-of-type { border-top: none; }
    .wa-recap-row b { color: #E9EDF0; font-weight: 600; }
    .wa-recap-row .up { color: #22c55e; }
    .wa-rank { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 0; color: #AEBAC1; border-top: 1px solid rgba(255,255,255,0.06); }
    .wa-rank:first-of-type { border-top: none; }
    .wa-rank-num { width: 18px; height: 18px; border-radius: 5px; background: rgba(83,189,235,0.15); color: #53BDEB; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .wa-rank b { color: #E9EDF0; font-weight: 600; }
    .wa-rank span { margin-left: auto; font-family: 'Segoe UI', Arial, sans-serif; color: #8696A0; font-size: 11px; }
    .wa-input {
      background: #0B141A; padding: 11px 12px; display: flex; align-items: center; gap: 9px;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .wa-input-box {
      flex: 1; min-width: 0; height: 42px; box-sizing: border-box;
      background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.10);
      border-radius: 21px; padding: 0 16px;
      font-size: 13px; color: #E9EDF0; outline: none; font-family: inherit;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .wa-input-box:focus {
      border-color: rgba(56,182,255,0.55); background: rgba(56,182,255,0.06);
      box-shadow: 0 0 0 3px rgba(56,182,255,0.12);
    }
    .wa-input-box::placeholder { color: #8696A0; }
    .wa-send {
      width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
      border: 1px solid rgba(0,168,132,0.35);
      background: #00A884; display: flex; align-items: center; justify-content: center;
      transition: filter .18s ease, transform .18s ease;
    }
    .wa-send:hover { filter: brightness(1.08); transform: scale(1.04); }
    .wa-send svg { width: 18px; height: 18px; fill: #0B141A; }

    @media (max-width: 860px) {
      .wa-wrap { grid-template-columns: 1fr; }
      .wa-copy { text-align: center; }
      .wa-copy .section-desc { margin-left: auto; margin-right: auto; }
      .wa-asks { max-width: 380px; margin: 0 auto; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wa-msg { opacity: 1; transform: none; }
      .wa-phone { animation: none; }
    }

    /* ===== ASK NANTARA persona picker ===== */
    .wa-persona { margin-top: 28px; }
    .wa-persona-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
    .wa-persona-list { display: flex; gap: 10px; flex-wrap: wrap; }
    .wa-char { display: flex; align-items: center; gap: 9px; padding: 8px 16px 8px 8px; border-radius: 30px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); cursor: pointer; transition: all .2s; font-family: inherit; }
    .wa-char:hover { border-color: rgba(255,255,255,0.2); }
    .wa-char.active { border-color: var(--blue); background: rgba(56,182,255,0.08); }
    .wa-char-ava { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
    .wa-char-name { font-size: 13px; font-weight: 600; color: var(--white); display: block; }
    .wa-char-role { font-size: 10px; color: var(--text-dim); display: block; }
    @media (max-width: 860px) { .wa-persona-list { justify-content: center; } }

    /* persona custom builder */
    .wa-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
    .wa-custom input { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--white); font-family: inherit; outline: none; width: 160px; }
    .wa-custom input:focus { border-color: var(--blue); }
    .wa-custom-colors { display: flex; gap: 6px; }
    .wa-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
    .wa-swatch.active { border-color: var(--white); }
    .wa-custom-add { font-family: inherit; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--blue-dark), var(--purple)); border: none; border-radius: 8px; padding: 9px 14px; cursor: pointer; transition: filter .15s; }
    .wa-custom-add:hover { filter: brightness(1.12); }
    .wa-custom-hint { font-size: 11px; color: var(--text-dim); margin-top: 9px; }

    /* ===== VISIBLE CUSTOMIZE CARD (left column) ===== */
    .hc-cz { width: 100%; max-width: 340px; margin-top: 22px; text-align: left; background: linear-gradient(168deg, rgba(20,26,42,.72), rgba(10,12,22,.6)); border: 1px solid var(--border); border-radius: 16px; padding: 17px 17px 18px; backdrop-filter: blur(8px); }
    .hc-cz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
    .hc-cz-title { font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
    .hc-cz-title svg { width: 15px; height: 15px; fill: none; stroke: var(--blue); stroke-width: 2; }
    .hc-cz-live { font-family: 'Segoe UI', Arial, sans-serif; font-size: 10px; letter-spacing: .06em; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
    .hc-cz-live i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: ltPulse 1.4s infinite; }
    .hc-cz-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 7px; }
    .hc-cz-input { width: 100%; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 9px 12px; font-size: 13px; color: #fff; font-family: inherit; outline: none; margin-bottom: 14px; }
    .hc-cz-input:focus { border-color: var(--blue); }
    .hc-cz-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 15px; }
    .hc-cz-seg button { font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 4px; cursor: pointer; transition: all .15s; }
    .hc-cz-seg button:hover { border-color: rgba(255,255,255,.25); color: #fff; }
    .hc-cz-seg button.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--blue-dark), var(--purple)); }
    .hc-cz-avatars { display: flex; gap: 10px; }
    .hc-cz-ava { width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0B141A; transition: border-color .15s, transform .15s; }
    .hc-cz-ava img { width: 33px; height: 33px; object-fit: contain; }
    .hc-cz-ava:hover { border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
    .hc-cz-ava.active { border-color: #fff; }
    @media (max-width: 1024px) { .hc-cz { margin-left: auto; margin-right: auto; } }

    /* ===== HOW IT WORKS (3 steps) ===== */
    .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
    .how-step { position: relative; border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px 28px; background: var(--bg-card); transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s; overflow: hidden; }
    .how-step::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: 0; transition: opacity .35s; }
    .how-step:hover { transform: translateY(-5px); border-color: rgba(56,182,255,.28); box-shadow: 0 26px 64px -30px rgba(26,107,255,.55); }
    .how-step:hover::before { opacity: 1; }
    .how-n { font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; color: var(--blue); letter-spacing: .14em; }
    .how-ico { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(26,107,255,.16), rgba(124,58,237,.16)); border: 1px solid rgba(56,182,255,.22); margin: 15px 0 18px; }
    .how-ico svg { width: 23px; height: 23px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .how-step h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -.01em; }
    .how-step p { font-size: 14.5px; color: var(--text-muted); line-height: 1.62; }
    @media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; } }

    /* ===== COMPARISON: Chatbot Biasa vs Agen Nantara ===== */
    .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 54px; }
    .cmp-card { border: 1px solid var(--border); border-radius: 22px; padding: 26px 22px 24px; background: var(--bg-card); display: flex; flex-direction: column; position: relative; overflow: hidden; }
    .cmp-smart { border-color: rgba(56,182,255,.26); background: linear-gradient(168deg, rgba(15,22,40,.85), rgba(10,12,22,.7)); box-shadow: 0 30px 80px -40px rgba(26,107,255,.5); }
    .cmp-smart::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: .8; }
    .cmp-head { text-align: center; margin-bottom: 20px; }
    .cmp-head h3 { font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 9px; }
    .cmp-tag { font-family: 'Segoe UI', Arial, sans-serif; font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
    .cmp-dumb .cmp-tag { color: #94a0a8; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
    .cmp-smart .cmp-tag { color: var(--blue); background: rgba(56,182,255,.1); border: 1px solid rgba(56,182,255,.3); }
    .cmp-head p { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin-top: 10px; max-width: 34ch; margin-left: auto; margin-right: auto; }

    /* chat window (WhatsApp dark) */
    .cmp-chat { position: relative; flex: 1 1 auto; min-height: 500px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); background-color: #0B141A; background-image: linear-gradient(rgba(11,20,26,.94), rgba(11,20,26,.94)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3Cpath d='M20 8l2 4-2 4-2-4z' fill='%23ffffff' fill-opacity='0.015'/%3E%3C/svg%3E"); }
    .cmp-scroll { position: absolute; inset: 0; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
    /* left (static) card grows to fit its full conversation, never clipped */
    .cmp-dumb .cmp-chat { overflow: visible; }
    .cmp-dumb .cmp-scroll { position: relative; inset: auto; overflow: visible; height: auto; }
    .cmp-smart .cmp-scroll { overflow-y: auto; scroll-behavior: smooth; }
    .cmp-scroll::-webkit-scrollbar { width: 5px; } .cmp-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

    .cmp-row { display: flex; gap: 8px; max-width: 86%; }
    .cmp-row.out { align-self: flex-end; flex-direction: column; align-items: flex-end; }
    .cmp-ava { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; align-self: flex-end; overflow: hidden; background: #2A3942; display: flex; align-items: center; justify-content: center; }
    .cmp-ava img { width: 26px; height: 26px; object-fit: contain; }
    .cmp-ava.bot { background: #3a4750; }
    .cmp-bub { font-size: 13px; line-height: 1.5; padding: 8px 11px; border-radius: 9px; color: #E9EDF0; position: relative; word-wrap: break-word; }
    .cmp-row.in .cmp-bub { background: #202C33; border-top-left-radius: 3px; }
    .cmp-row.out .cmp-bub { background: #005C4B; border-top-right-radius: 3px; }
    .cmp-bub ol { margin: 5px 0 0; padding-left: 20px; } .cmp-bub li { margin: 1px 0; }
    .cmp-who { font-size: 10px; color: #8696A0; margin-top: 3px; }
    .cmp-row.in .cmp-time, .cmp-row.out .cmp-time { display: block; text-align: right; font-size: 9.5px; color: rgba(233,237,240,.45); margin-top: 3px; }

    /* typing indicator */
    .cmp-typing { display: inline-flex; gap: 4px; padding: 11px 13px; }
    .cmp-typing span { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: cmpType 1.2s infinite ease-in-out; }
    .cmp-typing span:nth-child(2){ animation-delay: .2s; } .cmp-typing span:nth-child(3){ animation-delay: .4s; }
    @keyframes cmpType { 0%,60%,100%{ transform: translateY(0); opacity: .4; } 30%{ transform: translateY(-4px); opacity: 1; } }
    .cmp-appear { animation: cmpAppear .5s cubic-bezier(.22,1,.36,1); }
    @keyframes cmpAppear { from { opacity: 0; transform: translateY(11px) scale(.985); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }

    /* fail bar (dumb bot) */
    .cmp-fail { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #F87171; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.22); border-radius: 9px; padding: 10px; }
    .cmp-fail svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
    .cmp-win { margin-top: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #34D399; }
    .cmp-win svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

    /* invoice chip inside chat */
    .cmp-inv { width: 168px; background: #F3EFE6; border-radius: 7px; padding: 9px; color: #1a1a1a; }
    .cmp-inv-top { display: flex; align-items: center; gap: 7px; }
    .cmp-inv-ic { width: 26px; height: 30px; background: #fff; border: 1px solid #d8d2c4; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #E2574C; flex-shrink: 0; }
    .cmp-inv-nm { font-size: 10.5px; font-weight: 600; line-height: 1.2; } .cmp-inv-nm small { display: block; font-weight: 400; color: #6b6b6b; font-size: 9px; }
    .cmp-inv-body { margin-top: 8px; background: #fff; border-radius: 4px; padding: 8px; }
    .cmp-inv-h { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
    .cmp-inv-line { height: 4px; border-radius: 2px; background: #e8e4d8; margin-top: 5px; } .cmp-inv-line.s { width: 60%; } .cmp-inv-line.t { width: 80%; }
    .cmp-inv-total { display: flex; justify-content: space-between; font-size: 9px; font-weight: 700; margin-top: 7px; border-top: 1px solid #e8e4d8; padding-top: 5px; }

    /* product showcase card inside chat */
    .cmp-prod { width: 216px; display: flex; flex-direction: column; gap: 7px; }
    .cmp-prod-item { display: flex; gap: 9px; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 9px; padding: 7px 8px; }
    .cmp-prod-thumb { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
    .cmp-prod-thumb::after { content: ''; position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%); width: 60%; height: 34%; border-radius: 40% 40% 50% 50%; background: rgba(255,255,255,.32); }
    .cmp-prod-info { flex: 1; min-width: 0; }
    .cmp-prod-nm { font-size: 12px; font-weight: 600; color: #E9EDF0; line-height: 1.2; }
    .cmp-prod-meta { font-size: 10px; color: #8696A0; margin-top: 2px; }
    .cmp-prod-price { font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; }

    /* shipping label (resi) card inside chat */
    .cmp-resi { width: 210px; background: #F3EFE6; border-radius: 7px; padding: 9px; color: #1a1a1a; }
    .cmp-resi-top { display: flex; align-items: center; justify-content: space-between; }
    .cmp-resi-cour { font-size: 11px; font-weight: 800; letter-spacing: -.01em; }
    .cmp-resi-badge { font-size: 8px; font-weight: 700; color: #fff; background: #16a34a; border-radius: 4px; padding: 2px 6px; letter-spacing: .04em; }
    .cmp-resi-body { margin-top: 8px; background: #fff; border-radius: 4px; padding: 8px; }
    .cmp-resi-track { font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
    .cmp-resi-bars { display: flex; gap: 1.5px; margin-top: 6px; height: 24px; align-items: stretch; }
    .cmp-resi-bars i { flex: 1; background: #1a1a1a; border-radius: .5px; }
    .cmp-resi-bars i:nth-child(3n){ flex: .5; } .cmp-resi-bars i:nth-child(4n){ flex: 1.6; background: #fff; } .cmp-resi-bars i:nth-child(7n){ flex: .4; }
    .cmp-resi-route { display: flex; justify-content: space-between; font-size: 8.5px; color: #6b6b6b; margin-top: 7px; }
    .cmp-resi-route b { color: #1a1a1a; font-weight: 700; }

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

    /* ===== METRICS STRIP ===== */
    .metrics-strip {
      padding: 72px 0;
      position: relative; overflow: hidden;
    }
    .metrics-strip::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(26,107,255,0.04) 0%, rgba(139,61,255,0.03) 100%);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .metrics-row {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
      position: relative;
    }
    .metric-item {
      text-align: center; padding: 32px 20px;
      background: rgba(255,255,255,0.02); border: 1px solid var(--border);
      border-radius: 14px; position: relative;
      transition: border-color 0.3s, transform 0.3s;
    }
    .metric-item:hover {
      border-color: rgba(56,182,255,0.15); transform: translateY(-2px);
    }
    .metric-value {
      font-size: clamp(32px, 4vw, 48px); font-weight: 800;
      letter-spacing: -0.03em; line-height: 1;
      background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      margin-bottom: 8px;
    }
    .metric-label {
      font-size: 13px; color: var(--text-muted); line-height: 1.4;
    }

    /* ===== SECTION SHARED ===== */
    .section { padding: clamp(100px, 12vw, 160px) 0; }
    .section-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--blue);
      margin-bottom: 16px; display: block;
    }
    .section-title { font-family: 'Montserrat', sans-serif;
      font-size: clamp(36px, 5vw, 64px);
      font-weight: 700; line-height: 1.06;
      letter-spacing: -0.03em; color: var(--white);
      margin-bottom: 16px;
    }
    .section-desc {
      font-size: 18px; color: var(--text-muted); line-height: 1.75;
      max-width: 520px;
    }
    .section-header {
      margin-bottom: clamp(56px, 7vw, 88px);
    }

    /* ===== BENTO GRID ===== */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      gap: 12px;
    }
    .bento-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: clamp(28px,3vw,40px);
      position: relative;
      overflow: hidden;
      cursor: default;
      transition: border-color 0.35s, background 0.35s, transform 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .bento-card::before {
      content: ''; position: absolute; inset: 0; z-index: 0;
      background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%),
        rgba(56,182,255,0.06), transparent 60%);
      opacity: 0; transition: opacity 0.4s;
    }
    .bento-card:hover::before { opacity: 1; }
    .bento-card:hover {
      border-color: rgba(56,182,255,0.15);
      background: var(--bg-card-hover);
      transform: translateY(-2px);
    }
    .bento-card > * { position: relative; z-index: 1; }

    .bento-card.span-2 { grid-column: span 2; }
    .bento-card.tall { grid-row: span 2; }

    .bento-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(56,182,255,0.08); border: 1px solid rgba(56,182,255,0.12);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
      transition: background 0.3s, border-color 0.3s, transform 0.3s;
    }
    .bento-card:hover .bento-icon {
      background: rgba(56,182,255,0.14); border-color: rgba(56,182,255,0.25);
      transform: scale(1.08);
    }
    .bento-icon svg {
      width: 18px; height: 18px; stroke: var(--blue); fill: none;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }
    .bento-title {
      font-size: 20px; font-weight: 700; color: var(--white);
      margin-bottom: 10px; letter-spacing: -0.02em;
    }
    .bento-desc {
      font-size: 15px; color: var(--text-muted); line-height: 1.7;
    }
    .bento-detail {
      margin-top: 16px; padding-top: 16px;
      border-top: 1px solid var(--border);
      font-size: 13px; color: var(--text-dim); line-height: 1.6;
      max-height: 0; overflow: hidden; opacity: 0;
      transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s, margin-top 0.3s, padding-top 0.3s;
      margin-top: 0; padding-top: 0;
    }
    .bento-card:hover .bento-detail {
      max-height: 120px; opacity: 1;
      margin-top: 16px; padding-top: 16px;
    }

    /* ===== WORKFLOW PREVIEW ===== */
    .workflow-section {
      padding: clamp(100px, 12vw, 160px) 0;
      border-top: 1px solid var(--border);
    }

    /* ===== LOOKER STUDIO DASHBOARD ===== */
    .looker { background: #0A0C14; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 44px 100px -36px rgba(0,0,0,0.75); }
    .lk-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); flex-wrap: wrap; }
    .lk-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--white); }
    .lk-title .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.6); animation: pulse 2s ease-in-out infinite; }
    .lk-title .lk-live { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: #22c55e; background: rgba(34,197,94,0.1); padding: 3px 8px; border-radius: 5px; }
    .lk-range { display: flex; gap: 4px; background: rgba(255,255,255,0.03); padding: 4px; border-radius: 10px; border: 1px solid var(--border); }
    .lk-pill { font-size: 12px; color: var(--text-muted); padding: 7px 16px; border-radius: 7px; cursor: pointer; border: none; background: none; font-family: inherit; transition: all .2s; }
    .lk-pill:hover { color: var(--white); }
    .lk-pill.active { background: var(--blue); color: #fff; box-shadow: 0 2px 14px rgba(56,182,255,0.3); }
    .lk-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
    .lk-scorecards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .lk-score { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
    .lk-score-label { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
    .lk-score-val { font-family: 'Segoe UI', Arial, sans-serif; font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; color: var(--white); line-height: 1; }
    .lk-score-delta { font-size: 11px; margin-top: 8px; font-family: 'Segoe UI', Arial, sans-serif; color: #22c55e; }
    .lk-score:nth-child(1) .lk-score-val { color: var(--blue); }
    .lk-score:nth-child(2) .lk-score-val { color: var(--violet); }
    .lk-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 14px; }
    .lk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .lk-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
    .lk-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .lk-card-head > span:first-child { font-size: 13px; font-weight: 600; color: var(--white); }
    .lk-card-sub { font-size: 11px; color: var(--text-dim); }
    .lk-chart { width: 100%; height: 180px; display: block; }
    .lk-bar-rect { fill: url(#lkGrad); transition: height .55s cubic-bezier(.16,1,.3,1), y .55s cubic-bezier(.16,1,.3,1); cursor: pointer; }
    .lk-bar-rect:hover { fill: var(--blue); }
    .lk-chart-x { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-top: 8px; }
    .lk-donut { position: relative; width: 140px; height: 140px; margin: 0 auto 16px; }
    .lk-donut svg { transform: rotate(-90deg); }
    .lk-donut circle { fill: none; stroke-width: 14; transition: stroke-dasharray .65s cubic-bezier(.16,1,.3,1), stroke-dashoffset .65s cubic-bezier(.16,1,.3,1); }
    .lk-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .lk-donut-center b { font-family: 'Segoe UI', Arial, sans-serif; font-size: 22px; color: var(--white); }
    .lk-donut-center span { font-size: 10px; color: var(--text-dim); }
    .lk-legend { display: flex; flex-direction: column; gap: 9px; }
    .lk-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
    .lk-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
    .lk-legend-val { margin-left: auto; font-family: 'Segoe UI', Arial, sans-serif; color: var(--white); font-size: 12px; }
    .lk-row { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
    .lk-row:last-child { margin-bottom: 0; }
    .lk-row-name { font-size: 12.5px; color: var(--text-muted); width: 130px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lk-row-track { flex: 1; height: 8px; background: rgba(255,255,255,0.05); border-radius: 5px; overflow: hidden; }
    .lk-row-fill { height: 100%; border-radius: 5px; width: 0; transition: width .65s cubic-bezier(.16,1,.3,1); }
    .lk-row-val { font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; color: var(--text-muted); width: 46px; text-align: right; flex-shrink: 0; }
    @media (max-width: 860px) {
      .lk-scorecards { grid-template-columns: 1fr 1fr; }
      .lk-grid, .lk-grid2 { grid-template-columns: 1fr; }
      .lk-row-name { width: 96px; }
    }

    /* Mock App Window */
    .wf-window {
      background: #08080d; border: 1px solid var(--border);
      border-radius: 16px; overflow: hidden;
      position: relative;
    }
    .wf-titlebar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.015);
    }
    .wf-dots { display: flex; gap: 7px; }
    .wf-dots span {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(255,255,255,0.08);
    }
    .wf-dots span:first-child { background: #ef4444; }
    .wf-dots span:nth-child(2) { background: #eab308; }
    .wf-dots span:nth-child(3) { background: #22c55e; }
    .wf-titlebar-center {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; color: var(--text-dim);
    }
    .wf-titlebar-center .live-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5);
      animation: pulse 2s ease-in-out infinite;
    }
    .wf-titlebar-right { font-size: 11px; color: var(--text-dim); font-family: 'Segoe UI', Arial, sans-serif; }

    /* Window Layout */
    .wf-layout {
      display: grid; grid-template-columns: 200px 1fr;
      min-height: 420px;
    }

    /* Sidebar */
    .wf-sidebar {
      border-right: 1px solid var(--border);
      padding: 16px 0;
      background: rgba(255,255,255,0.01);
    }
    .wf-sidebar-label {
      font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--text-dim);
      padding: 8px 20px; margin-bottom: 4px;
    }
    .wf-sidebar-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 20px; font-size: 13px; color: var(--text-dim);
      transition: all 0.3s; cursor: default;
      border-left: 2px solid transparent;
    }
    .wf-sidebar-item.active {
      color: var(--blue); background: rgba(56,182,255,0.04);
      border-left-color: var(--blue);
    }
    .wf-sidebar-item.completed {
      color: #22c55e;
      border-left-color: #22c55e;
    }
    .wf-sidebar-item .sb-icon {
      width: 24px; height: 24px; border-radius: 6px;
      background: rgba(255,255,255,0.04); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s; flex-shrink: 0;
    }
    .wf-sidebar-item.active .sb-icon {
      background: rgba(56,182,255,0.1); border-color: rgba(56,182,255,0.25);
    }
    .wf-sidebar-item.completed .sb-icon {
      background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.2);
    }
    .wf-sidebar-item .sb-icon svg {
      width: 12px; height: 12px; stroke: currentColor; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .wf-sidebar-item .sb-status {
      margin-left: auto; font-size: 10px; font-family: 'Segoe UI', Arial, sans-serif;
      opacity: 0.6;
    }

    /* Main panel */
    .wf-main {
      display: flex; flex-direction: column;
    }

    /* Data preview area */
    .wf-preview {
      flex: 1; padding: 24px 28px;
      display: flex; flex-direction: column; gap: 16px;
      position: relative; overflow: hidden;
    }
    .wf-preview-header {
      display: flex; align-items: center; justify-content: space-between;
    }
    .wf-preview-title {
      font-size: 14px; font-weight: 700; color: var(--white);
      display: flex; align-items: center; gap: 8px;
    }
    .wf-preview-title .stage-badge {
      font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
      background: rgba(56,182,255,0.1); color: var(--blue);
      border: 1px solid rgba(56,182,255,0.15);
      transition: all 0.3s;
    }
    .wf-preview-title .stage-badge.done {
      background: rgba(34,197,94,0.08); color: #22c55e;
      border-color: rgba(34,197,94,0.15);
    }
    .wf-preview-time {
      font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; color: var(--text-dim);
    }

    /* Data cards inside preview */
    .wf-data-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .wf-data-card {
      padding: 14px 16px; border-radius: 8px;
      background: rgba(255,255,255,0.02); border: 1px solid var(--border);
      opacity: 0; transform: translateY(8px) scale(0.98);
      transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    .wf-data-card.show {
      opacity: 1; transform: translateY(0) scale(1);
    }
    .wf-data-card .dc-label {
      font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px;
    }
    .wf-data-card .dc-value {
      font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px;
      color: var(--white); line-height: 1.4;
    }
    .wf-data-card .dc-value.highlight { color: var(--blue); }
    .wf-data-card .dc-value.success { color: #22c55e; }
    .wf-data-card.span-2 { grid-column: span 2; }

    /* Progress bar */
    .wf-progress {
      height: 3px; background: rgba(255,255,255,0.04);
      border-radius: 2px; overflow: hidden;
      margin-top: auto;
    }
    .wf-progress-fill {
      height: 100%; width: 0;
      background: linear-gradient(90deg, var(--blue), var(--purple));
      border-radius: 2px;
      transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
    }

    /* Terminal log */
    .wf-terminal {
      border-top: 1px solid var(--border);
      padding: 14px 20px;
      background: rgba(0,0,0,0.3);
      max-height: 140px; overflow-y: auto;
    }
    .wf-terminal-header {
      font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--text-dim);
      margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
    }
    .wf-terminal-header::before {
      content: '>_'; font-family: 'Segoe UI', Arial, sans-serif; color: var(--blue); font-size: 11px;
    }
    .wf-log-entry {
      font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px;
      line-height: 1.7; color: var(--text-dim);
      opacity: 0; transform: translateX(-6px);
      transition: all 0.25s;
    }
    .wf-log-entry.show { opacity: 1; transform: translateX(0); }
    .wf-log-time { color: var(--text-dim); opacity: 0.5; }
    .wf-log-action { color: var(--blue); }
    .wf-log-success { color: #22c55e; }
    .wf-log-warn { color: #eab308; }

    @media (max-width: 900px) {
      .wf-layout { grid-template-columns: 1fr; }
      .wf-sidebar { display: none; }
      .wf-data-grid { grid-template-columns: 1fr; }
      .wf-data-card.span-2 { grid-column: span 1; }
    }

    /* ===== BEFORE/AFTER ===== */
    .shift-grid {
      display: grid; grid-template-columns: 1fr 48px 1fr;
      gap: 0; align-items: start;
    }
    .shift-col-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; margin-bottom: 24px; padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .shift-col-label.before { color: #ef4444; }
    .shift-col-label.after { color: var(--blue); }
    .shift-rows { display: flex; flex-direction: column; }
    .shift-row {
      padding: 20px 0; border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 4px;
    }
    .shift-row:last-child { border-bottom: none; }
    .shift-metric {
      font-size: clamp(22px, 2.5vw, 32px); font-weight: 800;
      letter-spacing: -0.03em; line-height: 1;
    }
    .shift-metric.before { color: rgba(239,68,68,0.6); }
    .shift-metric.after {
      background: linear-gradient(135deg, var(--blue), var(--purple));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .shift-label { font-size: 14px; color: var(--text-muted); }
    .shift-divider {
      display: flex; align-items: center; justify-content: center;
      padding-top: 60px;
    }
    .shift-arrow {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--bg-card); border: 1px solid rgba(56,182,255,0.2);
      display: flex; align-items: center; justify-content: center;
    }
    .shift-arrow svg { width: 14px; height: 14px; stroke: var(--blue); fill: none; stroke-width: 2; }
    .shift-before { padding-right: 32px; }
    .shift-after { padding-left: 32px; }

    /* ===== FAQ ===== */
    .faq-list { max-width: 680px; }
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-q {
      width: 100%; background: none; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: space-between;
      padding: 22px 0; font-family: inherit;
      font-size: 15px; font-weight: 600; color: var(--white);
      text-align: left; gap: 16px; transition: color 0.2s;
    }
    .faq-q:hover { color: var(--blue); }
    .faq-plus {
      width: 20px; height: 20px; flex-shrink: 0; position: relative;
      transition: transform 0.3s;
    }
    .faq-plus::before, .faq-plus::after {
      content: ''; position: absolute;
      background: var(--text-dim); border-radius: 1px;
      transition: transform 0.3s, background 0.2s;
    }
    .faq-plus::before { width: 12px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
    .faq-plus::after { width: 1.5px; height: 12px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
    .faq-item.open .faq-plus::after { transform: translate(-50%,-50%) rotate(90deg); }
    .faq-item.open .faq-q { color: var(--blue); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1); }
    .faq-item.open .faq-a { max-height: 260px; }
    .faq-a-inner { padding-bottom: 22px; font-size: 14px; color: var(--text-muted); line-height: 1.8; }

    /* ===== TESTIMONIALS ===== */
    .testimonials {
      padding: clamp(100px, 12vw, 160px) 0 clamp(48px, 6vw, 72px);
      overflow: hidden;
    }
    .testi-track-wrap {
      position: relative;
      margin: 0 calc(var(--px) * -1);
      padding: 0 var(--px);
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    @media (max-width: 600px) {
      .testi-track-wrap {
        mask-image: none;
        -webkit-mask-image: none;
      }
    }
    .testi-track {
      display: flex; gap: 16px;
      cursor: grab; user-select: none;
      transition: transform 0.05s linear;
    }
    .testi-track:active { cursor: grabbing; }
    .testi-track.snapping { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }

    .testi-card {
      flex: 0 0 380px; min-width: 320px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--border);
      border-radius: 16px; padding: 28px;
      display: flex; flex-direction: column;
      transition: border-color 0.3s, transform 0.3s;
    }
    .testi-card:hover {
      border-color: rgba(56,182,255,0.15);
      transform: translateY(-2px);
    }

    .testi-stars {
      display: flex; gap: 2px; margin-bottom: 16px;
    }
    .testi-stars svg {
      width: 14px; height: 14px; fill: #eab308; stroke: none;
    }

    .testi-quote {
      font-size: 15px; color: var(--text); line-height: 1.7;
      flex: 1; margin-bottom: 20px;
    }
    .testi-quote em {
      color: var(--blue); font-style: normal; font-weight: 600;
    }

    .testi-author {
      display: flex; align-items: center; gap: 12px;
      padding-top: 16px; border-top: 1px solid var(--border);
    }
    .testi-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 15px; color: var(--white);
      flex-shrink: 0; letter-spacing: -0.02em;
    }
    .testi-avatar.av-1 { background: linear-gradient(135deg, #1A6BFF, #38B6FF); }
    .testi-avatar.av-2 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
    .testi-avatar.av-3 { background: linear-gradient(135deg, #0891B2, #22D3EE); }
    .testi-avatar.av-4 { background: linear-gradient(135deg, #4F46E5, #818CF8); }
    .testi-avatar.av-5 { background: linear-gradient(135deg, #8B3DFF, #38B6FF); }
    .testi-avatar.av-6 { background: linear-gradient(135deg, #059669, #34D399); }
    .testi-avatar.av-7 { background: linear-gradient(135deg, #D946EF, #A78BFA); }

    .testi-name {
      font-size: 14px; font-weight: 700; color: var(--white);
      line-height: 1.3;
    }
    .testi-role {
      font-size: 12px; color: var(--text-dim); line-height: 1.3;
      margin-top: 1px;
    }
    .testi-badge {
      margin-left: auto;
      font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; padding: 4px 10px; border-radius: 6px;
      background: rgba(34,197,94,0.08); color: #22c55e;
      border: 1px solid rgba(34,197,94,0.12);
      white-space: nowrap;
    }

    .testi-nav {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; margin-top: 32px;
    }
    .testi-nav-btn {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.2s;
    }
    .testi-nav-btn:hover {
      background: rgba(255,255,255,0.06); border-color: var(--border-hover);
    }
    .testi-nav-btn svg {
      width: 16px; height: 16px; stroke: var(--text-muted); fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .testi-dots {
      display: flex; gap: 6px;
    }
    .testi-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: rgba(255,255,255,0.12);
      transition: all 0.3s;
    }
    .testi-dot.active {
      background: var(--blue); width: 20px; border-radius: 3px;
    }

    @media (max-width: 900px) {
      .testi-card { flex: 0 0 300px; min-width: 280px; }
    }
    @media (max-width: 600px) {
      .testi-card { flex: 0 0 calc(100vw - 48px); min-width: 0; }
    }
    /* ===== INTEGRATIONS HUB ===== */
    .hub-stage {
      position: relative; width: 100%; max-width: 700px;
      height: 500px; margin: 20px auto 0;
    }
    .hub-canvas {
      position: absolute; inset: 0; width: 100%; height: 100%;
      z-index: 1; pointer-events: none;
    }
    /* Center logo */
    .hub-center {
      position: absolute; z-index: 10;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 88px; height: 88px; border-radius: 50%;
      background: rgba(6,6,14,0.95);
      border: 2px solid rgba(56,182,255,0.3);
      display: flex; align-items: center; justify-content: center;
      box-shadow:
        0 0 40px rgba(56,182,255,0.2),
        0 0 80px rgba(124,58,237,0.1),
        inset 0 0 20px rgba(56,182,255,0.05);
    }
    .hub-center img {
      width: 56px; height: 56px; object-fit: contain;
      filter: drop-shadow(0 0 12px rgba(56,182,255,0.4));
    }
    .hub-center-ring {
      position: absolute; top: 50%; left: 50%;
      width: 110px; height: 110px; border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(56,182,255,0.12);
      z-index: 9; pointer-events: none;
      animation: hubRingPulse 3s ease-in-out infinite;
    }
    .hub-center-ring.r2 {
      width: 136px; height: 136px;
      border-color: rgba(124,58,237,0.08);
      animation-delay: 0.5s;
    }
    @keyframes hubRingPulse {
      0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
      50% { transform: translate(-50%,-50%) scale(1.08); opacity: 0.4; }
    }
    /* App nodes */
    .hub-node {
      position: absolute; z-index: 12;
      width: 54px; height: 54px; border-radius: 50%;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      background: rgba(10,10,20,0.92);
      border: 1.5px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s ease;
      cursor: default;
    }
    .hub-node:hover {
      border-color: rgba(56,182,255,0.5);
      box-shadow: 0 0 28px rgba(56,182,255,0.25);
      transform: translate(-50%, -50%) scale(1.12);
    }
    .hub-node svg { width: 24px; height: 24px; flex-shrink: 0; display: block; max-width: 24px; max-height: 24px; pointer-events: none; }
    .hub-node-label {
      position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
      font-size: 10px; font-weight: 600; color: var(--text-dim);
      white-space: nowrap; letter-spacing: 0.04em;
      opacity: 0; transition: opacity 0.2s;
    }
    .hub-node:hover .hub-node-label { opacity: 1; }
    @media (max-width: 600px) {
      .hub-stage { height: 380px; max-width: 360px; }
      .hub-center { width: 68px; height: 68px; }
      .hub-center img { width: 42px; height: 42px; }
      .hub-node { width: 42px; height: 42px; }
      .hub-node svg { width: 18px; height: 18px; }
    }

    .final-cta {
      padding: clamp(120px, 14vw, 180px) 0;
      text-align: center; position: relative; overflow: hidden;
    }
    .final-cta-glow {
      position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
      width: 800px; height: 600px; border-radius: 50%; pointer-events: none;
      background: radial-gradient(ellipse, rgba(26,107,255,0.12) 0%, rgba(139,61,255,0.06) 40%, transparent 70%);
      filter: blur(60px);
    }
    .final-cta .section-title, .final-cta .section-desc,
    .final-cta .hero-actions, .final-cta .trust-row { position: relative; }
    .final-cta .section-desc { max-width: 440px; margin: 0 auto 36px; }

    .trust-row { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
    .trust-item {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--text-dim);
    }
    .trust-item svg { width: 14px; height: 14px; stroke: var(--blue); fill: none; stroke-width: 2; flex-shrink: 0; }

    /* ===== FOOTER ===== */
    .footer { padding: 56px 0 32px; border-top: 1px solid var(--border); }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
    .footer-logo {
      font-family: 'Gentium Plus', serif; font-weight: 700; font-size: 18px;
      color: var(--white); display: flex; align-items: center; gap: 0; margin-bottom: 10px;
    }
    .footer-logo img { height: 36px; width: 36px; object-fit: contain; margin-right: -8px; }
    .footer-brand p { font-size: 13px; color: var(--text-dim); line-height: 1.6; max-width: 220px; }
    .footer-col h4 {
      font-size: 11px; font-weight: 600; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px;
    }
    .footer-col a { display: block; font-size: 13px; color: var(--text-dim); padding: 3px 0; transition: color 0.15s; }
    .footer-col a:hover { color: var(--white); }
    .footer-bottom {
      padding-top: 20px; border-top: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      font-size: 12px; color: var(--text-dim);
    }
    .footer-socials { display: flex; gap: 8px; }
    .footer-socials a {
      width: 32px; height: 32px; border-radius: 8px;
      background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s;
    }
    .footer-socials a:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.06); }
    .footer-socials svg { width: 14px; height: 14px; fill: var(--text-dim); }

    /* ===== SCROLL REVEALS ===== */
    .sr { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1); }
    .sr.visible { opacity: 1; transform: translateY(0); }
    .sr-delay-1 { transition-delay: 0.08s; }
    .sr-delay-2 { transition-delay: 0.16s; }
    .sr-delay-3 { transition-delay: 0.24s; }
    .sr-delay-4 { transition-delay: 0.32s; }
    .sr-delay-5 { transition-delay: 0.40s; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1040px) {
      .nav-links { display: none; }
      .nav-toggle { display: flex; }
      .nav-links.open {
        display: flex; flex-direction: column;
        position: absolute; top: 64px; left: 0; right: 0;
        align-items: flex-end; text-align: right;
        background: rgba(1,2,8,0.97); backdrop-filter: blur(24px);
        border-bottom: 1px solid var(--border);
        padding: 20px var(--px) 24px; gap: 16px;
      }
      .bento-grid { grid-template-columns: 1fr; }
      .bento-card.span-2 { grid-column: span 1; }
      .metrics-row { gap: 16px; }
      .metric-item:not(:last-child)::after { display: none; }
      .wf-pipeline { flex-direction: column; }
      .wf-connector { width: auto; height: 24px; }
      .wf-connector-line { width: 2px; height: 100%; }
      .shift-grid { grid-template-columns: 1fr; gap: 24px; }
      .shift-divider { padding-top: 0; transform: rotate(90deg); width: 36px; margin: 0 auto; }
      .shift-before, .shift-after { padding: 0; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    }
    @media (max-width: 500px) {
      .metrics-row { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-chat, .hero-chat *, .wa-phone { transform: none !important; animation: none !important; opacity: 1 !important; }
      .sr { opacity: 1; transform: none; transition: none; }
      .hero-headline, .hero-subline, .hero-actions, .hero-chat { opacity: 1; transform: none; }
      .hero-eyebrow, .hero-trust { opacity: 1 !important; transform: none !important; }
      .testi-track { transition: none; }
      .hub-pulse-ring, .hub-center-glow, .hub-dot-particle { animation: none !important; }
      .hub-line-pulse { animation: none !important; }
      @keyframes float1, @keyframes float2, @keyframes float3,
      @keyframes orbitPulse, @keyframes iFloat1, @keyframes iFloat2, @keyframes iFloat3,
      @keyframes pulse { animation: none !important; }
      *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    }

    /* ===== FOCUS VISIBLE ===== */
    :focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
      border-radius: 4px;
    }
    a:focus-visible, button:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 3px;
    }
    .nav-cta:focus-visible {
      outline-offset: 4px;
    }
    .faq-q:focus-visible {
      outline-offset: -2px;
      border-radius: 8px;
    }

    /* ===== CURSOR POINTER (all interactive) ===== */
    a, button, .nav-links a, .footer-col a, .testi-nav-btn, .faq-q, .nav-cta {
      cursor: pointer;
    }

    /* ===== 1440px+ CONTAINER ===== */
    @media (min-width: 1440px) {
      .container { max-width: 1280px; }
    }
    /* ===== AGENT LOOP TRACE, interactive hero (crafted) ===== */
    .dash-body.agentic { padding: 0; min-height: 0; }
    .lt { display: grid; grid-template-columns: 288px 1fr; min-height: 410px; }

    .lt-status { display: flex; align-items: center; gap: 13px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; color: var(--text-muted); letter-spacing: .02em; }
    .lt-task { color: var(--text-dim); }
    .lt-run { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border: 1px solid rgba(56,182,255,.22); border-radius: 999px; color: var(--blue); background: rgba(56,182,255,.06); font-size: 11px; }
    .lt-run i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: ltPulse 1.4s infinite; }
    .lt-elapsed { color: var(--text-dim); min-width: 38px; }
    @keyframes ltPulse { 0%,100%{opacity:.35} 50%{opacity:1} }

    .lt-loop { padding: clamp(22px,2.4vw,30px); border-right: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; }
    .lt-kicker { font-family: 'Segoe UI', Arial, sans-serif; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); }
    .lt-loop h4 { font-size: 19px; font-weight: 700; color: var(--white); letter-spacing: -.015em; margin: 11px 0 24px; line-height: 1.18; }
    .lt-steps { position: relative; display: flex; flex-direction: column; gap: 1px; flex: 1; }
    .lt-rail { position: absolute; left: 13.5px; top: 16px; bottom: 18px; width: 2px; background: rgba(255,255,255,.08); border-radius: 2px; }
    .lt-rail-fill { position: absolute; left: 13.5px; top: 16px; width: 2px; height: 0; background: var(--blue); border-radius: 2px; box-shadow: 0 0 10px rgba(56,182,255,.5); transition: height .55s cubic-bezier(.16,1,.3,1); }
    .lt-step { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 13px; align-items: start; padding: 9px 8px 9px 0; cursor: pointer; border-radius: 9px; transition: background .2s; }
    .lt-step:hover { background: rgba(255,255,255,.025); }
    .lt-num { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; color: var(--text-dim); background: var(--bg-card); border: 1.5px solid rgba(255,255,255,.13); transition: all .3s; }
    .lt-step.done .lt-num { color: var(--blue); border-color: rgba(56,182,255,.45); }
    .lt-step.on .lt-num { color: #fff; border-color: transparent; background: var(--blue); box-shadow: 0 0 0 4px rgba(56,182,255,.14); }
    .lt-name { font-size: 14px; font-weight: 600; color: var(--text-muted); transition: color .3s; line-height: 1.55; }
    .lt-step.on .lt-name { color: #fff; }
    .lt-desc { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .35s ease, margin .35s ease; }
    .lt-step.on .lt-desc { max-height: 44px; opacity: 1; margin-top: 4px; }
    .lt-foot { margin-top: 16px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 10px; color: var(--text-dim); letter-spacing: .05em; display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
    .lt-foot .pp { display: inline-flex; gap: 3px; align-items: flex-end; height: 10px; }
    .lt-foot .pp i { width: 3px; height: 10px; background: var(--blue); border-radius: 1px; transform-origin: bottom; animation: ltBars 1s ease-in-out infinite; }
    .lt-foot .pp i:nth-child(2){ animation-delay:.15s } .lt-foot .pp i:nth-child(3){ animation-delay:.3s }
    @keyframes ltBars { 0%,100%{transform:scaleY(.45);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

    .lt-view { position: relative; padding: clamp(22px,2.4vw,32px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
    .lt-view-cap { font-family: 'Segoe UI', Arial, sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; display: flex; align-items: center; gap: 9px; }
    .lt-view-cap::before { content: ''; width: 16px; height: 1.5px; background: var(--blue); }
    .lt-scene { display: none; }
    .lt-scene.on { display: block; }
    .lt-scene.on .lt-msg, .lt-scene.on .lt-chip, .lt-scene.on .lt-rline, .lt-scene.on .lt-pitem, .lt-scene.on .lt-tool, .lt-scene.on .lt-result, .lt-scene.on .lt-loopback { opacity: 0; animation: ltIn .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d, 0s); }
    @keyframes ltIn { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} }

    .lt-msg { background: #202C33; color: #E9EDF0; border-radius: 11px; border-top-left-radius: 3px; padding: 11px 14px; font-size: 13.5px; line-height: 1.5; max-width: 94%; }
    .lt-msg .who { display: block; font-family: 'Segoe UI', Arial, sans-serif; font-size: 10px; color: #8696A0; margin-bottom: 5px; letter-spacing: .02em; }
    .lt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
    .lt-chip { font-size: 12px; padding: 6px 11px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); color: var(--text-muted); }
    .lt-chip b { color: var(--blue); font-family: 'Segoe UI', Arial, sans-serif; font-weight: 500; }
    .lt-reason { display: flex; flex-direction: column; gap: 13px; }
    .lt-rline { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline; font-size: 13.5px; color: var(--text-muted); }
    .lt-rline .k { font-family: 'Segoe UI', Arial, sans-serif; font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
    .lt-rline .v { color: #fff; font-weight: 600; }
    .lt-plan { display: flex; flex-direction: column; gap: 12px; }
    .lt-pitem { display: flex; gap: 11px; align-items: center; font-size: 13.5px; color: var(--text-muted); }
    .lt-pbox { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.2); flex: none; }
    .lt-tools { display: flex; flex-direction: column; gap: 10px; }
    .lt-tool { display: flex; align-items: center; gap: 10px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 12.5px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 11px 14px; }
    .lt-tool .fn { color: var(--blue); }
    .lt-tool .res { margin-left: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
    .lt-tool .res.ok { color: #34d399; }
    .lt-result { border: 1px solid rgba(52,211,153,.28); background: rgba(52,211,153,.06); border-radius: 13px; padding: 16px 18px; }
    .lt-result .rt { font-size: 15px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; }
    .lt-result .tick { width: 20px; height: 20px; border-radius: 50%; background: #34d399; color: #04210f; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
    .lt-result .rs { font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; color: var(--text-muted); margin-top: 9px; line-height: 1.5; }
    .lt-loopback { margin-top: 15px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; color: var(--text-dim); }

    @media (max-width: 820px) {
      .lt { grid-template-columns: 1fr; }
      .lt-loop { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
      .lt-rail, .lt-rail-fill { display: none; }
      .lt-status .lt-task { display: none; }
    }

    /* ===== GLOBAL MOTION POLISH (startup / saas / tech) ===== */
    .sr { transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease; filter: blur(5px); }
    .sr.visible { filter: blur(0); }
    .nav-cta, .cta-magnetic { position: relative; overflow: hidden; }
    .nav-cta::after, .cta-magnetic::after {
      content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,.30), transparent);
      transform: skewX(-18deg); pointer-events: none;
    }
    .nav-cta:hover::after, .cta-magnetic:hover::after { animation: btnSheen .9s ease; }
    @keyframes btnSheen { from{left:-130%} to{left:160%} }
    .bento-card, .dash-metric, .an-card, .buyer-card, .testi-card {
      transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s, background .35s;
    }
    .buyer-card:hover, .an-card:hover { transform: translateY(-3px); border-color: rgba(56,182,255,.22); box-shadow: 0 18px 40px -22px rgba(26,107,255,.45); }
    @media (prefers-reduced-motion: reduce) {
      .sr { filter: none !important; }
      .lt-run i, .lt-foot .pp i, .lt-rail-fill { animation: none; transition: none; }
      .hero-beam { animation: none; }
      .hero-divider::before { animation: none; }
    }

    /* ===== UX POLISH ===== */
    :root { scroll-padding-top: 80px; }

    /* Mobile nav backdrop */
    .nav-backdrop {
      display: none; position: fixed; inset: 0; z-index: 99;
      background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
      opacity: 0; transition: opacity 0.3s;
    }
    .nav-backdrop.show { display: block; opacity: 1; }
    @media (max-width: 1040px) {
      .nav-links {
        transform: translateY(-6px); opacity: 0;
        transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s;
        pointer-events: none;
      }
      .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    }

    /* Active nav link */
    .nav-links a.nav-active:not(.nav-cta) { color: var(--white) !important; }

    /* Hero scroll cue */
    .hero-scroll-cue {
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      margin-top: 36px; color: rgba(255,255,255,0.28);
      font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
      cursor: pointer; user-select: none;
      animation: scrollCuePulse 2.6s ease-in-out infinite;
    }
    .hero-scroll-cue svg {
      width: 22px; height: 22px; stroke: currentColor; fill: none;
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
      animation: scrollCueBounce 1.8s ease-in-out infinite;
    }
    @keyframes scrollCueBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
    @keyframes scrollCuePulse { 0%,100%{opacity:0.3} 50%{opacity:0.7} }

    /* Back to top */
    .back-to-top {
      position: fixed; bottom: 28px; right: 28px; z-index: 98;
      width: 44px; height: 44px; border-radius: 12px;
      background: rgba(5,10,30,0.88); border: 1px solid rgba(56,182,255,0.22);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; backdrop-filter: blur(20px);
      opacity: 0; pointer-events: none; transform: translateY(10px);
      transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .back-to-top:hover { background: rgba(26,107,255,0.18); border-color: rgba(56,182,255,0.45); transform: translateY(-3px); }
    .back-to-top svg { width: 18px; height: 18px; stroke: var(--blue); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

    /* Chat disabled state */
    .wa-input-box:disabled { opacity: 0.45; cursor: not-allowed; }
    .wa-send:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; pointer-events: none; }

    /* Mobile touch targets */
    @media (max-width: 1040px) {
      .wa-send { min-width: 44px; min-height: 44px; }
      .wa-ask { min-height: 44px; padding: 10px 14px; }
      .faq-q { min-height: 56px; }
      .testi-nav-btn { min-width: 44px; min-height: 44px; }
      .nav-cta { padding: 12px 18px; min-height: 44px; }
    }