:root{
      --bg:#0E0D0C;
      --panel:#151311;
      --panel2:#1A1715;
      --line:rgba(232,168,0,.18);
      --line2:rgba(255,255,255,.06);
      --text:#EDEAE3;
      --muted:#A09B94;
      --muted2:#6A655F;
      --amber:#E8A800;
      --amber2:rgba(232,168,0,.08);
      --amber3:rgba(232,168,0,.22);
      --red:#E84040;
      --red2:rgba(232,64,64,.12);
      --red3:rgba(232,64,64,.22);
      --safe:#2EAD74;
      --font-head:'Syne',sans-serif;
      --font-body:'DM Sans',sans-serif;
      --font-mono:'JetBrains Mono',monospace;
    }

    *{box-sizing:border-box}
    html{
      min-height:100%;
      background:var(--bg);
    }
    body{
      min-height:100%;
    }
    body{
      margin:0;
      background:
        radial-gradient(1200px 700px at 50% -5%, rgba(232,168,0,.08), transparent 55%),
        linear-gradient(180deg, #0E0D0C 0%, #0B0A09 100%);
      background-color:var(--bg);
      color:var(--text);
      font-family:var(--font-body);
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}
    button,input{font:inherit}

    .shell{
      min-height:100vh;
      min-height:100dvh;
      display:flex;
      flex-direction:column;
      background:inherit;
    }

    .topbar{
      height:68px;
      border-bottom:1px solid var(--line2);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 20px;
      background:rgba(10,9,8,.72);
      backdrop-filter:blur(10px);
      position:sticky;
      top:0;
      z-index:20;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }

    .brand-mark{
      width:34px;height:34px;flex:0 0 auto;
    }

    .brand-text{
      min-width:0;
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }

    .brand-title{
      font-family:var(--font-head);
      font-weight:800;
      font-size:18px;
      letter-spacing:.10em;
      color:var(--text);
      text-transform:uppercase;
    }

    .brand-sub{
      margin-top:3px;
      font-family:var(--font-mono);
      font-size:9px;
      letter-spacing:.24em;
      color:var(--muted2);
      text-transform:uppercase;
    }

    .status{
      display:flex;
      align-items:center;
      gap:9px;
      font-family:var(--font-mono);
      font-size:10px;
      letter-spacing:.18em;
      color:var(--muted2);
      text-transform:uppercase;
      white-space:nowrap;
    }

    .dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--safe);
      box-shadow:0 0 0 4px rgba(46,173,116,.10);
    }

    .page{
      width:min(1360px, 100%);
      margin:0 auto;
      padding:32px 20px 40px;
      flex:1;
      display:grid;
      grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr);
      gap:32px;
      align-items:stretch;
    }

    .left,
    .right{
      border:1px solid var(--line2);
      background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
      border-radius:10px;
      overflow:hidden;
      position:relative;
    }

    .left{
      padding:34px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:calc(100vh - 136px);
    }

    .eyebrow{
      font-family:var(--font-mono);
      font-size:11px;
      letter-spacing:.22em;
      color:var(--amber);
      text-transform:uppercase;
      margin-bottom:18px;
    }

    h1{
      margin:0;
      font-family:var(--font-head);
      font-size:clamp(52px, 8vw, 88px);
      line-height:.92;
      letter-spacing:.04em;
      text-transform:uppercase;
    }

    .headline-accent{
      color:var(--amber);
      display:block;
      margin-top:8px;
    }

    .lead{
      margin:18px 0 0;
      max-width:640px;
      font-size:clamp(16px, 1.6vw, 20px);
      line-height:1.7;
      color:var(--muted);
    }

    .micro{
      margin-top:18px;
      font-family:var(--font-mono);
      font-size:11px;
      letter-spacing:.12em;
      color:#B7B1A7;
      text-transform:uppercase;
    }

    .actions{
      margin-top:32px;
      display:flex;
      gap:14px;
      align-items:center;
      flex-wrap:wrap;
    }

    .cta{
      height:56px;
      border-radius:6px;
      padding:0 32px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-family:var(--font-mono);
      font-size:12px;
      font-weight:700;
      letter-spacing:.16em;
      text-transform:uppercase;
      border:none;
      background:var(--amber);
      color:#0E0D0C;
      min-width:260px;
      cursor:pointer;
      transition:opacity .14s ease, transform .14s ease;
      box-shadow:0 12px 28px rgba(232,168,0,.14);
    }
    .cta:hover{opacity:.88;transform:translateY(-1px);}

    .cta-note{
      max-width:260px;
      font-family:var(--font-mono);
      font-size:10px;
      line-height:1.45;
      letter-spacing:.10em;
      color:var(--muted2);
      text-transform:uppercase;
    }

    .triptych{
      margin-top:30px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      max-width:720px;
    }

    .stat{
      border:1px solid var(--line2);
      background:rgba(255,255,255,.02);
      border-radius:7px;
      padding:18px 16px;
      min-height:96px;
    }

    .stat-k{
      font-family:var(--font-mono);
      font-size:9px;
      letter-spacing:.18em;
      color:var(--muted2);
      text-transform:uppercase;
      margin-bottom:12px;
    }

    .stat-v{
      font-family:var(--font-head);
      font-size:clamp(18px, 2.2vw, 28px);
      color:var(--text);
      letter-spacing:.03em;
    }

    .stat-v.amber{color:var(--amber)}
    .stat-v.red{color:var(--red)}

    .right{
      display:flex;
      flex-direction:column;
      background:linear-gradient(180deg, rgba(24,21,18,.95), rgba(18,16,14,.96));
      border-color:rgba(232,168,0,.14);
      align-self:center;
      min-height:min(640px, calc(100vh - 136px));
      max-height:760px;
    }

    .preview-top{
      padding:18px 18px 0;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
    }

    .preview-label{
      font-family:var(--font-mono);
      font-size:10px;
      letter-spacing:.20em;
      color:var(--muted2);
      text-transform:uppercase;
    }

    .preview-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border:1px solid rgba(232,168,0,.20);
      border-radius:999px;
      color:var(--amber);
      font-family:var(--font-mono);
      font-size:10px;
      letter-spacing:.14em;
      text-transform:uppercase;
      background:rgba(232,168,0,.04);
      white-space:nowrap;
    }

    .preview-card{
      margin:18px;
      border:1px solid rgba(232,168,0,.16);
      border-radius:8px;
      overflow:hidden;
      background:#11100E;
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:0;
    }

    .preview-card-head{
      padding:14px 16px;
      border-bottom:1px solid rgba(232,168,0,.10);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      background:rgba(232,168,0,.02);
    }

    .preview-head-left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .preview-mini-mark{width:22px;height:22px;flex:0 0 auto;}

    .preview-brand{
      font-family:var(--font-head);
      font-weight:800;
      font-size:15px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--text);
    }

    .preview-sub{
      margin-top:2px;
      font-family:var(--font-mono);
      font-size:8px;
      letter-spacing:.20em;
      text-transform:uppercase;
      color:var(--muted2);
    }

    .preview-time{
      font-family:var(--font-mono);
      font-size:9px;
      letter-spacing:.10em;
      color:var(--muted2);
      white-space:nowrap;
    }

    .preview-body{
      padding:18px;
      display:grid;
      grid-template-columns:88px 1fr;
      gap:16px;
      flex:1;
      min-height:0;
    }

    .score-box{
      border:1px solid rgba(232,64,64,.18);
      background:rgba(232,64,64,.06);
      border-radius:8px;
      min-height:160px;
      min-width:88px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      position:relative;
    }

    .score-value{
      font-family:var(--font-head);
      font-size:58px;
      line-height:.92;
      color:var(--red);
      margin-bottom:4px;
    }

    .score-slash{
      font-family:var(--font-mono);
      font-size:12px;
      color:var(--muted2);
      letter-spacing:.12em;
    }

    .preview-copy{
      min-width:0;
      padding-top:4px;
    }

    .token-name{
      font-family:var(--font-head);
      font-size:clamp(28px, 3.8vw, 44px);
      letter-spacing:.04em;
      text-transform:uppercase;
      color:var(--amber);
      line-height:1;
      margin:0;
    }

    .token-meta{
      margin-top:8px;
      font-family:var(--font-mono);
      font-size:11px;
      color:var(--muted2);
      letter-spacing:.06em;
    }

    .tagline{
      margin-top:16px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:10px;
      border:1px solid rgba(232,64,64,.20);
      background:rgba(232,64,64,.06);
      color:var(--red);
      font-family:var(--font-mono);
      font-size:10px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    .why{
      margin-top:18px;
      border-top:1px solid rgba(255,255,255,.06);
      padding-top:14px;
    }

    .why-label,
    .how-label{
      font-family:var(--font-mono);
      font-size:9px;
      letter-spacing:.20em;
      color:var(--muted2);
      text-transform:uppercase;
      margin-bottom:10px;
    }

    .why-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }

    .why-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      font-size:14px;
      line-height:1.6;
      color:var(--text);
    }

    .bullet{
      width:7px;height:7px;flex:0 0 auto;
      border-radius:50%;
      margin-top:8px;
      background:var(--red);
      box-shadow:0 0 0 4px rgba(232,64,64,.08);
    }

    .how{
      margin:0 18px 18px;
      padding:16px 16px 14px;
      border-radius:7px;
      border:1px solid rgba(232,168,0,.12);
      background:rgba(232,168,0,.03);
    }

    .how-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
    }

    .step{
      border:1px solid rgba(255,255,255,.06);
      border-radius:6px;
      background:rgba(255,255,255,.02);
      padding:12px 12px 11px;
      min-height:80px;
    }

    .step-k{
      font-family:var(--font-mono);
      font-size:9px;
      letter-spacing:.20em;
      color:var(--amber);
      text-transform:uppercase;
      margin-bottom:8px;
    }

    .step-v{
      font-size:13px;
      line-height:1.5;
      color:var(--text);
    }

    .footer{
      padding:18px 20px 24px;
      border-top:1px solid var(--line2);
      font-family:var(--font-mono);
      font-size:9px;
      letter-spacing:.16em;
      color:var(--muted2);
      text-transform:uppercase;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .footer strong{color:var(--text);font-weight:700}

    .footer-badge{
      color:var(--amber);
      border:1px solid rgba(232,168,0,.18);
      background:rgba(232,168,0,.04);
      padding:6px 10px;
      border-radius:999px;
      white-space:nowrap;
    }

    .spark{
      position:absolute;
      inset:auto 0 0 auto;
      width:220px;
      height:220px;
      opacity:.08;
      pointer-events:none;
      transform:translate(28px, 24px);
    }

    .glow-line{
      position:absolute;
      left:0;right:0;top:0;height:1px;
      background:linear-gradient(90deg, transparent, rgba(232,168,0,.35), transparent);
      opacity:.7;
    }

    @media (max-width: 1024px){
      .page{grid-template-columns:1fr;padding:24px 28px;}
      .left{padding:28px 24px;}
      .right{min-height:0}
      .preview-body{grid-template-columns:78px 1fr;}
      .how-grid{grid-template-columns:1fr;}
    }

    @media (max-width: 720px){
      html,body,.shell{width:100%;max-width:100%;overflow-x:hidden}
      .topbar{height:56px;min-height:56px;padding:0 14px;align-items:center;flex-direction:row;gap:10px}
      .brand{min-width:0}
      .brand-text{font-size:17px}
      .status{display:none}
      .page{width:100%;max-width:390px;margin:0 auto;padding:10px 12px calc(18px + env(safe-area-inset-bottom));gap:10px}
      .left,.right{min-width:0;max-width:100%}
      .left{padding:18px 14px;min-height:auto}
      .right{align-self:stretch;min-height:0;max-height:none}
      .eyebrow{font-size:9px;margin-bottom:12px;letter-spacing:.18em}
      h1{font-size:clamp(34px, 10.5vw, 44px);line-height:.96}
      .headline-accent{margin-top:4px;white-space:normal;overflow-wrap:anywhere}
      .lead{font-size:14px;line-height:1.55;margin-top:14px;max-width:100%;overflow-wrap:break-word}
      .micro{font-size:9px;line-height:1.45;margin-top:14px;max-width:100%;overflow-wrap:break-word}
      .actions{margin-top:18px}
      .actions{width:100%}
      .cta,.ghost{width:100%;min-width:0;height:48px;font-size:10px;letter-spacing:.12em}
      .cta-note{max-width:none;width:100%;font-size:9px;line-height:1.5;text-align:center}
      .triptych{grid-template-columns:1fr;max-width:none;margin-top:16px;gap:8px}
      .triptych .stat:last-child{grid-column:auto}
      .stat{min-height:auto;padding:12px 9px}
      .stat-k{font-size:8px;line-height:1.35;letter-spacing:.12em;margin-bottom:8px}
      .stat-v{font-size:20px}
      .preview-top{padding:12px 12px 0;align-items:flex-start;gap:8px;flex-direction:column}
      .preview-label{font-size:9px;letter-spacing:.14em;line-height:1.4}
      .preview-pill{font-size:9px;padding:6px 8px;letter-spacing:.10em;white-space:normal}
      .preview-card{margin:12px}
      .preview-card-head{padding:10px 12px}
      .preview-time,.preview-sub{display:none}
      .preview-body{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px}
      .score-box{min-height:104px;min-width:72px}
      .score-value{font-size:42px}
      .score-slash{font-size:10px}
      .token-name{font-size:30px}
      .token-meta{font-size:9px;margin-top:5px}
      .tagline{margin-top:10px;font-size:8px;line-height:1.35;padding:6px 8px;border-radius:7px}
      .why{margin-top:12px;padding-top:10px}
      .why-label,.how-label{font-size:9px;margin-bottom:8px;letter-spacing:.16em}
      .why-list{gap:7px}
      .why-list li{font-size:12px;line-height:1.45}
      .how{margin:0 12px 12px;padding:12px}
      .how-grid{gap:8px}
      .step{min-height:auto;padding:10px}
      .step-v{font-size:12px;line-height:1.4}
      .footer{padding:16px 14px 22px;font-size:8px}
    }

    @media (max-width: 420px){
      .page{width:100%;max-width:390px;margin:0;padding:8px 10px 16px}
      .left,.right{width:100%;overflow:hidden}
      .left{padding:16px 12px}
      .brand-text{font-size:16px;letter-spacing:.12em}
      h1{font-size:31px}
      .lead{font-size:13.5px}
      .preview-body{grid-template-columns:64px minmax(0,1fr);gap:10px}
      .score-box{min-width:64px;min-height:96px}
      .score-value{font-size:38px}
      .token-name{font-size:28px}
      .footer-badge{white-space:normal}
    }

/* Web V2.1 public landing */
.landing-main{
  width:min(1180px, 100%);
  margin:0 auto;
  padding:32px 20px 42px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:34px;
}

.landing-main .page{
  width:100%;
  margin:0;
  padding:0;
}

.hero-block{
  min-height:calc(100vh - 170px);
  min-height:calc(100dvh - 170px);
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line2);
  position:relative;
}

.hero-block::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(232,168,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,168,0,.025) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
}

.hero-copy{
  width:min(880px, 100%);
  position:relative;
  z-index:1;
  padding:44px 0 58px;
}

.secondary-cta{
  min-height:56px;
  border:1px solid rgba(232,168,0,.22);
  border-radius:6px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  background:rgba(232,168,0,.035);
}

.info-band,
.example-band,
.use-band,
.access-band{
  padding:8px 0 2px;
}

.section-head{
  display:grid;
  grid-template-columns:minmax(210px, .44fr) minmax(0, 1fr);
  gap:24px;
  align-items:end;
  margin-bottom:16px;
}

.section-kicker{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.20em;
  color:var(--amber);
  text-transform:uppercase;
}

.section-head h2,
.access-band h2{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(26px, 3vw, 40px);
  line-height:1.05;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.surface-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.surface-card{
  min-height:150px;
  border:1px solid var(--line2);
  border-left-color:rgba(232,168,0,.28);
  border-radius:7px;
  background:rgba(255,255,255,.018);
  padding:18px;
}

.surface-key{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--amber);
  text-transform:uppercase;
  margin-bottom:12px;
}

.surface-card p,
.access-band p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}

.example-panel{
  display:grid;
  grid-template-columns:150px minmax(0, 1fr);
  gap:22px;
  align-items:stretch;
  border:1px solid rgba(232,168,0,.16);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(24,21,18,.82), rgba(15,14,13,.9));
  padding:20px;
}

.example-score{
  border:1px solid rgba(224,114,32,.22);
  background:rgba(224,114,32,.07);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:190px;
}

.example-score span{
  font-family:var(--font-head);
  font-size:64px;
  line-height:.95;
  color:#E07220;
}

.example-score small{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted2);
}

.example-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.example-token{
  font-family:var(--font-head);
  font-size:28px;
  letter-spacing:.06em;
  color:var(--text);
  text-transform:uppercase;
}

.example-signal{
  width:max-content;
  max-width:100%;
  margin:10px 0 14px;
  border:1px solid rgba(224,114,32,.25);
  border-radius:6px;
  background:rgba(224,114,32,.07);
  color:#E07220;
  padding:8px 11px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.example-note{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line2);
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
}

.access-band{
  border-top:1px solid var(--line2);
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:24px;
  align-items:center;
  padding-top:24px;
}

.access-cta{
  min-width:220px;
}

@media (max-width: 980px){
  .hero-block{min-height:auto}
  .surface-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .section-head{grid-template-columns:1fr;gap:8px}
}

@media (max-width: 720px){
  .landing-main{
    width:100%;
    max-width:430px;
    padding:14px 12px 24px;
    gap:26px;
  }

  .hero-copy{
    padding:22px 0 30px;
  }

  .hero-block::before{
    background-size:32px 32px;
  }

  .secondary-cta{
    width:100%;
    min-height:48px;
    font-size:10px;
  }

  .surface-grid,
  .example-panel,
  .access-band{
    grid-template-columns:1fr;
  }

  .surface-card{
    min-height:auto;
    padding:15px;
  }

  .example-panel{
    gap:14px;
    padding:14px;
  }

  .example-score{
    min-height:116px;
  }

  .example-score span{
    font-size:46px;
  }

  .example-token{
    font-size:22px;
    line-height:1.15;
  }

  .access-cta{
    width:100%;
  }
}