/* ============================================================
   SATOSHI PRO — Landing Page
   3 visual directions: TERMINAL / NEON / RISO
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- base tokens (overridden per theme) ---- */
:root {
  --bg:        #050806;
  --bg2:       #0a120c;
  --ink:       #e9ffe9;
  --muted:     #6f8f78;
  --accent:    #00ff66;
  --accent2:   #ff2e88;
  --line:      rgba(0,255,102,.18);
  --card:      rgba(255,255,255,.02);
  --display:   "JetBrains Mono", monospace;
  --body:      "Noto Sans JP", sans-serif;
  --mono:      "JetBrains Mono", monospace;
  --radius:    4px;
  --maxw:      1280px;
}

/* =========================  THEME: TERMINAL  ========================= */
[data-theme="terminal"] {
  --bg:#070905; --bg2:#0d1208; --ink:#eafee0; --muted:#7c9560;
  --accent:#c4ff1a; --accent2:#ff2e6e; --line:rgba(196,255,26,.18);
  --card:rgba(196,255,26,.035);
  --display:"JetBrains Mono", monospace;
  --body:"Noto Sans JP", sans-serif;
  --radius:4px;
}
/* =========================  THEME: NEON  ========================= */
[data-theme="neon"] {
  --bg:#0a0518; --bg2:#160b30; --ink:#f0ecff; --muted:#9089cc;
  --accent:#aa55ff; --accent2:#00f0c8; --line:rgba(170,85,255,.26);
  --card:rgba(140,90,255,.08);
  --display:"Dela Gothic One", "Space Grotesk", sans-serif;
  --body:"Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --radius:12px;
}
/* =========================  THEME: RISO  ========================= */
[data-theme="riso"] {
  --bg:#eee6d4; --bg2:#e3d6bd; --ink:#14110a; --muted:#615847;
  --accent:#ff3d14; --accent2:#1430d6; --line:rgba(20,17,10,.18);
  --card:rgba(20,17,10,.035);
  --display:"Anton","Dela Gothic One", sans-serif;
  --body:"Zen Kaku Gothic New","Noto Sans JP", sans-serif;
  --radius:2px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
  transition: background .5s ease, color .5s ease;
}

/* ============================================================
   GLOBAL TEXTURE OVERLAYS (per theme, fixed full-screen)
   ============================================================ */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

/* terminal: scanlines + flicker */
.fx-scan {
  display: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px);
  mix-blend-mode: multiply; opacity:.55;
  animation: scanmove 8s linear infinite;
}
.fx-glow {
  display:none;
  background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
}
[data-theme="terminal"] .fx-scan { display:block; }
[data-theme="terminal"] .fx-glow { display:block; }
@keyframes scanmove { from{background-position:0 0;} to{background-position:0 120px;} }

/* neon: perspective grid floor + vignette */
.fx-grid { display:none; }
[data-theme="neon"] .fx-grid {
  display:block;
  background:
    linear-gradient(transparent 0, var(--bg) 70%),
    repeating-linear-gradient(to right, transparent 0 calc(100%/24 - 1px), color-mix(in srgb,var(--accent) 40%, transparent) calc(100%/24 - 1px) calc(100%/24)),
    repeating-linear-gradient(to top, transparent 0 38px, color-mix(in srgb,var(--accent2) 34%, transparent) 38px 39px);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  top: 55%;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom center;
  opacity:.5;
  animation: gridrun 6s linear infinite;
}
@keyframes gridrun { from{background-position-y:0,0,0;} to{background-position-y:0,0,39px;} }
[data-theme="neon"] .fx-glow {
  display:block;
  background:
    radial-gradient(80% 50% at 20% 0%, color-mix(in srgb,var(--accent2) 18%, transparent), transparent 60%),
    radial-gradient(80% 50% at 90% 10%, color-mix(in srgb,var(--accent) 16%, transparent), transparent 60%);
}

/* riso: halftone dots + paper grain */
.fx-halftone { display:none; }
[data-theme="riso"] .fx-halftone {
  display:block;
  background-image: radial-gradient(color-mix(in srgb,var(--ink) 12%, transparent) 1px, transparent 1.6px);
  background-size: 7px 7px;
  opacity:.5; mix-blend-mode: multiply;
}
[data-theme="riso"] .fx-glow {
  display:block;
  background: radial-gradient(90% 60% at 80% -10%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 55%);
}

/* content sits above texture */
.page { position: relative; z-index: 2; }

/* ============================================================
   INTRO SEQUENCE — logo first, then cascade downward
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .nav { opacity:0; animation: introDown .7s cubic-bezier(.2,.7,.2,1) 1.15s forwards; }
  .hero-copy > * { opacity:0; animation: introUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
  .hero-copy .brand-logo   { animation-delay:.12s; animation-duration:1s; }
  .hero-copy .hero-kicker  { animation-delay:.78s; }
  .hero-copy .hero-tagline { animation-delay:.94s; }
  .hero-copy .hero-actions { animation-delay:1.1s; }
  .hero-copy .hero-meta    { animation-delay:1.26s; }
  .hero-copy .bae-promo    { animation-delay:1.1s; }
  .hero-photo { opacity:0; animation: introSide 1.2s cubic-bezier(.2,.7,.2,1) .55s forwards; }
}
@keyframes introUp   { from { opacity:0; transform: translateY(36px); } to { opacity:1; transform:none; } }
@keyframes introDown { from { opacity:0; transform: translateY(-14px); } to { opacity:1; transform:none; } }
@keyframes introSide { from { opacity:0; transform: translateX(46px); } to { opacity:1; transform:none; } }

/* ============================================================
   PARALLAX
   ============================================================ */
[data-px] { will-change: transform; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px clamp(18px,5vw,56px);
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-brand {
  font-family: var(--mono); font-weight: 800;
  letter-spacing: .14em; font-size: 15px;
  display:flex; align-items:center; gap:10px;
}
.nav-brand .dot {
  width:9px; height:9px; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  border-radius:2px;
  animation: pulse 1.4s ease-in-out infinite;
}
[data-theme="riso"] .nav-brand .dot { box-shadow:none; border-radius:50%; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.nav-links { display:flex; gap: clamp(14px,2.4vw,34px); align-items:center; }
.nav-links a {
  color: var(--muted); text-decoration:none; font-size:13px;
  font-family: var(--mono); letter-spacing:.08em;
  text-transform: uppercase; transition: color .2s;
}
.nav-links a:hover { color: var(--ink); }

/* flashy PRODUCTS link */
.nav-links a.nav-products {
  color: var(--accent2); font-weight: 800; font-size: 14px;
  border: 1.5px solid var(--accent2); padding: 8px 16px;
  border-radius: var(--radius);
  transform: rotate(-2deg);
  animation: prodFlash 1.1s steps(2) infinite;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent2) 45%, transparent);
}
.nav-links a.nav-products:hover {
  background: var(--accent2); color: var(--bg);
  transform: rotate(2deg) scale(1.08);
  animation-play-state: paused;
}
.nav-links a.nav-products .arrow { display:inline-block; animation: arrowGo .7s ease-in-out infinite; }
@keyframes prodFlash {
  0%, 100% { color: var(--accent2); border-color: var(--accent2); box-shadow: 0 0 14px color-mix(in srgb, var(--accent2) 45%, transparent); }
  50% { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
}
@keyframes arrowGo { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
[data-theme="riso"] .nav-links a.nav-products { box-shadow: 3px 3px 0 var(--ink); }
@media (prefers-reduced-motion: reduce){ .nav-links a.nav-products, .nav-links a.nav-products .arrow { animation: none; } }
.nav-cta { padding: 9px 18px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono); font-weight:700; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase;
  padding: 15px 26px; cursor:pointer; text-decoration:none;
  border: 1.5px solid var(--accent); color: var(--bg);
  background: var(--accent); border-radius: var(--radius);
  transition: transform .12s ease, box-shadow .2s ease, background .2s, color .2s;
  position:relative;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 30%, transparent); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow:none; }
[data-theme="riso"] .btn { box-shadow: 4px 4px 0 var(--ink); }
[data-theme="riso"] .btn:hover { box-shadow: 6px 6px 0 var(--ink); transform: translate(-1px,-1px); }
[data-theme="riso"] .btn--ghost { box-shadow: 4px 4px 0 var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 94vh; overflow: hidden;
  padding: clamp(40px,7vw,90px) clamp(18px,5vw,56px) 60px;
  display:flex; align-items: center; max-width: var(--maxw); margin: 0 auto;
}
@media (max-width: 900px){ .hero{ min-height:auto; } }

.hero-kicker {
  font-family: var(--mono); font-size:13px; letter-spacing:.34em;
  text-transform:uppercase; color: var(--accent);
  display:flex; align-items:center; gap:12px; margin-bottom: 22px;
}
.hero-kicker::before { content:""; width:34px; height:1.5px; background: var(--accent); }

.wordmark {
  font-family: var(--display);
  font-weight: 900; line-height: .86;
  font-size: clamp(58px, 11.5vw, 168px);
  letter-spacing: -.02em; margin: 0;
  text-transform: uppercase;
  position: relative;
}
.wordmark .l1 { display:block; }
.wordmark .l2 {
  display:block; color: var(--accent);
  -webkit-text-stroke: 0;
}
[data-theme="neon"] .wordmark .l2 {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  text-shadow: 0 0 22px color-mix(in srgb,var(--accent) 60%, transparent);
}
[data-theme="riso"] .wordmark .l2 { color: var(--accent2); }

/* brand logo image (graffiti wordmark) */
.brand-logo { position: relative; display:block; width: 100%; max-width: clamp(360px, 56vw, 780px); }
.hero-copy .brand-logo { filter: drop-shadow(0 5px 22px rgba(0,0,0,.5)); }
[data-theme="riso"] .hero-copy .brand-logo { filter: drop-shadow(0 4px 14px rgba(0,0,0,.28)); }
.brand-logo img { width: 100%; height: auto; display:block; }
.brand-logo .logo-black { display: none; }
[data-theme="riso"] .brand-logo .logo-white { display: none; }
[data-theme="riso"] .brand-logo .logo-black { display: block; }
[data-theme="neon"] .brand-logo .logo-white { filter: drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 65%, transparent)); }
.nav-logo { height: 39px; width:auto; display:block; }
.nav-logo.logo-black { display:none; }
[data-theme="riso"] .nav-logo.logo-white { display:none; }
[data-theme="riso"] .nav-logo.logo-black { display:block; }

.hero-tagline {
  font-size: clamp(15px, 1.7vw, 21px); line-height: 1.85;
  color: var(--ink); max-width: 30ch; margin: 28px 0 0;
  font-weight: 500;
}
[data-theme="riso"] .hero-tagline { font-weight: 700; }
.hero-actions { display:flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.hero-meta {
  margin-top: 46px; display:flex; gap: clamp(20px,3vw,44px);
  font-family: var(--mono);
}
.hero-meta .m { }
.hero-meta .m b {
  display:block; font-size: clamp(22px,2.4vw,32px); color: var(--accent);
  font-weight: 800; line-height:1;
}
.hero-meta .m span {
  font-size: 11px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--muted); display:block; margin-top:8px;
}

/* hero photo (large, bleeds behind the logo; fades to bg) */
.hero-copy { position: relative; z-index: 2; max-width: 64%; }
.hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(440px, 60%, 900px); z-index: 0; overflow: hidden; pointer-events: none;
}
.figure-img {
  position:absolute; left:0; right:0; top:-7%; height:114%;
  width:100%; object-fit:cover; object-position: 50% 16%; display:block;
  filter: contrast(1.05) saturate(1.02) brightness(.9);
}
.hero-photo .scrim {
  position:absolute; inset:0;
  background:
    linear-gradient(to right, var(--bg) 1%, color-mix(in srgb,var(--bg) 58%, transparent) 24%, transparent 56%),
    linear-gradient(to top, var(--bg) 3%, color-mix(in srgb,var(--bg) 22%, transparent) 24%, transparent 54%),
    linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb,var(--bg) 55%, transparent) 7%, transparent 22%);
}
.hero-photo .ptag {
  position:absolute; right:16px; bottom:16px;
  font-family: var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--accent); background: color-mix(in srgb,var(--bg) 55%, transparent);
  padding: 6px 11px; backdrop-filter: blur(4px); border:1px solid var(--line);
}
@media (max-width: 900px){
  .hero-copy { max-width: 100%; }
  .hero-photo { width: 100%; }
  .hero-photo .figure-img { filter: contrast(1.05) saturate(1.02) brightness(.55); }
  .hero-photo .scrim {
    background:
      linear-gradient(to top, var(--bg) 6%, color-mix(in srgb,var(--bg) 60%, transparent) 48%, color-mix(in srgb,var(--bg) 38%, transparent) 100%);
  }
  .hero-photo .ptag { display:none; }
}

/* glitch (terminal only, on hover/active) */
[data-theme="terminal"] .wordmark .l1 { position: relative; }
[data-theme="terminal"] .wordmark.glitch .l1::before,
[data-theme="terminal"] .wordmark.glitch .l1::after {
  content: attr(data-text); position:absolute; left:0; top:0; width:100%;
  overflow:hidden;
}
[data-theme="terminal"] .wordmark.glitch .l1::before { color: var(--accent2); animation: glitchA .4s steps(2) infinite; }
[data-theme="terminal"] .wordmark.glitch .l1::after { color: var(--accent); animation: glitchB .4s steps(2) infinite; }
@keyframes glitchA { 0%{clip-path:inset(0 0 70% 0);transform:translate(-3px,0);} 50%{clip-path:inset(40% 0 20% 0);transform:translate(3px,0);} 100%{clip-path:inset(80% 0 0 0);transform:translate(-2px,0);} }
@keyframes glitchB { 0%{clip-path:inset(60% 0 10% 0);transform:translate(3px,0);} 50%{clip-path:inset(10% 0 60% 0);transform:translate(-3px,0);} 100%{clip-path:inset(30% 0 40% 0);transform:translate(2px,0);} }

.cursor { display:inline-block; width:.55em; height:1em; background: var(--accent);
  margin-left:.08em; vertical-align:-.05em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0;} }

/* ============================================================
   BAE PROMO — silly flashy product teaser in hero
   ============================================================ */
.bae-promo {
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  margin-top: 38px; text-decoration:none; color: var(--ink); width: fit-content;
}
.promo-badge {
  font-family: var(--mono); font-weight:800; font-size:14px; letter-spacing:.22em;
  background: var(--accent2); color: #fff; padding: 8px 16px;
  transform: rotate(-3deg); display:inline-block;
  animation: badgeBounce 1.6s ease-in-out infinite;
}
[data-theme="riso"] .promo-badge { box-shadow: 3px 3px 0 var(--ink); }
@keyframes badgeBounce { 0%,100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(2deg) scale(1.07); } }
.promo-title {
  font-family: var(--display); font-weight:900; text-transform:uppercase;
  font-size: clamp(34px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.01em;
}
.promo-title em {
  font-style: normal; color: var(--accent); display:inline-block;
  transform: rotate(-2deg); animation: hotPop 2.2s ease-in-out infinite;
}
[data-theme="neon"] .promo-title em { color: transparent; -webkit-text-stroke: 2px var(--accent); }
[data-theme="riso"] .promo-title em { color: var(--accent2); }
@keyframes hotPop { 0%,100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(1.5deg) scale(1.06); } }
.promo-cta {
  display:inline-flex; align-items:center; gap:12px;
  font-family: var(--mono); font-weight:800; font-size: clamp(15px,1.5vw,19px); letter-spacing:.08em;
  border: 2px solid var(--accent); color: var(--accent);
  padding: 14px 22px; border-radius: var(--radius);
  animation: prodFlash 1.1s steps(2) infinite;
  transition: transform .15s ease;
}
.bae-promo:hover .promo-cta {
  background: var(--accent); color: var(--bg);
  transform: rotate(-1.5deg) scale(1.06); animation-play-state: paused;
}
[data-theme="riso"] .promo-cta { box-shadow: 4px 4px 0 var(--ink); }
.promo-cta .go { display:inline-block; animation: arrowGo .6s ease-in-out infinite; }
.promo-fly { width: 34px; height: auto; }
.promo-fly .pw { transform-box: fill-box; transform-origin: 50% 70%; animation: pflutter .12s linear infinite alternate; }
.promo-fly .pw2 { animation-delay: .06s; }
@keyframes pflutter { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@media (prefers-reduced-motion: reduce){
  .promo-badge, .promo-title em, .promo-cta, .promo-cta .go, .promo-fly .pw { animation: none; }
}

/* ============================================================
   MARQUEE TICKER
   ============================================================ */
.ticker {
  border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line);
  background: var(--accent); color: var(--bg);
  overflow: hidden; white-space: nowrap; padding: 14px 0;
}
[data-theme="neon"] .ticker { background: var(--bg2); color: var(--accent); }
.ticker-track { display:inline-flex; gap: 40px; animation: marquee 22s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span {
  font-family: var(--display); font-weight: 800; font-size: clamp(18px,2.4vw,30px);
  letter-spacing: .04em; text-transform: uppercase; display:inline-flex; align-items:center; gap:40px;
}
.ticker span::after { content:"◆"; font-size:.6em; opacity:.7; }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============================================================
   SECTION SHELL + REVEAL
   ============================================================ */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(64px,9vw,130px) clamp(18px,5vw,56px); }
.section-head { margin-bottom: clamp(36px,5vw,64px); }
.eyebrow {
  font-family: var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color: var(--accent); display:flex; align-items:center; gap:12px;
}
.eyebrow span { color: var(--muted); }
.section-title {
  font-family: var(--display); font-weight: 900; line-height: .98;
  font-size: clamp(34px,5.4vw,72px); margin: 18px 0 0; letter-spacing:-.01em;
  text-transform: uppercase;
}
[data-theme="neon"] .section-title, [data-theme="riso"] .section-title { line-height:1.04; }

.reveal { opacity:0; transform: translateY(34px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform: none; }
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;}

/* ============================================================
   FEATURES
   ============================================================ */
.features { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,22px); }
@media (max-width: 820px){ .features{ grid-template-columns:1fr; } }
.feat {
  border:1.5px solid var(--line); background: var(--card);
  padding: clamp(24px,2.6vw,36px); position:relative; overflow:hidden;
  border-radius: var(--radius); transition: border-color .3s, transform .3s, background .3s;
}
.feat:hover { border-color: var(--accent); transform: translateY(-6px); }
[data-theme="riso"] .feat:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--ink); }
.feat-num {
  font-family: var(--mono); font-size:13px; color: var(--accent);
  letter-spacing:.2em; margin-bottom: 22px; display:block;
}
.feat-title {
  font-family: var(--display); font-weight: 800; font-size: clamp(22px,2.2vw,30px);
  margin: 0 0 14px; line-height: 1.1; text-transform: uppercase;
}
[data-theme="terminal"] .feat-title { text-transform: none; }
.feat-body { color: var(--muted); line-height: 1.95; font-size: 15px; margin:0; white-space: pre-line; }
.feat-glyph {
  position:absolute; right:-10px; bottom:-30px; font-family: var(--display);
  font-size: 150px; font-weight:900; color: var(--accent);
  opacity:.07; line-height:1; pointer-events:none;
}

/* ============================================================
   BACK-VIEW / SHOWCASE SECTION
   ============================================================ */
.showcase { position: relative; background: var(--bg2); border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line); }
.showcase-inner {
  max-width: var(--maxw); margin:0 auto; padding: clamp(60px,8vw,110px) clamp(18px,5vw,56px);
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px,5vw,70px); align-items:center;
}
@media (max-width: 900px){ .showcase-inner{ grid-template-columns:1fr; } }
.showcase .shot { position:relative; aspect-ratio: 4/5; overflow:hidden; }
.showcase .figure-img { position:absolute; left:0; right:0; top:-7%; height:114%; width:100%; object-fit:cover; display:block; filter:none; }
.showcase .big-quote {
  font-family: var(--display); font-weight:900; line-height: 1.04;
  font-size: clamp(30px,4.4vw,60px); margin:0; text-transform: uppercase;
}
.showcase .big-quote em { color: var(--accent); font-style: normal; }
.showcase .sub { color: var(--muted); line-height:1.9; margin-top:24px; font-size:16px; max-width:40ch; }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closing {
  text-align:center; padding: clamp(80px,12vw,180px) clamp(18px,5vw,56px);
  position: relative; max-width: var(--maxw); margin:0 auto;
}
.closing h2 {
  font-family: var(--display); font-weight:900; line-height:.9;
  font-size: clamp(46px,11vw,150px); margin:0; text-transform:uppercase; letter-spacing:-.02em;
}
.closing h2 .accent { color: var(--accent); }
[data-theme="neon"] .closing h2 .accent { color:transparent; -webkit-text-stroke:2px var(--accent); }
.closing p { color: var(--muted); margin: 26px auto 38px; max-width: 42ch; line-height:1.9; }
.closing .hero-actions { justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top:1.5px solid var(--line); padding: clamp(40px,5vw,64px) clamp(18px,5vw,56px);
  max-width: var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;
}
.footer .fbrand { font-family: var(--display); font-weight:900; font-size: clamp(30px,5vw,58px); text-transform:uppercase; line-height:.9; }
.footer .fcols { display:flex; gap: clamp(30px,5vw,70px); flex-wrap:wrap; }
.footer .fcol h4 { font-family: var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.footer .fcol a { display:block; color: var(--muted); text-decoration:none; font-size:14px; margin-bottom:9px; transition:color .2s; }
.footer .fcol a:hover { color: var(--ink); }
.footer .copy { font-family: var(--mono); font-size:11px; color: var(--muted); letter-spacing:.08em; width:100%; padding-top:24px; border-top:1px solid var(--line); margin-top:10px; }

/* ============================================================
   ON-PAGE THEME SWITCHER
   ============================================================ */
.theme-switch {
  position: fixed; right: clamp(14px,2vw,26px); bottom: clamp(14px,2vw,26px); z-index: 60;
  display:flex; gap:8px; padding:8px; border:1.5px solid var(--line);
  background: color-mix(in srgb,var(--bg) 80%, transparent); backdrop-filter: blur(8px);
  border-radius: var(--radius);
}
.theme-switch button {
  font-family: var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding: 8px 12px; cursor:pointer; border:1px solid var(--line); background:transparent;
  color: var(--muted); border-radius: calc(var(--radius) - 1px); transition: all .2s;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ============================================================
   MOBILE ADJUSTMENTS（狭い画面でのナビ・フッター崩れ対策）
   ナビ: 4リンク＋ロゴが1行に収まらず「取扱店」等が縦折れ・見切れするため、
   サイズを詰めて折返しを許可する。フッター: ブランド名＋3列が横に収まらず
   Follow列が画面外に出るため縦積みにする。
   ============================================================ */
@media (max-width: 720px){
  .nav { padding: 10px 14px; }
  .nav-logo { height: 30px; }
  .nav-links { gap: 10px; row-gap: 8px; flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .nav-links a { font-size: 11px; letter-spacing: .05em; white-space: nowrap; }
  .nav-links a.nav-products { font-size: 12px; padding: 6px 10px; }
  .footer { flex-direction: column; align-items: flex-start; }
}

/* selection */
::selection { background: var(--accent); color: var(--bg); }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .ticker-track,.fx-scan,.fx-grid{animation:none;}
}