*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw}

:root{
  --bg:#F5F7FD;
  --surface:#ffffff;
  --surface2:#EDF0FA;
  --surface3:#DDE3F5;
  --border:rgba(55,90,210,0.08);
  --border2:rgba(55,90,210,0.18);
  --blue:#3558D6;
  --blue-light:#7B99E8;
  --ink:#080E20;
  --ink2:#455270;
  --ink3:#8E9BB8;
  --green:#3D61DD;
  --red:#F59E0B;
  --amber:#F59E0B;
  --grad:linear-gradient(135deg,#7B99E8 0%,#3558D6 100%);
  --shadow:0 1px 3px rgba(0,0,0,0.04),0 8px 24px rgba(53,88,214,0.06);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06),0 12px 32px rgba(53,88,214,0.1);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.07),0 24px 64px rgba(53,88,214,0.14);
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

body{
  font-family:var(--font-sans);
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;line-height:1.6;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(61,97,221,0.055) 1px,transparent 1px);
  background-size:28px 28px
}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(61,97,221,0.2);border-radius:3px}

/* ── DARK MODE ── */
[data-theme="dark"]{
  --bg:#04080F;
  --surface:#07101E;
  --surface2:#0C1628;
  --surface3:#111E38;
  --border:rgba(100,140,255,0.08);
  --border2:rgba(100,140,255,0.16);
  --blue:#6B8FF5;
  --blue-light:#9AB4FA;
  --ink:#E8EFFF;
  --ink2:#6E85AB;
  --ink3:#3D5070;
  --grad:linear-gradient(135deg,#7B9EF8 0%,#4A6CF7 100%);
  --shadow:0 1px 3px rgba(0,0,0,0.7),0 8px 24px rgba(0,0,0,0.4);
  --shadow-md:0 4px 12px rgba(0,0,0,0.7),0 12px 32px rgba(0,0,0,0.5);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.7),0 24px 64px rgba(0,0,0,0.6);
}
[data-theme="dark"] body::before{background-image:radial-gradient(rgba(132,155,229,0.06) 1px,transparent 1px)}
[data-theme="dark"] nav{background:rgba(7,11,23,0.95);border-bottom:1px solid rgba(132,155,229,0.08)}
[data-theme="dark"] nav.scrolled{box-shadow:0 1px 24px rgba(0,0,0,0.5)}
[data-theme="dark"] .logos-track-wrap::before{background:linear-gradient(90deg,#0C1220,transparent)}
[data-theme="dark"] .logos-track-wrap::after{background:linear-gradient(-90deg,#0C1220,transparent)}
[data-theme="dark"] .hero-ambient{background-image:linear-gradient(125deg,rgba(115,103,240,0.1) 0%,rgba(78,205,196,0.05) 25%,rgba(115,103,240,0.14) 50%,rgba(78,205,196,0.05) 75%,rgba(115,103,240,0.1) 100%)}
[data-theme="dark"] .sky-b1{background:radial-gradient(circle,rgba(115,103,240,0.5) 0%,rgba(115,103,240,0) 70%)}
[data-theme="dark"] .sky-b2{background:radial-gradient(circle,rgba(61,97,221,0.45) 0%,rgba(61,97,221,0) 70%)}
[data-theme="dark"] .sky-b3{background:radial-gradient(circle,rgba(78,205,196,0.32) 0%,rgba(78,205,196,0) 70%)}
[data-theme="dark"] .sky-b4{background:radial-gradient(ellipse,rgba(99,91,255,0.22) 0%,rgba(99,91,255,0) 70%)}
[data-theme="dark"] .orb-1{background:rgba(115,103,240,0.12)}
[data-theme="dark"] .orb-2{background:rgba(78,205,196,0.08)}
[data-theme="dark"] .urgency-wrap::before{background:radial-gradient(700px at 50% 100%,rgba(132,155,229,0.08),transparent)}
[data-theme="dark"] .final-cta::before{background:radial-gradient(800px at 50% 100%,rgba(132,155,229,0.08),transparent)}
[data-theme="dark"] .guarantee-box::before{background:radial-gradient(600px at 0 50%,rgba(132,155,229,0.06),transparent)}
[data-theme="dark"] .compare-table td.hl{background:rgba(132,155,229,0.06)}
[data-theme="dark"] .compare-table th{background:#111827}
[data-theme="dark"] .compare-table th.hl{background:#1A2540}
[data-theme="dark"] html{color-scheme:dark}
html{transition:background 0.3s ease,color 0.3s ease}

/* ── THEME TOGGLE — handled by motion.css ── */

/* ── ACCESSIBILITY ── */
/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .logos-track{animation:none}
  .ai-sky-blob,.orb,.badge-dot,.status-dot{animation:none!important;opacity:1!important}
}
/* Focus visible — keyboard navigation */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
/* High contrast support */
@media(prefers-contrast:more){
  :root{--border:rgba(61,97,221,0.35);--border2:rgba(61,97,221,0.5);--ink2:#1f2937;--ink3:#374151}
  [data-theme="dark"]{--border:rgba(132,155,229,0.35);--border2:rgba(132,155,229,0.55);--ink2:#c8d5f0;--ink3:#8B9FC0}
  .btn-primary,.nav-cta,.offer-cta{outline:2px solid currentColor}
}
/* Skip to content — screen reader */
.skip-link{position:absolute;top:-100%;left:0;padding:12px 20px;background:var(--blue);color:#fff;font-weight:700;font-size:14px;z-index:9999;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{top:0}

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

/* NAV */
nav{
  position:sticky;top:0;left:0;right:0;z-index:300;
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 5%;gap:16px;
  background:rgba(246,249,255,0.97);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(61,97,221,0.09);
  transition:box-shadow 0.3s ease;
  width:100%;box-sizing:border-box;overflow:visible
}
nav.scrolled{box-shadow:0 2px 20px rgba(61,97,221,0.08)}
.logo{font-size:18px;font-weight:900;letter-spacing:-0.5px;color:var(--ink);text-decoration:none;white-space:nowrap;flex-shrink:0}
.logo span{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* center links */
.nav-links{display:flex;align-items:center;gap:24px;flex:1;justify-content:center}
.nav-links>a{color:var(--ink2);font-size:13.5px;font-weight:500;text-decoration:none;transition:color 0.2s;white-space:nowrap}
.nav-links>a:hover{color:var(--blue)}
/* right side */
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-cta{
  background:var(--grad);color:#fff;font-size:13px;font-weight:700;
  padding:9px 18px;border-radius:100px;text-decoration:none;white-space:nowrap;
  box-shadow:0 2px 16px rgba(61,97,221,0.3);transition:opacity 0.2s,transform 0.2s
}
.nav-cta:hover{opacity:0.88;transform:translateY(-1px)}
/* dropdown */
.nav-dropdown{position:relative}
.nav-dropdown-btn{background:none;border:none;font-size:13.5px;font-weight:500;color:var(--ink2);cursor:pointer;padding:0;transition:color 0.2s;white-space:nowrap}
.nav-dropdown-btn:hover{color:var(--blue)}
.nav-dropdown-content{
  display:none;position:absolute;top:calc(100% + 12px);left:0;
  background:#fff;border:1px solid #e5e7eb;border-radius:10px;
  padding:1rem;min-width:260px;
  box-shadow:0 8px 32px rgba(0,0,0,0.13);z-index:9999;
  flex-direction:column;gap:0.5rem
}
.nav-dropdown.open .nav-dropdown-content{display:flex}
.dropdown-group{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.dropdown-group:last-child{margin-bottom:0}
.dropdown-heading{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;margin-bottom:3px}
.nav-dropdown-content a{font-size:.85rem;color:#374151;padding:3px 0;text-decoration:none;transition:color 0.15s}
.nav-dropdown-content a:hover{color:var(--blue)}
/* mobile — hide links, keep logo + cta */
@media(max-width:860px){
  .nav-links{display:none}
}

/* HERO */
.hero-wrap{
  position:relative;z-index:1;max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:64px;padding:72px 6% 80px
}
.hero-left{display:flex;flex-direction:column;align-items:flex-start}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:100px;padding:7px 16px;
  font-size:12px;font-weight:700;color:var(--blue);margin-bottom:28px
}
.badge-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.5)}}

/* ── ENTRANCE ANIMATIONS (exact TryHolo values) ── */
@keyframes fadeSlideTop{
  from{opacity:0.001;transform:perspective(1200px) translateY(-30px)}
  to{opacity:1;transform:perspective(1200px) translateY(0)}
}
@keyframes fadeSlideUp{
  /* TryHolo UI Container: 150px, spring bounce:0.2, duration:0.4s */
  from{opacity:0.001;transform:translateY(150px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Motion.com EXACT bg-subtle-shift ── */
@keyframes bg-subtle-shift{
  0%  {background-position:0%}
  50% {background-position:100%}
  to  {background-position:0%}
}
.hero-ambient{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(125deg,
    rgba(115,103,240,0.05) 0%,
    rgba(78,205,196,0.05) 25%,
    rgba(115,103,240,0.08) 50%,
    rgba(78,205,196,0.05) 75%,
    rgba(115,103,240,0.05) 100%);
  background-size:200% 200%;
  animation:bg-subtle-shift 12s ease-in-out infinite
}

/* ── Hero staggered entrance — TryHolo spring: damping:40 mass:1 stiffness:150 ── */
/* Approximated with cubic-bezier(0.16,1,0.3,1) — identical feel */
.hero-badge{animation:fadeSlideTop 0.7s cubic-bezier(0.16,1,0.3,1) 0.05s both;will-change:transform}
.hero-h1{animation:fadeSlideTop 0.75s cubic-bezier(0.16,1,0.3,1) 0.15s both;will-change:transform}
.hero-sub{animation:fadeSlideTop 0.75s cubic-bezier(0.16,1,0.3,1) 0.22s both;will-change:transform}
.hero-ctas{animation:fadeSlideTop 0.75s cubic-bezier(0.16,1,0.3,1) 0.3s both;will-change:transform}
.hero-proof{animation:fadeIn 0.8s ease 0.4s both}
/* UI mockup: TryHolo exact — translateY(150px), spring bounce:0.2, duration:0.4s */
.hero-right{animation:fadeSlideUp 0.8s cubic-bezier(0.34,1.2,0.64,1) 0.2s both;will-change:transform}

/* ── AI SKY — giant aurora gradient behind hero ── */
@keyframes skyDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.05)}}
@keyframes skyDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.08)}}
@keyframes skyDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,-30px) scale(1.03)}}
.ai-sky{
  position:absolute;inset:-20%;z-index:0;pointer-events:none;overflow:hidden
}
.ai-sky-blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:0}
/* Blob 1 — large violet, top-center */
.sky-b1{
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(115,103,240,0.45) 0%,rgba(115,103,240,0) 70%);
  top:-10%;left:20%;
  animation:orbIn 5s cubic-bezier(0.34,1,0.64,1) 0.3s forwards,
            skyDrift1 18s ease-in-out 5.3s infinite
}
/* Blob 2 — electric blue, top-right */
.sky-b2{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(61,97,221,0.38) 0%,rgba(61,97,221,0) 70%);
  top:-5%;right:-5%;
  animation:orbIn 5s cubic-bezier(0.34,1,0.64,1) 0.5s forwards,
            skyDrift2 22s ease-in-out 5.5s infinite
}
/* Blob 3 — teal/cyan, bottom-left */
.sky-b3{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(78,205,196,0.28) 0%,rgba(78,205,196,0) 70%);
  bottom:0%;left:-5%;
  animation:orbIn 5s cubic-bezier(0.34,1,0.64,1) 0.7s forwards,
            skyDrift3 16s ease-in-out 5.7s infinite
}
/* Blob 4 — deep indigo center glow */
.sky-b4{
  width:800px;height:400px;
  background:radial-gradient(ellipse,rgba(99,91,255,0.18) 0%,rgba(99,91,255,0) 70%);
  top:10%;left:10%;
  animation:orbIn 6s cubic-bezier(0.34,1,0.64,1) 0.2s forwards,
            skyDrift1 25s ease-in-out 6.2s infinite
}

/* ── Orb blobs — TryHolo: duration:5s spring, delay:0.4s ── */

.hero-h1{
  font-size:clamp(40px,5.5vw,68px);font-weight:900;line-height:1.05;
  letter-spacing:-2.5px;margin-bottom:22px;color:var(--ink)
}
.hero-sub{font-size:18px;color:var(--ink2);line-height:1.7;max-width:520px;margin-bottom:36px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}

.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--grad);color:#fff;font-size:15px;font-weight:700;
  padding:14px 32px;border-radius:10px;text-decoration:none;
  box-shadow:0 4px 20px rgba(61,97,221,0.3);transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(61,97,221,0.45);filter:brightness(1.05)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);color:var(--ink);font-size:15px;font-weight:600;
  padding:14px 28px;border-radius:10px;text-decoration:none;
  border:1px solid var(--border2);box-shadow:var(--shadow);transition:all 0.2s
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--surface2)}

.hero-proof{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:28px;border-top:none
}
.proof-avatars{display:flex}
.proof-av{
  width:28px;height:28px;border-radius:50%;margin-left:-8px;
  background:var(--grad);border:2px solid white;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:#fff
}
.proof-av:first-child{margin-left:0}
.proof-div{display:none}
.proof-stars{color:#FBBF24;font-size:13px;letter-spacing:1px}
.proof-text{font-size:13px;color:var(--ink2)}
.proof-text strong{color:var(--ink);font-weight:700}

/* HERO MOCKUP */
.hero-right{position:relative;display:flex;justify-content:center;align-items:center}
.mockup-wrap{position:relative;width:100%;max-width:500px}
.mockup-card{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:16px;box-shadow:var(--shadow-md);overflow:hidden
}
.mockup-header{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface)
}
.mockup-title{font-size:13px;font-weight:700;color:var(--ink)}
.mockup-status{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--green)}
.status-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:blink 2s ease-in-out infinite}
.mockup-body{padding:0}
.mock-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--border)
}
.mock-row:last-child{border-bottom:none}
.mock-ico{
  width:32px;height:32px;border-radius:8px;
  background:var(--surface2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0
}
.mock-info{flex:1}
.mock-label{font-size:13px;color:var(--ink);font-weight:600}
.mock-sub{font-size:11px;color:var(--ink3);margin-top:2px}
.mock-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:100px;white-space:nowrap}
.mb-live{background:rgba(61,97,221,0.1);color:var(--green);border:1px solid rgba(61,97,221,0.2)}
.mb-run{background:rgba(61,97,221,0.08);color:var(--blue);border:1px solid rgba(61,97,221,0.15)}
.mb-q{background:rgba(245,158,11,0.1);color:#D97706;border:1px solid rgba(245,158,11,0.2)}

.float-stat{
  position:absolute;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:13px 17px;box-shadow:var(--shadow-md)
}
.float-stat-1{bottom:-22px;left:-28px;animation:fc 6s ease-in-out infinite}
.float-stat-2{top:-14px;right:-20px;animation:fc 6s ease-in-out infinite;animation-delay:-3s}
@keyframes fc{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fs-num{font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-0.5px;line-height:1}
.fs-num.up{color:var(--green)}
.fs-label{font-size:11px;color:var(--ink3);margin-top:3px}

.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;will-change:transform}
/* TryHolo blob entrance: 5s spring, bounce:0.2, delay:0.4s — then continuous drift */
.orb-1{width:520px;height:520px;background:rgba(115,103,240,0.09);top:-100px;right:-100px;
  animation:orbIn 5s cubic-bezier(0.34,1,0.64,1) 0.4s both, fo 14s ease-in-out 5.4s infinite}
.orb-2{width:420px;height:420px;background:rgba(78,205,196,0.06);bottom:-60px;left:-100px;
  animation:orbIn 5s cubic-bezier(0.34,1,0.64,1) 0.6s both, fo 16s ease-in-out 5.6s infinite}
@keyframes orbIn{from{opacity:0;transform:scale(0.6)}to{opacity:1;transform:scale(1)}}
@keyframes fo{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,20px)}}

@media(max-width:900px){
  .hero-wrap{grid-template-columns:1fr;padding:100px 6% 60px;min-height:auto}
  .hero-right{display:none}
}

/* LOGOS */
.logos-section{
  position:relative;z-index:1;padding:32px 6%;
  border-top:1px solid rgba(61,97,221,0.07);border-bottom:1px solid rgba(61,97,221,0.07);
  background:var(--surface)
}
.logos-label{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);text-align:center;margin-bottom:22px}
.logos-track-wrap{position:relative;overflow:hidden}
.logos-track-wrap::before,.logos-track-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.logos-track-wrap::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.logos-track-wrap::after{right:0;background:linear-gradient(-90deg,var(--surface),transparent)}
.logos-track{display:flex;gap:40px;animation:scroll 32s linear infinite;white-space:nowrap;align-items:flex-start;padding:8px 0}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.logo-chip{
  display:inline-flex;flex-direction:column;align-items:center;gap:7px;
  flex-shrink:0;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--ink3);
  width:72px;text-align:center;
  transition:opacity 0.2s
}
.logo-chip:hover{opacity:0.7}
.logo-chip svg,.logo-chip img{flex-shrink:0}

/* CALLOUT BAR */
.callout-bar{
  position:relative;z-index:1;background:var(--surface2);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:22px 6%;display:flex;align-items:center;justify-content:center;
  gap:28px;flex-wrap:wrap;text-align:center
}
.cb-item{font-size:14px;color:var(--ink2)}
.cb-item strong{color:var(--ink);font-weight:700}
.cb-dot{width:5px;height:5px;background:var(--blue-light);border-radius:50%;flex-shrink:0}

/* KPI STRIP */
.kpi-strip{
  position:relative;z-index:1;background:var(--surface);
  border-bottom:1px solid var(--border);padding:52px 6%
}
.kpi-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.kpi-item{text-align:center;padding:0 24px;border-right:1px solid var(--border)}
.kpi-item:last-child{border-right:none}
.kpi-num{font-size:44px;font-weight:900;color:var(--ink);letter-spacing:-2px;line-height:1}
.kpi-num.grad{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.kpi-label{font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.4}
@media(max-width:700px){
  .kpi-inner{grid-template-columns:1fr 1fr}
  .kpi-item{padding:20px 16px;border-right:none;border-bottom:1px solid var(--border)}
  .kpi-item:nth-child(odd){border-right:1px solid var(--border)}
  .kpi-item:nth-last-child(-n+2):not(:nth-child(odd)){border-bottom:none}
  .kpi-item:last-child{border-bottom:none}
}

/* SECTIONS */
section{position:relative;z-index:1;padding:100px 6%}
.section-inner{max-width:1080px;margin:0 auto}
.section-header{margin-bottom:48px}
.section-header.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue);margin-bottom:16px
}
.eyebrow{margin-bottom:12px}
.eyebrow::before{display:none}
.section-title{font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:-1.5px;line-height:1.1;color:var(--ink);margin-bottom:16px}
.section-sub{font-size:17px;color:var(--ink2);line-height:1.65;max-width:520px}

/* HOW IT WORKS — Holo numbered style */
.steps-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface)
}
.step-item{padding:40px 32px;border-right:1px solid var(--border);transition:background 0.2s}
.step-item:last-child{border-right:none}
.step-item:hover{background:var(--surface2)}
.step-big-num{
  font-size:52px;font-weight:900;letter-spacing:-3px;line-height:1;margin-bottom:20px;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.step-item h3{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:10px;letter-spacing:-0.3px}
.step-item p{font-size:14px;color:var(--ink2);line-height:1.65}
.step-day{display:inline-block;margin-top:16px;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--blue);text-transform:uppercase}
@media(max-width:900px){
  .steps-grid{grid-template-columns:1fr 1fr}
  .step-item:nth-child(odd){border-right:1px solid var(--border)}
  .step-item:nth-child(even){border-right:none}
  .step-item:nth-child(1),.step-item:nth-child(2){border-bottom:1px solid var(--border)}
}
@media(max-width:540px){
  .steps-grid{grid-template-columns:1fr}
  .step-item{border-right:none!important;border-bottom:1px solid var(--border)}
  .step-item:last-child{border-bottom:none}
}

/* NICHES */
.niches-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto}
@media(max-width:900px){.niches-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.niches-grid{grid-template-columns:1fr}}
.niche-card{
  background:var(--surface);padding:24px;border-radius:14px;
  border:1px solid var(--border);box-shadow:var(--shadow);
  transition:all 0.25s;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;position:relative;overflow:hidden
}
.niche-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.niche-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--border2)}
.niche-emoji{font-size:28px;margin-bottom:16px}
.niche-card h3{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px;letter-spacing:-0.3px}
.niche-card p{font-size:14px;color:var(--ink2);line-height:1.65;margin-bottom:16px;flex:1}
.niche-result{font-size:12px;font-weight:700;color:var(--blue);background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;display:block;margin-top:auto}

/* PROBLEM */
.problem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:720px){.problem-grid{grid-template-columns:1fr}}
.problem-card{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:36px;display:flex;gap:20px;align-items:flex-start;
  box-shadow:var(--shadow);transition:all 0.25s
}
.problem-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.p-num{font-size:11px;font-weight:900;letter-spacing:1px;color:var(--blue);background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;flex-shrink:0;height:fit-content;margin-top:2px}
.problem-card h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-0.3px}
.problem-card p{font-size:14px;color:var(--ink2);line-height:1.6;margin-bottom:12px}
.problem-cost{font-size:12px;font-weight:700;color:#DC2626;background:rgba(220,38,38,0.05);border:1px solid rgba(220,38,38,0.12);border-radius:6px;padding:4px 10px;display:inline-block}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.services-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.services-grid{grid-template-columns:1fr}}
.service-card{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:32px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);transition:all 0.25s
}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transition:transform 0.3s;transform-origin:left}
.service-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.service-card:hover::before{transform:scaleX(1)}
.svc-icon{width:46px;height:46px;border-radius:12px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:18px}
.service-card h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px;letter-spacing:-0.3px}
.service-card p{font-size:14px;color:var(--ink2);line-height:1.65;margin-bottom:14px}
.svc-result{font-size:12px;font-weight:700;color:var(--blue)}

/* CASES */
.cases-grid{display:flex;flex-direction:column;gap:20px}
.case-card{
  background:var(--surface);border:1px solid var(--border);border-radius:24px;
  overflow:hidden;display:grid;grid-template-columns:260px 1fr;
  box-shadow:var(--shadow);transition:all 0.25s
}
.case-card:hover{box-shadow:var(--shadow-md);border-color:var(--border2)}
.case-left{background:var(--surface2);padding:40px 32px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}
.case-client{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.case-name{font-size:20px;font-weight:900;color:var(--ink);margin-bottom:6px;letter-spacing:-0.5px}
.case-industry{font-size:13px;color:var(--ink2);margin-bottom:28px}
.case-metric-num{font-size:42px;font-weight:900;letter-spacing:-2px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.case-metric-label{font-size:12px;color:var(--ink2);margin-top:6px}
.case-right{padding:36px}
.case-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:28px}
.case-block h3{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.case-block p{font-size:13px;color:var(--ink2);line-height:1.6}
.case-tags{display:flex;flex-wrap:wrap;gap:8px}
.case-tag{font-size:12px;font-weight:600;padding:4px 12px;border-radius:100px;background:var(--surface2);border:1px solid var(--border);color:var(--blue)}
@media(max-width:800px){.case-card{grid-template-columns:1fr}.case-left{border-right:none;border-bottom:1px solid var(--border)}.case-row{grid-template-columns:1fr}}

/* TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.testi-grid{grid-template-columns:1fr}}
.testi-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow);transition:all 0.25s}
.testi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.testi-stars{color:#FBBF24;font-size:14px;letter-spacing:2px}
.testi-quote{font-size:14px;color:var(--ink2);line-height:1.75;flex:1}
.testi-result{font-size:12px;font-weight:700;color:var(--blue);background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 14px}
.testi-foot{display:flex;align-items:center;gap:12px}
.testi-av{width:40px;height:40px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.testi-name{font-size:13px;font-weight:700;color:var(--ink)}
.testi-role{font-size:12px;color:var(--ink3);margin-top:1px}

/* OFFER */
.offer-box{max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--border2);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg)}
.offer-top-bar{height:3px;background:var(--grad)}
.offer-head{padding:40px 40px 28px;border-bottom:1px solid var(--border)}
.offer-title{font-size:22px;font-weight:900;color:var(--ink);margin-bottom:6px;letter-spacing:-0.5px}
.offer-sub{font-size:14px;color:var(--ink2)}
.value-stack{padding:0 40px}
.value-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--border);gap:16px}
.value-row:last-child{border-bottom:none}
.value-left{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink);flex:1}
.v-check{width:20px;height:20px;border-radius:6px;background:var(--surface2);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--blue);flex-shrink:0}
.value-price{font-size:13px;font-weight:700;color:var(--ink3);white-space:nowrap}
.offer-total-row{display:flex;justify-content:space-between;align-items:center;padding:24px 40px;background:var(--surface2);border-top:1px solid var(--border)}
.offer-total-label{font-size:13px;color:var(--ink2)}
.offer-total-price{font-size:28px;font-weight:900;color:var(--ink3);text-decoration:line-through;opacity:0.45;letter-spacing:-1px}
.offer-cta-wrap{padding:28px 40px;text-align:center}
.offer-cta{display:block;background:var(--grad);color:#fff;font-size:16px;font-weight:700;padding:17px;border-radius:100px;text-decoration:none;box-shadow:0 4px 24px rgba(61,97,221,0.3);transition:transform 0.2s,box-shadow 0.2s}
.offer-cta:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(61,97,221,0.42)}
.offer-note{font-size:12px;color:var(--ink3);margin-top:12px}

/* GUARANTEE */
.guarantee-box{
  background:var(--surface);border:1px solid var(--border2);border-radius:24px;
  padding:52px;display:flex;gap:40px;align-items:flex-start;
  max-width:860px;margin:0 auto;box-shadow:var(--shadow-lg);position:relative;overflow:hidden
}
.guarantee-box::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px at 0 50%,rgba(61,97,221,0.04),transparent)}
.g-shield{font-size:52px;flex-shrink:0}
.guarantee-box h3{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:12px;letter-spacing:-0.3px;line-height:1.3}
.guarantee-box p{font-size:14px;color:var(--ink2);line-height:1.7;margin-bottom:10px}
.g-terms{margin-top:18px;display:flex;flex-wrap:wrap;gap:14px}
.g-term{font-size:12px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:6px}
.g-term::before{content:'✓';font-weight:900}
@media(max-width:640px){.guarantee-box{flex-direction:column;padding:36px 28px}}

/* COMPARE */
.compare-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;margin-top:48px;box-shadow:var(--shadow)}
.compare-table th{padding:18px 28px;font-size:12px;font-weight:700;text-align:left;color:var(--ink2);background:var(--surface2);border-bottom:1px solid var(--border)}
.compare-table th.hl{background:var(--surface3);color:var(--blue);border-bottom:2px solid var(--blue)}
.compare-table td{padding:16px 28px;font-size:14px;color:var(--ink2);border-bottom:1px solid var(--border)}
.compare-table tr:last-child td{border-bottom:none}
.compare-table td.hl{background:rgba(61,97,221,0.02);color:var(--ink);font-weight:600}
.compare-table td.bad{color:#DC2626}
.compare-table td.good{color:#3D61DD;font-weight:700}
.compare-table td:first-child{color:var(--ink);font-weight:500}

/* PRODUCTS */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.products-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.products-grid{grid-template-columns:1fr}}
.product-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:all 0.25s}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.product-card.featured{border-color:var(--border2)}
.product-top{padding:32px 32px 24px;flex:1}
.product-bottom{padding:20px 32px 32px;border-top:1px solid var(--border)}
.p-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-bottom:14px;background:rgba(61,97,221,0.1);color:var(--green);border:1px solid rgba(61,97,221,0.2)}
.p-badge.soon{background:rgba(245,158,11,0.1);color:var(--amber);border-color:rgba(245,158,11,0.2)}
.product-card h3{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:10px;letter-spacing:-0.3px}
.product-card p{font-size:13px;color:var(--ink2);line-height:1.65}
.p-price{font-size:26px;font-weight:900;color:var(--ink);letter-spacing:-1px;margin-bottom:14px}
.p-price sub{font-size:13px;color:var(--ink2);font-weight:500}
.p-btn{display:block;text-align:center;padding:12px;border-radius:100px;font-size:13px;font-weight:700;text-decoration:none;background:var(--grad);color:#fff;transition:opacity 0.2s,transform 0.2s}
.p-btn:hover{opacity:0.9;transform:translateY(-1px)}
.p-btn.ghost{background:transparent;border:1px solid var(--border2);color:var(--ink)}
.p-btn.ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--surface2)}

/* URGENCY */
.urgency-wrap{
  position:relative;z-index:1;background:var(--surface);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:100px 6%;text-align:center;overflow:hidden
}
.urgency-wrap::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px at 50% 100%,rgba(61,97,221,0.06),transparent)}
.urgency-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);border-radius:100px;padding:6px 18px;font-size:12px;font-weight:700;color:#D97706;margin-bottom:28px}
.urgency-wrap h2{font-size:clamp(28px,4vw,48px);font-weight:900;color:var(--ink);letter-spacing:-1.5px;margin-bottom:18px}
.urgency-wrap p{font-size:16px;color:var(--ink2);max-width:500px;margin:0 auto 40px;line-height:1.7}
.slots{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.slot{width:48px;height:10px;border-radius:100px;background:var(--border);border:1px solid var(--border2)}
.slot.taken{background:var(--grad)}
.slot.last{background:linear-gradient(90deg,#FBBF24,#F59E0B)}
.slots-label{font-size:13px;color:var(--ink2);margin-bottom:36px}
.slots-label span{color:#D97706;font-weight:700}

/* FAQ */
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{padding:22px 0;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color 0.2s;user-select:none}
.faq-q:hover,.faq-item.open .faq-q{color:var(--blue)}
.faq-q::after{content:'+';font-size:20px;font-weight:300;color:var(--ink3);flex-shrink:0;transition:transform 0.3s}
.faq-item.open .faq-q::after{transform:rotate(45deg);color:var(--blue)}
.faq-a{max-height:0;overflow:hidden;font-size:14px;color:var(--ink2);line-height:1.75;transition:max-height 0.4s ease,padding 0.3s}
.faq-item.open .faq-a{max-height:300px;padding-bottom:22px}

/* FINAL CTA */
.final-cta{position:relative;z-index:1;text-align:center;padding:140px 6%;overflow:hidden}
.final-cta::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(800px at 50% 100%,rgba(61,97,221,0.07),transparent)}
.final-cta h2{font-size:clamp(36px,5vw,68px);font-weight:900;color:var(--ink);letter-spacing:-2px;margin-bottom:20px;line-height:1.05;position:relative}
.final-cta p{font-size:17px;color:var(--ink2);max-width:520px;margin:0 auto 44px;line-height:1.7;position:relative}

/* ECOSYSTEM */
.eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:800px){.eco-grid{grid-template-columns:1fr}}
.eco-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.eco-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);transition:all 0.2s}
.eco-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.eco-icon{font-size:20px}
.eco-title{font-size:14px;font-weight:700;color:var(--ink)}
.eco-text{font-size:13px;color:var(--ink2);line-height:1.5}

/* FOOTER */
footer{position:relative;z-index:1;padding:52px 6% 36px;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:24px;background:var(--surface)}
.footer-logo{font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-0.5px}
.footer-logo span{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.footer-links a{color:var(--ink3);font-size:13px;text-decoration:none;transition:color 0.2s}
.footer-links a:hover{color:var(--ink)}
.footer-copy{font-size:12px;color:var(--ink3)}

/* ── ICON SYSTEM ── */
.ico{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ico svg{display:block}
/* Mock row icons */
.mock-ico{width:34px;height:34px;border-radius:9px;background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mock-ico svg{stroke:var(--blue)}
/* Service icons */
.svc-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(132,155,229,0.15),rgba(61,97,221,0.1));display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.svc-icon svg{stroke:var(--blue)}
/* Niche icons */
.niche-emoji{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(132,155,229,0.15),rgba(61,97,221,0.1));display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.niche-emoji svg{stroke:var(--blue)}
/* Ecosystem icons */
.eco-icon{width:36px;height:36px;border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.eco-icon svg{stroke:var(--blue)}
/* UC tab icons */
.uc-tab-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--surface2);transition:background 0.25s}
.uc-tab.active .uc-tab-icon{background:linear-gradient(135deg,rgba(132,155,229,0.2),rgba(61,97,221,0.15))}
.uc-tab-icon svg{stroke:var(--ink3);transition:stroke 0.25s}
.uc-tab.active .uc-tab-icon svg{stroke:var(--blue)}
/* Notif icons in panels */
.notif-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-icon svg{stroke:currentColor}
/* Animated icons */
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes iconSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes iconShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(6deg)}}
.uc-tab.active[data-panel="p1"] .uc-tab-icon svg{animation:iconPulse 2s ease-in-out infinite}
.uc-tab.active[data-panel="p2"] .uc-tab-icon svg{animation:iconFloat 2.5s ease-in-out infinite}
.uc-tab.active[data-panel="p3"] .uc-tab-icon svg{animation:iconShake 3s ease-in-out infinite}
.uc-tab.active[data-panel="p4"] .uc-tab-icon svg{animation:iconSpin 4s linear infinite}

/* STICKY + POPUP */
/* When sticky bar is visible add clearance to footer so it doesn't overlap */
body.sticky-active footer{padding-bottom:72px}
#sticky-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--grad);padding:14px 5%;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 -4px 40px rgba(61,97,221,0.3)}
#sticky-bar span{font-weight:700;color:#fff;font-size:14px}
#sticky-bar a{background:#fff;color:var(--blue);padding:9px 22px;border-radius:100px;font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap;flex-shrink:0}
#exit-popup{display:none;position:fixed;inset:0;z-index:99999;background:rgba(15,20,35,0.7);align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.popup-box{background:var(--surface);border:1px solid var(--border2);border-radius:24px;padding:48px 40px;max-width:440px;width:90%;text-align:center;position:relative;box-shadow:var(--shadow-lg)}
.popup-close{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--ink3);font-size:22px;cursor:pointer;transition:color 0.2s}
.popup-close:hover{color:var(--blue)}
.popup-tag{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.popup-title{font-size:24px;font-weight:900;color:var(--ink);letter-spacing:-0.5px;margin-bottom:12px;line-height:1.25}
.popup-sub{font-size:14px;color:var(--ink2);line-height:1.7;margin-bottom:28px}
.popup-note{margin-top:12px;font-size:12px;color:var(--ink3)}


/* ── USE CASE TAB SECTION ── */
.uc-wrap{max-width:1200px;margin:0 auto}
.uc-header{text-align:center;margin-bottom:64px}
.uc-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:start}
@media(max-width:900px){.uc-grid{grid-template-columns:1fr}}

/* Left tabs */
.uc-tabs{display:flex;flex-direction:column;gap:4px}
.uc-tab{
  display:flex;align-items:flex-start;gap:14px;padding:18px 20px;
  border-radius:14px;cursor:pointer;border:1px solid transparent;
  transition:all 0.25s ease;background:transparent;text-align:left
}
.uc-tab:hover{background:var(--surface2)}
.uc-tab.active{background:var(--surface);border-color:var(--border2);box-shadow:var(--shadow-md)}
.uc-tab-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--surface2);transition:background 0.25s}
.uc-tab.active .uc-tab-icon{background:linear-gradient(135deg,rgba(132,155,229,0.2),rgba(61,97,221,0.2))}
.uc-tab-text h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}
.uc-tab-text p{font-size:13px;color:var(--ink3);line-height:1.5}
.uc-tab.active .uc-tab-text h3{color:var(--blue)}
.uc-tab-bar{width:0;height:2px;background:var(--grad);border-radius:2px;margin-top:8px;transition:width 4s linear}
.uc-tab.active .uc-tab-bar{width:100%}

/* Right demo panel */
.uc-demo{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  overflow:hidden;box-shadow:var(--shadow-lg);min-height:360px;position:relative
}
.uc-panel{display:none;padding:28px}
.uc-panel.active{display:block}
.uc-panel-bar{
  display:flex;align-items:center;gap:8px;padding:14px 20px;
  border-bottom:1px solid var(--border);margin:-28px -28px 24px;
  background:var(--surface2)
}
.uc-dot{width:10px;height:10px;border-radius:50%}

/* ── PANEL 1: Lead Response ── */
@keyframes slideInRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes typingDot{0%,80%,100%{opacity:0.2}40%{opacity:1}}
@keyframes pulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(61,97,221,0.4)}70%{box-shadow:0 0 0 8px rgba(61,97,221,0)}}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes progressFill{from{width:0}to{width:var(--target-w)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.notif-row{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;
  animation:slideInRight 0.5s cubic-bezier(0.16,1,0.3,1) both
}
.notif-row:nth-child(1){animation-delay:0.2s}
.notif-row:nth-child(2){animation-delay:1.2s}
.notif-row:nth-child(3){animation-delay:2.2s}
.notif-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.notif-text{flex:1}
.notif-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px}
.notif-sub{font-size:12px;color:var(--ink3)}
.notif-time{font-size:11px;font-weight:600;color:var(--green)}
.ai-reply{
  background:linear-gradient(135deg,var(--surface2),rgba(61,97,221,0.06));
  border:1px solid var(--border2);border-radius:12px;padding:14px 16px;margin-top:14px;
  animation:slideInUp 0.6s cubic-bezier(0.16,1,0.3,1) 3.2s both
}
.ai-reply-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.ai-reply-text{font-size:13px;color:var(--ink);line-height:1.6}
.typing-dots{display:inline-flex;gap:3px;vertical-align:middle}
.typing-dots span{width:5px;height:5px;background:var(--blue);border-radius:50%;animation:typingDot 1.2s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:0.2s}
.typing-dots span:nth-child(3){animation-delay:0.4s}
.stat-pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:100px;font-size:12px;font-weight:700;margin-right:8px;margin-top:10px;
  animation:fadeInScale 0.4s ease both
}
.stat-pill.green{background:rgba(61,97,221,0.1);color:var(--green);animation-delay:4s}
.stat-pill.blue{background:rgba(61,97,221,0.1);color:var(--blue);animation-delay:4.3s}

/* Panel 2: Outreach */
.email-row{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-radius:10px;border:1px solid var(--border);margin-bottom:8px;
  animation:slideInRight 0.5s cubic-bezier(0.16,1,0.3,1) both
}
.email-row:nth-child(1){animation-delay:0.1s}
.email-row:nth-child(2){animation-delay:0.6s}
.email-row:nth-child(3){animation-delay:1.1s}
.email-row:nth-child(4){animation-delay:1.6s}
.email-row:nth-child(5){animation-delay:2.1s}
.email-av{width:28px;height:28px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.email-name{font-size:13px;font-weight:600;color:var(--ink);flex:1}
.email-co{font-size:11px;color:var(--ink3);flex:1}
.email-status{font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px}
.es-sent{background:rgba(61,97,221,0.1);color:var(--green)}
.es-opened{background:rgba(245,158,11,0.1);color:var(--amber)}
.es-replied{background:rgba(61,97,221,0.1);color:var(--blue)}
.es-pending{background:var(--surface2);color:var(--ink3)}
.outreach-bar{margin-top:16px}
.bar-label{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3);margin-bottom:6px}
.bar-track{height:6px;background:var(--surface2);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;background:var(--grad);animation:progressFill 1.5s cubic-bezier(0.16,1,0.3,1) both}
.bar-fill:nth-child(1){--target-w:78%;animation-delay:2.8s}

/* Panel 3: Price Alert */
.price-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px;margin-bottom:12px;animation:fadeInScale 0.5s ease 0.2s both
}
.price-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.price-addr{font-size:13px;font-weight:700;color:var(--ink)}
.price-tag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:100px;background:rgba(61,97,221,0.1);color:var(--green)}
.price-row{display:flex;align-items:center;gap:10px}
.price-old{font-size:18px;font-weight:700;color:var(--ink3);text-decoration:line-through}
.price-arrow{color:var(--green);font-size:18px}
.price-new{font-size:24px;font-weight:900;color:var(--green)}
.price-drop{font-size:12px;font-weight:700;color:var(--green);background:rgba(61,97,221,0.1);padding:2px 8px;border-radius:6px}
@keyframes priceDrop{0%,60%{opacity:0;transform:translateY(-6px)}70%,100%{opacity:1;transform:translateY(0)}}
.price-new{animation:priceDrop 0.6s ease 1.5s both}
.price-drop{animation:fadeInScale 0.4s ease 2s both}
.alert-notif{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:linear-gradient(135deg,rgba(61,97,221,0.06),rgba(132,155,229,0.06));
  border:1px solid var(--border2);border-radius:12px;
  animation:slideInUp 0.6s cubic-bezier(0.16,1,0.3,1) 2.8s both
}
.alert-icon{font-size:20px;animation:bounce 1s ease 3.5s 3}
.alert-body{flex:1}
.alert-title{font-size:13px;font-weight:700;color:var(--ink)}
.alert-sub{font-size:12px;color:var(--ink3)}

/* Panel 4: Follow-up */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--border)}
.tl-item{position:relative;margin-bottom:18px;animation:slideInRight 0.5s cubic-bezier(0.16,1,0.3,1) both}
.tl-item:nth-child(1){animation-delay:0.2s}
.tl-item:nth-child(2){animation-delay:0.8s}
.tl-item:nth-child(3){animation-delay:1.4s}
.tl-item:nth-child(4){animation-delay:2s}
.tl-item:nth-child(5){animation-delay:2.6s}
.tl-dot{position:absolute;left:-21px;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 2px var(--border)}
.tl-dot.done{background:var(--green);box-shadow:0 0 0 2px rgba(61,97,221,0.3)}
.tl-dot.active{background:var(--blue);animation:pulseGreen 1.5s ease infinite;box-shadow:0 0 0 2px rgba(61,97,221,0.3)}
.tl-dot.pending{background:var(--surface2)}
.tl-head{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px}
.tl-sub{font-size:12px;color:var(--ink3)}
.tl-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;margin-top:4px}
.tl-badge.sent{background:rgba(61,97,221,0.1);color:var(--green)}
.tl-badge.live{background:rgba(61,97,221,0.1);color:var(--blue)}
.tl-badge.queued{background:var(--surface2);color:var(--ink3)}

/* ═══════════════════════════════════════════════════
   PREMIUM DESIGN LAYER — typography, glows, grain
   ═══════════════════════════════════════════════════ */

/* ── DISPLAY FONT (Syne) for all headings ── */
h1,h2,h3,h4,
.hero-h1,.section-title,
.step-big-num,.kpi-num,
.case-metric-num,.fs-num,
.offer-title,.guarantee-box h3,
.testi-name,.case-name,.product-card h3{
  font-family:var(--font-display)
}

/* Tabular nums for all stat figures */
.kpi-num,.case-metric-num,.fs-num,.step-big-num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1
}

/* Mono for code-adjacent labels */
.mock-label,.mock-sub,.tl-head,.tl-sub,
.step-day,.case-tag,.cb-item{
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:0
}
.step-day{font-size:10px}

/* ── GRAIN TEXTURE — premium feel ── */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:0.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px
}
[data-theme="dark"] body::after{opacity:0.05}

/* ── RICHER DARK HERO AURORA ── */
[data-theme="dark"] .sky-b1{background:radial-gradient(circle,rgba(90,70,255,0.55) 0%,transparent 70%)}
[data-theme="dark"] .sky-b2{background:radial-gradient(circle,rgba(50,100,255,0.45) 0%,transparent 70%)}
[data-theme="dark"] .sky-b3{background:radial-gradient(circle,rgba(0,200,220,0.3) 0%,transparent 70%)}
[data-theme="dark"] .sky-b4{background:radial-gradient(ellipse,rgba(80,60,255,0.25) 0%,transparent 70%)}
[data-theme="dark"] .hero-ambient{
  background-image:linear-gradient(125deg,
    rgba(90,70,255,0.14) 0%,
    rgba(0,180,220,0.07) 25%,
    rgba(90,70,255,0.2) 50%,
    rgba(0,180,220,0.07) 75%,
    rgba(90,70,255,0.14) 100%)
}

/* ── GLOW SHADOWS on cards — dark mode only ── */
[data-theme="dark"] .niche-card:hover{
  box-shadow:0 0 0 1px rgba(107,143,245,0.25),0 8px 40px rgba(107,143,245,0.1),0 24px 60px rgba(0,0,0,0.5);
  border-color:rgba(107,143,245,0.3)
}
[data-theme="dark"] .service-card:hover{
  box-shadow:0 0 0 1px rgba(107,143,245,0.25),0 8px 40px rgba(107,143,245,0.1),0 24px 60px rgba(0,0,0,0.5);
  border-color:rgba(107,143,245,0.3)
}
[data-theme="dark"] .testi-card:hover{
  box-shadow:0 0 0 1px rgba(107,143,245,0.25),0 8px 40px rgba(107,143,245,0.1),0 24px 60px rgba(0,0,0,0.5);
  border-color:rgba(107,143,245,0.3)
}
[data-theme="dark"] .case-card:hover{
  box-shadow:0 0 0 1px rgba(107,143,245,0.2),0 12px 48px rgba(107,143,245,0.08),0 32px 80px rgba(0,0,0,0.6)
}
[data-theme="dark"] .problem-card:hover{
  box-shadow:0 0 0 1px rgba(107,143,245,0.2),0 8px 40px rgba(107,143,245,0.08),0 20px 60px rgba(0,0,0,0.5)
}

/* ── BUTTON GLOW ── */
.btn-primary{
  background:linear-gradient(135deg,#7B9EF8 0%,#3558D6 60%,#2848C8 100%);
  box-shadow:0 4px 20px rgba(53,88,214,0.4),0 1px 0 rgba(255,255,255,0.15) inset
}
.btn-primary:hover{
  box-shadow:0 8px 40px rgba(53,88,214,0.55),0 1px 0 rgba(255,255,255,0.15) inset;
  transform:translateY(-2px)
}
[data-theme="dark"] .btn-primary{
  background:linear-gradient(135deg,#8BAAFC 0%,#4A6CF7 60%,#3558E8 100%);
  box-shadow:0 4px 24px rgba(74,108,247,0.5),0 1px 0 rgba(255,255,255,0.1) inset
}
[data-theme="dark"] .btn-primary:hover{
  box-shadow:0 8px 48px rgba(74,108,247,0.65),0 1px 0 rgba(255,255,255,0.1) inset
}
.nav-cta{
  background:linear-gradient(135deg,#7B9EF8 0%,#3558D6 100%);
  box-shadow:0 2px 14px rgba(53,88,214,0.35)
}
[data-theme="dark"] .nav-cta{
  background:linear-gradient(135deg,#8BAAFC 0%,#4A6CF7 100%);
  box-shadow:0 2px 14px rgba(74,108,247,0.45)
}

/* ── HERO H1 — bigger, more editorial ── */
.hero-h1{
  font-size:clamp(46px,6vw,80px);
  letter-spacing:-3px;
  font-weight:800;
  line-height:1.02
}
[data-theme="dark"] .hero-h1{letter-spacing:-3.5px}

/* ── SECTION TITLES — Syne makes them feel sharp ── */
.section-title{
  font-size:clamp(32px,4.2vw,56px);
  letter-spacing:-1.8px;
  font-weight:800;
  line-height:1.08
}

/* ── EYEBROW — refined ── */
.eyebrow{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:2.5px
}

/* ── KPI NUMBERS — huge, impactful ── */
.kpi-num{
  font-size:clamp(40px,5vw,56px);
  letter-spacing:-2.5px
}

/* ── STEP BIG NUMBERS ── */
.step-big-num{
  font-size:56px;
  letter-spacing:-3px;
  line-height:0.95
}

/* ── SCROLLBAR — dark & refined ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(100,140,255,0.2)}

/* ── DARK MODE DOT GRID — more subtle, cooler ── */
[data-theme="dark"] body::before{
  background-image:radial-gradient(rgba(100,140,255,0.07) 1px,transparent 1px);
  background-size:30px 30px
}

/* ── OFFER BOX — premium gradient border in dark ── */
[data-theme="dark"] .offer-box{
  border-color:rgba(100,140,255,0.2);
  box-shadow:0 0 0 1px rgba(100,140,255,0.08),0 24px 80px rgba(0,0,0,0.7)
}
[data-theme="dark"] .offer-cta{
  background:linear-gradient(135deg,#8BAAFC 0%,#4A6CF7 100%);
  box-shadow:0 4px 32px rgba(74,108,247,0.5)
}
[data-theme="dark"] .offer-cta:hover{
  box-shadow:0 8px 56px rgba(74,108,247,0.7)
}

/* ── HERO MOCKUP — subtle inner glow in dark ── */
[data-theme="dark"] .mockup-card{
  border-color:rgba(100,140,255,0.15);
  box-shadow:0 0 0 1px rgba(100,140,255,0.06),0 24px 80px rgba(0,0,0,0.8),0 0 120px rgba(74,108,247,0.06) inset
}

/* ── FLOAT STATS — glow ── */
[data-theme="dark"] .float-stat{
  border-color:rgba(100,140,255,0.18);
  box-shadow:0 0 0 1px rgba(100,140,255,0.06),0 8px 32px rgba(0,0,0,0.7)
}

/* ── NAV logo — Syne ── */
.logo{font-family:var(--font-display);font-weight:800;letter-spacing:-0.8px}

/* ── HERO PROOF — refined spacing ── */
.proof-text{font-family:var(--font-sans);font-size:13px}

/* ── CASE METRIC NUMBER ── */
.case-metric-num{
  font-size:48px;
  letter-spacing:-2.5px
}

/* ── FOOTER LOGO ── */
.footer-logo{font-family:var(--font-display);font-weight:800}

/* ── SMOOTH SERVICE CARD TOP BAR ── */
.service-card::before{height:2px;background:linear-gradient(90deg,#7B9EF8,#4A6CF7)}

/* ── PRICING TABLE ── */
.pricing-table { margin: 2rem 0; }
.pricing-table table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; border: 1px solid var(--border2); }
.pricing-table th { background: var(--blue); color: #fff; padding: 0.85rem 1.25rem; text-align: left; font-size: 0.875rem; font-weight: 700; }
.pricing-table td { padding: 0.85rem 1.25rem; font-size: 0.875rem; color: var(--ink2); border-bottom: 1px solid var(--border); }
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table tr:nth-child(even) td { background: var(--surface); }
.founder-offer { margin-top: 1.25rem; font-size: 0.9rem; color: var(--ink2); background: rgba(61,97,221,0.06); border: 1px solid rgba(61,97,221,0.2); padding: 0.9rem 1.25rem; border-radius: 8px; }
.founder-offer a { color: var(--blue); font-weight: 700; }

/* ── INDUSTRY BENCHMARKS ── */
.industry-benchmark { border-left: 4px solid #6366f1; background: #f8f8ff; padding: 1.5rem 2rem; margin: 2rem 0; border-radius: 0 8px 8px 0; }
.benchmark-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: #6366f1; text-transform: uppercase; margin-bottom: 0.75rem; }
.industry-benchmark blockquote { font-size: 1.1rem; font-style: italic; color: #1e1e2e; margin: 0 0 0.75rem 0; border: none; padding: 0; }
.benchmark-context { font-size: 0.9rem; color: #555; margin: 0; }
.compliance-note { background: #f0f4ff; border: 1px solid #c7d2fe; border-radius: 8px; padding: 1.5rem 2rem; margin: 2rem 0; }
.compliance-note h3 { color: #3730a3; font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; }
.compliance-note p { color: #374151; font-size: 0.95rem; line-height: 1.7; margin: 0; }

/* ── SITE-WIDE NAV (vertical pages only — scoped to .site-nav) ── */
.site-nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 100; }
.nav-logo { font-weight: 700; font-size: 1.1rem; color: #1e1e2e; text-decoration: none; }
.nav-cta-global { background: var(--blue,#3d61dd); color: #fff !important; padding: 0.5rem 1.1rem; border-radius: 6px; font-weight: 600; font-size: 0.9rem !important; text-decoration: none; white-space: nowrap; }
.nav-cta-global:hover { opacity: 0.88; }

/* ── UNIFIED FOOTER ── */
.site-footer { background: #1e1e2e; color: #9ca3af; text-align: center; padding: 2.5rem 2rem; margin-top: 4rem; }
.site-footer p { margin: 0.4rem 0; font-size: 0.9rem; }
.footer-links-unified { display: flex; justify-content: center; gap: 1.5rem; margin: 0.75rem 0; flex-wrap: wrap; }
.footer-links-unified a { color: #d1d5db; text-decoration: none; font-size: 0.875rem; }
.footer-links-unified a:hover { color: #fff; }
.footer-copy-unified { font-size: 0.8rem; color: #6b7280; }

/* ── NAV FINAL OVERRIDES — always wins cascade ── */
nav{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;height:64px!important}
nav .nav-links{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;flex:1!important;justify-content:center!important;gap:20px!important}
nav .nav-dropdown-content{display:none!important;position:absolute!important;top:calc(100% + 8px)!important;left:0!important;z-index:9999!important}
nav .nav-dropdown.open .nav-dropdown-content{display:flex!important;flex-direction:column!important}