/* ═══════════════════════════════════════════════════════
   MANU REJIMON — EXPERIMENTAL CINEMATIC WORLD ENGINE
   PRECISION REFINEMENT PASS v2
   Spatial direction. Typography as architecture.
   Anti-grid. Immersive. Not a website. A dimension.
   ═══════════════════════════════════════════════════════ */

:root {
  /* VOID CORE */
  --void:  #040406;
  --deep:  #060810;
  --abyss: #02030a;

  /* LIGHT WORLD */
  --paper: #EDE9E0;
  --paper2: #F4F0E8;

  /* GOLD — primary energy color */
  --gold:  #C4973F;
  --gold2: #E8B85A;
  --gold3: rgba(196,151,63,.15);

  /* SCENE ATMOSPHERES */
  --atm-hero:   rgba(20,40,80,.6);
  --atm-lex:    rgba(10,20,50,.8);
  --atm-skills: rgba(0,12,28,.9);
  --atm-contact:rgba(4,8,22,.85);

  /* ACCENTS */
  --cyan:  rgba(80,180,220,.7);
  --blue:  rgba(60,100,200,.4);
  --green: #4ade80;

  /* TYPE COLORS */
  --w:   #ECEAE4;
  --w7:  rgba(236,234,228,.72);
  --w5:  rgba(236,234,228,.5);
  --w3:  rgba(236,234,228,.28);
  --w1:  rgba(236,234,228,.1);
  --w05: rgba(236,234,228,.05);
  --rim: rgba(236,234,228,.07);
  --rim2:rgba(236,234,228,.13);

  /* FONTS */
  --FD: 'Bebas Neue', sans-serif;
  --FH: 'Bricolage Grotesque', sans-serif;
  --FS: 'Cormorant Garamond', serif;
  --FM: 'DM Mono', monospace;

  /* EASING */
  --e:  cubic-bezier(.16,1,.3,1);
  --ei: cubic-bezier(.7,0,.84,0);
  --es: cubic-bezier(.25,.46,.45,.94);
}

/* ═══ RESET ═══ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:hidden; scroll-behavior:auto; }
body {
  font-family: var(--FH);
  background: var(--abyss);
  color: var(--w);
  cursor: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══ UTILITIES ═══ */
.g        { color: var(--gold) !important; }
.mono     { font-family: var(--FM) !important; }
.serif-it { font-family: var(--FS); font-style: italic; }
.dim      { color: var(--w3) !important; }
.w        { color: var(--w) !important; }

/* ═══════════════════════════════════════════
   PERSISTENT WORLD LAYER
   ═══════════════════════════════════════════ */

#world-canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none; opacity: .45;
}

/* GRAIN — organic texture */
#grain {
  position: fixed; inset: 0; z-index: 9100;
  pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  animation: grainShift .55s steps(1) infinite;
}
@keyframes grainShift {
  0%  { background-position:0 0 }
  20% { background-position:-42px 18px }
  40% { background-position:22px -28px }
  60% { background-position:32px 12px }
  80% { background-position:-14px 32px }
}

/* VIGNETTE */
#vignette {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 110% 110% at 50% 50%,
    transparent 30%, rgba(4,4,6,.8) 100%);
}

/* CHROMATIC ABERRATION — ultra-subtle */
#chroma {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  background: 
    radial-gradient(ellipse 100% 100% at 0% 0%, rgba(255,0,80,.012) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 100% 100%, rgba(0,150,255,.01) 0%, transparent 60%);
  mix-blend-mode: screen;
}

/* ═══ CURSOR ═══ */
#c-dot, #c-ring, #c-trail {
  position: fixed; pointer-events: none; z-index: 9200;
  border-radius: 50%; transform: translate(-50%,-50%);
}
#c-dot {
  width: 4px; height: 4px;
  background: var(--gold); will-change: transform;
}
#c-ring {
  width: 26px; height: 26px;
  border: 1px solid rgba(196,151,63,.5);
  will-change: transform;
  transition: width .3s var(--e), height .3s var(--e), border-color .3s, background .3s;
}
#c-trail {
  width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(196,151,63,.04) 0%, transparent 70%);
  will-change: transform;
}
body.ch #c-ring {
  width: 50px; height: 50px;
  border-color: var(--gold); background: rgba(196,151,63,.05);
}
body.ch #c-dot { background: var(--w); }
body.ck #c-dot { transform: translate(-50%,-50%) scale(3); }

/* ═══ VERTICAL PROGRESS SPINE ═══ */
#v-progress {
  position: fixed; left: 0; top: 0; bottom: 0; width: 2px;
  z-index: 300; background: var(--rim); overflow: visible;
}
#vp-line {
  position: absolute; left: 0; right: 0; top: 0; height: 0%;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  transition: height .08s linear;
}
#vp-scene-label {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%) rotate(-90deg) translateX(-50%);
  transform-origin: left center;
  font-size: .4rem; letter-spacing: .28em;
  color: var(--w3); white-space: nowrap;
  transition: opacity .4s;
}

/* ═══ NAV ═══ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; height: 50px;
  z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px 0 20px;
  transition: background .5s, border-color .5s;
}
#nav.s {
  background: rgba(4,4,6,.92);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--rim);
}
.n-sig {
  font-family: var(--FM); font-size: .75rem;
  letter-spacing: .08em; color: var(--w); text-decoration: none;
}
.n-sig:hover .g { color: var(--w) !important; }
#n-status {
  font-size: .5rem; letter-spacing: .2em; color: var(--w3);
  animation: statusPulse 4s ease-in-out infinite;
}
@keyframes statusPulse {
  0%,100% { opacity: .4 } 50% { opacity: .9 }
}
.n-hello {
  font-size: .58rem; letter-spacing: .1em;
  text-decoration: none; color: var(--abyss);
  background: var(--w); padding: 6px 15px;
  transition: background .25s, color .25s;
}
.n-hello:hover { background: var(--gold); color: var(--abyss); }

/* ═══════════════════════════════════════════
   WORLD BASE
   ═══════════════════════════════════════════ */
.world {
  position: relative; min-height: 100svh; overflow: hidden;
}
.w-dark  { background: var(--deep); }
.w-void  { background: var(--abyss); }
.w-identity { background: var(--paper2); color: #040406; }
.w-light { background: var(--paper); color: #040406; }

/* ═══════════════════════════════════════════
   SCENE CUTS — cinematic transitions
   ═══════════════════════════════════════════ */
.scene-cut {
  position: relative; height: 60px; overflow: hidden;
  display: flex; align-items: center; z-index: 2;
}
.scene-cut .mono {
  font-size: .46rem; letter-spacing: .28em;
  color: var(--w3); padding-left: 32px; z-index: 1;
}
.sc-a {
  background: linear-gradient(170deg, var(--void) 60%, var(--paper2) 100%);
}
.sca-diag {
  position: absolute; right: 0; top: 0; bottom: 0; width: 40%;
  background: var(--paper2); clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.sc-b { background: var(--deep); border-top: 1px solid var(--rim); }
.scb-line { position:absolute; left:0; right:0; top:50%; height:1px; background: linear-gradient(90deg, transparent, var(--rim2), transparent); }
.scb-blip {
  position:absolute; right:80px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; background:var(--gold); border-radius:50%;
  box-shadow: 0 0 8px var(--gold); animation: blipPulse 2s infinite;
}
@keyframes blipPulse { 0%,100%{opacity:1}50%{opacity:.2} }
.sc-c { background: linear-gradient(to right, var(--deep) 40%, var(--abyss) 100%); }
.sc-d { background: var(--abyss); border-top: 1px solid var(--rim); }
.sc-e { background: linear-gradient(to right, var(--deep), var(--paper) 80%); }
.sc-e .mono { color: rgba(5,5,5,.3); }
.sc-f { background: linear-gradient(to right, var(--paper), var(--deep) 60%); }
.sc-f .mono { color: var(--w3); }

/* ═══════════════════════════════════════════
   WORLD 0 — LOADER
   ═══════════════════════════════════════════ */
#zero {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--void); overflow: hidden;
}
#zero.out { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.3s var(--ei), visibility 1.3s; }
#lc { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Corner diagnostics */
.l-tl, .l-tr, .l-bl, .l-br {
  position: absolute; font-family: var(--FM);
  font-size: .46rem; letter-spacing: .2em; color: var(--w3);
}
.l-tl { top: 22px; left: 28px; }
.l-tr { top: 22px; right: 28px; }
.l-bl { bottom: 44px; left: 28px; }
.l-br { bottom: 44px; right: 28px; }

/* Diagnostic scan lines */
.l-scan-h {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,151,63,.15), transparent);
}
.l-sh1 { top: 33%; }
.l-sh2 { top: 66%; }
.l-scan-v {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(196,151,63,.1), transparent);
}
.l-sv1 { left: 40%; }

/* Giant counter — offset slightly right of center */
.l-center {
  position: absolute; left: 52%; top: 50%; transform: translate(-50%,-52%);
  display: flex; align-items: flex-end; gap: 6px;
}
.l-n {
  font-family: var(--FD);
  font-size: clamp(10rem, 28vw, 26rem);
  line-height: .9; letter-spacing: -.04em;
  color: var(--w); font-variant-numeric: tabular-nums;
  will-change: contents;
}
.l-pct { font-family: var(--FM); font-size: 2rem; margin-bottom: 2rem; }

/* Init label */
.l-init {
  position: absolute; bottom: 22px; left: 30%;
  font-size: .48rem; letter-spacing: .24em; color: var(--w3);
}
.l-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--rim);
}
#l-fill { height: 100%; background: var(--gold); width: 0; transition: width .04s linear; }

/* Diagonal accent */
.l-diag {
  position: absolute; bottom: 0; left: 0;
  width: 200px; height: 200px;
  background: linear-gradient(135deg, transparent 60%, rgba(196,151,63,.04) 100%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   WORLD 1 — HERO
   FIX: Consistent typography, balanced composition
   ═══════════════════════════════════════════ */
#one { background: var(--void); }

.w-atm {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
.atm-glow {
  position: absolute; border-radius: 50%; filter: blur(100px);
  animation: atmDrift 24s ease-in-out infinite;
}
.a1 {
  width: 700px; height: 700px; top: -250px; right: -150px;
  background: radial-gradient(circle, rgba(196,151,63,.09) 0%, transparent 65%);
}
.a2 {
  width: 500px; height: 500px; bottom: 0; left: -120px;
  background: radial-gradient(circle, rgba(40,80,200,.07) 0%, transparent 65%);
  animation-delay: 7s; animation-direction: reverse;
}
.a3 {
  width: 350px; height: 350px; top: 30%; left: 35%;
  background: radial-gradient(circle, rgba(196,151,63,.055) 0%, transparent 65%);
  animation-delay: 14s;
}
.a4 {
  width: 200px; height: 200px; bottom: 20%; right: 20%;
  background: radial-gradient(circle, rgba(60,180,220,.04) 0%, transparent 65%);
  animation-delay: 4s;
}
@keyframes atmDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-40px) scale(1.07); }
  66%      { transform: translate(-20px,25px) scale(.93); }
}

.atm-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--rim) 1px, transparent 1px),
    linear-gradient(90deg, var(--rim) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 88% 88% at 55% 50%, black 25%, transparent 100%);
}
.atm-hline {
  position: absolute; left: 0; right: 0; top: 48%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,151,63,.1) 40%, transparent);
}
.atm-vline {
  position: absolute; left: 22%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--rim), transparent);
}

/* ── HERO NAME — FIX: unified Bebas Neue, inset from edge, balanced ── */
.hero-name-wrap {
  position: absolute;
  left: 4%; top: 50%; transform: translateY(-52%);
  z-index: 2; pointer-events: none;
  width: 92%;
  will-change: transform;
}

/* MANU — cinematic scale, inset, unified display font */
.hn-manu {
  font-family: var(--FD);
  font-size: clamp(6rem, 17vw, 17rem);
  line-height: .86; letter-spacing: -.02em;
  color: var(--w); white-space: nowrap;
  display: block; will-change: transform;
}

/* REJIMON — unified style: same family, slightly smaller, gold accent on period only */
.hn-rejimon {
  display: block;
  padding-left: .1em;
  font-family: var(--FD);
  font-size: clamp(5.2rem, 14.5vw, 14.5rem);
  line-height: .86; letter-spacing: -.02em;
  color: var(--w7); white-space: nowrap;
  will-change: transform;
}
/* All sub-spans unified to display treatment — no mixed serif chaos */
.hnr-re, .hnr-ji, .hnr-mon {
  font-family: var(--FD);
  font-style: normal;
  font-size: 1em;
  color: inherit;
  letter-spacing: inherit;
}
/* Gold accent only on the period — preserved from original intent */
.hn-rejimon .g { color: var(--gold) !important; }

/* Role — vertical, left spine */
.hero-role-vert {
  position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  will-change: transform, opacity;
}
.hero-role-vert .mono {
  font-size: .42rem; letter-spacing: .22em; color: var(--w3);
  writing-mode: vertical-rl; text-orientation: mixed;
  white-space: nowrap;
}
.hrv-line { width: 1px; height: 40px; background: var(--rim2); }

/* Floating coord fragment — upper right */
.f-coord {
  position: absolute; top: 80px; right: 60px; z-index: 3;
  font-size: .52rem; letter-spacing: .1em; color: var(--w3);
  text-align: right;
  will-change: transform, opacity;
}
.fc-cross {
  position: absolute; top: -14px; right: -14px; width: 24px; height: 24px;
}
.fc-cross::before, .fc-cross::after {
  content: ''; position: absolute; background: rgba(196,151,63,.3);
}
.fc-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.fc-cross::after  { top: 50%; left: 0; right: 0; height: 1px; }

/* Status chip */
.f-status {
  position: absolute; top: 98px; left: 56px; z-index: 3;
  display: flex; align-items: center; gap: 7px;
  font-size: .52rem; letter-spacing: .1em; color: var(--w3);
  font-family: var(--FM);
  will-change: transform, opacity;
}
.fs-dot { width: 5px; height: 5px; background: var(--green); border-radius: 50%; animation: blipPulse 2.2s infinite; }

/* HUD — bottom right */
.hero-hud {
  position: absolute; bottom: 72px; right: 64px; z-index: 3;
  border: 1px solid var(--rim2);
  background: rgba(236,234,228,.028); backdrop-filter: blur(14px);
  padding: 16px 22px; min-width: 220px;
  will-change: transform, opacity;
}
.hh-row {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rim);
}
.hh-row:last-child { border-bottom: none; }
.hh-k { font-size: .44rem; letter-spacing: .2em; color: var(--gold); min-width: 50px; }
.hh-v { font-size: .7rem; color: var(--w5); font-family: var(--FH); }

/* Scroll cue */
.scroll-cue {
  position: absolute; bottom: 40px; left: 56px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  will-change: opacity;
}
.sc-line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scLine 2.4s ease-in-out infinite; }
@keyframes scLine { 0%,100%{height:44px;opacity:.4}50%{height:72px;opacity:1} }
.scroll-cue .mono { font-size: .5rem; letter-spacing: .2em; color: var(--w3); }

/* Crosshair fragment */
.crosshair-frag {
  position: absolute; z-index: 3; pointer-events: none;
}
.cf-1 { left: 18%; top: 72%; width: 40px; height: 40px; }
.chf-h { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(196,151,63,.25); }
.chf-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(196,151,63,.25); }
.chf-ring { position: absolute; inset: 6px; border: 1px solid rgba(196,151,63,.18); border-radius: 50%; }

/* Environmental bg text */
.env-bg-txt {
  position: absolute; pointer-events: none; z-index: 1;
  font-family: var(--FD); line-height: .82; white-space: nowrap;
  will-change: transform, opacity;
}
.env-engineer {
  font-size: clamp(10rem, 26vw, 30rem);
  color: rgba(196,151,63,.025);
  bottom: -60px; right: -40px;
}

/* ═══ BUTTON — shared ═══ */
.btn-prime {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 26px; margin-top: 22px;
  font-family: var(--FM); font-size: .65rem; letter-spacing: .1em;
  text-decoration: none; cursor: none; overflow: hidden;
  color: var(--paper); background: #050505; border: none;
  transition: gap .35s var(--e), color .3s;
}
.bp-bg {
  position: absolute; inset: 0; background: var(--gold);
  transform: translateX(-101%); transition: transform .52s var(--e); z-index: 0;
}
.btn-prime:hover .bp-bg { transform: none; }
.btn-prime:hover { gap: 18px; color: #050505; }
.bp-txt, .bp-arr { position: relative; z-index: 1; }

/* Dark world override */
.w-dark .btn-prime, .ct-form-wrap .btn-prime {
  background: var(--w); color: #040406;
}
.w-dark .btn-prime .bp-bg, .ct-form-wrap .btn-prime .bp-bg {
  background: var(--abyss);
}
.w-dark .btn-prime:hover, .ct-form-wrap .btn-prime:hover { color: var(--w); }

/* ═══════════════════════════════════════════
   WORLD 2 — IDENTITY
   FIX: Intentional composition, clear hierarchy
   ═══════════════════════════════════════════ */
#two { min-height: 110svh; }

.id-env {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}

/* Dark environmental left zone */
.id-env::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 46%;
  background: linear-gradient(155deg, #0b1a28 0%, #08142a 45%, #06101e 100%);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  z-index: 0;
}

.ide-nebula {
  position: absolute; left: 0; top: 0; width: 55%; height: 100%;
  background:
    radial-gradient(ellipse 60% 50% at 25% 35%, rgba(196,151,63,.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 70%, rgba(40,80,200,.07) 0%, transparent 60%);
  z-index: 1;
}
.ide-grid {
  position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: 1;
  background-image:
    linear-gradient(rgba(196,151,63,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,151,63,.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: linear-gradient(to right, black 60%, transparent 100%);
}
.ide-horizon {
  position: absolute; left: 0; width: 50%; top: 55%; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(196,151,63,.12), transparent);
}
.ide-number {
  position: absolute; bottom: -30px; left: 16px; z-index: 2;
  font-size: clamp(8rem, 22vw, 22rem);
  color: rgba(196,151,63,.05); line-height: 1; pointer-events: none;
}

/* ── IDENTITY TYPOGRAPHY — FIX: clear spatial hierarchy ── */
/* BUILDING — anchored top-left, inset from edge, generous top space */
.id-word-building {
  position: absolute; left: 2%; top: 80px; z-index: 3;
  font-family: var(--FD);
  font-size: clamp(5rem, 12vw, 12rem);
  letter-spacing: -.025em; line-height: .88;
  color: var(--w);
  will-change: transform, opacity;
}

/* INTELLIGENCE — serif italic, offset right, stagger below BUILDING */
.id-word-intelligence {
  position: absolute; left: 28%; top: clamp(130px, 18vw, 200px); z-index: 3;
  font-family: var(--FS); font-style: italic;
  font-size: clamp(3.5rem, 9.5vw, 9.5rem);
  line-height: .88;
  will-change: transform, opacity;
}

/* INTO — smaller, lower-right of the left column, clear breathing room */
.id-word-into {
  position: absolute; left: 5%; top: clamp(240px, 34vw, 370px); z-index: 3;
  font-family: var(--FD);
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  letter-spacing: -.02em; line-height: .88;
  color: rgba(5,5,5,.5);
  will-change: transform, opacity;
}

/* Body — bottom-right, constrained width */
.id-body {
  position: absolute; right: 4%; bottom: 60px;
  width: min(480px, 44%); z-index: 4;
  will-change: transform, opacity;
}
.id-body p {
  font-size: .88rem; line-height: 1.88; font-weight: 300;
  color: rgba(5,5,5,.52); margin-bottom: 12px;
}
.id-axioms { margin: 18px 0; border-left: 2px solid var(--gold); padding-left: 14px; }
.iax {
  font-family: var(--FM); font-size: .62rem; letter-spacing: .04em;
  color: rgba(5,5,5,.38); line-height: 1.8;
}
.iax.g { color: var(--gold) !important; }

/* Stats — upper right, aligned */
.id-stats {
  position: absolute; right: 4%; top: 72px; z-index: 4;
  will-change: transform, opacity;
}
.ist {
  padding: 16px 0; border-bottom: 1px solid rgba(5,5,5,.1);
  display: flex; align-items: baseline; gap: 14px;
  transition: padding-left .25s;
}
.ist:first-child { border-top: 1px solid rgba(5,5,5,.1); }
.ist:hover { padding-left: 8px; }
.ist-mid { margin-left: 24px; }
.ist-n {
  font-family: var(--FD);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  color: var(--gold); line-height: 1;
}
.ist-l { font-size: .52rem; letter-spacing: .14em; color: rgba(5,5,5,.32); }

/* ═══════════════════════════════════════════
   WORLD 3 — LEXAI
   FIX: Redistribute composition, better balance
   ═══════════════════════════════════════════ */
#three { background: var(--deep); min-height: 120svh; }

#neural-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; opacity: .45;
}

.lex-env { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.le-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(196,151,63,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,151,63,.03) 1px, transparent 1px);
  background-size: 58px 58px;
}
.le-horizon {
  position: absolute; left: 0; right: 0; top: 56%; height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(196,151,63,.09) 50%, transparent 90%);
}
.le-slash {
  position: absolute; right: 0; top: 0; width: 40%; height: 100%;
  background: linear-gradient(135deg, transparent 40%, rgba(196,151,63,.02) 100%);
}

/* LEXAI name — FIX: left anchored with proper inset, reduced scale for balance */
.lex-name-zone {
  position: absolute; left: 5%; top: 80px; z-index: 3;
  max-width: 60%;
  will-change: transform, opacity;
}
.lex-pre {
  font-family: var(--FM); font-size: .46rem; letter-spacing: .2em; color: var(--w3);
  display: block; margin-bottom: 6px;
}
.lex-nm {
  font-family: var(--FD);
  font-size: clamp(6rem, 15vw, 15rem);
  line-height: .82; letter-spacing: -.03em; color: var(--w);
  white-space: nowrap;
}
.lex-sub { font-family: var(--FS); font-style: italic; font-size: 1.1rem; color: var(--w3); display: block; margin-top: 8px; }
.lex-tagline {
  font-family: var(--FM); font-size: .44rem; letter-spacing: .16em;
  color: rgba(196,151,63,.45); display: block; margin-top: 10px;
}

/* Architecture nodes */
.lex-nodes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.arch-node {
  position: absolute; left: var(--ax); top: var(--ay);
  transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 13px;
  border: 1px solid var(--rim); background: rgba(236,234,228,.03);
  backdrop-filter: blur(5px); pointer-events: auto; cursor: none;
  will-change: transform, opacity;
  transition: border-color .25s, background .25s;
}
.arch-node:hover { border-color: var(--gold); background: rgba(196,151,63,.05); }
.an-gold { border-color: rgba(196,151,63,.3) !important; background: rgba(196,151,63,.07) !important; }
.an-hex { font-size: 1rem; color: var(--w3); }
.an-gold .an-hex { color: var(--gold); }
.an-lbl { font-family: var(--FM); font-size: .44rem; letter-spacing: .08em; color: var(--w3); text-align: center; }
.an-pulse { position: absolute; inset: -4px; border: 1px solid transparent; animation: nodePulse 3s ease-in-out infinite; }
.an-pulse-g { border-color: rgba(196,151,63,.2) !important; animation-duration: 2s; }
@keyframes nodePulse { 0%,100%{border-color:transparent;transform:scale(1)}50%{border-color:rgba(236,234,228,.08);transform:scale(1.05)} }

.an-beam {
  position: absolute; height: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(196,151,63,.22), transparent);
  animation: beamPls 2s ease-in-out infinite;
}
.ab0 { left:6%; top:38%; width:14%; transform:rotate(-5deg); }
.ab1 { left:20%; top:33%; width:14%; transform:rotate(6deg); animation-delay:.45s; }
.ab2 { left:34%; top:39%; width:14%; transform:rotate(-4deg); animation-delay:.9s; }
.ab3 { left:48%; top:40%; width:14%; transform:rotate(5deg); animation-delay:1.35s; }
@keyframes beamPls { 0%,100%{opacity:.2}50%{opacity:.95} }

.pkt { position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; top: 38%; z-index: 3; animation: pktMove 4s linear infinite; box-shadow: 0 0 7px var(--gold); }
.pk0 { left:6%; animation-delay:0s; }
.pk1 { left:6%; animation-delay:1.35s; }
.pk2 { left:6%; animation-delay:2.7s; }
@keyframes pktMove { 0%{left:6%;opacity:1}58%{left:65%;opacity:1}60%{opacity:0}100%{left:65%;opacity:0} }

/* Terminal — right quadrant, properly spaced from name zone */
.lex-terminal {
  position: absolute; right: 5%; bottom: 90px;
  width: min(420px, 38%); z-index: 4;
  background: rgba(4,6,10,.9); border: 1px solid var(--rim);
  backdrop-filter: blur(14px);
  will-change: transform, opacity;
}
.lt-chrome {
  background: rgba(10,14,22,.95); padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--rim);
}
.lt-dots { display: flex; gap: 5px; }
.lt-dots i { width: 8px; height: 8px; border-radius: 50%; font-style: normal; }
.lt-dots .r  { background: #ff5f56; }
.lt-dots .y  { background: #febc2e; }
.lt-dots .g2 { background: #27c93f; }
.lt-title { font-family: var(--FM); font-size: .48rem; letter-spacing: .08em; color: var(--w3); flex: 1; text-align: center; }
.lt-live { display: flex; align-items: center; gap: 4px; font-family: var(--FM); font-size: .44rem; letter-spacing: .12em; color: var(--green); }
.lt-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; }
.lt-r { font-family: var(--FM); font-size: .63rem; line-height: 1.65; }
.lt-stream { display: flex; font-family: var(--FM); font-size: .63rem; line-height: 1.65; }
.lt-resp { color: var(--green); }
.lt-cur { color: var(--gold); animation: blipPulse .8s infinite; }

/* Vector viz — upper right, properly separated */
.lex-vec {
  position: absolute; right: 5%; top: 88px;
  width: min(320px, 30%); z-index: 4;
  will-change: transform, opacity;
}
.lv-label { font-family: var(--FM); font-size: .44rem; letter-spacing: .18em; color: var(--w3); display: block; margin-bottom: 6px; }
#vec-c { display: block; border: 1px solid var(--rim); background: rgba(0,0,0,.4); }

.lex-src {
  position: absolute; bottom: 50px; left: 5%; z-index: 4;
  font-size: .58rem; letter-spacing: .12em; color: var(--gold);
  text-decoration: none; border-bottom: 1px solid rgba(196,151,63,.3); padding-bottom: 2px;
  transition: border-color .2s;
}
.lex-src:hover { border-color: var(--gold); }

/* Bottom strip */
.lex-strip {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 48px; border-top: 1px solid var(--rim);
  display: flex; gap: 14px; font-family: var(--FM);
  font-size: .5rem; letter-spacing: .08em; color: var(--w3);
  background: rgba(4,6,10,.6); z-index: 4;
}

/* Status dot shared */
.s-dot { display: inline-block; width: 4px; height: 4px; background: var(--green); border-radius: 50%; animation: blipPulse 2s infinite; margin-right: 2px; }

/* ═══════════════════════════════════════════
   WORLD 4 — PROJECTS
   ═══════════════════════════════════════════ */
#four { background: var(--abyss); padding: 0; }

.env-work {
  font-size: clamp(14rem, 38vw, 44rem);
  color: rgba(196,151,63,.018);
  top: -80px; right: -80px;
}

.proj-scene {
  position: relative; min-height: 72svh;
  display: grid; gap: 48px;
  padding: 80px 56px 80px 56px;
  overflow: hidden; border-top: 1px solid var(--rim);
  will-change: transform;
  transition: background .4s;
}
.proj-scene:first-of-type { border-top: none; padding-top: 100px; }
.proj-scene:hover { background: rgba(236,234,228,.01); }

.ps-a { grid-template-columns: 1fr 1fr; align-items: center; }
.ps-b { grid-template-columns: 1fr 1fr; align-items: center; }

.ps-num-bg {
  position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
  font-family: var(--FD);
  font-size: clamp(12rem, 28vw, 28rem);
  color: rgba(236,234,228,.022); line-height: 1;
  pointer-events: none; z-index: 0;
  will-change: transform;
}
.ps-b .ps-num-bg { left: -30px; right: auto; }

.ps-content { position: relative; z-index: 2; }
.ps-content-b { order: 2; }
.ps-meta { font-size: .46rem; letter-spacing: .22em; color: var(--gold); margin-bottom: 12px; }
.ps-title {
  font-family: var(--FD);
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  line-height: .88; letter-spacing: -.02em;
  color: var(--w); margin-bottom: 18px;
  will-change: transform;
}
.ps-desc { font-size: .84rem; line-height: 1.82; color: var(--w3); font-weight: 300; margin-bottom: 16px; max-width: 440px; }
.ps-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.ps-tags span {
  font-size: .52rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(236,234,228,.18); border: 1px solid var(--rim); padding: 4px 9px;
  transition: border-color .2s, color .2s;
}
.proj-scene:hover .ps-tags span { border-color: rgba(196,151,63,.3); color: var(--w3); }
.ps-link {
  font-size: .58rem; letter-spacing: .1em;
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid rgba(196,151,63,.3); padding-bottom: 2px;
  transition: border-color .2s;
}
.ps-link:hover { border-color: var(--gold); }

.ps-viz { position: relative; z-index: 2; }
.ps-viz-b { order: 1; }

.psv-frame { background: rgba(14,16,22,.85); border: 1px solid var(--rim); overflow: hidden; }
.psvf-bar { background: rgba(8,10,16,.95); padding: 7px 10px; display: flex; gap: 5px; border-bottom: 1px solid var(--rim); }
.psvf-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--rim); }
.psvf-rows { padding: 14px; }
.psvf-r { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rim); font-family: var(--FM); font-size: .56rem; color: var(--w3); }
.psvf-h { color: var(--gold) !important; font-size: .48rem; letter-spacing: .1em; }
.psvf-total { display: flex; justify-content: space-between; padding: 8px 0; font-family: var(--FM); font-size: .6rem; color: var(--w); }
.psvf-btn { background: var(--gold); color: var(--abyss); text-align: center; padding: 8px; margin-top: 6px; font-family: var(--FM); font-size: .54rem; letter-spacing: .1em; cursor: none; transition: background .2s; }
.psvf-btn:hover { background: var(--gold2); }

.psv-term { background: #050608; border: 1px solid var(--rim); }
.psvt-top { padding: 8px 12px; border-bottom: 1px solid var(--rim); font-family: var(--FM); font-size: .56rem; }
.psvt-body { padding: 14px; font-family: var(--FM); font-size: .62rem; display: flex; flex-direction: column; gap: 5px; }
#sparkline { display: block; margin-top: 8px; border: 1px solid var(--rim); }

.proj-sep-diag {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,151,63,.1) 30%, var(--rim) 60%, transparent);
}

/* ═══════════════════════════════════════════
   WORLD 5 — CAPABILITIES
   FIX: Terminal scrollbar, column alignment
   ═══════════════════════════════════════════ */
#five { min-height: 100svh; }

.sk-atm { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ska-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(196,151,63,.009) 3px, rgba(196,151,63,.009) 4px);
  animation: scanDrift 14s linear infinite;
}
@keyframes scanDrift { to { background-position: 0 200px; } }
.ska-glow {
  position: absolute; width: 600px; height: 600px; top: 10%; left: -100px;
  background: radial-gradient(circle, rgba(196,151,63,.06) 0%, transparent 65%);
  filter: blur(80px); animation: atmDrift 20s ease-in-out infinite;
}
.ska-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--rim) 1px, transparent 1px), linear-gradient(90deg, var(--rim) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 80% at 20% 50%, black 20%, transparent 80%);
}

/* TECH STACK title */
.sk-env-title {
  position: absolute; left: 48px; top: 72px; z-index: 2;
  will-change: transform, opacity;
}
.sket-line1 {
  font-family: var(--FD); font-size: clamp(5rem, 14vw, 14rem);
  line-height: .82; letter-spacing: -.025em; color: var(--w);
  margin-left: -.02em;
}
.sket-line2 {
  font-family: var(--FS); font-style: italic;
  font-size: clamp(4rem, 12vw, 12rem);
  line-height: .82; margin-top: -.02em;
}

.sk-rule {
  position: absolute; left: 42%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--rim2) 20%, var(--rim2) 80%, transparent);
  z-index: 2;
}

/* Terminal — FIX: custom scrollbar, hidden native scrollbar */
.sk-terminal {
  position: absolute; left: 44%; right: 48px; top: 72px; z-index: 3;
  background: rgba(6,8,16,.9); border: 1px solid var(--rim); backdrop-filter: blur(10px);
  will-change: transform, opacity;
  max-height: 480px; display: flex; flex-direction: column;
}
.skt-chrome { background: rgba(10,14,22,.95); padding: 9px 15px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--rim); flex-shrink: 0; }
.skt-dots { display: flex; gap: 5px; }
.skt-dots i { width: 9px; height: 9px; border-radius: 50%; font-style: normal; }
.skt-dots .r  { background: #ff5f56; }
.skt-dots .y  { background: #febc2e; }
.skt-dots .g2 { background: #27c93f; }
.skt-title { font-family: var(--FM); font-size: .5rem; letter-spacing: .08em; color: var(--w3); flex: 1; text-align: center; }
.skt-live { display: flex; align-items: center; gap: 4px; font-family: var(--FM); font-size: .44rem; letter-spacing: .12em; color: var(--green); }

/* FIX: hidden native scrollbar + custom gold scrollbar track */
.skt-body {
  padding: 18px 22px; overflow-y: auto; flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(196,151,63,.35) rgba(236,234,228,.04);
}
.skt-body::-webkit-scrollbar { width: 2px; }
.skt-body::-webkit-scrollbar-track { background: rgba(236,234,228,.03); }
.skt-body::-webkit-scrollbar-thumb { background: rgba(196,151,63,.35); border-radius: 1px; }
.skt-body::-webkit-scrollbar-thumb:hover { background: rgba(196,151,63,.65); }

/* Skill columns — FIX: perfect bottom alignment using align-items: end + consistent padding */
.sk-cols {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--rim);
  /* All columns share the same bottom — align content to bottom */
  align-items: end;
}
.skc { border-right: 1px solid var(--rim); transition: background .3s; will-change: transform, opacity; }
.skc:last-child { border-right: none; }
/* FIX: consistent bottom padding across all three — intentional top offset kept for compositional tension */
.skc-0 { padding: 44px 28px 32px; }
.skc-1 { padding: 26px 28px 32px; } /* intentionally lower top pad for asymmetry */
.skc-2 { padding: 56px 28px 32px; }
.skc:hover { background: rgba(196,151,63,.025); }
.skc-title { font-family: var(--FM); font-size: .48rem; letter-spacing: .22em; color: var(--gold); margin-bottom: 16px; }
.skc-items { display: flex; flex-direction: column; }
.skc-items span { font-size: .84rem; font-weight: 300; color: var(--w3); padding: 9px 0; border-bottom: 1px solid var(--rim); transition: color .2s, padding-left .25s; cursor: none; }
.skc-items span:last-child { border-bottom: none; }
.skc-items span:hover { color: var(--w); padding-left: 8px; }

.sk-vert-ghost {
  position: absolute; right: 16px; top: 50%; z-index: 1;
  transform: translateY(-50%) rotate(90deg);
  font-size: .4rem; letter-spacing: .3em;
  color: rgba(196,151,63,.04); white-space: nowrap; pointer-events: none;
}

/* ═══════════════════════════════════════════
   WORLD 6 — TIMELINE
   FIX: Clean three-line composition with rhythm
   ═══════════════════════════════════════════ */
#six { min-height: 90svh; }

.exp-ghost-yr {
  position: absolute; bottom: -80px; right: -80px;
  font-family: var(--FD); font-size: clamp(14rem, 36vw, 40rem);
  color: rgba(5,5,5,.048); line-height: 1;
  pointer-events: none; white-space: nowrap; z-index: 0; will-change: transform;
}
.exp-ghost-mo {
  position: absolute; top: 20px; left: -30px;
  font-family: var(--FD); font-size: clamp(4rem, 10vw, 12rem);
  color: rgba(5,5,5,.03); line-height: 1;
  pointer-events: none; white-space: nowrap; z-index: 0;
}

/* FIX: clean stacked typography — WHERE / IT / began. on consistent left-anchored baseline */
.exp-where {
  position: absolute; left: 3%; top: 72px; z-index: 2;
  font-family: var(--FD);
  font-size: clamp(5rem, 13vw, 13rem);
  letter-spacing: -.025em; line-height: .88;
  color: #040406; will-change: transform, opacity;
}
/* "it began." — offset right, sits on the line below WHERE */
.exp-began {
  position: absolute; left: 8%; top: clamp(150px, 20vw, 220px); z-index: 2;
  font-family: var(--FD);
  font-size: clamp(3.8rem, 10vw, 10rem);
  letter-spacing: -.025em; line-height: .88;
  color: #040406; will-change: transform, opacity;
}

/* Entry — right, offset vertically */
.exp-entry {
  position: absolute; right: 6%; top: 50%; transform: translateY(-42%);
  width: min(500px, 46%); z-index: 3;
  will-change: transform, opacity;
}
.ee-date { font-family: var(--FM); font-size: .54rem; letter-spacing: .16em; color: rgba(5,5,5,.3); margin-bottom: 10px; }
.ee-rule { width: 32px; height: 1px; background: var(--gold); margin-bottom: 12px; }
.ee-role {
  font-family: var(--FH); font-size: clamp(1.8rem, 3.8vw, 3rem);
  font-weight: 700; color: #040406; margin-bottom: 6px; line-height: 1.1;
}
.ee-place { font-family: var(--FS); font-style: italic; font-size: 1rem; color: rgba(5,5,5,.36); margin-bottom: 16px; display: block; }
.ee-body { font-size: .86rem; line-height: 1.84; color: rgba(5,5,5,.5); font-weight: 300; margin-bottom: 12px; }
.ee-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.ee-tags span { font-family: var(--FM); font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(5,5,5,.32); border: 1px solid rgba(5,5,5,.12); padding: 4px 9px; }

.exp-quote {
  position: absolute; left: 3%; bottom: 56px; z-index: 2;
  font-family: var(--FS); font-style: italic;
  font-size: 1.05rem; line-height: 1.55; color: rgba(5,5,5,.28);
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════════
   WORLD 7 — CONTACT
   FIX: SAY HELLO spacing, form collision
   ═══════════════════════════════════════════ */
#seven { min-height: 100svh; }

.ct-atm { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cta-g1 {
  position: absolute; width: 600px; height: 600px; top: -150px; right: -100px;
  border-radius: 50%; filter: blur(110px);
  background: radial-gradient(circle, rgba(196,151,63,.09) 0%, transparent 65%);
  animation: atmDrift 22s ease-in-out infinite;
}
.cta-g2 {
  position: absolute; width: 400px; height: 400px; bottom: -80px; left: -80px;
  border-radius: 50%; filter: blur(90px);
  background: radial-gradient(circle, rgba(40,80,220,.07) 0%, transparent 65%);
  animation: atmDrift 28s ease-in-out infinite 10s reverse;
}
.cta-g3 {
  position: absolute; width: 250px; height: 250px; top: 40%; left: 30%;
  border-radius: 50%; filter: blur(70px);
  background: radial-gradient(circle, rgba(60,160,220,.04) 0%, transparent 65%);
  animation: atmDrift 16s ease-in-out infinite 5s;
}
.ct-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--rim) 1px, transparent 1px), linear-gradient(90deg, var(--rim) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 35%, transparent 100%);
}

/* FIX: Marquee height and spacing — properly separated from title zone */
.ct-mq {
  position: relative; z-index: 2; overflow: hidden;
  /* Reduced visual height so it doesn't eat into title space */
  padding: 2px 0;
  border-bottom: 1px solid var(--rim);
  /* Max height clamp to prevent marquee from being too tall */
  max-height: clamp(80px, 12vw, 130px);
}
.ct-mtrack {
  display: inline-flex; align-items: center; gap: 48px; white-space: nowrap;
  font-family: var(--FD);
  /* FIX: reduced font scale so it doesn't crush the title */
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  letter-spacing: -.01em; color: var(--w); padding: 4px 0;
  animation: mqRun 13s linear infinite;
}
@keyframes mqRun { to { transform: translateX(-50%); } }
.msep { font-size: .5em; }

/* LET'S BUILD — proper top spacing below marquee */
.ct-title-zone {
  position: absolute; left: 5%; top: clamp(100px, 14vw, 160px); z-index: 2;
  will-change: transform, opacity;
}
.ctt-l1, .ctt-l2, .ctt-l3 {
  font-family: var(--FD); display: block; will-change: transform;
}
.ctt-l1, .ctt-l3 {
  font-size: clamp(3.5rem, 8.5vw, 8rem);
  letter-spacing: -.025em; line-height: .87; color: var(--w);
}
.ctt-l2 {
  font-family: var(--FS); font-style: italic;
  font-size: clamp(3rem, 7.5vw, 7rem);
  line-height: .87;
}

/* Contact links — left, anchored below title with good breathing room */
.ct-links {
  position: absolute; left: 5%; bottom: 72px;
  width: min(390px, 36%); z-index: 3;
  will-change: transform, opacity;
}
.ctl {
  display: flex; align-items: center; padding: 14px 0;
  border-top: 1px solid var(--rim); text-decoration: none; cursor: none;
  transition: padding-left .3s var(--e);
}
.ctl:last-child { border-bottom: 1px solid var(--rim); }
.ctl:hover { padding-left: 12px; }
.ctl-k { font-family: var(--FM); font-size: .48rem; letter-spacing: .2em; color: var(--w3); width: 70px; flex-shrink: 0; }
.ctl-v { font-size: .7rem; color: var(--w); flex: 1; letter-spacing: .02em; transition: color .2s; }
.ctl:hover .ctl-v { color: var(--gold); }
.ctl-a { font-size: .85rem; color: var(--gold); transition: transform .2s; }
.ctl:hover .ctl-a { transform: translate(3px,-3px); }

/* FIX: Form — right side, top anchored to avoid title collision */
.ct-form-wrap {
  position: absolute; right: 5%; top: clamp(100px, 14vw, 160px);
  width: min(420px, 38%); z-index: 3;
  background: rgba(236,234,228,.03); border: 1px solid var(--rim);
  backdrop-filter: blur(16px); padding: 28px 32px;
  will-change: transform, opacity;
}
.cff { padding: 13px 0; position: relative; }
.cff label { display: block; font-family: var(--FM); font-size: .48rem; letter-spacing: .2em; color: var(--w3); margin-bottom: 7px; }
.cff input, .cff textarea {
  width: 100%; background: transparent; border: none; outline: none;
  font-family: var(--FH); font-size: .9rem; font-weight: 300; color: var(--w); resize: none; letter-spacing: .02em;
}
.cff input::placeholder, .cff textarea::placeholder { color: var(--w1); }
.cff-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--rim); transition: background .3s; }
.cff:focus-within .cff-line { background: var(--gold); }
.cf-msg { font-family: var(--FM); font-size: .56rem; color: var(--gold); letter-spacing: .06em; margin-top: 10px; display: block; }
.mag { margin-top: 20px; }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
#foot {
  background: var(--abyss);
  border-top: 1px solid var(--rim);
  padding: 40px 56px 28px; overflow: hidden;
}
.ft-ghost {
  font-family: var(--FD);
  font-size: clamp(5rem, 16vw, 16rem);
  line-height: .82; color: rgba(236,234,228,.025);
  white-space: nowrap; margin-bottom: 18px;
  transform-origin: left center; will-change: transform;
  cursor: none; transition: color .5s;
}
#foot:hover .ft-ghost { color: rgba(236,234,228,.06); }
.ft-bottom {
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--rim); padding-top: 14px;
  flex-wrap: wrap; gap: 10px;
}
.ft-bottom span { font-family: var(--FM); font-size: .52rem; letter-spacing: .1em; color: var(--w3); }
.seo-hidden{
  position:absolute;
  left:-9999px;
  opacity:0;
  pointer-events:none;
}
/* ═══════════════════════════════════════════
   RESPONSIVE — cinematic adaptation
   ═══════════════════════════════════════════ */

/* ── TABLET & LAPTOP ── */
@media (max-width: 1100px) {
  /* HERO */
  .hero-role-vert { display: none; }
  .f-coord { top: 56px; right: 20px; }
  .hero-hud { right: 16px; bottom: 24px; min-width: 180px; }
  .hn-manu { font-size: clamp(5.5rem, 18vw, 14rem); }
  .hn-rejimon { font-size: clamp(4.8rem, 15.5vw, 12rem); }

  /* IDENTITY — flow to column */
  .id-word-building   { position: relative; left: auto; top: auto; font-size: clamp(4rem, 12vw, 9rem); padding: 72px 28px 0; }
  .id-word-intelligence { position: relative; left: auto; top: auto; padding: 4px 28px 0 5%; font-size: clamp(3rem, 10vw, 7rem); }
  .id-word-into       { position: relative; right: auto; top: auto; padding: 4px 28px 20px; font-size: clamp(2rem, 5vw, 4rem); }
  .id-body            { position: relative; right: auto; bottom: auto; width: 92%; margin: 0 auto; padding: 16px 28px 32px; }
  .id-stats           { position: relative; right: auto; top: auto; display: flex; flex-direction: row; gap: 0; padding: 0 28px 32px; }
  .ist-mid            { margin-left: 0; }
  #two                { display: flex; flex-direction: column; }

  /* LEXAI */
  .lex-nodes          { display: none; }
  .lex-name-zone      { position: relative; left: auto; top: auto; padding: 80px 28px 20px; max-width: 100%; }
  .lex-nm             { font-size: clamp(5rem, 16vw, 11rem); }
  .lex-terminal       { position: relative; right: auto; bottom: auto; width: 92%; margin: 16px auto; }
  .lex-vec            { position: relative; right: auto; top: auto; width: 92%; margin: 0 auto 16px; }
  .lex-strip          { position: relative; }
  .lex-src            { position: relative; right: auto; bottom: auto; display: inline-block; margin: 0 28px 24px; }
  #three              { display: flex; flex-direction: column; min-height: auto; }

  /* PROJECTS */
  .proj-scene         { grid-template-columns: 1fr; min-height: auto; }
  .ps-b .ps-viz-b     { order: 0; }
  .ps-b .ps-content-b { order: 1; }

  /* SKILLS */
  .sk-env-title       { position: relative; left: auto; top: auto; padding: 80px 28px 20px; }
  .sk-rule            { display: none; }
  .sk-terminal        { position: relative; left: auto; right: auto; top: auto; width: 92%; margin: 0 auto 20px; max-height: 360px; }
  .sk-cols            { position: relative; }

  /* TIMELINE */
  .exp-where          { position: relative; left: auto; top: auto; font-size: clamp(4rem, 13vw, 9rem); padding: 80px 28px 0; }
  .exp-began          { position: relative; left: auto; top: auto; font-size: clamp(3rem, 10vw, 7rem); padding: 4px 28px 20px 5%; }
  .exp-entry          { position: relative; right: auto; top: auto; transform: none; width: 92%; margin: 0 auto 24px; }
  .exp-quote          { position: relative; left: auto; bottom: auto; padding: 0 28px 40px; }
  .exp-ghost-yr       { display: none; }
  #six                { display: flex; flex-direction: column; }

  /* CONTACT */
  .ct-mq              { max-height: 90px; }
  .ct-mtrack          { font-size: clamp(2.2rem, 7vw, 5rem); }
  .ct-title-zone      { position: relative; left: auto; top: auto; padding: 24px 28px 0; }
  .ctt-l1, .ctt-l3    { font-size: clamp(3rem, 10vw, 6rem); }
  .ctt-l2             { font-size: clamp(2.5rem, 9vw, 5.5rem); }
  .ct-links           { position: relative; left: auto; bottom: auto; width: 92%; margin: 24px auto 0; }
  .ct-form-wrap       { position: relative; right: auto; top: auto; width: 92%; margin: 24px auto 40px; }
  #seven              { display: flex; flex-direction: column; padding-bottom: 60px; }
}

/* ── MOBILE ── */
@media (max-width: 680px) {
  /* HERO */
  .hero-name-wrap { left: 2%; width: 96%; top: 50%; }
  .hn-manu { font-size: clamp(4.5rem, 22vw, 10rem); }
  .hn-rejimon { font-size: clamp(3.8rem, 18.5vw, 8.5rem); }
  .f-status { top: 60px; left: 20px; font-size: .44rem; }
  .f-coord { top: 56px; right: 14px; font-size: .44rem; }
  .hero-hud { right: 10px; bottom: 18px; min-width: 160px; padding: 12px 14px; }
  .hh-v { font-size: .6rem; }
  .scroll-cue { left: 20px; bottom: 20px; }
  .env-engineer { font-size: clamp(8rem, 30vw, 18rem); bottom: -40px; right: -20px; }

  /* NAV */
  #n-status { display: none; }
  .n-hello { padding: 5px 10px; font-size: .52rem; }

  /* IDENTITY */
  .id-word-building   { font-size: clamp(3.5rem, 15vw, 7rem); padding: 64px 18px 0; }
  .id-word-intelligence { font-size: clamp(2.5rem, 12vw, 5.5rem); padding: 4px 18px 0 4%; }
  .id-word-into       { font-size: clamp(1.8rem, 7vw, 3.5rem); padding: 4px 18px 18px; }
  .id-body            { padding: 12px 18px 24px; }
  .id-stats           { padding: 0 18px 24px; flex-direction: column; gap: 0; }

  /* PROJECTS */
  .proj-scene         { padding: 52px 20px; }
  .ps-num-bg          { display: none; }
  .ps-title           { font-size: clamp(2.2rem, 8vw, 3.5rem); }

  /* SKILLS */
  .sk-cols            { grid-template-columns: 1fr; }
  .skc                { border-right: none; border-top: 1px solid var(--rim); }
  .skc:first-child    { border-top: none; }
  .skc-0, .skc-1, .skc-2 { padding: 28px 18px 24px; }
  .sk-terminal        { width: 96%; margin: 0 auto 16px; }
  .sk-env-title       { padding: 70px 18px 16px; }
  .sket-line1         { font-size: clamp(3.5rem, 14vw, 9rem); }
  .sket-line2         { font-size: clamp(3rem, 12vw, 7.5rem); }

  /* TIMELINE */
  .exp-where          { font-size: clamp(3.5rem, 16vw, 7rem); padding: 70px 18px 0; }
  .exp-began          { font-size: clamp(2.5rem, 12vw, 5rem); padding: 4px 18px 16px 4%; }
  .exp-entry          { width: 96%; padding: 0 18px; }
  .exp-quote          { padding: 0 18px 32px; font-size: .9rem; }

  /* CONTACT */
  .ct-mq              { max-height: 70px; }
  .ct-mtrack          { font-size: clamp(1.8rem, 8vw, 3.5rem); gap: 28px; }
  .ct-title-zone      { padding: 20px 18px 0; }
  .ctt-l1, .ctt-l3    { font-size: clamp(2.5rem, 12vw, 5rem); }
  .ctt-l2             { font-size: clamp(2.2rem, 11vw, 4.5rem); }
  .ct-links           { width: 96%; margin: 20px auto 0; }
  .ct-form-wrap       { width: 96%; padding: 20px 18px; margin: 16px auto 32px; }

  /* FOOTER */
  #foot               { padding: 28px 18px 20px; }
  .ft-bottom          { flex-direction: column; gap: 6px; }
}

/* ── SMALL PHONE ── */
@media (max-width: 390px) {
  .hn-manu    { font-size: clamp(3.8rem, 22vw, 6rem); }
  .hn-rejimon { font-size: clamp(3.2rem, 19vw, 5rem); }
  .hero-hud   { display: none; }
  .ctt-l1, .ctt-l3 { font-size: clamp(2rem, 13vw, 4rem); }
  .ctt-l2          { font-size: clamp(1.8rem, 12vw, 3.5rem); }
}

/* ── ULTRAWIDE ── */
@media (min-width: 1800px) {
  .hn-manu    { font-size: clamp(17rem, 14vw, 22rem); }
  .hn-rejimon { font-size: clamp(14rem, 12vw, 19rem); }
  .id-body    { width: min(560px, 40%); }
  .exp-entry  { width: min(580px, 40%); }
  .ct-form-wrap { width: min(480px, 32%); }
  .ct-links   { width: min(440px, 30%); }
  .lex-nm     { font-size: clamp(15rem, 12vw, 19rem); }
}