:root{
  --radius:.875rem;
  --background:oklch(.995 .002 250);
  --foreground:oklch(.22 .04 260);
  --primary:oklch(.55 .2 258);
  --primary-fg:oklch(.99 .005 250);
  --muted-fg:oklch(.52 .03 258);
  --accent:oklch(.68 .15 235);
  --destructive:oklch(.58 .2 25);
  --border:oklch(.55 .2 258 / 14%);
  --gradient-cta:linear-gradient(120deg,oklch(.55 .2 258),oklch(.68 .15 235));
  --gradient-aurora:radial-gradient(60% 60% at 20% 20%,oklch(.78 .14 250/.55),transparent 70%),
                    radial-gradient(50% 50% at 80% 30%,oklch(.84 .1 225/.5),transparent 70%),
                    radial-gradient(55% 55% at 50% 80%,oklch(.72 .16 268/.42),transparent 70%);
  --shadow-float:0 30px 80px -30px oklch(.55 .2 258/.35);
  --shadow-glow:0 0 60px -12px oklch(.55 .2 258/.45);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;
  background:var(--background);color:var(--foreground);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;
}
h1,h2,h3,.display{font-family:"Sora",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.muted{color:var(--muted-fg)}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:44rem;margin:0 auto}
section{position:relative}

/* backdrop */
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora{position:absolute;inset:-25%;background:var(--gradient-aurora);filter:blur(70px);opacity:.55;animation:drift 22s ease-in-out infinite}
.aurora.b{animation:drift 34s ease-in-out infinite reverse;opacity:.35}
.gridbg{position:absolute;inset:0;
  background-image:linear-gradient(oklch(.55 .2 258/.07) 1px,transparent 1px),linear-gradient(90deg,oklch(.55 .2 258/.07) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 60% at 50% 25%,#000,transparent)}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(6%,-8%,0) scale(1.12)}66%{transform:translate3d(-7%,5%,0) scale(.94)}}

.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gradient-cta);z-index:100}
.spotlight{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,oklch(.55 .2 258/.10),transparent 65%);transform:translate(-50%,-50%);transition:opacity .4s;opacity:0}

.glass{background:oklch(1 0 0/.72);backdrop-filter:blur(16px);border:1px solid var(--border)}

/* nav */
header.nav{position:fixed;inset-inline:0;top:0;z-index:50;padding:1rem}
header.nav .bar{max-width:64rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  border-radius:999px;padding:.6rem 1rem;border:1px solid transparent;transition:all .5s var(--ease)}
header.nav.scrolled .bar{background:oklch(1 0 0/.75);backdrop-filter:blur(16px);border-color:var(--border);box-shadow:var(--shadow-float)}
.brand{display:flex;align-items:center;gap:.5rem;padding:0 .5rem;font-weight:600;font-family:"Sora",sans-serif}
.brand i{width:24px;height:24px;border-radius:.5rem;background:var(--gradient-cta);display:block}
.nav ul{display:none;gap:.25rem;list-style:none}
.nav ul a{position:relative;padding:.5rem .875rem;font-size:.875rem;color:var(--muted-fg);border-radius:999px;transition:color .3s}
.nav ul a:hover{color:var(--foreground)}
.nav ul a::after{content:"";position:absolute;left:.875rem;right:.875rem;bottom:.25rem;height:1px;background:oklch(.55 .2 258/.7);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav ul a:hover::after{transform:scaleX(1)}
.nav .actions{display:flex;align-items:center;gap:.25rem}
@media(min-width:860px){.nav ul{display:flex}}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;font-size:.875rem;font-weight:500;
  padding:.6rem 1.1rem;cursor:pointer;border:1px solid transparent;overflow:hidden;transition:transform .25s var(--ease),box-shadow .4s,background .3s,color .3s;will-change:transform}
.btn.lg{padding:.85rem 1.5rem;font-size:.95rem}
.btn.primary{background:var(--gradient-cta);color:var(--primary-fg);box-shadow:0 10px 30px -12px oklch(.55 .2 258/.7)}
.btn.primary:hover{box-shadow:var(--shadow-glow)}
.btn.glass{background:oklch(1 0 0/.7);border-color:var(--border);backdrop-filter:blur(12px)}
.btn.glass:hover{border-color:oklch(.55 .2 258/.4)}
.btn.ghost{color:var(--muted-fg)}
.btn.ghost:hover{color:var(--foreground);background:oklch(.55 .2 258/.07)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translate(2px,-2px)}
.btn.full{width:100%;justify-content:center}

/* reveal */
.rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}

/* hero */
.hero{padding:9rem 1.25rem 6rem;text-align:center}
@media(min-width:640px){.hero{padding-top:11rem}}
.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.4rem .9rem;font-size:.75rem;color:var(--muted-fg);
  background:oklch(1 0 0/.7);border:1px solid var(--border);backdrop-filter:blur(12px)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--primary);position:relative}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--primary);animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2.4);opacity:0}}
h1.hero-title{margin-top:2rem;font-size:clamp(2.6rem,7vw,5.2rem);font-weight:600;line-height:.98}
.text-gradient{background:linear-gradient(100deg,oklch(.45 .2 262),oklch(.62 .17 240));-webkit-background-clip:text;background-clip:text;color:transparent}
.dim{color:oklch(.22 .04 260/.62)}
.hero p.lede{margin:1.75rem auto 0;max-width:36rem;font-size:1.075rem;color:var(--muted-fg)}
.cta-row{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.word{display:inline-block;opacity:0;transform:translateY(80%);animation:wordUp .9s var(--ease) forwards}
@keyframes wordUp{to{opacity:1;transform:none}}

/* dashboard */
.dash-wrap{max-width:64rem;margin:5rem auto 0;perspective:1600px;padding:0 1.25rem;position:relative}
.dash{border-radius:1.6rem;padding:.75rem;box-shadow:var(--shadow-float);background:oklch(1 0 0/.75);backdrop-filter:blur(16px);border:1px solid var(--border);position:relative;overflow:hidden}
.chrome{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem .75rem}
.chrome span.d{width:10px;height:10px;border-radius:50%}
.chrome .bar{flex:1;height:20px;border-radius:.375rem;background:oklch(.55 .2 258/.06);margin-left:.75rem}
.chrome .lbl{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-fg)}
.dgrid{display:grid;gap:.75rem;border-radius:1.2rem;background:oklch(.55 .2 258/.04);padding:.75rem}
@media(min-width:720px){.dgrid{grid-template-columns:repeat(3,1fr)}.span2{grid-column:span 2}}
.card{border-radius:.75rem;border:1px solid var(--border);background:oklch(.55 .2 258/.04);padding:1rem}
.kpi{font-family:"Sora",sans-serif;font-size:1.5rem;font-weight:600;margin-top:.25rem}
.chip{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;background:oklch(.68 .15 235/.15);color:oklch(.5 .15 235);padding:.25rem .5rem;font-size:.7rem}
.tiny{font-size:.75rem;color:var(--muted-fg)}
.bar-track{height:6px;border-radius:999px;background:oklch(.55 .2 258/.1);overflow:hidden;margin-top:.25rem}
.bar-fill{height:100%;border-radius:999px;background:var(--gradient-cta);width:0;transition:width 1.4s var(--ease)}
.feed{margin-top:.75rem;display:flex;align-items:center;gap:.6rem;font-size:.8rem}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.65rem;font-weight:600;background:oklch(.55 .2 258/.15);color:var(--primary)}
.ai{margin-top:.75rem;border-radius:.75rem;border:1px solid var(--border);background:oklch(.55 .2 258/.05);padding:.75rem 1rem;font-size:.8rem;color:var(--muted-fg)}
.spark-ico{color:var(--primary);font-size:.9em}
.caret{display:inline-block;width:2px;height:.9em;background:var(--primary);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.float-card{position:absolute;border-radius:1rem;padding:.75rem 1rem;font-size:.78rem;background:oklch(1 0 0/.85);backdrop-filter:blur(14px);border:1px solid var(--border);box-shadow:var(--shadow-float);animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.fc1{left:-3.5rem;top:16%}
.fc2{right:-3.5rem;bottom:10%;animation-delay:1.6s}
@media(max-width:1320px){.float-card{display:none}}

/* marquee */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;width:max-content;gap:4rem;animation:marquee 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
.logo{font-family:"Sora",sans-serif;font-size:1.5rem;font-weight:600;color:oklch(.52 .03 258/.5);transition:color .4s}
.logo:hover{color:var(--foreground)}

/* features */
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--primary)}
h2.sec{margin-top:1rem;font-size:clamp(2rem,4.4vw,3.2rem);font-weight:600;line-height:1.05}
.grid3{margin-top:3.5rem;display:grid;gap:1.25rem}
@media(min-width:640px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid3{grid-template-columns:repeat(3,1fr)}}
.feature{position:relative;overflow:hidden;border-radius:1rem;border:1px solid var(--border);background:oklch(.55 .2 258/.04);padding:1.5rem;transition:transform .4s var(--ease),border-color .4s}
.feature:hover{transform:translateY(-8px);border-color:oklch(.55 .2 258/.35)}
.feature::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;background:radial-gradient(70% 70% at 30% 0%,oklch(.55 .2 258/.14),transparent)}
.feature:hover::before{opacity:1}
.feature::after{content:"";position:absolute;inset-inline:0;top:0;height:1px;transform:scaleX(0);transition:transform .7s var(--ease);background:linear-gradient(90deg,transparent,var(--primary),transparent)}
.feature:hover::after{transform:scaleX(1)}
.ficon{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:.75rem;border:1px solid var(--border);background:oklch(.55 .2 258/.07);color:var(--primary);transition:transform .5s var(--ease)}
.feature:hover .ficon{transform:rotate(-6deg) scale(1.1)}
.feature h3{position:relative;margin-top:1.25rem;font-size:1.1rem;font-weight:600}
.feature p{position:relative;margin-top:.5rem;font-size:.875rem;color:var(--muted-fg)}

/* stats */
.stats{display:grid;gap:2rem;border-radius:1.5rem;padding:2.5rem;background:oklch(1 0 0/.72);backdrop-filter:blur(16px);border:1px solid var(--border)}
@media(min-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center}
.stat .n{font-family:"Sora",sans-serif;font-size:clamp(2.2rem,4vw,3rem);font-weight:600}
.stat .l{margin-top:.5rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-fg)}

/* testimonials */
.quote{width:22rem;flex:0 0 auto;border-radius:1rem;padding:1.5rem;background:oklch(1 0 0/.75);backdrop-filter:blur(14px);border:1px solid var(--border);transition:transform .5s var(--ease)}
.quote:hover{transform:translateY(-6px)}
.quote blockquote{font-size:.9rem;line-height:1.6}
.quote figcaption{margin-top:1.25rem;display:flex;align-items:center;gap:.75rem}

/* pricing */
.grid-price{margin-top:3.5rem;display:grid;gap:1.25rem}
@media(min-width:1024px){.grid-price{grid-template-columns:repeat(3,1fr)}}
.tier{position:relative;height:100%;border-radius:1.5rem;border:1px solid var(--border);background:oklch(.55 .2 258/.03);padding:1.75rem;transition:transform .4s var(--ease),border-color .4s}
.tier:hover{transform:translateY(-6px) scale(1.02);border-color:oklch(.55 .2 258/.35)}
.tier.pop{border-color:oklch(.55 .2 258/.4);background:oklch(.55 .2 258/.07);box-shadow:var(--shadow-glow)}
.badge{position:absolute;right:1.5rem;top:1.5rem;border-radius:999px;padding:.25rem .75rem;font-size:.68rem;color:var(--primary-fg);background:var(--gradient-cta);animation:bob 3.6s ease-in-out infinite}
.price{margin-top:1.25rem;font-family:"Sora",sans-serif;font-size:2.25rem;font-weight:600}
.tier ul{list-style:none;margin-top:1.75rem;display:grid;gap:.75rem}
.tier li{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--muted-fg)}
.tick{width:20px;height:20px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:oklch(.55 .2 258/.15);color:var(--primary);font-size:.7rem}

/* cta + footer */
.cta{position:relative;overflow:hidden;border-radius:2rem;padding:4rem 2rem;text-align:center;background:oklch(1 0 0/.72);backdrop-filter:blur(16px);border:1px solid var(--border)}
.cta .glow{position:absolute;inset:-33%;background:var(--gradient-aurora);filter:blur(60px);opacity:.4;animation:drift 22s ease-in-out infinite}
footer{border-top:1px solid var(--border);padding:2.5rem 1.25rem;margin-top:1rem}
footer .inner{max-width:72rem;margin:0 auto;display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--muted-fg)}
@media(min-width:640px){footer .inner{flex-direction:row}}
.pad{padding:7rem 1.25rem}
.pad-sm{padding:4rem 0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none;filter:none}.word{opacity:1;transform:none}}