:root{
  --bg:#050505;
  --bg2:#090706;
  --panel:#0d0d0c;
  --panel2:#13100e;
  --ink:#f1e6d2;
  --muted:#b9a98c;
  --dim:#77654d;
  --red:#e53a2c;
  --red2:#9e1f18;
  --red3:#ff5544;
  --gold:#d89a3d;
  --gold2:#f4c268;
  --line:#3a2619;
  --line2:#704323;
  --black:#030303;
  --shadow:0 24px 80px rgba(0,0,0,.8), 0 0 55px rgba(184,42,29,.1);
  --pixel:"Press Start 2P", "Courier New", monospace;
  --terminal:"VT323", "Courier New", monospace;
  --body:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell:1448px;
  --pad:clamp(18px, 3.3vw, 52px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--body);
  background:
    radial-gradient(circle at 72% 10%, rgba(192,38,28,.13), transparent 32%),
    radial-gradient(circle at 12% 24%, rgba(216,154,61,.08), transparent 30%),
    linear-gradient(180deg, #060606 0%, #070605 54%, #030303 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px) 0 0/32px 32px;
  mask-image:radial-gradient(circle at 50% 20%, black 0 58%, transparent 86%);
  opacity:.35;
  z-index:0;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(229,58,44,.55);color:#fff}

.skip-link{
  position:absolute;
  left:20px;
  top:-60px;
  z-index:40;
  padding:12px 16px;
  background:var(--red);
  color:#fff;
  transition:top .2s ease;
}
.skip-link:focus{top:16px}

.noise,
.scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.noise{
  background-image:url("assets/grain.svg");
  background-repeat:repeat;
  opacity:.22;
  mix-blend-mode:screen;
}
.scanlines{
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  opacity:.08;
}

.embers{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.embers i{
  position:absolute;
  width:3px;height:3px;
  background:var(--red3);
  box-shadow:0 0 16px rgba(255,70,50,.8);
  opacity:.35;
  animation:floatEmber 9s linear infinite;
}
.embers i:nth-child(1){left:5%;top:62%;animation-delay:-1s}.embers i:nth-child(2){left:11%;top:36%;animation-delay:-3s}.embers i:nth-child(3){left:36%;top:92%;animation-delay:-7s}.embers i:nth-child(4){left:79%;top:30%;animation-delay:-4s}.embers i:nth-child(5){left:93%;top:46%;animation-delay:-2s}.embers i:nth-child(6){left:58%;top:70%;animation-delay:-6s}.embers i:nth-child(7){left:21%;top:88%;animation-delay:-8s}.embers i:nth-child(8){left:67%;top:13%;animation-delay:-1.5s}.embers i:nth-child(9){left:44%;top:18%;animation-delay:-5s}.embers i:nth-child(10){left:87%;top:84%;animation-delay:-9s}
@keyframes floatEmber{from{transform:translate3d(0,35px,0) scale(1);opacity:0}20%{opacity:.45}to{transform:translate3d(18px,-80px,0) scale(.55);opacity:0}}

.site-shell{
  position:relative;
  z-index:3;
  width:min(var(--shell), calc(100% - 24px));
  margin:0 auto;
  min-height:100vh;
  padding:0 var(--pad) 28px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.68)),
    radial-gradient(circle at 50% 12%, rgba(179,44,32,.10), transparent 54%);
  border-left:1px solid rgba(94,55,32,.28);
  border-right:1px solid rgba(94,55,32,.28);
  box-shadow:inset 0 0 0 1px rgba(255,182,77,.035), 0 0 120px rgba(0,0,0,.74);
}
.site-shell::before,
.site-shell::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,61,43,.45), rgba(223,154,62,.28), transparent);
  pointer-events:none;
}
.site-shell::before{top:0}.site-shell::after{bottom:0}

.topbar{
  min-height:122px;
  display:grid;
  grid-template-columns:minmax(max-content,1fr) auto minmax(240px,1fr);
  gap:24px;
  align-items:center;
  border-bottom:1px solid rgba(118,69,36,.22);
  position:relative;
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-7px;
  height:12px;
  background:
    linear-gradient(90deg, rgba(229,58,44,.3) 0 4px, transparent 4px calc(100% - 4px), rgba(229,58,44,.3) calc(100% - 4px)),
    linear-gradient(90deg, transparent, rgba(216,154,61,.18), transparent);
  opacity:.5;
}

.brand{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  min-width:0;
}
.brand-mark{
  width:118px;
  height:138px;
  display:grid;
  place-items:center;
  overflow:visible;
  flex:0 0 auto;
  filter:drop-shadow(0 0 14px rgba(229,58,44,.25));
}
.brand-mark img{
  width:86px;
  height:auto;
  max-width:none;
  transform:none;
  object-fit:contain;
}
.brand-text{display:grid;gap:7px;transform:translateY(1px)}
.brand-name{
  font-family:var(--pixel);
  font-size:clamp(1.28rem, 1.9vw, 2.05rem);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#f6ecdc;
  text-shadow:0 0 12px rgba(255,255,255,.08), 2px 0 0 rgba(229,58,44,.25);
}
.brand-motto{
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gold);
  font-size:1.13rem;
  line-height:1;
}

.site-nav{
  display:flex;
  gap:clamp(22px, 3.1vw, 55px);
  justify-content:center;
  align-items:center;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1.18rem;
  color:#d8c7aa;
}
.site-nav a{
  position:relative;
  padding:22px 0 23px;
  transition:color .2s ease, text-shadow .2s ease;
}
.site-nav a:hover,.site-nav a.active{color:var(--red3);text-shadow:0 0 16px rgba(229,58,44,.45)}
.site-nav a.active::before{
  content:"";
  position:absolute;
  left:50%;bottom:8px;
  width:68px;height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  box-shadow:0 0 14px rgba(229,58,44,.8);
}
.site-nav a.active::after{
  content:"";
  position:absolute;
  left:50%;bottom:5px;
  width:6px;height:6px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--gold);
  box-shadow:0 0 10px rgba(244,194,104,.8);
}

.nav-toggle{display:none}
.wishlist{justify-self:end;min-width:235px}

.pixel-button{
  --button-bg:rgba(21,12,10,.94);
  --button-border:rgba(216,154,61,.54);
  isolation:isolate;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:50px;
  padding:0 26px;
  border:1px solid var(--button-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent),
    var(--button-bg);
  color:#f3d8a2;
  text-transform:uppercase;
  font-family:var(--terminal);
  letter-spacing:.09em;
  font-size:1.18rem;
  line-height:1;
  cursor:pointer;
  clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 0 28px rgba(0,0,0,.38);
  transition:transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.pixel-button::before,
.pixel-button::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:4px;
  border:1px solid rgba(229,58,44,.35);
  clip-path:inherit;
}
.pixel-button::after{
  inset:auto 14px 8px 14px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(244,194,104,.6), transparent);
  border:0;
}
.pixel-button:hover{
  color:#fff;
  border-color:rgba(255,85,68,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 26px rgba(229,58,44,.28), 0 0 70px rgba(216,154,61,.08);
  transform:translateY(-1px);
}
.pixel-button.primary{
  --button-bg:linear-gradient(180deg, #9f2218, #61100d);
  --button-border:rgba(255,83,65,.85);
  color:#fff2e5;
  text-shadow:0 0 8px rgba(255,255,255,.12);
}
.pixel-button.ghost{background:rgba(18,14,11,.82);color:#edc073}
.pixel-button b,.pixel-button strong{color:var(--gold2);font-weight:400}

.section-panel{position:relative}
.hero{
  display:grid;
  grid-template-columns:minmax(360px, 470px) minmax(620px, 1fr);
  gap:clamp(24px,4vw,72px);
  align-items:start;
  padding:clamp(54px, 6vw, 82px) 0 22px;
}
.hero-copy{padding-top:18px;position:relative;z-index:2}
.rail-text{
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--gold2);
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1.18rem;
  line-height:1;
  margin-bottom:24px;
  white-space:nowrap;
}
.rail-text i{
  width:6px;height:6px;
  background:var(--red);
  transform:rotate(45deg);
  box-shadow:0 0 10px rgba(229,58,44,.8);
}
.rail-text::after{
  content:"";
  flex:1;
  max-width:305px;
  height:1px;
  margin-left:2px;
  background:linear-gradient(90deg, rgba(216,154,61,.42), transparent);
}

.hero-title{
  margin:0 0 25px;
  font-family:var(--pixel);
  font-size:clamp(2.2rem, 3.9vw, 4.65rem);
  line-height:1.25;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:#eee4d3;
  text-shadow:
    0 3px 0 #1d1713,
    0 0 30px rgba(255,236,204,.07);
}
.hero-title span{display:block}
.hero-title .red{
  color:var(--red);
  text-shadow:
    0 3px 0 #270b08,
    0 0 28px rgba(229,58,44,.25);
}
.hero-lead{
  width:min(100%,410px);
  margin:0 0 32px;
  color:#cfc3ad;
  font-size:1.05rem;
  line-height:1.65;
  text-shadow:0 1px 0 #000;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:17px;margin-bottom:23px}
.support-line{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  width:min(100%,520px);
  color:#9b7850;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1.05rem;
  border-top:1px solid rgba(151,86,42,.36);
  padding-top:15px;
}
.support-line span{color:var(--red);font-size:1.45rem;line-height:0}

.hero-stage{
  position:relative;
  padding-top:2px;
}
.hero-stage::before{
  content:"";
  position:absolute;
  inset:-36px -24px 8px 5%;
  background:radial-gradient(circle at 50% 35%, rgba(216,154,61,.09), transparent 46%), radial-gradient(circle at 50% 50%, rgba(229,58,44,.1), transparent 52%);
  filter:blur(8px);
  z-index:-1;
}
.media-card{
  position:relative;
  background:#050505;
  border:1px solid rgba(139,77,39,.6);
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,194,104,.05);
  overflow:hidden;
}
.media-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.98) contrast(1.04) brightness(.91);
}
.media-card::before,
.media-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:0;
  z-index:2;
}
.media-card::before{
  background:
    linear-gradient(90deg, rgba(229,58,44,.7), transparent 16%, transparent 84%, rgba(229,58,44,.7)) 0 0/100% 2px no-repeat,
    linear-gradient(90deg, rgba(229,58,44,.7), transparent 16%, transparent 84%, rgba(229,58,44,.7)) 0 100%/100% 2px no-repeat,
    linear-gradient(180deg, rgba(229,58,44,.7), transparent 18%, transparent 82%, rgba(229,58,44,.7)) 0 0/2px 100% no-repeat,
    linear-gradient(180deg, rgba(229,58,44,.7), transparent 18%, transparent 82%, rgba(229,58,44,.7)) 100% 0/2px 100% no-repeat;
  opacity:.42;
}
.media-card::after{
  background:
    radial-gradient(circle at 50% 50%, transparent 44%, rgba(0,0,0,.45) 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px);
  mix-blend-mode:multiply;
  opacity:.45;
}
.hero-frame{
  border:0;
  width:100%;
  aspect-ratio:900/482;
  background:transparent;
  overflow:visible;
}
.hero-frame img{object-fit:contain;filter:saturate(1.02) contrast(1.06);image-rendering:auto}
.hero-frame::before,.hero-frame::after{display:none}
.media-hit{
  position:absolute;
  inset:0;
  z-index:5;
  display:block;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.media-hit span{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}

.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,28px);
  margin:8px 0 35px;
}
.feature-card{
  position:relative;
  min-height:126px;
  display:grid;
  grid-template-columns:66px 1fr 16px;
  gap:18px;
  align-items:center;
  padding:22px 18px 22px 24px;
  background:
    linear-gradient(180deg, rgba(18,18,17,.94), rgba(10,10,9,.98)),
    radial-gradient(circle at 20% 0, rgba(229,58,44,.12), transparent 45%);
  border:1px solid rgba(97,58,31,.6);
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow:0 14px 38px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.025);
}
.feature-card::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, var(--red) 0 2px, transparent 2px) 0 0/34px 34px no-repeat,
    linear-gradient(315deg, var(--red) 0 2px, transparent 2px) 100% 100%/34px 34px no-repeat;
  opacity:.9;
}
.feature-card:hover{border-color:rgba(229,58,44,.72);box-shadow:0 18px 48px rgba(0,0,0,.48), 0 0 28px rgba(229,58,44,.09)}
.feature-card img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 9px rgba(216,154,61,.15));image-rendering:pixelated}
.feature-card h2{
  margin:0 0 8px;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--red3);
  font-size:1.18rem;
}
.feature-card p{margin:0;color:#bfa57b;line-height:1.45;font-size:.94rem}
.card-arrow{color:var(--red);font-size:1.7rem;align-self:end;padding-bottom:5px;text-shadow:0 0 12px rgba(229,58,44,.5)}

.section-heading{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  margin-bottom:16px;
}
.section-heading h2{
  margin:0;
  color:var(--red3);
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:1.33rem;
  font-weight:400;
}
.section-heading .rule{
  height:1px;
  background:linear-gradient(90deg, rgba(216,154,61,.45), rgba(216,154,61,.1), transparent);
  position:relative;
}
.section-heading .rule::before,
.section-heading .rule::after{
  content:"";
  position:absolute;top:-3px;
  width:7px;height:7px;
  transform:rotate(45deg);
  border:1px solid rgba(216,154,61,.48);
  background:#080706;
}
.section-heading .rule::before{left:0}.section-heading .rule::after{right:0}
.section-heading p{
  margin:0;
  color:#886a43;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1rem;
  white-space:nowrap;
}

.peek{padding:3px 0 24px}
.peek-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:clamp(22px,3vw,42px);
  align-items:start;
}
.media-strip{position:relative}
.media-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.thumb-card{
  aspect-ratio:288/164;
  border-color:rgba(137,82,43,.75);
  box-shadow:0 18px 42px rgba(0,0,0,.58), 0 0 32px rgba(229,58,44,.06);
}
.thumb-card img{image-rendering:auto}
.magnify{
  position:absolute;
  top:13px;right:13px;
  z-index:4;
  color:var(--gold2);
  font-size:1.65rem;
  line-height:1;
  text-shadow:0 0 15px rgba(244,194,104,.55);
}
.video-play{
  position:absolute;
  z-index:4;
  left:50%;top:50%;
  width:65px;height:65px;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  border:2px solid var(--red);
  border-radius:50%;
  background:rgba(22,6,5,.65);
  color:var(--red3);
  box-shadow:0 0 32px rgba(229,58,44,.38);
  font-size:1.65rem;
}
.dots{
  grid-column:1/-1;
  display:flex;justify-content:center;gap:10px;margin-top:13px;
}
.dots span{width:8px;height:8px;background:#5c482b;transform:rotate(45deg);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.dots .active{background:var(--red);box-shadow:0 0 10px rgba(229,58,44,.8)}

.care-card{
  position:relative;
  min-height:220px;
  padding:25px 26px 22px;
  background:linear-gradient(180deg, rgba(18,18,16,.96), rgba(8,8,8,.98));
  border:1px solid rgba(101,62,34,.68);
  clip-path:polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  box-shadow:0 18px 55px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.03);
}
.care-card::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(135deg,var(--red) 0 2px,transparent 2px) 0 0/40px 40px no-repeat,
    radial-gradient(circle at 12% 46%, rgba(216,154,61,.13), transparent 34%);
}
.care-title{
  color:var(--red3);
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1.22rem;
  margin-bottom:20px;
}
.care-title span{color:var(--red)}
.care-body{
  display:grid;
  grid-template-columns:94px 1fr;
  column-gap:20px;
  row-gap:8px;
  align-items:start;
}
.care-body img{
  width:94px;height:94px;object-fit:cover;border-radius:50%;border:1px solid rgba(216,154,61,.32);box-shadow:0 0 25px rgba(216,154,61,.12);image-rendering:pixelated
}
.care-body p{margin:0;color:#c7b99e;line-height:1.55;font-size:.95rem}
.care-body p+p{grid-column:2;margin-top:2px}.care-body strong{grid-column:1/-1;color:var(--gold2);font-family:var(--terminal);font-size:2rem;font-weight:400;margin-top:4px}

.deep-panel{
  position:relative;
  margin:34px 0 0;
  padding:clamp(28px,3vw,42px);
  background:
    radial-gradient(circle at 100% 0, rgba(229,58,44,.09), transparent 32%),
    linear-gradient(180deg, rgba(17,16,14,.86), rgba(8,8,7,.96));
  border:1px solid rgba(105,62,32,.6);
  clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  box-shadow:0 18px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.025);
}
.deep-panel::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(135deg, rgba(229,58,44,.9) 0 2px, transparent 2px) 0 0/46px 46px no-repeat,
    linear-gradient(315deg, rgba(216,154,61,.8) 0 2px, transparent 2px) 100% 100%/46px 46px no-repeat;
}
.game-section{
  display:grid;
  grid-template-columns:minmax(300px, 440px) 1fr;
  gap:32px;
  align-items:start;
}
.tiny-label{
  margin:0 0 10px;
  color:var(--gold2);
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:1.05rem;
}
.panel-copy h2,.truth-section h2,.contact-section h2{
  margin:0 0 16px;
  max-width:720px;
  color:#f2e4cf;
  font-family:var(--pixel);
  font-size:clamp(1.25rem, 2vw, 2.15rem);
  line-height:1.45;
  text-transform:uppercase;
}
.panel-copy p,.truth-section p,.contact-section p{
  color:#c8b99d;
  line-height:1.68;
  margin:0;
}
.loop-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.loop-list article{
  background:rgba(5,5,5,.58);
  border:1px solid rgba(99,61,33,.5);
  padding:18px;
  min-height:188px;
  position:relative;
}
.loop-list span{
  display:block;
  color:var(--red3);
  font-family:var(--terminal);
  font-size:1.4rem;
  margin-bottom:12px;
}
.loop-list h3{
  margin:0 0 10px;
  color:var(--gold2);
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1.24rem;
  font-weight:400;
}
.loop-list p{margin:0;color:#bcae92;line-height:1.5;font-size:.92rem}

.truth-section{
  display:grid;
  grid-template-columns:minmax(320px, .72fr) minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(24px, 3vw, 42px);
  align-items:start;
}
.truth-section > *{min-width:0}
.truth-section h2.stacked-title{
  font-size:clamp(1.16rem, 1.48vw, 1.58rem);
  line-height:1.65;
  max-width:360px;
}
.truth-section h2.stacked-title span{display:block}

.devlog-section{padding:42px 0 8px}
.section-heading.compact{margin-bottom:20px}
.devlog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dev-card{
  position:relative;
  padding:24px;
  background:linear-gradient(180deg, rgba(17,16,14,.88), rgba(7,7,6,.98));
  border:1px solid rgba(101,62,34,.55);
  min-height:238px;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.dev-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg, var(--red) 0 2px, transparent 2px) 0 0/36px 36px no-repeat;opacity:.75}
.dev-card h3{margin:0 0 12px;color:#f2dfbd;font-family:var(--terminal);font-size:1.55rem;letter-spacing:.04em;text-transform:uppercase;font-weight:400}
.dev-card p:not(.tiny-label){color:#bda98a;line-height:1.58;margin:0 0 20px}
.dev-card a{color:var(--red3);font-family:var(--terminal);text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem}
.dev-card a:hover{color:#fff;text-shadow:0 0 14px rgba(229,58,44,.5)}

.contact-section{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
  margin-bottom:22px;
}
.contact-section p{max-width:760px}.contact-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}

.footer{
  min-height:78px;
  border-top:1px solid rgba(114,67,35,.3);
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  align-items:center;
  gap:20px;
  color:#7f6141;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:1rem;
  position:relative;
}
.footer::before{
  content:"";
  position:absolute;top:-6px;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(216,154,61,.25), transparent);
}
.footer p{margin:0}.footer img{width:58px;height:58px;margin:auto;opacity:.7;filter:saturate(.85)}
.footer nav{justify-self:end;display:flex;gap:28px}.footer a:hover{color:var(--red3)}

.media-modal{
  width:min(92vw, 1060px);
  padding:0;
  border:1px solid rgba(229,58,44,.55);
  background:#060505;
  color:var(--ink);
  box-shadow:0 0 0 1px rgba(216,154,61,.18), 0 30px 120px rgba(0,0,0,.9), 0 0 60px rgba(229,58,44,.16);
}
.media-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(6px)}
.media-modal figure{margin:0;padding:18px;background:linear-gradient(180deg, rgba(20,12,10,.98), rgba(4,4,4,.98))}
.media-modal img{width:100%;max-height:72vh;object-fit:contain;border:1px solid rgba(111,66,37,.6);background:#020202}
.media-modal figcaption{padding:14px 6px 0;color:#cdb58d;font-family:var(--terminal);font-size:1.22rem;letter-spacing:.05em;text-transform:uppercase}
.modal-close{
  position:absolute;right:13px;top:12px;z-index:4;
  width:42px;height:42px;border:1px solid rgba(229,58,44,.65);background:rgba(10,5,5,.92);color:#fff;font-size:2rem;line-height:1;cursor:pointer;
}
.modal-close:hover{background:var(--red2)}


/* V4 polish pass: deeper nostalgia, premium staging, and revision markers */
.hero{position:relative;}
.hero::after{
  content:"";
  position:absolute;
  left:-7%;
  bottom:-10px;
  width:min(540px, 45vw);
  height:260px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 32% 55%, rgba(216,154,61,.10), transparent 38%),
    linear-gradient(180deg, transparent 0 34%, rgba(117,55,31,.20) 35% 37%, transparent 37% 52%, rgba(117,55,31,.16) 53% 55%, transparent 55%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(229,58,44,.09) 18px 20px, transparent 20px 42px);
  opacity:.55;
  mask-image:linear-gradient(90deg, transparent 0, black 22%, black 74%, transparent 100%);
}
.hero-copy,.hero-stage{position:relative;z-index:1;}
.hero-title{letter-spacing:-.045em;}
.hero-title::after{
  content:"";
  display:block;
  width:min(250px, 64%);
  height:1px;
  margin-top:18px;
  background:linear-gradient(90deg, rgba(229,58,44,.72), rgba(216,154,61,.38), transparent);
  box-shadow:0 0 18px rgba(229,58,44,.25);
}
.media-card img{transition:transform .65s ease, filter .65s ease;}
.media-card:hover img{transform:scale(1.022);filter:saturate(1.06) contrast(1.09) brightness(.96);}
.hero-frame:hover img{transform:scale(1.008);}
.hero-frame::after{
  content:"";
  display:block;
  position:absolute;
  inset:12px;
  pointer-events:none;
  border:1px solid rgba(244,194,104,.10);
  box-shadow:inset 0 0 45px rgba(0,0,0,.44), 0 0 70px rgba(229,58,44,.09);
  z-index:3;
}
.feature-card,.dev-card,.deep-panel,.care-card{transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;}
.feature-card:hover,.dev-card:hover,.care-card:hover{
  transform:translateY(-2px);
  border-color:rgba(229,58,44,.75);
}
.deep-panel:hover{border-color:rgba(137,82,43,.78);}
.feeling-section{
  display:grid;
  grid-template-columns:minmax(320px, 520px) 1fr;
  gap:clamp(26px,3.2vw,50px);
  align-items:stretch;
  margin:22px 0 32px;
  background:
    radial-gradient(circle at 16% 18%, rgba(216,154,61,.10), transparent 36%),
    radial-gradient(circle at 85% 0, rgba(229,58,44,.10), transparent 32%),
    linear-gradient(180deg, rgba(18,15,12,.88), rgba(7,7,6,.97));
}
.feeling-section::after{
  content:"";
  position:absolute;
  left:38px;
  right:38px;
  bottom:18px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(216,154,61,.25), rgba(229,58,44,.30), transparent);
}
.feeling-main{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.feeling-main h2,
.soul-copy h2{
  margin:0 0 16px;
  max-width:760px;
  color:#f2e4cf;
  font-family:var(--pixel);
  font-size:clamp(1.16rem, 1.85vw, 2rem);
  line-height:1.55;
  text-transform:uppercase;
  text-shadow:0 0 32px rgba(216,154,61,.07);
}
.feeling-main p:not(.tiny-label),
.soul-copy p:not(.tiny-label){
  margin:0;
  color:#c8b99d;
  line-height:1.68;
}
.feeling-notes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.feeling-notes article,
.tone-list li{
  position:relative;
  min-height:180px;
  padding:18px 16px;
  background:
    linear-gradient(180deg, rgba(9,9,8,.82), rgba(3,3,3,.94)),
    radial-gradient(circle at 50% 0, rgba(216,154,61,.12), transparent 46%);
  border:1px solid rgba(95,57,31,.56);
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 14px 32px rgba(0,0,0,.36);
}
.feeling-notes article::before,
.tone-list li::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(229,58,44,.95) 0 2px, transparent 2px) 0 0/34px 34px no-repeat,
    linear-gradient(315deg, rgba(216,154,61,.70) 0 2px, transparent 2px) 100% 100%/34px 34px no-repeat;
  opacity:.76;
}
.feeling-notes span{
  display:block;
  color:var(--red3);
  font-family:var(--terminal);
  font-size:1.35rem;
  margin-bottom:12px;
  letter-spacing:.08em;
}
.feeling-notes h3,
.tone-list span{
  display:block;
  margin:0 0 10px;
  color:var(--gold2);
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1.2rem;
  line-height:1.1;
  font-weight:400;
}
.feeling-notes p,
.tone-list p{
  margin:0;
  color:#bda98a;
  line-height:1.52;
  font-size:.92rem;
}
.soul-section{
  display:grid;
  grid-template-columns:minmax(320px, 520px) 1fr;
  gap:clamp(24px,3vw,44px);
  margin-top:34px;
}
.tone-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.tone-list li{min-height:150px;}
.developer-mode{
  border-top:1px solid rgba(114,67,35,.28);
  padding:16px 0 22px;
  display:grid;
  grid-template-columns:auto minmax(320px, 540px);
  gap:18px;
  align-items:center;
  justify-content:end;
  color:#8d704e;
}
.developer-mode .tiny-label{margin:0;color:#83613d;}
.developer-toggle{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:center;
  cursor:pointer;
  padding:12px 14px;
  border:1px solid rgba(101,62,34,.58);
  background:rgba(7,7,6,.72);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.developer-toggle input{position:absolute;opacity:0;pointer-events:none;}
.developer-switch{
  width:42px;
  height:22px;
  border:1px solid rgba(216,154,61,.42);
  background:#050505;
  position:relative;
  box-shadow:inset 0 0 10px rgba(0,0,0,.9);
}
.developer-switch::before{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:14px;
  height:14px;
  background:#65462b;
  box-shadow:0 0 0 1px rgba(0,0,0,.75);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.developer-toggle input:checked + .developer-switch::before{
  transform:translateX(18px);
  background:var(--red3);
  box-shadow:0 0 14px rgba(229,58,44,.75);
}
.developer-toggle span:last-child{display:grid;gap:4px;}
.developer-toggle strong{
  color:#e7c086;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1.05rem;
  font-weight:400;
}
.developer-toggle em{
  color:#7a6547;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.95rem;
  font-style:normal;
}
.dev-target{position:relative!important;}
.dev-marker{
  display:none !important; /* leak-proof: generic span selectors must not reveal markers */
  position:absolute;
  top:6px;
  left:6px;
  z-index:999;
  min-width:34px;
  height:24px;
  align-items:center;
  justify-content:center;
  padding:0 7px;
  border:1px solid rgba(244,194,104,.78);
  background:rgba(14,7,5,.94);
  color:#fff2d7;
  font-family:var(--terminal);
  font-size:1.05rem;
  line-height:1;
  letter-spacing:.08em;
  text-shadow:0 0 8px rgba(229,58,44,.85);
  box-shadow:0 0 0 1px rgba(229,58,44,.45), 0 0 24px rgba(229,58,44,.45);
  pointer-events:none;
  clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
body.dev-mode .dev-marker{display:flex !important;}
body.dev-mode .dev-target{
  outline:1px dashed rgba(244,194,104,.42);
  outline-offset:3px;
}
body.dev-mode .site-shell{box-shadow:inset 0 0 0 1px rgba(244,194,104,.18), 0 0 120px rgba(0,0,0,.74);}
body.dev-mode .developer-mode{color:#d9b171;}

@media (max-width:1240px){
  .feeling-section,.soul-section{grid-template-columns:1fr;}
  .feeling-notes,.tone-list{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .feeling-notes,.tone-list{grid-template-columns:1fr;}
  .developer-mode{grid-template-columns:1fr;justify-content:stretch;}
}
@media (max-width:760px){
  .hero::after{display:none;}
  .feeling-notes article,.tone-list li{min-height:auto;}
  .developer-toggle{width:100%;}
  .developer-toggle em{font-size:.82rem;}
}

@media (max-width:1240px){
  .topbar{grid-template-columns:1fr auto;gap:18px;padding:10px 0}.site-nav{grid-column:1/-1;order:3;justify-content:space-between;width:100%;gap:18px}.wishlist{grid-column:2;min-width:auto}.hero{grid-template-columns:1fr;gap:30px}.hero-copy{padding-top:0}.hero-title{max-width:780px}.hero-lead{width:min(100%,650px)}.features{grid-template-columns:repeat(2,1fr)}.peek-grid{grid-template-columns:1fr}.care-card{max-width:none}.truth-section{grid-template-columns:1fr}.game-section{grid-template-columns:1fr}.loop-list{grid-template-columns:repeat(2,1fr)}.contact-section{grid-template-columns:1fr}.contact-actions{justify-content:flex-start}
}
@media (max-width:760px){
  .site-shell{width:100%;padding:0 16px 22px}.topbar{grid-template-columns:1fr auto;min-height:96px}.brand-mark{width:64px;height:78px}.brand-mark img{width:58px;height:auto;transform:none}.brand-name{font-size:1.02rem}.brand-motto{font-size:.95rem}.nav-toggle{display:grid;gap:4px;place-items:center;background:transparent;border:1px solid rgba(216,154,61,.35);padding:9px;color:var(--gold2);font-family:var(--terminal);text-transform:uppercase;letter-spacing:.1em}.nav-toggle span{display:block;width:26px;height:2px;background:var(--red)}.nav-toggle b{font-size:.78rem;font-weight:400}.site-nav{display:none;position:absolute;z-index:30;top:96px;left:0;right:0;background:rgba(5,5,5,.96);border:1px solid rgba(109,64,34,.6);padding:16px;grid-template-columns:1fr;gap:4px}.site-nav.open{display:grid}.site-nav a{padding:13px 8px}.site-nav a.active::before,.site-nav a.active::after{display:none}.wishlist{display:none}.hero{padding-top:42px}.rail-text{font-size:1rem;white-space:normal;flex-wrap:wrap}.rail-text::after{display:none}.hero-title{font-size:clamp(1.7rem, 8vw, 2.6rem)}.hero-actions{display:grid}.pixel-button{width:100%;min-height:48px}.features{grid-template-columns:1fr}.feature-card{grid-template-columns:56px 1fr 14px}.feature-card img{width:48px;height:48px}.section-heading{grid-template-columns:1fr;gap:8px}.section-heading p{white-space:normal}.media-strip{grid-template-columns:1fr}.thumb-card{min-height:190px}.care-body{grid-template-columns:74px 1fr}.care-body img{width:74px;height:74px}.loop-list{grid-template-columns:1fr}.devlog-grid{grid-template-columns:1fr}.footer{grid-template-columns:1fr;text-align:center;gap:10px;padding:18px 0}.footer nav{justify-self:center;gap:18px;flex-wrap:wrap}.contact-actions{display:grid}.panel-copy h2,.truth-section h2,.contact-section h2{font-size:1.22rem}.deep-panel{padding:24px 18px}
}

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

/* Final developer-mode placement: persistent bottom control */
body{padding-bottom:92px;}
.developer-mode{
  position:fixed;
  left:50%;
  bottom:12px;
  z-index:1500;
  transform:translateX(-50%);
  width:min(760px, calc(100vw - 24px));
  padding:10px 12px;
  display:grid;
  grid-template-columns:auto minmax(260px, 1fr);
  gap:14px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(216,154,61,.42);
  background:linear-gradient(180deg, rgba(13,10,9,.95), rgba(4,4,4,.97));
  color:#cdb58d;
  box-shadow:0 20px 70px rgba(0,0,0,.72), 0 0 26px rgba(229,58,44,.12), inset 0 0 0 1px rgba(255,255,255,.025);
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  backdrop-filter:blur(10px);
}
body.dev-mode .developer-mode{border-color:rgba(255,85,68,.82);box-shadow:0 20px 70px rgba(0,0,0,.72), 0 0 32px rgba(229,58,44,.22), inset 0 0 0 1px rgba(255,255,255,.035);}
body.dev-mode .developer-mode .dev-marker{display:none!important;}
@media(max-width:760px){
  body{padding-bottom:112px;}
  .developer-mode{grid-template-columns:1fr;gap:8px;align-items:start;}
  .developer-mode .tiny-label{display:none;}
}

/* Final polish and compatibility for the bottom developer-mode control */
.screen-badge,
.screen-caption{
  position:absolute;
  z-index:4;
  pointer-events:none;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.1em;
  text-shadow:0 1px 0 #000, 0 0 12px rgba(0,0,0,.8);
}
.screen-badge{
  top:16px;
  left:22px;
  padding:4px 9px 5px;
  color:#f4c268;
  background:rgba(5,4,3,.62);
  border:1px solid rgba(216,154,61,.34);
  font-size:.95rem;
}
.screen-caption{
  right:24px;
  bottom:18px;
  color:#b99257;
  font-size:.92rem;
  opacity:.84;
}
.stacked-title span{display:block}

.developer-mode{
  margin:28px 0 22px;
  padding:20px 22px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:22px;
  align-items:center;
  background:linear-gradient(180deg, rgba(9,8,8,.92), rgba(4,4,4,.95));
  border:1px dashed rgba(216,154,61,.38);
  color:#bfa57b;
  position:relative;
}
.developer-mode::before{
  content:"";
  position:absolute;
  left:16px;right:16px;top:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(229,58,44,.32), transparent);
}
.developer-mode .tiny-label{margin:0 0 6px}
.developer-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  user-select:none;
  color:var(--gold2);
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1.1rem;
  white-space:nowrap;
}
.developer-toggle input{position:absolute;opacity:0;pointer-events:none}
.developer-switch{
  width:58px;height:30px;
  border:1px solid rgba(216,154,61,.55);
  background:#050505;
  position:relative;
  box-shadow:inset 0 0 16px rgba(0,0,0,.55);
  flex:0 0 auto;
}
.developer-switch::before{
  content:"";
  position:absolute;
  top:5px;left:5px;
  width:18px;height:18px;
  background:#705034;
  box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 0 10px rgba(216,154,61,.18);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.developer-toggle input:checked + .developer-switch::before{
  transform:translateX(28px);
  background:var(--red3);
  box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 0 18px rgba(229,58,44,.75);
}
.developer-toggle input:focus-visible + .developer-switch{outline:2px solid var(--gold2);outline-offset:3px}
.developer-toggle strong{
  display:block;
  color:#f3d8a2;
  font-weight:400;
}
.developer-toggle em{
  display:block;
  max-width:380px;
  margin-top:2px;
  color:#8f744f;
  font-style:normal;
  white-space:normal;
  text-transform:none;
  letter-spacing:.02em;
}
body.dev-mode .developer-mode{
  border-color:rgba(229,58,44,.75);
  box-shadow:0 0 28px rgba(229,58,44,.12);
}

@media (max-width:860px){
  .developer-mode{grid-template-columns:1fr}
  .developer-toggle{justify-content:flex-start;white-space:normal}
}
@media (max-width:760px){
  .screen-badge{top:10px;left:10px;font-size:.78rem}
  .screen-caption{display:none}
}

/* final pass: bottom developer panel and logo safety overrides */
.developer-panel{
  margin:18px 0 4px;
  padding:18px 20px;
  display:grid;
  grid-template-columns:minmax(280px,1fr) auto;
  gap:18px;
  align-items:center;
  border:1px solid rgba(105,62,32,.58);
  background:
    radial-gradient(circle at 0 50%, rgba(216,154,61,.08), transparent 32%),
    linear-gradient(180deg, rgba(13,12,11,.92), rgba(5,5,5,.98));
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow:0 18px 48px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.025);
}
.developer-panel h2{
  margin:0 0 8px;
  color:#f2dfbd;
  font-family:var(--terminal);
  font-size:1.5rem;
  line-height:1.1;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:400;
}
.developer-panel p:not(.tiny-label){
  margin:0;
  color:#a98d66;
  line-height:1.5;
}
.developer-toggle{
  min-width:230px;
}
.developer-toggle-copy{
  display:grid;
  gap:4px;
}
.developer-toggle-copy em{
  color:#7a6547;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.95rem;
  font-style:normal;
}
body.dev-mode .developer-panel,
body.devmode-on .developer-panel{
  border-color:rgba(255,85,68,.78);
  box-shadow:0 0 30px rgba(229,58,44,.13), inset 0 0 0 1px rgba(255,255,255,.025);
}
body.dev-mode [data-dev-id],
body.devmode-on [data-dev-id]{
  outline:1px dashed rgba(244,194,104,.46);
  outline-offset:4px;
}
body.dev-mode [data-dev-id]:hover,
body.devmode-on [data-dev-id]:hover{
  outline-color:rgba(255,85,68,.78);
}
.brand-mark img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}
@media (max-width:900px){
  .developer-panel{grid-template-columns:1fr;}
  .developer-toggle{width:100%;}
}
@media (max-width:760px){
  .brand-mark{width:70px !important;height:88px !important;}
  .brand-mark img{width:100% !important;height:100% !important;}
  .developer-panel{padding:16px;}
}

/* Final v4 alignment overrides */
.page-vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,154,61,.08), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(229,58,44,.08), transparent 28%),
    radial-gradient(ellipse at center, transparent 0 48%, rgba(0,0,0,.48) 100%);
}
.memory-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  width:min(100%, 470px);
  margin:0 0 26px;
}
.memory-row span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border:1px solid rgba(216,154,61,.28);
  background:rgba(6,5,4,.58);
  color:#c09155;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.98rem;
  clip-path:polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.screen-badge,
.screen-caption{
  position:absolute;
  z-index:7;
  pointer-events:none;
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.12em;
  text-shadow:0 1px 0 #000, 0 0 14px rgba(216,154,61,.35);
}
.screen-badge{
  top:24px;
  left:38px;
  padding:5px 10px;
  border:1px solid rgba(216,154,61,.28);
  background:rgba(5,4,4,.58);
  color:#f4c268;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  font-size:.95rem;
}
.screen-caption{
  right:40px;
  bottom:30px;
  color:#c09456;
  font-size:.95rem;
}
.developer-panel{
  margin:18px 0 2px;
}
.developer-toggle{
  width:min(100%, 420px);
  justify-self:end;
}
.developer-toggle .developer-switch{grid-row:1 / span 2;}
.dev-marker::after{
  content:attr(data-label);
  position:absolute;
  left:calc(100% + 6px);
  top:50%;
  transform:translateY(-50%);
  display:none;
  width:max-content;
  max-width:280px;
  padding:5px 7px;
  color:#f3dfb5;
  background:rgba(5,5,5,.96);
  border:1px solid rgba(216,154,61,.38);
  font-size:.9rem;
  white-space:normal;
  text-shadow:none;
}
body.dev-mode [data-dev-id]:hover > .dev-marker::after{display:block;}
body.dev-mode [data-dev-id]{outline:1px dashed rgba(244,194,104,.42);outline-offset:3px;}
body.dev-mode .developer-panel .dev-marker{display:none;}
@media (max-width:900px){
  .screen-caption{display:none;}
  .developer-toggle{justify-self:stretch;width:100%;}
}
@media (max-width:760px){
  .screen-badge{top:12px;left:14px;font-size:.82rem;letter-spacing:.08em;}
  .memory-row{margin-bottom:22px;}
  .memory-row span{font-size:.9rem;}
}

/* v4 final overrides: stable layout after polish pass */
body{padding-bottom:0!important;}
.reveal-ready{opacity:0;transform:translateY(14px);transition:opacity .55s ease, transform .55s ease;}
.reveal-ready.is-visible{opacity:1;transform:translateY(0);}
.soul-section{
  display:grid!important;
  grid-template-columns:104px minmax(300px,.95fr) minmax(0,1.25fr)!important;
  align-items:center!important;
  gap:clamp(22px,3vw,36px)!important;
}
.soul-section .tone-list{
  grid-template-columns:1fr!important;
}
.soul-section .tone-list li{
  min-height:auto!important;
}
.soul-seal{
  width:104px;height:104px;
  display:grid;
  place-items:center;
  border:1px solid rgba(216,154,61,.28);
  border-radius:50%;
  background:radial-gradient(circle, rgba(216,154,61,.12), rgba(0,0,0,.52) 67%);
  box-shadow:inset 0 0 28px rgba(216,154,61,.08), 0 0 40px rgba(229,58,44,.08);
}
.soul-seal img{width:72px;height:72px;opacity:.82;filter:saturate(.9);}
body.dev-mode .dev-target{outline:1px dashed rgba(244,194,104,.46);outline-offset:4px;}
body.dev-mode .dev-target:hover{outline-color:rgba(255,85,68,.78);}
body.dev-mode [data-dev-skip], body.dev-mode [data-dev-skip] *{outline:none!important;}
body.dev-mode [data-dev-skip] .dev-marker{display:none!important;}
@media(max-width:1240px){
  .soul-section{grid-template-columns:104px 1fr!important;}
  .soul-section .tone-list{grid-column:1/-1;grid-template-columns:repeat(3,1fr)!important;}
}
@media(max-width:900px){
  .soul-section{grid-template-columns:1fr!important;}
  .soul-seal{display:none;}
  .soul-section .tone-list{grid-template-columns:1fr!important;}
}
@media(max-width:760px){
  .reveal-ready{opacity:1;transform:none;transition:none;}
}

/* Final polish after visual review: avoid text overlap on the hero media frame. */
.screen-caption{display:none;}

/* =========================================================================
   v5 — accessibility, hidden dev panel, and launch-feature components
   ========================================================================= */

/* Accessible visually-hidden helper */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* The developer panel is private: the [hidden] attribute must always win. */
.developer-mode[hidden]{display:none !important;}

/* Small contrast lifts for readability on the near-black background */
.section-heading p{color:#a07e4f;}
.footer{color:#977551;}

/* ---- Contact: layout now holds copy + form + socials ---- */
.contact-copy{min-width:0;}
.contact-copy > p{max-width:640px;}

/* ---- Newsletter signup ---- */
.signup{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:22px 0 4px;
  max-width:560px;
}
.signup input[type="email"]{
  flex:1 1 240px;
  min-height:50px;
  padding:0 16px;
  color:#f1e6d2;
  background:rgba(6,5,4,.85);
  border:1px solid rgba(216,154,61,.45);
  font-family:var(--terminal);
  font-size:1.16rem;
  letter-spacing:.04em;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.signup input[type="email"]::placeholder{color:#7c6240;}
.signup input[type="email"]:focus-visible{
  outline:none;
  border-color:rgba(255,85,68,.85);
  box-shadow:0 0 0 1px rgba(229,58,44,.35), 0 0 22px rgba(229,58,44,.18);
}
.signup .pixel-button{flex:0 0 auto;}
.signup-status{
  flex:1 0 100%;
  margin:2px 0 0;
  min-height:1.1em;
  color:#a08862;
  font-family:var(--terminal);
  letter-spacing:.05em;
  font-size:1.02rem;
}
.signup-status.is-ok{color:var(--gold2);}
.signup-status.is-error{color:var(--red3);}

/* ---- Social / platform links ---- */
.social-row{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 0;
  padding:0;
}
.social-row li{margin:0;}
.social-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:0 14px;
  color:#d8b074;
  background:rgba(8,6,5,.6);
  border:1px solid rgba(216,154,61,.3);
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1rem;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition:color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.social-link b{color:var(--red3);font-size:1.05rem;line-height:1;}
.social-link svg{width:18px;height:18px;flex:0 0 auto;color:var(--red3);}
.social-link:hover svg{color:#fff;}
.social-link:hover{
  color:#fff;
  border-color:rgba(255,85,68,.8);
  box-shadow:0 0 22px rgba(229,58,44,.16);
  transform:translateY(-1px);
}
.social-link:focus-visible{outline:2px solid var(--gold2);outline-offset:3px;}

/* ---- Roadmap ---- */
.roadmap-section{padding:42px 0 8px;}
.roadmap-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  counter-reset:road;
}
.road-card{
  position:relative;
  padding:22px 20px;
  min-height:210px;
  background:linear-gradient(180deg, rgba(17,16,14,.9), rgba(7,7,6,.98));
  border:1px solid rgba(101,62,34,.55);
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow:0 14px 38px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.02);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.road-card::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg, var(--red) 0 2px, transparent 2px) 0 0/34px 34px no-repeat;
  opacity:.7;
}
.road-card:hover{transform:translateY(-2px);border-color:rgba(229,58,44,.7);}
.road-card.is-now{
  border-color:rgba(229,58,44,.6);
  box-shadow:0 14px 38px rgba(0,0,0,.45), 0 0 28px rgba(229,58,44,.12);
}
.road-stage{
  display:inline-block;
  margin-bottom:14px;
  padding:3px 10px 4px;
  color:#f4c268;
  background:rgba(5,4,3,.6);
  border:1px solid rgba(216,154,61,.34);
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.95rem;
  clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.road-card.is-now .road-stage{color:#fff;background:linear-gradient(180deg,#9f2218,#61100d);border-color:rgba(255,83,65,.7);}
.road-card h3{
  margin:0 0 10px;
  color:var(--gold2);
  font-family:var(--terminal);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:1.32rem;
  font-weight:400;
}
.road-card p{margin:0;color:#bcae92;line-height:1.5;font-size:.93rem;}

@media (max-width:1240px){
  .roadmap-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .roadmap-grid{grid-template-columns:1fr;}
  .road-card{min-height:auto;}
  .signup .pixel-button{width:100%;}
}

/* ---- Playable prototype demo (lazy, sound-gated) ---- */
.demo-widget{margin-top:28px;}
.demo-head{margin-bottom:14px;}
.demo-head h3{margin:0 0 4px;color:var(--red3);font-family:var(--terminal);text-transform:uppercase;letter-spacing:.1em;font-size:1.32rem;font-weight:400;}
.demo-head p{margin:0;color:#9b8a6a;font-size:.95rem;}
.demo-stage{position:relative;width:min(560px,100%);aspect-ratio:1408/1117;margin:0 auto;background:#050505;border:1px solid rgba(137,82,43,.7);overflow:hidden;box-shadow:0 18px 42px rgba(0,0,0,.55),0 0 32px rgba(229,58,44,.06);transition:width .38s ease;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);}
.demo-stage.is-playing{width:min(800px,100%);aspect-ratio:4/3;}
.demo-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
.demo-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#050505;display:block;}
.demo-mute[hidden]{display:none;}
.demo-cover,.demo-play{transition:opacity .25s ease;}
.demo-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;background:rgba(5,4,4,.32);border:0;color:#fff;cursor:pointer;z-index:3;}
.demo-play:hover{background:rgba(5,4,4,.16);}
.demo-play-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;border:2px solid var(--red);background:rgba(22,6,5,.7);color:var(--red3);font-size:1.6rem;box-shadow:0 0 32px rgba(229,58,44,.45);}
.demo-play-label{font-family:var(--terminal);text-transform:uppercase;letter-spacing:.1em;font-size:1.1rem;text-shadow:0 1px 3px #000;}
.demo-stage.is-playing .demo-cover,.demo-stage.is-playing .demo-play{opacity:0;pointer-events:none;}
.demo-mute{position:absolute;top:8px;right:8px;z-index:4;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(229,58,44,.6);background:rgba(8,5,5,.84);color:#fff;font-size:1.05rem;line-height:1;cursor:pointer;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);}
.demo-mute:hover{border-color:rgba(255,85,68,.9);}
.demo-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;color:#cdb58d;font-family:var(--terminal);letter-spacing:.1em;text-transform:uppercase;font-size:1.05rem;}
.demo-note{margin:12px auto 0;max-width:640px;text-align:center;color:#7c6240;font-family:var(--terminal);letter-spacing:.05em;font-size:.95rem;}
@media(max-width:760px){.demo-stage,.demo-stage.is-playing{width:100%;}}