/* ============================================================
   Ginkgo Protocol — Design System
   "Terminal for the agent economy"
   near-black / warm off-white / amber signal
   ============================================================ */

:root{
  --bg:        #08090B;
  --bg-2:      #0C0E11;
  --bg-3:      #101319;
  --panel:     #0E1116;
  --panel-2:   #12161D;
  --line:      rgba(237,232,220,.075);
  --line-2:    rgba(237,232,220,.14);
  --ink:       #EDE8DC;
  --ink-2:     #B4AFA2;
  --ink-3:     #7B776C;
  --ink-4:     #55524A;
  --amber:     #FFB224;
  --amber-2:   #FFCF6B;
  --amber-dim: rgba(255,178,36,.12);
  --green:     #3CE38F;
  --green-dim: rgba(60,227,143,.1);
  --red:       #FF6A5C;
  --red-dim:   rgba(255,106,92,.1);
  --blue:      #7BA7F9;

  --font-display:"Clash Display","Archivo",sans-serif;
  --font-body:  "General Sans","Archivo",sans-serif;
  --font-mono:  "JetBrains Mono","IBM Plex Mono",monospace;

  --shell: 1320px;
  --gutter: clamp(20px,4vw,56px);
  --nav-h: 60px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--amber);color:#0A0A08}

/* global atmosphere: faint grid + vignette */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(rgba(237,232,220,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(237,232,220,.022) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 30%,transparent 78%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background:radial-gradient(ellipse 120% 100% at 50% 50%,transparent 62%,rgba(0,0,0,.42));
  mix-blend-mode:multiply;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#23262D;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#33373F}

/* ---------- type ---------- */
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.08}
.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--amber)}
.lede{color:var(--ink-2);font-size:clamp(16px,1.6vw,19px);line-height:1.65;max-width:56ch}

/* ---------- layout ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
.section{padding:clamp(72px,9vw,132px) 0;position:relative}
.hairline-t{border-top:1px solid var(--line)}
.hairline-b{border-bottom:1px solid var(--line)}

/* section head: index / rule / meta */
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(34px,4.5vw,60px);flex-wrap:wrap}
.sec-idx{font-family:var(--font-mono);font-size:12px;color:var(--amber);letter-spacing:.14em}
.sec-rule{flex:1;height:1px;background:var(--line-2);align-self:center;min-width:60px}
.sec-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase}
.sec-title{font-size:clamp(30px,4.2vw,52px);margin-top:14px}
.sec-title em{font-style:normal;color:var(--amber)}
.sec-sub{margin-top:16px;color:var(--ink-2);max-width:64ch;font-size:16px}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  background:rgba(8,9,11,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);height:100%;display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-mono);font-weight:600;font-size:15px;letter-spacing:.02em}
.brand b{color:var(--amber);font-weight:600}
.brand svg{display:block}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 13px;border:1px solid transparent;transition:.25s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--amber);border-color:rgba(255,178,36,.28);background:var(--amber-dim)}
.nav-cta{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--amber);color:#141005 !important;padding:9px 16px;font-weight:600;
  transition:.25s var(--ease);
}
.nav-cta:hover{background:var(--amber-2)}
@media(max-width:900px){.nav-links{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--line-2);color:var(--ink);background:transparent;
  transition:.3s var(--ease);position:relative;
}
.btn:hover{border-color:var(--ink);background:rgba(237,232,220,.04)}
.btn-primary{background:var(--amber);border-color:var(--amber);color:#141005}
.btn-primary:hover{background:var(--amber-2);border-color:var(--amber-2);color:#141005}
.btn-sm{padding:10px 16px;font-size:11px}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- panels / cards ---------- */
.panel{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);position:relative;
}
.panel-pad{padding:clamp(20px,2.6vw,32px)}
/* corner crosses */
.cross::before,.cross::after,
.cross>.cx-b::before,.cross>.cx-b::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none;
  background:
    linear-gradient(var(--ink-4),var(--ink-4)) center/9px 1px no-repeat,
    linear-gradient(var(--ink-4),var(--ink-4)) center/1px 9px no-repeat;
}
.cross::before{top:-5px;left:-5px}
.cross::after{top:-5px;right:-5px}
.cross>.cx-b::before{bottom:-5px;left:-5px}
.cross>.cx-b::after{bottom:-5px;right:-5px}

/* ---------- badges & tags ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap;
}
.badge-verified{color:var(--green);border-color:rgba(60,227,143,.3);background:var(--green-dim)}
.badge-verified .dot{width:5px;height:5px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green)}
.badge-indexed{color:var(--ink-3)}
.badge-claimed{color:var(--amber);border-color:rgba(255,178,36,.3);background:var(--amber-dim)}
.badge-amber{color:var(--amber);border-color:rgba(255,178,36,.3);background:var(--amber-dim)}
.badge-live{color:var(--green);border-color:rgba(60,227,143,.3)}
.badge-live .pulse{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(60,227,143,.5)}55%{opacity:.6;box-shadow:0 0 0 6px rgba(60,227,143,0)}}

.tag{
  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);
  padding:3px 8px;background:rgba(237,232,220,.045);border:1px solid var(--line);white-space:nowrap;
}

/* ---------- ticker tape ---------- */
.ticker-wrap{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2);overflow:hidden;position:relative;
}
.ticker{display:flex;width:max-content;animation:ticker 46s linear infinite}
.ticker-wrap:hover .ticker{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}
.tick{
  display:flex;align-items:center;gap:10px;padding:11px 26px;
  font-family:var(--font-mono);font-size:12px;white-space:nowrap;
  border-right:1px solid var(--line);
}
.tick .tk-sym{color:var(--ink-3);letter-spacing:.08em}
.tick .tk-px{color:var(--ink)}
.tick .up{color:var(--green)}
.tick .dn{color:var(--red)}

/* ---------- code ---------- */
.codeblock{
  background:#0A0C10;border:1px solid var(--line);position:relative;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.75;
}
.codeblock-head{
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);
  font-size:11px;color:var(--ink-3);letter-spacing:.08em;
}
.codeblock-head .fname{color:var(--ink-2)}
.codeblock-head .lights{display:flex;gap:6px}
.codeblock-head .lights i{width:9px;height:9px;border-radius:50%;border:1px solid var(--line-2);display:block}
.codeblock-head .lights i:first-child{background:rgba(255,178,36,.7);border-color:transparent}
.codeblock pre{padding:18px 20px;overflow-x:auto;color:var(--ink-2)}
.codeblock .c-k{color:var(--amber-2)}     /* key */
.codeblock .c-s{color:var(--green)}       /* string */
.codeblock .c-n{color:var(--blue)}        /* number */
.codeblock .c-c{color:var(--ink-4)}       /* comment */
.codeblock .c-p{color:var(--ink-3)}       /* punct */

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-2);
}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:rgba(237,232,220,.025)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- stat blocks ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.stat-cell{padding:clamp(22px,3vw,36px);border-right:1px solid var(--line);position:relative}
.stat-cell:last-child{border-right:0}
.stat-num{font-family:var(--font-display);font-size:clamp(30px,3.4vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1}
.stat-num .u{font-size:.45em;color:var(--ink-3);font-family:var(--font-mono);letter-spacing:.05em}
.stat-lbl{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;margin-top:12px}
.stat-lbl b{color:var(--amber);font-weight:500}
@media(max-width:860px){.stat-grid{grid-template-columns:1fr 1fr}.stat-cell:nth-child(2){border-right:0}.stat-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.select,.input{
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--ink);
  font-family:var(--font-mono);font-size:13px;padding:11px 14px;outline:none;width:100%;
  transition:border-color .25s;appearance:none;border-radius:0;
}
.select:focus,.input:focus{border-color:var(--amber)}
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237B776C' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;cursor:pointer;
}
input[type=range]{accent-color:var(--amber)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.rv-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-2);padding:64px 0 34px;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer h5{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.footer a.fl{display:block;color:var(--ink-2);font-size:13.5px;padding:5px 0;transition:.2s}
.footer a.fl:hover{color:var(--amber)}
.footer-bottom{
  margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;color:var(--ink-4);letter-spacing:.08em;
}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ---------- utilities ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
@media(max-width:960px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}}
.flex{display:flex;align-items:center;gap:12px}
.muted{color:var(--ink-3)}
.amber{color:var(--amber)}
.green{color:var(--green)}
.red{color:var(--red)}
.small{font-size:12.5px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.page-pad{padding-top:calc(var(--nav-h) + clamp(40px,6vw,80px))}

/* ascii divider */
.ascii-rule{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-4);
  white-space:nowrap;overflow:hidden;letter-spacing:.3em;user-select:none;
}