/* ============================================================
   Youshi Homepage — design tokens
   Palette (from the brand's own mascot sheet):
     ink:    #141414   near-black, primary text/bg
     paper:  #F7F7F3   warm off-white
     gold:   #F4B000   primary accent
     gold-2: #FFD466   lighter gold, for glows/highlights
     mist:   #D9D9D9   neutral gray
   Type: Space Grotesk (display) + Public Sans (body, shared with
   the product itself) + IBM Plex Mono (numerals/labels, ditto).
   ============================================================ */

:root {
  --ink: #141414;
  --ink-soft: #2b2b2b;
  --paper: #f7f7f3;
  --paper-dim: #ece9e0;
  --gold: #f4b000;
  --gold-2: #ffd466;
  --gold-dim: #8a6203;
  --mist: #d9d9d9;
  --white: #ffffff;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Public Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1180px;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.1; }

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

.section-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0 0 14px;
}
.section-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.section-lede {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 8px 24px rgba(244,176,0,0.35); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(244,176,0,0.45); }
.btn-ghost { border-color: rgba(20,20,20,0.2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

/* ---------------- Chapter navigation dots ---------------- */
.chapter-nav {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 14px;
}
.chapter-nav-dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,0.25); border: 1.5px solid rgba(255,255,255,0.4);
  cursor: pointer; transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.chapter-nav-dot:hover { transform: scale(1.25); }
.chapter-nav-dot.is-current { background: var(--gold); border-color: var(--gold); transform: scale(1.3); }
.chapter-nav.on-light .chapter-nav-dot { background: rgba(20,20,20,0.18); border-color: rgba(20,20,20,0.35); }
.chapter-nav.on-light .chapter-nav-dot.is-current { background: var(--gold-dim); border-color: var(--gold-dim); }
@media (max-width: 760px) { .chapter-nav { display: none; } }

/* ---------------- Preloader ---------------- */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader-inner { text-align: center; width: min(340px, 80vw); }
.preloader-mark { width: 110px; height: auto; display: block; margin: 0 auto 18px; filter: invert(1); animation: logoBreathe 2.4s ease-in-out infinite; }
.preloader-word { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 0.02em; margin-bottom: 26px; }
.preloader-word span { color: var(--gold); }
.preloader-bar { width: 100%; height: 3px; background: rgba(20,20,20,0.1); border-radius: 3px; overflow: hidden; }
.preloader-bar-fill { width: 0%; height: 100%; background: var(--gold); border-radius: 3px; transition: width 0.35s ease; }
.preloader-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 14px; }

/* ---------------- Particle field (intro beat) ---------------- */
.particle-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------------- Press-anywhere glitch ---------------- */
.glitch-layer {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
  opacity: 0;
}
.glitch-layer.is-active { opacity: 1; }

/* A tap/click ripple, centred exactly on the press point: a soft radial
   glow flashes at the touch itself while a ring expands outward from it —
   the "clicking effect" rather than a screen-wide glitch. */
.glitch-ring {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
}
.glitch-ring::before,
.glitch-ring::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  opacity: 0;
}
.glitch-ring::before {
  /* the flash at the touch point */
  background: radial-gradient(circle, rgba(244,176,0,0.9) 0%, rgba(244,176,0,0) 72%);
}
.glitch-ring::after {
  /* the ring travelling outward */
  border: 2px solid rgba(244,176,0,0.85);
}
.glitch-layer.is-active .glitch-ring::before { animation: ripplePulse 0.5s ease-out forwards; }
.glitch-layer.is-active .glitch-ring::after { animation: rippleRing 0.6s cubic-bezier(0.16, 0.8, 0.3, 1) forwards; }
@keyframes ripplePulse {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(5.5); }
}
@keyframes rippleRing {
  0%   { opacity: 0.85; transform: scale(1); border-width: 2px; }
  100% { opacity: 0; transform: scale(20); border-width: 0.5px; }
}

/* ---------------- Logo warp + glow on pointer sweep ---------------- */
.intro-symbol {
  transition: filter 0.35s ease;
}
.intro-logo-wrap.is-charged .intro-wordmark {
  text-shadow: 0 0 26px rgba(244,176,0,0.75), 0 0 60px rgba(244,176,0,0.35);
  transition: text-shadow 0.3s ease;
}
.intro-logo-wrap .intro-wordmark { transition: text-shadow 0.5s ease; }

/* ---------------- Header ---------------- */
.header-stack {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(247,247,243,0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(20,20,20,0.06);
}

.utility-bar {
  border-bottom: 1px solid rgba(20,20,20,0.06);
  overflow: hidden;
  max-height: 34px;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.header-stack.scrolled .utility-bar { max-height: 0; opacity: 0; border-bottom-color: transparent; }
.utility-bar-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
  display: flex; justify-content: flex-end; gap: 22px;
  height: 34px; align-items: center;
}
.utility-bar-inner a { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.utility-bar-inner a:hover { color: var(--ink); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  transition: padding 0.3s ease;
}
.header-stack.scrolled .site-header { padding: 12px 32px; }

.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: auto; filter: invert(1); display: block; } /* white PNG -> black on light bg */
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: 0.02em; }
.brand-dot { color: var(--gold); }

.main-nav { display: flex; gap: 32px; }
.main-nav a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); transition: color 0.2s; }
.main-nav a:hover { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 18px; }
.btn-partner-portal {
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(244,176,0,0.4);
  animation: goldPulse 3s ease-in-out infinite;
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(244,176,0,0.4); }
  50% { box-shadow: 0 6px 26px rgba(244,176,0,0.65); }
}
.btn-partner-portal:hover { transform: translateY(-1px); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ================================================================
   Cinematic chapters — native CSS scroll-snap (mandatory)
   Each chapter is exactly one viewport tall and snaps into place.
   This is deliberately native rather than JS-driven: browser scroll-snap
   runs on the compositor thread, so the ease-in/ease-out glide is smooth
   by construction and can't desync, double-fire, or fight user input the
   way a hand-rolled requestAnimationFrame loop can (and repeatedly did).
   `mandatory` (not `proximity`) is the strongest native pull — the browser
   always resolves to a snap point, it can never leave you stranded
   between two chapters. `scroll-snap-stop: always` additionally forbids
   skipping past a chapter even on a fast flick.
   ================================================================ */
html { scroll-snap-type: y mandatory; }

.cinematic { position: relative; background: var(--ink); }
.chapter {
  position: relative;
  height: 100vh;
  height: 100svh; /* avoids the mobile URL-bar jump */
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.chapter-intro { background: var(--paper); }
.chapter-video { background: var(--ink); }

/* Video chapters fade their content in once snapped, so a chapter never
   pops in mid-scroll. .is-active is toggled by the IntersectionObserver. */
.chapter-video > *:not(.story-video):not(.cafe-video-wrap),
.manager-caption-stack > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}
.chapter-video.is-active > *:not(.story-video):not(.cafe-video-wrap),
.chapter-video.is-active .manager-caption-stack > * {
  opacity: 1;
  transform: translateY(0);
}

.story-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-video--stacked { opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.story-video--stacked.is-showing { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s linear 0s; }

.chapter-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55); text-transform: uppercase; z-index: 4;
}

/* Golden veil — swells to fill the screen as the logo scrolls away */
.golden-veil {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, var(--gold-2) 38%, var(--gold) 70%, var(--gold-dim) 100%);
}

/* ---- Load-exit transition: black thunder floods, then clears ---- */
.load-exit {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; opacity: 0; visibility: hidden;
}
.load-exit.is-running { opacity: 1; visibility: visible; }
.load-exit-fill { position: absolute; inset: 0; background: #000; opacity: 0; }
.load-exit-bolts { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.load-exit-bolts path { fill: none; stroke: #000; stroke-width: 26; stroke-linejoin: round; stroke-linecap: round; }
.load-exit-particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }

/* ---- Beat 1: lightning + logo ---- */
/* Procedural lightning — halo (soft, wide) under core (hard, thin) gives the
   channel depth; the whole group flickers as one strike. */
.bolt-halo { fill: none; stroke: rgba(10,10,10,0.4); stroke-linejoin: round; stroke-linecap: round; }
.bolt-core { fill: none; stroke: #050505; stroke-linejoin: round; stroke-linecap: round; }
.lightning-svg { opacity: 0; }
.lightning-svg.is-striking { animation: strikeFlicker 900ms ease-out forwards; }
@keyframes strikeFlicker {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  18%  { opacity: 1; }     /* real hold at full brightness — this is the part that reads as "a flash" */
  26%  { opacity: 0.35; }
  34%  { opacity: 0.9; }   /* second, weaker pulse — real strikes rarely fire once */
  46%  { opacity: 0.2; }
  56%  { opacity: 0.55; }
  70%  { opacity: 0.08; }
  100% { opacity: 0; }
}

/* Full-screen brightness pulse fired alongside the bolt. Real lightning
   lights up the whole sky, not just the visible channel — this is what
   makes a strike unmistakable even before you consciously see the bolt
   shape itself. */
.sky-flash {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, #fff, rgba(255,255,255,0) 70%);
  opacity: 0;
}
.sky-flash.is-flashing { animation: skyFlash 700ms ease-out forwards; }
@keyframes skyFlash {
  0%   { opacity: 0; }
  4%   { opacity: 0.55; }
  16%  { opacity: 0.3; }
  30%  { opacity: 0.4; }
  50%  { opacity: 0.1; }
  100% { opacity: 0; }
}

.lightning-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.chapter-intro.is-jolting { animation: introJitter 340ms ease-out; }
@keyframes introJitter {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-4px, 2px); }
  26%  { transform: translate(3px, -2px); }
  44%  { transform: translate(-2px, 1px); }
  70%  { transform: translate(1px, 0); }
  100% { transform: translate(0, 0); }
}
.intro-logo-wrap { position: relative; z-index: 1; text-align: center; animation: logoBreathe 4.5s ease-in-out infinite; }
@keyframes logoBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.intro-symbol { width: clamp(220px, 32vw, 420px); height: auto; filter: invert(1); margin: 0 auto 22px; display: block; }
.intro-wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(46px, 7.5vw, 84px); letter-spacing: 0.02em; }
.intro-wordmark span { color: var(--gold); }
.intro-tagline { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 14px; }

.scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5); text-transform: uppercase;
}
.scroll-cue--dark { color: rgba(20,20,20,0.4); }
.scroll-cue-line { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }

/* ---- Flash transition ---- */

/* ---- Beat 2: cafe ---- */

.cafe-video-wrap { position: absolute; inset: 0; }
.cafe-video-wrap video { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.cafe-video-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,20,0.75) 0%, rgba(20,20,20,0.15) 55%, rgba(20,20,20,0.55) 100%); }
.cafe-copy { position: relative; z-index: 2; max-width: 620px; padding: 0 32px; align-self: flex-start; margin-left: max(6vw, 32px); color: var(--white); }
.hero-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 20px; }
.hero-title { font-size: clamp(38px, 5.5vw, 68px); font-weight: 700; letter-spacing: -0.02em; color: var(--white); }
.hero-title-accent { color: var(--gold); }
.cafe-float-card {
  position: absolute; z-index: 3;
  background: rgba(20,20,20,0.85); backdrop-filter: blur(10px);
  border: 1px solid rgba(244,176,0,0.35); border-radius: 14px;
  padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--white);
  box-shadow: 0 14px 30px rgba(0,0,0,0.4);
  display: flex; align-items: center; gap: 8px;
}
.cafe-float-card--order { bottom: 14%; right: 8%; animation: floatY 4s ease-in-out infinite; }
.cafe-float-card--kitchen { top: 18%; right: 12%; animation: floatY 4s ease-in-out infinite 1.5s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(244,176,0,0.3); flex-shrink: 0; }

.hero-cta-row { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.hero-cta-row .btn-ghost { border-color: rgba(255,255,255,0.35); color: var(--white); }
.hero-cta-row .btn-ghost:hover { border-color: var(--white); }
.hero-cta-row--center { justify-content: center; }

/* ---- Stacked scroll-scrubbed videos (cafe group: scan -> order) ---- */

.cafe-video-wrap #videoOrder { position: absolute; inset: 0; }

/* ---- Beat 3: network (scroll-scrubbed electric-pulse video) ---- */

.network-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.network-label { position: absolute; bottom: 12%; z-index: 2; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); text-shadow: 0 2px 12px rgba(0,0,0,0.8); }

/* ---- Beat 4: manager (scroll-scrubbed video) ---- */

.manager-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
#chManager::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,20,0.15) 0%, rgba(20,20,20,0.25) 45%, rgba(20,20,20,0.85) 100%); }

/* On desktop this wrapper is invisible to layout — its children (notif
   card, copy block) keep their own independent positioning exactly as
   before. On mobile (see breakpoint below) it becomes a real flex column
   anchored to the bottom, so the two pieces stack predictably instead of
   relying on percentage math that can collide on a short screen. */
.manager-caption-stack { display: contents; }

.manager-notif-card {
  position: absolute; top: 16%; left: 8%; z-index: 3;
  background: rgba(20,20,20,0.85); backdrop-filter: blur(10px);
  border: 1px solid rgba(244,176,0,0.35); border-radius: 14px;
  padding: 12px 18px; font-size: 13.5px; font-weight: 600; color: var(--white);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.4);
}
.manager-copy { position: relative; z-index: 2; max-width: 520px; padding: 0 32px; align-self: flex-end; margin-right: max(6vw, 32px); text-align: right; color: var(--white); }
.manager-copy .section-eyebrow { color: var(--gold-2); }
.manager-copy .section-title { color: var(--white); }
.manager-copy .hero-cta-row { justify-content: flex-end; }



/* ---------------- Trust strip ---------------- */
.trust-strip {
  background: var(--paper-dim);
  padding: 22px 32px;
  text-align: center;
  /* A mandatory snap sequence needs a valid point to move FORWARD to once
     you scroll past the last chapter — without this, there is nothing
     ahead to resolve to and the browser pulls scroll straight back to the
     last video chapter instead, which is exactly the "snaps back to the
     video again and again" bug. This doesn't force a hard stop here (no
     scroll-snap-stop), it just gives snapping somewhere valid to land. */
  scroll-snap-align: start;
}
.trust-strip p {
  margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ---------------- Problem ---------------- */
.problem { padding: 110px 0; }
.problem-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.problem-card {
  background: var(--white);
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: var(--radius);
  padding: 32px 24px;
}
.problem-icon { font-size: 28px; margin-bottom: 16px; }
.problem-card h3 { font-size: 17px; margin-bottom: 8px; }
.problem-card p { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* ---------------- How it works ---------------- */
.how-it-works { padding: 110px 0; background: var(--white); }
.steps-row {
  margin-top: 60px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.step { flex: 1; text-align: center; padding: 0 12px; }
.step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  width: 44px; height: 44px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.step h3 { font-size: 16.5px; margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.step-connector { flex: 0 0 40px; height: 1.5px; background: repeating-linear-gradient(to right, var(--mist) 0 6px, transparent 6px 12px); margin-top: 22px; }

/* ---------------- Signature: QR moment ---------------- */
.signature { background: var(--ink); color: var(--white); padding: 130px 0; overflow: hidden; }
.signature-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 0.7fr; gap: 60px; align-items: center;
}
.signature .section-lede { color: rgba(255,255,255,0.68); }
.signature-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.signature-qr {
  width: 220px; height: 220px;
  filter: drop-shadow(0 0 40px rgba(244,176,0,0.25));
}
.qr-scanline { animation: qrScan 2.4s ease-in-out infinite; }
@keyframes qrScan { 0% { transform: translateY(0); } 50% { transform: translateY(194px); } 100% { transform: translateY(0); } }
.signature-caption { font-family: var(--font-mono); font-size: 12.5px; color: var(--gold-2); letter-spacing: 0.05em; }

/* ---------------- Features (editorial rows) ---------------- */
.features { padding: 40px 0 60px; }
.feature-row {
  max-width: var(--container); margin: 0 auto; padding: 90px 32px;
  display: grid; grid-template-columns: 0.9fr 1fr; gap: 64px; align-items: center;
}
.feature-row--reverse { grid-template-columns: 1fr 0.9fr; }
.feature-row--reverse .feature-media { order: 2; }
.feature-media img { border-radius: 22px; box-shadow: 0 30px 70px rgba(20,20,20,0.18); }
.feature-copy h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 16px; }
.feature-copy p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 20px; }
.feature-list li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: 14.5px; color: var(--ink-soft);
}
.feature-list li::before { content: "—"; position: absolute; left: 0; color: var(--gold-dim); }

.feature-media--kitchen { position: relative; }
.kitchen-mock {
  position: absolute; inset: 12px;
  background: rgba(20,20,20,0.88);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.kitchen-mock-header { font-family: var(--font-mono); font-size: 11px; color: var(--gold-2); display: flex; align-items: center; gap: 6px; }
.kitchen-mock-dot { width: 6px; height: 6px; border-radius: 50%; background: #3f9d6e; box-shadow: 0 0 0 3px rgba(63,157,110,0.3); }
.kitchen-mock-card { background: #1e242b; border-left: 3px solid var(--gold); border-radius: 8px; padding: 10px 12px; }
.kitchen-mock-card--new { border-left-color: #4a90d9; animation: kitchenPulse 2s ease-in-out infinite; }
@keyframes kitchenPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.kitchen-mock-table { font-family: var(--font-mono); font-size: 10.5px; color: var(--gold-2); font-weight: 700; margin-bottom: 4px; }
.kitchen-mock-item { font-size: 12px; color: #eef2f5; }

/* ---------------- Dual feature (billing / analytics) ---------------- */
.dual-feature { background: var(--white); padding: 100px 0; }
.dual-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dual-card { background: var(--paper); border-radius: var(--radius); padding: 40px; }
.dual-card-icon { font-size: 30px; margin-bottom: 18px; }
.dual-card h3 { font-size: 20px; margin-bottom: 12px; }
.dual-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ---------------- About ---------------- */
.about { padding: 120px 0; }
.about-inner { max-width: 760px; }

/* ---------------- Final CTA ---------------- */
.final-cta {
  position: relative;
  background: var(--ink); color: var(--white);
  padding: 130px 32px;
  text-align: center;
  overflow: hidden;
}
.final-cta-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,176,0,0.25), transparent 70%);
  pointer-events: none;
}
.final-cta-inner { position: relative; max-width: 640px; margin: 0 auto; }
.final-cta-mark { width: 60px; height: auto; margin: 0 auto 28px; display: block; }
.final-cta h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 14px; }
.final-cta p { font-size: 17px; color: rgba(255,255,255,0.7); margin-bottom: 10px; }

/* ---------------- Footer ---------------- */
.site-footer { background: #0e0e0e; color: rgba(255,255,255,0.75); padding: 70px 32px 0; }
.footer-inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .brand-mark { filter: none; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 10px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; margin-bottom: 10px; color: rgba(255,255,255,0.7); }
.footer-col a:hover { color: var(--white); }
.footer-social { display: flex; gap: 12px; margin-top: 6px; }
.footer-social a {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-family: var(--font-mono);
}
.footer-bottom { max-width: var(--container); margin: 0 auto; padding: 24px 0; }
.footer-bottom p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,0.4); }

/* ---------------- Scroll-reveal utility (JS toggles .in-view) ---------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-row { flex-direction: column; align-items: stretch; gap: 28px; }
  .step-connector { display: none; }
  .feature-row, .feature-row--reverse { grid-template-columns: 1fr; padding: 60px 24px; }
  .feature-row--reverse .feature-media { order: 0; }
  .signature-inner { grid-template-columns: 1fr; text-align: center; }
  .signature-qr-wrap { align-items: center; }
  .dual-feature-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }

  /* .cinematic sizes naturally to its 4 stacked 100vh chapters — it must
     NOT get an explicit height here. This used to be a pinned container
     that needed one, from an earlier architecture; that rule was never
     removed when the pin was replaced with normal stacked chapters, and it
     was silently truncating the container's own box to one viewport tall
     while its content correctly rendered to four — which meant anything
     positioned after it in the DOM (the "How it works" section) inherited
     a position far too early and visually bled into the still-scrolling
     chapters beneath it. */
  .cafe-copy, .manager-copy {
    align-self: center; text-align: center;
    margin-left: auto; margin-right: auto; max-width: 90%;
  }
  .manager-copy .hero-cta-row { justify-content: center; }
}

@media (max-width: 760px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-actions { gap: 10px; }
  .btn-partner-portal { padding: 9px 16px; font-size: 13px; }
  .problem-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .section-inner { padding: 0 20px; }

  /* Utility bar: tighter spacing, smaller type so all four links fit */
  .utility-bar-inner { justify-content: center; gap: 12px; padding: 0 16px; flex-wrap: wrap; height: auto; padding-top: 6px; padding-bottom: 6px; }
  .utility-bar-inner a { font-size: 10.5px; }
  .utility-bar { max-height: 56px; }

  .intro-symbol { width: clamp(120px, 30vw, 200px); height: auto; margin-bottom: 14px; }
  .intro-wordmark { font-size: clamp(34px, 11vw, 52px); }
  .intro-tagline { font-size: 11.5px; letter-spacing: 0.1em; }

  /* IMPORTANT: .chapter itself must stay full-bleed (no padding) — the
     video is absolutely positioned with inset:0, which resolves against
     the PADDING box of its container. Padding here would shrink the video
     and leave gutters down the sides, not just indent the text. Padding
     belongs on the text overlays specifically, below. */

  /* Floating cards are decorative flourishes that only have room to breathe
     on a tall desktop viewport — on a short mobile screen their percentage
     positions can land on top of the centred text, which is the actual
     "everything jumped over the videos" bug. Simplest robust fix: they
     don't appear at all below this width, rather than trying to find
     percentages that never collide across every possible phone height. */
  .cafe-float-card { display: none; }

  .hero-title { font-size: clamp(28px, 9vw, 40px); }
  .hero-eyebrow { font-size: 10.5px; margin-bottom: 10px; letter-spacing: 0.1em; }
  .section-title { font-size: clamp(22px, 7vw, 30px); }
  .network-label { bottom: 7%; font-size: 10px; letter-spacing: 0.08em; padding: 0 20px; text-align: center; }
  .hero-cta-row { gap: 10px; }
  .hero-cta-row .btn { padding: 12px 20px; font-size: 14px; }

  /* "Scroll" cue is redundant with the always-visible nav dots on the
     right edge, and is one more independently-positioned element that can
     collide with the caption text on a short screen — simplest to just
     not show it below this width. */
  .chapter-cue { display: none; }

  /* Text overlays, rebuilt around ONE rule: every chapter's text content
     lives in a single bottom-anchored block, never independently
     positioned pieces that can drift into each other. This is the actual
     fix for "elements dragged over videos" — there is now structurally
     only one region where text can appear. */
  .cafe-copy, .manager-copy {
    position: absolute;
    left: 0; right: 0; top: auto; bottom: 22px;
    max-width: 100%; margin: 0; align-self: auto;
    padding: 16px 22px;
    border-radius: 14px;
    background: rgba(10,10,10,0.55);
    backdrop-filter: blur(6px);
    text-align: left;
  }
  .manager-copy .hero-cta-row { justify-content: flex-start; }

  /* The manager chapter has TWO pieces of text (notif card + copy) — they
     stack together as a real flex column instead of each guessing at an
     independent percentage position. */
  .manager-caption-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    padding: 0 20px;
  }
  .manager-caption-stack .manager-copy,
  .manager-caption-stack .manager-notif-card {
    position: static; /* now positioned by the flex stack, not independently */
    margin: 0;
  }
  .manager-notif-card { justify-content: center; text-align: center; font-size: 12px; }

  .manager-notif-card {
    top: 7%; left: 5%; right: 5%;
    font-size: 11.5px; padding: 10px 14px;
    justify-content: center; text-align: center;
  }
}

.main-nav.mobile-open {
  display: flex;
  position: absolute;
  top: 100%; left: 0; right: 0;
  flex-direction: column;
  background: var(--paper);
  padding: 20px 32px 28px;
  border-bottom: 1px solid rgba(20,20,20,0.08);
  gap: 18px;
}

/* ---------------------------------------------- Youshi Partner download
   Sits before the final CTA: by this point a visitor understands what
   Youshi does, so this is where "how do I get it" belongs. */
.home-download {
  padding: 92px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.07), transparent 62%),
    #0a0d16;
}
.home-download-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.home-download-lede {
  font-size: 16px; line-height: 1.65; color: #9aa1bd;
  max-width: 580px; margin: 14px auto 30px;
}
.home-download-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.home-download-note {
  margin-top: 22px; font-size: 13px; color: #6b7392; line-height: 1.6;
}
@media (max-width: 560px) {
  .home-download { padding: 64px 20px; }
  .home-download-row .btn { width: 100%; }
}