/* =========================================================
   FINTECHPRICE — design tokens
   Concept: a night ledger. Blockchain rendered literally as
   a chain of linked, hashed entries; gold = value, teal = data.
   ========================================================= */

:root{
  --bg:        #0A1120;
  --bg-alt:    #0F1930;
  --surface:   #142140;
  --surface-2: #182747;
  --line:      #263757;
  --line-soft: #1D2C4C;

  --ink:       #ECE7D8;
  --ink-dim:   #9BA6C4;
  --ink-faint: #64709A;

  --gold:      #CBA24C;
  --gold-dim:  #8A7038;
  --teal:      #4FBFAE;
  --teal-dim:  #2E6E66;
  --flag:      #C1666B;

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body:    "IBM Plex Sans", -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html:focus-within{ scroll-behavior:auto; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(79,191,174,0.06), transparent 40%),
    radial-gradient(circle at 88% 78%, rgba(203,162,76,0.06), transparent 45%);
  background-attachment:fixed;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--gold); color:var(--bg); }

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:16px; height:1px;
  background:var(--teal);
  display:inline-block;
}

/* ---------- headings ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  color:var(--ink);
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.4rem, 5.2vw, 4.4rem); font-weight:560; }
h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); }
h3{ font-size:1.28rem; font-weight:600; }
p{ margin:0 0 1em; color:var(--ink-dim); }
strong{ color:var(--ink); font-weight:600; }

.lede{
  font-size:1.15rem;
  color:var(--ink-dim);
  max-width:56ch;
}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,17,32,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.logo .mark{ display:flex; gap:3px; align-items:center; }
.logo .mark span{
  width:7px; height:7px; border-radius:1px;
  background:var(--gold);
  display:inline-block;
}
.logo .mark span:nth-child(2){ background:var(--teal); }
.logo small{
  font-family:var(--font-mono);
  font-size:.62rem;
  color:var(--ink-faint);
  letter-spacing:.1em;
  font-weight:400;
  display:block;
  margin-top:1px;
}

nav.primary{ display:flex; gap:2px; align-items:center; }
nav.primary a{
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.03em;
  color:var(--ink-dim);
  padding:9px 15px;
  border-radius:3px;
  position:relative;
  transition:color .18s ease;
}
nav.primary a:hover{ color:var(--ink); }
nav.primary a.active{ color:var(--gold); }
nav.primary a.active::after{
  content:"";
  position:absolute; left:15px; right:15px; bottom:3px;
  height:1px; background:var(--gold);
}

.menu-toggle{ display:none; }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line-soft);
  margin-top:120px;
  padding:56px 0 40px;
  background:var(--bg-alt);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}
.footer-grid h4{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:14px;
  font-weight:500;
}
.footer-grid a{
  display:block;
  color:var(--ink-dim);
  font-size:.92rem;
  padding:5px 0;
  transition:color .15s;
}
.footer-grid a:hover{ color:var(--teal); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);
  font-size:.76rem;
  color:var(--ink-faint);
}
.disclaimer{
  max-width:640px;
  font-family:var(--font-body);
  font-size:.85rem;
  color:var(--ink-faint);
  line-height:1.6;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.02em;
  padding:13px 22px;
  border-radius:3px;
  border:1px solid var(--line);
  color:var(--ink);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
  cursor:pointer;
  background:transparent;
}
.btn:hover{ border-color:var(--teal); transform:translateY(-1px); }
.btn-gold{
  background:var(--gold);
  color:#1A1508;
  border-color:var(--gold);
  font-weight:600;
}
.btn-gold:hover{ background:#DCB765; border-color:#DCB765; }

/* ---------- sections ---------- */
section{ padding:96px 0; }
section.tight{ padding:64px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }

hr.rule{
  border:none; border-top:1px solid var(--line-soft);
  margin:0;
}

/* ---------- hero ---------- */
.hero{
  padding:88px 0 100px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero h1{ margin:18px 0 22px; }
.hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

/* ---------- genesis chain (signature element) ---------- */
.chain{
  display:flex;
  align-items:center;
  padding:8px 4px;
}
.chain-block{
  flex:1;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:14px 12px;
  position:relative;
}
.chain-block .n{
  font-family:var(--font-mono);
  font-size:.66rem;
  color:var(--ink-faint);
  margin-bottom:6px;
}
.chain-block .h{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--teal);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.chain-block.latest{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 0 24px -6px rgba(203,162,76,0.5);
}
.chain-block.latest .h{ color:var(--gold); }
.chain-link{
  width:22px; height:1px;
  background:var(--line);
  position:relative;
  flex-shrink:0;
}
.chain-link::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:4px; height:4px; border-radius:50%;
  background:var(--ink-faint);
  transform:translate(-50%,-50%);
}
@keyframes pulseBlock{
  0%,100%{ box-shadow:0 0 0 1px var(--gold), 0 0 24px -6px rgba(203,162,76,0.5); }
  50%{ box-shadow:0 0 0 1px var(--gold), 0 0 34px -4px rgba(203,162,76,0.85); }
}
.chain-block.latest{ animation:pulseBlock 3.2s ease-in-out infinite; }

.chain-caption{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--ink-faint);
  margin-top:14px;
}

/* ---------- cards ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:30px 26px;
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color:var(--teal-dim); transform:translateY(-3px); }
.card .icon{
  width:34px; height:34px;
  border:1px solid var(--line);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  color:var(--teal);
}
.card h3{ margin-bottom:10px; }
.card p{ font-size:.93rem; margin-bottom:0; }
.card .go{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--gold);
}

/* ---------- topic tiles (home -> other pages) ---------- */
.topic-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.tile{
  display:block;
  background:linear-gradient(160deg, var(--surface), var(--bg-alt));
  border:1px solid var(--line);
  border-radius:8px;
  padding:34px 28px;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}
.tile:hover{ transform:translateY(-4px); border-color:var(--gold-dim); }
.tile .eyebrow{ margin-bottom:16px; }
.tile h3{ font-size:1.5rem; margin-bottom:12px; }
.tile p{ font-size:.92rem; }
.tile .arrow{
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--gold);
  display:flex; align-items:center; gap:6px;
}

/* ---------- stat row ---------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-soft);
  border-radius:6px;
  overflow:hidden;
}
.stat{
  padding:28px 24px;
  border-right:1px solid var(--line-soft);
  background:var(--bg-alt);
}
.stat:last-child{ border-right:none; }
.stat .v{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--gold);
  font-weight:600;
}
.stat .l{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-faint);
  letter-spacing:.04em;
  margin-top:4px;
}

/* ---------- ledger step / timeline ---------- */
.ledger{
  border:1px solid var(--line-soft);
  border-radius:6px;
  overflow:hidden;
}
.ledger-row{
  display:grid;
  grid-template-columns:90px 1fr;
  border-bottom:1px solid var(--line-soft);
  cursor:pointer;
}
.ledger-row:last-child{ border-bottom:none; }
.ledger-row .idx{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--teal);
  padding:22px 20px;
  background:var(--bg-alt);
  border-right:1px solid var(--line-soft);
}
.ledger-row .body{ padding:22px 26px 22px 24px; }
.ledger-row h3{
  font-size:1.06rem;
  margin-bottom:0;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
}
.ledger-row h3 .caret{
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--ink-faint);
  transition:transform .2s ease;
}
.ledger-row.open h3 .caret{ transform:rotate(45deg); }
.ledger-row .detail{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
}
.ledger-row.open .detail{ max-height:340px; margin-top:12px; }
.ledger-row .detail p{ font-size:.93rem; margin-bottom:8px; }
.ledger-row .detail p:last-child{ margin-bottom:0; }

/* ---------- two-col explainer ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.split.reverse .visual{ order:2; }

.visual{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:34px;
}

/* hash demo */
.hash-demo{ font-family:var(--font-mono); font-size:.85rem; }
.hash-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.hash-row:last-child{ border-bottom:none; }
.hash-row .k{ color:var(--ink-faint); flex-shrink:0; }
.hash-row .v{ color:var(--teal); text-align:right; word-break:break-all; }
.hash-row.changed .v{ color:var(--flag); }

/* key metaphor */
.key-pair{ display:flex; flex-direction:column; gap:16px; }
.key-item{
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px 20px;
  display:flex; gap:16px; align-items:flex-start;
}
.key-item .badge{
  font-family:var(--font-mono);
  font-size:.65rem;
  padding:4px 8px;
  border-radius:3px;
  white-space:nowrap;
  margin-top:2px;
}
.badge.public{ background:rgba(79,191,174,0.14); color:var(--teal); border:1px solid var(--teal-dim); }
.badge.private{ background:rgba(193,102,107,0.14); color:var(--flag); border:1px solid #7A3F42; }
.key-item p{ margin:0; font-size:.9rem; }
.key-item strong{ display:block; margin-bottom:3px; font-family:var(--font-body); }

/* ---------- comparison table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:6px; }
table.compare{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
}
table.compare th, table.compare td{
  text-align:left;
  padding:16px 20px;
  border-bottom:1px solid var(--line-soft);
  font-size:.9rem;
  vertical-align:top;
}
table.compare th{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  background:var(--bg-alt);
  font-weight:500;
}
table.compare td.name{ color:var(--gold); font-family:var(--font-display); font-size:1rem; }
table.compare tr:last-child td{ border-bottom:none; }
table.compare td{ color:var(--ink-dim); }

/* ---------- volatility bars (illustrative) ---------- */
.vol-chart{ display:flex; align-items:flex-end; gap:6px; height:150px; }
.vol-chart .bar{
  flex:1;
  background:linear-gradient(180deg, var(--teal), var(--teal-dim));
  border-radius:2px 2px 0 0;
  position:relative;
}
.vol-chart .bar.down{ background:linear-gradient(180deg, var(--flag), #6E3236); }
.vol-note{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-faint);
  margin-top:12px;
}

/* ---------- glossary ---------- */
.glossary-search{
  position:relative;
  margin-bottom:44px;
}
.glossary-search input{
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px 20px 16px 46px;
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.95rem;
}
.glossary-search input:focus{ outline:none; border-color:var(--teal); }
.glossary-search::before{
  content:"⌕";
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint);
  font-size:1.1rem;
}
.glossary-count{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--ink-faint);
  margin-bottom:20px;
}
.glossary-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:6px;
  overflow:hidden;
}
.term-card{
  background:var(--bg-alt);
  padding:24px 26px;
}
.term-card .term{
  font-family:var(--font-mono);
  color:var(--gold);
  font-size:.92rem;
  margin-bottom:8px;
  letter-spacing:.01em;
}
.term-card p{ font-size:.88rem; margin:0; }
.term-card.hide{ display:none; }
.glossary-empty{
  display:none;
  padding:48px 0;
  text-align:center;
  color:var(--ink-faint);
  font-family:var(--font-mono);
  font-size:.85rem;
}

/* ---------- callout ---------- */
.callout{
  border:1px solid var(--line);
  border-left:2px solid var(--gold);
  border-radius:4px;
  padding:20px 24px;
  background:var(--surface);
  font-size:.92rem;
}
.callout strong{ color:var(--gold); }

.callout.warn{ border-left-color:var(--flag); }
.callout.warn strong{ color:var(--flag); }

/* ---------- CTA band ---------- */
.cta-band{
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:56px 60px;
  display:flex; justify-content:space-between; align-items:center;
  gap:40px;
  background:linear-gradient(120deg, var(--surface), var(--bg-alt));
}
.cta-band h2{ margin-bottom:8px; }
.cta-band p{ margin:0; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-grid, .split{ grid-template-columns:1fr; }
  .split.reverse .visual{ order:0; }
  .card-grid, .topic-tiles{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:none; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .cta-band{ flex-direction:column; align-items:flex-start; padding:40px 28px; }
  .glossary-grid{ grid-template-columns:1fr; }
  nav.primary{ display:none; }
  nav.primary.mobile-open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:72px; left:0; right:0;
    background:var(--bg-alt);
    border-bottom:1px solid var(--line-soft);
    padding:8px 16px 16px;
  }
  nav.primary.mobile-open a{ padding:12px 8px; }
  .menu-toggle{ display:block; }
  .ledger-row{ grid-template-columns:64px 1fr; }
}