/* ============================================================
   ANUNNAKI ELITE — Lead Exchange
   Direction: "The Tablet" — Mesopotamian stone ledger meets
   a modern exchange floor. Obsidian ground, lapis + brass,
   carved variable serif against terminal monospace.
   ============================================================ */

:root{
  --obsidian:#08090B;
  --basalt:#0F1116;
  --stone:#171A21;
  --stone-2:#1E222B;
  --edge:#2A2F3A;

  --lapis:#1F4FA8;
  --lapis-lit:#4C8DF0;
  --brass:#C8A24A;
  --brass-lit:#EFCE85;

  --bone:#EFEAE0;
  --bone-dim:#B6B0A4;
  --muted:#7E7A72;

  --measure:68ch;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --rule:1px solid color-mix(in oklab,var(--edge) 78%,transparent);

  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --f-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--obsidian);color:var(--bone);
  font-family:var(--f-body);font-size:clamp(1rem,.55vw + .9rem,1.1rem);
  line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* film grain — atmosphere, not decoration for its own sake */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--brass);color:#0A0B0D}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:var(--f-display);font-weight:600;line-height:1.03;
  letter-spacing:-.022em;margin:0;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144;
}
h1{font-size:clamp(2.7rem,7.2vw,6.4rem)}
h2{font-size:clamp(2rem,4.4vw,3.6rem)}
h3{font-size:clamp(1.15rem,1.5vw,1.42rem);letter-spacing:-.012em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.08rem,1.05vw + .85rem,1.38rem);color:var(--bone-dim);max-width:56ch;line-height:1.6}

.tag{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);display:inline-flex;align-items:center;gap:.7rem;
}
.tag::before{
  content:"";width:0;height:0;flex:none;
  border-left:7px solid var(--brass);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
}
.idx{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;color:var(--muted)}

.shell{width:min(100% - var(--gut)*2,1240px);margin-inline:auto}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--gut);
  background:color-mix(in oklab,var(--obsidian) 72%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.hdr.stuck{border-bottom-color:color-mix(in oklab,var(--edge) 70%,transparent)}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.mark .glyph{
  width:26px;height:26px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brass-lit),var(--brass) 55%,#8A6D22);
  color:#0A0B0D;border-radius:5px;font-family:var(--f-mono);font-size:.82rem;font-weight:500;
  box-shadow:0 0 0 1px color-mix(in oklab,var(--brass) 40%,transparent),0 4px 16px -6px var(--brass);
}
.mark .name{font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 40}
.mark .name b{font-weight:600;color:var(--brass-lit)}
.nav{display:flex;align-items:center;gap:2rem;margin-left:auto;margin-right:1.6rem}
.nav a{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);text-decoration:none;position:relative;padding-block:.3rem;transition:color .22s;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);transition:right .3s cubic-bezier(.2,.8,.2,1)}
.nav a:hover{color:var(--bone)}
.nav a:hover::after{right:0}

/* the Login button — top right */
.btn{
  --bg:var(--brass);--fg:#0A0B0D;
  display:inline-flex;align-items:center;gap:.55rem;flex:none;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.68rem 1.15rem;border-radius:3px;text-decoration:none;
  background:var(--bg);color:var(--fg);border:1px solid var(--bg);
  position:relative;overflow:hidden;transition:transform .2s,box-shadow .3s,filter .25s;
}
.btn::before{
  content:"";position:absolute;inset:0;transform:translateX(-101%);
  background:linear-gradient(90deg,transparent,color-mix(in oklab,#fff 55%,transparent),transparent);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px -12px var(--brass),0 0 0 1px var(--brass-lit) inset;filter:saturate(112%)}
.btn:hover::before{transform:translateX(101%)}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .25s}
.btn:hover .arw{transform:translate(3px,-3px)}
.btn.ghost{--bg:transparent;--fg:var(--bone);border-color:var(--edge)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass-lit);box-shadow:none}

:focus-visible{outline:2px solid var(--brass-lit);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:.6rem;z-index:200;background:var(--brass);color:#0A0B0D;padding:.6rem 1rem;border-radius:3px}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(8rem,17vh,11rem) 0 clamp(3.5rem,8vh,6rem);overflow:hidden}
.hero::before{ /* lapis light from upper-left, brass from lower-right */
  content:"";position:absolute;inset:-30% -10% auto -25%;height:130%;pointer-events:none;
  background:
    radial-gradient(58% 48% at 18% 22%,color-mix(in oklab,var(--lapis) 46%,transparent),transparent 68%),
    radial-gradient(44% 38% at 88% 82%,color-mix(in oklab,var(--brass) 20%,transparent),transparent 70%);
  filter:blur(18px);opacity:.9;
}
/* faint tablet ruling */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(color-mix(in oklab,var(--edge) 42%,transparent) 1px,transparent 1px);
  background-size:100% 2.6rem;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.hero .shell{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.82fr);gap:clamp(2rem,5vw,4.5rem);align-items:end}
h1 .ln{display:block;overflow:hidden}
h1 .ln>span{display:block}
h1 em{font-style:normal;color:var(--brass-lit);font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}

/* the inscribed slab */
.slab{
  position:relative;padding:clamp(1.5rem,2.4vw,2.1rem);border-radius:4px;
  background:linear-gradient(158deg,var(--stone-2),var(--basalt));
  border:1px solid var(--edge);
  box-shadow:0 40px 90px -50px #000, inset 0 1px 0 color-mix(in oklab,#fff 6%,transparent);
}
.slab::before{ /* brass hairline at the head, like a gilt edge */
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.75;
}
.slab .def{font-size:1rem;line-height:1.72;color:var(--bone-dim);margin:0}
.slab .def b{color:var(--bone);font-weight:500}
.slab .cap{display:block;margin-top:1.2rem;padding-top:1rem;border-top:var(--rule);font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- ticker ---------- */
.ticker{border-block:var(--rule);background:color-mix(in oklab,var(--basalt) 60%,transparent);overflow:hidden;padding:.85rem 0}
.ticker-track{display:flex;gap:0;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
  padding-inline:1.6rem;display:inline-flex;align-items:center;gap:1.6rem;white-space:nowrap;
}
.ticker-track span::after{content:"";width:4px;height:4px;background:var(--brass);transform:rotate(45deg);opacity:.7}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:clamp(4.5rem,11vh,8rem) 0;position:relative}
.head{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:clamp(2rem,4vw,3.2rem);flex-wrap:wrap}
.head h2{flex:1 1 22ch;min-width:0}

.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}

/* role cards */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:4px;overflow:hidden}
.role{background:var(--basalt);padding:clamp(1.4rem,2.2vw,1.9rem);transition:background .3s}
.role:hover{background:var(--stone)}
.role h3{margin-bottom:.6rem}
.role p{color:var(--bone-dim);font-size:.95rem;margin:0}
.role .k{display:block;margin-bottom:1.1rem;color:var(--lapis-lit)}

/* steps */
.steps{display:grid;gap:1px;background:var(--edge);border-block:1px solid var(--edge)}
.step{
  background:var(--obsidian);display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1rem,3vw,2.5rem);padding:clamp(1.5rem,3vw,2.2rem) 0;align-items:start;transition:background .35s;
}
.step:hover{background:var(--basalt)}
.step .n{font-family:var(--f-mono);font-size:.8rem;color:var(--brass);letter-spacing:.12em;padding-top:.35rem}
.step h3{margin:0}
.step p{margin:0;color:var(--bone-dim);font-size:.96rem}

/* principles */
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
.pr{padding-top:1.15rem;border-top:2px solid var(--edge);transition:border-color .35s}
.pr:hover{border-top-color:var(--brass)}
.pr h3{font-size:1.02rem;margin-bottom:.45rem;font-family:var(--f-body);font-weight:700;letter-spacing:-.005em}
.pr p{margin:0;color:var(--bone-dim);font-size:.92rem}

/* CTA */
.cta{text-align:center;border-top:var(--rule);background:
  radial-gradient(60% 100% at 50% 0%,color-mix(in oklab,var(--lapis) 26%,transparent),transparent 72%)}
.cta h2{margin-bottom:1rem}
.cta .lede{margin-inline:auto}

/* footer */
footer{border-top:var(--rule);padding:2.5rem 0;font-size:.86rem;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.foot a{color:var(--bone-dim);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--brass-lit)}
.foot .fmono{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .load>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  .load>*:nth-child(1){animation-delay:.05s}
  .load>*:nth-child(2){animation-delay:.15s}
  .load>*:nth-child(3){animation-delay:.25s}
  .load>*:nth-child(4){animation-delay:.35s}
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid,.two{grid-template-columns:1fr}
  .hero-grid{gap:2.5rem}
  .step{grid-template-columns:3.2rem 1fr;row-gap:.5rem}
  .step p{grid-column:2}
  .nav{display:none}
}
@media (max-width:520px){
  .hdr{padding-inline:1.1rem}
  .btn{padding:.6rem .85rem;font-size:.68rem}
  .mark .name{font-size:.95rem}
}

/* ---------- utilities (replace inline style attrs so CSP can stay strict) ---------- */
.mb-tag{margin-bottom:1.1rem}
.mb-tag-lg{margin-bottom:1.2rem}
.flex-34{flex:1 1 34ch}
.flex-32{flex:1 1 32ch}
.center-tag{justify-content:center}
.slab-h3{margin-bottom:.8rem}
.slab-p{color:var(--bone-dim);font-size:.96rem;margin-bottom:0}
.mt-cta{margin-top:2rem}
.mark .glyph svg{display:block}