/* =========================================================
   ハチワレ / HACHIWARE — comic book stylesheet
   Layers: background art → halftone → wash → sparkles → page
   ========================================================= */

:root{
  --ink:#17224d;
  --ink-soft:#3a4a86;
  --sky:#a9e0ff;
  --sky-2:#69c4f5;
  --sky-3:#2f9ee0;
  --cream:#fff8e6;
  --paper:#fffdf6;
  --yellow:#ffd84d;
  --yellow-2:#ffc21e;
  --pink:#ffb6c9;
  --mint:#c9efc0;
  --line:4px;
  --shadow:9px 9px 0 var(--ink);
  --shadow-sm:5px 5px 0 var(--ink);
  --shadow-xs:3px 3px 0 var(--ink);
  --r:22px;
  --font-disp:"Bangers",system-ui,sans-serif;
  --font-jp:"M PLUS Rounded 1c","Baloo 2",system-ui,sans-serif;
  --font-body:"Baloo 2","M PLUS Rounded 1c",system-ui,sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:110px}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:#eaf6ff;
  overflow-x:hidden;
  line-height:1.55;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
code{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}

/* ---------------------------------------------------------
   BACKGROUND LAYERS
   --------------------------------------------------------- */
.bg-photo,.bg-halftone,.bg-wash,.sky-sparkles{
  position:fixed;inset:0;pointer-events:none;z-index:0;
}
.bg-photo{
  background:url("../5.png") center/cover no-repeat;
  filter:blur(6px) saturate(.85);
  opacity:.30;
  transform:scale(1.08);
}
.bg-wash{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.92) 0%, rgba(233,247,255,.72) 38%, rgba(206,238,255,.55) 62%, rgba(255,246,222,.62) 100%),
    linear-gradient(180deg, rgba(232,247,255,.75), rgba(255,250,236,.8));
}
.bg-halftone{
  background-image:radial-gradient(var(--sky-2) 1.6px, transparent 1.7px);
  background-size:16px 16px;
  opacity:.16;
}
.sky-sparkles span{
  position:absolute;
  color:var(--sky-3);
  font-size:14px;
  animation:twinkle 5.5s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{transform:translateY(0) scale(.85);opacity:.15}
  50%{transform:translateY(-14px) scale(1.15);opacity:.55}
}

/* ---------------------------------------------------------
   SHARED COMIC PARTS
   --------------------------------------------------------- */
.page-frame{
  position:relative;
  width:min(1220px,92vw);
  margin-inline:auto;
  z-index:2;
}

.sec{position:relative;padding:96px 0;z-index:2}
.sec-hero{padding-top:150px}

.panel{
  position:relative;
  background:var(--paper);
  border:var(--line) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel::after{ /* paper grain + halftone inside every panel */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(23,34,77,.16) 1px, transparent 1.2px);
  background-size:9px 9px;
  opacity:.14;
  mix-blend-mode:multiply;
}

/* reveal-from-3D-space
   NOTE: uses the independent translate/rotate/scale properties so it never
   fights the per-panel `transform` tilts used all over the page. */
[data-reveal]{
  opacity:0;
  translate:0 48px;
  rotate:1 0 0 -18deg;
  scale:.94;
  transition:opacity .55s ease, translate .7s cubic-bezier(.2,.9,.25,1.15),
             rotate .7s cubic-bezier(.2,.9,.25,1.15), scale .7s cubic-bezier(.2,.9,.25,1.15);
}
[data-reveal].revealed{opacity:1;translate:0 0;rotate:1 0 0 0deg;scale:1}

/* perspective stages: children live in 3D */
[data-tilt-stage]{
  perspective:1500px;
  perspective-origin:50% 40%;
  transform-style:preserve-3d;
  transition:transform .35s ease;
  transform:rotateY(var(--mx,0deg)) rotateX(var(--my,0deg));
}

/* section headers */
.sec-head{position:relative;margin-bottom:52px;text-align:center}
.sec-num{
  display:inline-block;
  font-family:var(--font-disp);
  font-size:20px;letter-spacing:3px;
  color:var(--paper);
  background:var(--ink);
  padding:4px 18px 2px;
  border-radius:999px;
  transform:rotate(-3deg);
  box-shadow:var(--shadow-xs);
}
.sec-title{
  font-family:var(--font-disp);
  font-size:clamp(40px,7vw,84px);
  letter-spacing:2px;
  margin:.2em 0 .1em;
  color:var(--paper);
  text-shadow:
    3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),
    3px 3px var(--ink),-3px 3px var(--ink),3px -3px var(--ink),-3px -3px var(--ink),
    10px 10px 0 var(--sky-2);
}
.sec-title em{font-style:normal;color:var(--yellow)}
.sec-sub{
  font-family:var(--font-jp);
  font-weight:700;
  color:var(--ink-soft);
  font-size:clamp(14px,1.6vw,18px);
  margin:0;
}

/* buttons */
.btn-comic{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-disp);
  letter-spacing:1.5px;
  background:var(--yellow);
  color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:999px;
  padding:12px 26px 9px;
  box-shadow:var(--shadow-sm);
  transition:transform .14s ease, box-shadow .14s ease, background .2s ease;
  white-space:nowrap;
}
.btn-comic:hover{transform:translate(-2px,-3px);box-shadow:8px 10px 0 var(--ink);background:var(--yellow-2)}
.btn-comic:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-comic.btn-lg{font-size:22px;padding:14px 30px 10px}
.btn-comic.btn-sm{font-size:16px;padding:8px 18px 6px;box-shadow:var(--shadow-xs)}
.btn-comic.btn-alt{background:var(--sky-2);color:var(--paper)}
.btn-comic.btn-alt:hover{background:var(--sky-3)}
.btn-comic.btn-dark{background:var(--ink);color:var(--paper)}
.btn-comic.btn-dark:hover{background:#0d1531}
.btn-comic.is-pending{filter:saturate(.55)}

/* speech bubbles */
.bubble{
  position:relative;
  background:var(--paper);
  border:var(--line) solid var(--ink);
  border-radius:28px;
  padding:22px 26px;
  box-shadow:var(--shadow-sm);
  font-weight:600;
  font-size:clamp(15px,1.5vw,18px);
}
.bubble-tail{
  position:absolute;bottom:-22px;left:52px;
  width:34px;height:26px;
  background:var(--paper);
  border-right:var(--line) solid var(--ink);
  border-bottom:var(--line) solid var(--ink);
  transform:skewX(-22deg) rotate(4deg);
  border-bottom-right-radius:8px;
}
.bubble-tail.left{left:auto;right:60px}

/* washi tape */
.tape{
  position:absolute;width:120px;height:30px;z-index:4;
  background:repeating-linear-gradient(45deg,rgba(255,216,77,.95) 0 10px,rgba(255,232,150,.95) 10px 20px);
  border:2px solid rgba(23,34,77,.45);
  opacity:.95;
}
.tape-tl{top:-14px;left:-28px;transform:rotate(-24deg)}
.tape-br{bottom:-14px;right:-28px;transform:rotate(-24deg)}

/* sfx words */
.fx,.sfx{
  position:absolute;z-index:6;
  font-family:var(--font-jp);
  font-weight:800;
  color:var(--yellow);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:4px 4px 0 rgba(23,34,77,.28);
  pointer-events:none;
  animation:pop 3.4s ease-in-out infinite;
}
@keyframes pop{
  0%,100%{transform:translateY(0) rotate(var(--rot,-8deg)) scale(1)}
  50%{transform:translateY(-8px) rotate(var(--rot,-8deg)) scale(1.07)}
}

/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */
.comic-nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:14px 0;
  transition:padding .25s ease, background .25s ease;
}
.comic-nav.scrolled{padding:8px 0}
.nav-inner{
  position:relative;
  width:min(1220px,94vw);margin-inline:auto;
  display:flex;align-items:center;gap:18px;
  background:var(--paper);
  border:var(--line) solid var(--ink);
  border-radius:999px;
  padding:8px 10px 8px 8px;
  box-shadow:var(--shadow-sm);
}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand-badge{
  width:48px;height:48px;border-radius:50%;
  border:3px solid var(--ink);overflow:hidden;flex:none;
  background:var(--mint);box-shadow:var(--shadow-xs);
}
.brand-badge img{width:100%;height:100%;object-fit:cover}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:var(--font-jp);font-size:20px}
.brand-txt i{font-family:var(--font-disp);font-style:normal;font-size:13px;letter-spacing:1.5px;color:var(--sky-3)}

.nav-menu{display:flex;align-items:center;gap:20px}
.nav-menu a{
  font-family:var(--font-disp);letter-spacing:1.4px;font-size:17px;
  padding-bottom:2px;border-bottom:3px solid transparent;transition:.2s;
}
.nav-menu a:hover{border-color:var(--yellow);color:var(--sky-3)}
.nav-x{
  width:40px;height:40px;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);border-radius:50%;
  border:3px solid var(--ink);font-size:16px;border-bottom-color:var(--ink)!important;
}
.nav-x:hover{background:var(--sky-3);color:#fff}
.nav-buy{border-bottom:var(--line) solid var(--ink)!important}

.nav-burger{display:none;flex-direction:column;gap:5px;background:var(--yellow);
  border:3px solid var(--ink);border-radius:12px;padding:9px 10px;box-shadow:var(--shadow-xs)}
.nav-burger span{display:block;width:22px;height:3px;background:var(--ink);border-radius:2px;transition:.25s}
.nav-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------------------------------------------------------
   1. HERO
   --------------------------------------------------------- */
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:44px;
  align-items:center;
}
.hero-left{display:flex;flex-direction:column;gap:22px;transform-style:preserve-3d}

.panel-title{
  padding:30px 32px 26px;
  background:
    linear-gradient(180deg,rgba(169,224,255,.55),rgba(255,255,255,.9)),
    var(--paper);
  transform:translateZ(40px) rotate(-1.4deg);
}
.deep-1{--z:40px}
.kicker{
  font-family:var(--font-disp);letter-spacing:2.5px;font-size:15px;
  color:var(--paper);background:var(--sky-3);display:inline-block;
  padding:5px 14px 3px;border:3px solid var(--ink);border-radius:999px;
  margin:0 0 10px;box-shadow:var(--shadow-xs);
}
.title-jp{
  font-family:var(--font-jp);font-weight:800;
  font-size:clamp(54px,9vw,116px);
  line-height:.95;margin:0;
  color:var(--paper);
  text-shadow:
    4px 0 var(--ink),-4px 0 var(--ink),0 4px var(--ink),0 -4px var(--ink),
    4px 4px var(--ink),-4px 4px var(--ink),4px -4px var(--ink),-4px -4px var(--ink),
    12px 12px 0 var(--yellow);
}
.title-en{
  font-family:var(--font-disp);
  font-size:clamp(22px,3vw,38px);
  letter-spacing:8px;margin:14px 0 6px;color:var(--sky-3);
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.chip{
  font-family:var(--font-disp);letter-spacing:1.2px;font-size:15px;
  border:3px solid var(--ink);border-radius:999px;padding:5px 14px 3px;
  box-shadow:var(--shadow-xs);
}
.chip-blue{background:var(--sky);}
.chip-yellow{background:var(--yellow)}
.chip-pink{background:var(--pink)}

.bubble-hero{transform:translateZ(20px) rotate(.6deg)}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;transform:translateZ(30px)}

.ca-box{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--ink);color:var(--paper);
  border:var(--line) solid var(--ink);border-radius:18px;
  padding:12px 14px;box-shadow:var(--shadow-sm);
  transform:translateZ(15px);
}
.ca-label{
  font-family:var(--font-disp);letter-spacing:1.5px;font-size:14px;
  background:var(--yellow);color:var(--ink);
  padding:4px 12px 2px;border-radius:999px;white-space:nowrap;
}
.ca-box code{
  flex:1;min-width:0;font-size:14px;letter-spacing:.4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#bfe6ff;
}
.ca-copy{
  font-family:var(--font-disp);letter-spacing:1.2px;font-size:15px;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--paper);border-radius:999px;
  padding:6px 16px 4px;transition:.18s;
}
.ca-copy:hover{background:var(--yellow);border-color:var(--yellow)}
.ca-copy.copied{background:var(--mint);border-color:var(--mint)}
.ca-box-alt{background:var(--paper);color:var(--ink)}
.ca-box-alt code{color:var(--ink-soft)}
.ca-box-alt .ca-copy{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ca-box-alt .ca-copy:hover{background:var(--sky-3);border-color:var(--sky-3)}

/* hero art cluster */
.hero-right{position:relative;min-height:min(560px,72vw);transform-style:preserve-3d}
.panel-art img{width:100%;height:100%;object-fit:cover}
.art-main{
  position:absolute;top:0;right:0;width:82%;aspect-ratio:16/10;
  transform:translateZ(70px) rotate(3deg);
}
.art-small{
  position:absolute;bottom:0;left:0;width:52%;aspect-ratio:16/10;
  transform:translateZ(120px) rotate(-6deg);
  z-index:5;
}
.cap{
  position:absolute;z-index:5;
  font-family:var(--font-jp);font-weight:800;font-size:14px;
  background:var(--paper);border:3px solid var(--ink);
  padding:4px 12px;border-radius:10px;box-shadow:var(--shadow-xs);
}
.cap-br{right:12px;bottom:12px}
.cap-bl{left:12px;bottom:12px}

.starburst{
  position:absolute;top:44%;left:-4%;z-index:7;
  width:132px;height:132px;display:grid;place-items:center;
  background:var(--yellow);
  border:var(--line) solid var(--ink);
  clip-path:polygon(50% 0,61% 20%,83% 12%,80% 35%,100% 50%,80% 65%,83% 88%,61% 80%,50% 100%,39% 80%,17% 88%,20% 65%,0 50%,20% 35%,17% 12%,39% 20%);
  font-family:var(--font-disp);text-align:center;line-height:1;font-size:18px;
  transform:translateZ(150px) rotate(-12deg);
  animation:spinny 6s ease-in-out infinite;
}
.starburst b{font-size:26px}
@keyframes spinny{0%,100%{transform:translateZ(150px) rotate(-12deg) scale(1)}50%{transform:translateZ(150px) rotate(6deg) scale(1.08)}}

.logo-sticker{
  position:absolute;right:-3%;bottom:8%;z-index:8;
  width:118px;height:118px;border-radius:50%;overflow:hidden;
  border:var(--line) solid var(--ink);box-shadow:var(--shadow-sm);
  transform:translateZ(160px) rotate(8deg);
}
.logo-sticker img{width:100%;height:100%;object-fit:cover}

.fx-1{top:6%;left:6%;font-family:var(--font-disp);font-size:44px;--rot:-14deg;transform:rotate(-14deg);color:var(--pink);z-index:9}
.fx-2{bottom:34%;right:40%;font-size:52px;--rot:8deg;transform:rotate(8deg);color:#fff}
.fx-3{top:52%;right:2%;font-size:26px;--rot:12deg;transform:rotate(12deg)}

.scroll-hint{
  position:relative;z-index:3;text-align:center;margin-top:56px;
  font-family:var(--font-disp);letter-spacing:3px;color:var(--ink-soft);
  animation:bob 2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ---------------------------------------------------------
   TICKER
   --------------------------------------------------------- */
.ticker{
  position:relative;z-index:3;
  background:var(--ink);color:var(--yellow);
  border-block:var(--line) solid var(--ink);
  padding:12px 0;overflow:hidden;
  transform:rotate(-1.2deg) scale(1.03);
  box-shadow:0 8px 0 rgba(23,34,77,.18);
}
.ticker-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker-track span{
  font-family:var(--font-jp);font-weight:800;font-size:20px;
  padding-right:32px;white-space:nowrap;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------
   2. ABOUT — manga strip
   --------------------------------------------------------- */
.sec-about{padding-top:110px}
.strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  margin-bottom:60px;
}
.strip-panel{padding-bottom:6px;transform-style:preserve-3d}
.strip-panel img{aspect-ratio:1/1;object-fit:cover;border-bottom:var(--line) solid var(--ink)}
.strip-panel figcaption{
  padding:14px 16px 12px;font-weight:600;font-size:15px;line-height:1.4;
}
.strip-panel figcaption b{font-family:var(--font-disp);letter-spacing:1px;display:block;font-size:19px;color:var(--sky-3)}
.sp-1{transform:translateZ(30px) rotate(-2.4deg)}
.sp-2{transform:translateZ(70px) rotate(1.2deg)}
.sp-3{transform:translateZ(30px) rotate(2.6deg)}
.sp-1:hover,.sp-2:hover,.sp-3:hover{transform:translateZ(110px) rotate(0)}
.strip-panel{transition:transform .4s cubic-bezier(.2,.9,.25,1.15)}
.sfx{font-size:30px}
.sfx-a{top:8%;right:8%;--rot:-10deg;transform:rotate(-10deg)}
.sfx-b{top:10%;left:6%;--rot:9deg;transform:rotate(9deg)}
.sfx-c{bottom:34%;right:6%;--rot:-6deg;transform:rotate(-6deg)}

.about-bottom{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:start}
.char-card{padding:0;transform:rotate(-2deg)}
.char-card img{width:100%}
.card-pin{
  position:absolute;top:-16px;left:50%;translate:-50% 0;z-index:5;
  width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#ff8fae,#e2456f);
  border:3px solid var(--ink);box-shadow:var(--shadow-xs);
}
.about-text{display:flex;flex-direction:column;gap:26px}
.bubble-big{font-size:clamp(15px,1.6vw,19px)}
.bubble-big p{margin:0}

.fact-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fact-list li{
  display:flex;align-items:center;gap:14px;
  background:var(--paper);
  border:3px solid var(--ink);border-radius:14px;
  padding:9px 14px;box-shadow:var(--shadow-xs);
}
.fk{
  font-family:var(--font-disp);letter-spacing:1.4px;font-size:14px;
  background:var(--sky);border:2px solid var(--ink);border-radius:999px;
  padding:2px 12px 0;min-width:96px;text-align:center;
}
.fv{font-family:var(--font-jp);font-weight:800;font-size:16px}

/* ---------------------------------------------------------
   3. HOW TO BUY — zig-zag steps
   --------------------------------------------------------- */
.buy-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:26px;transform-style:preserve-3d}
.step{
  padding:24px 28px 24px 76px;
  transform:translateZ(20px) rotate(-1deg);
  transition:transform .35s ease;
}
.step-off{
  margin-left:auto;width:calc(100% - 46px);
  transform:translateZ(50px) rotate(1.4deg);
  background:var(--cream);
}
.step:hover{transform:translateZ(90px) rotate(0)}
.step-no{
  position:absolute;left:-22px;top:20px;z-index:5;
  width:64px;height:64px;display:grid;place-items:center;
  font-family:var(--font-disp);font-size:34px;
  background:var(--yellow);color:var(--ink);
  border:var(--line) solid var(--ink);border-radius:50%;
  box-shadow:var(--shadow-xs);
}
.step h3{font-family:var(--font-disp);letter-spacing:1.6px;font-size:26px;margin:0 0 6px}
.step p{margin:0 0 12px;font-weight:600;font-size:16px;max-width:52ch}
.step .btn-comic{margin-top:2px}
.step-ico{
  position:absolute;right:18px;bottom:10px;font-size:64px;color:var(--sky);
  opacity:.55;z-index:0;
}

.buy-art{position:relative;display:flex;flex-direction:column;gap:22px;transform-style:preserve-3d}
.art-tall{transform:translateZ(60px) rotate(2.2deg)}
.art-tall img{aspect-ratio:1/1;object-fit:cover}
.fx-4{bottom:16%;left:-6%;font-size:30px;--rot:-12deg;transform:rotate(-12deg)}

/* ---------------------------------------------------------
   4. CHART
   --------------------------------------------------------- */
.chart-stage{position:relative}
.chart-frame{
  padding:0;overflow:hidden;
  transform:translateZ(30px) rotate(-.7deg);
  background:var(--ink);
}
.chart-frame::after{opacity:.06}
.chart-bar{
  display:flex;align-items:center;gap:14px;
  background:var(--ink);color:var(--paper);
  padding:12px 18px;border-bottom:var(--line) solid var(--ink);
}
.dots{display:flex;gap:7px}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.65)}
.dots i:nth-child(1){background:#ff7a90}
.dots i:nth-child(2){background:var(--yellow)}
.dots i:nth-child(3){background:#8fe3a4}
.chart-title{
  font-family:var(--font-disp);letter-spacing:2px;font-size:18px;margin-right:auto;
  display:flex;align-items:center;gap:8px;color:var(--yellow);
}
.chart-open{
  font-family:var(--font-disp);letter-spacing:1.4px;font-size:15px;
  background:var(--yellow);color:var(--ink);
  padding:5px 14px 3px;border-radius:999px;border:2px solid var(--ink);
}
.chart-open:hover{background:var(--sky-2);color:var(--paper)}
.chart-body{position:relative;background:var(--paper);height:min(74vh,660px)}
#dexEmbed{width:100%;height:100%;border:0;display:block}
.chart-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;text-align:center;padding:26px;
  background:linear-gradient(180deg,rgba(169,224,255,.4),rgba(255,248,230,.85));
}
.chart-placeholder img{width:min(320px,60%);border:var(--line) solid var(--ink);border-radius:20px;box-shadow:var(--shadow-sm)}
.chart-placeholder p{font-family:var(--font-jp);font-weight:800;margin:0}
.chart-placeholder code{background:var(--ink);color:var(--yellow);padding:1px 7px;border-radius:6px;font-size:13px}
.fx-5{top:-32px;right:6%;font-size:30px;--rot:10deg;transform:rotate(10deg);z-index:9}

/* ---------------------------------------------------------
   5. JOIN US
   --------------------------------------------------------- */
.join-stage{display:grid;gap:38px}
.banner-panel{
  padding:0;
  transform:translateZ(50px) rotate(-1deg);
  background:var(--sky);
}
.banner-panel img{width:100%}

.join-socials{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;transform:translateZ(25px)}
.social{
  display:flex;align-items:center;gap:16px;
  background:var(--paper);
  border:var(--line) solid var(--ink);border-radius:20px;
  padding:16px 20px;box-shadow:var(--shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease, background .2s ease;
}
.social:hover{transform:translate(-3px,-4px);box-shadow:11px 12px 0 var(--ink)}
.social > i:first-child{
  width:52px;height:52px;flex:none;display:grid;place-items:center;
  border:3px solid var(--ink);border-radius:16px;font-size:22px;
}
.social span{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.social b{font-family:var(--font-disp);letter-spacing:1.6px;font-size:20px}
.social em{font-style:normal;font-weight:600;font-size:14px;color:var(--ink-soft)}
.social .go{font-size:30px;transition:transform .2s ease}
.social:hover .go{transform:translateX(6px)}
.social-x > i:first-child{background:var(--ink);color:var(--paper)}
.social-pump > i:first-child{background:var(--yellow)}
.social-dex > i:first-child{background:var(--sky-2);color:var(--paper)}
.social-scan > i:first-child{background:var(--mint)}
.social.is-pending{filter:saturate(.6)}

.join-stickers{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sticker{padding:0;transform-style:preserve-3d}
.sticker img{width:100%;aspect-ratio:16/11;object-fit:cover}
.sticker-a{transform:translateZ(40px) rotate(-2.4deg)}
.sticker-b{transform:translateZ(80px) rotate(2deg)}
.fx-6{left:50%;top:-26px;translate:-50% 0;font-size:32px;--rot:-6deg;transform:rotate(-6deg);z-index:9}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.comic-foot{
  position:relative;z-index:2;margin-top:40px;
  background:var(--ink);color:var(--paper);
  border-top:var(--line) solid var(--ink);
  padding:40px 0 46px;
}
.foot-inner{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot-badge{
  width:66px;height:66px;border-radius:50%;overflow:hidden;flex:none;
  border:var(--line) solid var(--paper);
}
.foot-badge img{width:100%;height:100%;object-fit:cover}
.foot-txt{margin:0;flex:1;min-width:260px;font-size:14px;font-weight:600;color:#cfe6ff}
.foot-txt b{font-family:var(--font-jp);color:var(--yellow)}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:60px}
  .hero-right{min-height:min(500px,88vw)}
  .about-bottom{grid-template-columns:1fr}
  .buy-layout{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}
  .sp-3{grid-column:1/-1}
}

@media (max-width:820px){
  :root{--line:3px;--shadow:6px 6px 0 var(--ink);--shadow-sm:4px 4px 0 var(--ink)}
  .sec{padding:70px 0}
  .sec-hero{padding-top:130px}
  .nav-burger{display:flex}
  .nav-menu{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:14px;
    background:var(--paper);border:var(--line) solid var(--ink);
    border-radius:24px;padding:20px;box-shadow:var(--shadow-sm);
    display:none;
  }
  .nav-menu.open{display:flex}
  .nav-menu a{font-size:20px;border-bottom:3px solid rgba(23,34,77,.12);padding-bottom:8px}
  .nav-x{width:auto;height:auto;border-radius:14px;padding:10px;justify-self:start}
  .strip{grid-template-columns:1fr}
  .sp-1,.sp-2,.sp-3{transform:rotate(-1deg)}
  .join-socials{grid-template-columns:1fr}
  .join-stickers{grid-template-columns:1fr}
  .step{padding:22px 20px 22px 24px}
  .step-no{position:static;margin-bottom:10px}
  .step-off{transform:rotate(.8deg);width:100%;margin-left:0}
  .starburst{width:104px;height:104px;font-size:15px}
  .starburst b{font-size:21px}
  .logo-sticker{width:88px;height:88px}
  .chart-body{height:min(66vh,520px)}
  .ticker-track span{font-size:16px}
  [data-tilt-stage]{perspective:none;transform:none}
}

@media (max-width:520px){
  .cta-row .btn-comic{width:100%;justify-content:center}
  .ca-box{flex-direction:column;align-items:stretch}
  .ca-box code{white-space:normal;word-break:break-all;text-align:center}
  .ca-copy{width:100%}
  .fx-1,.fx-2,.fx-3{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}