/* =========================================================
   CAT LIFE
   Accent #FB2B72 on a plum-black ground.
   ========================================================= */

:root{
  /* palette */
  --void:#09060F;
  --slab:#140D1D;
  --slab-2:#1B1228;
  --accent:#FB2B72;
  --accent-hi:#FF86AF;
  --accent-text:#FF5C93;   /* accent legible as small text over the plate */
  --accent-lo:#B0134C;
  --violet:#7B3BE8;
  --pearl:#F9F2F7;
  --ash:#9E92AE;
  --ash-2:#968AAA;
  --ok:#4FD6A0;
  --off:#FF6B84;

  /* lines */
  --hair:rgba(255,255,255,.075);
  --hair-2:rgba(255,255,255,.13);
  --accent-hair:rgba(251,43,114,.34);

  /* type */
  --display:'Sora',system-ui,sans-serif;
  --body:'Inter Tight',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* metrics */
  --shell:1200px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --sec-pad:clamp(54px,5.6vw,80px);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--void);
  color:var(--pearl);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ambient field lives in .bg — see AMBIENT BACKGROUND below */

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}

.shell{width:min(var(--shell),90%);margin-inline:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

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

/* ---------- icons ---------- */
.ico{width:1.15em;height:1.15em;display:block;flex:none}

/* ---------- type primitives ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-text);
}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.02em}

.metal{
  background:linear-gradient(100deg,
    #FB2B72 0%, #FF9EC4 14%, #FFE6F0 28%, #FF6C9E 42%,
    #FB2B72 58%, #FFC2DA 76%, #FF5D96 90%, #FB2B72 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:.94rem;letter-spacing:-.005em;
  padding:14px 24px;border-radius:var(--r-sm);
  border:1px solid transparent;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .22s, border-color .22s, color .22s;
  white-space:nowrap;
}
.btn-sm{padding:10px 16px;font-size:.86rem}

.btn-accent{
  color:#FFFFFF;
  background:linear-gradient(178deg,var(--accent-hi),var(--accent) 46%,#D71A5C);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 12px 30px -12px rgba(251,43,114,.7);
}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 20px 40px -14px rgba(251,43,114,.85)}

.btn-ghost{
  color:var(--pearl);
  border-color:var(--hair-2);
  background:rgba(10,8,16,.45);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.btn-ghost:hover{border-color:var(--accent-hair);color:var(--accent);transform:translateY(-2px)}

/* =========================================================
   AMBIENT BACKGROUND
   Fixed field behind the page: drifting orbs, a slow aurora sweep,
   a ledger grid, dust, floating chain marks and a grain pass.
   ========================================================= */
.bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  --px:0;--py:0;
}
/* page-wide plate. It is a bright pink image under light text, so it is
   knocked well down; the orbs, dust and grain then sit on top of it. */
.bg::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(9,6,15,.55),rgba(9,6,15,.55)),
    url("assets/body-bg.jpg") center/cover no-repeat;
  filter:brightness(.22) saturate(.9);
}

.orb{
  position:absolute;border-radius:50%;filter:blur(70px);
  will-change:transform;
}
.orb-1{
  width:46vw;height:46vw;top:-12vw;right:-8vw;
  background:radial-gradient(circle,rgba(251,43,114,.34),transparent 68%);
  animation:drift1 34s ease-in-out infinite;
  translate:calc(var(--px) * 26px) calc(var(--py) * 22px);
}
.orb-2{
  width:40vw;height:40vw;bottom:-10vw;left:-10vw;
  background:radial-gradient(circle,rgba(123,59,232,.24),transparent 68%);
  animation:drift2 44s ease-in-out infinite;
  translate:calc(var(--px) * -20px) calc(var(--py) * -16px);
}
.orb-3{
  width:34vw;height:34vw;top:38%;left:44%;
  background:radial-gradient(circle,rgba(251,43,114,.16),transparent 70%);
  animation:drift3 52s ease-in-out infinite;
  translate:calc(var(--px) * 14px) calc(var(--py) * -18px);
}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,5vw) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,-4vw) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,-6vw) scale(1.2)}}

/* slow aurora sweep */
.beam{
  position:absolute;top:50%;left:50%;width:150vmax;height:150vmax;
  translate:-50% -50%;opacity:.4;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(251,43,114,.14) 26deg, transparent 62deg,
    transparent 180deg, rgba(123,59,232,.12) 214deg, transparent 250deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle closest-side,#000 20%,transparent 72%);
  mask:radial-gradient(circle closest-side,#000 20%,transparent 72%);
  animation:spin 72s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ledger grid */
.mesh{
  position:absolute;inset:0;opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(circle at 50% 34%,#000,transparent 76%);
  mask-image:radial-gradient(circle at 50% 34%,#000,transparent 76%);
  animation:meshPan 60s linear infinite;
}
@keyframes meshPan{to{background-position:78px 78px}}

/* dust */
.dust{position:absolute;inset:0}
.dust i{
  position:absolute;left:var(--x);top:var(--y);
  width:3px;height:3px;border-radius:50%;
  background:var(--accent);opacity:0;
  scale:var(--s);
  box-shadow:0 0 8px rgba(251,43,114,.9);
  animation:motes 13s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes motes{
  0%{opacity:0;transform:translateY(18px)}
  25%{opacity:.85}
  60%{opacity:.5}
  100%{opacity:0;transform:translateY(-70px)}
}

/* floating chain marks */
.glyphs{position:absolute;inset:0}
.glyphs svg{
  position:absolute;left:var(--x);top:var(--y);
  width:38px;height:38px;color:var(--accent);opacity:.07;
  rotate:var(--r);
  animation:wander 26s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes wander{
  0%,100%{transform:translate(0,0)}
  33%{transform:translate(22px,-28px)}
  66%{transform:translate(-18px,20px)}
}

/* grain */
.noise{
  position:absolute;inset:0;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.progress{
  position:fixed;top:0;left:0;height:2px;z-index:120;
  width:var(--p,0%);
  background:linear-gradient(90deg,var(--accent-lo),var(--accent) 55%,var(--accent-hi));
  box-shadow:0 0 14px rgba(251,43,114,.8);
  transition:width .08s linear;
}

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed;inset:0 0 auto;z-index:80;
  padding:18px 0;
  transition:padding .3s, background .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  padding:11px 0;
  background:rgba(9,6,15,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--hair);
}
.hdr-in{display:flex;align-items:center;gap:28px}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  position:relative;flex:none;
  animation:breathe 4s ease-in-out infinite;
}
.brand-mark img{width:100%;height:100%;display:block;border-radius:50%;position:relative}
.brand-mark::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--accent-hair);opacity:.7;
  animation:haloPulse 4s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{filter:drop-shadow(0 6px 18px rgba(251,43,114,.5))}
  50%{filter:drop-shadow(0 8px 28px rgba(251,43,114,.95))}
}
@keyframes haloPulse{
  0%,100%{transform:scale(1);opacity:.65}
  50%{transform:scale(1.14);opacity:0}
}
.brand-name{
  font-family:var(--display);font-weight:800;font-size:1.06rem;
  letter-spacing:.02em;
}
.brand-name em{font-style:normal;color:var(--accent)}

.nav{display:flex;gap:30px;margin-left:auto}
.nav a{
  font-size:.9rem;font-weight:500;color:var(--ash);
  position:relative;padding:4px 0;transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover{color:var(--pearl)}
.nav a.on{color:var(--pearl)}
.nav a.on::after{transform:scaleX(1)}

.hdr-act{display:flex;align-items:center;gap:12px;flex:none}
.burger{display:none;width:40px;height:40px;place-items:center;border:1px solid var(--hair);border-radius:var(--r-sm);color:var(--pearl)}
.burger .ico{width:20px;height:20px}

/* =========================================================
   HERO — full-bleed video
   The clip is a bright pastel pink; it needs a heavy scrim and a
   knocked-back filter before any text can sit on it legibly.
   ========================================================= */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;
  display:grid;place-items:center;
  padding:clamp(122px,15vh,168px) 0 clamp(78px,11vh,120px);
}

.hero-media{position:absolute;inset:0;z-index:-1}
.hero-video{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  filter:brightness(.78) saturate(1.04) contrast(1.02);
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    /* pool of shade under the copy column only */
    radial-gradient(56% 46% at 50% 44%,
      rgba(9,6,15,.8) 0%, rgba(9,6,15,.52) 50%, rgba(9,6,15,.1) 84%, transparent 100%),
    /* edge vignette + hand-off into the page background */
    linear-gradient(180deg,
      rgba(9,6,15,.86) 0%, rgba(9,6,15,.26) 24%,
      rgba(9,6,15,.44) 60%, rgba(9,6,15,.92) 88%, var(--void) 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(9,6,15,.66) 100%);
}
/* a touch of accent in the corners to tie the clip to the palette */
.hero-wash{
  position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.5;
  background:radial-gradient(90% 70% at 82% 8%, rgba(251,43,114,.5), transparent 60%);
}

.hero-in{
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero-in>*{animation:rise 1s cubic-bezier(.2,.8,.2,1) backwards}
.hero-in>*:nth-child(1){animation-delay:.10s}
.hero-in>*:nth-child(2){animation-delay:.22s}
.hero-in>*:nth-child(3){animation-delay:.34s}
.hero-in>*:nth-child(4){animation-delay:.46s}
.hero-in>*:nth-child(5){animation-delay:.58s}
.hero-in>*:nth-child(6){animation-delay:.70s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

.tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pearl);
  border:1px solid var(--hair-2);border-radius:100px;
  padding:8px 16px 8px 13px;
  background:rgba(10,8,16,.5);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.pulse{
  width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 rgba(251,43,114,.6);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(251,43,114,.55)}
  70%{box-shadow:0 0 0 9px rgba(251,43,114,0)}
  100%{box-shadow:0 0 0 0 rgba(251,43,114,0)}
}

.hero-h{
  font-size:clamp(3rem,7.4vw,5.6rem);
  font-weight:800;line-height:.96;letter-spacing:-.045em;
  margin:clamp(20px,3vh,30px) 0 0;
  text-shadow:0 3px 40px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.4);
}
.hero-h .metal{
  display:block;
  filter:drop-shadow(0 3px 26px rgba(0,0,0,.55));
}

.hero-sub{
  color:rgba(245,241,247,.88);
  font-size:clamp(1rem,1.35vw,1.14rem);
  max-width:52ch;margin:clamp(18px,2.6vh,26px) 0 clamp(28px,4vh,38px);
  text-shadow:0 1px 18px rgba(0,0,0,.7);
}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ---------- hero data rail ---------- */
.rail{
  display:flex;flex-wrap:nowrap;
  width:min(100%,960px);
  margin-top:clamp(30px,4.6vh,50px);
  border:1px solid var(--hair-2);border-radius:var(--r-md);
  background:rgba(9,7,14,.56);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
  overflow:hidden;
}
.rail>div{
  flex:1 1 0;min-width:0;padding:16px 22px;
  border-right:1px solid var(--hair);
}
.rail>div:last-child{border-right:none}
.rail dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash);margin-bottom:7px;
}
.rail dd{
  white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--pearl);
}
.rail dd.addr-short{font-family:var(--mono);font-size:.9rem;letter-spacing:.02em;color:var(--accent-text)}
.rail-mark{width:15px;height:17px;color:#8FA2F0;flex:none}

/* ---------- crypto marks ---------- */
.tokens{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:clamp(22px,3vh,30px)}
.mark{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,9,17,.6);border:1px solid var(--hair-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s;
}
.mark{animation:bob 5.6s ease-in-out infinite}
.tokens .mark:nth-child(1){animation-delay:0s}
.tokens .mark:nth-child(2){animation-delay:.45s}
.tokens .mark:nth-child(3){animation-delay:.9s}
.tokens .mark:nth-child(4){animation-delay:1.35s}
.tokens .mark:nth-child(5){animation-delay:1.8s}
.tokens .mark:nth-child(6){animation-delay:2.25s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.mark:hover{
  scale:1.14;border-color:var(--accent);
  box-shadow:0 12px 30px -10px rgba(251,43,114,.85),inset 0 1px 0 rgba(255,255,255,.1);
}
.mark svg{width:20px;height:20px}
.mark.eth  svg{width:15px;height:17px;color:#8FA2F0}
.mark.btc  svg{width:21px;height:21px;color:#F7931A}
.mark.usdt svg{width:20px;height:20px;color:#26A17B}
.mark.sol  svg{width:19px;height:14px;color:#19E7A0}
.mark.bnb  svg{width:21px;height:21px;color:#F3BA2F}
.mark.usdc svg{width:20px;height:20px;color:#4D93E0}

/* ---------- scroll cue ---------- */
.cue{
  position:absolute;left:50%;bottom:clamp(20px,3.4vh,34px);translate:-50% 0;
  width:25px;height:40px;border:1px solid var(--hair-2);border-radius:13px;
  display:grid;justify-items:center;padding-top:8px;
  background:rgba(9,7,14,.4);backdrop-filter:blur(8px);
  transition:border-color .25s;
}
.cue:hover{border-color:var(--accent-hair)}
.cue span{width:3px;height:8px;border-radius:2px;background:var(--accent);animation:cue 2s ease-in-out infinite}
@keyframes cue{
  0%{opacity:0;transform:translateY(0)}
  25%{opacity:1}
  75%{opacity:0;transform:translateY(15px)}
  100%{opacity:0;transform:translateY(15px)}
}

/* =========================================================
   TICKER
   ========================================================= */
.ticker{
  position:relative;overflow:hidden;
  border-block:1px solid var(--hair);
  background:linear-gradient(90deg,rgba(251,43,114,.07),rgba(123,59,232,.05),rgba(251,43,114,.07));
  padding:13px 0;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--void),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--void),transparent)}
.ticker-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.ticker-run{display:flex;align-items:center;gap:26px;padding-right:26px}
.ticker-run span{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ash);white-space:nowrap;
}
.tk-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 8px rgba(251,43,114,.9)}
.tk-m{width:16px;height:16px;flex:none}
.tk-m.eth{width:13px;height:15px;color:#8FA2F0}
.tk-m.btc{color:#F7931A}
.tk-m.sol{width:15px;height:11px;color:#19E7A0}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
.sec{padding-block:var(--sec-pad)}
.sec-h{max-width:62ch;margin-inline:auto;text-align:center}
.sec-h h2{font-size:clamp(1.85rem,3.6vw,2.75rem);margin-top:14px}
.sec-h .lead{color:var(--ash);margin-top:16px;font-size:1.02rem}
.sec-h.left{max-width:48ch;margin-inline:0;text-align:left}
.lead.left{text-align:left}

/* =========================================================
   MIGRATION LEDGER
   ========================================================= */
.ledger{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,2.4vw,28px);align-items:stretch;
  margin-top:clamp(40px,5vw,60px);
}

.cx{
  position:relative;
  border:1px solid var(--hair);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--slab),rgba(15,13,22,.35));
  padding:clamp(22px,3vw,32px);
  display:flex;flex-direction:column;gap:14px;
}
.cx-role{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ash-2);
}
.cx h3{font-size:1.22rem}
.cx-note{color:var(--ash-2);font-size:.83rem;line-height:1.5}
.cx-old{opacity:.72}
.cx-new{
  border-color:var(--accent-hair);
  background:linear-gradient(180deg,rgba(251,43,114,.075),rgba(15,13,22,.5) 55%);
  box-shadow:0 30px 70px -40px rgba(251,43,114,.55);
}
.cx-new .cx-role{color:var(--accent)}

.addr{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--hair);border-radius:var(--r-sm);
  background:rgba(0,0,0,.42);
  padding:14px;margin-top:6px;
}
.addr code{
  font-family:var(--mono);font-size:.79rem;line-height:1.55;
  color:var(--ash);word-break:break-all;
}
.cx-new .addr code{color:var(--accent-hi)}
.copy{
  color:var(--ash-2);flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:7px;transition:.2s;
}
.copy .ico{width:16px;height:16px}
.copy:hover{color:var(--accent);background:rgba(255,255,255,.06)}
.copy.done{color:var(--ok)}

.cx-state{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;
}
.cx-state::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.cx-state.off{color:var(--off)}
.cx-state.off::before{background:var(--off)}
.cx-state.on{color:var(--ok)}
.cx-state.on::before{background:var(--ok);box-shadow:0 0 10px var(--ok)}

/* transfer rail between the two contracts */
.rail-arrow{position:relative;display:grid;place-items:center;min-width:92px}
.rail-track{
  position:absolute;left:0;right:0;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,var(--accent-hair) 0 5px,transparent 5px 11px);
}
.rail-spark{
  position:absolute;top:50%;width:30px;height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent-hi),var(--accent),transparent);
  box-shadow:0 0 14px rgba(251,43,114,.95);
  animation:travel 3.4s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes travel{
  0%{left:-16%;opacity:0}
  12%{opacity:1}
  84%{opacity:1}
  100%{left:104%;opacity:0}
}
.rail-chip{
  position:relative;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;color:var(--accent);
  background:var(--void);border:1px solid var(--accent-hair);
  box-shadow:0 0 24px rgba(251,43,114,.22);
}
.rail-chip .ico{width:19px;height:19px}

/* the notice */
.warn{
  display:flex;gap:18px;align-items:flex-start;
  max-width:820px;margin:clamp(30px,4vw,44px) auto 0;
  border:1px solid var(--accent-hair);border-radius:var(--r-md);
  background:linear-gradient(120deg,rgba(251,43,114,.07),rgba(251,43,114,.045));
  padding:22px 24px;
}
.warn-ico{
  width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;
  color:#FFFFFF;background:linear-gradient(160deg,var(--accent-hi),var(--accent) 60%,#C2185B);
}
.warn-ico .ico{width:21px;height:21px}
.warn strong{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em}
.warn p{color:var(--ash);font-size:.9rem;margin-top:5px}

/* =========================================================
   ASSURANCE CARDS
   ========================================================= */
.grid-4{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:clamp(40px,5vw,58px);
}
.card{
  position:relative;overflow:hidden;
  border:1px solid var(--hair);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--slab),rgba(20,13,29,.3));
  padding:28px 24px 26px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(251,43,114,.16) 48%,transparent 64%);
  transform:translateX(-130%);
  transition:transform .85s cubic-bezier(.2,.8,.2,1);
}
.card:hover::after{transform:translateX(130%)}
.card:hover .card-ico{scale:1.08;background:rgba(251,43,114,.14)}
.card-ico{transition:scale .3s cubic-bezier(.2,.8,.2,1),background .3s}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--accent-hair);
  box-shadow:0 32px 60px -38px rgba(251,43,114,.6);
}
.card-ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--accent-hair);color:var(--accent);
  background:rgba(251,43,114,.07);margin-bottom:20px;
}
.card-ico .ico{width:21px;height:21px}
.card h3{font-size:1.08rem;margin-bottom:9px}
.card p{color:var(--ash);font-size:.91rem}

/* =========================================================
   UTILITY
   ========================================================= */
.util-in{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(36px,6vw,80px);align-items:center;
}
.util-list{margin-top:clamp(30px,4vw,42px);display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.util-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:22px 0;border-top:1px solid var(--hair);
}
.util-list li>.ico{width:19px;height:19px;color:var(--accent);margin-top:3px}
.util-list h4{font-size:.98rem;font-weight:600;margin-bottom:2px}
.util-list p{color:var(--ash);font-size:.87rem;line-height:1.5}

/* the minted chip */
.util-art{display:grid;place-items:center}
.chip{
  position:relative;width:min(330px,100%);aspect-ratio:1;border-radius:26px;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#231732,#0D0814 62%);
  border:1px solid var(--hair-2);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
.chip-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(251,43,114,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(251,43,114,.14) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
}
.chip-halo{
  position:absolute;width:66%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(251,43,114,.42),transparent 66%);
  filter:blur(26px);
  animation:haloBreathe 5.5s ease-in-out infinite;
}
@keyframes haloBreathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.18);opacity:1}}
.chip-logo{
  position:relative;width:46%;height:auto;border-radius:50%;
  filter:drop-shadow(0 14px 34px rgba(251,43,114,.6));
  animation:tilt 9s ease-in-out infinite;
}
@keyframes tilt{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-12px) rotate(3deg)}
}
.chip-label{
  position:absolute;bottom:22px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;color:var(--ash-2);
}

/* =========================================================
   TOKENOMICS
   Three blocks stacked: identity, live supply, allocation.
   The allocation palette walks accent -> violet so the bar and
   the row dots read as one scale rather than four random hues.
   ========================================================= */
.tk-id,.tk-live,.tk-alloc{
  border:1px solid var(--hair);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--slab),rgba(20,13,29,.3));
}
.tk-id{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,3vw,40px);align-items:center;
  padding:clamp(24px,3vw,34px);
  margin-top:clamp(40px,5vw,58px);
}
.tk-live,.tk-alloc{margin-top:18px}

.tk-label{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash-2);display:flex;align-items:center;gap:8px;
}
.tk-label .ico{width:14px;height:14px;color:var(--accent)}
.tk-mono{font-family:var(--mono)!important;letter-spacing:.02em}

/* ---------- identity ---------- */
.tk-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 18px}
.tk-spec dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash-2);margin-bottom:8px;
}
.tk-spec dd{
  display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--pearl);
}
.tk-contract{
  border-left:1px solid var(--hair);padding-left:clamp(24px,3vw,40px);
}
.tk-contract .addr{margin-top:12px}
/* 42 hex characters have to clear the copy button on one line, or the
   address breaks mid-hash and stops being checkable at a glance */
.tk-contract .addr code{color:var(--accent-hi);font-size:.725rem}
.tk-out{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash);transition:color .2s;
}
.tk-out .ico{width:15px;height:15px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.tk-out:hover{color:var(--accent-text)}
.tk-out:hover .ico{transform:translateX(4px)}

/* ---------- live supply ---------- */
.tk-meters{display:grid;grid-template-columns:repeat(3,1fr)}
.tk-meter{
  padding:clamp(24px,3vw,32px);
  border-right:1px solid var(--hair);
}
.tk-meter:last-child{border-right:none}
.tk-meter-key{background:linear-gradient(180deg,rgba(251,43,114,.07),transparent 70%)}
.tk-num{
  display:block;margin-top:16px;
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(2rem,4vw,3rem);line-height:1;
  color:var(--pearl);
  font-variant-numeric:tabular-nums;
}
.tk-meter-key .tk-num{color:var(--accent-hi)}
.tk-sub{
  margin-top:12px;color:var(--ash);font-size:.85rem;
  font-family:var(--mono);letter-spacing:.01em;
}

/* provenance chip — says where the number came from, every time */
.tk-src{
  font-size:.55rem;letter-spacing:.16em;padding:3px 7px;border-radius:5px;
  border:1px solid var(--hair-2);color:var(--ash-2);background:rgba(0,0,0,.3);
}
.tk-src.live{color:var(--ok);border-color:rgba(79,214,160,.4);background:rgba(79,214,160,.09)}
.tk-src.declared{color:var(--accent-text);border-color:var(--accent-hair);background:rgba(251,43,114,.08)}
.tk-src.stale{color:var(--off);border-color:rgba(255,107,132,.4);background:rgba(255,107,132,.08)}

.tk-live-foot{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  padding:18px clamp(24px,3vw,32px);
  border-top:1px solid var(--hair);background:rgba(0,0,0,.24);
}
.tk-status{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash);
}
.tk-status.err{color:var(--off)}
.tk-status.err .pulse{background:var(--off);animation:none;box-shadow:none}
.tk-endpoints{
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ash-2);
}
.tk-endpoints a{transition:.2s}
.tk-endpoints code{
  padding:4px 8px;border-radius:6px;
  border:1px solid var(--hair);background:rgba(0,0,0,.4);color:var(--ash);
}
.tk-endpoints a:hover code{color:var(--accent-hi);border-color:var(--accent-hair)}

/* ---------- allocation ---------- */
.tk-alloc{padding:clamp(24px,3vw,34px)}
.tk-split-h{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tk-label-r{color:var(--ash)}

.s-lp{--c:#FB2B72;--c2:#FF86AF}
.s-team{--c:#D02A87}
.s-adv{--c:#A32EAF}
.s-inv{--c:#7B3BE8}

.tk-bar{
  display:flex;gap:3px;height:14px;margin-top:18px;
  border-radius:99px;overflow:hidden;
}
.tk-seg{
  width:var(--w);background:var(--c);
  box-shadow:0 0 18px -4px var(--c);
  transform:scaleX(0);transform-origin:left;
  transition:transform .95s cubic-bezier(.2,.8,.2,1);
}
.tk-alloc.in .tk-seg{transform:scaleX(1)}
.tk-seg.s-lp{transition-delay:.1s}
.tk-seg.s-team{transition-delay:.2s}
.tk-seg.s-adv{transition-delay:.3s}
.tk-seg.s-inv{transition-delay:.4s}

.tk-rows{margin-top:8px}
.tk-rows li{
  display:grid;
  grid-template-columns:10px minmax(150px,1fr) 62px 130px 104px minmax(0,1.4fr);
  gap:16px;align-items:center;
  padding:19px 0;border-bottom:1px solid var(--hair);
}
.tk-rows li:last-child{border-bottom:none}
.tk-dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.tk-key{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:.98rem;color:var(--pearl);
}
.tk-key .ico{width:17px;height:17px;color:var(--ash);flex:none}
.tk-pct{
  font-family:var(--display);font-weight:800;font-size:1.15rem;
  letter-spacing:-.02em;color:var(--accent-hi);font-variant-numeric:tabular-nums;
}
.tk-amt{
  font-family:var(--mono);font-size:.82rem;color:var(--ash);
  font-variant-numeric:tabular-nums;
}
.tk-state{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;
}
.tk-state::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.tk-state.on{color:var(--ok)}
.tk-state.on::before{background:var(--ok);box-shadow:0 0 9px var(--ok)}
.tk-state.off{color:var(--ash-2)}
.tk-state.off::before{background:var(--ash-2)}
.tk-wal{display:flex;align-items:center;gap:8px;min-width:0}
/* Never ellipsis an address: a clipped hash still reads as a complete one,
   which is the exact mistake this page warns people about. It wraps instead,
   and sits on one line at anything above the narrow breakpoint. */
.tk-wal code{
  font-family:var(--mono);font-size:.72rem;color:var(--ash-2);
  word-break:break-all;
}
.tk-wal .copy{width:26px;height:26px}
.tk-wal .copy .ico{width:14px;height:14px}
.tk-foot{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--hair);
  color:var(--ash-2);font-size:.85rem;line-height:1.6;max-width:78ch;
}

/* =========================================================
   PHASES (an actual sequence — numbering earns its place)
   ========================================================= */
.phases{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin-top:clamp(44px,5vw,64px);
}
.phases li{
  padding:30px 22px 6px 0;
  border-top:1px solid var(--hair);
  position:relative;
}
.phases li::before{
  content:"";position:absolute;top:-1px;left:0;width:44px;height:1px;background:var(--accent);
  box-shadow:0 0 10px rgba(251,43,114,.8);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s;
}
.phases li.in::before{transform:scaleX(1)}
.phases li+li{padding-left:22px}
.phases li+li::before{left:22px}
.ph-n{
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  color:var(--accent);margin-bottom:16px;
}
.phases h4{font-size:1.06rem;margin-bottom:8px}
.phases p{color:var(--ash);font-size:.87rem;line-height:1.55}

/* =========================================================
   STATS BAND
   ========================================================= */
.stats-band{padding-block:clamp(20px,3vw,32px)}
.stats{
  display:grid;grid-template-columns:repeat(5,1fr);
  border:1px solid var(--hair);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(20,17,32,.7),rgba(10,8,16,.4));
  overflow:hidden;
}
.stats>div{
  padding:30px 24px;text-align:center;
  border-right:1px solid var(--hair);
}
.stats>div:last-child{border-right:none}
.stats strong{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,2.4vw,1.95rem);letter-spacing:-.03em;
  color:var(--accent-hi);
}
.stats span{
  display:block;margin-top:8px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash-2);
}

/* =========================================================
   COMMUNITY CTA
   ========================================================= */
.cta{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,52px);align-items:center;
  border:1px solid var(--accent-hair);border-radius:26px;
  background:var(--slab);
  padding:clamp(30px,4.4vw,56px);
  overflow:hidden;
}
/* banner artwork */
.cta::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("assets/banner.jpg") center 75%/cover no-repeat;
  /* softened so the plate reads as depth, not as a second cat competing
     with the logo mark that sits on top of it */
  filter:saturate(.9) brightness(.82) blur(3px);
  transform:scale(1.1);
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.cta:hover::before{transform:scale(1.15)}
/* scrim: heaviest over the copy column, lifting toward the art */
.cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(9,6,15,.95) 0%, rgba(9,6,15,.9) 32%,
      rgba(9,6,15,.66) 58%, rgba(9,6,15,.44) 100%),
    linear-gradient(180deg, rgba(9,6,15,.4) 0%, transparent 38%, rgba(9,6,15,.55) 100%),
    linear-gradient(150deg, rgba(251,43,114,.1), transparent 60%);
}
.cta .eyebrow{color:var(--accent-hi)}   /* base accent drops to 3.8:1 over the plate */
.cta h2{font-size:clamp(1.7rem,3.1vw,2.4rem);margin-top:14px}
.cta .lead{color:var(--ash);margin-top:16px;max-width:52ch}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.cta-art{position:relative;display:grid;place-items:center;min-height:230px}
.cta-ring{position:absolute;border-radius:50%;aspect-ratio:1}
.cta-ring.r1{
  width:62%;border:1px solid var(--accent-hair);
  box-shadow:0 0 70px rgba(251,43,114,.22) inset;
  animation:spin 26s linear infinite;
}
.cta-ring.r1::after{
  content:"";position:absolute;top:-4px;left:50%;margin-left:-3.5px;
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px rgba(251,43,114,1);
}
.cta-ring.r2{
  width:82%;border:1px dashed rgba(251,43,114,.28);
  animation:spin 38s linear infinite reverse;
}
.cta-ring.r3{
  width:100%;border:1px solid rgba(255,255,255,.05);
  animation:ripple 4.5s ease-out infinite;
}
@keyframes ripple{
  0%{transform:scale(.72);opacity:.9}
  100%{transform:scale(1.15);opacity:0}
}
.cta-logo{
  position:relative;width:44%;height:auto;border-radius:50%;
  filter:drop-shadow(0 16px 40px rgba(251,43,114,.65));
  animation:bob 6s ease-in-out infinite;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin-top:clamp(38px,4.6vw,54px)}
.faq-col{display:flex;flex-direction:column}
.q{border-top:1px solid var(--hair)}
.faq-col:last-child .q:last-child,
.faq-col:first-child .q:last-child{border-bottom:1px solid var(--hair)}
.q-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 2px;text-align:left;
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.015em;
  transition:color .2s;
}
.q-btn .ico{width:18px;height:18px;color:var(--accent);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.q-btn:hover{color:var(--accent)}
.q.open .q-btn .ico{transform:rotate(135deg)}
.q-a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.8,.2,1)}
.q-a p{color:var(--ash);font-size:.93rem;padding:0 40px 24px 2px}

/* =========================================================
   FOOTER — "rooftop"
   The plate is a dusk skyline: dark sky up top carries the type,
   the lit city is left clear of text in a band above the legal bar.
   ========================================================= */
.ftr{
  position:relative;isolation:isolate;
  margin-top:clamp(40px,5vw,72px);
  padding-top:clamp(46px,5.5vw,74px);
}
/* glowing top edge */
.ftr::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-hair) 22%,var(--accent) 50%,var(--accent-hair) 78%,transparent);
  opacity:.75;
}

.ftr-sky{position:absolute;inset:0;z-index:-1;overflow:hidden}
.ftr-plate{
  position:absolute;inset:0;
  background:url("assets/footer.jpg") center bottom/cover no-repeat;
  filter:brightness(.62) saturate(1.05);
}
.ftr-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      var(--void) 0%, rgba(9,6,15,.94) 10%, rgba(9,6,15,.9) 40%,
      rgba(9,6,15,.82) 58%, rgba(9,6,15,.4) 76%, rgba(9,6,15,.24) 90%,
      rgba(9,6,15,.5) 100%),
    linear-gradient(90deg, rgba(9,6,15,.5), transparent 34%, transparent 66%, rgba(9,6,15,.4));
}
/* echoes the moon in the plate */
.ftr-moon{
  position:absolute;top:6%;right:9%;width:min(320px,34vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,134,175,.3),transparent 62%);
  filter:blur(24px);
  animation:haloBreathe 7s ease-in-out infinite;
}

/* ---------- the ask ---------- */
.ftr-call{
  position:relative;
  display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,60px);
  align-items:end;
  padding-bottom:clamp(34px,4vw,50px);
  border-bottom:1px solid var(--hair);
}
.ftr-call h3{
  font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.025em;margin-top:12px;
}
.ftr-call-note{color:var(--ash);font-size:.92rem;margin-top:12px;max-width:46ch}

.ftr-form{min-width:min(400px,100%)}
.field{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--hair-2);border-radius:var(--r-md);
  background:rgba(9,6,15,.62);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  padding:7px 7px 7px 16px;
  transition:border-color .25s,box-shadow .25s;
}
.field:focus-within{border-color:var(--accent-hair);box-shadow:0 0 0 4px rgba(251,43,114,.12)}
.field input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  font-family:var(--mono);font-size:.84rem;color:var(--pearl);
}
.field input::placeholder{color:var(--ash-2)}
.news-msg{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--ok);
  margin-top:10px;min-height:1.2em;
}
.news-msg.err{color:var(--off)}

/* ---------- directory ---------- */
.ftr-in{
  position:relative;
  display:grid;grid-template-columns:1.5fr .8fr .8fr 1.2fr;
  gap:clamp(24px,3.4vw,44px);
  padding-block:clamp(38px,4.6vw,58px);
}
.ftr-brand p{color:var(--ash);font-size:.9rem;margin:18px 0 22px;max-width:34ch}
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:100px;
  border:1px solid var(--hair);color:var(--ash);
  background:rgba(255,255,255,.03);
  font-size:.84rem;font-weight:500;
  transition:.24s;
}
.social a .ico{width:15px;height:15px}
.social a:hover{
  color:var(--pearl);border-color:var(--accent-hair);
  background:rgba(251,43,114,.12);transform:translateY(-2px);
}

.ftr-col h5{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-weight:500;font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ash-2);margin-bottom:18px;
}
.ftr-col h5::before{content:"";width:14px;height:1px;background:var(--accent);flex:none}
.ftr-col a{
  display:block;color:var(--ash);font-size:.91rem;padding:6px 0;
  transition:color .2s,transform .2s;
}
.ftr-col a:hover{color:var(--accent-text);transform:translateX(3px)}

.ftr-status{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pearl);margin-bottom:16px;
}
.ftr-facts{display:grid;gap:11px}
.ftr-facts>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.ftr-facts dt{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2);
}
.ftr-facts dd{font-size:.86rem;font-weight:600;color:var(--ash)}
.ftr-facts dd.addr-short{font-family:var(--mono);font-size:.8rem;color:var(--accent-text)}

/* ---------- the view: plate left clear of type ---------- */
.ftr-view{height:clamp(120px,17vw,230px)}

/* ---------- legal ---------- */
.ftr-base{
  position:relative;
  border-top:1px solid var(--hair);
  background:rgba(9,6,15,.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.ftr-base-in{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:20px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ash-2);
}
.ftr-note{color:var(--accent-text);opacity:.8}
.ftr-up{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--ash);transition:color .2s;
}
.ftr-up .ico{width:14px;height:14px;transition:transform .25s}
.ftr-up:hover{color:var(--accent-text)}
.ftr-up:hover .ico{transform:translateY(-3px)}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.totop{
  position:fixed;right:24px;bottom:24px;z-index:70;
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  color:#FFFFFF;background:linear-gradient(160deg,var(--accent-hi),var(--accent) 55%,#C2185B);
  box-shadow:0 14px 34px -14px rgba(251,43,114,.85);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:.3s cubic-bezier(.2,.8,.2,1);
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop.tucked{opacity:0;transform:translateY(14px) scale(.9);pointer-events:none}
.totop .ico{width:19px;height:19px}

/* =========================================================
   REVEAL
   ========================================================= */
[data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);
}
[data-reveal].in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .grid-4{grid-template-columns:1fr 1fr}
  .phases{grid-template-columns:repeat(2,1fr)}
  .phases li+li{padding-left:0}
  .phases li:nth-child(even){padding-left:22px}
  .phases li::before,.phases li+li::before{left:0}
  .phases li:nth-child(even)::before{left:22px}
  /* six spec pairs read better 2-up than cramped 3-up here */
  .tk-id{grid-template-columns:1fr;gap:26px}
  .tk-contract{border-left:none;border-top:1px solid var(--hair);padding-left:0;padding-top:24px}
  .tk-meters{grid-template-columns:1fr 1fr}
  .tk-meter:nth-child(2){border-right:none}
  .tk-meter:last-child{grid-column:1/-1;border-top:1px solid var(--hair)}
  /* the address column is the first thing worth dropping to a second line */
  .tk-rows li{
    grid-template-columns:10px minmax(140px,1fr) 58px 120px 100px;
    row-gap:10px;
  }
  .tk-wal{grid-column:2/-1}

  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div{border-bottom:1px solid var(--hair)}
  .stats>div:nth-child(even){border-right:none}
  .stats>div:last-child{grid-column:1/-1;border-bottom:none}
  .ftr-in{grid-template-columns:1fr 1fr}
  .ftr-call{grid-template-columns:1fr;align-items:start}
  /* stacked columns reach further down the plate, so hold the scrim
     dark until the view band actually starts */
  .ftr-scrim{
    background:
      linear-gradient(180deg,
        var(--void) 0%, rgba(9,6,15,.95) 8%, rgba(9,6,15,.93) 58%,
        rgba(9,6,15,.9) 74%, rgba(9,6,15,.48) 87%, rgba(9,6,15,.3) 95%,
        rgba(9,6,15,.55) 100%),
      linear-gradient(90deg, rgba(9,6,15,.4), transparent 40%, rgba(9,6,15,.4));
  }
}

@media (max-width:900px){
  .nav{
    display:none;position:absolute;top:calc(100% + 8px);left:4%;right:4%;
    flex-direction:column;gap:2px;
    background:rgba(13,11,20,.97);backdrop-filter:blur(20px);
    border:1px solid var(--hair);border-radius:var(--r-md);
    padding:14px 18px;
  }
  .nav.open{display:flex}
  .nav a{padding:11px 0;font-size:.98rem}
  .nav a::after{display:none}
  .burger{display:grid}
  .hdr-in{position:relative}
  .hdr-act .btn-sm{display:none}

  .ledger{grid-template-columns:1fr}
  .rail-arrow{flex-direction:row;min-width:0;padding:2px 0}
  .rail-arrow .ico{transform:rotate(90deg)}
  .rail-track{width:0;height:0}
  .rail-spark{display:none}   /* the rail is vertical here; a horizontal spark reads wrong */

  .util-in{grid-template-columns:1fr;gap:40px}
  .util-art{order:-1}
  .util-list{grid-template-columns:1fr;gap:0}
  .sec-h.left{max-width:none}

  .cta{grid-template-columns:1fr;text-align:center}
  .cta::before{background-position:center center}
  .cta::after{
    background:
      linear-gradient(180deg, rgba(9,6,15,.6) 0%, rgba(9,6,15,.86) 46%, rgba(9,6,15,.94) 100%),
      linear-gradient(150deg, rgba(251,43,114,.1), transparent 60%);
  }
  .cta .lead{margin-inline:auto}
  .cta-btns{justify-content:center}
  .cta-art{order:-1}
  .lead.left{text-align:center}

  .faq{grid-template-columns:1fr;gap:0}
  .faq-col:first-child .q:last-child{border-bottom:none}
}

@media (max-width:600px){
  body{font-size:16px}

  /* rail folds to a 2x2 spec block instead of a squeezed single row */
  .rail{flex-wrap:wrap}
  .rail>div{
    flex:1 1 50%;padding:14px 16px;
    border-right:1px solid var(--hair);
    border-bottom:1px solid var(--hair);
  }
  .rail>div:nth-child(even){border-right:none}
  .rail>div:nth-child(n+3){border-bottom:none}
  .rail dd{font-size:1rem}
  .rail dd.addr-short{font-size:.8rem}
  .tag{font-size:.62rem;letter-spacing:.14em;padding:8px 14px 8px 12px}
  .mark{width:40px;height:40px}
  .cue{display:none}

  .tk-spec{grid-template-columns:1fr 1fr}
  .tk-meters{grid-template-columns:1fr}
  .tk-meter{border-right:none;border-top:1px solid var(--hair)}
  .tk-meter:first-child{border-top:none}
  .tk-live-foot{flex-direction:column;align-items:flex-start}
  /* one row per allocation, label over figures */
  .tk-rows li{grid-template-columns:10px 1fr auto;gap:12px 14px}
  .tk-pct{justify-self:end}
  .tk-amt,.tk-state{grid-column:2/-1}
  .tk-amt{margin-top:-4px}

  .grid-4{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr}
  .phases li,.phases li:nth-child(even){padding-left:0}
  .phases li::before,.phases li:nth-child(even)::before{left:0}
  .stats{grid-template-columns:1fr}
  .stats>div,.stats>div:nth-child(even){border-right:none}
  .ftr-in{grid-template-columns:1fr;gap:34px}
  .ftr-form{min-width:0}
  .ftr-view{height:clamp(90px,26vw,150px)}
  .ftr-base-in{justify-content:center;text-align:center}
  .totop{right:16px;bottom:16px}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .phases li::before{transform:scaleX(1)}
  .tk-seg{transform:scaleX(1)}
  .hero-in>*{opacity:1;transform:none}
  .dust,.beam,.glyphs{display:none}
  .ticker-track{transform:none}
}