/* ═══════════════════════════════════════════════════════
   POCKET FRIEND — pixel-console product site
   design system + layout + motion
   ═══════════════════════════════════════════════════════ */

:root{
  /* palette */
  --ink:        #0d0d12;
  --ink-2:      #15151c;
  --paper:      #e8f5e9;   /* mint white */
  --grid:       #cfe8d2;
  --green:      #9be30e;
  --green-deep: #5aa400;
  --pink:       #ff2e88;
  --pink-deep:  #c40e5e;
  --cyan:       #19c2e6;
  --blue:       #1d7ef2;
  --yellow:     #ffd23f;
  --white:      #ffffff;
  --dim:        #6a7a6e;

  /* type */
  --f-pixel: 'Press Start 2P', monospace;
  --f-dot:   'DotGothic16', sans-serif;
  --f-body:  'Noto Sans SC', sans-serif;

  /* pixel shadow */
  --px: 4px;
  --shadow-pixel:
    calc(var(--px)*1) 0 0 0 var(--ink),
    calc(var(--px)*-1) 0 0 0 var(--ink),
    0 calc(var(--px)*1) 0 0 var(--ink),
    0 calc(var(--px)*-1) 0 0 var(--ink);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  font-family:var(--f-body);
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:none; }
::selection{ background:var(--pink); color:var(--white); }

@media (hover:none), (pointer:coarse){
  body, button, a{ cursor:auto; }
  .cursor{ display:none; }
}

/* ───────────────────────────── custom cursor */
.cursor{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
}
.cursor__dot{
  position:absolute; width:6px; height:6px; background:var(--green);
  transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; width:34px; height:34px; border:3px solid var(--green);
  transform:translate(-50%,-50%) rotate(0deg);
  transition:width .25s var(--ease-out), height .25s var(--ease-out),
             border-color .25s, border-radius .25s;
  image-rendering:pixelated;
}
.cursor__label{
  position:absolute; top:26px; left:0; transform:translateX(-50%);
  font-family:var(--f-pixel); font-size:8px; color:var(--ink);
  background:var(--green); padding:4px 6px; white-space:nowrap;
  opacity:0; transition:opacity .2s;
}
.cursor.is-hover .cursor__ring{ width:52px; height:52px; border-color:var(--pink); }
.cursor.is-hover .cursor__dot{ background:var(--pink); }
.cursor.is-hover .cursor__label{ opacity:1; }

/* ───────────────────────────── scrollbar progress */
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:1200;
  background:rgba(255,255,255,.06);
}
.scrollbar__fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--green),var(--pink),var(--cyan));
}

/* ───────────────────────────── boot */
.boot{
  position:fixed; inset:0; z-index:2000;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:28px;
  transition:opacity .6s var(--ease-out), visibility .6s;
}
body:not([data-state="boot"]) .boot{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__logo{
  font-family:var(--f-pixel); font-size:clamp(18px,4vw,34px);
  letter-spacing:2px;
}
.boot__logo-pocket{ color:var(--cyan); text-shadow:3px 3px 0 rgba(25,194,230,.35); }
.boot__logo-friend{ color:var(--green); text-shadow:3px 3px 0 rgba(155,227,14,.3); margin-left:.4em; }
.boot__bar{
  width:min(420px,70vw); height:18px; border:3px solid var(--paper);
  padding:3px; background:var(--ink-2);
}
.boot__bar-fill{
  height:100%; width:0%;
  background:repeating-linear-gradient(90deg,var(--green) 0 8px, transparent 8px 12px);
  transition:width .3s steps(8);
}
.boot__status{
  font-family:var(--f-dot); font-size:14px; color:var(--dim); letter-spacing:2px;
}
.boot__hint{
  font-family:var(--f-pixel); font-size:9px; color:var(--paper);
  opacity:0; animation:blink 1s steps(2) infinite;
  transition:opacity .3s;
}
.boot.is-ready .boot__hint{ opacity:1; }
.boot.is-ready .boot__status{ opacity:.4; }
@keyframes blink{ 50%{ opacity:0; } }

/* ───────────────────────────── nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,4vw,48px);
  transition:transform .5s var(--ease-out), background .4s, backdrop-filter .4s, box-shadow .4s;
}
.nav.is-scrolled{
  background:rgba(13,13,18,.78);
  backdrop-filter:blur(14px);
  border-bottom:2px solid rgba(155,227,14,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.nav.is-hidden{ transform:translateY(-110%); }
.nav__brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-pixel); font-size:13px; letter-spacing:1px;
}
.nav__brand-text em{ font-style:normal; color:var(--green); }
.nav__brand-icon{
  width:22px; height:22px; background:var(--green);
  clip-path:polygon(50% 0,100% 28%,100% 72%,50% 100%,0 72%,0 28%);
  box-shadow:2px 2px 0 var(--pink);
}
.nav__links{
  display:flex; gap:clamp(14px,2.4vw,34px);
}
.nav__links a{
  font-size:14px; font-weight:500; letter-spacing:1px; color:var(--paper);
  position:relative; padding:6px 2px; opacity:.85; transition:opacity .2s, color .2s;
}
.nav__links a span{
  font-family:var(--f-pixel); font-size:8px; color:var(--green);
  margin-right:6px; vertical-align:2px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:var(--pink); transition:width .3s var(--ease-out);
}
.nav__links a:hover{ opacity:1; color:var(--white); }
.nav__links a:hover::after{ width:100%; }
.nav__burger{
  display:none; background:none; border:0; width:40px; height:34px;
  flex-direction:column; justify-content:center; gap:5px; padding:4px;
}
.nav__burger i{ display:block; height:3px; background:var(--paper); transition:.3s; }

/* ───────────────────────────── pixel button */
.btn-pixel{
  --btn-bg:var(--green);
  --btn-fg:var(--ink);
  position:relative; display:inline-block;
  font-family:var(--f-pixel); font-size:12px; letter-spacing:1px;
  color:var(--btn-fg); background:var(--btn-bg);
  padding:18px 30px; border:0;
  box-shadow:
    0 0 0 3px var(--ink),
    inset -4px -4px 0 0 rgba(0,0,0,.22),
    inset 4px 4px 0 0 rgba(255,255,255,.35),
    6px 6px 0 0 var(--ink);
  transition:transform .12s steps(2), box-shadow .12s steps(2);
  text-align:center;
}
.btn-pixel:hover{ transform:translate(-2px,-2px); box-shadow:0 0 0 3px var(--ink), inset -4px -4px 0 0 rgba(0,0,0,.22), inset 4px 4px 0 0 rgba(255,255,255,.35), 9px 9px 0 0 var(--ink); }
.btn-pixel:active{ transform:translate(3px,3px); box-shadow:0 0 0 3px var(--ink), inset -4px -4px 0 0 rgba(0,0,0,.22), inset 4px 4px 0 0 rgba(255,255,255,.35), 2px 2px 0 0 var(--ink); }
.btn-pixel--ghost{ --btn-bg:transparent; --btn-fg:var(--paper); box-shadow:0 0 0 3px var(--paper), inset 0 0 0 0 transparent, 6px 6px 0 0 rgba(255,255,255,.15); }
.btn-pixel--ghost:hover{ --btn-fg:var(--ink); background:var(--paper); }
.btn-pixel--sm{ padding:12px 18px; font-size:10px; }
.btn-pixel--lg{ padding:24px 44px; font-size:15px; }

/* ───────────────────────────── section head */
.section-head{
  max-width:1200px; margin:0 auto; padding:0 clamp(18px,5vw,48px);
  position:relative; z-index:2;
}
.section-head__no{
  font-family:var(--f-pixel); font-size:11px; color:var(--pink);
  letter-spacing:2px;
  display:inline-block; margin-bottom:18px;
  padding:6px 10px; border:2px solid var(--pink);
}
.section-head__title{
  font-family:var(--f-dot);
  font-size:clamp(30px,5.4vw,64px);
  font-weight:700; line-height:1.12; letter-spacing:1px;
  margin-bottom:18px;
}
.section-head__title .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.section-head__title .word > i{
  display:inline-block; font-style:normal;
  transform:translateY(110%); transition:transform .7s var(--ease-out);
}
.section-head__title.is-in .word > i{ transform:translateY(0); }
.section-head__sub{
  font-size:clamp(15px,1.6vw,18px); color:var(--dim); max-width:640px; line-height:1.7;
}
.section-head--light .section-head__sub{ color:rgba(232,245,233,.7); }
.dim{ color:var(--dim); }
.accent{ color:var(--green); }

/* reveal util */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px clamp(18px,5vw,48px) 90px;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(29,126,242,.28), transparent 60%),
    radial-gradient(90% 80% at 15% 85%, rgba(155,227,14,.14), transparent 60%),
    linear-gradient(180deg,#0a0a10 0%, #0d1420 55%, #0a0a10 100%);
  overflow:hidden;
}
.hero__sky{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero__cloud{
  position:absolute; width:120px; height:36px; background:rgba(255,255,255,.08);
  box-shadow:12px 12px 0 rgba(255,255,255,.05);
  image-rendering:pixelated;
  animation:cloud-drift linear infinite;
}
.hero__cloud::before,.hero__cloud::after{
  content:""; position:absolute; background:inherit;
}
.hero__cloud::before{ width:48px; height:48px; top:-24px; left:16px; }
.hero__cloud::after{ width:36px; height:36px; top:-18px; right:20px; }
.hero__cloud--1{ top:14%; animation-duration:70s; animation-delay:-10s; transform:scale(1.1); }
.hero__cloud--2{ top:26%; animation-duration:95s; animation-delay:-40s; transform:scale(.7); opacity:.7; }
.hero__cloud--3{ top:9%;  animation-duration:120s; animation-delay:-70s; transform:scale(1.4); opacity:.5; }
.hero__cloud--4{ top:38%; animation-duration:85s; animation-delay:-25s; transform:scale(.55); opacity:.6; }
@keyframes cloud-drift{
  from{ left:-15%; } to{ left:110%; }
}
.hero__scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px);
  mix-blend-mode:overlay; opacity:.5;
}
.hero__content{
  position:relative; z-index:5; max-width:1200px; margin:0 auto; width:100%;
}
.hero__eyebrow{
  font-family:var(--f-dot); font-size:15px; letter-spacing:3px; color:var(--green);
  margin-bottom:26px;
}
.hero__eyebrow .blink{ animation:blink 1.2s steps(2) infinite; }
.hero__title{
  font-family:var(--f-dot); font-weight:700;
  font-size:clamp(52px,11vw,150px);
  line-height:1.02; letter-spacing:2px;
  margin-bottom:30px;
}
.hero__title-line{ display:block; }
.hero__title-line i{
  display:inline-block; font-style:normal;
  opacity:0; transform:translateY(60px) rotate(4deg);
}
.hero.is-in .hero__title-line i{
  animation:hero-char .8s var(--ease-back) forwards;
}
.hero__title-line i:nth-child(1){ animation-delay:.05s; }
.hero__title-line i:nth-child(2){ animation-delay:.13s; }
.hero__title-line i:nth-child(3){ animation-delay:.21s; }
.hero__title-line i:nth-child(4){ animation-delay:.29s; }
@keyframes hero-char{ to{ opacity:1; transform:none; } }
.hero__title-line--accent i{
  color:var(--green);
  text-shadow:5px 5px 0 rgba(155,227,14,.25), 10px 10px 0 rgba(255,46,136,.18);
}
.hero__sub{
  font-size:clamp(16px,2vw,21px); line-height:1.8; color:rgba(232,245,233,.85);
  max-width:560px; margin-bottom:40px;
}
.hero__sub b{ color:var(--white); }
.hero__actions{ display:flex; gap:18px; flex-wrap:wrap; }

.hero__device{
  position:absolute; z-index:4;
  right:clamp(2%,6vw,10%); top:50%;
  width:clamp(240px,26vw,420px);
  transform:translateY(-52%);
  pointer-events:none;
}
.hero__device-img{
  width:100%; filter:drop-shadow(0 24px 60px rgba(155,227,14,.25));
  will-change:transform;
}
.hero__device-glow{
  position:absolute; inset:-18% -22%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(155,227,14,.22), transparent 70%);
  filter:blur(10px); animation:glow-pulse 4s ease-in-out infinite;
}
@keyframes glow-pulse{ 50%{ opacity:.6; transform:scale(1.06); } }
.hero__device-shadow{
  width:56%; height:18px; margin:26px auto 0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%);
  filter:blur(6px);
}

.hero__sprites{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.sprite{
  position:absolute; width:44px; height:54px;
  image-rendering:pixelated;
  background-repeat:no-repeat; background-size:contain;
  animation:sprite-bob 3s ease-in-out infinite;
  will-change:transform;
}
.sprite::after{
  content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  width:60%; height:8px; background:rgba(0,0,0,.4); filter:blur(4px); border-radius:50%;
}
.sprite--a{ left:6%;  top:64%; animation-delay:0s; }
.sprite--b{ left:16%; top:78%; animation-delay:.6s; transform:scale(.8); }
.sprite--c{ right:30%; top:74%; animation-delay:1.1s; transform:scale(1.1); }
.sprite--d{ right:6%;  top:20%; animation-delay:.3s; transform:scale(.75); }
@keyframes sprite-bob{ 50%{ margin-top:-10px; } }

.hero__scrollcue{
  position:absolute; left:50%; bottom:88px; transform:translateX(-50%);
  z-index:6; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-pixel); font-size:8px; letter-spacing:3px; color:var(--paper);
  opacity:.7;
}
.hero__scrollcue i{
  width:3px; height:34px; background:var(--green);
  animation:cue 1.4s var(--ease-out) infinite;
}
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

.hero__marquee{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  border-top:3px solid var(--ink);
  background:var(--green); color:var(--ink);
  transform:rotate(-1.2deg) translateY(6px); transform-origin:left;
  width:104%; margin-left:-2%;
}
.marquee{ overflow:hidden; padding:12px 0; }
.marquee__track{
  display:flex; white-space:nowrap; will-change:transform;
  font-family:var(--f-pixel); font-size:11px; letter-spacing:2px;
  animation:marquee 22s linear infinite;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ═══════════════ PAIN ═══════════════ */
.pain{
  position:relative; padding:clamp(90px,12vw,160px) 0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--paper);
  background-size:28px 28px;
  color:var(--ink);
}
.pain .section-head{ text-align:left; }
.pain .section-head__sub{ color:#57705c; }
.pain__grid{
  max-width:1100px; margin:60px auto 0; padding:0 clamp(18px,5vw,48px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:34px;
}
.pain__card{
  position:relative; background:var(--white);
  border:4px solid var(--ink);
  padding:40px 34px 44px;
  box-shadow:10px 10px 0 var(--ink);
  overflow:hidden;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.pain__card:hover{ transform:translate(-4px,-4px); box-shadow:14px 14px 0 var(--ink); }
.pain__card--pink{ background:#fff5fa; }
.pain__card-glitch{
  position:absolute; top:14px; right:-8px;
  font-family:var(--f-pixel); font-size:44px; color:rgba(13,13,18,.05);
  transform:rotate(6deg); user-select:none;
}
.pain__card-no{
  font-family:var(--f-pixel); font-size:10px; color:var(--white);
  background:var(--ink); display:inline-block; padding:6px 10px; letter-spacing:2px;
  margin-bottom:22px;
}
.pain__card--pink .pain__card-no{ background:var(--pink); }
.pain__card-title{
  font-family:var(--f-dot); font-size:clamp(30px,3.4vw,42px); margin-bottom:16px;
}
.pain__card-quote{
  font-size:19px; font-weight:700; line-height:1.6; margin-bottom:16px;
  color:var(--pink-deep);
}
.pain__card:not(.pain__card--pink) .pain__card-quote{ color:var(--green-deep); }
.pain__card-desc{ font-size:15px; line-height:1.8; color:#4a5a4e; }
.pain__card-face{ position:absolute; bottom:24px; right:24px; }
.face-unknown{
  width:64px; height:64px; border:4px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-pixel); font-size:26px; color:var(--ink);
  background:repeating-linear-gradient(45deg,#eee 0 6px,#ddd 6px 12px);
  animation:face-glitch 2.4s steps(2) infinite;
}
@keyframes face-glitch{ 0%,92%{ transform:none; } 94%{ transform:translate(2px,-2px); } 96%{ transform:translate(-2px,1px); } 98%{ transform:none; } }
.face-dead{ display:flex; gap:8px; }
.face-dead span{
  width:16px; height:16px; background:var(--ink); opacity:.15;
  animation:face-dead-fade 2s ease-in-out infinite;
}
.face-dead span:nth-child(2){ animation-delay:.3s; }
.face-dead span:nth-child(3){ animation-delay:.6s; }
@keyframes face-dead-fade{ 50%{ opacity:.5; } }

.pain__punch{
  max-width:900px; margin:90px auto 0; padding:0 clamp(18px,5vw,48px);
  font-family:var(--f-dot); font-size:clamp(22px,3.2vw,36px); line-height:1.5; text-align:center;
}
.pain__punch b{ background:var(--ink); color:var(--white); padding:2px 10px; }
.pain__punch b.accent{ background:var(--green); color:var(--ink); }
.pain__punch .dim{ display:block; margin-top:14px; font-size:.62em; color:#6a7a6e; }

/* ═══════════════ CAPTURE ═══════════════ */
.capture{
  position:relative; padding:clamp(90px,12vw,170px) 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(25,194,230,.14), transparent 60%),
    var(--ink);
  overflow:hidden;
}
.capture::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(rgba(155,227,14,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,227,14,.05) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent);
}
.capture__steps{
  max-width:1200px; margin:70px auto 0; padding:0 clamp(18px,5vw,48px);
  display:flex; align-items:stretch; justify-content:center; gap:18px; flex-wrap:wrap;
  position:relative; z-index:2;
}
.step{
  flex:1 1 260px; max-width:340px;
  background:var(--ink-2); border:3px solid rgba(155,227,14,.35);
  padding:34px 28px; position:relative;
  transition:transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}
.step:hover{
  transform:translateY(-8px); border-color:var(--green);
  box-shadow:0 18px 40px rgba(155,227,14,.12), 8px 8px 0 rgba(155,227,14,.25);
}
.step__num{
  font-family:var(--f-pixel); font-size:9px; color:var(--cyan); letter-spacing:2px;
  margin-bottom:20px;
}
.step__icon{
  width:72px; height:72px; margin-bottom:22px;
  image-rendering:pixelated; background-repeat:no-repeat; background-size:contain;
}
.step h3{
  font-family:var(--f-dot); font-size:26px; margin-bottom:12px; color:var(--white);
}
.step p{ font-size:14.5px; line-height:1.75; color:rgba(232,245,233,.72); margin-bottom:18px; }
.step__tag{
  display:inline-block; font-family:var(--f-dot); font-size:12px;
  color:var(--green); border:2px solid rgba(155,227,14,.4); padding:5px 10px; letter-spacing:1px;
}
.capture__arrow{
  align-self:center; font-family:var(--f-pixel); font-size:22px; color:var(--pink);
  animation:arrow-nudge 1.2s ease-in-out infinite;
}
@keyframes arrow-nudge{ 50%{ transform:translateX(8px); } }
.capture__flow{ margin-top:80px; position:relative; z-index:2; }
.flowline{
  display:flex; align-items:center; justify-content:center; gap:0;
  flex-wrap:wrap; padding:0 20px;
}
.flowline__node{
  font-family:var(--f-dot); font-size:clamp(14px,1.8vw,19px); letter-spacing:2px;
  padding:14px 22px; border:3px solid var(--paper); color:var(--paper);
  background:var(--ink-2);
}
.flowline__node--accent{ border-color:var(--green); color:var(--green); box-shadow:0 0 24px rgba(155,227,14,.25); }
.flowline__node--pink{ border-color:var(--pink); color:var(--pink); box-shadow:0 0 24px rgba(255,46,136,.2); }
.flowline__line{
  width:clamp(24px,5vw,70px); height:3px;
  background:repeating-linear-gradient(90deg,var(--paper) 0 8px, transparent 8px 14px);
  animation:flow-dash 1s linear infinite;
}
@keyframes flow-dash{ to{ background-position:14px 0; } }

/* ═══════════════ ISLAND ═══════════════ */
.island{
  position:relative; padding:clamp(90px,12vw,170px) 0;
  background:linear-gradient(180deg,#0a0f18 0%, #0d1a12 100%);
}
.island .section-head{ text-align:center; }
.island .section-head__sub{ margin:0 auto; }
.island__stage{
  position:relative; max-width:1200px; margin:60px auto 0;
  padding:0 clamp(12px,3vw,40px);
}
#islandCanvas{
  display:block; width:100%; height:auto;
  border:4px solid var(--ink);
  box-shadow:0 0 0 3px rgba(155,227,14,.3), 0 30px 80px rgba(0,0,0,.5);
  background:#79c93f;
  image-rendering:pixelated;
}
.island__hud{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:14px;
  font-family:var(--f-dot); font-size:13px; color:rgba(232,245,233,.75);
}
.island__hud-item{ display:flex; align-items:center; gap:8px; }
.dot{ width:10px; height:10px; display:inline-block; }
.dot--green{ background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 1.6s steps(2) infinite; }

.island__note{
  max-width:820px; margin:40px auto 0; padding:0 clamp(18px,5vw,48px);
  text-align:center; font-size:14.5px; line-height:1.9; color:rgba(232,245,233,.8);
}

/* resident modal (positioned by JS over canvas) */
.resident-modal{
  position:absolute; z-index:20; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,16,.55); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease-out), visibility .3s;
}
.resident-modal.is-open{ opacity:1; visibility:visible; }
.resident-modal__frame{
  width:min(440px, 92%);
  background:var(--paper); color:var(--ink);
  border:4px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink), 0 0 0 3px var(--green);
  transform:scale(.8) translateY(20px);
  transition:transform .35s var(--ease-back);
}
.resident-modal.is-open .resident-modal__frame{ transform:none; }
.resident-modal__header{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--green); border-bottom:4px solid var(--ink);
  padding:12px 16px;
}
.resident-modal__name{ font-family:var(--f-pixel); font-size:14px; letter-spacing:1px; }
.resident-modal__close{
  width:32px; height:32px; border:3px solid var(--ink); background:var(--pink);
  color:var(--white); font-size:18px; font-weight:900; line-height:1;
  box-shadow:3px 3px 0 var(--ink); transition:transform .1s steps(2);
}
.resident-modal__close:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.resident-modal__body{ display:flex; gap:18px; padding:20px; }
.resident-modal__avatar{
  width:96px; height:96px; flex:0 0 96px;
  border:4px solid var(--ink); background:var(--cyan);
  image-rendering:pixelated; background-size:cover; background-position:center top;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.12);
}
.resident-modal__meta{ flex:1; min-width:0; }
.resident-modal__magnet{
  font-family:var(--f-dot); font-size:15px; font-weight:700; margin-bottom:10px;
  color:var(--pink-deep);
}
.resident-modal__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.resident-modal__tags span{
  font-size:12px; padding:4px 8px; border:2px solid var(--ink); background:var(--white);
}
.resident-modal__met{
  font-family:var(--f-dot); font-size:11px; letter-spacing:1px; color:var(--dim);
}
.resident-modal__quote{
  margin:0 20px 20px; padding:14px 16px;
  border:3px solid var(--ink); background:var(--white);
  font-size:15px; line-height:1.6; font-weight:500;
}

/* ═══════════════ MAGNET / QUIZ ═══════════════ */
.magnet{
  position:relative; padding:clamp(90px,12vw,170px) 0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--paper);
  background-size:28px 28px;
  color:var(--ink);
}
.magnet .section-head{ text-align:center; }
.magnet .section-head__sub{ margin:0 auto; color:#57705c; }
.quiz{
  max-width:720px; margin:56px auto 0; padding:0 clamp(18px,5vw,48px);
}
.quiz__screen{
  position:relative;
  background:var(--ink); color:var(--paper);
  border:4px solid var(--ink);
  box-shadow:12px 12px 0 var(--ink), 0 0 0 4px var(--green);
  padding:clamp(26px,4vw,46px);
  min-height:420px;
  overflow:hidden;
}
.quiz__screen::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px);
}
.quiz__progress{
  height:10px; border:2px solid rgba(232,245,233,.4); padding:2px; margin-bottom:30px;
}
.quiz__progress-fill{
  height:100%; width:0%;
  background:repeating-linear-gradient(90deg,var(--green) 0 6px, transparent 6px 9px);
  transition:width .4s steps(6);
}
.quiz__step{ display:none; animation:quiz-in .4s var(--ease-out); }
.quiz__step.is-active{ display:block; }
@keyframes quiz-in{ from{ opacity:0; transform:translateX(24px); } }
.quiz__q{
  font-family:var(--f-dot); font-size:clamp(19px,2.6vw,24px); margin-bottom:24px; color:var(--white);
}
.quiz__opts{ display:grid; gap:12px; }
.quiz__opt{
  text-align:left; font-family:var(--f-body); font-size:15px; font-weight:500;
  color:var(--paper); background:var(--ink-2);
  border:3px solid rgba(232,245,233,.25);
  padding:16px 18px; position:relative;
  transition:transform .15s var(--ease-out), border-color .15s, background .15s, color .15s;
}
.quiz__opt::before{
  content:"▸"; color:var(--green); margin-right:10px; font-family:var(--f-pixel); font-size:10px;
}
.quiz__opt:hover{
  border-color:var(--green); background:rgba(155,227,14,.1); transform:translateX(6px); color:var(--white);
}
.quiz__opt.is-picked{ background:var(--green); color:var(--ink); border-color:var(--green); }
.quiz__opt.is-picked::before{ color:var(--ink); }

.quiz__result{ display:none; text-align:center; padding:20px 0 6px; }
.quiz__result.is-active{ display:block; animation:quiz-in .5s var(--ease-out); }
.quiz__result-label{
  font-family:var(--f-pixel); font-size:10px; letter-spacing:3px; color:var(--cyan); margin-bottom:16px;
}
.quiz__result-type{
  font-family:var(--f-dot); font-size:clamp(34px,6vw,54px); font-weight:700;
  color:var(--green); text-shadow:4px 4px 0 rgba(155,227,14,.25);
  margin-bottom:18px;
}
.quiz__result-desc{ font-size:15px; line-height:1.8; color:rgba(232,245,233,.8); max-width:460px; margin:0 auto 24px; }
.quiz__result-sprite{
  width:64px; height:64px; margin:0 auto 26px; image-rendering:pixelated;
  background-size:contain; background-repeat:no-repeat;
}
.quiz__result .btn-pixel{ margin-top:6px; }

/* ═══════════════ DEVICE ═══════════════ */
.device{
  position:relative; padding:clamp(100px,13vw,180px) 0;
  background:radial-gradient(90% 70% at 30% 40%, #16161f 0%, var(--ink) 70%);
  overflow:hidden;
}
.device__bg{
  position:absolute; inset:0; opacity:.5;
  background:
    radial-gradient(circle at 78% 30%, rgba(155,227,14,.1), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255,46,136,.08), transparent 40%);
}
.device__inner{
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; padding:0 clamp(18px,5vw,48px);
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,6vw,90px);
  align-items:center;
}
.device__visual{ position:relative; display:flex; justify-content:center; }
.device__img{
  width:min(380px, 80%);
  filter:drop-shadow(0 30px 70px rgba(155,227,14,.22));
  will-change:transform;
}
.device__orbit{ position:absolute; inset:0; pointer-events:none; }
.device__orbit-item{
  position:absolute;
  font-family:var(--f-dot); font-size:12px; letter-spacing:1px;
  color:var(--ink); background:var(--green); padding:6px 10px;
  border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  animation:orbit-float 5s ease-in-out infinite;
}
.device__orbit-item--1{ top:6%; left:2%; animation-delay:0s; background:var(--cyan); }
.device__orbit-item--2{ top:22%; right:-4%; animation-delay:1.2s; background:var(--pink); color:var(--white); }
.device__orbit-item--3{ bottom:20%; left:-6%; animation-delay:2.1s; }
.device__orbit-item--4{ bottom:4%; right:6%; animation-delay:.6s; background:var(--yellow); }
@keyframes orbit-float{ 50%{ transform:translateY(-14px); } }
.device__lead{
  font-size:clamp(16px,1.9vw,19px); line-height:1.8; color:rgba(232,245,233,.85);
  margin:22px 0 30px;
}
.device__lead b{ color:var(--green); }
.device__specs{ list-style:none; display:grid; gap:0; border:3px solid rgba(232,245,233,.2); }
.device__specs li{
  display:grid; grid-template-columns:170px 1fr; gap:14px;
  padding:16px 18px;
  border-bottom:2px solid rgba(232,245,233,.12);
  transition:background .2s;
}
.device__specs li:last-child{ border-bottom:0; }
.device__specs li:hover{ background:rgba(155,227,14,.07); }
.device__specs b{ font-family:var(--f-dot); color:var(--green); font-size:15px; }
.device__specs span{ font-size:14px; color:rgba(232,245,233,.7); line-height:1.6; }
.device__note{
  margin-top:26px; font-size:13.5px; line-height:1.8; color:var(--dim);
  border-left:3px solid var(--pink); padding-left:16px;
}

/* ═══════════════ APP ═══════════════ */
.app{
  position:relative; padding:clamp(90px,12vw,170px) 0;
  background:var(--paper); color:var(--ink);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px;
}
.app .section-head{ text-align:center; }
.app .section-head__sub{ margin:0 auto; color:#57705c; }
.app__inner{
  max-width:1100px; margin:60px auto 0; padding:0 clamp(18px,5vw,48px);
  display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:clamp(30px,6vw,80px);
  align-items:center;
}
.app__shot{
  position:relative; border:4px solid var(--ink); box-shadow:14px 14px 0 var(--ink);
  overflow:hidden; transform-style:preserve-3d;
}
.app__shot img{ width:100%; }
.app__shot-glare{
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 60%);
  transform:translateX(-120%);
  transition:transform 1s var(--ease-out);
}
.app__shot:hover .app__shot-glare{ transform:translateX(120%); }
.app__points{ display:grid; gap:26px; }
.app__point{
  border-left:5px solid var(--green); padding-left:22px;
  transition:transform .3s var(--ease-out), border-color .3s;
}
.app__point:hover{ transform:translateX(8px); border-color:var(--pink); }
.app__point h4{ font-family:var(--f-dot); font-size:22px; margin-bottom:8px; }
.app__point p{ font-size:14.5px; line-height:1.75; color:#4a5a4e; }

/* ═══════════════ CTA ═══════════════ */
.cta{
  position:relative; padding:clamp(120px,16vw,220px) 0;
  background:
    radial-gradient(80% 90% at 50% 110%, rgba(155,227,14,.2), transparent 60%),
    radial-gradient(60% 60% at 50% -10%, rgba(25,194,230,.18), transparent 60%),
    var(--ink);
  overflow:hidden; text-align:center;
}
.cta__island{
  position:absolute; left:50%; bottom:-40px; transform:translateX(-50%);
  width:min(900px,120%); height:280px;
  background:
    radial-gradient(50% 100% at 50% 100%, rgba(155,227,14,.35), transparent 70%);
  filter:blur(2px);
}
.cta__content{ position:relative; z-index:2; padding:0 20px; }
.cta__title{
  font-family:var(--f-dot); font-size:clamp(40px,8vw,96px); font-weight:700;
  line-height:1.1; margin-bottom:22px;
  text-shadow:6px 6px 0 rgba(155,227,14,.2);
}
.cta__sub{ font-size:clamp(15px,2vw,20px); color:rgba(232,245,233,.75); margin-bottom:44px; }
.cta__foot{
  margin-top:40px; font-family:var(--f-dot); font-size:12px; letter-spacing:2px; color:var(--dim);
}

/* ═══════════════ FOOTER ═══════════════ */
.footer{ background:var(--ink); border-top:3px solid rgba(155,227,14,.25); }
.footer__marquee{ background:var(--ink); color:var(--green); border-bottom:2px solid rgba(155,227,14,.2); }
.footer__marquee .marquee__track{ font-size:10px; }
.footer__bottom{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:22px clamp(18px,5vw,48px);
  font-family:var(--f-dot); font-size:12px; color:var(--dim); letter-spacing:1px;
}
.footer__pixel{ color:rgba(155,227,14,.6); }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1020px){
  .device__inner{ grid-template-columns:1fr; }
  .device__visual{ order:-1; }
  .app__inner{ grid-template-columns:1fr; }
  .app__shot{ max-width:420px; margin:0 auto; }
}
@media (max-width:840px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .nav.is-open .nav__links{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(13,13,18,.97); border-bottom:3px solid var(--green);
  }
  .nav.is-open .nav__links a{ padding:18px 24px; border-top:1px solid rgba(255,255,255,.08); font-size:16px; }
  .nav.is-open .nav__cta{ display:inline-block; margin:16px 24px 22px; }
  .nav.is-open .nav__burger i:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav.is-open .nav__burger i:nth-child(2){ opacity:0; }
  .nav.is-open .nav__burger i:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  .hero{ padding-top:110px; }
  .hero__device{
    position:relative; right:auto; top:auto; transform:none;
    margin:50px auto 0; width:min(260px,60%);
  }
  .hero__content{ text-align:center; }
  .hero__sub{ margin-left:auto; margin-right:auto; }
  .hero__actions{ justify-content:center; }
  .hero__sprites{ display:none; }
  .capture__arrow{ transform:rotate(90deg); }
  .device__specs li{ grid-template-columns:1fr; gap:4px; }
}
@media (max-width:520px){
  .hero__marquee{ transform:rotate(0); width:100%; margin-left:0; }
  .btn-pixel{ padding:16px 22px; font-size:11px; }
  .btn-pixel--lg{ padding:20px 28px; font-size:12px; }
  .pain__card-face{ position:static; margin-top:20px; }
}

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