/* ═══════════════════════════════════════════════════════════
   CITADEL RWA — BRAND IDENTITY SYSTEM v1.0
   Pitch Black · Pure Platinum · Deep Gold
   No gradients. No soft shadows. Strict 90° geometry.
   ═══════════════════════════════════════════════════════════ */

:root{
  --black:#000000;
  --platinum:#E2E8F0;
  --gold:#D4AF37;

  --plat-70:rgba(226,232,240,.70);
  --plat-45:rgba(226,232,240,.45);
  --plat-28:rgba(226,232,240,.28);
  --plat-14:rgba(226,232,240,.14);
  --plat-07:rgba(226,232,240,.07);
  --gold-30:rgba(212,175,55,.30);
  --gold-12:rgba(212,175,55,.12);

  --display:'Jost',sans-serif;
  --ledger:'IBM Plex Mono',monospace;

  --rule:1px solid var(--plat-14);
  --gutter:clamp(20px,4vw,56px);
  --max:1320px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--platinum);
  font-family:var(--ledger);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--black)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
img{display:block;max-width:100%}

/* ─────────── layout primitives ─────────── */
.frame{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%}
.rule{height:1px;background:var(--plat-14);width:100%}

/* every section is a bordered register */
section{border-top:var(--rule)}

/* ─────────── type ─────────── */
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.02;
}
.label{
  font-family:var(--ledger);
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--plat-45);
}
.label-gold{color:var(--gold)}
.idx{font-family:var(--ledger);font-size:.68rem;letter-spacing:.2em;color:var(--gold)}

/* ═══════════ HEADER ═══════════ */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--black);
  border-bottom:var(--rule);
}
.nav-in{display:flex;align-items:center;height:72px;gap:32px}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand img{height:34px;width:auto}
.nav-links{display:flex;gap:34px;margin-left:auto;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.nav-links a{color:var(--plat-45);transition:color .18s}
.nav-links a:hover{color:var(--platinum)}
.nav-cta{
  border:1px solid var(--platinum);
  padding:11px 22px;
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .18s,color .18s;flex-shrink:0;
}
.nav-cta:hover{background:var(--platinum);color:var(--black)}
.nav-toggle{display:none;margin-left:auto}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;align-items:flex-end;
  padding:150px 0 0;
  border-top:none;
  overflow:hidden;
}

/* order-book depth plates — the sigil motif, rendered as market depth */
.depth{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;flex-direction:column;justify-content:center;gap:3px}
.depth i{
  display:block;height:10px;
  background:var(--plat-07);
  transition:width 1.4s cubic-bezier(.4,0,.2,1);
  will-change:width;
}
.depth i.g{background:var(--gold-12)}
.hero-scan{
  position:absolute;left:0;right:0;height:1px;z-index:1;pointer-events:none;
  background:var(--gold-30);
  animation:scan 9s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes scan{0%,100%{top:14%}50%{top:86%}}

.hero-in{position:relative;z-index:2;padding-bottom:76px;width:100%}

.hero-meta{display:flex;align-items:center;gap:18px;margin-bottom:44px;flex-wrap:wrap}
.rule-x{width:34px;height:1px;background:var(--plat-28)}

h1{font-size:clamp(2.4rem,8.2vw,7rem);line-height:.96}
h1 .l1,h1 .l2{display:block}
h1 .l1{color:var(--plat-28)}
h1 .gold{color:var(--gold)}

.hero-foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--gutter);align-items:end;
  margin-top:52px;padding-top:40px;border-top:var(--rule);
}
.hero-sub{max-width:60ch;font-size:.92rem;line-height:1.95;color:var(--plat-70)}
.hero-sub strong{color:var(--platinum);font-weight:500}
.hero-actions{display:flex;border:1px solid var(--plat-14);width:fit-content;flex-shrink:0}
.btn{
  font-family:var(--display);font-weight:700;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;
  padding:17px 32px;transition:background .18s,color .18s;
  display:inline-block;white-space:nowrap;
}
.btn-primary{background:var(--platinum);color:var(--black)}
.btn-primary:hover{background:var(--gold)}
.btn-ghost{color:var(--plat-70);border-left:1px solid var(--plat-14)}
.btn-ghost:hover{color:var(--platinum);background:var(--plat-07)}

/* ═══════════ FIGURE BAND ═══════════ */
.figband{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:var(--rule);
}
.figcell{padding:34px var(--gutter);border-right:var(--rule)}
.figcell:last-child{border-right:none}
.figcell .label{margin-bottom:12px}
.figcell .val{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,2.4vw,2.15rem);
  letter-spacing:.01em;font-variant-numeric:tabular-nums;line-height:1;
}
.figcell .val.gold{color:var(--gold)}
.figcell .val .pct{font-size:.5em;color:var(--plat-45);margin-left:2px}
.figcell .note{font-size:.66rem;letter-spacing:.16em;color:var(--plat-45);margin-top:10px}

/* ═══════════ SETTLEMENT TERMINAL ═══════════ */
.terminal-sec{padding:0}
.term-head{
  display:flex;align-items:center;gap:18px;
  padding:20px var(--gutter);border-bottom:var(--rule);
}
.term-title{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.term-live{
  margin-left:auto;display:flex;align-items:center;gap:9px;
  font-size:.66rem;letter-spacing:.2em;color:var(--gold);
}
.dot{width:6px;height:6px;background:var(--gold);animation:blip 1.6s steps(1) infinite}
.term-live.sim{color:var(--plat-45)}
.term-live.sim .dot{background:var(--plat-45)}
.term-foot{
  padding:16px var(--gutter);border-top:var(--rule);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--plat-28);
}
@keyframes blip{0%,49%{opacity:1}50%,100%{opacity:.25}}

.ledger-wrap{overflow-x:auto}
table.ledger{width:100%;border-collapse:collapse;font-size:.76rem;min-width:720px}
table.ledger th{
  font-weight:400;text-align:left;padding:13px var(--gutter);
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--plat-45);border-bottom:var(--rule);
}
table.ledger th:not(:first-child),table.ledger td:not(:first-child){padding-left:0}
table.ledger td{padding:13px 26px 13px 0;border-bottom:1px solid var(--plat-07);font-variant-numeric:tabular-nums}
table.ledger td:first-child{padding-left:var(--gutter);color:var(--plat-45)}
table.ledger td:last-child{padding-right:var(--gutter);color:var(--gold);text-align:right}
table.ledger tr{animation:rowIn .35s ease}
@keyframes rowIn{from{opacity:0;background:var(--gold-12)}to{opacity:1;background:transparent}}
.tx{color:var(--plat-45)}
.pair{color:var(--platinum)}

/* ═══════════ SECTION SCAFFOLD ═══════════ */
.sec-head{
  display:grid;grid-template-columns:minmax(180px,240px) 1fr;
  gap:var(--gutter);padding:80px var(--gutter) 46px;
}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.7rem)}
.sec-head .lede{color:var(--plat-70);font-size:.9rem;line-height:1.9;max-width:56ch;margin-top:16px}
.sec-aside{padding-top:6px}

/* ═══════════ MECHANISM (3 registers) ═══════════ */
.registers{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule)}
.register{
  padding:40px var(--gutter) 48px;
  border-right:var(--rule);
  transition:background .2s;
}
.register:last-child{border-right:none}
.register:hover{background:var(--plat-07)}
.register .idx{display:block;margin-bottom:26px}
.register h3{font-size:1.1rem;margin-bottom:16px}
.register p{font-size:.86rem;color:var(--plat-70);line-height:1.85}
.register .spec{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--plat-14);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}

/* ═══════════ ALLOCATION BAR ═══════════ */
.alloc{padding:0 var(--gutter) 80px}
.alloc-bar{display:flex;height:56px;border:1px solid var(--plat-14);margin-bottom:22px}
.alloc-bar span{display:flex;align-items:center;justify-content:center;font-size:.7rem;letter-spacing:.14em}
.alloc-book{background:var(--platinum);color:var(--black);flex:95}
.alloc-treasury{background:var(--gold);color:var(--black);flex:5;font-size:.6rem}
.alloc-legend{display:flex;gap:40px;flex-wrap:wrap;font-size:.72rem;color:var(--plat-45);letter-spacing:.1em}
.alloc-legend b{color:var(--platinum);font-weight:400}
.alloc-legend .g{color:var(--gold)}

/* ═══════════ VAULTS ═══════════ */
.vaults{display:grid;grid-template-columns:1fr 1fr;border-top:var(--rule)}
.vault{padding:44px var(--gutter) 52px;border-right:var(--rule)}
.vault:last-child{border-right:none}
.vault-tag{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.vault h3{font-size:1.35rem}
.vault .yield{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,4vw,3rem);color:var(--gold);
  letter-spacing:0;margin:26px 0 6px;font-variant-numeric:tabular-nums;
}
.vault .yield-l{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plat-45);margin-bottom:30px}
.spec-row{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-top:1px solid var(--plat-07);font-size:.8rem}
.spec-row .k{color:var(--plat-45);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding-top:3px;flex-shrink:0}
.spec-row .v{text-align:right;line-height:1.6}
.spec-row .v .sym{color:var(--gold)}
.vault .btn{margin-top:30px;border:1px solid var(--platinum);width:100%;text-align:center}
.vault .btn:hover{background:var(--platinum);color:var(--black)}

/* ═══════════ ESCROW / PROTOCOL LAW ═══════════ */
.escrow{display:grid;grid-template-columns:1fr 1fr;border-top:var(--rule)}
.escrow-block{padding:44px var(--gutter);border-right:var(--rule)}
.escrow-block:last-child{border-right:none}
.escrow-block h3{font-size:1.05rem;margin-bottom:16px}
.escrow-block p{font-size:.86rem;color:var(--plat-70);line-height:1.85}
.ratio{display:flex;align-items:stretch;margin-top:28px;border:1px solid var(--plat-14)}
.ratio div{flex:1;padding:20px;text-align:center}
.ratio div+div{border-left:1px solid var(--plat-14)}
.ratio .n{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--gold)}
.ratio .t{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--plat-45);margin-top:6px}
.notice{
  border-left:2px solid var(--gold);padding:20px 24px;margin-top:28px;
  background:var(--gold-12);font-size:.82rem;line-height:1.8;color:var(--plat-70);
}
.notice b{color:var(--gold);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;display:block;margin-bottom:8px}

/* ═══════════ CLOSING ═══════════ */
.closing{padding:110px var(--gutter);text-align:center;border-top:var(--rule)}
.closing h2{font-size:clamp(2rem,5vw,3.8rem);margin-bottom:26px}
.closing p{color:var(--plat-45);max-width:44ch;margin:0 auto 44px;font-size:.88rem;line-height:1.9}
.closing .hero-actions{margin:0 auto}

/* ═══════════ FOOTER ═══════════ */
footer{border-top:var(--rule);padding:52px var(--gutter) 40px}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
.foot-brand img{height:40px;margin-bottom:16px}
.foot-tag{font-size:.74rem;color:var(--plat-45);letter-spacing:.06em;max-width:40ch;line-height:1.8}
.foot-links{display:flex;flex-direction:column;gap:11px;text-align:right;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.foot-links a{color:var(--plat-45);transition:color .18s}
.foot-links a:hover{color:var(--gold)}
.contract{
  margin-top:44px;padding-top:24px;border-top:var(--rule);
  font-size:.72rem;color:var(--plat-45);word-break:break-all;line-height:1.9;
}
.contract .k{color:var(--gold);letter-spacing:.18em;text-transform:uppercase;margin-right:10px}
.contract a{color:var(--platinum);border-bottom:1px solid var(--plat-28)}
.legal{margin-top:24px;font-size:.66rem;color:var(--plat-28);line-height:1.9;max-width:80ch}

/* ═══════════ REVEAL ═══════════ */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1000px){
  .figband{grid-template-columns:1fr 1fr}
  .figcell:nth-child(2){border-right:none}
  .figcell:nth-child(1),.figcell:nth-child(2){border-bottom:var(--rule)}
  .hero-foot{grid-template-columns:1fr;gap:34px;align-items:start}
  .registers{grid-template-columns:1fr}
  .register{border-right:none;border-bottom:var(--rule)}
  .register:last-child{border-bottom:none}
  .vaults,.escrow{grid-template-columns:1fr}
  .vault,.escrow-block{border-right:none;border-bottom:var(--rule)}
  .vault:last-child,.escrow-block:last-child{border-bottom:none}
  .sec-head{grid-template-columns:1fr;gap:18px;padding-top:60px}
  .foot-grid{grid-template-columns:1fr}
  .foot-links{text-align:left;flex-direction:row;flex-wrap:wrap;gap:22px}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav-in{height:64px;gap:14px}
  .brand img{height:28px}
  .nav-cta{margin-left:auto;padding:10px 15px;font-size:.66rem;letter-spacing:.1em}
  .hero{padding-top:118px;min-height:auto}
  .hero-in{padding-bottom:56px}
  .hero-meta{gap:12px;margin-bottom:32px}
  .rule-x{width:18px}
  .hero-actions{width:100%}
  .figband{grid-template-columns:1fr}
  .figcell{border-right:none;border-bottom:var(--rule);padding:26px var(--gutter)}
  .figcell:last-child{border-bottom:none}
  .depth i{height:7px}
  .btn{flex:1;text-align:center;padding:15px 12px;font-size:.68rem;letter-spacing:.1em}
  .alloc-treasury{font-size:.5rem}
}