/* ============================================================
   Pulse — bespoke product-analytics SaaS.
   Dark product-UI aesthetic: Space Grotesk display over Inter,
   indigo→cyan on near-black, with a LIVE animated dashboard.
   Standalone; nothing shared with the other samples.
   ============================================================ */
:root{
  --accent:#6366f1; --accent-2:#22d3ee;            /* fx3d reads these */
  --bg:#090c16; --bg-2:#0e1322; --panel:#131a2e; --panel-2:#192142;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.05);
  --ind:#6366f1; --cyan:#22d3ee; --violet:#8b5cf6; --good:#34d399; --warn:#fbbf24; --bad:#f87171;
  --text:#e8edf9; --muted:#8b97b4; --muted-2:#5b6788;
  --disp:'Space Grotesk', system-ui, sans-serif; --sans:'Inter', system-ui, sans-serif;
  --wrap:1200px; --ease:cubic-bezier(.22,1,.36,1); --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:clamp(14px,.4vw+13px,16px); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(700px 480px at 78% -6%, rgba(99,102,241,.16), transparent 60%),
             radial-gradient(620px 460px at 8% 8%, rgba(34,211,238,.10), transparent 55%)}
img{max-width:100%; display:block} a{color:inherit; text-decoration:none}
.wrap{width:min(var(--wrap),92vw); margin-inline:auto}
h1,h2,h3{font-family:var(--disp); font-weight:600; margin:0; line-height:1.05; letter-spacing:-.02em}
.eyebrow{font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan)}
.grad{background:linear-gradient(100deg,var(--cyan),var(--ind)); -webkit-background-clip:text; background-clip:text; color:transparent}

.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:.92rem;
  padding:12px 22px; border-radius:11px; cursor:pointer; border:1px solid transparent; transition:transform .2s var(--ease), box-shadow .25s, background .25s, border-color .25s}
.btn-fill{background:linear-gradient(180deg,var(--ind),#4f46e5); color:#fff; box-shadow:0 10px 30px -12px rgba(99,102,241,.8)}
.btn-fill:hover{transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(99,102,241,.95)}
.btn-ghost{background:rgba(255,255,255,.04); border-color:var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--ind); background:rgba(99,102,241,.12)}

/* nav */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; padding:18px 0; transition:padding .3s var(--ease), background .3s, border-color .3s; border-bottom:1px solid transparent}
.nav.stuck{padding:10px 0; background:rgba(9,12,22,.8); backdrop-filter:blur(14px); border-color:var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--disp); font-weight:700; font-size:1.15rem}
.brand .mk{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--ind),var(--cyan)); display:grid; place-items:center; box-shadow:0 0 20px -4px var(--ind)}
.brand .mk::after{content:""; width:11px; height:11px; border-radius:3px; background:#0a0d18}
.nav-links{display:flex; gap:28px; font-size:.9rem; color:var(--muted); font-weight:500}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex; align-items:center; gap:12px}
.nav-cta .btn{padding:9px 16px}
.burger{display:none; background:none; border:0; color:var(--text); cursor:pointer} .burger svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}

/* hero */
.hero{padding:130px 0 70px}
.hero-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:50px; align-items:center}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03); font-size:.78rem; color:var(--muted); margin-bottom:22px}
.pill b{background:var(--ind); color:#fff; padding:2px 8px; border-radius:999px; font-size:.68rem; font-weight:700}
.hero h1{font-size:clamp(2.5rem,5.4vw,4rem)}
.hero .lede{color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.2rem); margin:22px 0 30px; max-width:44ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-trust{margin-top:38px; color:var(--muted-2); font-size:.8rem; letter-spacing:.02em}
.hero-trust .row{display:flex; gap:22px; margin-top:12px; flex-wrap:wrap; align-items:center; opacity:.8}
.hero-trust .logo{font-family:var(--disp); font-weight:700; color:var(--muted); font-size:1rem; letter-spacing:.02em}

/* live dashboard */
.dash{background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:0 40px 90px -40px rgba(0,0,0,.8); position:relative; overflow:hidden}
.dash::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.5}
.dash-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.dash-top .t{font-family:var(--disp); font-weight:600; font-size:.98rem}
.dash-top .live{display:inline-flex; align-items:center; gap:7px; font-size:.72rem; color:var(--good)}
.dash-top .live i{width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}100%{box-shadow:0 0 0 9px rgba(52,211,153,0)}}
.dash-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.kpi{background:var(--bg-2); border:1px solid var(--line-2); border-radius:12px; padding:12px}
.kpi .l{font-size:.68rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}
.kpi .v{font-family:var(--disp); font-weight:700; font-size:1.5rem; margin-top:4px; font-variant-numeric:tabular-nums}
.kpi .d{font-size:.72rem; margin-top:2px} .kpi .d.up{color:var(--good)} .kpi .d.dn{color:var(--bad)}
.dash-tabs{display:flex; gap:6px; margin-bottom:12px}
.dash-tabs button{font:inherit; font-size:.78rem; font-weight:600; color:var(--muted); background:none; border:1px solid var(--line); border-radius:9px; padding:7px 13px; cursor:pointer; transition:all .2s}
.dash-tabs button.on{color:#fff; background:rgba(99,102,241,.18); border-color:var(--ind)}
.chart{width:100%; height:200px; display:block}
.chart .grid-l{stroke:var(--line-2); stroke-width:1}
.chart .area{fill:url(#g-area); opacity:.9}
.chart .line{fill:none; stroke:url(#g-line); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.chart .dot{fill:#fff; stroke:var(--ind); stroke-width:2}
.dash-bars{display:flex; gap:8px; align-items:flex-end; height:60px; margin-top:14px}
.dash-bars .bar{flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--ind),rgba(99,102,241,.2)); transition:height .6s var(--ease)}

/* sections */
.sec{padding:clamp(60px,8vw,110px) 0}
.sec-head{max-width:60ch; margin-bottom:52px}
.sec-head h2{font-size:clamp(2rem,4vw,3rem); margin-top:14px}
.sec-head p{color:var(--muted); margin-top:14px; font-size:1.06rem}
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feat{background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r); padding:24px; transition:transform .3s var(--ease), border-color .3s}
.feat:hover{transform:translateY(-4px); border-color:rgba(99,102,241,.5)}
.feat .ic{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:rgba(99,102,241,.14); color:var(--cyan); margin-bottom:16px}
.feat .ic svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8}
.feat h3{font-size:1.2rem} .feat p{color:var(--muted); margin-top:8px; font-size:.94rem}

/* AI section with 3D blob */
.ai{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.ai-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center}
.dhero-art{position:relative; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; background:radial-gradient(circle at 50% 42%, #1a2350, #0a0d1a 72%); border:1px solid var(--line); display:grid; place-items:center}
.dhero-art .art-emoji{font-size:clamp(4rem,10vw,7rem); transition:opacity .6s}
.dhero-art .gl-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.dhero-art.gl-fallback .art-emoji{animation:floaty 5s ease-in-out infinite}
.ai ul{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px}
.ai li{display:flex; gap:12px; color:var(--muted)} .ai li b{color:var(--text)}
.ai .chk{flex:0 0 auto; width:24px; height:24px; border-radius:7px; background:rgba(34,211,238,.16); color:var(--cyan); display:grid; place-items:center; font-size:.75rem}

/* metrics band */
.band{border-block:1px solid var(--line); background:var(--bg-2)}
.band-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:44px 0; text-align:center}
.band .n{font-family:var(--disp); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.6rem); font-variant-numeric:tabular-nums}
.band .l{color:var(--muted); font-size:.86rem; margin-top:4px}

/* pricing */
.price-toggle{display:inline-flex; align-items:center; gap:12px; margin-bottom:36px; color:var(--muted); font-size:.9rem}
.switch{width:52px; height:28px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); position:relative; cursor:pointer; transition:background .25s}
.switch.on{background:var(--ind)}
.switch::after{content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .25s var(--ease)}
.switch.on::after{transform:translateX(24px)}
.save{color:var(--good); font-weight:600; font-size:.8rem}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.plan{background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r); padding:28px; display:flex; flex-direction:column}
.plan.pop{border-color:var(--ind); box-shadow:0 30px 70px -40px rgba(99,102,241,.7); position:relative}
.plan.pop::before{content:"Most popular"; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--ind); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.06em; padding:4px 12px; border-radius:999px}
.plan h3{font-size:1.2rem} .plan .pr{font-family:var(--disp); font-weight:700; font-size:2.4rem; margin:14px 0 2px; font-variant-numeric:tabular-nums}
.plan .pr span{font-size:.9rem; color:var(--muted); font-weight:500}
.plan .desc{color:var(--muted); font-size:.9rem; min-height:40px}
.plan ul{list-style:none; padding:0; margin:18px 0 24px; display:grid; gap:10px; font-size:.92rem; color:var(--muted)}
.plan li::before{content:"✓ "; color:var(--cyan); font-weight:700}
.plan .btn{margin-top:auto; justify-content:center}

/* CTA + footer */
.cta{text-align:center; padding:clamp(50px,7vw,90px) 40px; margin:0 auto; max-width:900px; background:linear-gradient(160deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:24px}
.cta h2{font-size:clamp(1.9rem,3.6vw,2.8rem)} .cta p{color:var(--muted); margin:14px auto 26px; max-width:52ch}
.foot{border-top:1px solid var(--line); padding:56px 0 36px; color:var(--muted)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px}
.foot h5{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 14px}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:.9rem}
.foot ul a:hover{color:var(--text)}
.foot-base{border-top:1px solid var(--line-2); padding-top:20px; font-size:.84rem; color:var(--muted-2)}

.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

@media (max-width:920px){
  .hero-grid,.ai-grid{grid-template-columns:1fr; gap:36px}
  .feat-grid,.price-grid{grid-template-columns:1fr}
  .band-grid{grid-template-columns:1fr 1fr; gap:30px 16px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none} .burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:16px; padding:22px 6vw; background:var(--bg-2); border-block:1px solid var(--line)}
  .dhero-art{max-width:420px; margin-inline:auto}
}
@media (max-width:520px){ .dash-kpis{grid-template-columns:1fr 1fr} .band-grid{grid-template-columns:1fr 1fr} }