/* =====================================================================
   MICRO DOGE — $MIDOGE · "macro lens / specimen lab" theme
   Palette sampled from the photo: studio gray, fingertip coral, shiba ginger
   ===================================================================== */
:root{
  --paper:#d7d2ca;      /* photo backdrop */
  --paper-2:#e6e2da;
  --paper-3:#c9c3b9;
  --skin:#ad574c;       /* fingertip */
  --skin-2:#c7735f;
  --skin-deep:#7a372f;
  --ginger:#c98b4f;     /* doge fur */
  --ginger-2:#e0ad6f;
  --cream:#f3e9d8;
  --ink:#2a1a15;
  --ink-2:#4a3129;
  --muted:#7d6a60;
  --f-display:"Syne", "Arial Black", system-ui, sans-serif;
  --f-serif:"Instrument Serif", Georgia, serif;
  --f-mono:"DM Mono", ui-monospace, Menlo, monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --r:22px;
  --hdr:78px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-mono);font-size:15px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
em{font-family:var(--f-serif);font-style:italic;font-weight:400}
::selection{background:var(--skin);color:var(--cream)}

/* ---------- shared: viewfinder corners ---------- */
.vf-c{position:absolute;width:34px;height:34px;border:2px solid currentColor;pointer-events:none}
.vf-c.tl{top:18px;left:18px;border-right:0;border-bottom:0}
.vf-c.tr{top:18px;right:18px;border-left:0;border-bottom:0}
.vf-c.bl{bottom:18px;left:18px;border-right:0;border-top:0}
.vf-c.br{bottom:18px;right:18px;border-left:0;border-top:0}

/* =====================================================================
   PRELOADER
   ===================================================================== */
.loader{position:fixed;inset:0;z-index:1000;background:#1b1210;color:var(--cream);overflow:hidden;
  clip-path:circle(150% at var(--cx,50%) var(--cy,45%));transition:clip-path 1.1s var(--ease)}
.loader.is-closing{clip-path:circle(0% at var(--cx,50%) var(--cy,45%))}
.loader.is-gone{display:none}
.loader__photo{position:absolute;inset:0;will-change:transform,filter;transform:scale(3.2);filter:blur(16px) saturate(1.1)}
.loader__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.loader__vf{position:absolute;inset:4vmin;color:rgba(243,233,216,.85)}
.loader__vf .vf-c{width:5vmin;height:5vmin;min-width:28px;min-height:28px}
.vf-cross{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(243,233,216,.8)}
.vf-cross::before,.vf-cross::after{content:"";position:absolute;background:rgba(243,233,216,.8)}
.vf-cross::before{left:50%;top:-14px;bottom:-14px;width:1.5px;transform:translateX(-50%)}
.vf-cross::after{top:50%;left:-14px;right:-14px;height:1.5px;transform:translateY(-50%)}
.loader__hud{position:absolute;left:calc(4vmin + 44px);right:calc(4vmin + 44px);display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:.16em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.loader__hud--top{top:calc(4vmin + 10px)}
.loader__hud--top span:first-child{color:#ff6b57;animation:blink 1s steps(2) infinite}
.loader__hud--bot{bottom:calc(4vmin + 30px);align-items:flex-end}
.loader__ticker{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,7vw,92px);letter-spacing:-.02em;line-height:.9}
.loader__focus b{font-weight:500;display:inline-block;min-width:3ch;text-align:right}
.loader__bar{position:absolute;left:calc(4vmin + 44px);right:calc(4vmin + 44px);bottom:calc(4vmin + 12px);height:2px;background:rgba(243,233,216,.25)}
.loader__bar i{display:block;height:100%;width:0;background:var(--cream);transition:width .25s linear}
@keyframes blink{50%{opacity:.2}}

/* =====================================================================
   HEADER
   ===================================================================== */
.hdr{position:fixed;z-index:200;top:14px;left:50%;transform:translateX(-50%);width:min(1240px,calc(100% - 28px));height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 10px 0 16px;border-radius:999px;
  background:rgba(236,232,225,.92);border:1px solid rgba(42,26,21,.12);box-shadow:0 10px 30px -18px rgba(42,26,21,.45);transition:transform .45s var(--ease),background .3s}
.hdr.is-hidden{transform:translate(-50%,-120%)}
.hdr__logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:.02em;white-space:nowrap}
.hdr__logo img{filter:drop-shadow(0 2px 3px rgba(42,26,21,.25))}
.hdr__logo b{color:var(--skin);font-weight:800;margin-left:2px}
.hdr__nav{display:flex;gap:4px}
.hdr__nav a{padding:9px 14px;border-radius:999px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;transition:background .25s,color .25s}
.hdr__nav a:hover{background:var(--ink);color:var(--cream)}
.hdr__soc{display:flex;align-items:center;gap:8px}

/* "specimen tag" social buttons */
.tag-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 22px;border-radius:10px 999px 999px 10px;
  background:var(--ink);color:var(--cream);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s;box-shadow:0 6px 0 -1px var(--skin-deep)}
.tag-btn::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.tag-btn svg{width:17px;height:17px;fill:currentColor}
.tag-btn:hover{transform:translateY(-3px) rotate(-2deg);background:var(--skin)}
.tag-btn:active{transform:translateY(2px);box-shadow:0 2px 0 -1px var(--skin-deep)}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--skin);position:relative}
.burger i{position:absolute;left:13px;right:13px;height:2px;background:var(--cream);transition:transform .3s var(--ease)}
.burger i:first-child{top:18px}.burger i:last-child{top:25px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.drawer{position:fixed;z-index:190;inset:0;background:#241713;color:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:100px 28px 40px;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.drawer.is-open{opacity:1;visibility:visible}
.drawer>a{font-family:var(--f-display);font-weight:800;font-size:42px;line-height:1.1;letter-spacing:-.02em;border-bottom:1px solid rgba(243,233,216,.14);padding:10px 0}
.drawer__soc{display:flex;gap:10px;margin-top:22px}
.drawer__soc .tag-btn{background:var(--skin)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:var(--paper);perspective:1200px}
.hero__photo{position:absolute;inset:-3%;will-change:transform}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:filter .6s var(--ease)}
.hero.is-focusing .hero__photo img{filter:blur(2.5px) saturate(.8) brightness(1.02)}
.hero__grain{position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .2  0 0 0 0 .15  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.ruler{position:absolute;pointer-events:none;color:var(--ink);opacity:.55}
.ruler--left{left:0;top:0;bottom:0;width:30px;
  background:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 10px) left/10px 100% no-repeat,
             repeating-linear-gradient(to bottom,currentColor 0 1.5px,transparent 1.5px 50px) left/20px 100% no-repeat}
.ruler--bottom{left:0;right:0;bottom:0;height:30px;
  background:repeating-linear-gradient(to right,currentColor 0 1px,transparent 1px 10px) bottom/100% 10px no-repeat,
             repeating-linear-gradient(to right,currentColor 0 1.5px,transparent 1.5px 50px) bottom/100% 20px no-repeat;opacity:.35}

.hero__title{position:absolute;left:clamp(34px,5vw,80px);top:calc(var(--hdr) + 3vh);z-index:3;transform-style:preserve-3d;will-change:transform}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--skin);box-shadow:0 0 0 4px rgba(173,87,76,.2);animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(173,87,76,0)}}
.hero h1{margin:0;font-family:var(--f-display);font-weight:800;line-height:.82;letter-spacing:-.045em;font-size:clamp(64px,11vw,190px);color:var(--ink)}
.hero h1 span{display:block}
.h-micro{font-size:.42em;letter-spacing:.02em;color:var(--skin);-webkit-text-stroke:0;margin-left:.05em;line-height:1}
.h-doge{text-shadow:0 1px 0 rgba(255,255,255,.35)}
.hero__sub{margin:14px 0 0 4px;font-size:clamp(20px,2.2vw,30px);font-family:var(--f-serif);color:var(--ink-2)}
.hero__sub em{color:var(--skin)}

/* pin pointing at doge */
.pin{position:absolute;z-index:2;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .6s .3s}
.pin.is-on{opacity:1}
.pin__ring{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:1.5px dashed rgba(42,26,21,.55);animation:spin 18s linear infinite}
.pin__line{position:absolute;left:52px;top:-52px;width:90px;height:1.5px;background:rgba(42,26,21,.6);transform-origin:left;transform:rotate(-30deg)}
.pin__label{position:absolute;left:128px;top:-112px;white-space:nowrap;font-size:12px;letter-spacing:.12em;background:var(--ink);color:var(--cream);padding:6px 10px;border-radius:6px}
.pin__label small{color:var(--ginger-2);margin-left:6px;font-size:11px}
@keyframes spin{to{transform:rotate(360deg)}}

.hero__cta{position:absolute;z-index:4;right:clamp(34px,5vw,80px);bottom:clamp(54px,9vh,110px);display:flex;flex-direction:column;align-items:flex-end;gap:14px;will-change:transform}
.spec-label{display:grid;grid-template-columns:auto auto;gap:2px 16px;padding:12px 16px;background:var(--cream);border:1px solid rgba(42,26,21,.18);border-radius:6px;font-size:11px;letter-spacing:.16em;
  box-shadow:0 12px 24px -16px rgba(42,26,21,.5);transform:rotate(2deg)}
.spec-label span{color:var(--muted)}
.spec-label b{font-weight:500}

/* ---- BIG pump.fun button with the micro doge standing on it ---- */
.buy-wrap{position:relative;padding-top:28px}
.buy-wrap__doge{position:absolute;right:38px;top:0;width:30px;height:auto;z-index:2;filter:drop-shadow(0 3px 2px rgba(42,26,21,.35));transform-origin:bottom center;animation:sniff 3.2s ease-in-out infinite}
@keyframes sniff{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-1px) rotate(-3deg)}55%{transform:translateY(0) rotate(2deg)}}
.btn-pump{position:relative;display:inline-flex;align-items:center;gap:14px;height:74px;padding:0 30px 0 22px;border-radius:999px;
  background:linear-gradient(180deg,var(--skin-2),var(--skin) 55%,#98473d);color:var(--cream);
  font-family:var(--f-display);font-weight:800;font-size:clamp(18px,1.7vw,23px);letter-spacing:.02em;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -6px 14px rgba(90,30,25,.35),0 10px 0 var(--skin-deep),0 24px 40px -14px rgba(122,55,47,.8);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);overflow:hidden}
.btn-pump::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,60%{left:-40%}100%{left:130%}}
.btn-pump:hover{transform:translateY(-3px)}
.btn-pump:active{transform:translateY(8px);box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -6px 14px rgba(90,30,25,.35),0 2px 0 var(--skin-deep),0 10px 20px -10px rgba(122,55,47,.8)}
.btn-pump__pill{display:inline-flex;width:40px;height:22px;border-radius:999px;overflow:hidden;transform:rotate(-35deg);box-shadow:0 2px 4px rgba(0,0,0,.25)}
.btn-pump__pill i{flex:1}
.btn-pump__pill i:first-child{background:#9df5c2}
.btn-pump__pill i:last-child{background:#fff}
.btn-pump .arr{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.btn-pump:hover .arr{transform:translateX(4px)}
.btn-pump--sm{height:64px}

/* ---- CA copy chip (fingerprint = "touch to copy") ---- */
.ca{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 8px 0 10px;border-radius:999px;background:var(--cream);border:1.5px solid var(--ink);color:var(--ink);
  box-shadow:0 6px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s;max-width:100%}
.ca:hover{transform:translateY(-2px)}
.ca:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.ca__print{width:38px;height:38px;border-radius:50%;flex:none;background:var(--skin) url("../img/fingerprint-light.webp") center/180% no-repeat}
.ca__k{font-weight:500;font-size:12px;letter-spacing:.14em;color:var(--muted)}
.ca__v{font-size:14px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ca__act{flex:none;height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--cream);font-size:12px;letter-spacing:.14em;transition:background .25s}
.ca:hover .ca__act{background:var(--skin)}
.ca.is-copied .ca__act{background:#3f7a4e}
.ca--dark{background:#2e1f1a;color:var(--cream);border-color:#120a08;box-shadow:0 6px 0 #120a08}
.ca--dark .ca__k{color:var(--ginger-2)}
.ca--dark .ca__act{background:var(--skin)}
.ca--dark:hover .ca__act{background:var(--ginger)}

/* ---- magnifying loupe ---- */
.loupe{position:absolute;z-index:3;left:0;top:0;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:50%;pointer-events:none;
  background-repeat:no-repeat;background-color:var(--paper);opacity:0;transform:scale(.6);transition:opacity .35s,transform .35s var(--ease);
  box-shadow:0 0 0 7px #231612,0 0 0 9px #6b4a3e,0 0 0 14px #231612,0 30px 50px -10px rgba(0,0,0,.55),inset 0 0 30px rgba(0,0,0,.25);will-change:left,top}
.loupe::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.45),transparent 30%),radial-gradient(circle at 70% 80%,rgba(255,255,255,.08),transparent 40%)}
.loupe::before{content:"";position:absolute;right:-78px;bottom:-78px;width:92px;height:22px;border-radius:10px;background:linear-gradient(#3a2620,#150d0b);transform:rotate(45deg);transform-origin:left center;box-shadow:0 6px 12px rgba(0,0,0,.4)}
.loupe.is-on{opacity:1;transform:scale(1)}
.loupe__zoom{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:11px;letter-spacing:.14em;color:var(--cream);background:rgba(35,22,18,.75);padding:3px 8px;border-radius:99px;z-index:2}
.hero__hint{position:absolute;z-index:3;left:clamp(34px,5vw,80px);bottom:44px;margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);opacity:.85}
.hero__hint::before{content:"◎ "}
@media (hover:none){.hero__hint,.loupe{display:none}}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:34px;width:26px;height:42px;margin-left:-13px;border:2px solid var(--cream);border-radius:20px;opacity:.9}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--cream);animation:cue 1.6s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* =====================================================================
   ZOOM — pinned, scroll-driven magnification
   ===================================================================== */
.zoom{position:relative;height:320vh;background:#1b1210}
.zoom__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:var(--cream)}
.zoom__photo{position:absolute;inset:0;will-change:transform,filter}
.zoom__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.zoom__vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--vx,50%) var(--vy,45%),transparent calc(var(--vr,80) * 1%),rgba(27,18,16,.92) calc(var(--vr,80) * 1% + 16%))}
.zoom__vf{position:absolute;inset:4vmin;color:rgba(243,233,216,.8)}
.zoom__cap{position:absolute;left:0;right:0;bottom:15vh;text-align:center;font-family:var(--f-serif);font-style:italic;font-size:clamp(38px,6.4vw,100px);line-height:1;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s var(--ease);text-shadow:0 4px 30px rgba(0,0,0,.45);padding:0 20px}
.zoom__cap.is-on{opacity:1;transform:none}
.zoom__cap b{font-family:var(--f-display);font-style:normal;font-weight:800;color:var(--ginger-2);letter-spacing:-.03em}
.zoom__cap--big{bottom:10vh}
.zoom__meter{position:absolute;right:calc(4vmin + 48px);top:calc(4vmin + 14px);font-size:12px;letter-spacing:.18em;display:flex;gap:10px;align-items:baseline}
.zoom__meter b{font-family:var(--f-display);font-size:28px;letter-spacing:-.01em}

/* ---------- walking ruler ---------- */
.walk{position:relative;height:120px;background:var(--cream);overflow:hidden;border-bottom:1px solid rgba(42,26,21,.14)}
.walk__ruler{position:absolute;left:0;right:0;bottom:0;height:46px;background:
  repeating-linear-gradient(to right,var(--ink) 0 1px,transparent 1px 10px) bottom/100% 14px no-repeat,
  repeating-linear-gradient(to right,var(--ink) 0 1.5px,transparent 1.5px 50px) bottom/100% 26px no-repeat,
  repeating-linear-gradient(to right,var(--skin) 0 2px,transparent 2px 100px) bottom/100% 40px no-repeat;opacity:.8}
.walk__doge{position:absolute;left:0;bottom:44px;width:62px;will-change:transform;filter:drop-shadow(0 4px 3px rgba(42,26,21,.3))}

/* =====================================================================
   SECTIONS (shared)
   ===================================================================== */
.sec{position:relative;padding:clamp(90px,12vw,150px) clamp(20px,5vw,80px)}
.sec__head{display:flex;align-items:flex-end;gap:18px;max-width:1240px;margin:0 auto 26px}
.sec__no{font-size:13px;letter-spacing:.2em;padding:6px 10px;border:1.5px solid currentColor;border-radius:99px;margin-bottom:12px}
.sec h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(46px,8vw,120px);letter-spacing:-.045em;line-height:.9}
.sec h2 em{letter-spacing:-.01em;color:var(--skin)}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

.tilt{transform-style:preserve-3d;will-change:transform}

/* ---------- LORE ---------- */
.lore{background:var(--paper-2);overflow:hidden}
.lore::before{content:"";position:absolute;right:-18vw;top:-10vw;width:70vw;height:70vw;max-width:1000px;max-height:1000px;background:url("../img/fingerprint.webp") center/contain no-repeat;opacity:.28;pointer-events:none;transform:rotate(-12deg) translateY(var(--py,0px))}
.lore__lead{max-width:1240px;margin:0 auto 54px;font-family:var(--f-serif);font-size:clamp(24px,3vw,40px);line-height:1.15;color:var(--ink-2)}
.notes{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:22px;perspective:1000px}
.note{position:relative;padding:28px 26px 30px;border-radius:var(--r);background:var(--cream);border:1px solid rgba(42,26,21,.12);box-shadow:0 30px 50px -34px rgba(42,26,21,.6);display:flex;flex-direction:column;min-height:280px}
.note::after{content:"";position:absolute;top:18px;right:20px;width:12px;height:12px;border-radius:50%;background:var(--skin);box-shadow:0 0 0 5px rgba(173,87,76,.16)}
.note__k{font-size:12px;letter-spacing:.2em;color:var(--muted)}
.note__v{margin-top:auto;font-family:var(--f-display);font-weight:800;font-size:clamp(60px,7vw,108px);letter-spacing:-.05em;line-height:.9;transform:translateZ(40px)}
.note__v small{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:.36em;letter-spacing:0;margin-left:6px;color:var(--skin)}
.note__s{margin-top:10px;color:var(--ink-2);font-size:13px}
.note--img{background:var(--ink);color:var(--cream);overflow:hidden}
.note--img .note__k{color:var(--ginger-2);order:2;margin-top:14px}
.note--img .note__v{order:3;margin-top:4px;font-size:clamp(40px,4.6vw,66px);color:var(--ginger-2)}
.note__imgwrap{order:1;position:relative;height:190px;display:grid;place-items:end center;border-radius:14px;background:radial-gradient(circle at 50% 70%,rgba(201,139,79,.35),transparent 60%),url("../img/fingerprint-light.webp") center/140% no-repeat;background-color:#3a2721}
.note__imgwrap img{width:auto;height:150px;transform:translateZ(60px);filter:drop-shadow(0 12px 10px rgba(0,0,0,.45));margin-bottom:12px}

/* ---------- HOW TO BUY: microscope slides ---------- */
.buy{background:var(--paper)}
.buy::before{content:"";position:absolute;inset:0;background:url("../img/fingerprint.webp") -20vw 40%/60vw no-repeat;opacity:.16;pointer-events:none}
.slides{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;perspective:1000px}
.slide{position:relative;display:grid;grid-template-columns:62px 1fr;min-height:240px;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.28));border:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 40px -26px rgba(42,26,21,.65)}
.slide__label{background:var(--skin);color:var(--cream);writing-mode:vertical-rl;transform:rotate(180deg);display:flex;justify-content:space-between;padding:18px 0;align-items:center;font-size:12px;letter-spacing:.2em}
.slide__label span:first-child{font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:.02em}
.slide:nth-child(2) .slide__label{background:var(--ginger)}
.slide:nth-child(3) .slide__label{background:var(--ink-2)}
.slide:nth-child(4) .slide__label{background:var(--skin-deep)}
.slide__glass{position:relative;padding:26px 22px}
.slide__drop{display:block;width:54px;height:54px;border-radius:50%;margin-bottom:28px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,0) 35%),radial-gradient(circle,var(--ginger-2),var(--ginger) 70%);box-shadow:0 8px 14px -6px rgba(122,55,47,.55);transform:translateZ(30px)}
.slide:nth-child(2) .slide__drop{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,0) 35%),radial-gradient(circle,var(--skin-2),var(--skin) 70%)}
.slide:nth-child(3) .slide__drop{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,0) 35%),radial-gradient(circle,#9df5c2,#4fb77e 70%)}
.slide:nth-child(4) .slide__drop{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,0) 35%),radial-gradient(circle,#6b4a3e,var(--ink) 70%)}
.slide h3{margin:0 0 8px;font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.02em;transform:translateZ(20px)}
.slide p{margin:0;color:var(--ink-2);font-size:14px}
.buy__cta{position:relative;max-width:1240px;margin:44px auto 0;display:flex;flex-wrap:wrap;gap:22px;align-items:center}

/* ---------- CHART ---------- */
.chart{background:#241713;color:var(--cream)}
.chart .sec__head{color:var(--cream)}
.chart h2 em{color:var(--ginger-2)}
.scope{position:relative;max-width:1240px;margin:0 auto;padding:22px;border-radius:28px;background:#1a100d;border:1px solid rgba(243,233,216,.12);color:rgba(243,233,216,.5);box-shadow:0 40px 80px -40px #000}
.scope .vf-c{width:26px;height:26px;color:var(--ginger)}
.scope__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 36px 16px;font-size:12px;letter-spacing:.16em;color:var(--cream)}
.scope__bar a{color:var(--ginger-2);border-bottom:1px solid currentColor}
.rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff6b57;margin-right:6px;animation:blink 1s steps(2) infinite}
.scope__screen{position:relative;height:min(640px,70vh);min-height:420px;border-radius:16px;overflow:hidden;background:#110a08}
.scope__screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.scope__empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:18px;color:rgba(243,233,216,.7);
  background:repeating-linear-gradient(0deg,rgba(243,233,216,.04) 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,rgba(243,233,216,.04) 0 1px,transparent 1px 44px)}
.scope__lens{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,var(--paper) 0 55%,#c9c3b9 70%);box-shadow:0 0 0 8px #0a0605,0 0 0 10px #6b4a3e,0 0 60px rgba(224,173,111,.25);overflow:hidden;animation:bob 4s ease-in-out infinite}
.scope__lens img{height:92px;width:auto}
.scope__empty p{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.scope__empty b{color:var(--ginger-2);font-weight:500}
@keyframes bob{50%{transform:translateY(-8px)}}

/* ---------- ROADMAP: magnification ---------- */
.road{background:var(--paper-2);overflow:hidden}
.road__lead{max-width:1240px;margin:0 auto 44px;font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2.6vw,34px);color:var(--ink-2)}
.road__track{position:relative;max-width:1240px;height:4px;margin:0 auto 34px;border-radius:4px;background:rgba(42,26,21,.14);overflow:hidden}
.road__track i{position:absolute;inset:0;background:linear-gradient(90deg,var(--ginger),var(--skin));transform-origin:left;transform:scaleX(0)}
.stages{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stage{position:relative;padding:18px 18px 24px;border-radius:var(--r);background:var(--cream);border:1px solid rgba(42,26,21,.1);box-shadow:0 26px 40px -30px rgba(42,26,21,.6)}
.stage__mag{position:absolute;z-index:2;top:26px;left:28px;font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--cream);background:var(--ink);padding:3px 10px;border-radius:99px}
.stage:last-child .stage__mag{background:var(--skin)}
.stage__view{position:relative;height:210px;border-radius:50%;aspect-ratio:1;margin:0 auto 18px;max-width:210px;width:100%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 60%,#e9e4dc,var(--paper) 60%,#bdb6ab 100%);box-shadow:inset 0 0 0 6px #2a1a15,inset 0 0 0 8px #6b4a3e,inset 0 0 30px rgba(0,0,0,.25)}
.stage__view::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.4),transparent 32%)}
.stage__view img{height:170px;width:auto;transform:scale(var(--s));transition:transform 1.4s var(--ease) .2s}
.stage:not(.in) .stage__view img{transform:scale(calc(var(--s) * .3))}
.stage h3{margin:0 0 4px;font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.03em}
.stage p{margin:0;color:var(--ink-2);font-size:14px}

/* ---------- FINAL NAV ---------- */
.final{background:var(--skin);color:var(--cream);overflow:hidden}
.final h2 em{color:var(--ink)}
.final__print{position:absolute;left:50%;top:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;background:url("../img/fingerprint-light.webp") center/contain no-repeat;opacity:.13;pointer-events:none;animation:spin 140s linear infinite}
.jump{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.jump__btn{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:150px;padding:18px 20px;border-radius:18px;
  background:var(--cream);color:var(--ink);box-shadow:0 10px 0 var(--skin-deep),0 26px 40px -20px rgba(42,26,21,.7);transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.jump__btn span{font-size:12px;letter-spacing:.2em;color:var(--muted)}
.jump__btn b{font-family:var(--f-display);font-weight:800;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em;line-height:1}
.jump__btn i{position:absolute;right:18px;top:14px;font-style:normal;font-size:22px;transition:transform .25s}
.jump__btn:hover{transform:translateY(-6px) rotate(-1deg);background:#fff}
.jump__btn:hover i{transform:translate(3px,-3px) scale(1.2)}
.jump__btn:active{transform:translateY(6px);box-shadow:0 3px 0 var(--skin-deep)}
.jump__btn--hot{background:var(--ink);color:var(--cream);box-shadow:0 10px 0 #120a08,0 26px 40px -20px rgba(0,0,0,.7)}
.jump__btn--hot span{color:var(--ginger-2)}
.jump__btn--hot:hover{background:#3a2620}

/* ---------- FOOTER ---------- */
.foot{position:relative;background:#1b1210;color:var(--cream);padding:40px clamp(20px,5vw,80px) 34px;overflow:hidden}
.foot__big{font-family:var(--f-display);font-weight:800;font-size:clamp(70px,18vw,300px);line-height:.8;letter-spacing:-.06em;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(243,233,216,.25);margin:10px 0 36px;user-select:none}
.foot__row{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.foot .hdr__logo b{color:var(--ginger-2)}
.foot__soc{display:flex;flex-wrap:wrap;gap:10px}
.foot .tag-btn{background:var(--skin);box-shadow:0 6px 0 -1px #120a08}
.foot .tag-btn::before{background:#1b1210}
.foot .tag-btn:hover{background:var(--ginger)}
.foot__legal{max-width:1240px;margin:30px auto 0;font-size:12px;color:rgba(243,233,216,.45)}

/* ---------- toast ---------- */
.toast{position:fixed;z-index:900;left:50%;bottom:26px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--ink);color:var(--cream);padding:12px 20px;border-radius:999px;font-size:13px;letter-spacing:.06em;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);transition:opacity .3s,transform .4s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .hdr__nav{display:none}
  .burger{display:block}
  .slides,.stages,.jump{grid-template-columns:repeat(2,1fr)}
  .notes{grid-template-columns:1fr 1fr}
  .note--img{grid-column:1 / -1;order:-1}
}
@media (max-width:700px){
  :root{--hdr:70px}
  .hdr{height:56px;top:10px;padding:0 6px 0 12px}
  .hdr__logo{font-size:16px}
  .hdr__logo img{width:28px;height:28px}
  .hdr__soc .tag-btn{height:38px;padding:0 12px 0 18px}
  .hdr__soc .tag-btn span{display:none}
  .hero{min-height:640px}
  .hero__title{left:22px;right:22px;top:calc(var(--hdr) + 18px)}
  .hero h1{font-size:clamp(64px,22vw,120px)}
  .hero__sub{font-size:21px;margin-top:8px}
  .hero__cta{left:18px;right:18px;bottom:48px;align-items:stretch}
  .spec-label{display:none}
  .buy-wrap{align-self:stretch}
  .btn-pump{width:100%;justify-content:center;height:66px;padding:0 18px}
  .ca{width:100%}
  .ca__v{flex:1}
  .hero__hint{display:none}
  .scroll-cue{display:none}
  .pin__label{left:-56px;top:-104px}
  .pin__line{display:none}
  .ruler--left{width:18px}
  .loupe{display:none}
  .notes,.slides,.stages{grid-template-columns:1fr}
  .note{min-height:0}
  .jump{grid-template-columns:1fr 1fr;gap:12px}
  .jump__btn{min-height:118px;padding:14px}
  .sec__head{flex-direction:column;align-items:flex-start;gap:10px}
  .sec__no{margin-bottom:0}
  .scope{padding:12px}
  .scope__bar{padding:4px 30px 12px}
  .scope__screen{min-height:460px}
  .walk{height:96px}
  .walk__doge{width:48px}
  .zoom__meter{right:calc(4vmin + 30px)}
  .foot__row{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}