:root{
    --asphalt-950:#0f1114;
    --asphalt-900:#15171b;
    --asphalt-850:#191c21;
    --asphalt-800:#1d2025;
    --asphalt-750:#22262c;
    --asphalt-700:#282c33;
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.16);
    --concrete-400:#7d838f;
    --concrete-300:#a8afb9;
    --concrete-200:#ced3da;
    --white:#f6f7f9;
    --beacon:#ffb020;
    --beacon-dim:rgba(255,176,32,.14);
    --beacon-line:rgba(255,176,32,.4);
    --success:#39d98a;
    --success-dim:rgba(57,217,138,.14);

    --radius-lg:18px;
    --radius-md:13px;
    --ease:cubic-bezier(.22,1,.36,1);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--asphalt-950);
    background-image:
      radial-gradient(900px 500px at 8% -10%, rgba(255,176,32,.05), transparent 60%),
      radial-gradient(700px 500px at 100% 0%, rgba(57,217,138,.03), transparent 55%);
    color:var(--white);
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }

  .mono{ font-family:"JetBrains Mono",ui-monospace,monospace; }
  button, a{ -webkit-tap-highlight-color:transparent; }
  button{ font:inherit; color:inherit; }

  :focus-visible{
    outline:2px solid var(--beacon);
    outline-offset:2px;
    border-radius:6px;
  }

  .sr-only{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .wrap{ width:min(100% - 32px, 1040px); margin:0 auto; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }

  /* =========================
     HEADER (mesmo padrão do restante do fluxo)
  ========================== */

  .app-header{
    position:sticky; top:0; z-index:50;
    background:rgba(15,17,20,.88);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .bar{
    min-height:60px;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
  }

  .back{
    color:var(--concrete-300);
    text-decoration:none;
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:600;
    padding:6px 4px;
    border-radius:8px;
    transition:color .15s var(--ease);
  }
  .back:hover{ color:var(--beacon); }
  .back svg{ width:17px; height:17px; flex:none; }
  .back-txt{ display:inline; }

  .logo{
    font-weight:900; font-size:15px; letter-spacing:.5px;
    white-space:nowrap;
    display:flex; align-items:baseline; gap:1px;
  }
  .logo .k{ color:var(--beacon); }
  .logo .m{ color:var(--white); }
  .logo .rest{ color:var(--concrete-200); font-weight:800; margin-left:5px; letter-spacing:1.2px; font-size:12px; }

  .stage{ display:flex; align-items:center; gap:9px; }
  .stage-label{
    font-family:"JetBrains Mono",monospace;
    font-size:10px; font-weight:600;
    color:var(--concrete-400);
    letter-spacing:.4px;
    white-space:nowrap;
  }
  .stage-track{ display:flex; align-items:center; gap:4px; }
  .stage-track .seg{
    width:16px; height:3px; border-radius:2px;
    background:var(--asphalt-700);
    position:relative; overflow:hidden;
  }
  .stage-track .seg.current::after{
    content:"";
    position:absolute; inset:0 45% 0 0;
    background:var(--beacon);
    border-radius:2px;
  }

  @media (max-width:560px){
    .back-txt{ display:none; }
    .stage-label{ display:none; }
    .logo{ font-size:13.5px; }
    .logo .rest{ font-size:10.5px; }
  }

  /* =========================
     MAIN
  ========================== */

  .app-main{ padding:34px 0 90px; }
  .content{ max-width:620px; margin:0 auto; }

  .app-head{ margin-bottom:24px; text-align:center; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:7px;
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px; font-weight:700; letter-spacing:.9px;
    color:var(--beacon);
    background:var(--beacon-dim);
    border:1px solid var(--beacon-line);
    padding:5px 9px 5px 7px;
    border-radius:100px;
    margin-bottom:14px;
  }
  .eyebrow .pip{
    width:5px; height:5px; border-radius:50%;
    background:var(--beacon);
    box-shadow:0 0 8px rgba(255,176,32,.8);
  }

  h1{
    font-size:clamp(23px,4.6vw,30px);
    line-height:1.14;
    margin:0 0 9px;
    letter-spacing:-.6px;
    font-weight:800;
  }

  .app-head p{
    color:var(--concrete-300);
    font-size:14px; line-height:1.6;
    margin:0 auto;
    max-width:44ch;
  }