/* ==========================================================================
   NEEDLESS COIN — needless.css
   Theme: "The Needlessly Overcomplicated Machine"
   A 3D comic contraption: riveted brass plates, tilted panels floating on the
   Z axis, halftone ink, conveyor rails and far too many bolts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  --coal:   #0b0701;
  --ink:    #150e04;
  --soot:   #24190a;
  --bark:   #3a2709;
  --rust:   #9c4606;
  --amber:  #df7c07;
  --gold:   #f6a800;
  --honey:  #ffc63a;
  --sun:    #ffe08f;
  --paper:  #fdeec2;
  --cream:  #fff6e2;
  --ember:  #d33418;

  --edge: 3px;
  --hard:      10px 10px 0 var(--ink);
  --hard-sm:   6px 6px 0 var(--ink);
  --hard-gold: 8px 8px 0 var(--rust);
  --lift: 0 34px 70px rgba(0,0,0,.6);

  --rail: 74px;                 /* left conveyor rail width (desktop) */
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--coal);
  color:var(--cream);
  overflow-x:hidden;
  font-synthesis-weight:none;
}

img{ display:block; max-width:100%; }

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

/* chunky brass scrollbar */
::-webkit-scrollbar{ width:13px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--honey),var(--amber));
  border:2px solid var(--ink);
  border-radius:0;
}

/* type helpers ------------------------------------------------------------ */
.slab{ font-family:"Alfa Slab One",serif; font-weight:400; letter-spacing:.01em; }
.tall{ font-family:"Anton",sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.mono{ font-family:"Space Mono",ui-monospace,monospace; }

/* --------------------------------------------------------------------------
   3. FIXED BACKDROP  (3.png — pipes, staircases, endless yellow)
   -------------------------------------------------------------------------- */
.backdrop{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }

.backdrop__img{
  position:absolute; inset:-6%;
  background:url("../3.png") center center / cover no-repeat;
  filter:brightness(.42) saturate(1.15) contrast(1.08);
  transform:scale(1.08);
  will-change:transform;
}

/* warm ink wash so text always wins */
.backdrop__wash{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%,  rgba(246,168,0,.20), transparent 62%),
    linear-gradient(180deg, rgba(11,7,1,.86) 0%, rgba(11,7,1,.70) 38%, rgba(11,7,1,.90) 100%);
}

/* comic halftone */
.backdrop__dots{
  position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(11,7,1,.62) 1.3px, transparent 1.4px);
  background-size:7px 7px;
}

/* sunburst rays */
.backdrop__rays{
  position:absolute; left:50%; top:-30vh;
  width:190vmax; height:190vmax; transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,214,102,.075) 0deg 4deg, transparent 4deg 11deg);
  animation:spin-slow 160s linear infinite;
  opacity:.85;
}

/* film grain */
.backdrop__grain{
  position:absolute; inset:0; opacity:.16; 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'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.backdrop__vig{
  position:absolute; inset:0;
  box-shadow:inset 0 0 190px 70px rgba(11,7,1,.95);
}

@keyframes spin-slow{ to{ transform:translateX(-50%) rotate(360deg); } }

/* --------------------------------------------------------------------------
   4. SHARED COMIC FURNITURE
   -------------------------------------------------------------------------- */

/* halftone overlay for any box */
.halftone{ position:relative; }
.halftone::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.22;
  background-image:radial-gradient(rgba(21,14,4,.9) 1px, transparent 1.1px);
  background-size:5px 5px;
}

/* riveted brass plate — the site's signature surface */
.plate{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,224,143,.13), rgba(11,7,1,.30)),
    linear-gradient(135deg, #2c1e08 0%, #1a1105 48%, #2f2009 100%);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--hard), var(--lift), inset 0 2px 0 rgba(255,224,143,.18);
}
/* paper variant carries its own halftone so it never fights for ::after */
.plate--paper{
  background:
    radial-gradient(rgba(21,14,4,.16) 1px, transparent 1.1px) 0 0 / 5px 5px,
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(0,0,0,0)),
    var(--paper);
  color:var(--ink);
}

/* the rivets: four corner bolts on any .rivets element */
.rivets::before,
.rivets::after{
  content:""; position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--sun), var(--amber) 55%, var(--rust));
  box-shadow:0 0 0 2px var(--ink);
  top:9px;
}
.rivets::before{ left:9px; }
.rivets::after{ right:9px; }
.rivets-b{ position:absolute; inset:0; pointer-events:none; }
.rivets > .rivets-b::before,
.rivets > .rivets-b::after{
  content:""; position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--sun), var(--amber) 55%, var(--rust));
  box-shadow:0 0 0 2px var(--ink);
  bottom:9px;
}
.rivets > .rivets-b::before{ left:9px; }
.rivets > .rivets-b::after{ right:9px; }

/* CSS-only gear */
.cog{
  position:relative; border-radius:50%;
  background:
    radial-gradient(circle, var(--ink) 0 27%, transparent 28%),
    radial-gradient(circle, var(--honey) 0 60%, transparent 61%),
    repeating-conic-gradient(from 0deg, var(--gold) 0 9deg, transparent 9deg 22.5deg);
  box-shadow:0 0 0 2px var(--ink), 0 0 22px rgba(246,168,0,.35);
  animation:cog-turn 14s linear infinite;
}
.cog--rev{ animation-direction:reverse; }
@keyframes cog-turn{ to{ transform:rotate(360deg); } }

/* headline with stacked 3D ink shadow */
.pop{
  color:var(--cream);
  text-shadow:
     2px  2px 0 var(--ink),  4px  4px 0 var(--ink),
     6px  6px 0 var(--rust), 8px  8px 0 var(--ink),
    10px 10px 0 rgba(0,0,0,.45);
}
.pop--gold{
  color:var(--honey);
  text-shadow:
    2px 2px 0 var(--ink), 4px 4px 0 var(--ink),
    6px 6px 0 var(--rust), 8px 8px 0 var(--ink);
}
.outline-ink{
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
}

/* section eyebrow tag */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--ember); color:var(--cream);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--hard-sm);
  padding:.4rem 1rem .45rem;
  font-family:"Anton",sans-serif; letter-spacing:.22em; font-size:.72rem;
  text-transform:uppercase;
  transform:rotate(-1.4deg);
}
.eyebrow--gold{ background:var(--gold); color:var(--ink); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:.06em;
  border:var(--edge) solid var(--ink);
  box-shadow:var(--hard-sm);
  padding:.85rem 1.5rem;
  text-decoration:none; cursor:pointer; white-space:nowrap; overflow:hidden;
  transition:transform .13s ease, box-shadow .13s ease, background .2s ease;
}
.btn:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
.btn:active{ transform:translate(6px,6px); box-shadow:0 0 0 var(--ink); }

.btn--buy{
  background:linear-gradient(180deg,var(--honey),var(--amber));
  color:var(--ink);
}
.btn--buy::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%);
  transform:translateX(-130%);
  animation:sheen 4.5s ease-in-out infinite;
}
@keyframes sheen{ 0%,72%{transform:translateX(-130%)} 88%,100%{transform:translateX(130%)} }

.btn--ghost{ background:var(--soot); color:var(--cream); }
.btn--ghost:hover{ background:var(--bark); }
.btn--ember{ background:var(--ember); color:var(--cream); }
.btn--paper{ background:var(--paper); color:var(--ink); }

/* square icon button */
.ibtn{
  display:grid; place-items:center; width:44px; height:44px;
  background:var(--soot); color:var(--cream);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--hard-sm);
  transition:transform .13s ease, box-shadow .13s ease, background .2s, color .2s;
}
.ibtn:hover{
  transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink);
  background:var(--gold); color:var(--ink);
}

/* --------------------------------------------------------------------------
   6. NAV — a floating riveted control pod (not a bar)
   -------------------------------------------------------------------------- */
.navwrap{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:16px clamp(12px,3vw,28px) 0;
  perspective:900px;
}
.navpod{
  position:relative;
  margin:0 auto; max-width:1240px;
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem .7rem;
  background:
    linear-gradient(180deg, rgba(255,224,143,.16), rgba(11,7,1,.55)),
    linear-gradient(135deg,#2e2009,#170f04 55%,#31220a);
  border:var(--edge) solid var(--ink);
  box-shadow:0 8px 0 var(--ink), 0 22px 44px rgba(0,0,0,.6);
  backdrop-filter:blur(9px);
  transform-origin:50% 0%;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, padding .45s ease;
}
.navwrap.tucked .navpod{
  transform:rotateX(7deg) scale(.975);
  box-shadow:0 5px 0 var(--ink), 0 16px 34px rgba(0,0,0,.65);
  padding:.35rem .7rem;
}

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand__coin{
  width:46px; height:46px; flex:none; border-radius:50%; overflow:hidden;
  border:var(--edge) solid var(--ink);
  box-shadow:0 0 0 3px var(--cream), 0 0 24px rgba(246,168,0,.55);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.brand:hover .brand__coin{ transform:rotate(-16deg) scale(1.06); }
.brand__coin img{ width:100%; height:100%; object-fit:cover; }
.brand__l1{
  display:block; font-family:"Alfa Slab One",serif;
  font-size:1.18rem; line-height:1; color:var(--cream);
  text-shadow:2px 2px 0 var(--ink);
}
.brand__l2{
  display:block; font-family:"Anton",sans-serif; font-size:.56rem;
  letter-spacing:.42em; color:var(--honey); margin-top:3px;
}

.navlink{
  position:relative; text-decoration:none;
  font-family:"Anton",sans-serif; text-transform:uppercase;
  letter-spacing:.11em; font-size:.82rem;
  color:rgba(255,246,226,.78);
  padding:.65rem .85rem;
  transition:color .18s ease;
}
.navlink:hover{ color:var(--honey); }
.navlink::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.4rem;
  height:3px; background:var(--ember);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.navlink:hover::after{ transform:scaleX(1); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:70; display:none;
  background:rgba(11,7,1,.94); backdrop-filter:blur(6px);
  padding:96px 22px 40px;
}
.drawer.open{ display:block; }
.drawer a{
  display:block; text-decoration:none; color:var(--cream);
  font-family:"Alfa Slab One",serif; font-size:1.9rem;
  padding:.7rem 0; border-bottom:2px dashed rgba(255,198,58,.3);
}
.drawer a:hover{ color:var(--honey); }

/* --------------------------------------------------------------------------
   7. THE PERSPECTIVE ENGINE
   Every section body is a "deck" that swings up out of the Z axis as it
   enters the viewport, then locks perfectly flat so text stays razor sharp.
   -------------------------------------------------------------------------- */
.stage{ perspective:1700px; perspective-origin:50% 42%; }

.swing{
  transform-style:preserve-3d;
  transform:perspective(1500px) rotateX(11deg) translateZ(-140px) translateY(48px);
  opacity:0;
  transition:transform 1.05s cubic-bezier(.16,.84,.24,1), opacity .8s ease;
  will-change:transform,opacity;
}
.swing.is-in{ transform:none; opacity:1; }

.swing--left  { transform:perspective(1400px) rotateY(13deg)  translateZ(-120px) translateX(-40px); }
.swing--right { transform:perspective(1400px) rotateY(-13deg) translateZ(-120px) translateX(40px);  }
.swing--left.is-in, .swing--right.is-in{ transform:none; }

.d1{ transition-delay:.06s } .d2{ transition-delay:.14s }
.d3{ transition-delay:.22s } .d4{ transition-delay:.3s }
.d5{ transition-delay:.38s } .d6{ transition-delay:.46s }

/* mouse-driven tilt target */
.tilt{
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

/* --------------------------------------------------------------------------
   8. SECTION SHELL — angled brass bands instead of flat rows
   -------------------------------------------------------------------------- */
.band{
  position:relative;
  padding:clamp(80px,11vw,150px) 0;
}
/* interlocking diagonal cut */
.band--cut{
  background:linear-gradient(180deg, rgba(21,14,4,.72), rgba(21,14,4,.9));
  clip-path:polygon(0 3.2vw, 100% 0, 100% calc(100% - 3.2vw), 0 100%);
  border-top:var(--edge) solid rgba(255,198,58,.22);
}
.band--cut-rev{
  background:linear-gradient(180deg, rgba(21,14,4,.9), rgba(21,14,4,.72));
  clip-path:polygon(0 0, 100% 3.2vw, 100% 100%, 0 calc(100% - 3.2vw));
}

.shell{ width:100%; max-width:1240px; margin:0 auto; padding:0 clamp(16px,4vw,28px); }

/* the left conveyor rail that threads the whole page together */
.rail{
  position:absolute; top:0; bottom:0;
  left:calc((100vw - 1240px)/2 - 66px);
  width:var(--rail); pointer-events:none; opacity:.5;
}
@media (max-width:1470px){ .rail{ display:none; } }
.rail__spine{
  position:absolute; left:50%; top:0; bottom:0; width:10px; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--rust),var(--amber),var(--rust));
  border-left:2px solid var(--ink); border-right:2px solid var(--ink);
}
.rail__ties{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(180deg,
    var(--honey) 0 4px, transparent 4px 26px);
  opacity:.5;
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(140px,17vh,190px) 0 clamp(70px,10vh,120px);
  overflow:hidden;
}
.hero__glow{
  position:absolute; left:58%; top:44%;
  width:min(120vw,1100px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(246,168,0,.34), transparent 62%);
  filter:blur(30px); pointer-events:none;
}

/* the tilted speech-slab holding the headline */
.hero__slab{
  position:relative;
  padding:clamp(22px,3.4vw,40px);
  transform:rotate(-1.1deg);
}
/* comic speech tail — a real element, because ::before/::after on the slab
   are already spoken for by .rivets */
.hero__tail{
  position:absolute; left:52px; bottom:-26px; width:0; height:0;
  border-left:26px solid transparent; border-right:12px solid transparent;
  border-top:26px solid var(--paper);
  filter:drop-shadow(0 3px 0 var(--ink));
  pointer-events:none;
}

.hero__title{
  font-family:"Alfa Slab One",serif;
  font-size:clamp(2.7rem,7.4vw,5.4rem);
  line-height:.92; margin:.5rem 0 0;
}
.hero__sub{
  font-family:"Anton",sans-serif; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink);
  font-size:clamp(.95rem,1.9vw,1.3rem);
  margin:1rem 0 0;
}
.hero__bio{
  color:rgba(21,14,4,.82); margin:.75rem 0 0;
  font-size:clamp(.95rem,1.5vw,1.05rem); line-height:1.65; max-width:46ch;
}

/* CA plate */
.caplate{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  border:var(--edge) solid var(--ink);
  box-shadow:var(--hard-sm);
  background:var(--ink);
}
.caplate__tag{
  display:flex; align-items:center; gap:.5rem;
  background:var(--ember); color:var(--cream);
  font-family:"Anton",sans-serif; letter-spacing:.16em; font-size:.66rem;
  padding:.6rem .9rem; text-transform:uppercase; white-space:nowrap;
}
.caplate__val{
  flex:1 1 260px; min-width:0;
  display:flex; align-items:center;
  padding:.6rem .9rem;
  background:var(--paper); color:var(--ink);
  font-family:"Space Mono",monospace; font-size:.8rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.caplate__copy{
  display:grid; place-items:center; gap:.4rem; grid-auto-flow:column;
  background:var(--gold); color:var(--ink); border:0; cursor:pointer;
  padding:.6rem 1rem;
  font-family:"Anton",sans-serif; letter-spacing:.1em; font-size:.72rem;
  text-transform:uppercase;
  transition:background .18s ease;
}
.caplate__copy:hover{ background:var(--honey); }
.caplate__copy.done{ background:#4fae3a; color:var(--cream); }

/* --- the coin rig: logo.png suspended in an orbital contraption ---------- */
.rig{
  position:relative; width:min(100%,470px); margin-inline:auto;
  aspect-ratio:1;
  transform-style:preserve-3d;
  perspective:900px;              /* gives the orbit rings real depth */
}
.rig__ring{
  position:absolute; inset:6%; border-radius:50%;
  border:3px dashed rgba(255,198,58,.55);
  transform-style:preserve-3d;
}
.rig__ring--a{ animation:orbit-a 18s linear infinite; }
.rig__ring--b{ inset:-4%; border-style:solid; border-color:rgba(223,124,7,.5); animation:orbit-b 26s linear infinite; }
.rig__ring--c{ inset:17%; border-width:2px; border-color:rgba(255,246,226,.4); animation:orbit-c 13s linear infinite; }
@keyframes orbit-a{ from{transform:rotateX(72deg) rotateZ(0)}   to{transform:rotateX(72deg) rotateZ(360deg)} }
@keyframes orbit-b{ from{transform:rotateY(74deg) rotateZ(0)}   to{transform:rotateY(74deg) rotateZ(-360deg)} }
@keyframes orbit-c{ from{transform:rotateX(58deg) rotateY(28deg) rotateZ(0)} to{transform:rotateX(58deg) rotateY(28deg) rotateZ(360deg)} }

.rig__coin{
  position:absolute; inset:19%; border-radius:50%; overflow:hidden;
  border:5px solid var(--cream);
  box-shadow:
    0 0 0 4px var(--ink),
    0 0 70px rgba(246,168,0,.65),
    0 30px 60px rgba(0,0,0,.6);
  animation:bob 6.5s ease-in-out infinite;
}
.rig__coin img{ width:100%; height:100%; object-fit:cover; }
.rig__coin::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(125deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  animation:sheen 6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translateY(-9px)} 50%{transform:translateY(11px)} }

.rig .cog{ position:absolute; }
.rig .cog--1{ width:74px;  height:74px;  top:-2%;  left:-3%; }
.rig .cog--2{ width:52px;  height:52px;  bottom:6%; right:-4%; }
.rig .cog--3{ width:38px;  height:38px;  bottom:-3%; left:22%; }

.rig__stamp{
  position:absolute; right:-6%; top:6%;
  background:var(--ember); color:var(--cream);
  border:var(--edge) solid var(--ink); box-shadow:var(--hard-sm);
  font-family:"Anton",sans-serif; text-transform:uppercase;
  letter-spacing:.1em; font-size:.72rem; line-height:1.15;
  padding:.55rem .8rem; text-align:center;
  transform:rotate(9deg);
  animation:wobble 5s ease-in-out infinite;
}
@keyframes wobble{ 0%,100%{transform:rotate(9deg)} 50%{transform:rotate(4deg) scale(1.04)} }

/* scroll hint */
.scrollhint{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-family:"Anton",sans-serif; font-size:.62rem; letter-spacing:.3em;
  color:rgba(255,246,226,.55); text-transform:uppercase;
}
.scrollhint__bar{
  width:2px; height:44px;
  background:linear-gradient(180deg,var(--honey),transparent);
  animation:drip 2.1s ease-in-out infinite;
}
@keyframes drip{ 0%,100%{opacity:.3; transform:scaleY(.6)} 50%{opacity:1; transform:scaleY(1)} }

/* --------------------------------------------------------------------------
   10. CROSSED TICKERS
   -------------------------------------------------------------------------- */
.tickers{ position:relative; padding:74px 0; z-index:5; }
.ticker{
  position:relative;
  border-block:var(--edge) solid var(--ink);
  overflow:hidden; white-space:nowrap;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.ticker--a{
  background:linear-gradient(180deg,var(--honey),var(--gold));
  color:var(--ink); transform:rotate(-2.4deg);
}
.ticker--b{
  background:var(--ink); color:var(--honey);
  transform:rotate(2.1deg); margin-top:-26px;
  border-color:var(--honey);
}
.ticker__track{
  display:inline-flex; align-items:center;
  padding:.7rem 0;
  font-family:"Anton",sans-serif; text-transform:uppercase;
  letter-spacing:.14em; font-size:clamp(.8rem,1.5vw,1.05rem);
  animation:march 30s linear infinite;
}
.ticker--b .ticker__track{ animation-duration:38s; animation-direction:reverse; }
.ticker__track span{ padding:0 1.4rem; display:inline-flex; align-items:center; gap:1.4rem; }
.ticker__track span::after{
  content:""; width:11px; height:11px; border-radius:50%;
  background:var(--ember); box-shadow:0 0 0 2px currentColor;
}
@keyframes march{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* --------------------------------------------------------------------------
   11. ABOUT — the 3D panel deck
   -------------------------------------------------------------------------- */
.deck{
  position:relative;
  transform-style:preserve-3d;
  perspective:1100px;             /* lets the inset + note float toward you */
  aspect-ratio:1/1; width:min(100%,540px); margin-inline:auto;
}
.deck__main{
  position:absolute; inset:0;
  border:5px solid var(--cream); outline:var(--edge) solid var(--ink);
  box-shadow:var(--lift), 0 0 60px rgba(246,168,0,.28);
  overflow:hidden;
  transform:rotate(-2.2deg);
}
.deck__main img{ width:100%; height:100%; object-fit:cover; }

.deck__inset{
  position:absolute; right:-7%; bottom:-6%;
  width:44%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:5px solid var(--cream); outline:var(--edge) solid var(--ink);
  box-shadow:0 22px 44px rgba(0,0,0,.6), 0 0 44px rgba(246,168,0,.45);
  transform:translateZ(60px) rotate(6deg);
  background:var(--ink);
}
.deck__inset img{ width:100%; height:100%; object-fit:cover; }

.deck__note{
  position:absolute; left:-5%; top:-5%;
  background:var(--paper); color:var(--ink);
  border:var(--edge) solid var(--ink); box-shadow:var(--hard-sm);
  padding:.55rem .85rem; max-width:60%;
  font-family:"Anton",sans-serif; text-transform:uppercase;
  font-size:.7rem; letter-spacing:.1em;
  transform:translateZ(90px) rotate(-5deg);
}

/* fact cards */
.fact{
  position:relative; padding:1.15rem 1.25rem;
  background:linear-gradient(160deg, rgba(255,224,143,.1), rgba(11,7,1,.42));
  border:var(--edge) solid var(--ink);
  border-left:9px solid var(--gold);
  box-shadow:var(--hard-sm);
  transition:transform .22s ease, border-left-color .22s ease, background .22s ease;
}
.fact:hover{
  transform:translateX(8px);
  border-left-color:var(--ember);
  background:linear-gradient(160deg, rgba(255,224,143,.18), rgba(11,7,1,.5));
}
.fact__h{
  font-family:"Anton",sans-serif; text-transform:uppercase;
  letter-spacing:.08em; color:var(--honey);
  font-size:1rem; margin:0 0 .3rem;
}
.fact__p{ margin:0; color:rgba(255,246,226,.76); font-size:.93rem; line-height:1.6; }

/* --------------------------------------------------------------------------
   12. BILLBOARD — banner.png mounted like a drive-in sign
   -------------------------------------------------------------------------- */
.billboard{ position:relative; perspective:1250px; padding:20px 0 0; }
.billboard__sign{
  position:relative;
  transform:rotateX(9deg);
  transform-origin:50% 100%;
  border:6px solid var(--ink);
  box-shadow:0 40px 80px rgba(0,0,0,.7), inset 0 0 0 4px var(--cream);
  background:var(--ink);
  overflow:hidden;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.billboard:hover .billboard__sign{ transform:rotateX(2deg); }
.billboard__sign img{ width:100%; }

/* bulb frame */
.billboard__bulbs{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle, var(--sun) 2.4px, transparent 3px),
    radial-gradient(circle, var(--sun) 2.4px, transparent 3px);
  background-position:0 6px, 0 calc(100% - 6px);
  background-size:34px 12px;
  background-repeat:repeat-x;
  animation:bulbs 1.6s steps(2) infinite;
  opacity:.9;
}
@keyframes bulbs{ 50%{ background-position:17px 6px, 17px calc(100% - 6px); } }

/* legs */
.billboard__legs{
  display:flex; justify-content:space-between;
  max-width:78%; margin:0 auto;
}
.billboard__leg{
  width:16px; height:clamp(30px,5vw,58px);
  background:linear-gradient(180deg,var(--amber),var(--rust));
  border:var(--edge) solid var(--ink); border-top:0;
}

/* spotlights */
.spot{
  position:absolute; top:-30px; width:230px; height:280px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,224,143,.4), transparent 72%);
  filter:blur(14px); mix-blend-mode:screen;
  animation:flicker 5.5s ease-in-out infinite;
}
.spot--l{ left:6%;  transform:rotate(-16deg); }
.spot--r{ right:6%; transform:rotate(16deg); animation-delay:1.4s; }
@keyframes flicker{ 0%,100%{opacity:.85} 45%{opacity:.45} }

/* --------------------------------------------------------------------------
   13. HOW TO BUY — the zig-zag conveyor
   -------------------------------------------------------------------------- */
.convey{ position:relative; }

/* the pipe running down the middle */
.convey__pipe{
  position:absolute; left:50%; top:0; bottom:0; width:16px;
  transform:translateX(-50%);
  background:
    repeating-linear-gradient(180deg, rgba(11,7,1,.35) 0 8px, transparent 8px 22px),
    linear-gradient(90deg,var(--rust),var(--honey) 45%,var(--amber));
  border:var(--edge) solid var(--ink);
  box-shadow:0 0 26px rgba(246,168,0,.35);
}
@media (max-width:900px){
  .convey__pipe{ left:26px; }
}

.step{
  position:relative;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:0;
  margin-bottom:clamp(34px,5vw,64px);
}
.step__card{
  position:relative;
  padding:clamp(1.1rem,2.2vw,1.7rem);
  background:
    linear-gradient(165deg, rgba(255,224,143,.13), rgba(11,7,1,.5)),
    linear-gradient(135deg,#2a1c07,#180f04);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--hard), var(--lift);
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.step--l .step__card{ grid-column:1; margin-right:34px; transform:perspective(1300px) rotateY(7deg); }
.step--r .step__card{ grid-column:3; margin-left:34px;  transform:perspective(1300px) rotateY(-7deg); }
.step__card:hover{
  transform:perspective(1300px) rotateY(0deg) translateZ(26px);
  box-shadow:var(--hard), 0 44px 84px rgba(0,0,0,.7);
}

/* connector arm from card to pipe */
.step__arm{
  position:absolute; top:50%; width:34px; height:8px;
  background:linear-gradient(90deg,var(--amber),var(--honey));
  border:2px solid var(--ink); transform:translateY(-50%);
}
.step--l .step__arm{ right:-36px; }
.step--r .step__arm{ left:-36px; }

/* the numbered gear badge sitting on the pipe */
.step__badge{
  grid-column:2; position:relative; z-index:3;
  width:clamp(58px,7vw,78px); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--sun), var(--gold) 52%, var(--amber));
  border:var(--edge) solid var(--ink);
  box-shadow:0 0 0 5px var(--ink), 0 0 34px rgba(246,168,0,.55);
  font-family:"Alfa Slab One",serif; color:var(--ink);
  font-size:clamp(1.4rem,2.6vw,2rem);
}
.step__badge::before{
  content:""; position:absolute; inset:-15px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, var(--rust) 0 7deg, transparent 7deg 20deg);
  z-index:-1; animation:cog-turn 22s linear infinite;
}

.step__k{
  display:inline-block;
  font-family:"Anton",sans-serif; font-size:.62rem; letter-spacing:.26em;
  color:var(--ember); text-transform:uppercase;
  background:var(--paper); border:2px solid var(--ink);
  padding:.18rem .5rem; margin-bottom:.6rem;
}
.step__h{
  font-family:"Alfa Slab One",serif; font-size:clamp(1.15rem,2.2vw,1.55rem);
  color:var(--cream); margin:0 0 .45rem; line-height:1.15;
}
.step__p{ margin:0; color:rgba(255,246,226,.75); font-size:.94rem; line-height:1.65; }

@media (max-width:900px){
  .step{ grid-template-columns:auto 1fr; }
  .step__badge{ grid-column:1; }
  .step--l .step__card, .step--r .step__card{
    grid-column:2; margin:0 0 0 26px; transform:none;
  }
  .step--l .step__arm, .step--r .step__arm{ left:-28px; right:auto; width:26px; }
}

/* --------------------------------------------------------------------------
   14. COMMUNITY — throne room (2.png)
   -------------------------------------------------------------------------- */
.throne{ position:relative; overflow:hidden; }
.throne__bg{
  position:absolute; inset:0;
  background:url("../2.png") center 35% / cover no-repeat;
  filter:brightness(.4) saturate(1.2);
  transform:scale(1.06);
}
.throne__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(246,168,0,.24), transparent 70%),
    linear-gradient(180deg, rgba(11,7,1,.93), rgba(11,7,1,.72) 45%, rgba(11,7,1,.95));
}
.throne__dots{
  position:absolute; inset:0; opacity:.4;
  background-image:radial-gradient(rgba(11,7,1,.7) 1.2px, transparent 1.3px);
  background-size:6px 6px;
}

.social{
  position:relative; display:block; text-decoration:none;
  padding:1.6rem 1.35rem;
  background:linear-gradient(170deg, rgba(255,224,143,.12), rgba(11,7,1,.62));
  border:var(--edge) solid var(--ink);
  box-shadow:var(--hard), var(--lift);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .3s;
  overflow:hidden;
}
.social:hover{
  transform:perspective(1000px) translateY(-10px) rotateX(6deg);
  background:linear-gradient(170deg, rgba(255,224,143,.24), rgba(11,7,1,.62));
  box-shadow:var(--hard), 0 46px 80px rgba(0,0,0,.72);
}
.social__ic{
  display:grid; place-items:center; width:60px; height:60px;
  background:var(--gold); color:var(--ink);
  border:var(--edge) solid var(--ink); box-shadow:var(--hard-sm);
  margin-bottom:1rem;
  transition:background .3s, transform .3s;
}
.social:hover .social__ic{ background:var(--ember); color:var(--cream); transform:rotate(-8deg); }
.social__h{
  font-family:"Alfa Slab One",serif; font-size:1.25rem;
  color:var(--cream); margin:0 0 .35rem;
}
.social__p{ margin:0 0 .9rem; color:rgba(255,246,226,.7); font-size:.9rem; line-height:1.6; }
.social__go{
  font-family:"Anton",sans-serif; letter-spacing:.16em; font-size:.7rem;
  text-transform:uppercase; color:var(--honey);
}

/* manifesto quote block */
.manifesto{
  position:relative;
  padding:clamp(1.6rem,4vw,2.8rem);
  background:var(--paper); color:var(--ink);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--hard), var(--lift);
  transform:rotate(-.8deg);
}
.manifesto::before{
  content:"“"; position:absolute; left:14px; top:-30px;
  font-family:"Alfa Slab One",serif; font-size:7rem; line-height:1;
  color:var(--ember); opacity:.35;
}
.manifesto__q{
  font-family:"Alfa Slab One",serif;
  font-size:clamp(1.1rem,2.6vw,1.75rem); line-height:1.3; margin:0;
}
.manifesto__by{
  margin:.9rem 0 0; font-family:"Anton",sans-serif;
  letter-spacing:.2em; font-size:.68rem; text-transform:uppercase; color:var(--rust);
}

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.foot{
  position:relative;
  background:linear-gradient(180deg, rgba(11,7,1,.9), var(--coal));
  border-top:6px solid var(--gold);
  padding:clamp(50px,7vw,80px) 0 30px;
}
.foot__disc{
  color:rgba(255,246,226,.42); font-size:.78rem; line-height:1.7;
}

/* --------------------------------------------------------------------------
   16. TOAST
   -------------------------------------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:90;
  transform:translate(-50%,140%) rotate(-1.5deg);
  background:var(--gold); color:var(--ink);
  border:var(--edge) solid var(--ink); box-shadow:var(--hard-sm);
  padding:.7rem 1.2rem;
  font-family:"Anton",sans-serif; letter-spacing:.1em; font-size:.8rem;
  text-transform:uppercase;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.toast.show{ transform:translate(-50%,0) rotate(-1.5deg); }

/* --------------------------------------------------------------------------
   17. RESPONSIVE + MOTION
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  :root{ --hard:7px 7px 0 var(--ink); --hard-sm:4px 4px 0 var(--ink); }
  .hero__tail{ left:34px; }
  .rig__stamp{ right:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .swing{ transform:none !important; opacity:1 !important; }
}