/* DegenKit shared design system — tokens, header, footer, buttons, badges. */

:root{
  --void:#0B0B0E;
  --panel:#151319;
  --panel-2:#1C1A21;
  --line:#2A2732;
  --cream:#FBF3E7;
  --muted:#95907F;
  --orange:#FF7A1A;
  --orange-bright:#FFA149;
  --orange-deep:#B8480A;
  --pink:#FF8FA8;
  --mint:#1CE39B;
  --radius:18px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--void); color:var(--cream);
  font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
section{position:relative;}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,56px);}

::selection{background:var(--orange); color:#160C04;}
:focus-visible{outline:2px solid var(--orange-bright); outline-offset:3px;}

/* ---------- background texture: faint starfield dots ---------- */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:60px 60px, 34px 34px;
  background-position:0 0, 17px 23px;
  opacity:0.5;
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,14,0.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,4vw,56px);
}
.logo{display:flex; align-items:center; gap:10px;}
.logo-icon{height:34px; width:34px; border-radius:9px;}
.logo-text{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.01em; color:var(--cream);}
nav.site-nav{display:flex; align-items:center; gap:30px;}
nav.site-nav a.navlink{
  font-size:14px; color:var(--muted); font-weight:500; transition:color .15s;
}
nav.site-nav a.navlink:hover{color:var(--cream);}
.header-actions{display:flex; align-items:center; gap:14px;}
.social-icn{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:.15s;
}
.social-icn:hover{border-color:var(--orange); color:var(--orange-bright);}
.btn-launch{
  background:linear-gradient(180deg, var(--orange-bright), var(--orange));
  color:#160C04; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:14px; padding:11px 22px; border-radius:100px; border:none; cursor:pointer;
  box-shadow:0 4px 0 var(--orange-deep); transition:transform .08s, box-shadow .08s;
  display:inline-block;
}
.btn-launch:active{transform:translateY(3px); box-shadow:0 1px 0 var(--orange-deep);}
.btn-launch:disabled, .btn-launch.disabled{
  opacity:0.4; cursor:not-allowed; box-shadow:none; filter:grayscale(0.4);
}
.btn-ghost{
  border:1px solid var(--line); color:var(--cream); font-size:14px; font-weight:500;
  padding:10px 20px; border-radius:100px;
}
@media (max-width:820px){ nav.site-nav{display:none;} }

/* ---------- shared badge / eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em;
  color:var(--orange-bright); text-transform:uppercase; margin-bottom:22px;
  border:1px solid rgba(255,122,26,0.35); border-radius:100px; padding:6px 14px;
  background:rgba(255,122,26,0.06);
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--orange-bright); animation:blink 1.6s infinite;}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:0.25;}}

.section-head{max-width:620px; margin:0 auto 48px; text-align:center;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(26px,3.4vw,38px);
  margin:0 0 14px; letter-spacing:-0.01em;
}
.section-head p{color:var(--muted); font-size:15.5px; line-height:1.6; margin:0;}

/* ---------- porthole (signature element) ---------- */
.porthole{
  position:relative; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #201C24, #131117 70%);
  border:2px solid var(--line);
  box-shadow:
    0 0 0 10px rgba(255,122,26,0.05),
    0 0 0 11px var(--line),
    inset 0 0 60px rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
}
.rivet{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--line);
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:52px 0 40px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; margin-bottom:36px;}
.footer-brand{display:flex; flex-direction:column;}
.footer-brand .logo{margin-bottom:14px;}
.footer-brand p{color:var(--muted); font-size:13.5px; max-width:280px; line-height:1.6;}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h4{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px;
}
.footer-col a{display:block; font-size:14px; color:var(--cream); margin-bottom:10px; opacity:0.85;}
.footer-col a:hover{opacity:1; color:var(--orange-bright);}
.footer-bottom{
  border-top:1px solid var(--line); padding-top:22px; display:flex;
  justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.footer-bottom p{color:var(--muted); font-size:12.5px; margin:0;}
.footer-socials{display:flex; gap:10px;}

/* ---------- generic warn / info box ---------- */
.warn-box{
  background:rgba(224,87,76,0.08); border:1px solid rgba(224,87,76,0.35); color:#f0a89f;
  border-radius:8px; padding:12px 14px; font-size:12.5px; line-height:1.5; margin-bottom:20px;
}

/* ---------- chain selector dropdown (used on tool pages) ---------- */
.chain-select-wrap{position:relative; display:inline-block;}
.chain-select-btn{
  display:flex; align-items:center; gap:9px; padding:9px 14px;
  background:linear-gradient(180deg, var(--panel-2), var(--void));
  border:1px solid rgba(255,122,26,0.3); border-radius:100px;
  color:var(--cream); cursor:pointer; font-size:13.5px; font-family:'Space Grotesk',sans-serif; font-weight:600;
  transition:border-color .15s, background .15s;
}
.chain-select-btn:hover{border-color:var(--orange); background:linear-gradient(180deg, var(--panel-2), rgba(255,122,26,0.08));}
.chain-select-btn img{width:20px; height:20px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px var(--void), 0 0 0 3px rgba(255,122,26,0.3);}
.chain-select-btn .chain-caret{color:var(--muted); font-size:11px;}
.chain-select-menu{
  display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:220px; z-index:30;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:6px;
  box-shadow:0 14px 34px rgba(0,0,0,0.45);
}
.chain-select-menu.open{display:block;}
.chain-option{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  color:var(--cream); font-size:13.5px;
}
.chain-option:hover{background:var(--panel);}
.chain-option img{width:20px; height:20px; border-radius:50%; flex-shrink:0;}
.chain-option .chain-tag{
  margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; padding:2px 7px; border-radius:100px;
}
.chain-option .chain-tag.live{color:var(--mint); border:1px solid rgba(28,227,155,0.4);}
.chain-option .chain-tag.soon{color:var(--muted); border:1px solid var(--line);}