:root{
    --bg:        #050610;
    --bg-2:      #0A0B17;
    --bg-3:      #11121F;
    --card:      #0F1020;
    --card-2:    #14152A;
    --line:      rgba(255,255,255,0.08);
    --line-2:    rgba(255,255,255,0.04);
    --ink:       #F3F4FA;
    --ink-2:     #B1B5CC;
    --ink-3:     #6E7390;
    --ink-4:     #424866;
    --blue:      #5EAEFF;
    --blue-2:    #4A8EFF;
    --orange:    #FF6B2A;
    --orange-2:  #FF8A3D;
    --red:       #FF3D5A;
    --accent:    #FF4500;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter Tight','Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-0.005em;overflow-x:hidden}
  ::selection{background:var(--blue);color:#fff}
  a{color:inherit;text-decoration:none}

  /* ─── Global background: grid + radial light beams ─── */
  .bg-grid{position:fixed;inset:0;background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px);
    background-size:48px 48px;pointer-events:none;z-index:0;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
  .bg-noise{position:fixed;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.06'/></svg>");pointer-events:none;z-index:1;opacity:0.35}

  /* Floating particles (top of page) */
  .particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
  .particles span{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--ink);opacity:0.35;animation:floatUp linear infinite}
  @keyframes floatUp{
    from{transform:translateY(0);opacity:0}
    10%{opacity:0.5}
    90%{opacity:0.5}
    to{transform:translateY(-100vh);opacity:0}
  }

  /* ─── Hero beam (the big diagonal blue + orange glow) ─── */
  .hero-beam{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
  .hero-beam .beam-blue{position:absolute;top:-20%;right:-15%;width:75%;height:120%;background:radial-gradient(ellipse 60% 100% at 65% 30%,rgba(94,174,255,0.32),rgba(94,174,255,0.06) 40%,transparent 70%);filter:blur(40px);animation:beamPulse 8s ease-in-out infinite}
  .hero-beam .beam-orange{position:absolute;bottom:-25%;right:-20%;width:80%;height:100%;background:radial-gradient(ellipse 50% 80% at 70% 70%,rgba(255,107,42,0.34),rgba(255,107,42,0.06) 45%,transparent 75%);filter:blur(50px);animation:beamPulse2 10s ease-in-out infinite}
  /* BRECHER-v1 streaking diagonal light beams */
  .hero-beam .beam-rays{position:absolute;top:-30%;right:-10%;width:90%;height:160%;overflow:hidden;transform:rotate(18deg);transform-origin:top right}
  .hero-beam .beam-rays .ray{position:absolute;top:0;height:100%;width:2px;
    background:linear-gradient(180deg,transparent,rgba(94,174,255,0.9) 35%,rgba(140,200,255,1) 50%,rgba(94,174,255,0.9) 65%,transparent);
    filter:blur(1px);opacity:0;animation:raySweep 7s ease-in-out infinite}
  .hero-beam .beam-rays .ray.w{width:4px;filter:blur(2px)}
  .hero-beam .beam-rays .ray.orange{background:linear-gradient(180deg,transparent,rgba(255,107,42,0.85) 40%,rgba(255,150,90,1) 50%,rgba(255,107,42,0.85) 60%,transparent)}
  @keyframes raySweep{
    0%{opacity:0;transform:translateX(0) scaleY(0.6)}
    12%{opacity:0.9}
    50%{opacity:0.7}
    88%{opacity:0.6}
    100%{opacity:0;transform:translateX(-220px) scaleY(1.1)}
  }
  @keyframes beamPulse{0%,100%{opacity:0.85}50%{opacity:1}}
  @keyframes beamPulse2{0%,100%{opacity:0.7}50%{opacity:1}}

  /* ─── Nav ─── */
  nav{position:relative;z-index:10;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;max-width:1480px;margin:0 auto}
  .logo{font-family:'Inter Tight';font-weight:900;font-size:20px;letter-spacing:-0.04em;display:inline-flex;align-items:center;gap:8px}
  .logo .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--orange));box-shadow:0 0 16px rgba(94,174,255,0.6)}
  .nav-links{display:flex;gap:32px}
  .nav-link{font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:color .2s}
  .nav-link:hover{color:var(--ink)}
  .nav-cta{padding:10px 18px;border-radius:9999px;background:rgba(255,255,255,0.08);color:var(--ink);font-size:12.5px;font-weight:600;border:1px solid var(--line);cursor:pointer;transition:all .2s;backdrop-filter:blur(8px)}
  .nav-cta:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.18)}

  /* ─── Hero ─── */
  .hero{position:relative;z-index:5;text-align:center;padding:60px 32px 100px;max-width:1400px;margin:0 auto}
  .badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:9999px;background:rgba(94,174,255,0.08);border:1px solid rgba(94,174,255,0.18);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--blue);margin-bottom:28px;backdrop-filter:blur(8px);animation:fadeUp .9s cubic-bezier(.16,1,.3,1)}
  .badge .pulse-d{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue);animation:pulse-mini 2s ease-in-out infinite}
  @keyframes pulse-mini{0%,100%{opacity:1}50%{opacity:0.4}}

  h1.hero-title{font-family:'Inter Tight';font-weight:600;font-size:clamp(48px,7vw,108px);line-height:0.98;letter-spacing:-0.045em;margin:0 0 28px;max-width:1100px;margin-left:auto;margin-right:auto;animation:fadeUp 1.1s cubic-bezier(.16,1,.3,1) .1s backwards}
  h1.hero-title .grad{background:linear-gradient(135deg,#fff 30%,var(--blue) 60%,var(--orange) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
  .hero-sub{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:580px;margin:0 auto 40px;animation:fadeUp 1.1s cubic-bezier(.16,1,.3,1) .18s backwards}
  .cta-row{display:flex;gap:12px;justify-content:center;animation:fadeUp 1.1s cubic-bezier(.16,1,.3,1) .25s backwards}
  .btn{padding:14px 26px;border-radius:9999px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;font-family:inherit}
  .btn-primary{background:linear-gradient(135deg,#fff,#dde7ff);color:#0A0B17;box-shadow:0 0 28px rgba(94,174,255,0.35),0 0 0 1px rgba(94,174,255,0.18)}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 38px rgba(94,174,255,0.5),0 0 0 1px rgba(94,174,255,0.35)}
  .btn-ghost{background:rgba(255,255,255,0.05);color:var(--ink);border-color:var(--line);backdrop-filter:blur(8px)}
  .btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.18);transform:translateY(-1px)}

  /* ─── Hero stacked screenshots ─── */
  .hero-stack{position:relative;margin:80px auto 0;max-width:1280px;animation:fadeUp 1.3s cubic-bezier(.16,1,.3,1) .35s backwards}
  .stack-window{position:absolute;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04),0 0 60px rgba(94,174,255,0.18);background:var(--card);transition:transform .8s cubic-bezier(.16,1,.3,1)}
  .stack-window img{display:block;width:100%;height:auto}
  .stack-bar{height:32px;background:linear-gradient(180deg,#1A1B2D,#13142A);display:flex;align-items:center;padding:0 14px;gap:6px;border-bottom:1px solid var(--line)}
  .stack-bar .dot{width:9px;height:9px;border-radius:50%;background:#3a3d50}
  .stack-bar .dot:nth-child(1){background:#FF5C5C}
  .stack-bar .dot:nth-child(2){background:#FFBD2E}
  .stack-bar .dot:nth-child(3){background:#27C93F}
  .stack-back{top:18px;left:50%;transform:translateX(-50%) scale(0.86);width:84%;opacity:0.55;filter:blur(0.5px)}
  .stack-mid{top:80px;left:50%;transform:translateX(-50%) scale(0.93);width:92%;opacity:0.85}
  .stack-front{top:130px;left:50%;transform:translateX(-50%);width:100%;z-index:3}

  /* ─── Trust bar ─── */
  .trust{padding:80px 32px 60px;text-align:center;position:relative;z-index:5}
  .trust-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:32px}
  .trust-logos{display:flex;justify-content:center;align-items:center;gap:56px;flex-wrap:wrap;opacity:0.5;filter:saturate(0)}
  .trust-logo{font-family:'Inter Tight';font-weight:700;font-size:18px;letter-spacing:-0.02em;color:var(--ink-2)}

  /* ─── Section title block ─── */
  section.standard{padding:100px 32px;max-width:1340px;margin:0 auto;position:relative;z-index:5}
  .section-head{text-align:center;margin-bottom:56px}
  .section-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px;display:inline-flex;align-items:center;gap:10px}
  .section-eyebrow::before,.section-eyebrow::after{content:'';display:inline-block;width:24px;height:1px;background:var(--ink-4)}
  .section-title{font-family:'Inter Tight';font-weight:600;font-size:clamp(36px,4.4vw,68px);line-height:1.02;letter-spacing:-0.035em;margin:0;color:var(--ink);max-width:780px;margin-left:auto;margin-right:auto}
  .section-sub{font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:560px;margin:20px auto 0}

  /* ─── 2x2 feature cards (with screenshot mockups) ─── */
  .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .feature-card{position:relative;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.01));overflow:hidden;padding:32px;display:flex;flex-direction:column;min-height:340px;transition:border-color .3s,transform .3s}
  .feature-card:hover{border-color:rgba(255,255,255,0.16);transform:translateY(-3px)}
  .feature-card .icon-wrap{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,rgba(94,174,255,0.18),rgba(94,174,255,0.04));border:1px solid rgba(94,174,255,0.22);display:grid;place-items:center;color:var(--blue);font-size:20px;margin-bottom:20px}
  .feature-card h3{font-family:'Inter Tight';font-weight:600;font-size:22px;letter-spacing:-0.02em;margin:0 0 10px;color:var(--ink)}
  .feature-card p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0 0 20px;max-width:420px}
  .feature-card .visual{margin-top:auto;background:rgba(0,0,0,0.4);border:1px solid var(--line-2);border-radius:10px;padding:16px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);min-height:96px;position:relative;overflow:hidden}
  .feature-card.glow{position:relative}
  .feature-card.glow::before{content:'';position:absolute;top:-40%;right:-30%;width:140%;height:120%;background:radial-gradient(ellipse 30% 60% at 75% 50%,rgba(255,107,42,0.42),transparent 60%);filter:blur(40px);pointer-events:none;animation:glowPulse 5s ease-in-out infinite}
  @keyframes glowPulse{0%,100%{opacity:0.8}50%{opacity:1.1}}
  .feature-card.glow .icon-wrap{background:linear-gradient(135deg,rgba(255,107,42,0.18),rgba(255,107,42,0.04));border-color:rgba(255,107,42,0.3);color:var(--orange)}

  /* Visual mocks inside cards (mini fake-screenshot) */
  .mock-listener{display:flex;align-items:center;gap:10px;padding:9px 11px;background:rgba(94,174,255,0.06);border:1px solid rgba(94,174,255,0.16);border-radius:7px;margin-bottom:8px;font-size:11.5px;color:var(--ink-2);font-family:'Inter Tight'}
  .mock-listener .icon{width:18px;height:18px;border-radius:4px;background:linear-gradient(135deg,var(--blue),var(--blue-2));display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0}
  .mock-listener .num{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-3)}
  .mock-keyword{display:inline-block;padding:5px 10px;background:rgba(255,107,42,0.1);border:1px solid rgba(255,107,42,0.22);border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--orange-2);margin:3px}

  /* ─── Big "AI POWERED" headline section ─── */
  .ai-powered{position:relative;padding:120px 32px 60px;text-align:center;max-width:1480px;margin:0 auto;z-index:5;overflow:hidden}
  .ai-mark{font-family:'Inter Tight';font-weight:600;font-size:clamp(60px,11vw,180px);line-height:0.92;letter-spacing:-0.05em;margin:0;background:linear-gradient(135deg,#fff 30%,var(--blue) 55%,var(--orange) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 200%;animation:gradShift 12s ease-in-out infinite}
  @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  .ai-mark .ai{display:inline-flex;align-items:baseline;gap:14px}
  .ai-mark .ai-icon{position:relative;width:0.8em;height:0.8em;display:inline-block;align-self:center}
  .ai-mark .ai-icon .ring{position:absolute;inset:0;border-radius:50%;border:0.07em solid transparent}
  .ai-mark .ai-icon .ring.r1{border-top-color:var(--blue);border-right-color:var(--blue);animation:apertureSpin 6s linear infinite;box-shadow:0 0 30px rgba(94,174,255,0.5)}
  .ai-mark .ai-icon .ring.r2{inset:0.14em;border-bottom-color:var(--orange);border-left-color:var(--orange);animation:apertureSpin 4s linear infinite reverse;box-shadow:0 0 22px rgba(255,107,42,0.45)}
  .ai-mark .ai-icon .core{position:absolute;inset:0.28em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#cfe6ff,var(--blue) 45%,var(--orange));box-shadow:0 0 40px rgba(94,174,255,0.7),0 0 80px rgba(255,107,42,0.4);animation:corePulse 3s ease-in-out infinite}
  @keyframes apertureSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  @keyframes corePulse{0%,100%{transform:scale(1);opacity:0.92}50%{transform:scale(1.12);opacity:1}}
  @keyframes rotateGlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  .ai-mockup{margin:60px auto 0;max-width:880px;border-radius:16px;border:1px solid var(--line);background:var(--card-2);box-shadow:0 30px 80px rgba(0,0,0,0.5),0 0 80px rgba(94,174,255,0.18);overflow:hidden;position:relative}
  .ai-mockup-bar{padding:14px 18px;border-bottom:1px solid var(--line-2);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
  .ai-mockup-bar .dot{width:8px;height:8px;border-radius:50%;background:#27C93F;box-shadow:0 0 12px #27C93F}
  .ai-chat{padding:24px;display:flex;flex-direction:column;gap:14px}
  .chat-msg{padding:14px 16px;border-radius:11px;max-width:80%;font-size:13.5px;line-height:1.5}
  .chat-msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;border-bottom-right-radius:3px}
  .chat-msg.ai{align-self:flex-start;background:rgba(255,255,255,0.04);border:1px solid var(--line);color:var(--ink-2);border-bottom-left-radius:3px}
  .chat-msg.ai .score{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;background:rgba(94,174,255,0.14);border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--blue);margin-right:6px}

  /* ─── Feature icon grid (5 cols) ─── */
  .icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1140px;margin:60px auto 0;padding:0 32px;position:relative;z-index:5}
  .icon-card{padding:24px 16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.018),transparent);text-align:center;transition:all .25s;cursor:pointer}
  .icon-card:hover{border-color:var(--blue);background:linear-gradient(180deg,rgba(94,174,255,0.06),transparent);transform:translateY(-3px)}
  .icon-card .ic-box{width:36px;height:36px;border-radius:9px;background:rgba(94,174,255,0.1);color:var(--blue);display:grid;place-items:center;margin:0 auto 14px;font-size:16px;border:1px solid rgba(94,174,255,0.2)}
  .icon-card .ic-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink)}

  /* ─── 3-column feature row with mockups ─── */
  .three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
  .three-col .feature-card{min-height:360px}

  /* ─── Integration cloud ─── */
  .integrations{padding:120px 32px;text-align:center;max-width:1340px;margin:0 auto;position:relative;z-index:5;overflow:hidden}
  .int-cloud{position:relative;margin:60px auto 0;max-width:780px;aspect-ratio:1/0.65;display:grid;place-items:center}
  .int-cloud::before{content:'';position:absolute;width:60%;height:60%;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at center,rgba(94,174,255,0.5),rgba(255,107,42,0.3) 50%,transparent 80%);filter:blur(60px);animation:rotateGlow 24s linear infinite}
  .int-orbit{position:absolute;width:75%;height:75%;border:1px solid var(--line);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);animation:orbitSpin 60s linear infinite}
  .int-orbit.inner{width:42%;height:42%;animation:orbitSpin 35s linear infinite reverse}
  @keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
  .int-logo{position:absolute;width:54px;height:54px;border-radius:14px;background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);font-size:22px;font-weight:700;font-family:'Inter Tight';transform:translate(-50%,-50%);box-shadow:0 8px 24px rgba(0,0,0,0.4)}
  .int-logo:hover{border-color:var(--blue)}
  .int-core{position:absolute;left:50%;top:50%;width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--orange));transform:translate(-50%,-50%);display:grid;place-items:center;color:#fff;font-weight:900;font-size:30px;font-family:'Inter Tight';letter-spacing:-0.04em;box-shadow:0 0 60px rgba(94,174,255,0.6),0 0 120px rgba(255,107,42,0.3);z-index:5}

  /* ─── Reviews (3 cards) ─── */
  .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .review-card{padding:24px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
  .review-card .stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
  .review-card p{font-size:14px;line-height:1.55;color:var(--ink);margin:0 0 22px}
  .review-meta{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-2)}
  .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--orange));display:grid;place-items:center;color:#fff;font-weight:600;font-size:13px}
  .review-meta .who{display:flex;flex-direction:column}
  .review-meta .n{font-size:13px;font-weight:600;color:var(--ink)}
  .review-meta .r{font-size:11px;color:var(--ink-3);font-family:'JetBrains Mono',monospace}

  /* ─── 3-step bottom CTA ─── */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .step-card{padding:32px 28px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);transition:all .3s;position:relative;overflow:hidden}
  .step-card:hover{border-color:var(--blue)}
  .step-card .num{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
  .step-card h3{font-family:'Inter Tight';font-weight:600;font-size:20px;letter-spacing:-0.018em;margin:0 0 8px}
  .step-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0}

  /* ─── FAQ accordion ─── */
  .faq{padding:120px 32px;max-width:980px;margin:0 auto;position:relative;z-index:5}
  .faq-list{border-top:1px solid var(--line);margin-top:48px}
  .faq-item{border-bottom:1px solid var(--line);overflow:hidden}
  .faq-q{display:flex;justify-content:space-between;align-items:center;padding:22px 0;cursor:pointer;font-size:15px;font-weight:500;transition:color .2s}
  .faq-q:hover{color:var(--blue)}
  .faq-q .chev{width:24px;height:24px;border-radius:50%;background:transparent;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;color:var(--ink-3);transition:all .3s}
  .faq-item.open .faq-q{color:var(--blue)}
  .faq-item.open .faq-q .chev{transform:rotate(45deg);background:var(--blue);color:#fff;border-color:var(--blue)}
  .faq-a{max-height:0;opacity:0;font-size:14px;color:var(--ink-2);line-height:1.6;transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .35s,padding .35s}
  .faq-item.open .faq-a{max-height:300px;opacity:1;padding:0 0 22px}

  /* ─── Final CTA section ─── */
  .final-cta{position:relative;padding:120px 32px 100px;text-align:center;max-width:1480px;margin:0 auto;z-index:5;overflow:hidden}
  .final-cta::before{content:'';position:absolute;left:50%;bottom:-20%;width:120%;height:80%;background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(255,107,42,0.35),rgba(94,174,255,0.25) 50%,transparent 75%);filter:blur(60px);transform:translateX(-50%);pointer-events:none;animation:beamPulse 8s ease-in-out infinite}
  .final-cta h2{font-family:'Inter Tight';font-weight:600;font-size:clamp(48px,6vw,92px);line-height:1.02;letter-spacing:-0.04em;margin:0 0 24px;position:relative;z-index:2}
  .final-cta p{font-size:16px;color:var(--ink-2);margin:0 0 36px;position:relative;z-index:2}
  .final-cta .cta-row{position:relative;z-index:2}

  /* ─── Footer ─── */
  footer{position:relative;padding:60px 32px 40px;max-width:1480px;margin:0 auto;border-top:1px solid var(--line);z-index:5}
  .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;font-size:13.5px;color:var(--ink-2)}
  footer h4{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
  footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  footer a:hover{color:var(--ink)}
  .footer-brand p{max-width:340px;margin:14px 0 0;line-height:1.55}
  .footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);letter-spacing:0.06em;text-transform:uppercase}

  /* ─── Reveal animations on scroll ─── */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
  .reveal.in-view{opacity:1;transform:none}
  .stagger > *{transition-delay:calc(var(--i,0) * 70ms)}

  /* Keyframes */
  @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  @media (max-width:980px){
    nav{padding:14px 18px}
    .nav-links{display:none}
    .hero{padding:32px 18px 60px}
    .hero-stack{margin-top:48px;min-height:300px}
    .stack-back,.stack-mid,.stack-front{position:relative;left:auto;top:auto;transform:none;width:100%;margin-bottom:14px;opacity:1}
    .feature-grid,.three-col,.reviews-grid,.steps{grid-template-columns:1fr;gap:12px}
    .icon-grid{grid-template-columns:repeat(2,1fr);padding:0 18px}
    section.standard,.integrations,.final-cta,.ai-powered{padding-left:18px;padding-right:18px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    .footer-bottom{flex-direction:column;gap:8px;text-align:center}
    .int-cloud{aspect-ratio:1/0.9}
  }
  .scroll-progress{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:200;background:linear-gradient(90deg,var(--blue),var(--orange));box-shadow:0 0 12px rgba(94,174,255,0.6);transition:width .1s linear}

  /* Spotlight glow that follows cursor in hero */
  .spotlight{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(94,174,255,0.10),transparent 65%);pointer-events:none;transform:translate(-50%,-50%);z-index:3;opacity:0;transition:opacity .4s;mix-blend-mode:screen}

  /* Sequential chat reveal: messages start hidden, JS adds .show */
  .chat-msg{opacity:0;transform:translateY(10px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
  .chat-msg.show{opacity:1;transform:none}
  .typing-dots{align-self:flex-start;display:inline-flex;gap:4px;padding:14px 16px}
  .typing-dots span{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:typBounce 1.2s ease-in-out infinite}
  .typing-dots span:nth-child(2){animation-delay:.15s}
  .typing-dots span:nth-child(3){animation-delay:.3s}
  @keyframes typBounce{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-5px);opacity:1}}

  /* 3D tilt wrapper for hero stack */
  .hero-stack{transform-style:preserve-3d;perspective:1400px}
  .hero-stack .stack-window{will-change:transform}

  /* ─── Pricing (ported, real plans) ─── */
  .pricing{padding:100px 32px;max-width:1180px;margin:0 auto;position:relative;z-index:5}
  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
  .pp-card{position:relative;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.01));padding:34px 28px;display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
  .pp-card:hover{border-color:rgba(255,255,255,0.16);transform:translateY(-3px)}
  .pp-card.feat{border-color:rgba(94,174,255,0.4);box-shadow:0 0 50px rgba(94,174,255,0.12)}
  .pp-card.feat::before{content:'Most Popular';position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--blue),var(--orange));color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;padding:4px 12px;border-radius:9999px;font-weight:700}
  .pp-name{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
  .pp-price{display:flex;align-items:baseline;gap:2px;margin-bottom:6px}
  .pp-price .cur{font-size:22px;font-weight:700;color:var(--ink-2)}
  .pp-price .amt{font-family:'Inter Tight';font-size:50px;font-weight:600;letter-spacing:-0.04em;line-height:1;color:var(--ink)}
  .pp-price .per{font-size:13px;color:var(--ink-3);margin-left:4px}
  .pp-tag{font-size:13.5px;color:var(--ink-2);margin:0 0 22px;min-height:38px;line-height:1.5}
  .pp-feats{list-style:none;padding:0;margin:0 0 26px;flex:1;display:flex;flex-direction:column;gap:11px}
  .pp-feats li{font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:10px}
  .pp-feats li svg{flex-shrink:0;color:var(--blue)}
  .pp-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:9999px;font-size:13.5px;font-weight:600;border:1px solid var(--line);background:rgba(255,255,255,0.04);color:var(--ink);transition:all .2s}
  .pp-btn:hover{border-color:var(--blue);background:rgba(94,174,255,0.08)}
  .pp-card.feat .pp-btn{background:linear-gradient(135deg,#fff,#dde7ff);color:#0A0B17;border-color:transparent;box-shadow:0 0 24px rgba(94,174,255,0.3)}
  .pp-trial{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#27C93F;text-align:center;margin-top:12px;letter-spacing:0.04em}
  .pp-extra{text-align:center;margin-top:36px;font-size:13.5px;color:var(--ink-2)}
  .pp-extra a{color:var(--blue);font-weight:600}
  @media(max-width:980px){.pricing-grid{grid-template-columns:1fr}}

/* ════ SHARED MULTI-PAGE COMPONENTS ════ */
/* Dropdown nav */
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-login{font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:color .2s}
.nav-login:hover{color:var(--ink)}
.nav-item{position:relative}
.nav-item .nav-link{display:inline-flex;align-items:center;gap:5px}
.nav-item .nav-link svg{width:11px;height:11px;transition:transform .25s;opacity:.7}
.nav-item:hover .nav-link svg{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:220px;padding:8px;
  background:rgba(15,16,32,0.96);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,0.5);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:30}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
.dropdown a{display:block;padding:10px 12px;border-radius:9px;font-size:13.5px;color:var(--ink-2);transition:background .15s,color .15s}
.dropdown a:hover{background:rgba(94,174,255,0.08);color:var(--ink)}
.dropdown a .d-sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* Page hero (smaller than landing hero) */
.page-hero{position:relative;z-index:5;text-align:center;padding:80px 32px 40px;max-width:880px;margin:0 auto}
.page-hero h1{font-family:'Inter Tight';font-weight:600;font-size:clamp(40px,5.5vw,76px);line-height:1.0;letter-spacing:-0.04em;margin:18px 0 22px}
.page-hero h1 .grad{background:linear-gradient(135deg,#fff 30%,var(--blue) 60%,var(--orange) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero p{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:560px;margin:0 auto}
.page-hero .cta-row{margin-top:34px}

/* Generic split row (text + visual) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:0 auto;max-width:1200px;padding:60px 32px}
.split.rev .split-text{order:2}
.split h2{font-family:'Inter Tight';font-weight:600;font-size:clamp(28px,3.2vw,44px);letter-spacing:-0.03em;line-height:1.08;margin:0 0 16px}
.split p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0 0 16px;max-width:480px}
.split .feat-list{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:12px}
.split .feat-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
.split .feat-list svg{flex-shrink:0;color:var(--blue);margin-top:2px}
.split-visual{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card-2);box-shadow:0 30px 70px rgba(0,0,0,0.45),0 0 60px rgba(94,174,255,0.12)}
.split-visual .bar{height:32px;background:linear-gradient(180deg,#1A1B2D,#13142A);display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line)}
.split-visual .bar i{width:9px;height:9px;border-radius:50%;background:#3a3d50;display:block}
.split-visual .bar i:nth-child(1){background:#FF5C5C}.split-visual .bar i:nth-child(2){background:#FFBD2E}.split-visual .bar i:nth-child(3){background:#27C93F}
.split-visual img{display:block;width:100%}
.split-visual .pad{padding:22px}

/* Blog cards */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1200px;margin:0 auto;padding:0 32px}
.blog-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.01));transition:border-color .3s,transform .3s;display:flex;flex-direction:column}
.blog-card:hover{border-color:rgba(94,174,255,0.4);transform:translateY(-4px)}
.blog-card .thumb{height:150px;background:linear-gradient(135deg,rgba(94,174,255,0.25),rgba(255,107,42,0.22));position:relative;overflow:hidden}
.blog-card .thumb::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(255,255,255,0.18),transparent 60%)}
.blog-card .body{padding:22px;display:flex;flex-direction:column;flex:1}
.blog-card .tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.blog-card h3{font-family:'Inter Tight';font-weight:600;font-size:18px;letter-spacing:-0.02em;margin:0 0 8px;line-height:1.2}
.blog-card p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:0 0 16px;flex:1}
.blog-card .meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3)}

/* prose for legal/about */
.prose{max-width:760px;margin:0 auto;padding:20px 32px 40px;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.prose h2{font-family:'Inter Tight';color:var(--ink);font-weight:600;font-size:26px;letter-spacing:-0.02em;margin:40px 0 14px}
.prose p{margin:0 0 18px}

@media(max-width:980px){
  .nav-links{display:none}
  .split{grid-template-columns:1fr;gap:24px;padding:40px 18px}
  .split.rev .split-text{order:0}
  .blog-grid{grid-template-columns:1fr;padding:0 18px}
}

/* ════ NAV FIX: hover bridge + mobile menu ════ */
/* invisible bridge under each nav-item so moving the cursor into the dropdown
   does not cross dead space (which was closing the menu) */
.nav-item::after{content:'';position:absolute;left:0;right:0;top:100%;height:16px}
.dropdown{transition:opacity .18s}              /* drop the translateY jump */
.nav-item:hover .dropdown{transform:translateX(-50%) translateY(8px)}

/* hamburger (injected by scrada.js) */
.nav-toggle{display:none;background:rgba(255,255,255,0.05);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 10px;cursor:pointer;line-height:0}
.nav-toggle svg{width:20px;height:20px;display:block}

@media(max-width:980px){
  .nav-toggle{display:inline-flex;align-items:center}
  .nav-links{display:none;position:fixed;top:58px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(8,9,20,0.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    padding:10px 14px 20px;z-index:40;max-height:calc(100vh - 58px);overflow:auto}
  .nav-links.open{display:flex}
  .nav-item{width:100%}
  .nav-item::after{display:none}
  .nav-item > .nav-link,.nav-links > a.nav-link{display:flex;justify-content:space-between;padding:13px 8px;font-size:15px;border-bottom:1px solid var(--line-2)}
  .nav-item .nav-link svg{display:none}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none!important;background:transparent;border:none;box-shadow:none;backdrop-filter:none;min-width:0;padding:4px 0 12px 14px}
  .dropdown a{padding:9px 8px;font-size:13.5px}
}

/* JS hover-intent dropdown (gap-proof, with close delay) */
.nav-item.drop-open .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
@media(max-width:980px){ .nav-item.drop-open .dropdown{transform:none!important} }

/* ════ Single clean hero shot (replaces stacked windows) ════ */
.hero-shot{max-width:1040px;margin:60px auto 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--card);box-shadow:0 40px 100px rgba(0,0,0,0.55),0 0 80px rgba(94,174,255,0.16);
  animation:fadeUp 1.3s cubic-bezier(.16,1,.3,1) .35s backwards}
.hero-shot-bar{height:36px;background:linear-gradient(180deg,#1A1B2D,#13142A);display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid var(--line)}
.hero-shot-bar i{width:11px;height:11px;border-radius:50%;display:block;background:#3a3d50}
.hero-shot-bar i:nth-child(1){background:#FF5C5C}.hero-shot-bar i:nth-child(2){background:#FFBD2E}.hero-shot-bar i:nth-child(3){background:#27C93F}
.hero-shot img{display:block;width:100%;height:auto}

/* ════ MOBILE polish ════ */
@media(max-width:980px){
  section.standard{padding:60px 18px}
  .page-hero{padding:48px 18px 24px}
  .final-cta{padding:72px 18px 64px}
  .ai-powered{padding:60px 18px 28px}
  .integrations{padding:64px 18px}
  .faq{padding:64px 18px}
  .split{padding:36px 18px}
  .hero{padding:24px 18px 56px}
  .hero-shot{margin-top:36px;border-radius:12px}
  .section-head{margin-bottom:36px}
  .int-cloud{max-width:420px}
}
@media(max-width:560px){
  nav{padding:12px 16px}
  h1.hero-title{font-size:38px;line-height:1.05}
  .hero-sub{font-size:15px}
  .page-hero h1{font-size:34px}
  .section-title{font-size:28px}
  .section-sub{font-size:14.5px}
  .ai-mark{font-size:46px}
  .final-cta h2{font-size:38px}
  .split h2{font-size:25px}
  .cta-row{flex-direction:column;align-items:stretch;width:100%}
  .cta-row .btn{justify-content:center;width:100%}
  .icon-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pp-price .amt{font-size:44px}
  .feature-card{padding:24px;min-height:0}
  .badge{font-size:10px}
}

/* ════ Hero live-lead-feed (replaces dashboard screenshot) ════ */
.hero-feed{max-width:660px;margin:54px auto 0;text-align:left;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,var(--card-2),var(--card));box-shadow:0 40px 100px rgba(0,0,0,0.5),0 0 70px rgba(94,174,255,0.14);
  animation:fadeUp 1.2s cubic-bezier(.16,1,.3,1) .35s backwards}
.hero-feed-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-3)}
.hero-feed-bar i{width:10px;height:10px;border-radius:50%;background:#3a3d50;display:block}
.hero-feed-bar i:nth-child(1){background:#FF5C5C}.hero-feed-bar i:nth-child(2){background:#FFBD2E}.hero-feed-bar i:nth-child(3){background:#27C93F}
.hero-feed-bar .ttl{margin-left:6px}
.hero-feed-bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:#5BE584;letter-spacing:0.08em}
.hero-feed-bar .live::before{content:'';width:6px;height:6px;border-radius:50%;background:#27C93F;box-shadow:0 0 8px #27C93F;animation:pulse-mini 1.6s ease-in-out infinite}
.hero-feed-body{padding:10px}
.lead-row{display:flex;align-items:center;gap:14px;padding:14px;border-radius:11px;transition:background .2s;opacity:0;animation:fadeUp .6s cubic-bezier(.16,1,.3,1) forwards}
.lead-row:nth-child(1){animation-delay:.5s}.lead-row:nth-child(2){animation-delay:.75s}.lead-row:nth-child(3){animation-delay:1s}.lead-row:nth-child(4){animation-delay:1.25s}
.lead-row + .lead-row{margin-top:2px}
.lead-row:hover{background:rgba(255,255,255,0.03)}
.lead-main{min-width:0;flex:1}
.lead-main .sub{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);margin-bottom:5px}
.lead-main .txt{font-size:14px;color:var(--ink);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score{flex-shrink:0;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px;padding:6px 11px;border-radius:9px;display:inline-flex;align-items:center;gap:7px}
.score::before{content:'';width:7px;height:7px;border-radius:50%}
.score.s-hi{background:rgba(39,201,63,0.12);color:#5BE584}.score.s-hi::before{background:#27C93F;box-shadow:0 0 8px #27C93F}
.score.s-mid{background:rgba(94,174,255,0.12);color:#8CC8FF}.score.s-mid::before{background:#5EAEFF}
.score.s-lo{background:rgba(255,255,255,0.05);color:var(--ink-3)}.score.s-lo::before{background:var(--ink-4)}
@media(max-width:560px){.hero-feed{margin-top:32px}.lead-row{padding:12px;gap:10px}.lead-main .txt{font-size:13px}.score{font-size:12px;padding:5px 9px}}


/* ─── Hero stat strip (replaces the fake live-feed mockup) ─── */
.hero-stats{display:flex;gap:56px;justify-content:center;flex-wrap:wrap;margin-top:56px}
.hero-stat{display:flex;flex-direction:column;align-items:center;gap:7px}
.hero-stat .hs-num{font-family:'Inter Tight',sans-serif;font-size:42px;font-weight:700;letter-spacing:-0.03em;line-height:1;background:linear-gradient(135deg,#fff 28%,var(--blue) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stat .hs-lbl{font-size:13px;color:var(--ink-3);max-width:160px;text-align:center;line-height:1.45}
@media(max-width:560px){.hero-stats{gap:30px row-gap:26px;margin-top:40px}.hero-stat .hs-num{font-size:32px}}

/* fix clipped descenders (g,y,p) on gradient-clipped headings */
h1.hero-title .grad,.page-hero h1 .grad,.ai-mark{padding-bottom:0.2em;margin-bottom:-0.2em}