/* ======================================================================
   ASKDONA — landing page
   Visual reference: the painterly moonlit-garden artwork.
   Palette: deep navy night, cream moons, sage cypress, soft sky blues,
   stone-white arches and pathways. Textured, contemplative, editorial.
   ====================================================================== */

:root{
  /* === Surfaces === */
  --ink:        #041119;    /* dark page */
  --ink-2:      #0C1E2E;    /* dark card */
  --ink-3:      #122A40;    /* dark card hover */
  --ink-deep:   #020A14;
  --paper:      #FCFCFA;    /* light page */
  --card:       #FFFFFF;    /* light card */
  --paper-dim:  #DCDCD8;

  /* === Pastels === */
  --mint:       #D8F0E2;    /* pastel green */
  --yellow:     #F7F4D0;    /* pastel yellow */
  --sky:        #C8DEF0;    /* pastel blue */
  --sky-pale:   #E5EFF7;

  /* === Accent (burgundy) === */
  --accent:     #5C1F2A;    /* burgundy */
  --accent-dim: #4A1822;
  --clay:       #5C1F2A;    /* alias */

  /* === Compatibility aliases for the previous design language === */
  --moon:       #F7F4D0;    /* pastel yellow plays the old cream-moon role */
  --moon-soft:  #FFFCEA;
  --paper-warm: #F7F4D0;    /* alias */
  --sage:       #D8F0E2;    /* mint pastel for "permitted" indicators on dark */
  --sage-deep:  #2A4A3E;    /* dark green — used as deep accent in art */
  --sage-dark:  #1F3A2E;
  --sky-deep:   #6F8AA8;
  --stone:      #FCFCFA;
  --water:      #0C1E2E;

  --line:       rgba(252,252,250,.10);
  --line-soft:  rgba(252,252,250,.05);
  --glass:      rgba(252,252,250,.03);
  --ink-dim:    #6E7E92;
  --ink-mid:    #98A8BC;

  --sans:    'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --display: 'Instrument Serif', 'Noto Serif JP', Georgia, serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1280px;
  --gap:  clamp(20px, 4vw, 56px);
  --radius: 18px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ink); color: var(--paper); }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: auto;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, var(--ink-3), transparent 70%),
    var(--ink);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--moon); color: var(--ink); }

/* -------- Custom cursor -------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .3s ease, border-color .25s ease;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--paper);
  border-radius: 50%;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(245,237,217,.5);
  border-radius: 50%;
}
.cursor-ring.hover {
  width: 60px; height: 60px;
  border-color: var(--moon);
  background: rgba(239,229,208,.08);
}
@media (hover: none) {
  body { cursor: auto; }
  a, button { cursor: pointer; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* -------- Background atmospherics -------- */
.atmo {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.aurora {
  position: absolute;
  width: 1200px; height: 1200px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: .25;
  background: radial-gradient(circle at center,
    rgba(239,229,208,.55) 0%,
    rgba(157,182,208,.25) 35%,
    transparent 70%);
  top: -400px; left: -200px;
  animation: drift 32s var(--ease) infinite alternate;
}
.aurora.b {
  top: auto; left: auto;
  bottom: -500px; right: -300px;
  background: radial-gradient(circle at center,
    rgba(143,170,138,.40) 0%,
    rgba(157,182,208,.18) 40%,
    transparent 70%);
  animation-duration: 42s;
  animation-delay: -10s;
  opacity: .25;
}
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(120px,80px) scale(1.15); }
  100% { transform: translate(-80px,140px) scale(.95); }
}

.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
  opacity: .5;
}

/* Painterly grain — fits the oil-paint texture in the hero artwork */
.grain {
  position: fixed; inset: -100%;
  pointer-events: none;
  z-index: 50;
  opacity: .12;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.85  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grainshift 8s steps(8) infinite;
  mix-blend-mode: overlay;
}
@keyframes grainshift {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-3%,-2%); }
  20% { transform: translate(2%,3%); }
  30% { transform: translate(-1%,4%); }
  40% { transform: translate(4%,-2%); }
  50% { transform: translate(-3%,1%); }
  60% { transform: translate(3%,-3%); }
  70% { transform: translate(-2%,2%); }
  80% { transform: translate(1%,-4%); }
  90% { transform: translate(-4%,3%); }
}

/* -------- Layout -------- */
.shell { position: relative; z-index: 2; }
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* -------- Nav -------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 48px);
  transition: backdrop-filter .35s ease, background .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(14,26,46,.7);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.375rem;
  letter-spacing: -.01em;
  color: var(--paper);
}
/* brand-logo: the AskDona symbol SVG used in the top-left of the nav */
.brand-logo {
  width: 30px;
  height: 30px;
  display: inline-block;
  object-fit: contain;
  flex-shrink: 0;
}
/* wide wordmark variant (v14+) — black AskDona horizontal logo */
.brand-logo--wordmark {
  width: auto;
  height: 44px;
}
/* brand-mark: legacy moon icon — kept for the footer brand block */
.brand-mark {
  width: 26px; height: 26px;
  position: relative;
  display: inline-block;
}
.brand-mark::before {
  content: '';
  position: absolute; inset: 2px;
  border-radius: 50%;
  background: var(--moon);
  box-shadow: 0 0 14px rgba(239,229,208,.4);
  animation: moonGlow 4s ease-in-out infinite;
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--sage);
  border-right-color: transparent;
  border-top-color: transparent;
  transform: rotate(-30deg);
}
@keyframes moonGlow {
  0%,100% { box-shadow: 0 0 14px rgba(239,229,208,.4); }
  50%     { box-shadow: 0 0 22px rgba(239,229,208,.65); }
}

.nav-links {
  display: flex; gap: 56px;
  font-size: 0.8438rem;
  color: var(--ink-mid);
  letter-spacing: -.005em;
}
.nav-links a { position: relative; padding: 4px 0; transition: color .25s ease; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%;
  bottom: 0; height: 1px; background: var(--moon);
  transition: right .35s var(--ease);
}
.nav-links a:hover { color: var(--paper); }
.nav-links a:hover::after { right: 0; }

.nav-cta { display: flex; gap: 10px; align-items: center; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 0.8438rem;
  font-weight: 500;
  letter-spacing: -.005em;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn .arrow {
  display: inline-block;
  transition: transform .35s var(--ease);
  font-family: var(--sans);
}
.btn:hover .arrow { transform: translateX(4px); }

.btn-ghost { color: var(--ink-mid); }
.btn-ghost:hover { color: var(--paper); }

.btn-primary {
  background: var(--moon);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 30px rgba(239,229,208,.18);
}
.btn-primary:hover {
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 16px 40px rgba(239,229,208,.4);
  transform: translateY(-1px);
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s var(--ease);
}
.btn-primary:hover::before { transform: translateX(100%); }

.btn-glass {
  background: var(--glass);
  border-color: var(--line);
  color: var(--paper);
  backdrop-filter: blur(10px);
}
.btn-glass:hover {
  background: rgba(245,237,217,.06);
  border-color: rgba(245,237,217,.2);
}

/* -------- Hero (v2: full-bleed painterly scene, text bottom-left) -------- */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.hero-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
  overflow: hidden;
  /* fallback gradient (shows if the image hasn't been saved yet) */
  background:
    radial-gradient(ellipse 80% 50% at 30% 60%, rgba(232,222,200,.18), transparent 65%),
    radial-gradient(ellipse 60% 60% at 80% 30%, rgba(157,182,208,.14), transparent 65%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink-2) 60%, var(--ink-3) 100%);
  box-shadow: none;
}

/* Hero image — overlays the SVG when askdona-hero.jpg exists. Ken-burns zoom for ambient life. */
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
  z-index: 2;       /* above the SVG colonnade scene */
  animation: kenBurns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenBurns {
  from { transform: scale(1.00) translate(0%, 0%); }
  to   { transform: scale(1.06) translate(-1%, -0.8%); }
}
@media (max-aspect-ratio: 1/1) {
  .hero-image { object-position: 35% center; }
}

.scene-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Dark vignette anchoring bottom-left for text legibility — strong enough that
   white type pops cleanly regardless of what the painting shows underneath. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 90% at 0% 100%, rgba(6,12,22,.95) 0%, rgba(6,12,22,.78) 22%, rgba(6,12,22,.4) 45%, transparent 65%),
    linear-gradient(to top,    rgba(6,12,22,.65), transparent 30%),
    linear-gradient(to bottom, rgba(14,26,46,.4), transparent 18%);
}

/* Text overlay anchored bottom-left of the hero */
.hero-text {
  position: absolute;
  bottom: clamp(70px, 11vh, 130px);
  left: clamp(24px, 6vw, 80px);
  max-width: 540px;
  z-index: 5;
}

h1.hero-title {
  font-family: var(--display);
  font-size: clamp(2.125rem, 4.4vw, 3.75rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -.022em;
  color: var(--paper);
  margin: 0 0 18px;
  text-shadow:
    0 2px 24px rgba(0,0,0,.85),
    0 0 50px rgba(0,0,0,.55);
}
h1.hero-title .em {
  font-style: italic;
  color: var(--moon);
  position: relative;
}
h1.hero-title .em::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.05em; height: 0.05em;
  width: 0;
  background: currentColor;
  animation: underline 1.4s var(--ease) 1.2s forwards;
}
@keyframes underline { to { width: 100%; } }

.hero-tagline {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: 440px;
  margin-bottom: 26px;
  text-shadow:
    0 2px 14px rgba(0,0,0,.8),
    0 0 24px rgba(0,0,0,.5);
}
.hero-tagline .em-soft { color: var(--paper); font-weight: 500; }

.hero-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
}

@keyframes pulsePoint { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(2.6);opacity:0} }
.scene-svg .layer { transition: transform .8s var(--ease); }

/* gentle ambient motion on the scene */
.scene-svg .moon-lg { animation: bob 18s ease-in-out infinite; transform-origin: center; }
.scene-svg .moon-sm { animation: bob 12s ease-in-out -3s infinite; transform-origin: center; }
.scene-svg .cypress-l { animation: sway 9s ease-in-out infinite; transform-origin: bottom center; }
.scene-svg .cypress-r { animation: sway 11s ease-in-out -2s infinite; transform-origin: bottom center; }
.scene-svg .cypress-c { animation: sway 13s ease-in-out -4s infinite; transform-origin: bottom center; }
.scene-svg .twinkle { animation: twinkle 4s ease-in-out infinite; }
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@keyframes sway {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(0.8deg); }
}
@keyframes twinkle {
  0%,100% { opacity: .6; }
  50%     { opacity: 1; }
}

/* Procession wheels — each vehicle's wheels spin in place.
   Older vehicles roll slowly; the sports car spins fastest. */
.scene-svg .wheel {
  transform-box: fill-box;
  transform-origin: center center;
  animation: roll 6s linear infinite;
}
.scene-svg .vehicle-horse  .wheel { animation-duration: 8s;   }
.scene-svg .vehicle-early  .wheel { animation-duration: 4.5s; }
.scene-svg .vehicle-modern .wheel { animation-duration: 3s;   }
.scene-svg .vehicle-sport  .wheel { animation-duration: 1.6s; }
@keyframes roll { to { transform: rotate(-360deg); } }


/* Float cards */
.float-card {
  position: absolute;
  background: rgba(15,28,49,.82);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow:
    0 1px 0 rgba(245,237,217,.04) inset,
    0 24px 60px -20px rgba(0,0,0,.7);
  transition: transform .6s var(--ease), box-shadow .4s ease;
  z-index: 3;
  font-size: 0.8438rem;
  line-height: 1.5;
  will-change: transform;
}
.card-h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 0.6562rem;
  letter-spacing: .04em;
  color: var(--ink-mid);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.doticon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(245,237,217,.08);
  display: inline-grid; place-items: center;
  font-family: var(--display); font-style: italic;
  font-size: 0.6875rem;
  color: var(--paper);
}
.doticon.accent { background: var(--moon); color: var(--ink); }
.doticon.cool { background: var(--sky); color: var(--ink); }
.doticon.burg { background: var(--sage); color: var(--ink); }

.card-q {
  top: 4%; left: 4%;
  width: 70%;
  max-width: 360px;
  animation: float1 9s ease-in-out infinite;
}
.card-q .q {
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--paper);
}
.card-q .q .em { font-style: italic; color: var(--moon); }

.card-a {
  top: 36%; right: 4%;
  width: 78%;
  max-width: 380px;
  animation: float2 11s ease-in-out infinite;
}
.card-a .body { color: var(--ink-mid); margin-bottom: 12px; }
.card-a .body em { color: var(--paper); font-style: normal; font-weight: 500; }
.cites { display: flex; gap: 6px; flex-wrap: wrap; }
.cite {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 0.6562rem;
  color: var(--ink-mid);
  background: rgba(245,237,217,.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.cite:hover {
  background: rgba(239,229,208,.08);
  border-color: rgba(239,229,208,.25);
  color: var(--paper);
}
.cite .ic {
  width: 16px; height: 16px;
  border-radius: 4px;
  display: inline-grid; place-items: center;
  font-size: 0.5rem;
  font-weight: 600;
  background: rgba(157,182,208,.18);
  color: var(--sky);
}
.cite .ic.pdf { background: rgba(176,90,74,.22); color: var(--clay); }
.cite .ic.ntn { background: rgba(239,229,208,.18); color: var(--moon); }

.card-s {
  bottom: 4%; left: 12%;
  width: 56%;
  max-width: 280px;
  animation: float3 13s ease-in-out infinite;
}
.card-s .stat {
  font-family: var(--display);
  font-size: 2.625rem;
  line-height: 1;
  color: var(--paper);
  margin: 6px 0 4px;
}
.card-s .stat .em { color: var(--moon); font-style: italic; }
.card-s .label {
  font-size: 0.75rem;
  color: var(--ink-mid);
  margin-bottom: 12px;
}
.bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 36px;
}
.bars span {
  flex: 1;
  background: linear-gradient(to top, rgba(143,170,138,.7), rgba(143,170,138,.15));
  border-radius: 2px;
  transform-origin: bottom;
  animation: barRise 1.6s var(--ease) backwards;
}
.bars span:nth-child(1){ animation-delay: .1s }
.bars span:nth-child(2){ animation-delay: .15s }
.bars span:nth-child(3){ animation-delay: .2s }
.bars span:nth-child(4){ animation-delay: .25s }
.bars span:nth-child(5){ animation-delay: .3s }
.bars span:nth-child(6){ animation-delay: .35s }
.bars span:nth-child(7){ animation-delay: .4s }
.bars span:nth-child(8){ animation-delay: .45s }
@keyframes barRise { from { transform: scaleY(0); opacity: 0 } to { transform: scaleY(1); opacity: 1 } }

@keyframes float1 { 0%,100%{ transform: translate(0,0)} 50%{ transform: translate(6px,-10px)} }
@keyframes float2 { 0%,100%{ transform: translate(0,0)} 50%{ transform: translate(-8px,8px)} }
@keyframes float3 { 0%,100%{ transform: translate(0,0)} 50%{ transform: translate(4px,-6px)} }

/* Hero scroll indicator */
.scroll-hint {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 30px;
  font-family: var(--mono);
  font-size: 0.6562rem;
  letter-spacing: .15em;
  color: var(--ink-mid);
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  z-index: 5;
}
.scroll-hint::after {
  content: '';
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--moon), transparent);
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0 }
  40% { transform: scaleY(1); opacity: 1 }
  60% { transform: scaleY(1); opacity: 1 }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0 }
}

/* -------- Hero v10 — full-bleed screen-recording video -------- */
.hero.hero--v10 {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #0E1014;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero.hero--v10 .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #FAF4E0;
  display: block;
  pointer-events: none;
  z-index: 1;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* very subtle top + bottom gradient so the nav stays legible over any video frame */
.hero.hero--v10 .hero-v10-shade { background: transparent; }

/* ===================================================================
   TEMPLATE CONTENT (everything that scrolls in below the v14 hero)
   =================================================================== */
.tpl-section {
  background: #FAF6EA;
  color: #1F1B14;
  padding: clamp(72px, 10vh, 130px) clamp(20px, 5vw, 56px);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.tpl-section:nth-of-type(even) { background: #F2EBD7; }
.tpl-container {
  max-width: 1200px;
  margin: 0 auto;
}
.tpl-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8B7A4F;
}
.tpl-h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.8vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  color: #1F1B14;
  margin: 14px 0 0;
}
.tpl-h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: #1F1B14;
  margin: 12px 0 0;
}
.tpl-lede {
  margin-top: 16px;
  font-size: clamp(0.875rem, 1.15vw, 1.0625rem);
  line-height: 1.62;
  color: rgba(31, 27, 20, .72);
  max-width: 640px;
}
.tpl-section-head { margin-bottom: clamp(40px, 6vh, 64px); }
.tpl-section-head-tight { margin-bottom: 36px; }

/* -------- Articles grid -------- */
.tpl-grid {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}
.tpl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tpl-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .tpl-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .tpl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tpl-grid-3,
  .tpl-grid-4 { grid-template-columns: 1fr; }
}
.tpl-card {
  background: #FFFCF3;
  border: 1px solid rgba(31, 27, 20, .08);
  border-radius: 14px;
  padding: 22px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tpl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -16px rgba(31, 27, 20, .25);
  border-color: rgba(31, 27, 20, .18);
}
.tpl-card-art {
  background: #F4E9CC;
  border-radius: 10px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 18px;
}
.tpl-card-art img { width: 100%; height: 100%; object-fit: cover; }
.tpl-card-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(31, 27, 20, .55);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tpl-card-meta .dot { color: rgba(31, 27, 20, .3); }
.tpl-card-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 10px 0 0;
  color: #1F1B14;
}
.tpl-card-excerpt {
  margin-top: 10px;
  font-size: 0.9062rem;
  line-height: 1.55;
  color: rgba(31, 27, 20, .68);
}
.tpl-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.8438rem;
  color: #1F1B14;
  border-bottom: 1px solid rgba(31, 27, 20, .42);
  transition: border-color .2s ease, color .2s ease;
}
.tpl-link:hover { color: #8B6A2C; border-color: #8B6A2C; }

/* -------- Blog (featured + list) -------- */
.tpl-blog-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) {
  .tpl-blog-grid { grid-template-columns: 1fr; }
}
.tpl-blog-feature {
  background: #FFFCF3;
  border: 1px solid rgba(31, 27, 20, .08);
  border-radius: 14px;
  overflow: hidden;
}
.tpl-blog-art {
  background: #F4E9CC;
  height: clamp(220px, 32vw, 340px);
  overflow: hidden;
}
.tpl-blog-art img { width: 100%; height: 100%; object-fit: cover; }
.tpl-blog-body { padding: clamp(20px, 3vw, 36px); }
.tpl-byline {
  margin-top: 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7188rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(31, 27, 20, .55);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tpl-byline-name { color: #1F1B14; font-weight: 500; }
.tpl-blog-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
}
.tpl-blog-list li {
  padding: 22px 0;
  border-bottom: 1px solid rgba(31, 27, 20, .12);
  cursor: pointer;
  transition: padding-left .2s ease;
}
.tpl-blog-list li:first-child { padding-top: 0; }
.tpl-blog-list li:last-child  { border-bottom: 0; }
.tpl-blog-list li:hover { padding-left: 6px; }
.tpl-list-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6562rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8B7A4F;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tpl-list-meta .dot { color: rgba(31, 27, 20, .3); }
.tpl-list-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.18;
  letter-spacing: -.012em;
  color: #1F1B14;
  margin: 8px 0 0;
}

/* -------- Resource tiles -------- */
.tpl-tile {
  display: block;
  padding: 28px 24px 30px;
  background: #FFFCF3;
  border: 1px solid rgba(31, 27, 20, .08);
  border-radius: 14px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tpl-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 27, 20, .25);
  box-shadow: 0 14px 32px -16px rgba(31, 27, 20, .22);
}
.tpl-tile-icon {
  width: 88px; height: 88px;
  display: block;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
  background: #F4E9CC;
}
.tpl-tile-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: #1F1B14;
}
.tpl-tile-sub {
  margin-top: 6px;
  font-size: 0.8438rem;
  line-height: 1.5;
  color: rgba(31, 27, 20, .65);
}

/* -------- Newsletter / CTA -------- */
.tpl-cta-card {
  background: #1F1B14;
  color: #FAF6EA;
  border-radius: 18px;
  padding: clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 820px) {
  .tpl-cta-card { grid-template-columns: 1fr; text-align: center; }
}
.tpl-cta-art {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: #FFFCF3;
  object-fit: cover;
  flex-shrink: 0;
}
.tpl-cta-card .tpl-h2 { color: #FAF6EA; margin-top: 0; }
.tpl-cta-card .tpl-lede { color: rgba(250, 246, 234, .76); }
.tpl-cta-form {
  display: inline-flex;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 4px;
}
.tpl-cta-form input {
  background: transparent;
  border: 0;
  outline: 0;
  padding: 10px 16px;
  font: inherit;
  font-size: 0.875rem;
  color: #FAF6EA;
  width: clamp(180px, 30vw, 260px);
}
.tpl-cta-form input::placeholder { color: rgba(250, 246, 234, .45); }
.tpl-cta-form button {
  background: #FAF6EA;
  color: #1F1B14;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font: inherit;
  font-size: 0.8438rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease;
}
.tpl-cta-form button:hover { background: #FFFFFF; }

/* -------- Footer -------- */
.tpl-footer {
  background: #16130E;
  color: rgba(250, 246, 234, .7);
  padding: clamp(48px, 7vh, 80px) clamp(20px, 5vw, 56px) clamp(28px, 4vh, 40px);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.8438rem;
}
.tpl-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 720px) {
  .tpl-footer-grid { grid-template-columns: 1fr 1fr; }
}
.tpl-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.375rem;
  color: #FAF6EA;
}
.tpl-footer-brand img {
  width: 28px; height: 28px;
  filter: brightness(0) invert(1) opacity(.85);
}
.tpl-footer-h {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6562rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250, 246, 234, .5);
  margin-bottom: 14px;
}
.tpl-footer-col a {
  display: block;
  padding: 5px 0;
  color: rgba(250, 246, 234, .82);
  transition: color .2s;
}
.tpl-footer-col a:hover { color: #FAF6EA; }
.tpl-footer-bottom {
  grid-column: 1 / -1;
  margin-top: clamp(28px, 4vh, 48px);
  padding-top: 24px;
  border-top: 1px solid rgba(250, 246, 234, .1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.7812rem;
  color: rgba(250, 246, 234, .55);
}

/* -------- Hero v14 — LIGHT video → black type + soft light wash on the left ---- */
.hero--v14 .hero-v10-shade { background: transparent; }
.hero--v14 .hero-v14-title {
  color: #0E1014;
  text-shadow:
    0 1px 16px rgba(255,255,255,.55),
    0 0 32px rgba(255,255,255,.35);
}
.hero--v14 .hero-v14-title .em {
  color: #1F3F6E;          /* deep navy italic accent reads on light bg */
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.hero--v14 .hero-v14-title .em::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: #1F3F6E;
  animation: heroV14Underline 1.4s cubic-bezier(.22, 1, .3, 1) 1.2s forwards;
}
@keyframes heroV14Underline {
  from { width: 0; }
  to   { width: 100%; }
}
.hero--v14 .hero-v14-sub {
  color: rgba(14, 16, 20, .82);
  text-shadow:
    0 1px 12px rgba(255,255,255,.55),
    0 0 24px rgba(255,255,255,.35);
}
.hero--v14 .hero-v14-sub .em-soft {
  color: #1F3F6E;
  font-weight: 500;
}
.hero--v14 .hero-v14-ctas .btn-primary {
  background: rgba(14, 16, 20, .82);
  border: 1px solid rgba(14, 16, 20, .9);
  color: #FAF4E0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero--v14 .hero-v14-ctas .btn-primary:hover {
  background: rgba(14, 16, 20, .94);
  border-color: #000;
}
.hero--v14 .hero-v14-ctas .btn-glass {
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #0E1014;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 18px -10px rgba(40,28,12,.18);
}
.hero--v14 .hero-v14-ctas .btn-glass:hover {
  background: rgba(255, 255, 255, .35);
  border-color: rgba(255, 255, 255, .85);
}

/* v14 nav — black text on the light video */
body:has(.hero--v14) .nav .brand,
body:has(.hero--v14) .nav .nav-links,
body:has(.hero--v14) .nav .nav-links a,
body:has(.hero--v14) .nav .nav-cta .btn-ghost,
body:has(.hero--v14) .nav .lang-toggle,
body:has(.hero--v14) .nav .lang-toggle .seg {
  color: #0E1014;
  text-shadow: 0 1px 10px rgba(255, 255, 255, .55);
}
body:has(.hero--v14) .nav .nav-links a:hover { color: #0E1014; opacity: .7; }
body:has(.hero--v14) .nav .nav-links a::after { background: #0E1014; }
body:has(.hero--v14) .nav .brand-logo {
  /* SVG is already flat-black — soft white drop-shadow for separation */
  filter: drop-shadow(0 1px 8px rgba(255, 255, 255, .55));
}
body:has(.hero--v14) .nav .btn-ghost {
  border-color: rgba(14, 16, 20, .42);
}
body:has(.hero--v14) .nav .btn-ghost:hover {
  border-color: #0E1014;
  background: rgba(14, 16, 20, .06);
}
body:has(.hero--v14) .nav .btn-primary {
  text-shadow: none;
  background: #0E1014;
  color: #FAF4E0;
  border-color: #0E1014;
}
body:has(.hero--v14) .nav .lang-toggle {
  border-color: rgba(14, 16, 20, .28);
  background: rgba(255, 255, 255, .35);
}

/* -------- Hero v12 — left-aligned headline, subtitle, and CTAs -------- */
.hero--v12 .hero-v10-shade {
  /* heavier shade on the LEFT side so the copy stays readable over any
     frame, plus a soft top/bottom darkening for the nav */
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.32) 28%,
      rgba(0,0,0,.10) 48%,
      transparent 70%),
    linear-gradient(180deg,
      rgba(0,0,0,.30) 0%,
      transparent 18%,
      transparent 82%,
      rgba(0,0,0,.22) 100%);
}
.hero-v14-copy {
  position: absolute;
  left: clamp(28px, 6vw, 88px);
  top: 58%;
  transform: translateY(-50%);
  z-index: 4;
  text-align: left;
  max-width: min(580px, 50vw);
  animation: heroV12CopyIn 1.4s cubic-bezier(.22, 1, .3, 1) 0.4s both;
}
.hero-v14-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.125rem, 4.8vw, 4.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.024em;
  color: var(--paper);
  text-shadow:
    0 2px 24px rgba(0,0,0,.65),
    0 0 48px rgba(0,0,0,.4);
}
.hero-v14-title .em {
  font-style: italic;
  color: var(--moon);
}
.hero-v14-sub {
  margin: 22px 0 0;
  max-width: 520px;
  font-family: var(--sans);
  font-size: clamp(0.875rem, 1.25vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  text-shadow:
    0 1px 14px rgba(0,0,0,.65),
    0 0 28px rgba(0,0,0,.4);
}
.hero-v14-sub .em-soft {
  color: var(--moon);
  font-weight: 500;
}
.hero-v14-ctas {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-v14-ctas .btn-glass {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
  color: #FFFFFF;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-v14-ctas .btn-glass:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .60);
}
@keyframes heroV12CopyIn {
  from { opacity: 0; transform: translateY(-50%) translateX(-22px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@media (max-width: 900px) {
  .hero-v14-copy {
    left: clamp(20px, 5vw, 48px);
    max-width: min(520px, 70vw);
  }
}
@media (max-width: 720px) {
  .hero-v14-copy {
    left: clamp(18px, 5vw, 36px);
    right: clamp(18px, 5vw, 36px);
    max-width: none;
    top: auto;
    bottom: clamp(40px, 7vh, 80px);
    transform: none;
    animation: heroV12CopyInMobile 1.3s cubic-bezier(.22, 1, .3, 1) 0.4s both;
  }
  .hero-v14-title { font-size: clamp(1.625rem, 7vw, 2.375rem); }
  .hero-v14-sub   { font-size: clamp(0.8125rem, 3.6vw, 0.9375rem); margin-top: 14px; }
  .hero-v14-ctas  { margin-top: 22px; }
  @keyframes heroV12CopyInMobile {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* keep the v11 selectors below available for the v11 file — they don't match here */
/* -------- Hero v11 — website title anchored to the bottom of the screen -------- */
.hero--v11 .hero-v10-shade {
  /* deeper shade at the bottom so the title stays readable over any frame */
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.28) 0%,
      transparent 16%,
      transparent 50%,
      rgba(0,0,0,.35) 78%,
      rgba(0,0,0,.62) 100%);
}
/* Title + subtitle anchored to the bottom of the hero */
.hero-v11-copy {
  position: absolute;
  left: 50%;
  bottom: clamp(36px, 7vh, 96px);
  transform: translateX(-50%);
  z-index: 4;
  text-align: center;
  width: max-content;
  max-width: 92vw;
  animation: heroV11TitleIn 1.4s cubic-bezier(.22, 1, .3, 1) 0.5s both;
}
.hero-v11-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.75rem, 4.4vw, 3.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.022em;
  color: var(--paper);
  text-shadow:
    0 2px 20px rgba(0,0,0,.6),
    0 0 40px rgba(0,0,0,.4);
}
.hero-v11-title .em {
  font-style: italic;
  color: var(--moon);
}
.hero-v11-sub {
  margin: 16px auto 0;
  max-width: min(640px, 90vw);
  font-family: var(--sans);
  font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  text-shadow:
    0 1px 12px rgba(0,0,0,.65),
    0 0 24px rgba(0,0,0,.4);
}
.hero-v11-sub .em-soft {
  color: var(--moon);
  font-weight: 500;
}
@keyframes heroV11TitleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(28px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 720px) {
  .hero-v11-copy {
    bottom: clamp(24px, 5vh, 56px);
    max-width: 94vw;
  }
  .hero-v11-title { font-size: clamp(1.375rem, 6.4vw, 2rem); }
  .hero-v11-sub   { font-size: clamp(0.75rem, 3.4vw, 0.875rem); margin-top: 12px; }
}

/* -------- Nav re-colour for v12: dark video → all type goes pure white -------- */
body:has(.hero--v12) .nav .brand,
body:has(.hero--v12) .nav .nav-links,
body:has(.hero--v12) .nav .nav-links a,
body:has(.hero--v12) .nav .nav-cta .btn-ghost,
body:has(.hero--v12) .nav .lang-toggle,
body:has(.hero--v12) .nav .lang-toggle .seg {
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
body:has(.hero--v12) .nav .nav-links a:hover { color: #FFFFFF; opacity: .82; }
body:has(.hero--v12) .nav .nav-links a::after { background: #FFFFFF; }
body:has(.hero--v12) .nav .brand-logo {
  /* the symbol SVG is flat black — invert + tint to white for the dark video */
  filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0, 0, 0, .55));
}
body:has(.hero--v12) .nav .btn-ghost {
  border-color: rgba(255, 255, 255, .4);
}
body:has(.hero--v12) .nav .btn-ghost:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, .10);
}
body:has(.hero--v12) .nav .btn-primary {
  text-shadow: none;
  background: #FFFFFF;
  color: var(--ink);
  border-color: #FFFFFF;
}
body:has(.hero--v12) .nav .btn-primary:hover {
  background: rgba(255, 255, 255, .9);
}
body:has(.hero--v12) .nav .lang-toggle {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .06);
}

/* -------- Nav re-colour for v11: text reads on both light + dark video frames.
   Uses a balanced warm mid-tone (#8C8478) — luminance sits right between the
   white and black extremes, then a dual text-shadow (a tight light shadow +
   a soft dark glow) provides outline-style contrast regardless of background. */
.hero--v11 ~ * .nav,
body:has(.hero--v11) .nav .brand,
body:has(.hero--v11) .nav .nav-links,
body:has(.hero--v11) .nav .nav-links a,
body:has(.hero--v11) .nav .nav-cta .btn-ghost,
body:has(.hero--v11) .nav .lang-toggle {
  color: #8C8478;
  text-shadow:
    0 1px 0 rgba(255,255,255,.22),
    0 0 10px rgba(0,0,0,.55);
}
body:has(.hero--v11) .nav .brand { font-weight: 500; }
body:has(.hero--v11) .nav .nav-links a:hover { color: #FFFFFF; }
body:has(.hero--v11) .nav .nav-links a::after { background: #8C8478; }
body:has(.hero--v11) .nav .brand-logo {
  /* the symbol is a flat-black SVG — drop it to the same mid-tone so it
     stays visible against whatever frame is behind the nav */
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.25))
    drop-shadow(0 0 8px rgba(0,0,0,.4))
    grayscale(1)
    brightness(1.55)
    opacity(.85);
}
body:has(.hero--v11) .nav .btn-ghost {
  border-color: rgba(255, 255, 255, .35);
}
body:has(.hero--v11) .nav .btn-ghost:hover {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, .08);
}
/* primary CTA stays solid black, but lift the inner type to pure cream so it
   reads regardless of what the video is doing behind the pill */
body:has(.hero--v11) .nav .btn-primary {
  text-shadow: none;
  background: rgba(14, 16, 20, .92);
  color: #FAF4E0;
  border-color: rgba(14, 16, 20, .92);
}

/* -------- Logo animation intro (sits right below the hero) -------- */
.logo-intro {
  position: relative;
  width: 100%;
  padding: clamp(40px, 7vh, 90px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAF4E0;     /* matches the cream paper above */
  overflow: hidden;
}
.logo-intro-video {
  display: block;
  width: min(1100px, 88vw);
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  user-select: none;
}

/* -------- Trust marquee -------- */
.trust {
  padding: 60px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(21,35,58,0), rgba(21,35,58,.4), rgba(21,35,58,0));
}
.trust-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .15em;
  color: var(--ink-mid);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 28px;
}
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: marquee 50s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.logo {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.625rem;
  color: var(--ink-mid);
  white-space: nowrap;
  letter-spacing: -.01em;
  transition: color .3s ease;
  display: inline-flex; align-items: center; gap: 12px;
}
.logo:hover { color: var(--paper); }
.logo .small {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.8125rem;
  letter-spacing: .14em;
}
.logo .glyph {
  font-style: normal;
  color: var(--moon);
  font-size: 1.125rem;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -------- Section heads -------- */
.section {
  padding: 140px 0;
  position: relative;
}
.section-head {
  max-width: 760px;
  margin: 0 auto 80px;
  text-align: center;
}
.kicker {
  font-family: var(--mono);
  font-size: 0.7188rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--moon);
  margin-bottom: 24px;
  display: inline-block;
}
.kicker::before { content: '— '; color: var(--ink-mid); margin-right: 4px; }

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  color: var(--paper);
}
h2 .em {
  font-style: italic;
  color: var(--moon);
}
.sub {
  margin-top: 24px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-mid);
}

/* -------- Manifesto strip -------- */
.manifesto {
  padding: 100px 0 60px;
  text-align: center;
  position: relative;
}
.manifesto p {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.25;
  letter-spacing: -.018em;
  color: var(--ink-mid);
  max-width: 920px;
  margin: 0 auto;
}
.manifesto p .em { font-style: italic; color: var(--paper); }
.manifesto p .accent { color: var(--moon); font-style: italic; }

/* small arch motif divider */
.arch-divider {
  display: block;
  margin: 0 auto 40px;
  width: 56px;
  opacity: .8;
}

/* -------- Features grid -------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.feature {
  position: relative;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(21,35,58,.7), rgba(14,26,46,.4));
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s ease, background .4s ease;
}
.feature::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(239,229,208,.10), transparent 40%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.feature:hover {
  transform: translateY(-4px);
  border-color: rgba(239,229,208,.22);
}
.feature:hover::before { opacity: 1; }

.feature .num {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .15em;
  color: var(--moon);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.feature h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--paper);
  margin-bottom: 14px;
}
.feature h3 .em { font-style: italic; color: var(--moon); }
.feature p {
  color: var(--ink-mid);
  font-size: 0.9062rem;
  margin-bottom: 28px;
}
.feature em { color: var(--paper); font-style: italic; }

.viz {
  position: relative;
  padding: 22px 18px;
  border-radius: 14px;
  background: rgba(8,17,32,.45);
  border: 1px solid var(--line-soft);
  min-height: 130px;
}

.viz-connectors {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: flex-start;
}
.pill {
  font-family: var(--mono);
  font-size: 0.6875rem;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(245,237,217,.04);
  border: 1px solid var(--line);
  color: var(--ink-mid);
  transition: all .3s ease;
}
.pill.lit {
  background: rgba(239,229,208,.10);
  border-color: rgba(239,229,208,.3);
  color: var(--moon);
}
.feature:hover .pill {
  animation: shimmer 2s ease-in-out infinite;
}
.feature:hover .pill:nth-child(2n) { animation-delay: .2s; }
.feature:hover .pill:nth-child(3n) { animation-delay: .4s; }
@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

.viz-quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--paper);
}
.viz-quote .src {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--ink-mid);
  letter-spacing: .04em;
}

.viz-govern .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--paper);
}
.viz-govern .row:last-child { border-bottom: 0; }
.viz-govern .ok { color: var(--sage); font-size: 0.6875rem; }
.viz-govern .deny { color: var(--clay); font-size: 0.6875rem; }

.viz-measure svg { width: 100%; height: 100%; }

/* -------- Demo -------- */
.demo-wrap {
  position: relative;
  padding: 4px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(239,229,208,.3), rgba(143,170,138,.25), rgba(157,182,208,.2));
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.6);
}
.demo-window {
  background: rgba(11,20,36,.96);
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  grid-template-rows: 48px 1fr;
  height: 580px;
}
.demo-chrome {
  grid-column: 1 / -1;
  display: flex; align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(245,237,217,.02);
  font-family: var(--mono);
  font-size: 0.7188rem;
  color: var(--ink-mid);
}
.dots { display: flex; gap: 6px; }
.dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(245,237,217,.15);
}
.dots span:nth-child(1){ background: rgba(176,90,74,.7) }
.dots span:nth-child(2){ background: rgba(239,229,208,.7) }
.dots span:nth-child(3){ background: rgba(143,170,138,.85) }
.demo-chrome .url {
  flex: 1; text-align: center;
  letter-spacing: .04em;
}
.demo-chrome .badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(143,170,138,.14);
  border: 1px solid rgba(143,170,138,.3);
  color: var(--sage);
  font-size: 0.6562rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.demo-chrome .badge .live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
  animation: pulsePoint 1.6s ease-out infinite, livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{box-shadow:0 0 0 0 rgba(143,170,138,.6)} 50%{box-shadow:0 0 0 6px rgba(143,170,138,0)} }

.demo-side, .demo-aside {
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  font-size: 0.7812rem;
  color: var(--ink-mid);
  overflow: hidden;
}
.demo-aside { border-right: 0; border-left: 1px solid var(--line); }

.group { margin-bottom: 26px; }
.group-h {
  font-family: var(--mono);
  font-size: 0.6562rem;
  letter-spacing: .12em;
  color: var(--moon);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  margin: 0 -8px;
  font-size: 0.7812rem;
  color: var(--ink-mid);
  transition: background .2s ease, color .2s ease;
  cursor: pointer;
}
.item:hover { background: rgba(245,237,217,.04); color: var(--paper); }
.item.active { background: rgba(239,229,208,.10); color: var(--paper); }
.item .icn {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: rgba(245,237,217,.06);
  display: inline-grid; place-items: center;
  font-size: 0.625rem;
  font-family: var(--display);
  font-style: italic;
}
.item.active .icn { background: var(--moon); color: var(--ink); }

.demo-main {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 32px 0;
  overflow-y: auto;
}
.demo-main::-webkit-scrollbar { width: 4px; }
.demo-main::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.chat-msg {
  display: flex; gap: 14px;
  margin-bottom: 26px;
}
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(245,237,217,.06);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--paper);
  flex-shrink: 0;
  letter-spacing: .04em;
}
.chat-msg.ai .avatar {
  background: var(--moon);
  position: relative;
  box-shadow: 0 0 16px rgba(239,229,208,.35);
}
.chat-msg.ai .avatar::after {
  content: '';
  position: absolute; inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(14,26,46,.4) 0%, transparent 60%);
}
.chat-bubble {
  background: rgba(245,237,217,.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 100%;
  color: var(--paper);
}
.chat-msg.user .chat-bubble {
  background: rgba(157,182,208,.07);
  border-color: rgba(157,182,208,.2);
}
.chat-bubble strong { color: var(--moon); font-weight: 500; }
.chat-bubble .caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--moon);
  vertical-align: -2px;
  margin-left: 1px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.chat-cites {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.chat-cites.show { opacity: 1; transform: translateY(0); }

.demo-input {
  position: sticky;
  bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 0 22px;
  background: linear-gradient(to top, rgba(11,20,36,1) 60%, rgba(11,20,36,0));
  margin-top: auto;
}
.demo-input input {
  flex: 1;
  background: rgba(245,237,217,.04);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--paper);
  font: inherit;
  font-size: 0.8438rem;
  outline: none;
  transition: border-color .25s ease;
}
.demo-input input:focus { border-color: rgba(239,229,208,.4); }
.demo-input input::placeholder { color: var(--ink-mid); }
.demo-input .send {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--moon);
  color: var(--ink);
  display: grid; place-items: center;
  font-size: 1rem;
  font-weight: 600;
  transition: transform .2s ease, background .2s ease;
}
.demo-input .send:hover { transform: translateY(-1px); background: var(--paper); }

.source-card {
  background: rgba(245,237,217,.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  font-size: 0.7812rem;
  transition: all .3s ease;
}
.source-card:hover {
  background: rgba(239,229,208,.06);
  border-color: rgba(239,229,208,.2);
}
.src-h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-mid);
  margin-bottom: 8px;
}
.src-h .ic {
  padding: 2px 6px;
  font-size: 0.5625rem;
  letter-spacing: .04em;
}
.source-card .title {
  color: var(--paper);
  font-size: 0.8125rem;
  margin-bottom: 6px;
  line-height: 1.4;
}
.source-card .meta {
  font-family: var(--mono);
  font-size: 0.6562rem;
  color: var(--ink-mid);
  display: flex; justify-content: space-between;
  align-items: center;
}
.source-card .conf {
  background: rgba(143,170,138,.16);
  color: var(--sage);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.625rem;
}

/* -------- Stats -------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 80px;
}
.stat-cell {
  background: var(--ink-2);
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  transition: background .3s ease;
}
.stat-cell:hover { background: var(--ink-3); }
.stat-cell::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 24px; height: 1px;
  background: var(--moon);
}
.stat-cell .num {
  font-family: var(--display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--paper);
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.stat-cell .num .unit {
  font-size: 1.5rem;
  color: var(--moon);
  font-style: italic;
  margin-left: 4px;
}
.stat-cell .lbl {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .08em;
  color: var(--ink-mid);
  text-transform: uppercase;
}

/* -------- Roles -------- */
.roles-wrap {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 36px;
  align-items: start;
}
.role-tabs {
  display: flex; flex-direction: column; gap: 6px;
}
.role-tab {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  font-family: var(--display);
  font-size: 1.375rem;
  letter-spacing: -.012em;
  color: var(--ink-mid);
  transition: all .35s var(--ease);
  position: relative;
  overflow: hidden;
}
.role-tab .em { font-style: italic; }
.role-tab .glyph {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink-mid);
  font-style: normal;
  letter-spacing: .04em;
}
.role-tab:hover { color: var(--paper); background: var(--glass); }
.role-tab.active {
  color: var(--paper);
  background: rgba(239,229,208,.08);
  border-color: rgba(239,229,208,.22);
}
.role-tab.active .em { color: var(--moon); }
.role-tab.active .glyph { color: var(--moon); }
.role-tab::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 0;
  transform: translateY(-50%);
  background: var(--moon);
  transition: height .35s var(--ease);
}
.role-tab.active::before { height: 60%; }

.role-panel {
  position: relative;
  padding: 44px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(21,35,58,.7), rgba(14,26,46,.3));
  min-height: 360px;
  overflow: hidden;
}
.role-content {
  position: absolute;
  inset: 44px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s var(--ease);
  pointer-events: none;
}
.role-content.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.role-q {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.3;
  color: var(--paper);
  margin-bottom: 24px;
  position: relative;
  padding-left: 16px;
}
.role-q::before {
  content: '"';
  position: absolute; left: -8px; top: -16px;
  font-size: 4rem;
  color: var(--moon);
  font-style: normal;
  line-height: 1;
}
.role-a-h {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .12em;
  color: var(--moon);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.role-sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.role-source {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(245,237,217,.025);
}
.role-source .t {
  font-size: 0.7812rem;
  color: var(--paper);
  margin-bottom: 4px;
}
.role-source .m {
  font-family: var(--mono);
  font-size: 0.6562rem;
  color: var(--ink-mid);
  letter-spacing: .04em;
}

/* -------- Security -------- */
.security-card {
  padding: 64px 56px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at top right, rgba(157,182,208,.10), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(239,229,208,.08), transparent 50%),
    rgba(21,35,58,.55);
  position: relative;
  overflow: hidden;
}
.security-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.security-grid h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  margin-bottom: 18px;
}
.cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cert {
  padding: 22px;
  border-radius: 16px;
  background: var(--glass);
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-mid);
  line-height: 1.5;
  transition: all .3s ease;
}
.cert:hover {
  background: rgba(239,229,208,.05);
  border-color: rgba(239,229,208,.22);
  transform: translateY(-2px);
}
.cert .h {
  font-family: var(--display);
  font-style: italic;
  color: var(--moon);
  font-size: 1.1875rem;
  margin-bottom: 8px;
}

/* -------- CTA -------- */
.cta-card {
  padding: 90px 56px;
  border: 1px solid var(--line);
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at center top, rgba(239,229,208,.14), transparent 70%),
    radial-gradient(ellipse 60% 60% at center bottom, rgba(157,182,208,.10), transparent 70%),
    rgba(11,20,36,.6);
  position: relative;
  overflow: hidden;
}
.cta-card h2 {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  letter-spacing: -.025em;
}
.cta-card .lead {
  margin: 24px auto 36px;
  font-size: 1.0625rem;
  color: var(--ink-mid);
  max-width: 580px;
}
.cta-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 32px;
  position: relative; z-index: 2;
}
.cta-foot {
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.7188rem;
  color: var(--ink-mid);
  letter-spacing: .04em;
}
.cta-foot .check {
  color: var(--sage);
  margin-right: 6px;
}

/* CTA: arch motif and orbiting moons */
.cta-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.orbit-ring {
  position: absolute;
  border: 1px dashed rgba(239,229,208,.18);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: spin 60s linear infinite;
}
.orbit-ring.r1 { width: 700px; height: 700px; }
.orbit-ring.r2 { width: 1000px; height: 1000px; animation-duration: 90s; animation-direction: reverse; opacity: .55; }
.orbit-ring.r3 { width: 1300px; height: 1300px; animation-duration: 120s; opacity: .35; }
.orbit-ring::before {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  background: var(--moon);
  border-radius: 50%;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px var(--moon);
}
.orbit-ring.r2::before { background: var(--sky); box-shadow: 0 0 14px var(--sky); top: 50%; left: 100%; }
.orbit-ring.r3::before { background: var(--sage); box-shadow: 0 0 14px var(--sage); top: 100%; left: 50%; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* -------- Footer -------- */
.footer {
  padding: 100px 0 50px;
  border-top: 1px solid var(--line);
  background: rgba(11,20,36,.5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 50px;
  margin-bottom: 60px;
}
.footer-brand p {
  margin-top: 16px;
  font-size: 0.8438rem;
  color: var(--ink-mid);
  max-width: 280px;
}
.footer-col h5 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moon);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 0.8438rem;
  color: var(--ink-mid);
  transition: color .25s ease;
}
.footer-col a:hover { color: var(--paper); }

.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-mid);
  letter-spacing: .04em;
}
.footer-bottom .links { display: flex; gap: 24px; }

/* -------- Reveal animations -------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
[data-delay="1"] { transition-delay: .1s; }
[data-delay="2"] { transition-delay: .2s; }
[data-delay="3"] { transition-delay: .3s; }
[data-delay="4"] { transition-delay: .4s; }
[data-delay="5"] { transition-delay: .5s; }

/* -------- Responsive -------- */
@media (max-width: 1080px) {
  .hero-text { max-width: 460px; }
  .features-grid { grid-template-columns: 1fr; }
  .demo-window { grid-template-columns: 200px 1fr; }
  .demo-aside { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .roles-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .security-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .hero-text { left: 22px; right: 22px; bottom: 60px; max-width: none; }
  h1.hero-title { font-size: clamp(1.75rem, 8vw, 2.375rem); }
  .hero-tagline { font-size: 0.875rem; max-width: 360px; }
  .demo-window { grid-template-columns: 1fr; height: 540px; }
  .demo-side { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .stats { grid-template-columns: 1fr; }
  .role-sources { grid-template-columns: 1fr; }
  .cta-card { padding: 60px 24px; }
  .security-card { padding: 40px 28px; }
  .feature { padding: 28px; }
  .marquee-track { gap: 50px; }
  .logo { font-size: 1.25rem; }
  .scroll-hint { display: none; }
}

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

/* ============================================================
   LANGUAGE TOGGLE — JA / EN bilingual support
   ============================================================ */

/* Hide the inactive language by default */
[data-lang] { display: none; }
body.lang-ja [data-lang="ja"] { display: inline; }
body.lang-en [data-lang="en"] { display: inline; }

/* Block-level versions for elements where inline display would break layout */
[data-lang="block-ja"], [data-lang="block-en"] { display: none; }
body.lang-ja [data-lang="block-ja"] { display: block; }
body.lang-en [data-lang="block-en"] { display: block; }

/* The toggle button */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .12em;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
  margin-right: 6px;
}
.lang-toggle:hover {
  background: rgba(252,252,250,.06);
  border-color: rgba(252,252,250,.22);
}
.lang-toggle .seg {
  transition: color .25s ease;
  color: var(--ink-dim);
  padding: 1px 4px;
}
body.lang-en .lang-toggle .seg-en { color: var(--paper); }
body.lang-ja .lang-toggle .seg-ja { color: var(--paper); }
.lang-toggle .div { color: var(--ink-dim); opacity: .6; }

/* In light tone sections the toggle inverts */
.tone-light .lang-toggle {
  background: rgba(4,17,25,.04);
  border-color: var(--t-line);
}
.tone-light .lang-toggle .seg { color: var(--t-mid); }
body.lang-en .tone-light .lang-toggle .seg-en { color: var(--t-ink); }
body.lang-ja .tone-light .lang-toggle .seg-ja { color: var(--t-ink); }

/* =====================================================================
   LIGHT TONE — alternating cream sections
   Wrap any section in .tone-light to flip it to a #fcfcfa background
   with cypress/navy text. Uses a full-bleed pseudo-element so it works
   regardless of the section's max-width container.
   ===================================================================== */

.tone-light {
  position: relative;

  --t-bg:           #FCFCFA;            /* light page */
  --t-card:         #FFFFFF;            /* light card */
  --t-ink:          #0C1E2E;            /* primary text (dark card tone) */
  --t-text:         #20425B;            /* body — dark blue, calmer than ink */
  --t-mid:          #6F8AA8;            /* muted */
  --t-accent:       #5C1F2A;            /* burgundy accent */
  --t-accent-soft:  #2A4A3E;            /* dark green support */
  --t-warm:         #5C1F2A;            /* burgundy alias */
  --t-line:         rgba(4,17,25,.10);
  --t-line-soft:    rgba(4,17,25,.05);
  --t-glass:        rgba(4,17,25,.03);
}

/* full-bleed cream background that ignores container max-width */
.tone-light::before {
  content: '';
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  top: 0;
  height: 100%;
  background: var(--t-bg);
  z-index: -1;
  pointer-events: none;
}

/* trust strip already had a dark gradient — suppress it */
.tone-light.trust { background: transparent; border-top-color: var(--t-line); border-bottom-color: var(--t-line); }

/* core text colors */
.tone-light h2                  { color: var(--t-ink); }
.tone-light h2 .em              { color: var(--t-accent); }
.tone-light .sub                { color: var(--t-text); }
.tone-light .kicker             { color: var(--t-accent); }
.tone-light .kicker::before     { color: var(--t-mid); }

/* manifesto specifics */
.tone-light .manifesto p              { color: var(--t-text); }
.tone-light .manifesto p .em          { color: var(--t-ink); }
.tone-light .manifesto p .accent      { color: var(--t-accent); }
.tone-light .arch-divider path        { stroke: var(--t-accent); }
.tone-light .arch-divider circle      { fill: var(--t-accent); }

/* trust marquee on cream — black ink for label + logos */
.tone-light .trust-label        { color: #000; font-weight: 500; }
.tone-light .logo               { color: #000; font-family: var(--mono); font-style: normal; font-size: 1.125rem; letter-spacing: .16em; font-weight: 500; }
.tone-light .logo:hover         { color: #000; opacity: .7; }
.tone-light .logo .glyph        { color: #000; }
.tone-light .marquee-track      { gap: 64px; }

/* -------- Hexagon reveal transition -------- */
.hexreveal {
  position: relative;
  width: 100%;
  height: clamp(280px, 38vh, 460px);
  overflow: hidden;
  background: transparent;
  padding: 0;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.hexreveal-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hexreveal-grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: rgba(0,0,0,.18);          /* default stroke colour for hex cells */
  pointer-events: none;
}
/* every hex cell starts un-drawn; its dasharray + dashoffset are set inline by JS,
   then a CSS transition runs the draw + a brief highlight pulse. */
.hex-grid-layer use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition:
    stroke-dashoffset 1.1s cubic-bezier(.22, 1, .3, 1),
    opacity .35s ease,
    stroke .6s ease,
    filter .6s ease;
}
.hex-grid-layer use.lit {
  opacity: 1;
  stroke-dashoffset: 0 !important;
}
.hex-grid-layer use.glow {
  stroke: rgba(0,0,0,.85);
  filter: drop-shadow(0 0 6px rgba(0,0,0,.25));
}
.hex-grid-layer use.dim {
  opacity: .35;
  stroke: rgba(0,0,0,.22);
  filter: none;
}

/* the central highlighted hex that hosts the AskDona logo */
.hex-mark {
  opacity: 0;
  transform-origin: center;
  transform: scale(.85);
  transition: opacity .5s ease, transform .9s cubic-bezier(.22, 1, .3, 1);
}
.hex-mark.show {
  opacity: 1;
  transform: scale(1);
}
.hex-mark-bg {
  fill: rgba(0,0,0,.04);
  stroke: rgba(0,0,0,.85);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hex-mark-stroke {
  fill: none;
  stroke: rgba(0,0,0,.18);
  stroke-width: 8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-origin: center;
  animation: hexMarkPulse 2.4s ease-out 1 forwards;
}
.hex-mark.show .hex-mark-stroke { animation-delay: .2s; }
@keyframes hexMarkPulse {
  0%   { opacity: .6; transform: scale(1); }
  60%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.6); }
}
.hex-mark-logo {
  opacity: 0;
  transition: opacity .8s ease .15s;
}
.hex-mark.show .hex-mark-logo { opacity: 1; }

/* demo wrap — gradient border still works, but soften it */
.tone-light .demo-wrap {
  background: linear-gradient(160deg, rgba(77,104,87,.5), rgba(143,170,138,.45), rgba(157,182,208,.35));
  box-shadow: 0 50px 120px -30px rgba(20,32,55,.25);
}

/* security card on cream */
.tone-light .security-card {
  background:
    radial-gradient(ellipse at top right, rgba(157,182,208,.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(143,170,138,.16), transparent 55%),
    #ffffff;
  border-color: var(--t-line);
  box-shadow: 0 30px 80px -30px rgba(20,32,55,.15);
}
.tone-light .security-card h2       { color: var(--t-ink); }
.tone-light .security-card .sub     { color: var(--t-text); }
.tone-light .security-card .kicker  { color: var(--t-accent); }

/* certificate tiles on cream */
.tone-light .cert {
  background: rgba(14,26,46,.025);
  border-color: var(--t-line);
  color: var(--t-text);
}
.tone-light .cert .h            { color: var(--t-accent); }
.tone-light .cert:hover {
  background: rgba(77,104,87,.06);
  border-color: rgba(77,104,87,.28);
}

/* eyebrow / pulse pills inside light sections */
.tone-light .eyebrow {
  background: rgba(14,26,46,.04);
  border-color: var(--t-line);
  color: var(--t-mid);
}
.tone-light .eyebrow .pulse,
.tone-light .eyebrow .pulse::after { background: var(--t-accent); }

/* if a btn-glass appears in a light section, give it a darker outline */
.tone-light .btn-glass {
  color: var(--t-ink);
  border-color: var(--t-line);
  background: rgba(14,26,46,.03);
}
.tone-light .btn-glass:hover {
  background: rgba(14,26,46,.06);
  border-color: rgba(14,26,46,.18);
}

/* selection on cream */
.tone-light ::selection { background: var(--t-accent); color: #fff; }

/* the cream sections shouldn't pick up the body's grid overlay too aggressively */
.tone-light { isolation: isolate; }

/* ============================================================
   NEW SECTIONS — case studies, FAQ, etc.
   ============================================================ */

.case-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px;
  background: linear-gradient(165deg, rgba(15,28,49,.7), rgba(8,15,28,.4));
  margin-bottom: 22px;
  position: relative;
}
.tone-light .case-card {
  background: linear-gradient(165deg, rgba(252,252,250,.8), rgba(252,252,250,.5));
  border-color: var(--t-line);
}
.case-eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .22em;
  color: var(--moon);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.tone-light .case-eyebrow { color: var(--t-accent); }

.case-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 36px;
  align-items: start;
}
.case-meta strong {
  display: block;
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--paper);
  margin-bottom: 12px;
}
.tone-light .case-meta strong { color: var(--t-ink); }
.case-meta p {
  font-size: 0.875rem;
  color: var(--ink-mid);
  line-height: 1.55;
}
.tone-light .case-meta p { color: var(--t-text); }

.case-body h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--paper);
  margin-bottom: 18px;
}
.case-body h3 em { font-style: italic; color: var(--moon); }
.tone-light .case-body h3 { color: var(--t-ink); }
.tone-light .case-body h3 em { color: var(--t-accent); }
.case-body p {
  font-size: 0.9062rem;
  line-height: 1.6;
  color: var(--ink-mid);
}
.tone-light .case-body p { color: var(--t-text); }

.case-metrics {
  display: flex;
  gap: 28px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.case-metric strong {
  display: block;
  font-family: var(--display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--moon);
  margin-bottom: 6px;
}
.tone-light .case-metric strong { color: var(--t-accent); }
.case-metric span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .04em;
  color: var(--ink-mid);
  text-transform: uppercase;
}
.tone-light .case-metric span { color: var(--t-mid); }

.case-quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--paper);
  border-left: 2px solid var(--moon);
  padding-left: 18px;
  margin: 0;
}
.case-quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .03em;
  color: var(--ink-mid);
}
.tone-light .case-quote { color: var(--t-ink); border-color: var(--t-accent); }
.tone-light .case-quote cite { color: var(--t-mid); }

@media (max-width: 1080px) {
  .case-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* FAQ */
.faq-block {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.tone-light .faq-item { border-color: var(--t-line); }
.faq-q {
  font-family: var(--display);
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--paper);
  font-weight: 400;
  position: relative;
  padding-right: 32px;
}
.faq-q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--moon);
  font-family: var(--mono);
  font-size: 1.375rem;
  line-height: 1;
}
.tone-light .faq-q { color: var(--t-ink); }
.tone-light .faq-q::after { color: var(--t-accent); }
.faq-a {
  margin-top: 12px;
  font-size: 0.9062rem;
  color: var(--ink-mid);
  line-height: 1.6;
}
.tone-light .faq-a { color: var(--t-text); }


/* tag pill (used in WHERE ASKDONA WORKS cards) */
.tag-pill {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 14px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .1em;
  margin-top: 18px;
  color: var(--moon);
  text-transform: uppercase;
}
.tone-light .tag-pill { color: var(--t-accent); }

/* accuracy benchmark visualization */
.benchmark-viz {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(8,15,28,.04);
  border: 1px solid var(--line);
}
.tone-light .benchmark-viz {
  background: rgba(4,17,25,.04);
  border-color: var(--t-line);
}
.benchmark-title {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 4px;
}
.tone-light .benchmark-title { color: var(--t-mid); }
.benchmark-bar {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
}
.bbar-label { color: var(--paper); }
.tone-light .bbar-label { color: var(--t-ink); }
.bbar-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(245,237,217,.08);
  overflow: hidden;
  position: relative;
}
.tone-light .bbar-track { background: rgba(4,17,25,.08); }
.bbar-fill {
  display: block;
  height: 100%;
  background: var(--ink-mid);
  border-radius: 4px;
}
.tone-light .bbar-fill { background: var(--t-mid); }
.bbar-num {
  text-align: right;
  color: var(--moon);
  font-weight: 600;
}
.tone-light .bbar-num { color: var(--t-accent); }
.benchmark-note {
  font-family: var(--mono);
  font-size: 0.6562rem;
  color: var(--ink-mid);
  margin-top: 6px;
}
.tone-light .benchmark-note { color: var(--t-mid); }



@keyframes pollenDrift {
  0%, 100% { transform: translate(0, 0); opacity: 0.7; }
  50%      { transform: translate(8px, -10px); opacity: 1; }
}



/* ============================================================
   v5 — Bumblebee — embedded user SVG, hovering with bob + color cycle
   ============================================================ */

/* bee-flight is a static positioning wrapper (transform set via SVG attribute) */
.scene-svg .bee-flight {
  /* fixed position is set via SVG transform attribute on the element */
}

/* organic vertical bob + tilt — hovers in place
   NOTE: source v18 had orphan keyframe steps with no @keyframes opener.
   Browsers silently dropped this block; PostCSS rejects it. Commented out
   during the Astro port — no element in the body references it. */
/*
20%  { transform: translateY(20px)  rotate(2deg); }
  40%  { transform: translateY(-15px) rotate(4deg); }
  60%  { transform: translateY(8px)   rotate(-2deg); }
  80%  { transform: translateY(-20px) rotate(3deg); }
  100% { transform: translateY(-8px)  rotate(-3deg); }
}
*/

/* drifting pollen specks */
.scene-svg .pollen-layer circle {
  animation: pollenDrift 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.scene-svg .pollen-layer circle:nth-child(2n) { animation-duration: 8s;  animation-delay: -1s; }
.scene-svg .pollen-layer circle:nth-child(3n) { animation-duration: 10s; animation-delay: -3s; }
.scene-svg .pollen-layer circle:nth-child(4n) { animation-duration: 7s;  animation-delay: -2s; }
@keyframes pollenDrift {
  0%, 100% { transform: translate(0, 0); opacity: 0.7; }
  50%      { transform: translate(8px, -10px); opacity: 1; }
}


  50%      { transform: scale(1.015) translateY(-6px); }
}


  to   { transform: translateX(-1600px); }
}


  to   { transform: translateX(-1600px); }
}


/* v6 — 2-layer parallax scroll (twilight + flowers) */
to { transform: translateX(-1600px); } }
to { transform: translateX(-1600px); } }


/* v6 — 3-layer parallax scroll (bee flying forward through garden) */
.scene-svg .bg-scroll-far  { animation: scrollFar  110s linear infinite; will-change: transform; }
.scene-svg .bg-scroll-mid  { animation: scrollMid  45s  linear infinite; will-change: transform; }
.scene-svg .bg-scroll-near { animation: scrollNear 18s  linear infinite; will-change: transform; }
@keyframes scrollFar  { from { transform: translateX(0); } to { transform: translateX(-1600px); } }
@keyframes scrollMid  { from { transform: translateX(0); } to { transform: translateX(-1600px); } }
@keyframes scrollNear { from { transform: translateX(0); } to { transform: translateX(-1600px); } }


/* v6 — bee hovers + periodically descends to visit a flower */
.scene-svg .bee-tilt {
  animation: beeFlightCycle 14s ease-in-out infinite;
  transform-origin: center;
}
@keyframes beeFlightCycle {
  /* Hover phase with subtle bob, ~0-65% of cycle */
  0%, 100% { transform: translate(0, 0)        rotate(-2deg); }
  8%       { transform: translate(2px, -15px)  rotate(2deg); }
  18%      { transform: translate(-2px, 10px)  rotate(3deg); }
  28%      { transform: translate(0, -10px)    rotate(-1deg); }
  40%      { transform: translate(2px, 12px)   rotate(2deg); }
  55%      { transform: translate(-2px, -8px)  rotate(-2deg); }
  /* Descent toward flower ~65-78% */
  68%      { transform: translate(-20px, 180px) rotate(6deg); }
  /* Landing on flower ~78-87% */
  78%      { transform: translate(-40px, 360px) rotate(10deg); }
  85%      { transform: translate(-40px, 365px) rotate(8deg); }
  /* Lift off ~87-100% */
  92%      { transform: translate(-15px, 180px) rotate(-3deg); }
  96%      { transform: translate(-5px, 60px)   rotate(-2deg); }
}

/* ========================================================================
   v8 — cream paper hero w/ ASKDONA wordmark + bee rising into hover
   Replaces (visually) the painterly garden scene and the v7 hero-image.
   ======================================================================== */
.hero--v8 .scene-svg,
.hero--v8 .hero-image { display: none !important; }

.hero--v8 .hero-stage {
  background:
    url("assets/paper-texture.png")
      center center / cover no-repeat,
    #F2E6C8;
}

/* paper-grain layer is no longer needed (the real photo carries the texture)
   — keep an empty stub so we don't have to touch the markup */
.hero--v8 .paper-grain { display: none; }

/* big ASKDONA wordmark — sits between the paper and the bee */
.hero--v8 .askdona-mark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  pointer-events: none;
  font-family: 'Instrument Serif', 'Noto Serif JP', Georgia, serif;
  font-weight: 400;
  font-size: clamp(8.75rem, 21vw, 21.25rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #000;
  text-align: center;
  opacity: 0;            /* hidden until the tiny-bee intro finishes */
  user-select: none;
  /* initial resting position — slightly above center. ASKDONA fades in once
     the tiny bees have crossed the screen, then later (askdonaLift) it floats
     a touch higher to open up room for the title + subtitle below. */
  transform: translateY(-6vh);
  animation:
    askdonaAppear 1s ease 3.0s both,
    askdonaLift   1.1s cubic-bezier(.22, 1, .3, 1) 6.6s both;
}
.hero--v8 .askdona-mark::after {
  content: '';
  display: block;
}
@keyframes askdonaAppear {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes askdonaLift {
  from { transform: translateY(-6vh); }
  to   { transform: translateY(-13vh); }
}

/* -------- Tiny-bee swarm: 5 small bees fly across L→R, weaving smoothly --- */
.hero--v8 .tinybee-swarm {
  position: absolute; inset: 0;
  z-index: 3;        /* above the paper, below the main bee + ASKDONA */
  pointer-events: none;
  overflow: hidden;
}
.hero--v8 .tinybee {
  position: absolute;
  left: 0;
  width: 56px;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.16));
  transform-origin: 50% 50%;
  /* linear timing keeps the horizontal flight pace even (no pulsing).
     The per-bee keyframes carry the up/down weave + subtle banking. */
  animation-fill-mode: both;
  animation-timing-function: linear;
}
/* per-bee variations: vertical band, size, delay, duration, weave pattern.
   The five flights deliberately cross — bees weave between and around
   each other (one rising while another dives, etc.). */
.hero--v8 .tinybee-1 { top: 36%; width: 64px; animation: tinybeeFlyA 3.0s cubic-bezier(.45,.05,.55,.95) 0.0s both; }
.hero--v8 .tinybee-2 { top: 50%; width: 56px; animation: tinybeeFlyB 2.7s cubic-bezier(.45,.05,.55,.95) 0.25s both; }
.hero--v8 .tinybee-3 { top: 44%; width: 70px; animation: tinybeeFlyC 3.2s cubic-bezier(.45,.05,.55,.95) 0.55s both; }
.hero--v8 .tinybee-4 { top: 58%; width: 52px; animation: tinybeeFlyD 2.5s cubic-bezier(.45,.05,.55,.95) 0.9s both; }
.hero--v8 .tinybee-5 { top: 40%; width: 60px; animation: tinybeeFlyE 2.9s cubic-bezier(.45,.05,.55,.95) 1.25s both; }

/* Each keyframe set traces a long sinusoidal weave with big Y amplitude
   (50–90px deltas) so the bees clearly arc up, around, and past each
   other. Many waypoints + a smooth bezier keep the curves buttery. */
@keyframes tinybeeFlyA {
  /* gentle "up over and dip down" arc: starts mid, rises high, falls deep */
  0%   { transform: translate(-18vw,  0px)   rotate(-4deg); opacity: 0; }
  5%   { opacity: 1; }
  18%  { transform: translate(10vw,  -36px)  rotate(6deg); }
  32%  { transform: translate(24vw,  -62px)  rotate(2deg); }
  48%  { transform: translate(42vw,  -18px)  rotate(-5deg); }
  62%  { transform: translate(58vw,   34px)  rotate(-4deg); }
  76%  { transform: translate(76vw,   12px)  rotate(4deg); }
  90%  { transform: translate(96vw,  -22px)  rotate(2deg); }
  96%  { opacity: 1; }
  100% { transform: translate(120vw,  0px)   rotate(0);    opacity: 0; }
}
@keyframes tinybeeFlyB {
  /* opposite phase: starts mid, dives low, swoops high, settles mid */
  0%   { transform: translate(-18vw,  0px)   rotate(4deg);  opacity: 0; }
  5%   { opacity: 1; }
  16%  { transform: translate( 9vw,   40px)  rotate(-5deg); }
  30%  { transform: translate(24vw,   68px)  rotate(-3deg); }
  46%  { transform: translate(40vw,   14px)  rotate(5deg); }
  60%  { transform: translate(58vw,  -42px)  rotate(3deg); }
  74%  { transform: translate(76vw,  -10px)  rotate(-4deg); }
  88%  { transform: translate(96vw,   18px)  rotate(-2deg); }
  96%  { opacity: 1; }
  100% { transform: translate(120vw,  6px)   rotate(0);    opacity: 0; }
}
@keyframes tinybeeFlyC {
  /* deep undulation: bigger zigzag pattern that crosses A and B repeatedly */
  0%   { transform: translate(-18vw,  0px)   rotate(-3deg); opacity: 0; }
  5%   { opacity: 1; }
  14%  { transform: translate( 8vw,  -28px)  rotate(5deg); }
  26%  { transform: translate(20vw,   30px)  rotate(-5deg); }
  40%  { transform: translate(34vw,  -38px)  rotate(6deg); }
  54%  { transform: translate(50vw,   24px)  rotate(-5deg); }
  68%  { transform: translate(66vw,  -34px)  rotate(5deg); }
  82%  { transform: translate(84vw,   16px)  rotate(-4deg); }
  92%  { transform: translate(100vw,  -8px)  rotate(3deg); }
  96%  { opacity: 1; }
  100% { transform: translate(120vw,  0px)   rotate(0);    opacity: 0; }
}
@keyframes tinybeeFlyD {
  /* slow rise then dive then climb — long sweeping arc */
  0%   { transform: translate(-18vw,  0px)   rotate(5deg);  opacity: 0; }
  6%   { opacity: 1; }
  22%  { transform: translate(14vw,   42px)  rotate(-3deg); }
  40%  { transform: translate(32vw,  -22px)  rotate(4deg); }
  56%  { transform: translate(48vw,   38px)  rotate(-3deg); }
  72%  { transform: translate(66vw,  -28px)  rotate(5deg); }
  88%  { transform: translate(88vw,   12px)  rotate(-3deg); }
  96%  { opacity: 1; }
  100% { transform: translate(120vw, -4px)   rotate(0);    opacity: 0; }
}
@keyframes tinybeeFlyE {
  /* tight quick zigzag — feels like the most playful one */
  0%   { transform: translate(-18vw,  0px)   rotate(-4deg); opacity: 0; }
  5%   { opacity: 1; }
  13%  { transform: translate( 8vw,  -22px)  rotate(4deg); }
  25%  { transform: translate(20vw,   24px)  rotate(-5deg); }
  38%  { transform: translate(32vw,  -18px)  rotate(5deg); }
  52%  { transform: translate(46vw,   26px)  rotate(-5deg); }
  66%  { transform: translate(60vw,  -22px)  rotate(4deg); }
  80%  { transform: translate(78vw,   18px)  rotate(-3deg); }
  92%  { transform: translate(98vw,  -10px)  rotate(3deg); }
  96%  { opacity: 1; }
  100% { transform: translate(120vw, -2px)   rotate(0);    opacity: 0; }
}

/* the bee — sits ABOVE ASKDONA, hovers in the middle */
.hero--v8 .bee-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 4;       /* above the .askdona-mark (2), below hero-text (5) */
  pointer-events: none;
}
.hero--v8 .bee-anim {
  width: 80vw;
  max-width: 80vw;
  height: auto;
  display: block;
  transform-origin: 50% 50%;
  animation:
    beeRise  3.2s cubic-bezier(.22, 1, .3, 1) 3.4s both,
    beeHover 5.5s ease-in-out 6.6s infinite;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.18));
}
/* The bee swoops up from below the viewport, briefly overshoots the centered
   position, then settles down low enough that the bottom half of its face is
   cropped off the bottom edge of the hero AND the title + subtitle area
   above stays uncovered. */
@keyframes beeRise {
  0%   { transform: translateY(110vh) rotate(-18deg) scale(.85); opacity: 0; }
  35%  { opacity: 1; }
  60%  { transform: translateY(-12vh) rotate(2deg)  scale(1.02); opacity: 1; }
  100% { transform: translateY(56vh)  rotate(0)     scale(1);    opacity: 1; }
}
@keyframes beeHover {
  0%, 100% { transform: translateY(56vh)    rotate(-1.2deg); }
  25%      { transform: translateY(54.5vh)  rotate(1.6deg); }
  50%      { transform: translateY(57vh)    rotate(-2.4deg); }
  75%      { transform: translateY(53.5vh)  rotate(2.2deg); }
}

/* tone down the hero vignette in v8 so the cream paper stays bright;
   we keep a slight darkening at the bottom for hero-text legibility */
.hero--v8::after {
  background:
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .10) 30%, transparent 60%),
    linear-gradient(to top, rgba(0, 0, 0, .12), transparent 25%) !important;
}
/* first-view type — pure black on cream paper, no drop shadows */
.hero--v8 .hero-title {
  color: #000;
  text-shadow: none;
  white-space: nowrap;
  font-size: clamp(1.25rem, 2.8vw, 2.625rem);
  margin-bottom: 14px;
}
.hero--v8 .hero-title .em { color: #000; }
.hero--v8 .hero-tagline {
  color: rgba(0, 0, 0, .72);
  text-shadow: none;
  white-space: nowrap;
  max-width: none;
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  margin-bottom: 22px;
}
.hero--v8 .hero-tagline .em-soft { color: #000; }
.hero--v8 .hero-ctas .btn-primary {
  background: #000;
  color: #FAF4E0;
  border-color: #000;
}
.hero--v8 .hero-ctas .btn-ghost {
  color: #000;
  border-color: rgba(0, 0, 0, .55);
}

/* v8 — hero-text sits BELOW the ASKDONA wordmark, in the middle of the view.
   It fades in after the bee + ASKDONA lift have finished animating. */
.hero--v8 .hero-text {
  left: 50%;
  right: auto;
  bottom: auto;
  top: clamp(360px, 54vh, 620px);
  transform: translateX(-50%);
  max-width: none;
  width: max-content;
  text-align: center;
  z-index: 6;          /* above the bee */
}
.hero--v8 .hero-tagline {
  margin-left: auto;
  margin-right: auto;
}

/* CTAs sit anchored at the bottom-right of the hero. They wait until the
   title + subtitle + bee have all settled, then quietly fade in while
   sliding up a few pixels into their resting place. */
.hero--v8 .hero-ctas--v8 {
  position: absolute;
  bottom: clamp(28px, 6vh, 68px);
  right: clamp(24px, 5vw, 64px);
  z-index: 5;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  opacity: 0;
  animation: ctaFadeUp 1s cubic-bezier(.22, 1, .3, 1) 8.4s both;
}
@keyframes ctaFadeUp {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* underline accent on .em is positioned within the inline span,
   re-anchor it to the left of the (now centered) word */
.hero--v8 h1.hero-title .em::after { left: 0; }

/* Title + subtitle fade-and-rise into view AFTER the bee has settled and the
   ASKDONA wordmark has lifted slightly. The intersection-observer-driven
   .reveal/.in transition is neutralised here — a delayed CSS animation
   drives the entrance instead, so the timing is independent of scroll. */
.hero--v8 .hero-text .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: none;
  animation: heroTextAppear .9s cubic-bezier(.22, 1, .3, 1) 7.4s both;
}
.hero--v8 .hero-text [data-delay="1"] { animation-delay: 7.7s; }
@keyframes heroTextAppear {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav header — when not scrolled (i.e. sitting over the cream paper hero),
   use dark ink so the wordmark + links read against the bright background */
.nav:not(.scrolled) .brand        { color: rgba(0, 0, 0, .92); }
.nav:not(.scrolled) .nav-links    { color: rgba(0, 0, 0, .74); }
.nav:not(.scrolled) .nav-links a:hover { color: #000; }
.nav:not(.scrolled) .nav-links a::after { background: #000; }
.nav:not(.scrolled) .lang-toggle  { color: rgba(0, 0, 0, .82); border-color: rgba(0, 0, 0, .35); }
.nav:not(.scrolled) .lang-toggle .seg { color: rgba(0, 0, 0, .55); }
.nav:not(.scrolled) body.lang-en .lang-toggle .seg-en,
.nav:not(.scrolled) body.lang-ja .lang-toggle .seg-ja { color: #000; }
.nav:not(.scrolled) .btn-ghost    { color: #000; border-color: rgba(0, 0, 0, .55); }
.nav:not(.scrolled) .btn-primary  { background: #000; color: #FAF4E0; border-color: #000; }
.nav:not(.scrolled) .brand-mark::before { background: #000; box-shadow: 0 0 14px rgba(0,0,0,.25); }
.nav:not(.scrolled) .brand-mark::after  { border-color: rgba(0,0,0,.5); border-right-color: transparent; border-top-color: transparent; }

@media (max-width: 720px) {
  .hero--v8 .hero-title {
    font-size: clamp(0.9375rem, 4.2vw, 1.375rem);
  }
  .hero--v8 .hero-tagline {
    font-size: clamp(0.625rem, 2.6vw, 0.8125rem);
  }
  .hero--v8 .hero-text {
    left: 50%;
    right: auto;
    top: clamp(170px, 32vh, 280px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 96vw;
  }
}


/* v14 hero — kill the inherited .hero::after bottom-left vignette */
.hero.hero--v14::after,
.hero.hero--v14::before {
  background: transparent !important;
  display: none !important;
}

/* ============ Nav with dropdowns (v14/15/16/17) ============ */
.nav-links { align-items: center; }
.nav-links .nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-trigger {
  background: none; border: 0; padding: 4px 0;
  font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .25s ease;
}
.nav-trigger:hover { color: var(--ink, #0E1014); }
.nav-caret {
  font-size: 0.75rem;
  line-height: 1;
  opacity: .7;
  display: inline-block;
  transform: translateY(-1px);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-has-menu:hover .nav-caret,
.nav-has-menu:focus-within .nav-caret { transform: translateY(-1px) rotate(180deg); opacity: 1; }
/* Bridge area below the trigger to keep the menu open when moving down */
.nav-has-menu::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 18px;
  display: block;
  pointer-events: none;
}
.nav-has-menu:hover::after,
.nav-has-menu:focus-within::after { pointer-events: auto; }
.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 296px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .3, 1);
}
.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-menu-item {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  background: #FFFFFF;
  border-radius: 16px;
  color: rgba(14, 16, 20, .82);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 10px 26px -14px rgba(14, 16, 20, .22),
    0 2px 6px -2px rgba(14, 16, 20, .08);
  transition: transform .2s ease, color .2s ease, box-shadow .25s ease;
}
.nav-menu-item:hover {
  color: #0E1014;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 14px 30px -12px rgba(14, 16, 20, .35),
    0 3px 8px -2px rgba(14, 16, 20, .12);
}
.nav-menu-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(14, 16, 20, .55);
  flex-shrink: 0;
  background: rgba(14, 16, 20, .04);
  border-radius: 9px;
  padding: 4px;
}
.nav-menu-icon svg { width: 100%; height: 100%; }

/* keep the dropdowns themselves matching the v14 black-on-light treatment */
body:has(.hero--v14) .nav-trigger { color: #0E1014; }
body:has(.hero--v14) .nav-trigger:hover { color: #0E1014; opacity: .7; }

/* Shift the first JA title line (「探す」時間を、) further to the left */
.hero-v14-title .ja-shift-left {
  display: inline-block;
  transform: translateX(-72px);
}
@media (max-width: 720px) {
  .hero-v14-title .ja-shift-left { transform: translateX(-28px); }
}

/* v18 — make the hero subtitle pure white (with a dark halo so it stays
   readable across both bright and dim frames of the scenic video). */
.hero--v14 .hero-v14-sub {
  color: #FFFFFF;
  text-shadow:
    0 1px 14px rgba(0, 0, 0, .55),
    0 0 28px rgba(0, 0, 0, .35);
}
.hero--v14 .hero-v14-sub .em-soft {
  color: #FFFFFF;
}

/* v18 — white label inside the glass "See it work" button */
.hero--v14 .hero-v14-ctas .btn-glass {
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

/* v18 — lift the hero copy block higher + ensure 'See it work' label is white */
.hero--v14 .hero-v14-copy {
  top: 50% !important;
}
.hero--v14 .hero-v14-ctas .btn-glass,
.hero--v14 .hero-v14-ctas .btn-glass span,
.hero--v14 .hero-v14-ctas .btn-glass [data-lang] {
  color: #FFFFFF !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55) !important;
}

/* ===================================================================
   Hero poster fallback (mobile-only) — added during v18→Astro port.
   The optimized hero.mp4 is fetched only on desktop; on small screens
   we hide the <video> entirely and let the poster <img> stand in.
   =================================================================== */
.hero.hero--v10 .hero-poster-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  pointer-events: none;
  display: none;
}
@media (max-width: 720px) {
  .hero.hero--v10 .hero-video { display: none; }
  .hero.hero--v10 .hero-poster-fallback { display: block; }
}