:root{
  --bg:#0a0b0e;
  --fg:#f3f5f8;
  --muted:#8b919c;
  --dim:#5b616b;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.06);
  --panel:rgba(255,255,255,.025);
  --panel-2:rgba(255,255,255,.05);
  --accent:#6c8cff;
  --accent-2:#a5b8ff;
  --radius:14px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:"Inter",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,h4{font-family:"Inter Tight",sans-serif;letter-spacing:-.03em;line-height:1.04}

/* Dot grid background */
.grid-bg{position:fixed;inset:0;z-index:-2;
  background-image:radial-gradient(circle at center,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--fg);color:#0a0b0e;
  font-weight:600;font-size:.92rem;padding:.7rem 1.25rem;border-radius:10px;
  border:1px solid transparent;transition:transform .3s var(--ease),background .25s,box-shadow .3s;will-change:transform}
.btn:hover{background:#fff;box-shadow:0 8px 30px rgba(255,255,255,.12)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn--sm{padding:.55rem 1rem;font-size:.88rem}
.btn--lg{padding:.9rem 1.6rem;font-size:1rem}
.btn--full{width:100%;justify-content:center}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn--ghost:hover{background:var(--panel-2);box-shadow:none}

/* Nav */
.nav{position:fixed;top:0;left:0;width:100%;z-index:200;display:flex;align-items:center;
  justify-content:space-between;padding:1rem 4vw;transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,11,14,.72);backdrop-filter:blur(14px);border-color:var(--line-2)}
.nav__logo{display:flex;align-items:center;gap:.55rem;font-family:"Inter Tight";font-weight:700;font-size:1.18rem}
.nav__mark{width:20px;height:20px;border-radius:6px;background:var(--fg);position:relative}
.nav__mark::after{content:"";position:absolute;inset:5px;border-radius:2px;background:var(--bg)}
.nav__center{display:flex;gap:2rem}
.nav__center a{color:var(--muted);font-size:.92rem;transition:color .25s}
.nav__center a:hover{color:var(--fg)}
.nav__right{display:flex;align-items:center;gap:1.3rem}
.nav__login{color:var(--muted);font-size:.92rem;transition:color .25s}
.nav__login:hover{color:var(--fg)}
@media(max-width:860px){.nav__center,.nav__login{display:none}}

/* Hero */
.hero{text-align:center;padding:19vh 4vw 0;display:flex;flex-direction:column;align-items:center}
.pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:40px;padding:.35rem .5rem .35rem .8rem;
  margin-bottom:2.2rem;transition:border-color .3s,color .25s}
.pill:hover{border-color:var(--accent);color:var(--fg)}
.pill__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.pill .arr{color:var(--dim)}
.hero__title{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:700}
.hero__title .grad{background:linear-gradient(180deg,#fff,var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__sub{max-width:56ch;margin:1.8rem auto 0;color:var(--muted);font-size:1.15rem;line-height:1.6}
.hero__cta{display:flex;gap:.8rem;margin-top:2.4rem;flex-wrap:wrap;justify-content:center}
.hero__note{margin-top:1.3rem;color:var(--dim);font-size:.85rem}

/* App mock */
.app{position:relative;max-width:1120px;width:100%;margin:7vh auto 0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02);will-change:transform}
.app__glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:70%;height:60%;
  background:radial-gradient(ellipse,rgba(108,140,255,.35),transparent 70%);filter:blur(40px);z-index:0}
.app__chrome{position:relative;display:flex;align-items:center;gap:1rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line-2)}
.dots{display:flex;gap:.45rem}.dots i{width:11px;height:11px;border-radius:50%;background:var(--panel-2)}
.app__url{font-size:.78rem;color:var(--dim);background:var(--panel);padding:.3rem .9rem;border-radius:7px;border:1px solid var(--line-2);margin:0 auto}
.app__body{position:relative;display:grid;grid-template-columns:200px 1fr 220px;min-height:420px;z-index:1}
.app__side{border-right:1px solid var(--line-2);padding:1rem .9rem;display:flex;flex-direction:column;gap:1.4rem}
.side__team{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:500}
.side__team .chev{margin-left:auto;color:var(--dim)}
.ava{width:22px;height:22px;border-radius:6px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:.7rem;font-weight:600}
.side__nav{display:flex;flex-direction:column;gap:.15rem}
.side__nav a{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted);padding:.4rem .55rem;border-radius:7px;transition:background .2s,color .2s}
.side__nav a .ic{color:var(--dim);font-size:.9rem}
.side__nav a em{margin-left:auto;font-style:normal;font-size:.7rem;background:var(--panel-2);padding:.05rem .4rem;border-radius:20px;color:var(--fg)}
.side__nav a.on{background:var(--panel-2);color:var(--fg)}
.side__label{font-size:.72rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:.5rem}
.side__proj a{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--muted);padding:.35rem .55rem}
.d{width:8px;height:8px;border-radius:50%}.d1{background:#6c8cff}.d2{background:#e2a3ff}.d3{background:#7de0c0}
.app__main{padding:1.3rem 1.4rem;border-right:1px solid var(--line-2)}
.main__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.main__head h4{font-size:1.15rem}
.main__sub{font-size:.8rem;color:var(--dim)}
.main__avatars{display:flex}
.main__avatars b{width:26px;height:26px;border-radius:50%;background:var(--panel-2);border:1.5px solid var(--bg);
  display:grid;place-items:center;font-size:.68rem;font-weight:600;color:var(--muted);margin-left:-7px}
.prog{height:5px;border-radius:5px;background:var(--panel-2);overflow:hidden;margin-bottom:1.2rem}
.prog i{display:block;height:100%;width:66%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:5px}
.tasks{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.task{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border:1px solid var(--line-2);border-radius:9px;background:var(--panel);font-size:.85rem}
.task .check{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--dim);flex:0 0 auto;display:grid;place-items:center;font-size:.65rem;color:transparent}
.task.done .check{background:var(--accent);border-color:var(--accent);color:#fff}
.task.done .t{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--dim)}
.task.hot{border-color:rgba(108,140,255,.4);background:rgba(108,140,255,.07)}
.task .t{flex:1}
.tag{font-size:.68rem;color:var(--muted);border:1px solid var(--line);padding:.1rem .5rem;border-radius:20px}
.tag--2{color:#e2a3ff;border-color:rgba(226,163,255,.3)}
.tag--3{color:var(--accent-2);border-color:rgba(108,140,255,.4)}
.tag--4{color:#7de0c0;border-color:rgba(125,224,192,.3)}
.ava2{width:22px;height:22px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;font-size:.66rem;font-weight:600;color:var(--muted);flex:0 0 auto}
.app__panel{padding:1.2rem 1.1rem;display:flex;flex-direction:column;gap:1rem}
.panel__label{font-size:.72rem;color:var(--accent-2);letter-spacing:.04em}
.panel__text{font-size:.85rem;line-height:1.5;color:var(--muted)}
.panel__chart{margin-top:auto;border:1px solid var(--line-2);border-radius:10px;padding:.8rem;background:var(--panel)}
.panel__chart svg{width:100%;height:44px}
.panel__chart polyline{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.panel__chart span{font-size:.72rem;color:#7de0c0;display:block;margin-top:.5rem}
@media(max-width:820px){.app__body{grid-template-columns:1fr}.app__side,.app__panel{display:none}.app__main{border:none}}

/* Logos */
.logos{text-align:center;padding:11vh 4vw 3vh}
.logos__label{font-size:.8rem;color:var(--dim);letter-spacing:.06em}
.logos__row{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem;
  font-family:"Inter Tight";font-weight:700;font-size:1.35rem;color:var(--fg);opacity:.34}
.logos__row b{transition:opacity .3s}.logos__row:hover b{opacity:.5}.logos__row b:hover{opacity:1}

/* Section head */
.sec-head{margin-bottom:5vh}
.sec-head.center{text-align:center}
.kick{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);display:block;margin-bottom:1.1rem}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.4rem)}

/* Bento features */
.features{padding:7vh 4vw}
.bento{display:grid;grid-template-columns:2fr 1fr 1fr 2fr;gap:1.1rem}
.cell{grid-column:span 1;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:1.6rem;display:flex;flex-direction:column;justify-content:space-between;
  gap:1.6rem;min-height:250px;transition:border-color .4s,background .4s}
.cell:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.cell--lg{grid-column:span 2}
.cell__txt h3{font-size:1.3rem;margin-bottom:.5rem}
.cell__txt p{color:var(--muted);font-size:.92rem;line-height:1.55}
.cell__vis{border:1px solid var(--line-2);border-radius:10px;background:var(--bg);padding:1rem;min-height:96px}
/* mini visuals */
.mini-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.mini-cols .mc{display:flex;flex-direction:column;gap:.4rem}
.mini-cols span{font-size:.68rem;color:var(--dim)}
.mini-cols i{height:22px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line-2)}
.mini-cols i.acc{background:rgba(108,140,255,.18);border-color:rgba(108,140,255,.4)}
.mini-note{display:flex;flex-direction:column;gap:.5rem;justify-content:center}
.mini-note span{height:8px;border-radius:5px;background:var(--panel-2)}
.mini-note span:nth-child(1){width:90%}.mini-note span:nth-child(2){width:60%}.mini-note span:nth-child(3){width:75%}
.mini-dep{display:flex;align-items:center;justify-content:center;gap:.6rem}
.mini-dep i{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);position:relative}
.mini-dep i:not(:last-child)::after{content:"→";position:absolute;right:-.75rem;top:50%;transform:translateY(-50%);color:var(--dim);font-size:.8rem}
.mini-dep i:nth-child(2){border-color:rgba(108,140,255,.5)}
.mini-doc{display:flex;flex-direction:column;gap:.5rem;justify-content:center}
.mini-doc b{width:40%;height:11px;border-radius:5px;background:var(--panel-2)}
.mini-doc span{height:8px;border-radius:5px;background:var(--line-2)}
.mini-doc span.short{width:55%}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.cell--lg{grid-column:span 2}}
@media(max-width:600px){.bento{grid-template-columns:1fr}.cell--lg{grid-column:span 1}}

/* Flow */
.flow{padding:10vh 4vw}
.flow__head{margin-bottom:5vh}
.flow__head h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:2rem;background:var(--panel);
  position:relative;overflow:hidden}
.step__n{font-family:"Inter Tight";font-size:.85rem;color:var(--accent-2);
  border:1px solid var(--line);border-radius:30px;padding:.25rem .7rem;display:inline-block}
.step h3{font-size:1.5rem;margin:1.4rem 0 .6rem}
.step p{color:var(--muted);line-height:1.55;font-size:.95rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* Metrics */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:8vh 4vw;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.metric{text-align:center}
.metric__n{font-family:"Inter Tight";font-weight:700;font-size:clamp(2.4rem,5.5vw,4rem)}
.metric em{font-style:normal;color:var(--accent-2);font-family:"Inter Tight";font-weight:600;font-size:clamp(1.4rem,3vw,2.2rem)}
.metric p{color:var(--muted);margin-top:.3rem;font-size:.9rem}
@media(max-width:720px){.metrics{grid-template-columns:1fr 1fr;gap:3rem}}

/* Pricing */
.pricing{padding:12vh 4vw}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:1040px;margin:0 auto}
.plan{border:1px solid var(--line);border-radius:var(--radius);padding:2rem;background:var(--panel);position:relative}
.plan--feat{border-color:rgba(108,140,255,.5);background:rgba(108,140,255,.05)}
.plan--feat::before{content:"";position:absolute;inset:0;border-radius:var(--radius);
  box-shadow:0 0 60px rgba(108,140,255,.15) inset;pointer-events:none}
.plan__tag{position:absolute;top:-11px;left:2rem;background:var(--accent);color:#fff;
  font-size:.72rem;font-weight:600;padding:.25rem .8rem;border-radius:30px}
.plan h4{font-size:1.1rem;color:var(--muted);font-weight:500}
.price{font-family:"Inter Tight";font-size:2.6rem;font-weight:700;margin:.5rem 0 .3rem}
.price span{font-size:.95rem;color:var(--dim);font-weight:400}
.plan__for{color:var(--muted);font-size:.9rem;margin-bottom:1.6rem}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.8rem}
.plan li{color:var(--muted);font-size:.92rem;padding-left:1.5rem;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--accent-2)}
@media(max-width:820px){.plans{grid-template-columns:1fr;max-width:420px}}

/* CTA */
.cta{position:relative;text-align:center;padding:16vh 4vw;overflow:hidden}
.cta__glow{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:60%;height:70%;
  background:radial-gradient(ellipse,rgba(108,140,255,.22),transparent 70%);filter:blur(50px);z-index:0}
.cta h2,.cta a,.cta p{position:relative;z-index:1}
.cta h2{font-size:clamp(2.4rem,6vw,4.6rem);margin-bottom:2.2rem}

/* Footer */
.foot{border-top:1px solid var(--line-2);padding:8vh 4vw 3vh}
.foot__top{display:grid;grid-template-columns:1.4fr 2.6fr;gap:3rem;padding-bottom:6vh}
.foot__brand p{color:var(--muted);font-size:.92rem;margin-top:1rem;max-width:26ch}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.foot__cols b{display:block;font-size:.9rem;margin-bottom:1rem}
.foot__cols a{display:block;color:var(--muted);font-size:.88rem;margin-bottom:.55rem;transition:color .2s}
.foot__cols a:hover{color:var(--fg)}
.foot__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  border-top:1px solid var(--line-2);padding-top:2rem;color:var(--dim);font-size:.82rem}
@media(max-width:820px){.foot__top{grid-template-columns:1fr}.foot__cols{grid-template-columns:1fr 1fr}}

/* anim helpers */
.anim{opacity:0}