/* digib00age — bright/bold/playful one-pager overrides.
   Loaded only by index.html, after tokens.css + base.css. Everything here is
   scoped under body.home so the six legacy marketing pages and the Guide
   (which all share tokens.css/base.css) render exactly as before. */

body.home {
  --bg: var(--cream);
  --bg-raised: var(--navy-deep);
  --surface: #FFFFFF;
  --surface-2: var(--cream-2);
  --surface-3: #FFFFFF;
  --border: #EFE6D2;
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: #6B7280;
}
body.home h1, body.home h2, body.home h3 {
  font-family: var(--font-display-hero);
  font-weight: 800;
  letter-spacing: -0.01em;
}
body.home h1 { font-weight: 900; line-height: 1.05; }
body.home .eyebrow { color: var(--cta); }

/* the footer stays a dark navy band (bg-raised) — re-pin its own text/border
   tokens to light values so they don't inherit the page's dark-on-cream text */
body.home .site-footer {
  --text: #F5F3FF;
  --text-2: #C9C6E8;
  --text-3: #8F8ABF;
  --border: #332F5C;
}

/* ---------- header ---------- */
body.home .site-header { background: rgba(255, 251, 242, 0.88); border-bottom-color: var(--border); }
body.home .brand-lockup { display: flex; align-items: center; gap: 10px; }
body.home .brand-lockup svg { width: 30px; height: 30px; flex-shrink: 0; }
body.home .brand-word { font-family: var(--font-display-hero); font-weight: 800; font-size: 1.25rem; color: var(--ink); letter-spacing: -0.01em; }

/* ---------- color bands (section rhythm) ---------- */
.band--navy { background: var(--navy-deep); color: #F5F3FF; }
.band--navy .eyebrow { color: var(--pop-lime); }
.band--navy .section-head h2, .band--navy .section-head h3 { color: #FFFFFF; }
.band--navy .section-head p { color: #C9C6E8; }
/* white surfaces nested inside a navy band (accordion panels, cards) must reset
   color back to dark — otherwise band--navy's near-white text color inherits
   straight through them onto their own headings/paragraphs/list items */
.band--navy .tab-item, .band--navy .card { color: var(--text); }
.band--tint { background: var(--cream-2); }

/* ---------- hero ---------- */
.hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-6); align-items: center; }
@media (max-width: 960px) { .hero-split { grid-template-columns: 1fr; } }

.hero-masonry { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(90px, auto); gap: var(--space-3); position: relative; }
.hero-tile { position: relative; border-radius: var(--radius-lg); padding: var(--space-3); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-tile img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.hero-tile--a { background: var(--pop-yellow); grid-column: 1 / 2; grid-row: 1 / 3; transform: rotate(-2deg); }
.hero-tile--b { background: var(--pop-pink); grid-column: 2 / 3; grid-row: 1 / 2; transform: rotate(3deg); }
.hero-tile--c { background: var(--pop-blue); grid-column: 2 / 3; grid-row: 2 / 3; transform: rotate(-3deg); }
.hero-sticker { position: absolute; width: 64px; box-shadow: var(--shadow-lg); border-radius: 8px; transform: rotate(-12deg); z-index: 2; }
.hero-sticker--1 { top: -14px; left: 38%; }
.hero-sticker--2 { bottom: -16px; right: 6%; transform: rotate(14deg); }
@media (max-width: 640px) { .hero-sticker { width: 46px; } }

/* ---------- trust strip ---------- */
.trust-strip { display: flex; justify-content: center; align-items: flex-start; gap: var(--space-6); flex-wrap: wrap; }

/* ---------- features / tools media ---------- */
.two-col-media .device-frame { max-width: 560px; margin-inline: auto; }

/* ---------- download platform picker ---------- */
.steps { counter-reset: step; list-style: none; }
.steps li { counter-increment: step; position: relative; padding-left: 2.2em; margin-bottom: var(--space-3); font-size: 0.95rem; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 1.6em; height: 1.6em;
  border-radius: 50%;
  background: var(--cta-tint);
  color: var(--cta);
  font-family: var(--font-display-hero, var(--font-display));
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}
.platform-steps li { color: var(--text-2); }
#download .platform-icon { display: inline-flex; margin-right: 10px; vertical-align: -6px; }
#download .platform-icon svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- contact ---------- */
#contact.band--navy .form-status.is-ok { color: var(--pop-lime); }
#contact.band--navy .field input, #contact.band--navy .field textarea { background: #241F4A; border-color: #3B3570; color: #F5F3FF; }
#contact.band--navy .field input::placeholder, #contact.band--navy .field textarea::placeholder { color: #8F8ABF; }
#contact.band--navy .field label { color: #C9C6E8; }
#contact.band--navy .btn--ghost { border-color: #3B3570; color: #F5F3FF; }
#contact.band--navy .form-note { color: #8F8ABF; }

/* ---------- mobile note (replaces the old .phone-only duplicate block) ---------- */
.mobile-note { display: none; font-size: 0.85rem; color: var(--text-3); }
@media (max-width: 600px) { .mobile-note { display: block; } }

/* ---------- anchor scroll offset for the sticky header ---------- */
body.home section[id] { scroll-margin-top: 84px; }
@media (max-width: 600px) { body.home section[id] { scroll-margin-top: 64px; } }

/* ---------- restore nav + media visibility at phone widths ----------
   base.css's ≤600px rules were built for the old index.html-only phone-only
   content swap and hide nav/screenshots sitewide at that width; the one-pager
   needs the anchor-nav and real screenshots visible at every width instead. */
@media (max-width: 600px) {
  body.home .nav-links, body.home .nav-right { display: flex; }
  body.home .device-frame { display: block; }
  body.home .gallery { display: grid; }
  body.home .two-col-media { display: block; }
}

/* ============================================================
   Animation / interactivity pass (React rewrite) — index.html only
   ============================================================ */

/* ---------- header: always-collapsed icon nav ---------- */
body.home .nav-toggle { display: inline-flex; }
body.home .nav-toggle--book svg { width: 20px; height: 20px; }

/* ---------- nav overlay: stepped flyout, docked top-right, steps narrowing
   as they go down the page (largest step first) — h/t bleibtgleich.dev ---------- */
.nav-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: flex-end; visibility: hidden; pointer-events: none; }
.nav-overlay.is-open { visibility: visible; pointer-events: auto; }
.nav-overlay-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: rgba(21, 23, 28, 0.78); opacity: 0; transition: opacity var(--dur) var(--ease); cursor: pointer; }
.nav-overlay.is-open .nav-overlay-backdrop { opacity: 1; }
.nav-overlay-content {
  position: relative; z-index: 1;
  width: min(340px, 94vw);
  margin: 72px var(--space-4) var(--space-3) 0;
}
.nav-overlay-close {
  position: absolute; top: calc(-1 * var(--space-6)); right: 0;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--surface); color: var(--ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md);
  z-index: 2;
}
.nav-steps {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px; list-style: none;
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  overflow-x: hidden;
}
.nav-step {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-2);
  box-sizing: border-box;
  padding: var(--space-2) var(--space-4);
  background: var(--step-bg, var(--pop-yellow));
  box-shadow: var(--shadow-md);
  text-decoration: none;
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), filter var(--dur) var(--ease);
}
.nav-overlay.is-open .nav-step {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 360ms var(--ease), transform 420ms var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.nav-step-num {
  align-self: flex-end;
  font-family: var(--font-display-hero);
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--ink); opacity: 0.55;
}
.nav-step-label {
  font-family: var(--font-display-hero);
  font-weight: 800; font-size: 1.15rem; color: var(--ink);
  line-height: 1.1;
}
.nav-step:hover, .nav-step:focus-visible { transform: translateX(-10px); filter: brightness(1.06); }
.nav-overlay.is-open .nav-step:hover, .nav-overlay.is-open .nav-step:focus-visible { transform: translateX(-10px); }
@media (max-width: 600px) {
  .nav-overlay-content { margin-top: 64px; }
  .nav-step-label { font-size: 1.05rem; }
}

/* ---------- hero: the three mockup cards get hover movement ---------- */
.hero-tile { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hero-tile:hover { transform: scale(1.06) rotate(0deg); box-shadow: var(--shadow-lg); z-index: 2; }

/* ---------- trust strip: stars roll into position like a wheel, one at a time,
   each spinning more full turns the further it sits from the left ---------- */
@keyframes star-roll-in {
  from { opacity: 0; transform: translateX(calc(-60px - var(--i) * 24px)) rotate(calc((var(--i) + 1) * -360deg - 20deg)) scale(0.35); }
  to { opacity: 1; transform: rotate(var(--tilt)) scale(1); }
}
.sticker-badge { opacity: 0; transition: transform var(--dur) var(--ease); }
.sticker-badge.is-visible { animation-name: star-roll-in; animation-timing-function: var(--ease); animation-fill-mode: both; }
.sticker-badge:hover { transform: rotate(0deg) scale(1.2); }
.sticker-badge::before { transition: background-color var(--dur) var(--ease); }
.sticker-badge:hover::before { background: var(--badge-bg-hover, var(--badge-bg)); }

/* ---------- scroll typewriter (headings/eyebrows only) ---------- */
.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.1em;
  animation: caret-blink 900ms steps(2) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sticker-badge.is-visible { animation: none; opacity: 1; transform: rotate(var(--tilt)); }
  .is-typing::after { animation: none; }
}