/* ============================================================
   landing.css — the front of house
   ============================================================ */

body.landing{
  overflow-x:hidden; overflow-y:auto;
  background:#03070a;
}

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

/* ============================================================
   TOP BAR + TICKER
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:12px;
  height:46px; padding:0 22px;
  background:rgba(3,7,10,.82);
  border-bottom:1px solid var(--line-2);
  backdrop-filter:blur(6px);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.topbar .brand{ font-family:var(--f-disp); font-size:18px; letter-spacing:.2em; color:var(--hot); }
.topbar .spacer{ flex:1 }
.topbar a{ color:var(--dim); text-decoration:none; font-size:11px }
.topbar a:hover{ color:var(--green) }
.topbar .sep{ width:1px; height:14px; background:var(--line-2) }

.ticker{
  position:fixed; top:46px; left:0; right:0; z-index:99;
  height:28px; overflow:hidden;
  background:rgba(6,16,20,.7); border-bottom:1px solid var(--line);
  font-size:10px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase;
}
.ticker-run{
  display:inline-block; white-space:nowrap; padding-left:100%;
  animation:tick 46s linear infinite;
}
.ticker-run span{ padding:0 30px; line-height:28px }
.ticker-run b{ color:var(--green); font-weight:400 }
@keyframes tick{ to{ transform:translateX(-100%) } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:150px 0 190px;
  overflow:hidden;
}
#bg{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0;
}
.hero-inner{ position:relative; z-index:2 }

.hero-eyebrow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.3em; color:var(--dim);
  text-transform:uppercase; margin-bottom:26px;
}
.hero-eyebrow .line{ flex:1; height:1px; background:linear-gradient(to right,var(--line-2),transparent); min-width:30px }

.wordmark{
  font-family:var(--f-disp);
  font-size:clamp(74px, 14.5vw, 250px);
  line-height:.82; letter-spacing:.01em;
  color:var(--hot);
  margin:0;
  text-shadow:
     2px 0 0 rgba(255,0,72,.42),
    -2px 0 0 rgba(0,222,255,.42),
     0 0 40px rgba(57,255,136,.18);
}
.wordmark .fifty{
  -webkit-text-stroke:1px var(--green);
  color:transparent;
  background:repeating-linear-gradient(-45deg,
    rgba(57,255,136,.55) 0 2px, transparent 2px 6px);
  -webkit-background-clip:text; background-clip:text;
}
.ticker-sym{
  display:inline-block; vertical-align:super;
  font-size:.20em; letter-spacing:.14em; color:var(--green);
  border:1px solid var(--green); padding:2px 8px; margin-left:14px;
  box-shadow:0 0 14px rgba(57,255,136,.25);
  text-shadow:none;
}

.hero-title{
  font-size:clamp(19px, 2.8vw, 36px);
  font-family:var(--f-disp); letter-spacing:.22em;
  color:var(--fg); margin:26px 0 10px; text-transform:uppercase;
}
.hero-lede{
  max-width:730px; font-size:17px; line-height:1.8; color:var(--mid);
  letter-spacing:.01em; margin:0 0 36px;
}
.hero-lede b{ color:var(--hot); font-weight:400 }

.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.cta-main{
  display:inline-flex; flex-direction:column; gap:2px;
  padding:16px 34px; text-decoration:none;
  border:1px solid var(--green); background:rgba(57,255,136,.08);
  box-shadow:0 0 26px rgba(57,255,136,.14) inset, 0 0 18px rgba(57,255,136,.1);
  transition:background .15s, box-shadow .15s, transform .1s;
}
.cta-main:hover{ background:rgba(57,255,136,.17); box-shadow:0 0 40px rgba(57,255,136,.25) inset, 0 0 26px rgba(57,255,136,.2) }
.cta-main:active{ transform:translateY(1px) }
.cta-main .l{ font-family:var(--f-disp); font-size:21px; letter-spacing:.2em; color:var(--green) }
.cta-main .s{ font-size:11px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase }

.cta-ghost{
  display:inline-flex; flex-direction:column; gap:2px;
  padding:16px 28px; text-decoration:none;
  border:1px solid var(--line-2); color:var(--mid);
}
.cta-ghost:hover{ border-color:var(--line-3); color:var(--fg) }
.cta-ghost .l{ font-family:var(--f-disp); font-size:21px; letter-spacing:.2em }
.cta-ghost .s{ font-size:11px; letter-spacing:.14em; color:var(--line-3); text-transform:uppercase }

/* boot log sits in its own band at the foot of the hero, clear of the CTA */
.hero-foot{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:26px; z-index:2;
  width:min(1240px, calc(100% - 32px));
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  pointer-events:none;
}
.bootlog{
  font-size:11px; line-height:1.8; color:var(--dim);
  letter-spacing:.04em; min-height:84px; max-width:600px;
}
.bootlog b{ color:var(--green); font-weight:400 }
.hero-scroll{
  font-size:10px; letter-spacing:.3em; color:var(--line-3); text-transform:uppercase;
  white-space:nowrap;
}

/* ============================================================
   IDENTITY BLOCK — the classified placard
   ============================================================ */
.placard{
  display:grid;
  grid-template-columns:auto 1fr;
  border:1px solid var(--green);
  margin:0 0 6px;
  background:rgba(6,20,17,.55);
}
.placard-mark{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px; background:var(--green); color:#04140c;
}
.placard-mark .sig{
  font-family:var(--f-disp); font-size:34px; line-height:1;
  border:2px solid #04140c; padding:3px 10px;
}
.placard-mark .nm{ font-family:var(--f-disp); font-size:22px; letter-spacing:.06em;
  background:repeating-linear-gradient(to bottom, #04140c 0 2px, transparent 2px 4px);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:0; }
.placard-mark .nm2{ font-family:var(--f-disp); font-size:29px; letter-spacing:.06em; color:#04140c }
.placard-body{ display:flex; align-items:center; padding:14px 22px; gap:30px; flex-wrap:wrap }
.placard-body .tag{
  border:1px solid var(--green); color:var(--green);
  padding:5px 13px; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
}
.placard-body .claim{ font-family:var(--f-disp); font-size:25px; color:var(--green); letter-spacing:.04em; line-height:1.15 }
.placard-body .spacer{ flex:1 }
.placard-grid{
  display:grid; grid-template-columns:repeat(2, auto); gap:2px 26px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--green);
}
.placard-grid span:nth-child(odd){ opacity:.6 }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding:110px 0; position:relative }
.sec-hd{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-bottom:26px;
}
.sec-idx{
  font-family:var(--f-disp); font-size:14px; letter-spacing:.2em;
  color:var(--green); border:1px solid var(--line-3); padding:3px 11px;
}
.sec-t{
  font-family:var(--f-disp); font-size:clamp(30px,4.2vw,56px);
  letter-spacing:.1em; color:var(--hot); margin:0; text-transform:uppercase;
}
.sec-s{ font-size:12px; letter-spacing:.18em; color:var(--dim); text-transform:uppercase }
.sec-hd .line{ flex:1; height:1px; background:linear-gradient(to right,var(--line-2),transparent); min-width:40px }

.sec-lede{ max-width:760px; font-size:17px; line-height:1.8; color:var(--mid); margin:0 0 40px }
.sec-lede b{ color:var(--fg); font-weight:400 }

/* ---------- capability cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(258px,1fr)); gap:6px }
.card{
  position:relative;
  border:1px solid var(--line-2); background:rgba(6,16,20,.6);
  padding:26px 24px 24px;
  transition:border-color .18s, background .18s, transform .18s;
}
.card:hover{ border-color:var(--line-3); background:rgba(10,28,32,.75); transform:translateY(-2px) }
.card-n{ font-size:10px; letter-spacing:.24em; color:var(--line-3); margin-bottom:16px }
.card-t{ font-family:var(--f-disp); font-size:22px; letter-spacing:.1em; color:var(--fg); margin-bottom:12px; text-transform:uppercase }
.card-d{ font-size:14px; line-height:1.8; color:var(--mid) }
.card-d code{ color:var(--green); font-size:13px }
.card-glyph{
  position:absolute; top:12px; right:14px;
  width:44px; height:44px; opacity:.55;
}

/* ---------- measurement lattice ---------- */
.lattice{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:6px;
}
.lat{
  border:1px solid var(--line-2); padding:14px 16px;
  background:rgba(6,16,20,.5);
  display:flex; flex-direction:column; gap:3px;
  border-left:2px solid var(--gc);
}
.lat:hover{ background:rgba(10,30,32,.8) }
.lat-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px }
.lat-c{ font-family:var(--f-disp); font-size:19px; color:var(--gc); letter-spacing:.06em }
.lat-i{ font-size:10px; color:var(--line-3) }
.lat-n{ font-size:12px; color:var(--mid); line-height:1.55 }
.lat-w{ display:flex; gap:3px; margin-top:3px }
.lat-w i{
  font-style:normal; font-size:9px; letter-spacing:.14em;
  border:1px solid var(--line-2); color:var(--dim); padding:0 4px;
}
.lat.proxy .lat-c::after{ content:' *'; color:var(--amber) }

.lat-legend{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:22px; font-size:11px; letter-spacing:.14em; text-transform:uppercase }
.lat-legend span{ display:flex; align-items:center; gap:6px; color:var(--dim) }
.lat-legend i{ width:10px; height:10px; display:inline-block; background:var(--gc) }

/* ---------- pipeline ---------- */
.pipe{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  border:1px solid var(--line-2); background:rgba(6,16,20,.5);
}
.pipe-step{
  flex:1 1 170px; padding:22px 18px;
  border-right:1px solid var(--line-2);
  position:relative;
}
.pipe-step:last-child{ border-right:0 }
.pipe-n{ font-size:10px; letter-spacing:.2em; color:var(--line-3) }
.pipe-t{ font-family:var(--f-disp); font-size:19px; color:var(--green); letter-spacing:.08em; margin:8px 0 7px }
.pipe-d{ font-size:12px; line-height:1.65; color:var(--mid) }
.pipe-step::after{
  content:'>'; position:absolute; right:-5px; top:50%; transform:translateY(-50%);
  color:var(--line-3); font-size:10px; background:#04090c; padding:2px 0;
}
.pipe-step:last-child::after{ content:'' }

/* ---------- coverage table ---------- */
.cov-tbl{ width:100%; border-collapse:collapse; font-size:13px }
.cov-tbl th{
  text-align:left; font-weight:400; padding:12px 16px;
  font-size:10px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase;
  border-bottom:1px solid var(--line-2);
}
.cov-tbl td{ padding:14px 16px; border-bottom:1px solid var(--line); color:var(--mid) }
.cov-tbl tr:hover td{ background:rgba(10,30,32,.55) }
.cov-tbl .chip{
  display:inline-block; padding:2px 10px; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; border:1px solid;
}
.chip.active{ color:var(--green); border-color:var(--green) }
.chip.queued{ color:var(--line-3); border-color:var(--line-2) }

/* ---------- redacted / limitations ---------- */
.redact{
  border:1px solid var(--red-dim);
  background:
    repeating-linear-gradient(-45deg, rgba(255,43,61,.03) 0 8px, transparent 8px 16px),
    rgba(12,4,6,.55);
  padding:30px 32px;
}
.redact-hd{
  display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.26em; color:var(--red); text-transform:uppercase;
}
.redact ul{ margin:0; padding:0; list-style:none }
.redact li{
  font-size:15px; line-height:1.8; color:var(--mid);
  padding-left:24px; position:relative; margin-bottom:13px;
}
.redact li::before{
  content:'//'; position:absolute; left:0; color:var(--red-dim); font-size:11px; top:3px;
}
.redact li b{ color:var(--fg); font-weight:400 }
.bar-redacted{
  display:inline-block; background:var(--red-dim); color:transparent;
  user-select:none; border-radius:1px; padding:0 4px;
}

/* ---------- closing ---------- */
.closing{
  text-align:center; padding:130px 0 110px;
  border-top:1px solid var(--line-2);
}
.closing .q{
  font-family:var(--f-disp);
  font-size:clamp(24px,3.6vw,48px); letter-spacing:.08em; color:var(--hot);
  max-width:960px; margin:0 auto 18px; line-height:1.4;
}
.closing .sub{ font-size:12px; letter-spacing:.2em; color:var(--dim); margin-bottom:42px; text-transform:uppercase }

.foot{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  padding:22px 0 40px; font-size:10px; letter-spacing:.18em;
  color:var(--line-3); text-transform:uppercase;
}
.foot .spacer{ flex:1 }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .placard{ grid-template-columns:1fr }
  .placard-body{ gap:14px }
  .bootlog{ display:none }
  .hero{ padding-top:96px }
  .pipe-step{ border-right:0; border-bottom:1px solid var(--line-2) }
  .pipe-step::after{ content:'' }
}


/* ============================================================
   HERO SCRIM — the particle field is the backdrop, the copy has
   to stay readable over it. Dark on the left where the text is,
   clear on the right where the structure lives.
   ============================================================ */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(3,7,10,.97) 0%, rgba(3,7,10,.93) 38%,
                              rgba(3,7,10,.62) 56%, rgba(3,7,10,.10) 78%,
                              rgba(3,7,10,0) 100%),
    linear-gradient(to bottom, rgba(3,7,10,.9) 0%, rgba(3,7,10,0) 26%,
                               rgba(3,7,10,0) 74%, rgba(3,7,10,.9) 100%);
}
@media (max-width:900px){
  .hero::before{
    background:linear-gradient(to bottom, rgba(3,7,10,.82) 0%, rgba(3,7,10,.62) 50%, rgba(3,7,10,.9) 100%);
  }
}

/* ============================================================
   HERO PROBE — contract address entry on the landing itself
   ============================================================ */
.hero-probe{ margin:0 0 30px; max-width:760px; }
.probe-k{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--dim); margin-bottom:8px;
}
.probe-row{
  display:flex; align-items:stretch; gap:0;
  border:1px solid var(--line-3);
  background:rgba(4,12,15,.88);
  box-shadow:0 0 30px rgba(57,255,136,.07) inset;
  transition:border-color .15s, box-shadow .15s;
}
.probe-row:focus-within{
  border-color:var(--green);
  box-shadow:0 0 34px rgba(57,255,136,.16) inset, 0 0 22px rgba(57,255,136,.12);
}
.probe-chain{
  appearance:none; cursor:pointer;
  font-family:var(--f-data); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg);
  background:rgba(13,37,41,.75); border:0; border-right:1px solid var(--line-3);
  padding:0 14px; outline:none;
}
.probe-chain option{ background:#040d10; color:var(--fg); }
.probe-ca{
  flex:1; min-width:0;
  font-family:var(--f-data); font-size:14px; letter-spacing:.02em;
  color:var(--hot); background:transparent; border:0; outline:none;
  padding:16px 16px;
}
.probe-ca::placeholder{ color:#1e4f4d; letter-spacing:.06em; font-size:12px; }
.probe-go{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--f-disp); font-size:15px; letter-spacing:.2em;
  color:#04140c; background:var(--green); border:0;
  padding:0 24px; white-space:nowrap;
  transition:filter .15s, box-shadow .15s;
}
.probe-go:hover{ filter:brightness(1.14); box-shadow:0 0 26px rgba(57,255,136,.4); }
.probe-go:active{ transform:translateY(1px); }
.probe-msg{
  font-size:11px; letter-spacing:.06em; margin-top:9px; min-height:17px;
}
.probe-msg.err{ color:var(--red); }
.probe-msg.ok{ color:var(--green); }

@media (max-width:720px){
  .probe-row{ flex-wrap:wrap }
  .probe-chain{ flex:1 1 100%; border-right:0; border-bottom:1px solid var(--line-3); padding:11px 14px }
  .probe-ca{ flex:1 1 60%; padding:13px 14px }
  .probe-go{ flex:1 1 100%; justify-content:center; padding:13px 0 }
}

/* ============================================================
   X BUTTON
   ============================================================ */
.x-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px; text-decoration:none;
  color:var(--mid); border:1px solid var(--line-2);
  transition:color .15s, border-color .15s, background .15s;
}
.x-btn:hover{ color:var(--hot); border-color:var(--green); background:rgba(57,255,136,.1); }
.x-btn svg{ display:block }
.foot-x{ font-size:10px; letter-spacing:.18em; text-transform:uppercase }

/* ============================================================
   CA CHIP — token contract address, click to copy
   ============================================================ */
.ca-chip{
  display:inline-flex; align-items:center; gap:0;
  margin:22px 0 0; padding:0;
  font-family:var(--f-data); cursor:pointer;
  background:rgba(4,12,15,.9);
  border:1px solid var(--line-3);
  color:var(--fg);
  transition:border-color .15s, box-shadow .15s, background .15s;
  max-width:100%;
}
.ca-chip:hover{
  border-color:var(--green);
  background:rgba(57,255,136,.07);
  box-shadow:0 0 22px rgba(57,255,136,.14);
}
.ca-chip:active{ transform:translateY(1px) }
.ca-lbl{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:#04140c; background:var(--green);
  padding:9px 12px; align-self:stretch; display:flex; align-items:center;
}
.ca-val{
  font-size:13px; letter-spacing:.04em; color:var(--hot);
  padding:9px 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.ca-ico{
  display:flex; align-items:center; padding:9px 12px;
  border-left:1px solid var(--line-2); color:var(--dim);
  align-self:stretch;
}
.ca-chip:hover .ca-ico{ color:var(--green) }

.ca-chip.copied{ border-color:var(--green); background:rgba(57,255,136,.14) }
.ca-chip.copied .ca-val{ color:var(--green) }

/* pre-launch state: nothing to copy, and it says so */
.ca-chip.pending{ cursor:default; border-style:dashed; opacity:.75 }
.ca-chip.pending:hover{ border-color:var(--line-3); background:rgba(4,12,15,.9); box-shadow:none }
.ca-chip.pending .ca-lbl{ background:var(--line-3); color:var(--bg) }
.ca-chip.pending .ca-val{ color:var(--dim); letter-spacing:.2em; font-size:11px; text-transform:uppercase }
.ca-chip.pending .ca-ico{ display:none }

@media (max-width:560px){
  .ca-val{ font-size:11px; padding:9px 10px }
}