:root{
  --void:#050607;
  --void-2:#080b0c;
  --panel:#0b0f10;
  --line:#1e2928;
  --text:#f1f3f3;
  --muted:#8f9a99;
  --signal:#00ffb8;
  --signal-2:#72ffd7;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.01em;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background:
    radial-gradient(circle at 70% 10%,rgba(0,255,184,.08),transparent 28%),
    radial-gradient(circle at 18% 55%,rgba(255,255,255,.035),transparent 25%),
    linear-gradient(#050607,#030404);
}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:9;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
.nav-shell{
  position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  max-width:var(--max);margin:auto;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(5,6,7,.8);backdrop-filter:blur(18px)
}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.22em}
.brand img{width:34px;height:34px}
nav{display:flex;gap:26px;color:#aeb7b6;font-size:13px}
nav a:hover{color:var(--signal)}
.ghost-btn{justify-self:end;padding:11px 16px;border:1px solid #2b6a59;color:var(--signal);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
main{max-width:var(--max);margin:auto}
.section-grid,.panel-section{margin:0 24px}
.hero{min-height:760px;padding:100px 8px 38px;position:relative;overflow:hidden;border-left:1px solid rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.05)}
.eyebrow,.section-number{font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:var(--signal)}
.hero-copy{position:relative;z-index:4;max-width:720px;margin-top:74px}
h1{font-size:clamp(56px,8.4vw,112px);line-height:.88;margin:0;letter-spacing:-.055em;font-weight:650}
h1 span{color:var(--signal)}
.hero-copy p{max-width:590px;color:#b2bbba;font-size:19px;line-height:1.65;margin:30px 0}
.hero-actions{display:flex;align-items:center;gap:28px}
.primary-btn{background:var(--signal);color:#03110c;padding:15px 21px;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.12em}
.text-link{font-size:13px;color:#c8cecd}
.gate-wrap{position:absolute;right:-10px;top:120px;width:540px;height:530px;opacity:.75;filter:drop-shadow(0 0 30px rgba(0,255,184,.08))}
.gate{position:absolute;top:95px;width:190px;height:330px;background:linear-gradient(90deg,#111819,#364441 65%,#a5bbb5);border:1px solid #4e5e5a}
.gate.left{left:30px;clip-path:polygon(0 7%,100% 0,80% 100%,0 94%)}
.gate.right{right:30px;clip-path:polygon(0 0,100% 7%,100% 94%,20% 100%)}
.gate-core{position:absolute;left:50%;top:112px;width:7px;height:285px;transform:translateX(-50%);background:var(--signal);box-shadow:0 0 24px var(--signal),0 0 90px rgba(0,255,184,.6)}
.horizon{position:absolute;left:0;right:0;bottom:50px;height:1px;background:linear-gradient(90deg,transparent,#74ffdc,transparent);box-shadow:0 0 28px rgba(0,255,184,.45)}
.hero-meta{position:absolute;bottom:38px;left:8px;right:8px;display:grid;grid-template-columns:repeat(4,1fr);z-index:4;border-top:1px solid #1c2926;padding-top:18px}
.hero-meta div{display:flex;flex-direction:column;gap:5px}
.hero-meta b{font-size:12px;color:var(--signal)}
.hero-meta span{font-size:11px;color:#697271;text-transform:uppercase;letter-spacing:.1em}

.panel-section{padding:96px 8px;border-top:1px solid rgba(255,255,255,.09)}
.two-col,.entity-grid,.token-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;margin-top:36px}
h2{font-size:clamp(38px,5vw,68px);letter-spacing:-.035em;line-height:1.02;margin:0}
.lead{font-size:20px;line-height:1.7;color:#aeb7b6}
.principles{display:grid;grid-template-columns:1fr 1fr;border:1px solid #17201f}
.principles div{display:grid;grid-template-columns:48px 1fr;gap:4px;padding:21px;border-right:1px solid #17201f;border-bottom:1px solid #17201f}
.principles span{grid-row:1/3;color:var(--signal);font:12px ui-monospace,monospace}
.principles b{font-size:13px;letter-spacing:.08em}
.principles small{color:#74807d}
.entity-portrait{min-height:510px;position:relative;background:radial-gradient(circle at 50% 42%,rgba(0,255,184,.13),transparent 28%),linear-gradient(160deg,#0c1213,#050607);border:1px solid #17201f;overflow:hidden}
.orb{position:absolute;width:310px;height:310px;border:1px solid #30433f;border-radius:50%;left:50%;top:48%;transform:translate(-50%,-50%);box-shadow:inset 0 0 70px rgba(0,255,184,.05)}
.orb:before,.orb:after{content:"";position:absolute;border:1px solid #1a2926;border-radius:50%;inset:24px}
.orb:after{inset:70px}
.orb-core{position:absolute;inset:132px;border-radius:50%;background:var(--signal);box-shadow:0 0 20px var(--signal),0 0 80px var(--signal)}
.entity-title{position:absolute;left:28px;bottom:28px}
.entity-title p{color:var(--signal);font:11px ui-monospace,monospace;letter-spacing:.2em}
.entity-title h2{font-size:54px}
.entity-title span{font:11px ui-monospace,monospace;color:#7f8988;letter-spacing:.12em}
.status-card{align-self:stretch;border:1px solid #17201f;padding:14px 24px;background:#070a0b}
.status-line{display:grid;grid-template-columns:160px 1fr;padding:18px 0;border-bottom:1px solid #17201f}
.status-line span{font:11px ui-monospace,monospace;color:#6e7a78;letter-spacing:.1em}
.status-line b{font-size:12px;letter-spacing:.08em}
.online{color:var(--signal)}
.note{font-size:13px;line-height:1.65;color:#788481;margin-top:26px}
.token-grid{align-items:center}
.token-symbol{display:flex;align-items:center;gap:30px;border:1px solid #17201f;padding:32px;background:linear-gradient(135deg,#090c0d,#050607)}
.token-symbol img{width:120px;height:120px}
.token-symbol p{font:11px ui-monospace,monospace;color:#697472;letter-spacing:.16em}
.token-symbol h2{font-size:72px}
.token-grid h3{font-size:31px;margin:0 0 18px}
.token-grid p{color:#a6afae;line-height:1.7}
.token-state{display:grid;grid-template-columns:130px 1fr;margin-top:30px;border-top:1px solid #18211f}
.token-state span,.token-state b{padding:13px 0;border-bottom:1px solid #18211f;font:11px ui-monospace,monospace;letter-spacing:.09em}
.token-state span{color:#6e7775}
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#17201f;margin-top:36px;border:1px solid #17201f}
.roadmap article{background:#07090a;padding:28px;min-height:220px}
.roadmap article span{color:#5d6a67;font:12px ui-monospace,monospace}
.roadmap h3{font-size:18px;letter-spacing:.06em;margin:28px 0 12px}
.roadmap p{color:#84908e;line-height:1.55;font-size:14px}
.roadmap article.active{box-shadow:inset 0 2px 0 var(--signal)}
.roadmap article.active h3,.roadmap article.active>b{color:var(--signal)}
.roadmap article>b{font:11px ui-monospace,monospace;letter-spacing:.1em}
.manifesto-copy{max-width:870px;margin:46px auto 0;font-size:25px;line-height:1.6;color:#c5cccb}
.manifesto-copy blockquote{margin:44px 0;padding:26px 0 26px 34px;border-left:2px solid var(--signal);font-size:31px;line-height:1.4;color:white}
.signal{color:var(--signal)}
.terminal{max-width:920px;margin:38px auto 0;border:1px solid #29423c;background:#020403;box-shadow:0 25px 80px rgba(0,0,0,.45)}
.terminal-top{height:48px;display:flex;align-items:center;gap:8px;padding:0 15px;border-bottom:1px solid #12211d;color:#63736f}
.terminal-top span{width:8px;height:8px;border-radius:50%;background:#1c2b27}
.terminal-top b{margin-left:10px;font:11px ui-monospace,monospace;letter-spacing:.12em}
pre{white-space:pre-wrap;min-height:315px;padding:25px;margin:0;color:#a7e9d5;font:14px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace}
.command-row{display:flex;gap:10px;border-top:1px solid #12211d;padding:14px 22px;color:var(--signal);font-family:ui-monospace,monospace}
.command-row input{flex:1;border:0;outline:0;background:transparent;color:#defdf4;font:14px ui-monospace,monospace}
.closing{text-align:center;padding:140px 24px}
.closing img{width:80px;height:80px}
.closing p{font:11px ui-monospace,monospace;letter-spacing:.18em;color:#6e7a77;margin-top:30px}
.closing h2{font-size:76px;letter-spacing:.18em;margin:12px 0}
.closing span{color:var(--signal);font-size:12px;letter-spacing:.16em}
footer{max-width:var(--max);margin:auto;padding:28px 24px 50px;border-top:1px solid #17201f;display:flex;justify-content:space-between;gap:30px;color:#596361;font:10px ui-monospace,monospace;letter-spacing:.08em}
footer p:last-child{max-width:660px;text-align:right}

@media(max-width:900px){
  .nav-shell{grid-template-columns:1fr auto}.nav-shell nav{display:none}
  .gate-wrap{opacity:.32;right:-180px}.hero{min-height:690px}
  .hero-meta{grid-template-columns:1fr 1fr;gap:15px}
  .two-col,.entity-grid,.token-grid{grid-template-columns:1fr;gap:34px}
  .roadmap{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .nav-shell{padding:14px 18px}.brand span{font-size:13px}.ghost-btn{display:none}
  .section-grid,.panel-section{margin:0 16px}.hero{padding-top:64px}
  h1{font-size:54px}.hero-copy{margin-top:56px}.hero-copy p{font-size:16px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:18px}
  .gate-wrap{top:210px;right:-260px}
  .hero-meta{position:relative;left:0;right:0;bottom:auto;margin-top:170px}
  .panel-section{padding:68px 6px}.principles{grid-template-columns:1fr}
  .status-line{grid-template-columns:1fr;gap:7px}.roadmap{grid-template-columns:1fr}
  .manifesto-copy{font-size:18px}.manifesto-copy blockquote{font-size:22px}
  .closing h2{font-size:40px}.closing{padding:100px 15px}
  footer{flex-direction:column}footer p:last-child{text-align:left}
}


/* =========================================================
   NOEN MAINNET MARKET ACTIONS
   ========================================================= */

.noen-market-panel {
  width: min(1120px, calc(100% - 32px));
  margin: 48px auto;
  padding: 28px;
  border: 1px solid rgba(0, 255, 184, 0.20);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(0, 255, 184, 0.06),
      rgba(156, 58, 255, 0.06)
    );
}

.noen-market-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.noen-market-logo {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
}

.noen-market-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .72;
}

.noen-market-brand h2 {
  margin: 0 0 6px;
}

.noen-market-brand p {
  margin: 0;
  opacity: .78;
}

.noen-market-data {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.noen-market-data > div {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background: rgba(0, 0, 0, .16);
}

.noen-market-data span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  letter-spacing: .12em;
  opacity: .58;
}

.noen-market-data strong {
  display: block;
}

.noen-contract {
  overflow-wrap: anywhere;
  font-family: monospace;
  font-size: 12px;
}

.noen-market-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.noen-market-btn {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.noen-market-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 255, 184, .55);
}

.noen-market-btn:disabled {
  opacity: .5;
  cursor: wait;
}

.noen-market-primary {
  background:
    linear-gradient(
      135deg,
      #00ffb8,
      #9c3aff
    );
  color: #050607;
  border-color: transparent;
}

.noen-wallet-status {
  margin-top: 16px;
  font-family: monospace;
  font-size: 12px;
  opacity: .78;
}

.noen-wallet-status[data-state="success"] {
  opacity: 1;
}

.noen-market-warning {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  opacity: .56;
}

@media (max-width: 720px) {

  .noen-market-panel {
    padding: 20px;
  }

  .noen-market-data {
    grid-template-columns: 1fr;
  }

  .noen-market-actions {
    flex-direction: column;
  }

  .noen-market-btn {
    width: 100%;
  }
}