/* 1. Tokens */
:root{--bg:#0a0a0a;--bg2:#101010;--text:#f4f4f3;--muted:#9b9b9f;--border:rgba(255,255,255,.1);--card:#121212;--accent:#fff;--accent-fg:#000;--glow:rgba(255,255,255,.12);--shadow:0 30px 80px -30px rgba(0,0,0,.8);
--s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:5rem;--s6:8rem;--r:12px;--max:1180px;--ease:cubic-bezier(.2,.7,.2,1)}
[data-theme=light]{--bg:#fafaf9;--bg2:#f1f1ef;--text:#0a0a0a;--muted:#66666b;--border:rgba(0,0,0,.1);--card:#fff;--accent:#000;--accent-fg:#fff;--glow:rgba(0,0,0,.06);--shadow:0 30px 70px -35px rgba(0,0,0,.25)}
/* 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1rem/1.6 Manrope,system-ui,sans-serif;background:var(--bg);color:var(--text);transition:background .4s,color .4s;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,blockquote{margin:0}ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-fg);padding:.5rem 1rem;z-index:100;border-radius:6px}.skip:focus{left:8px}
.wrap{width:min(100% - 2.5rem,var(--max));margin-inline:auto}.wrap--narrow{max-width:780px}
.section{padding-block:clamp(4rem,9vw,var(--s6));border-top:1px solid var(--border)}
h1{font-size:clamp(2.6rem,7.5vw,6rem);line-height:1.02;letter-spacing:-.045em;font-weight:700}
h2{font-size:clamp(1.9rem,4.2vw,3.25rem);line-height:1.1;letter-spacing:-.03em;font-weight:600;max-width:18ch;margin-bottom:var(--s4)}
h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em}
.lead{color:var(--muted);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:56ch}
.muted,p{color:var(--muted)}h1,h2,h3{color:var(--text)}
.label{font-size:.75rem;letter-spacing:.18em;color:var(--muted);border:1px solid var(--border);display:inline-block;padding:.35rem .8rem;border-radius:99px;margin-bottom:var(--s3)}
.head{margin-bottom:var(--s4)}.head h2{margin-bottom:var(--s2)}
.icon{color:var(--text);margin-bottom:var(--s3)}
/* 3. Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.25rem;border-radius:99px;font-weight:600;font-size:.92rem;border:1px solid var(--border);position:relative;overflow:hidden;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
.btn--primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn--ghost{background:transparent;color:var(--text)}.btn--ghost:hover{border-color:var(--text)}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.97)}
.btn--lg{padding:.95rem 1.7rem;font-size:1rem}
.btn .rip{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;transition:border-color .25s,background .25s}.icon-btn:hover{border-color:var(--text)}
/* 4. Nav */
.nav{position:fixed;inset:12px 0 auto;z-index:50;transition:inset .3s}
.nav__inner{width:min(100% - 1.5rem,1100px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .6rem .55rem 1.1rem;border:1px solid transparent;border-radius:99px;transition:background .3s,border-color .3s,backdrop-filter .3s}
.nav.is-scrolled .nav__inner{background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px);border-color:var(--border)}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.22em;font-size:.95rem}
.logo__img{display:none}.logo__mark{color:var(--text)}
.nav__links{display:flex;gap:2rem;font-size:.92rem;color:var(--muted)}.nav__links a{transition:color .2s}.nav__links a:hover{color:var(--text)}
.nav__actions{display:flex;align-items:center;gap:.6rem}.nav__cta-m,.burger{display:none}
.ic--sun{display:none}[data-theme=light] .ic--sun{display:block}[data-theme=light] .ic--moon{display:none}
.burger{flex-direction:column;gap:5px;align-items:center;justify-content:center}.burger span{width:16px;height:1.5px;background:var(--text);transition:transform .3s}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.2px) rotate(45deg)}.burger[aria-expanded=true] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}
/* 5. Hero */
.hero{position:relative;padding:clamp(8rem,16vw,11rem) 0 var(--s5);text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 20%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000,transparent 70%);opacity:.5}
.hero__glow{position:absolute;left:50%;top:-20%;width:min(900px,120vw);aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,var(--glow),transparent 60%);pointer-events:none}
.hero__inner{position:relative}.hero .lead{margin:var(--s3) auto var(--s4)}
.hero__cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.hero__visual{margin-top:clamp(3rem,7vw,5rem);position:relative;text-align:left}
[data-hero]{animation:up .9s var(--ease) both}[data-hero]:nth-child(2){animation-delay:.08s}[data-hero]:nth-child(3){animation-delay:.16s}[data-hero]:nth-child(4){animation-delay:.24s}[data-hero]:nth-child(5){animation-delay:.36s}
@keyframes up{from{opacity:0;transform:translateY(24px)}}
/* 6. Dashboard */
.dash{border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:var(--shadow),0 0 0 1px var(--glow);overflow:hidden;font-size:.82rem;transition:background .4s,border-color .4s}
.dash__bar{display:flex;align-items:center;gap:6px;padding:.7rem 1rem;border-bottom:1px solid var(--border)}
.dash__bar i{width:9px;height:9px;border-radius:50%;background:var(--border)}.dash__bar span{margin:0 auto;color:var(--muted);font-size:.72rem;padding-right:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash__body{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;padding:.9rem}
.d-card{border:1px solid var(--border);border-radius:10px;padding:1rem;background:var(--bg);display:flex;flex-direction:column;gap:.45rem;transition:border-color .3s,transform .3s var(--ease)}
.d-card:hover{border-color:var(--muted);transform:translateY(-2px)}
.d-card small{color:var(--muted);font-size:.72rem}.d-card b{font-weight:600;color:var(--text)}
.d-main{grid-column:span 2}.d-chat{grid-column:span 2;grid-row:span 2}.d-wide{grid-column:span 2}
.d-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ring{--p:0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;color:var(--text);background:conic-gradient(var(--text) calc(var(--p)*1%),var(--border) 0);position:relative;flex:none}
.ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg)}.ring span,.ring{z-index:0}.ring span{position:relative}
.bar{height:4px;background:var(--border);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--text);transition:width 1.4s var(--ease)}.dash.is-in .bar i{width:var(--w)}
.objective{border-left:2px solid var(--text);padding:.2rem .8rem;color:var(--muted);display:flex;flex-direction:column;margin-top:.3rem}
.msg{padding:.6rem .8rem;border-radius:10px;font-size:.8rem;line-height:1.45;max-width:92%}
.msg--u{background:var(--bg2);align-self:flex-end;color:var(--text)}.msg--a{border:1px solid var(--border);color:var(--text)}
.is-hidden{display:none}.msg:not(.is-hidden){animation:up .4s var(--ease)}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}.chips button{border:1px solid var(--border);border-radius:99px;padding:.3rem .7rem;font-size:.72rem;color:var(--muted);transition:all .2s}.chips button:hover,.chips button.is-on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.score{display:flex;align-items:baseline;gap:.5rem}.score span{font-size:2.2rem;font-weight:700;letter-spacing:-.04em;color:var(--text)}.score em{font-style:normal;color:var(--muted);font-size:.75rem}
.pill{align-self:flex-start;border:1px solid var(--border);border-radius:99px;padding:.1rem .6rem;font-size:.7rem;color:var(--muted)}
.d-wide ul li{display:flex;justify-content:space-between;padding:.4rem 0;border-top:1px solid var(--border);color:var(--muted)}
/* 7. Problem / cards */
.grid{display:grid;gap:1rem}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}
.problems{gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.problems li{padding:var(--s4) var(--s3);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:.7rem}.problems li:last-child{border:0}
.num{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:var(--s3);transition:transform .35s var(--ease),border-color .3s,box-shadow .35s,background .4s}
.feature{min-height:260px;display:flex;flex-direction:column}.feature p{margin-top:.6rem}
.feature:hover{transform:translateY(-6px);border-color:var(--muted);box-shadow:var(--shadow)}.feature:hover .icon{transform:scale(1.1)}.icon{transition:transform .35s var(--ease)}
/* 8. Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;top:22px;left:22px;right:22px;height:1px;background:var(--border)}
.steps li{position:relative;display:flex;flex-direction:column;gap:.5rem}
.dot{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--bg);display:grid;place-items:center;font-size:.78rem;margin-bottom:1rem;transition:all .3s;color:var(--text)}
.steps li:hover .dot{background:var(--accent);color:var(--accent-fg)}
/* 9. Audience */
.aud{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--r);background:var(--card);overflow:hidden}
.aud>div{padding:var(--s4) var(--s3);border-right:1px solid var(--border);transition:background .3s;display:flex;flex-direction:column;gap:.5rem}.aud>div:last-child{border:0}.aud>div:hover{background:var(--bg2)}
.aud .icon{margin-bottom:var(--s4)}
/* 10. Showcase */
.showcase{position:relative;padding:2.5rem 0}
.tag{position:absolute;font-size:.75rem;color:var(--text);background:var(--bg);border:1px solid var(--border);padding:.35rem .8rem;border-radius:99px;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite;white-space:nowrap}
.tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text);margin-right:.5rem}
.tag--1{left:-1%;top:8%}.tag--2{right:-1%;top:32%;animation-delay:-2s}.tag--3{left:2%;bottom:28%;animation-delay:-4s}.tag--4{right:3%;bottom:6%;animation-delay:-1s}
@keyframes float{50%{transform:translateY(-6px)}}
[data-large] .dash{font-size:.9rem}[data-large] .dash__body{padding:1.2rem;gap:1rem}
/* 11. Philosophy */
.philosophy{background:var(--bg2);text-align:center}
.statement{max-width:20ch;margin:0 auto var(--s3);font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:700;letter-spacing:-.04em}
.philosophy .lead{margin:0 auto}
.flow{display:flex;justify-content:center;align-items:center;margin-top:var(--s5);flex-wrap:wrap;gap:.5rem}
.flow li{padding:.8rem 1.4rem;border:1px solid var(--border);border-radius:99px;background:var(--card);color:var(--text);font-weight:500;display:flex;align-items:center;gap:.5rem}
.flow li:not(:last-child)::after{content:"";width:clamp(1rem,4vw,3rem);height:1px;background:var(--muted);margin-left:.5rem;margin-right:-1.4rem;transform:translateX(1.4rem);position:absolute;display:none}
.flow li+li{position:relative;margin-left:clamp(1.5rem,4vw,3rem)}
.flow li+li::before{content:"";position:absolute;right:100%;top:50%;width:clamp(1.5rem,4vw,3rem);height:1px;background:var(--muted)}
.flow li:last-child{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
/* 12. Compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.col{border:1px solid var(--border);border-radius:var(--r);padding:var(--s4) var(--s3);background:var(--card)}.col h3{margin-bottom:var(--s3)}
.col--hl{border-color:var(--text);box-shadow:0 0 60px -20px var(--glow)}
.chain{display:flex;flex-direction:column;align-items:flex-start}
.chain li{padding:.5rem 1rem;border:1px solid var(--border);border-radius:8px;font-size:.92rem;color:var(--text);position:relative;margin-bottom:1.4rem}
.chain li:not(:last-child)::after{content:"";position:absolute;left:50%;top:100%;height:1.4rem;width:1px;background:var(--muted)}
.chain li:last-child{margin:0}.col:not(.col--hl) li{color:var(--muted)}.col--hl li:last-child{background:var(--accent);color:var(--accent-fg)}
/* 13. Pricing */
.switch{display:inline-flex;border:1px solid var(--border);border-radius:99px;padding:4px;margin-bottom:var(--s4)}
.switch button{padding:.5rem 1.2rem;border-radius:99px;font-size:.88rem;color:var(--muted);transition:all .25s}.switch small{opacity:.7}
.switch .is-on{background:var(--accent);color:var(--accent-fg)}
.plan{display:flex;flex-direction:column;gap:.5rem;position:relative}.plan:hover{border-color:var(--muted)}
.price{display:flex;align-items:baseline;gap:.4rem;margin:var(--s2) 0}.price strong{font-size:2.6rem;letter-spacing:-.04em;line-height:1;color:var(--text);display:inline-block;transition:opacity .2s,transform .3s}
.price strong.swap{opacity:0;transform:translateY(6px)}
.plan ul{display:flex;flex-direction:column;gap:.55rem;margin-bottom:var(--s3);flex:1;font-size:.9rem;color:var(--muted)}
.plan li{display:flex;gap:.6rem;align-items:flex-start}.plan li::before{content:"";width:14px;height:14px;margin-top:.3rem;flex:none;background:var(--text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.500 4.500L19 7.500'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.500 4.500L19 7.500'/%3E%3C/svg%3E") center/contain no-repeat}
.plan--hot{border-color:var(--text);box-shadow:0 0 70px -25px var(--glow);transform:translateY(-8px)}
.badge{position:absolute;top:-12px;left:var(--s3);background:var(--accent);color:var(--accent-fg);font-size:.72rem;font-weight:700;padding:.2rem .8rem;border-radius:99px}
.note{text-align:center;color:var(--muted);margin-top:var(--s4);font-size:.9rem}
/* 14. About / FAQ */
.about{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}.about h2{margin:0}
blockquote{margin-top:var(--s4);padding-left:1.2rem;border-left:2px solid var(--text);color:var(--text);font-size:1.1rem;line-height:1.5}
.faq__item{border-bottom:1px solid var(--border)}.faq h3{font-size:1rem}
.faq button{width:100%;text-align:left;padding:1.3rem 0;display:flex;justify-content:space-between;gap:1rem;font-weight:500;font-size:1.05rem}
.faq button::after{content:"+";font-size:1.4rem;line-height:1;color:var(--muted);transition:transform .3s}.faq button[aria-expanded=true]::after{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}.faq__a>p{overflow:hidden}.faq__a.is-open{grid-template-rows:1fr}.faq__a.is-open>p{padding-bottom:1.3rem}
/* 15. CTA / Footer */
.cta{background:#0a0a0a;color:#fff;position:relative;overflow:hidden;text-align:center;padding-block:clamp(5rem,12vw,9rem)}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.22),transparent 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 80px)}
[data-theme=light] .cta{background:#0a0a0a}
.cta__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}.cta h2{color:#fff;margin:0;max-width:16ch}.cta .lead{color:#a8a8ad}.cta__star{color:#fff;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn--inv{background:#fff;color:#000;border-color:#fff}.btn--ghost-inv{color:#fff;border-color:rgba(255,255,255,.25)}.btn--ghost-inv:hover{border-color:#fff}
.footer{padding:var(--s5) 0 var(--s3);border-top:1px solid var(--border)}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--s4)}
.footer nav{display:flex;flex-direction:column;gap:.6rem;font-size:.9rem;color:var(--muted)}.footer h4{font-size:.85rem;color:var(--text);margin-bottom:.4rem}.footer nav a:hover{color:var(--text)}.footer .muted{margin-top:1rem}
.footer__bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--border);font-size:.82rem}.footer__bar a{margin-left:1.2rem}.footer__bar a:hover{color:var(--text)}
/* 16. Reveal */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.js .reveal.is-in{opacity:1;transform:none}
/* 17. Responsive */
@media(max-width:1024px){.grid--4{grid-template-columns:repeat(2,1fr)}.aud{grid-template-columns:repeat(2,1fr)}.aud>div:nth-child(2){border-right:0}.aud>div:nth-child(-n+2){border-bottom:1px solid var(--border)}.footer__grid{grid-template-columns:repeat(2,1fr)}.dash__body{grid-template-columns:repeat(2,1fr)}.tag{display:none}.plan--hot{transform:none}}
@media(max-width:860px){.nav__links{position:fixed;inset:72px 12px auto;flex-direction:column;gap:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .3s var(--ease)}.nav__links.is-open{opacity:1;visibility:visible;transform:none}.nav__links a{padding:.9rem 1rem;font-size:1rem}.nav__links .btn{margin:.5rem 0 0;color:var(--accent-fg)}.nav__cta{display:none}.nav__cta-m,.burger{display:inline-flex}.burger{display:flex}
.grid--3,.compare,.about{grid-template-columns:1fr}.problems li{border-right:0;border-bottom:1px solid var(--border)}.problems li:last-child{border:0}.about{gap:var(--s3)}
.steps{grid-template-columns:1fr;gap:0}.steps::before{top:0;bottom:0;left:22px;right:auto;width:1px;height:auto}.steps li{padding:0 0 2rem 4rem}.dot{position:absolute;left:0;top:0;margin:0}}
@media(max-width:600px){.grid--4,.aud{grid-template-columns:1fr}.aud>div{border-right:0;border-bottom:1px solid var(--border)}.aud>div:last-child{border:0}.dash__body{grid-template-columns:1fr}.d-main,.d-chat,.d-wide{grid-column:auto;grid-row:auto}.footer__grid{grid-template-columns:1fr 1fr}.footer__grid>div:first-child{grid-column:1/-1}.flow{flex-direction:column;gap:1.8rem}.flow li+li{margin-left:0}.flow li+li::before{right:auto;left:50%;top:auto;bottom:100%;width:1px;height:1.8rem}.hero__cta .btn{width:100%}.footer__bar a:first-child{margin-left:0}}
/* 18. Reduced motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}}