:root{
    /* One accent drives the whole page — change this line to restyle it. */
    --acc:#ff7a1a;
    --acc-soft:rgba(255,122,26,.13);
    --bg:#0b0b0d; --surface:#141417; --line:rgba(255,255,255,.09);
    --ink:#f5f5f7; --dim:rgba(235,235,245,.62); --dimmer:rgba(235,235,245,.38);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:var(--bg); color:var(--ink); line-height:1.6;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  .wrap{max-width:1040px;margin:0 auto;padding:0 20px}

  header{position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);
    background:rgba(11,11,13,.78);border-bottom:1px solid var(--line)}
  .bar{display:flex;align-items:center;justify-content:space-between;height:62px}
  .logo{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.2px;text-decoration:none}
  .logo svg{color:var(--acc)}
  .btn{display:inline-block;background:var(--acc);color:#15100a;font-weight:650;
    text-decoration:none;padding:11px 20px;border-radius:999px;transition:transform .15s ease,filter .15s ease}
  .btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}

  .hero{padding:84px 0 64px;text-align:center}
  .eyebrow{display:inline-block;font-size:13px;color:var(--acc);background:var(--acc-soft);
    border:1px solid rgba(255,122,26,.25);padding:5px 13px;border-radius:999px;margin-bottom:22px}
  h1{font-size:clamp(34px,6vw,58px);line-height:1.08;letter-spacing:-1.4px;font-weight:760}
  h1 em{font-style:normal;color:var(--acc)}
  .lede{max-width:580px;margin:20px auto 32px;color:var(--dim);font-size:clamp(16px,2.2vw,19px)}
  .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .note{margin-top:18px;font-size:13px;color:var(--dimmer)}

  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:56px 0}
  .stat{background:var(--surface);padding:22px 18px;text-align:center}
  .stat b{display:block;font-size:26px;color:var(--acc);letter-spacing:-.5px}
  .stat span{font-size:13px;color:var(--dim)}

  h2{font-size:clamp(24px,3.6vw,33px);letter-spacing:-.8px;margin-bottom:8px}
  .sub{color:var(--dim);margin-bottom:34px}
  section{padding:56px 0}

  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;
    transition:border-color .15s ease,transform .15s ease}
  .card:hover{border-color:rgba(255,122,26,.35);transform:translateY(-2px)}
  .card h3{font-size:16.5px;margin-bottom:7px;display:flex;align-items:center;gap:9px}
  .card h3 svg{color:var(--acc);flex:none}
  .card p{font-size:14.5px;color:var(--dim)}

  footer{border-top:1px solid var(--line);padding:30px 0;color:var(--dimmer);font-size:13px;
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

  /* ---- motion ---- */
  /* Everything animates once and stops. A landing page that keeps moving while
     you read it is harder to read, not livelier. */
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes glow{0%,100%{opacity:.5;transform:translate(-50%,0) scale(1)}
                  50%{opacity:.8;transform:translate(-50%,0) scale(1.12)}}

  .hero > *{animation:rise .7s cubic-bezier(.2,.75,.2,1) both}
  .hero > *:nth-child(1){animation-delay:.05s}
  .hero > *:nth-child(2){animation-delay:.14s}
  .hero > *:nth-child(3){animation-delay:.23s}
  .hero > *:nth-child(4){animation-delay:.32s}
  .hero > *:nth-child(5){animation-delay:.41s}

  /* A single soft bloom behind the headline, breathing slowly. */
  .hero::before{content:'';position:absolute;left:50%;top:-80px;width:760px;height:420px;
    background:radial-gradient(ellipse at center,var(--acc-soft) 0%,transparent 68%);
    transform:translate(-50%,0);pointer-events:none;z-index:-1;
    animation:glow 9s ease-in-out infinite}
  .hero{position:relative;isolation:isolate}

  /* Revealed as they come into view, staggered down each row. */
  .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .6s cubic-bezier(.2,.75,.2,1),transform .6s cubic-bezier(.2,.75,.2,1)}
  .reveal.in{opacity:1;transform:none}

  .card{position:relative;overflow:hidden}
  .card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--acc-soft),transparent 42%);
    opacity:0;transition:opacity .25s ease}
  .card:hover::after{opacity:1}

  .btn{position:relative;overflow:hidden}
  .stat b{font-variant-numeric:tabular-nums}

  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important}
    .reveal{opacity:1;transform:none}
    .hero::before{animation:none}
  }

/* ---- auth pages ---- */
.auth{min-height:calc(100vh - 62px);display:grid;place-items:center;padding:48px 20px}
.auth-card{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:34px;animation:rise .6s cubic-bezier(.2,.75,.2,1) both}
.auth-card h1{font-size:28px;letter-spacing:-.8px;margin-bottom:8px}
.auth-card .lede{margin:0 0 26px;text-align:left;font-size:15.5px}
.steps{list-style:none;counter-reset:s;margin:0 0 26px}
.steps li{counter-increment:s;position:relative;padding:0 0 16px 40px;color:var(--dim);font-size:14.5px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:26px;height:26px;
  display:grid;place-items:center;border-radius:50%;background:var(--acc-soft);
  border:1px solid rgba(255,122,26,.3);color:var(--acc);font-size:13px;font-weight:650}
.steps li b{color:var(--ink);font-weight:600}
.auth-card .btn{width:100%;text-align:center;padding:13px 20px}
.auth-alt{margin-top:18px;text-align:center;font-size:14px;color:var(--dim)}
.auth-alt a{color:var(--acc);text-decoration:none}
.auth-alt a:hover{text-decoration:underline}
.auth-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;color:var(--dimmer)}