/* identiFI.
   Blank nametags in the dark. Violet light. Every coin wears its name.
   Layout is its own: full-bleed hero, offset splits, one centred press panel. */

:root{
  /* Pure black ground, one gradient across the whole spectrum of the mark. */
  --bed:#000000;
  --bed-2:#07070B;
  --glass:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.19);
  --fg:#FFFFFF;
  --muted:#9C9CAA;
  --dim:#64646F;

  /* the brand ramp, magenta through to spring green */
  --g1:#FF2EC4;
  --g2:#A855F7;
  --g3:#4F7BFF;
  --g4:#22D3EE;
  --g5:#2BF5A9;
  --grad:linear-gradient(100deg,var(--g1) 0%,var(--g2) 26%,var(--g3) 52%,var(--g4) 76%,var(--g5) 100%);

  --ink:#A855F7;
  --ink-2:#22D3EE;
  --ink-deep:#6D28D9;
  --green:#2BF5A9;

  --d:"Inter","SF Pro Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:"Geist Mono","SFMono-Regular",ui-monospace,Menlo,monospace;
  --page:1240px;
  --r:14px;
}

/* text painted with the brand ramp */
.grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bed);color:var(--fg);
  font-family:var(--d);font-size:17px;line-height:1.6;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img,svg{max-width:100%}
code{font-family:var(--m);font-size:.92em;color:var(--ink-2)}
.wrap{max-width:var(--page);margin:0 auto;padding:0 30px}

/* ---- header: brand left, nav beside it, action right ---------------------- */
header{
  position:sticky;top:0;z-index:60;background:rgba(7,5,14,.7);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.hbar{display:flex;align-items:center;gap:38px;height:76px;max-width:var(--page);margin:0 auto;padding:0 30px}
.brand{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  line-height:1;flex:0 0 auto;
}
.brand .mk{width:30px;height:30px;flex:0 0 30px;display:block;object-fit:contain}
.wm{
  font-size:20px;font-weight:700;letter-spacing:-.035em;line-height:1;
  display:inline-flex;align-items:baseline;text-decoration:none;white-space:nowrap;
}
.wm b{font-weight:700;color:var(--fg)}
.wm i{
  font-style:normal;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
nav{display:flex;gap:28px;font-size:14.5px;color:var(--muted);font-weight:450;line-height:1}
nav a{text-decoration:none;transition:color .15s}
nav a:hover{color:var(--fg)}
.hbar .cta{margin-left:auto}
@media(max-width:900px){nav{display:none}}

/* ---- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  font-family:var(--d);font-size:15px;font-weight:550;letter-spacing:-.01em;
  padding:13px 24px;border-radius:10px;text-decoration:none;transition:.16s;white-space:nowrap;
}
.btn-ink{
  background:var(--grad);background-size:160% 100%;background-position:0 0;
  color:#05010C;font-weight:650;box-shadow:0 10px 32px rgba(168,85,247,.32);
  transition:background-position .4s ease,transform .16s ease,box-shadow .16s ease;
}
.btn-ink:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:0 12px 40px rgba(34,211,238,.4)}
.btn-light{background:#fff;color:#12021F;font-weight:600}
.btn-light:hover{background:#EDE9FE;transform:translateY(-1px)}
.btn-ghost{background:var(--glass);color:var(--fg);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--glass-2);border-color:rgba(192,132,252,.5)}
.btn:disabled{background:rgba(255,255,255,.06);color:var(--dim);cursor:default;border-color:transparent;transform:none;box-shadow:none}
.btn .ar{transition:transform .16s}
.btn:hover .ar{transform:translateX(3px)}

/* ---- hero: full bleed art, content sitting low ----------------------------- */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;padding:140px 0 54px;overflow:hidden}
.hero-art{
  position:absolute;inset:0;background:var(--bed) center/cover no-repeat;z-index:0;
  animation:drift 46s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1.06) translate3d(-1.2%,0,0)}to{transform:scale(1.14) translate3d(1.2%,-1.4%,0)}}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--bed) 2%,rgba(7,5,14,.86) 34%,rgba(7,5,14,.3) 70%,rgba(7,5,14,.6) 100%),
    linear-gradient(0deg,var(--bed) 1%,rgba(7,5,14,.1) 44%,rgba(7,5,14,.55) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%}

h1{
  font-size:clamp(42px,6.4vw,84px);line-height:.99;letter-spacing:-.045em;
  font-weight:700;margin:0 0 26px;max-width:15ch;
}
h1 .fade{background:linear-gradient(96deg,#FFF 20%,#A9A9BC 98%);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:18.5px;color:var(--muted);max-width:50ch;margin:0 0 32px;line-height:1.62}
.lede b{color:var(--fg);font-weight:550}

/* the checker, a wide bar rather than a pill */
.stick{
  background:rgba(12,8,24,.72);border:1px solid var(--line-2);border-radius:12px;
  padding:7px 7px 7px 20px;display:flex;align-items:center;gap:8px;max-width:620px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 22px 60px rgba(0,0,0,.6);
}
.stick:focus-within{border-color:var(--ink);box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 0 4px rgba(168,85,247,.12)}
.stick input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font-family:var(--m);font-size:19px;padding:14px 0}
.stick input::placeholder{color:var(--dim)}
.tld{font-family:var(--m);font-size:19px;color:var(--dim)}
.stick button{font-family:var(--d);font-size:14.5px;font-weight:650;background:var(--grad);color:#05010C;border:0;border-radius:8px;padding:14px 24px;cursor:pointer}
.stick button:hover{filter:brightness(1.12)}
.stick button:disabled{background:rgba(255,255,255,.08);color:var(--dim);cursor:default}
.verdict{font-family:var(--m);font-size:13.5px;margin:15px 0 0;min-height:22px;color:var(--muted)}
.verdict .free{color:var(--green)}
.verdict .taken{color:var(--muted)}
.verdict .addr{color:var(--dim);font-size:12px}
.verdict .takeit{color:var(--ink-2);text-decoration:none;border-bottom:1px solid rgba(192,132,252,.45);margin-left:9px;white-space:nowrap;font-family:var(--d);font-size:13.5px;font-weight:550}
.verdict .takeit:hover{color:#fff}

/* one horizontal stat strip, hard dividers */
.stats{display:flex;flex-wrap:wrap;gap:0;margin-top:56px;border-top:1px solid var(--line)}
.stat{flex:1 1 220px;padding:24px 28px 4px 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat:not(:first-child){padding-left:28px}
.stat h3{margin:0 0 5px;font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.stat p{margin:0;font-size:14px;color:var(--dim)}
.stat .n{font-family:var(--m);font-size:11.5px;color:var(--ink);letter-spacing:.14em;display:block;margin-bottom:10px}
@media(max-width:760px){.stat{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line);padding-left:0!important}}

/* ---- sections -------------------------------------------------------------- */
section{padding:118px 0;position:relative}
.sec-line{border-top:1px solid var(--line)}
.num{
  font-family:var(--m);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 18px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
h2{font-size:clamp(30px,4vw,50px);line-height:1.06;letter-spacing:-.04em;font-weight:700;margin:0 0 20px;max-width:17ch}
h2 .fade{background:linear-gradient(96deg,#FFF 22%,#A9A9BC 98%);-webkit-background-clip:text;background-clip:text;color:transparent}
.body{font-size:17px;color:var(--muted);max-width:56ch;line-height:1.66}
.body p{margin:0 0 16px}
.body b{color:var(--fg);font-weight:550}

/* offset split: narrow label column, wide content, flipped on alternate rows */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:66px;align-items:center}
.split.flip > div:first-child{order:2}
@media(max-width:940px){
  .split{grid-template-columns:1fr;gap:40px}
  .split.flip > div:first-child{order:0}
  section{padding:88px 0}
}
.figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative;line-height:0}
.figure img{width:100%;display:block}
.figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,5,14,.55))}

/* ---- cards ---------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:54px}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:.18s}
.card:hover{background:var(--glass-2);border-color:var(--line-2);transform:translateY(-3px)}
.card svg{width:22px;height:22px;color:var(--ink);margin-bottom:16px;display:block}
.card h3{margin:0 0 8px;font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.card p{margin:0;font-size:14.5px;color:var(--dim);line-height:1.6}

/* ---- the transaction ------------------------------------------------------- */
.tx{font-family:var(--m);font-size:13px;line-height:1.78;background:var(--bed-2);border:1px solid var(--line);border-radius:var(--r);padding:26px;color:var(--muted);overflow-x:auto}
.tx .ix{color:var(--fg)}
.tx .hl{color:var(--ink-2)}
.tx .cm{color:var(--dim)}
.tx hr{border:0;border-top:1px dashed var(--line-2);margin:14px 0}

/* ---- price tags ------------------------------------------------------------ */
.slugs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:12px}
@media(max-width:860px){.slugs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.slugs{grid-template-columns:1fr}}
.slug{
  position:relative;background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:10px;padding:34px 20px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.slug::before{
  content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:26px;height:6px;border-radius:3px;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 1px rgba(167,139,250,.28);
}
.slug.hot{border-color:var(--line-2);background:linear-gradient(165deg,rgba(168,85,247,.16),rgba(168,85,247,.04))}
.slug dt{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;color:var(--dim);margin:0 0 9px;text-transform:uppercase}
.slug dd{margin:0;font-size:26px;font-weight:650;letter-spacing:-.035em}
.slug dd small{display:block;font-size:12px;color:var(--dim);font-weight:400;letter-spacing:0;margin-top:4px}

/* ---- the band: full bleed wall + pull quote -------------------------------- */
.band{position:relative;overflow:hidden;border-block:1px solid var(--line)}
.band-art{position:absolute;inset:0;background:var(--bed) center/cover no-repeat}
.band-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,5,14,.94) 20%,rgba(7,5,14,.55) 62%,rgba(7,5,14,.9) 100%)}
.band-in{position:relative;z-index:2;padding:132px 0}
.quote{font-size:clamp(26px,3.4vw,44px);line-height:1.14;letter-spacing:-.04em;font-weight:650;max-width:19ch;margin:0 0 24px}
.quote .fade{background:linear-gradient(96deg,#FFF 22%,#A9A9BC 98%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- the press: one centred panel ----------------------------------------- */
.panel{
  border:1px solid var(--line-2);border-radius:18px;overflow:hidden;background:var(--bed-2);
  box-shadow:0 40px 110px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  display:grid;grid-template-columns:1.08fr .92fr;
}
@media(max-width:1000px){.panel{grid-template-columns:1fr}}
.panel-l{padding:34px}
.panel-r{padding:34px;border-left:1px solid var(--line);background:rgba(168,85,247,.03)}
@media(max-width:1000px){.panel-r{border-left:0;border-top:1px solid var(--line)}}
.form{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.02)}
.row{display:grid;grid-template-columns:104px 1fr;align-items:center;border-bottom:1px solid var(--line)}
.row:last-of-type{border-bottom:0}
.row label{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;padding:0 15px;border-right:1px solid var(--line);align-self:stretch;display:flex;align-items:center}
.row input{background:none;border:0;outline:0;color:var(--fg);width:100%;min-width:0;font-family:var(--m);font-size:15px;padding:15px 17px}
.row input::placeholder{color:var(--dim)}
.row input:focus{background:rgba(168,85,247,.06)}
.row .suffix{font-family:var(--m);font-size:13px;color:var(--dim);padding-right:17px;white-space:nowrap}
.row.has-suffix{grid-template-columns:104px 1fr auto}
@media(max-width:560px){.row,.row.has-suffix{grid-template-columns:1fr}.row label{border-right:0;border-bottom:1px solid var(--line);padding:10px 15px}.panel-l,.panel-r{padding:24px}}
.press-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.status{font-size:14.5px;margin:16px 0 0;min-height:22px;color:var(--muted)}
.status .free{color:var(--green)}
.status .taken{color:var(--ink-2)}
.status a{color:var(--muted)}
.steps{list-style:none;padding:0;margin:16px 0 0;font-size:13.5px}
.steps li{padding:7px 0 7px 26px;position:relative;color:var(--dim);line-height:1.5}
.steps li::before{position:absolute;left:0;top:7px;font-family:var(--m);font-size:12px;content:"·"}
.steps li.on{color:var(--fg)}
.steps li.on::before{content:"▸";color:var(--ink)}
.steps li.done{color:var(--muted)}
.steps li.done::before{content:"✓";color:var(--green)}
.steps li.err{color:var(--ink-2)}
.steps li.err::before{content:"✗";color:var(--ink-2)}
.receipt{font-family:var(--m);font-size:12.5px;line-height:1.8;color:var(--muted)}
.receipt h3{font-size:10.5px;letter-spacing:.16em;color:var(--dim);margin:0 0 15px;font-weight:500;text-transform:uppercase}
.receipt dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0}
.receipt dt{color:var(--dim);white-space:nowrap}
.receipt dd{margin:0;color:var(--muted);word-break:break-all}
.receipt .k{color:var(--fg)}
.receipt .hl{color:var(--ink-2)}
.receipt hr{border:0;border-top:1px dashed var(--line-2);margin:15px 0}

/* ---- checklist ------------------------------------------------------------- */
.list{list-style:none;padding:0;margin:0}
.list li{padding:15px 0 15px 32px;border-bottom:1px solid var(--line);position:relative;color:var(--muted);font-size:15.5px;line-height:1.55}
.list li:last-child{border-bottom:0}
.list li b{color:var(--fg);font-weight:550}
.list li::before{position:absolute;left:0;top:16px;font-family:var(--m);font-size:12px}
.list li.yes::before{content:"✓";color:var(--green)}
.list li.no::before{content:"\00B7";color:var(--dim)}

/* ---- final + footer --------------------------------------------------------- */
.final{text-align:center;padding:128px 0;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:760px;height:380px;background:radial-gradient(50% 60% at 50% 0,rgba(168,85,247,.22),rgba(34,211,238,.1) 48%,transparent 74%);pointer-events:none}
.final .wrap{position:relative;z-index:2}
.final h2{margin:0 auto 28px;max-width:15ch}
.final-sub{color:var(--dim);font-size:14px;margin-top:22px;font-family:var(--m)}
footer{border-top:1px solid var(--line);padding:44px 0 60px;color:var(--dim);font-size:14px}
.frow{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--fg)}
.fnote{margin-left:auto;font-size:13px;color:var(--dim)}
@media(max-width:760px){.fnote{margin-left:0}}

/* ---- the stage: one tag leaves the wall and comes to the front ------------- */
.stage{position:relative;height:460vh}
.stage-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.stage-wall{
  position:absolute;inset:0;overflow:hidden;background:var(--bed);
  will-change:opacity,filter,transform;transform-origin:18% 52%;
}
.stage-wall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage-wall::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,5,14,.72) 0%,rgba(7,5,14,.34) 46%,rgba(7,5,14,.86) 100%);
}
.stage-glow{
  position:absolute;z-index:2;width:900px;height:900px;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(168,85,247,.3),rgba(34,211,238,.12) 45%,transparent 70%);
  opacity:0;will-change:opacity,transform;
}

/* the tag itself */
/* The hole the tag came out of. It sits in the wall at the tag's starting pose and never
   moves, so at the top of the stage the tag covers it exactly and as the tag pulls forward
   the empty slot is revealed behind it. */
.tag-socket{
  position:absolute;z-index:2;border-radius:4px;pointer-events:none;
  background:#030208;
  /* a recess: the top lip catches a little light, the rest falls away */
  box-shadow:
    inset 0 6px 14px rgba(0,0,0,1),
    inset 0 2px 0 rgba(0,0,0,1),
    inset 0 -1px 0 rgba(176,140,255,.2),
    inset 1px 0 0 rgba(176,140,255,.09);
  opacity:0;
}
.tagcard{
  grid-area:1/1;position:relative;z-index:3;width:min(620px,88vw);
  border-radius:16px;padding:54px 46px 44px;
  /* An opaque plate. It has to be solid metal: anything translucent lets the wall read
     through it and the tag stops looking like it came out of the wall at all. */
  background:
    linear-gradient(158deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.03) 34%,rgba(255,255,255,0) 58%),
    radial-gradient(130% 90% at 16% -10%,rgba(192,132,252,.26),transparent 62%),
    linear-gradient(196deg,#2E2257 0%,#1B1436 46%,#271D4B 100%);
  border:1px solid rgba(192,132,252,.42);
  box-shadow:
    0 60px 130px rgba(0,0,0,.82),
    0 0 100px rgba(168,85,247,.22),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.05);
  will-change:transform,opacity;opacity:0;
}
/* the punch hole, so it still reads as a tag */
.tagcard::before{
  content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:64px;height:11px;border-radius:6px;background:#0A0616;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.16);
}
/* brushed grain across the face */
.tagcard::after{
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(94deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);
}
.tagcard{display:flex;align-items:center}
.tc-in{position:relative;z-index:2;width:100%}
/* a breath of movement while it sits out front */
.tagcard{animation:tagIdle 7s ease-in-out infinite}
@keyframes tagIdle{
  0%,100%{margin-top:0}
  50%{margin-top:-10px}
}
@media(prefers-reduced-motion:reduce){.tagcard{animation:none}}
.tc-num{font-family:var(--m);font-size:11.5px;letter-spacing:.22em;color:var(--ink-2);margin:0 0 16px}
.tc-h{font-size:clamp(26px,3.3vw,40px);line-height:1.08;letter-spacing:-.04em;font-weight:700;margin:0 0 16px}
.tc-b{font-size:16.5px;color:var(--muted);line-height:1.62;margin:0;max-width:44ch}
.tc-b b{color:var(--fg);font-weight:550}
.tc-act{margin-top:26px;display:none}
.tc-act.on{display:inline-flex}
.tc-fade.in{animation:tcIn .36s cubic-bezier(.2,.7,.3,1) both}
@keyframes tcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* progress pips down the side */
.stage-pips{position:absolute;right:38px;top:50%;transform:translateY(-50%);z-index:4;display:grid;gap:11px}
.stage-pips i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(167,139,250,.26);transition:.25s}
.stage-pips i.on{background:var(--ink);box-shadow:0 0 12px var(--ink);transform:scale(1.5)}
@media(max-width:860px){
  .stage{height:420vh}
  .stage-pips{right:14px}
  .tagcard{width:min(620px,92vw);padding:46px 28px 32px}
  .tc-h{font-size:clamp(23px,5.4vw,32px)}
  .tc-b{font-size:15.5px;max-width:none}
  .tc-num{font-size:10.5px;margin-bottom:13px}
}
@media(max-width:520px){
  .tagcard{padding:42px 22px 28px}
  .tc-b{font-size:14.5px}
}
/* no scroll trickery for anybody who asked for less motion */
@media(prefers-reduced-motion:reduce){
  .stage{height:auto}
  .stage-sticky{position:relative;height:auto;padding:80px 0}
  .tagcard{opacity:1!important;transform:none!important}
  .stage-wall{opacity:.18}
}