/* ═══════════════════════════════════════════
   DEEMKEND · Design System · 2026
   Dark · Amber · Liquid Glass · Grain · Motion
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=Inter:wght@300..600&family=JetBrains+Mono:wght@300..600&display=swap');

/* ── Tokens ──────────────────────────────── */
:root {
  --bg:      #080808;
  --bg2:     #0d0d0b;
  --txt:     #f0ede6;
  --muted:   #3a3a34;
  --muted2:  #76766e;
  --amber:   #c48a28;
  --amber-2: #e6a534;
  --amber-a: rgba(196,138,40,0.11);
  --glass:   rgba(240,237,230,0.042);
  --glass-b: rgba(240,237,230,0.08);
  --glass-s: inset 0 1px 0 rgba(255,255,255,0.055), 0 4px 32px rgba(0,0,0,0.4);
  --ease:    cubic-bezier(0.16,1,0.3,1);
  --ease2:   cubic-bezier(0.87,0,0.13,1);
  --ease3:   cubic-bezier(0.65,0,0.35,1);
  --fd:      'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --fu:      'Inter', 'Space Grotesk', system-ui, sans-serif;
  --fm:      'JetBrains Mono', 'Space Mono', ui-monospace, monospace;
  --pad:     clamp(20px,4.2vw,64px);
}

/* ── Reset ───────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  font-size:16px;
  overflow-x:hidden;
  width:100%;
  /* No scroll-behavior:smooth — it interpolates wheel scroll across
     hundreds of milliseconds, making the wheel feel "drunk" and laggy.
     Anchor jumps (#section links) explicitly opt-in via JS smoothScroll. */
}

/* ═══════════════════════════════════════════
   SCROLL-SNAP — one viewport per section on desktop.
   Each scroll wheel tick = next section.
   Disabled on mobile (touch already paginates naturally).
   ═══════════════════════════════════════════ */
@media (min-width:781px) {
  html { scroll-snap-type: y mandatory; }
}

/* ── Skip-link (keyboard a11y, hidden until focused) ── */
.skip-link {
  position:fixed;
  top:-100px;
  left:50%;
  transform:translateX(-50%);
  z-index:99999;
  padding:14px 22px;
  background:var(--amber);
  color:#0a0a08;
  font-family:var(--fm); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  border-radius:0 0 12px 12px;
  transition:top .25s var(--ease);
  text-decoration:none;
}
.skip-link:focus,
.skip-link:focus-visible {
  top:0;
  outline:2px solid var(--amber-2);
  outline-offset:2px;
}

/* ── Focus-visible — keyboard navigation highlight ── */
*:focus { outline:none; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:2px solid var(--amber-2);
  outline-offset:3px;
  border-radius:3px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ═══════════════════════════════════════════
   PRINT STYLES — clean B&W output, drop decorative chrome
   ═══════════════════════════════════════════ */
@media print {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  body { background:#fff !important; color:#000 !important; cursor:auto !important; }
  body::before, body::after { display:none !important; }
  #cursor, #loader, .curtain, .amb, .scan-tear, .scan-tear-2, .glitch-static,
  .fab, .m-tabbar, .skip-link, .scroll-top, .cookie-bar, #brief, #menu, .burger {
    display:none !important;
  }
  .nav { position:static !important; border-bottom:1px solid #000; padding:14px 24px !important; }
  .nav-logo { color:#000 !important; font-weight:600; }
  a { color:#000 !important; text-decoration:underline !important; }
  .a, .amber, [class*="amber"] { color:#000 !important; }
  h1, h2, h3, h4 { color:#000 !important; page-break-after:avoid; }
  section { page-break-inside:avoid; padding:24px 0 !important; border:none !important; }
  .footer { border-top:1px solid #000; padding:14px 24px !important; color:#000 !important; }
  .footer a { color:#000 !important; }
  /* Show URLs after links when printing */
  a[href^="http"]::after,
  a[href^="mailto:"]::after { content:" (" attr(href) ")"; font-size:.85em; color:#444; }
}

body {
  background:var(--bg);
  color:var(--txt);
  font-family:var(--fu);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  cursor:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#glitch-wrap { overflow-x:hidden; width:100%; }
img,video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; cursor:none; }
button { cursor:none; background:none; border:none; padding:0; color:inherit; font:inherit; }
ul,ol { list-style:none; }

/* Hide native cursor on interactive elements too */
a, button, [data-h], [data-cur] { cursor:none; }

/* ── Grain overlay ───────────────────────── */
body::after {
  content:'';
  position:fixed; inset:0;
  z-index:8000;
  pointer-events:none;
  opacity:0.55;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
  background-size:200px 200px;
  /* Isolate to GPU layer — prevents repaint on every scroll frame */
  transform:translateZ(0);
  will-change:opacity;
  contain:strict;
  width:100vw; height:100vh;
}

/* ═══════════════════════════════════════════
   PAGE GLITCH — dramatic filter-only flicker
   No transform on body (would break fixed positioning).
   Filter inversions, hue-shifts, contrast warps simulate "page malfunction".
   Visual chaos handled by .scan-tear bands (see below).
   Fires ~1s every 11s.
   ═══════════════════════════════════════════ */
@keyframes pageGlitch {
  0%, 90%, 100% { filter:none; }
  90.3% { filter:invert(1) hue-rotate(180deg) contrast(1.2); }
  90.6% { filter:hue-rotate(-120deg) saturate(3.5) contrast(1.3); }
  90.9% { filter:invert(.85) hue-rotate(90deg); }
  91.2% { filter:hue-rotate(200deg) saturate(2.8); }
  91.5% { filter:contrast(1.6) saturate(.2); }
  91.8% { filter:hue-rotate(60deg) saturate(2); }
  92.1% { filter:invert(.4) hue-rotate(20deg); }
  92.4% { filter:none; }
  /* Aftershock */
  93.8% { filter:hue-rotate(140deg) saturate(2.2); }
  94.1% { filter:invert(.5) hue-rotate(40deg); }
  94.3% { filter:none; }
}
/* Applied to #glitch-wrap (injected via JS) so cursor / nav (outside wrap) keep
   fixed-to-viewport positioning unaffected by filter's containing-block effect. */
#glitch-wrap {
  animation:pageGlitch 11s infinite;
  animation-delay:3.5s;
  /* No will-change:filter — that promoted the entire site content to a
     compositor layer, making every paint repaint the whole page on scroll. */
}

/* Body background flash on glitch peak — animates only background-color, so it
   doesn't create a containing block for fixed children (cursor stays anchored). */
@keyframes bodyFlash {
  0%, 90.2%, 90.7%, 100% { background-color:var(--bg); }
  90.3% { background-color:#f0ede6; }
  90.4% { background-color:#1a0d22; }
  90.55% { background-color:#f0ede6; }
  90.65% { background-color:#020208; }
  /* aftershock */
  93.9%, 94.2% { background-color:var(--bg); }
  94.0% { background-color:#2a1432; }
  94.15% { background-color:#0a0a08; }
}
body {
  animation:bodyFlash 11s infinite;
  animation-delay:3.5s;
}

/* Rare ambient tint flash (separate from page jolt, fires at different cycle) */
body::before {
  content:'';
  position:fixed; inset:0;
  z-index:7999;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255, 80, 140, 0.18) 0%,
    rgba(255, 80, 140, 0.04) 18%,
    transparent 38%,
    transparent 62%,
    rgba(80, 200, 255, 0.04) 82%,
    rgba(80, 200, 255, 0.18) 100%);
  opacity:0;
  mix-blend-mode:screen;
  animation:ambTint 7.5s infinite;
  /* Isolate to GPU layer */
  transform:translateZ(0);
  will-change:opacity;
  contain:strict;
  width:100vw; height:100vh;
}
@keyframes ambTint {
  0%, 94%, 100% { opacity:0; }
  94.5% { opacity:.7; }
  95% { opacity:.3; }
  95.4% { opacity:0; }
}

/* Horizontal scan-tear bands — multiple RGB-channel rips during glitch.
   Synchronised with body pageGlitch so they hit at the same moment.
   Bands shift left/right rapidly creating "torn signal" effect. */
@keyframes scanTear {
  0%, 88%, 100% { transform:translate3d(0, -100px, 0); opacity:0; }
  /* main glitch burst — multiple sharp sweeps */
  89%   { transform:translate3d(-40px, 12vh, 0); opacity:.95; }
  89.5% { transform:translate3d(35px, 28vh, 0); opacity:.85; }
  90%   { transform:translate3d(-20px, 45vh, 0); opacity:.9; }
  90.5% { transform:translate3d(28px, 62vh, 0); opacity:.8; }
  91%   { transform:translate3d(-15px, 78vh, 0); opacity:.85; }
  91.5% { transform:translate3d(8px, 95vh, 0); opacity:0; }
  /* aftershock */
  94%   { transform:translate3d(-25px, 30vh, 0); opacity:.7; }
  94.5% { transform:translate3d(18px, 70vh, 0); opacity:.5; }
  95%   { transform:translate3d(0, 105vh, 0); opacity:0; }
}
.scan-tear {
  position:fixed; left:-50px; right:-50px;
  height:60px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255, 60, 130, 0.55) 18%,
    rgba(255, 255, 255, 0.18) 42%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.18) 58%,
    rgba(60, 200, 255, 0.55) 82%,
    transparent 100%);
  z-index:7998;
  pointer-events:none;
  /* No mix-blend-mode: it forces full-viewport recomposite each scroll frame */
  transform:translate3d(0, -100px, 0);
  opacity:0;
  animation:scanTear 11s infinite;
  animation-delay:3.5s;
  will-change:transform, opacity;
  contain:strict;
}

/* Second scan-tear band — opposite-phase RGB, narrower, faster */
@keyframes scanTear2 {
  0%, 89%, 100% { transform:translate3d(0, -100px, 0); opacity:0; }
  89.6% { transform:translate3d(30px, 20vh, 0); opacity:.7; }
  90.1% { transform:translate3d(-25px, 40vh, 0); opacity:.85; }
  90.6% { transform:translate3d(40px, 60vh, 0); opacity:.6; }
  91.1% { transform:translate3d(-10px, 90vh, 0); opacity:.4; }
  91.6% { transform:translate3d(0, 110vh, 0); opacity:0; }
}
.scan-tear-2 {
  position:fixed; left:-30px; right:-30px;
  height:22px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(80, 220, 255, 0.6) 30%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 80, 140, 0.6) 70%,
    transparent 100%);
  z-index:7997;
  pointer-events:none;
  /* No mix-blend-mode: see scan-tear note */
  transform:translate3d(0, -100px, 0);
  opacity:0;
  animation:scanTear2 11s infinite;
  animation-delay:3.5s;
  will-change:transform, opacity;
}

/* Brief static-noise flash overlay during peak glitch */
@keyframes staticFlash {
  0%, 90.3%, 90.7%, 100% { opacity:0; }
  90.4% { opacity:.4; }
  90.55% { opacity:.15; }
  90.65% { opacity:.3; }
}
.glitch-static {
  position:fixed; inset:0;
  z-index:7996;
  pointer-events:none;
  opacity:0;
  /* No mix-blend-mode — paint cost on scroll */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.3  0 0 0 0 0.55  0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:staticFlash 11s infinite;
  animation-delay:3.5s;
  transform:translateZ(0);
  will-change:opacity;
  contain:strict;
  width:100vw; height:100vh;
}

/* ═══════════════════════════════════════════
   CURSOR — circular text with mix-blend-mode
═══════════════════════════════════════════ */
#cursor {
  position:fixed; z-index:9200;
  width:18px; height:18px;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  will-change:left,top,width,height;
  display:flex; align-items:center; justify-content:center;
}
#cursor::before {
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  background:#f0ede6;
  transition:transform .35s var(--ease), background .25s, opacity .3s;
}
#cursor.big   { width:120px; height:120px; }
#cursor.big::before {
  transform:scale(1);
  background:var(--amber-2);
}
#cursor:not(.big)::before { transform:scale(1); }
#cursor.away { opacity:0; }
#cursor svg {
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;
  transform:rotate(0deg);
  transition:opacity .28s var(--ease);
  pointer-events:none;
}
#cursor.big svg { opacity:1; animation:cursorSpin 9s linear infinite; }
#cursor svg text { font-family:var(--fm); font-size:9.5px; letter-spacing:.18em; fill:#0a0a08; text-transform:uppercase; font-weight:500; }
@keyframes cursorSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* ═══════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════ */
#loader {
  position:fixed; inset:0; z-index:9500;
  background:var(--bg);
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  padding:0 var(--pad);
  transition:transform .9s var(--ease2);
}
#loader.gone { transform:translateY(-100%); }
.l-greet {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(80px,14vw,200px);
  line-height:.9;
  color:var(--txt);
  position:relative;
  display:flex; flex-direction:column;
  margin-bottom:8vh;
}
.l-greet span {
  display:block;
  position:relative;
  overflow:hidden;
}
.l-greet span > i {
  display:inline-block;
  font-style:italic;
  transform:translateY(110%);
  animation:lGreet 1.4s var(--ease) forwards;
}
.l-greet span:nth-child(2) > i {
  animation-delay:.18s;
  color:var(--amber-2);
}
@keyframes lGreet {
  from { transform:translateY(110%); }
  to   { transform:translateY(0); }
}
.l-bottom {
  position:absolute; bottom:48px;
  left:var(--pad); right:var(--pad);
  display:flex; align-items:flex-end; justify-content:space-between;
  border-top:1px solid var(--glass-b);
  padding-top:24px;
}
.l-label {
  font-family:var(--fm); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted2);
}
.l-percent {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(40px,5vw,72px); line-height:1;
  color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.l-percent span.unit { font-size:.5em; color:var(--muted2); margin-left:6px; }
.l-bar {
  position:absolute; bottom:0; left:0; right:0;
  height:1px; background:var(--glass-b);
}
.l-bar-fill {
  height:100%; width:0%;
  background:var(--amber-2);
  transition:width .25s linear;
}

/* ═══════════════════════════════════════════
   CURTAIN — triple-layer page transition
═══════════════════════════════════════════ */
.curtain {
  position:fixed; inset:0;
  pointer-events:none;
  z-index:8900;
  transform:translateY(100%);
}
#curtain-1 { background:var(--amber-2); z-index:8920; }
#curtain-2 { background:#f0ede6;        z-index:8910; }
#curtain-3 { background:var(--bg);      z-index:8900; }

/* Outgoing — three slides up in sequence */
.curtain.out-1 { transform:translateY(0); transition:transform .55s var(--ease2); }
.curtain.out-2 { transform:translateY(0); transition:transform .55s var(--ease2) .08s; }
.curtain.out-3 { transform:translateY(0); transition:transform .55s var(--ease2) .16s; }

/* Incoming — slides up off-screen (top) in reverse sequence */
.curtain.in-1 { transform:translateY(-100%); transition:transform .55s var(--ease2) .12s; }
.curtain.in-2 { transform:translateY(-100%); transition:transform .55s var(--ease2) .04s; }
.curtain.in-3 { transform:translateY(-100%); transition:transform .55s var(--ease2); }

/* ── Ambient background ──────────────────── */
.amb {
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.amb-o {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, var(--amber-a) 0%, transparent 65%);
}
.amb-o:nth-child(1) {
  width:85vmax; height:85vmax;
  top:-28%; left:-28%;
  animation:ao1 34s ease-in-out infinite;
}
.amb-o:nth-child(2) {
  width:65vmax; height:65vmax;
  bottom:-22%; right:-22%;
  opacity:0.65;
  animation:ao2 42s ease-in-out infinite;
}
.amb-o:nth-child(3) {
  width:48vmax; height:48vmax;
  top:38%; left:48%;
  background:radial-gradient(circle, rgba(240,237,230,0.016) 0%, transparent 65%);
  animation:ao3 26s ease-in-out infinite;
}
@keyframes ao1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(8vw,11vh)} }
@keyframes ao2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-9vw,-7vh)} }
@keyframes ao3 {
  0%,100%{transform:translate(0,0)}
  33%{transform:translate(-5vw,-8vh)}
  66%{transform:translate(5vw,5vh)}
}

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:600;
  padding:38px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  transition:padding .4s var(--ease), background .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  padding:20px var(--pad);
  /* High-opacity solid bg instead of backdrop-filter blur —
     blur on a fixed element with scrolling content under it is brutal for FPS. */
  background:rgba(8,8,8,0.96);
  border-bottom-color:var(--glass-b);
}
.nav-logo {
  font-family:var(--fm); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt); transition:color .2s;
}
.nav-logo:hover { color:var(--amber); }
.nav-r { display:flex; align-items:center; gap:28px; }

/* Burger */
.burger {
  display:flex; flex-direction:column; gap:6px;
  width:26px; padding:3px 0;
  position:relative;
}
.bl {
  display:block; height:1.5px; background:var(--txt);
  transition:transform .35s var(--ease), opacity .28s, width .35s var(--ease);
}
.bl:last-child { width:55%; }
.burger.on .bl:first-child { transform:translateY(7.5px) rotate(45deg); }
.burger.on .bl:nth-child(2){ opacity:0; transform:scaleX(0); }
.burger.on .bl:last-child   { width:100%; transform:translateY(-7.5px) rotate(-45deg); }

/* ═══════════════════════════════════════════
   FULLSCREEN MENU
═══════════════════════════════════════════ */
#menu {
  position:fixed; inset:0; z-index:590;
  background:#040403;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
#menu.on { opacity:1; pointer-events:all; }
.menu-list li { overflow:hidden; }
.menu-list a {
  display:block;
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(50px,8.5vw,122px); line-height:1.05;
  color:var(--txt);
  transform:translateY(110%);
  transition:transform .55s var(--ease), color .2s;
}
#menu.on .menu-list a { transform:translateY(0); }
.menu-list li:nth-child(1) a { transition-delay:.04s; }
.menu-list li:nth-child(2) a { transition-delay:.09s; }
.menu-list li:nth-child(3) a { transition-delay:.14s; }
.menu-list li:nth-child(4) a { transition-delay:.19s; }
.menu-list li:nth-child(5) a { transition-delay:.24s; }
.menu-list a:hover { color:var(--amber); }
.m-num {
  font-family:var(--fm); font-size:10px; font-style:normal;
  letter-spacing:.1em; color:var(--muted2);
  vertical-align:super; margin-right:10px;
}
.menu-btm {
  position:absolute; bottom:36px; left:var(--pad); right:var(--pad);
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--glass-b); padding-top:24px;
}
.menu-btm-links { display:flex; gap:24px; }
.menu-btm-links a {
  font-family:var(--fm); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted2); transition:color .2s;
}
.menu-btm-links a:hover { color:var(--txt); }
.menu-copy { font-family:var(--fm); font-size:10px; color:var(--muted); letter-spacing:.08em; }

/* ── Glass component ─────────────────────── */
.gc {
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--glass-b);
  box-shadow:var(--glass-s);
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.rv {
  opacity:0;
  transform:translateY(32px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}
.rv.vis { opacity:1; transform:none; }

/* ═══════════════════════════════════════════
   CHAR-MASK reveal (hero entrance)
═══════════════════════════════════════════ */
.cm {
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  line-height:inherit;
  /* Italic ink overhangs both right edge (slant) and below baseline (descenders).
     overflow:hidden would clip both. Pad the inline-block on those sides,
     compensate with negative margin so layout/word-spacing stays natural. */
  padding-right:0.14em;
  margin-right:-0.12em;
  padding-bottom:0.12em;
  margin-bottom:-0.1em;
}
.cm > i {
  display:inline-block;
  font-style:inherit;
  transform:translateY(110%);
  transition:transform 1s var(--ease) var(--cd,0s);
  will-change:transform;
}
/* Hero-only reveal on initial body.ready */
body.ready .hero-title .cm > i,
body.ready .a-hero-title .cm > i,
body.ready .a-hero-label.cm > i { transform:translateY(0); }
/* Scroll-triggered reveal: when ancestor .rv becomes .vis (or self has .vis) */
.rv.vis .cm > i,
.vis .cm > i,
.cm.vis > i { transform:translateY(0); }

/* ═══════════════════════════════════════════
   LABEL / BUTTON
═══════════════════════════════════════════ */
.lbl {
  font-family:var(--fm); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted2);
}

.btn-line {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fm); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--txt); padding-bottom:6px; border-bottom:1px solid var(--glass-b);
  transition:color .2s, border-color .2s, background .25s;
}
.btn-line::after { content:'→'; transition:transform .2s var(--ease); }
.btn-line:hover  { color:var(--amber); border-color:var(--amber); }
.btn-line:hover::after { transform:translateX(5px); }

/* Primary variant — solid amber pill (CTA emphasis) */
.btn-line.primary {
  padding:14px 22px 14px 24px;
  border-radius:100px;
  border:1px solid var(--amber);
  background:var(--amber);
  color:#0a0a08;
}
.btn-line.primary::after { content:'↗'; }
.btn-line.primary:hover {
  background:var(--amber-2);
  border-color:var(--amber-2);
  color:#0a0a08;
}

/* Magnetic wrapper — used on key targets */
.mag {
  display:inline-block;
  transition:transform .35s var(--ease);
  will-change:transform;
}

/* ── Layout ──────────────────────────────── */
.wrap { max-width:1440px; margin:0 auto; padding:0 var(--pad); position:relative; }

/* ── Footer ──────────────────────────────── */
.footer {
  position:relative; z-index:1;
  border-top:1px solid var(--glass-b);
  padding:32px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
}
.footer-l { font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.footer-r { display:flex; gap:22px; }
.footer-r a {
  font-family:var(--fm); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted2); transition:color .2s;
}
.footer-r a:hover { color:var(--txt); }

/* ── Placeholder ─────────────────────────── */
.ph {
  background:repeating-linear-gradient(
    -45deg,
    rgba(240,237,230,0.025) 0,rgba(240,237,230,0.025) 1px,
    transparent 1px, transparent 11px
  ), var(--bg2);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--glass-b); overflow:hidden;
}
.ph-label {
  font-family:var(--fm); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted2); text-align:center;
  padding:12px;
}

/* ═══════════════════════════════════════════
   DESCRIPTION-BLOCK HOVER GLITCH
   Brief RGB-split text-shadow on titles when their container hovers.
   Body text never affected.
═══════════════════════════════════════════ */
.p-feat:hover .p-feat-t,
.p-step:hover .p-step-name,
.p-under-item:hover .p-under-n,
.svc-col:hover .svc-t,
.skill-card:hover .skill-name,
.val-item:hover .val-name {
  animation:descGlitch .7s steps(4) 1;
}
@keyframes descGlitch {
  0%, 100% { text-shadow:none; transform:translate3d(0,0,0); }
  12%      { text-shadow:-2px 0 #ff4d7e, 2px 0 #4dd4ff; transform:translate3d(-1px,0,0); }
  28%      { text-shadow:none; transform:translate3d(0,0,0); }
  44%      { text-shadow:1px 0 #ff4d7e, -1px 0 #4dd4ff; transform:translate3d(1px,0,0); }
  60%      { text-shadow:none; transform:translate3d(0,0,0); }
  78%      { text-shadow:-1px 0 #ff4d7e, 1px 0 #4dd4ff; transform:translate3d(0,0,0); }
}

/* Subtle accent ring on hover */
.p-feat:hover,
.p-step:hover,
.p-under-item:hover,
.svc-col:hover {
  background:rgba(240,237,230,0.045);
}

/* ═══════════════════════════════════════════
   ITALIC INK OVERHANG — global right-padding for italic display.
   Fraunces italic letters extend visually past their em-box on the right.
   Without padding, last char (M, D, N, etc.) gets sliced by any
   overflow:hidden ancestor or by viewport edge.
═══════════════════════════════════════════ */
.hero-title,
.a-hero-title,
.p-hero-title,
.p-sec-title,
.p-next-name,
.work-name,
.works-title,
.about-big,
.bio-intro,
.cta-big,
.s-cta-big,
.s-sec-title,
.s-hero-title,
.svc-pkg-name,
.process-step-t,
.faq-q,
.rate-num,
.rate-teaser-num,
.rate-teaser-side h3,
.rate-cat-name,
.l-hero-title,
.l-sec-title,
.l-info-val,
.menu-list a,
.l-greet,
.l-percent,
.svc-t,
.val-name,
.p-feat-t,
.p-step-name,
.p-under-n,
.sec-title,
.bio-portrait-tag .lbl {
  padding-right:0.08em;
  padding-bottom:0.06em;
}

/* ── Utility ─────────────────────────────── */
.clr-amber { color:var(--amber); }
.italic    { font-style:italic; }

/* ═══════════════════════════════════════════
   COOKIE BAR — fixed bottom (above FAB on desktop, above tabbar on mobile)
   ═══════════════════════════════════════════ */
.cookie-bar {
  position:fixed;
  bottom:24px; left:24px; right:24px;
  z-index:705;
  max-width:680px;
  margin:0 auto;
  background:rgba(12,12,10,0.92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-b);
  border-radius:18px;
  padding:18px 22px;
  box-shadow:0 24px 60px -16px rgba(0,0,0,0.6);
  opacity:0;
  transform:translateY(20px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.cookie-bar.on { opacity:1; transform:translateY(0); }
.cookie-bar-inner {
  display:flex; align-items:center; gap:18px;
  flex-wrap:wrap; justify-content:space-between;
}
.cookie-bar-t {
  flex:1; min-width:240px;
  font-size:13px; line-height:1.55;
  color:var(--muted2);
}
.cookie-bar-t strong { color:var(--txt); font-weight:500; }
.cookie-bar-t a { color:var(--amber); border-bottom:1px solid rgba(196,138,40,0.4); }
.cookie-bar-t a:hover { color:var(--amber-2); }
.cookie-bar-btns { display:flex; gap:10px; flex-shrink:0; }
.cookie-bar-btn {
  padding:10px 18px; border-radius:100px;
  font-family:var(--fm); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--glass-b);
  background:transparent;
  color:var(--txt);
  cursor:none;
  transition:background .25s, border-color .25s, color .25s;
}
.cookie-bar-btn.ghost { color:var(--muted2); }
.cookie-bar-btn.ghost:hover { color:var(--txt); border-color:rgba(255,255,255,0.18); }
.cookie-bar-btn.primary {
  background:var(--amber); border-color:var(--amber); color:#0a0a08;
}
.cookie-bar-btn.primary:hover { background:var(--amber-2); border-color:var(--amber-2); }

@media (max-width:780px) {
  .cookie-bar { left:12px; right:12px; bottom:90px; padding:14px 16px; border-radius:14px; }
  .cookie-bar-inner { flex-direction:column; align-items:stretch; gap:12px; }
  .cookie-bar-t { font-size:12px; line-height:1.5; }
  .cookie-bar-btns { width:100%; }
  .cookie-bar-btn { flex:1; padding:11px 12px; font-size:9.5px; }
}

/* ═══════════════════════════════════════════
   SCROLL-TO-TOP button (subtle, bottom-left)
   ═══════════════════════════════════════════ */
.scroll-top {
  position:fixed;
  bottom:28px; left:28px;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(12,12,10,0.88);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-b);
  color:var(--muted2);
  font-family:var(--fd); font-style:italic; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:none;
  z-index:680;
  opacity:0;
  transform:translateY(20px) scale(.9);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             color .25s, border-color .25s, background .25s;
}
.scroll-top.on {
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.scroll-top:hover {
  color:var(--amber);
  border-color:rgba(196,138,40,0.45);
  background:rgba(196,138,40,0.08);
}

@media (max-width:780px) {
  .scroll-top { display:none; }
}

/* Visually hidden for screen readers only */
.visually-hidden {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ═══════════════════════════════════════════
   FAB — floating contact button (bottom-right, all screens)
   Expandable: tap main button → 3 sub-buttons unfold above
   (Telegram, Email, Brief). Injected via portfolio.js.
   ═══════════════════════════════════════════ */
.fab {
  position:fixed;
  bottom:28px; right:28px;
  z-index:710;
  display:flex; flex-direction:column-reverse;
  align-items:flex-end; gap:14px;
}
.fab-trigger {
  width:64px; height:64px;
  border-radius:50%;
  background:var(--amber);
  color:#0a0a08;
  border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:500;
  cursor:none;
  box-shadow:0 18px 50px -10px rgba(196,138,40,0.55),
             0 0 0 1px rgba(255,255,255,0.08) inset;
  transition:transform .35s var(--ease), box-shadow .35s, background .25s;
  will-change:transform;
}
.fab-trigger:hover {
  transform:scale(1.06);
  background:var(--amber-2);
  box-shadow:0 22px 60px -10px rgba(230,165,52,0.7),
             0 0 0 1px rgba(255,255,255,0.12) inset;
}
.fab-trigger-ico {
  display:inline-block;
  transition:transform .45s var(--ease);
  font-family:var(--fd); font-style:italic;
}
.fab.on .fab-trigger-ico { transform:rotate(135deg); }

.fab-actions {
  display:flex; flex-direction:column-reverse; gap:10px;
  margin-bottom:0;
  pointer-events:none;
  opacity:0;
  transform:translateY(12px) scale(.96);
  transform-origin:bottom right;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.fab.on .fab-actions {
  opacity:1; pointer-events:auto;
  transform:translateY(0) scale(1);
}
.fab-action {
  display:inline-flex; align-items:center; gap:14px;
  padding:12px 22px 12px 18px;
  border-radius:100px;
  background:rgba(12,12,10,0.92);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(240,237,230,0.1);
  color:var(--txt);
  font-family:var(--fm); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 12px 30px -8px rgba(0,0,0,0.5);
  transition:transform .25s var(--ease), color .25s, border-color .25s;
}
.fab-action:hover {
  transform:translateX(-3px);
  color:var(--amber);
  border-color:rgba(196,138,40,0.4);
}
.fab-action-ico {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(196,138,40,0.18);
  color:var(--amber-2);
  font-family:var(--fd); font-style:italic;
  font-size:14px;
  flex-shrink:0;
}

/* On mobile FAB is HIDDEN — contact actions live in the tab bar's
   «Связаться» popover instead (.m-contact-pop). */
@media (max-width: 780px) {
  .fab { display:none !important; }
}

/* ═══════════════════════════════════════════
   MOBILE CONTACT POPOVER — anchored above the tab bar.
   Triggered by the «Связаться» tab. Visible only on mobile.
   ═══════════════════════════════════════════ */
.m-contact-pop { display:none; }

@media (max-width: 780px) {
  .m-contact-pop {
    display:flex; flex-direction:column;
    gap:8px;
    position:fixed;
    bottom:88px; right:14px;
    z-index:705;
    padding:10px;
    background:rgba(12,12,10,0.94);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(240,237,230,0.10);
    border-radius:18px;
    box-shadow:0 24px 60px -12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
    opacity:0;
    transform:translateY(12px) scale(.96);
    transform-origin:bottom right;
    pointer-events:none;
    transition:opacity .25s var(--ease), transform .3s var(--ease);
  }
  .m-contact-pop.on {
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .m-contact-action {
    display:flex; align-items:center; gap:12px;
    padding:11px 18px 11px 12px;
    background:rgba(255,255,255,0.025);
    border:1px solid rgba(240,237,230,0.08);
    border-radius:100px;
    font-family:var(--fm);
    font-size:10.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--txt);
    text-decoration:none;
    cursor:pointer;
    transition:background .25s, border-color .25s, transform .2s;
    white-space:nowrap;
  }
  .m-contact-action:hover {
    background:rgba(196,138,40,0.10);
    border-color:rgba(196,138,40,0.35);
    transform:translateX(-2px);
  }
  .m-contact-action-ico {
    width:28px; height:28px;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(196,138,40,0.15);
    border:1px solid rgba(196,138,40,0.35);
    color:var(--amber);
    border-radius:50%;
    font-size:13px; font-family:var(--fd); font-style:italic;
    flex-shrink:0;
  }
  /* Active state hint on the «Связаться» button while popover is open */
  .m-tab-contact[aria-expanded="true"] {
    background:rgba(196, 138, 40, 0.16);
    color:var(--amber-2);
  }
}

/* ═══════════════════════════════════════════
   BRIEF MODAL — full-screen, 5-step form
   Slides up from bottom, dark glass.
   ═══════════════════════════════════════════ */
#brief {
  position:fixed; inset:0;
  z-index:9100;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s var(--ease);
  background:rgba(4,4,4,0.85);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
#brief.on { opacity:1; pointer-events:auto; }

.brief-sheet {
  width:100%; max-width:780px;
  max-height:min(92svh, 880px);
  margin:0 auto;
  background:#0a0a08;
  border:1px solid var(--glass-b);
  border-radius:20px;
  display:flex; flex-direction:column;
  overflow:hidden;
  transform:translateY(24px) scale(.96);
  opacity:0;
  transition:transform .5s var(--ease), opacity .4s var(--ease);
  box-shadow:0 30px 90px -20px rgba(0,0,0,0.7),
             0 0 0 1px rgba(255,255,255,0.04) inset;
}
#brief.on .brief-sheet {
  transform:translateY(0) scale(1);
  opacity:1;
}

.brief-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px 18px;
  border-bottom:1px solid var(--glass-b);
  position:relative;
}
.brief-hdr-l {
  display:flex; flex-direction:column; gap:4px;
}
.brief-hdr-step {
  font-family:var(--fm); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted2);
}
.brief-hdr-title {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:22px; line-height:1.1; color:var(--txt);
}
.brief-close {
  width:36px; height:36px; border-radius:50%;
  background:transparent; border:1px solid var(--glass-b);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--fm); font-size:16px; color:var(--muted2);
  cursor:none;
  transition:background .25s, color .25s, border-color .25s;
}
.brief-close:hover { background:rgba(255,255,255,0.04); color:var(--txt); border-color:var(--glass-b); }

.brief-progress {
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:rgba(255,255,255,0.04);
}
.brief-progress-fill {
  height:100%; width:20%;
  background:var(--amber);
  transition:width .4s var(--ease);
}

.brief-body {
  flex:1;
  overflow-y:auto;
  padding:32px 28px 24px;
  -webkit-overflow-scrolling:touch;
}
.brief-step { display:none; flex-direction:column; gap:20px; }
.brief-step.on { display:flex; }
.brief-step-q {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(26px,4vw,42px); line-height:1.05;
  color:var(--txt);
}
.brief-step-q .a { color:var(--amber); }
.brief-step-sub {
  font-family:var(--fm); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted2);
  margin-top:-4px;
}

.brief-options {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:8px;
}
.brief-option {
  display:flex; flex-direction:column; gap:6px;
  padding:18px 18px;
  border-radius:14px;
  border:1px solid var(--glass-b);
  background:rgba(255,255,255,0.015);
  cursor:none;
  transition:background .2s, border-color .2s, transform .2s;
  text-align:left;
}
.brief-option:hover {
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.18);
}
.brief-option.sel {
  background:rgba(196,138,40,0.1);
  border-color:rgba(196,138,40,0.45);
}
.brief-option-t {
  font-family:var(--fu); font-weight:500; font-size:14px;
  color:var(--txt);
}
.brief-option.sel .brief-option-t { color:var(--amber); }
.brief-option-d {
  font-family:var(--fm); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted2);
}

.brief-input,
.brief-textarea {
  width:100%;
  padding:16px 18px;
  background:rgba(255,255,255,0.025);
  border:1px solid var(--glass-b);
  border-radius:12px;
  color:var(--txt);
  font-family:var(--fu); font-size:14px; font-weight:400;
  line-height:1.55;
  resize:none;
  outline:none;
  transition:border-color .25s, background .25s;
  cursor:none;
}
.brief-input::placeholder,
.brief-textarea::placeholder {
  color:rgba(240,237,230,0.32);
}
.brief-input:focus,
.brief-textarea:focus {
  border-color:rgba(196,138,40,0.5);
  background:rgba(255,255,255,0.045);
}
.brief-textarea { min-height:120px; }

.brief-counter {
  font-family:var(--fm); font-size:10px;
  letter-spacing:.12em; color:var(--muted2);
  text-align:right;
  margin-top:-6px;
}

.brief-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px 24px;
  border-top:1px solid var(--glass-b);
  gap:14px;
}
.brief-foot-l { display:flex; align-items:center; gap:6px; }
.brief-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.12);
  transition:background .25s, transform .25s;
}
.brief-dot.active { background:var(--amber); transform:scale(1.3); }
.brief-dot.done { background:rgba(196,138,40,0.5); }

.brief-btns { display:flex; align-items:center; gap:8px; }
.brief-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px;
  border-radius:100px;
  font-family:var(--fm); font-size:10px;
  letter-spacing:.15em; text-transform:uppercase;
  cursor:none;
  border:1px solid var(--glass-b);
  background:transparent;
  color:var(--txt);
  transition:background .25s, border-color .25s, color .25s, opacity .2s;
}
.brief-btn.primary {
  background:var(--amber);
  border-color:var(--amber);
  color:#0a0a08;
}
.brief-btn:hover { color:var(--amber); border-color:rgba(196,138,40,0.5); }
.brief-btn.primary:hover { background:var(--amber-2); border-color:var(--amber-2); color:#0a0a08; }
.brief-btn.disabled { opacity:.35; pointer-events:none; }
.brief-btn::after { content:'→'; }
.brief-btn.back::after { content:''; }
.brief-btn.back::before { content:'←'; margin-right:0; }
.brief-btn.submit::after { content:'↗'; }

/* Success state */
.brief-done {
  display:none;
  flex-direction:column; align-items:center;
  text-align:center;
  padding:60px 28px;
  gap:18px;
}
.brief-done.on { display:flex; }
.brief-done-mark {
  width:72px; height:72px; border-radius:50%;
  background:rgba(196,138,40,0.18);
  border:1px solid rgba(196,138,40,0.4);
  color:var(--amber-2);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-style:italic; font-size:32px;
}
.brief-done-t {
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(28px,5vw,48px); line-height:1.05; color:var(--txt);
}
.brief-done-t .a { color:var(--amber); }
.brief-done-d {
  font-size:13px; line-height:1.7; color:var(--muted2);
  max-width:420px;
}

@media (max-width: 780px) {
  #brief { align-items:center; padding:12px; }
  .brief-sheet {
    max-height:94svh;
    max-width:none;
    border-radius:18px;
    transform:translateY(24px) scale(.96);
  }
  #brief.on .brief-sheet { transform:translateY(0) scale(1); }
  .brief-hdr { padding:18px 20px 14px; }
  .brief-hdr-title { font-size:18px; }
  .brief-body { padding:24px 20px 16px; }
  .brief-step-q { font-size:clamp(22px,7vw,32px); }
  .brief-options { grid-template-columns:1fr; }
  .brief-foot { padding:14px 20px 20px; flex-direction:column; gap:14px; align-items:stretch; }
  .brief-foot-l { justify-content:center; }
  .brief-btns { width:100%; justify-content:space-between; }
  .brief-btn { flex:1; justify-content:center; }
}

/* ═══════════════════════════════════════════
   MOBILE TAB BAR — bottom pill nav, mobile-only
   Injected via portfolio.js. Active state by URL match.
   ═══════════════════════════════════════════ */
.m-tabbar { display:none; }

@media (max-width: 780px) {
  .m-tabbar {
    position:fixed;
    bottom:14px;
    left:14px;
    right:14px;
    z-index:700;
    display:flex;
    align-items:flex-end;
    height:62px;
    padding:5px;
    background:rgba(12, 12, 10, 0.88);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(240, 237, 230, 0.08);
    border-radius:100px;
    box-shadow:0 18px 50px -10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .m-tab {
    flex:1;
    height:100%;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:3px;
    border-radius:100px;
    border:none;
    background:transparent;
    font-family:var(--fm);
    font-size:8.5px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted2);
    transition:color .25s, background .25s;
    text-align:center;
    white-space:nowrap;
    padding:0 2px;
    cursor:pointer;
  }
  .m-tab:hover { color:var(--txt); }
  .m-tab.active {
    background:rgba(196, 138, 40, 0.16);
    color:var(--amber-2);
  }
  .m-tab-ico {
    font-size:17px;
    line-height:1;
    font-style:italic;
    font-family:var(--fd);
    font-weight:300;
  }

  /* Elevated center "Бриф" button — overlaps the bar top edge */
  .m-tab.m-tab-c {
    flex:0 0 64px;
    width:64px;
    height:64px;
    margin-top:-30px;
    margin-left:6px;
    margin-right:6px;
    border-radius:50%;
    background:var(--amber);
    color:#0a0a08;
    box-shadow:0 14px 30px -6px rgba(196,138,40,0.55),
               0 0 0 4px rgba(12,12,10,0.95);
    gap:1px;
    font-size:0;
  }
  .m-tab.m-tab-c:hover,
  .m-tab.m-tab-c.active {
    background:var(--amber-2);
    color:#0a0a08;
  }
  .m-tab.m-tab-c .m-tab-ico {
    font-size:22px;
    color:#0a0a08;
  }
  .m-tab.m-tab-c span:last-child {
    font-size:7.5px;
    letter-spacing:.1em;
    color:#0a0a08;
    font-weight:500;
    margin-top:1px;
  }

  /* Lift content off the tabbar */
  body { padding-bottom:90px; }
}

/* ═══════════════════════════════════════════
   TOUCH DEVICES — disable custom cursor, restore native
   ═══════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  body, a, button, [data-h], [data-cur] { cursor:auto; }
  a, button { cursor:pointer; }
  #cursor { display:none !important; }
  /* Magnetic and parallax also useless on touch */
  [data-mag], [data-px] { transform:none !important; }
}

/* ═══════════════════════════════════════════
   MOBILE — universal sizing fixes
   ═══════════════════════════════════════════ */
@media (max-width: 780px) {
  :root {
    --pad: clamp(16px, 5vw, 28px);
  }
  /* Loader — shrink greet text */
  .l-greet { font-size: clamp(48px, 15vw, 120px); margin-bottom:6vh; }
  .l-bottom { bottom:32px; padding-top:18px; }
  .l-percent { font-size: clamp(32px, 9vw, 56px); }
  .l-label { font-size:9px; }

  /* Nav — tighter */
  .nav { padding:24px var(--pad); }
  .nav.scrolled { padding:14px var(--pad); }
  .nav-logo { font-size:10px; letter-spacing:.2em; }
  .nav-r { gap:18px; }

  /* Menu — large but fitting */
  .menu-list a { font-size: clamp(40px, 11vw, 80px); }
  .menu-btm { bottom:24px; padding-top:18px; flex-direction:column; gap:14px; align-items:flex-start; }
  .menu-btm-links { gap:18px; flex-wrap:wrap; }

  /* Glitch — softer on mobile to avoid jank */
  #glitch-wrap { animation-duration:14s; }
  body { animation-duration:14s; }
  .scan-tear, .scan-tear-2, .glitch-static { animation-duration:14s; }

  /* Footer — stack */
  .footer { flex-direction:column; gap:16px; align-items:flex-start; padding:24px var(--pad); }
  .footer-r { flex-wrap:wrap; gap:14px; }

  /* Marquee removed */

  /* Description-block hover glitch — no hover on touch, so animation never fires. Safe. */
}

@media (max-width: 420px) {
  :root { --pad: 14px; }
  .l-greet { font-size: clamp(40px, 13vw, 80px); }
}