/* Rizz AI landing
   Layout: black stage, one giant condensed headline per moment, the real app in a real iPhone,
   color only where the app has it (violet CTA card, tone cards, 3D stickers). Mirrors docs/design.md. */
:root {
  --bg: #000000;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --text: #FFFFFF;
  --text-2: rgba(255, 255, 255, .62);
  --text-3: rgba(255, 255, 255, .38);
  --sep: rgba(255, 255, 255, .09);
  --glass: rgba(30, 30, 30, .72);
  --btn-edge: #8E8E93;
  --frame-1: #4A4A4E;
  --frame-2: #1A1A1C;
  --cta-violet: radial-gradient(120% 55% at 50% 0%, rgba(122, 75, 255, .85), rgba(122, 75, 255, 0) 70%),
                linear-gradient(180deg, #5B2EE6, #6A3CF0 45%, #A56CEB 82%, #C98BF2);
  --tone-komik-bg: #1E190C;  --tone-komik-line: rgba(255, 204, 0, .22);   --tone-komik-tag: #FFD23F;
  --tone-flortoz-bg: #21111B; --tone-flortoz-line: rgba(255, 90, 170, .24); --tone-flortoz-tag: #FF6FB5;
  --tone-havali-bg: #16122A;  --tone-havali-line: rgba(150, 110, 255, .30); --tone-havali-tag: #B79BFF;

  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: 20px;
  --maxw: 1320px;
  color-scheme: dark;
}
@media (min-width: 820px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.45 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.display-l {
  font-family: var(--font-display); font-weight: 800; text-transform: none;
  font-size: clamp(52px, 8.4vw, 128px); line-height: 1; letter-spacing: .002em; text-wrap: balance;
}
.lead { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.4; color: var(--text-2); max-width: 32ch; margin-top: 18px; text-wrap: pretty; }
.lead.center { margin-inline: auto; text-align: center; max-width: 40ch; }

/* ---------- buttons ---------- */
.btn-store {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font: 600 17px/1 var(--font-text); letter-spacing: -.01em;
  box-shadow: 0 5px 0 var(--btn-edge);
  transition: transform .12s ease, box-shadow .12s ease;
  will-change: transform;
}
.btn-store svg { width: 17px; height: 20px; fill: currentColor; margin-top: -3px; }
.btn-store:active { transform: translateY(5px); box-shadow: 0 0 0 var(--btn-edge); }
.btn-store.alt { background: var(--surface-2); color: var(--text); box-shadow: 0 5px 0 var(--surface); }
.btn-store.alt:active { box-shadow: 0 0 0 var(--surface); }
.btn-store.alt svg { width: 18px; height: 18px; margin-top: 0; }
.btn-store.alt.on-color { background: rgba(255, 255, 255, .18); box-shadow: 0 5px 0 rgba(40, 10, 100, .28); }
.btn-store.alt.on-color:active { box-shadow: 0 0 0 rgba(40, 10, 100, .28); }
.pill-sm {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px;
  background: var(--text); color: var(--bg); font: 600 14px/1 var(--font-text);
  transition: transform .15s var(--ease);
}
.pill-sm:active { transform: scale(.96); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(60px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.solid {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border-bottom-color: var(--sep);
}
.nav-brand { display: flex; align-items: center; gap: 10px; font: 800 24px/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.nav-brand img { width: 30px; height: 30px; border-radius: 7px; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.lang {
  height: 34px; min-width: 44px; padding: 0 12px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: var(--text-2);
  font: 600 13px/1 var(--font-text); letter-spacing: .04em;
}
.lang:hover { color: var(--text); border-color: rgba(255, 255, 255, .4); }

/* ---------- phone (all inner sizes in "design px" = em) ---------- */
.phone {
  --w: 328px;
  position: relative; width: var(--w); height: calc(var(--w) * 703 / 328);
  font-size: calc(var(--w) / 328);
  border-radius: 58em; background: #000;
  box-shadow: 0 0 0 2.5em var(--frame-1), 0 0 0 4em var(--frame-2), inset 0 0 0 1em #222;
}
.screen { position: absolute; inset: 9em; border-radius: 49em; overflow: hidden; background: #000; isolation: isolate; transform: translateZ(0); }
.screen .shot, .scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.island { position: absolute; top: 8.5em; left: 50%; transform: translateX(-50%); width: 88em; height: 26em; border-radius: 13em; background: #000; z-index: 6; }
.sb {
  position: absolute; inset: 0 0 auto 0; height: 3.26em; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; padding: .3em 1.93em 0 2.52em;
  background: #000; color: #fff; font: 600 13.5em/1 var(--font-text);
}
.sb > span:first-child { font-size: 1em; letter-spacing: -.01em; }
.sb-r { display: flex; align-items: center; gap: .37em; }
.sb-r i { display: block; background: center / contain no-repeat; }
.sig { width: 1.26em; height: .815em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'%3E%3Cg fill='%23fff'%3E%3Crect y='7' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='1'/%3E%3Crect x='9' y='2.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' width='3' height='11' rx='1'/%3E%3C/g%3E%3C/svg%3E"); }
.wifi { width: 1.11em; height: .815em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath fill='%23fff' d='M7.5 2.2c2.1 0 4 .8 5.4 2.1l1.1-1.1C12.3 1.6 10 .6 7.5.6S2.7 1.6 1 3.2l1.1 1.1C3.5 3 5.4 2.2 7.5 2.2zm0 3.2c1.2 0 2.3.4 3.1 1.2l1.1-1.1C10.6 4.4 9.1 3.8 7.5 3.8s-3.1.6-4.2 1.7l1.1 1.1c.8-.8 1.9-1.2 3.1-1.2zm0 3.1c-.5 0-1 .2-1.3.6l1.3 1.3 1.3-1.3c-.3-.4-.8-.6-1.3-.6z'/%3E%3C/svg%3E"); }
.bat { width: 1.93em; height: .89em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Crect x='.5' y='.5' width='22' height='11' rx='3.5' fill='none' stroke='%23fff' stroke-opacity='.4'/%3E%3Crect x='2' y='2' width='19' height='8' rx='2' fill='%23fff'/%3E%3Crect x='23.5' y='4' width='1.6' height='4' rx='.8' fill='%23fff' fill-opacity='.4'/%3E%3C/svg%3E"); }

/* ---------- stickers ---------- */
.stk, .sk {
  position: absolute; pointer-events: none; height: auto;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55));
}
@keyframes float { from { transform: translateY(-7px); } to { transform: translateY(7px); } }

/* ---------- hero ---------- */
.hero {
  max-width: 1440px; margin-inline: auto;
  padding: calc(104px + env(safe-area-inset-top, 0px)) var(--gutter) 40px;
}
.hero-title {
  font-family: var(--font-display); font-weight: 800; line-height: .96; letter-spacing: .002em;
  font-size: var(--fs, 14.6vw); white-space: nowrap; margin-inline: -.02em;
}
.hero-title .line { display: block; overflow: hidden; padding: .16em 0 .12em; margin: -.16em 0 -.12em; }
.hero-title .line-in { display: inline-block; transition: transform 1.15s var(--ease); }
.js .hero:not(.in) .line-in { transform: translateY(104%); }
.hero-title .line:nth-child(2) .line-in { transition-delay: .09s; }

.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4vw; align-items: start; }
.hero-copy { padding-top: 36px; max-width: 540px; transition: opacity .9s var(--ease) .35s, transform 1.1s var(--ease) .35s; }
.js .hero:not(.in) .hero-copy { opacity: 0; transform: translateY(24px); }
.hero-sub { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.38; color: var(--text-2); text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 30px; }
.hero-note { font-size: 14px; color: var(--text-3); }

.hero-stage {
  --w: clamp(250px, 23vw, 340px);
  position: relative; width: var(--w); margin-right: 5vw;
  margin-top: calc(var(--fs, 14.6vw) * -.96 - 6px);
  transition: opacity 1s var(--ease) .15s, transform 1.4s var(--ease) .15s;
}
.hero-stage.no-lift { margin-top: 28px; }
.js .hero:not(.in) .hero-stage { opacity: 0; transform: translateY(90px); }
.hero-phone { --w: 100%; width: 100%; height: auto; aspect-ratio: 328 / 703; font-size: calc(var(--pw, 300px) / 328); transform-origin: 50% 100%; will-change: transform; }
.hero-stage .stk {
  left: var(--x); top: var(--y); width: var(--w); rotate: var(--r);
  translate: var(--px, 0px) var(--py, 0px);
  scale: 1; transition: scale .9s var(--spring) calc(.75s + var(--d));
  animation: float 5.5s ease-in-out infinite alternate;
  z-index: 3;
}
.hero-stage .stk:nth-of-type(2n) { animation-duration: 6.4s; animation-delay: -2s; }
.js .hero:not(.in) .hero-stage .stk { scale: 0; }

@media (max-width: 819px) {
  .hero { padding-top: calc(92px + env(safe-area-inset-top, 0px)); }
  .hero-body { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-top: 22px; }
  .hero-stage, .hero-stage.no-lift { --w: min(66vw, 290px); margin: 40px auto 0; }
  .hero-cta { margin-top: 24px; }
}

/* ---------- manifest ---------- */
.manifest { max-width: 1160px; margin-inline: auto; padding: 22vh var(--gutter) 26vh; }
.manifest-text {
  font: 700 clamp(30px, 5vw, 68px)/1.12 var(--font-head); letter-spacing: -.025em; text-wrap: pretty;
}
.manifest-text .w { color: rgba(255, 255, 255, var(--a, 1)); transition: color .25s linear; }

/* ---------- showcase ---------- */
.show { position: relative; height: 620vh; height: 620svh; }
.show-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6vw;
}
.show-copy { min-width: 0; }
.bars { display: flex; gap: 6px; max-width: 440px; margin-bottom: 30px; }
.bar { flex: 1; height: 22px; padding: 0; border: 0; background: none; position: relative; }
.bar::before, .bar i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.bar::before { background: rgba(255, 255, 255, .18); }
.bar i { background: var(--text); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.chapters { display: grid; }
.chapter { grid-area: 1 / 1; transition: opacity .45s ease, transform .8s var(--ease); }
.chapter:not(.on) { opacity: 0; transform: translateY(26px); pointer-events: none; }
.chapter.on { transition-delay: .08s; }
.ch-tab { font: 600 13px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; }
.ch-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 7.2vw, 116px); line-height: 1; letter-spacing: .002em; }
.ch-s { margin-top: 20px; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.4; color: var(--text-2); max-width: 30ch; }
.show-device { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }
.show-phone { flex: none; }
.scr { position: absolute; inset: 0; will-change: transform; visibility: hidden; }
.scr::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.scr.mid { box-shadow: -24em 0 48em rgba(0, 0, 0, .55); }
.show-stk { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.sk { scale: 0; transition: scale .35s ease; }
.sk.on { scale: 1; transition: scale .8s var(--spring) .1s; }
.sk.on.b { transition-delay: .22s; }

@media (max-width: 819px) {
  .show-stage {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    align-items: start; row-gap: 8px;
    padding-top: calc(76px + env(safe-area-inset-top, 0px)); padding-bottom: 28px;
  }
  .bars { margin-bottom: 18px; max-width: none; }
  .ch-tab { display: none; }
  .ch-h { font-size: clamp(36px, 10.4vw, 54px); }
  .ch-s { margin-top: 10px; font-size: 15px; }
  .show-device { align-items: center; }
}

/* ---------- tones ---------- */
.tones {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6vw; align-items: center;
  padding-block: 18vh 14vh;
}
.tones-demo { position: relative; max-width: 480px; width: 100%; justify-self: center; padding-top: 30px; }
.tone-big { position: absolute; right: -14px; top: -38px; width: 118px; rotate: 12deg; z-index: 2; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
.tone-big.pop { animation: pop .7s var(--spring); }
@keyframes pop { 0% { scale: .2; rotate: -30deg; } 100% { scale: 1; rotate: 12deg; } }
.in-label { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.in-msg { display: inline-block; background: var(--surface-2); padding: 11px 16px; border-radius: 20px; font-size: 17px; max-width: 80%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px 0 10px;
  border: 0; border-radius: 999px; background: var(--surface); color: var(--text);
  font: 600 15px/1 var(--font-text); transition: background-color .25s ease, color .25s ease, transform .15s var(--ease);
}
.chip img { width: 24px; height: 24px; object-fit: contain; }
.chip:active { transform: scale(.96); }
.chip[aria-selected="true"] { background: var(--text); color: var(--bg); }
.reply {
  --tbg: var(--tone-komik-bg); --tline: var(--tone-komik-line); --ttag: var(--tone-komik-tag);
  border-radius: 28px; padding: 20px 20px 18px; background: var(--tbg); border: 1px solid var(--tline);
  transition: background-color .5s ease, border-color .5s ease;
}
.reply[data-tone="flortoz"] { --tbg: var(--tone-flortoz-bg); --tline: var(--tone-flortoz-line); --ttag: var(--tone-flortoz-tag); }
.reply[data-tone="havali"] { --tbg: var(--tone-havali-bg); --tline: var(--tone-havali-line); --ttag: var(--tone-havali-tag); }
.reply-tag { display: flex; align-items: center; gap: 8px; font: 600 15px/1 var(--font-text); color: var(--ttag); transition: color .5s ease; }
.reply-tag img { width: 24px; height: 24px; object-fit: contain; }
.reply-text { font: 500 clamp(19px, 1.8vw, 23px)/1.38 var(--font-text); letter-spacing: -.01em; margin: 14px 0 20px; min-height: 2.76em; transition: opacity .2s ease, filter .2s ease, transform .2s ease; }
.reply-text.swap { opacity: 0; filter: blur(6px); transform: translateY(6px); }
.reply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.copy {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--text); color: var(--bg); font: 600 16px/1 var(--font-text); transition: transform .15s var(--ease);
}
.copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.copy:active, .heart:active { transform: scale(.94); }
.heart { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .1); transition: transform .15s var(--ease); }
.heart svg { width: 21px; height: 21px; fill: none; stroke: var(--text); stroke-width: 1.8; transition: fill .2s ease; }
.heart[aria-pressed="true"] svg { fill: var(--text); animation: beat .5s var(--spring); }
@keyframes beat { 0% { scale: .6; } 100% { scale: 1; } }
.mini { font-size: 13px; color: var(--text-2); padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
@media (max-width: 819px) {
  .tones { grid-template-columns: minmax(0, 1fr); row-gap: 48px; padding-block: 14vh 10vh; }
  .tone-big { width: 92px; right: -4px; top: -26px; }
}

/* ---------- steps ---------- */
.steps { padding-block: 12vh; }
.step-list { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.step { position: relative; background: var(--surface); border-radius: 28px; padding: 28px; min-height: 320px; display: flex; flex-direction: column; transition-delay: calc(var(--i, 0) * 90ms); }
.step img { width: 104px; height: 104px; object-fit: contain; margin-bottom: auto; transition: transform .7s var(--spring); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5)); }
.step:hover img { transform: rotate(-10deg) scale(1.08); }
.step-n { position: absolute; top: 20px; right: 26px; font: 800 84px/1 var(--font-display); color: var(--surface-2); }
.step h3 { font: 700 22px/1.2 var(--font-head); letter-spacing: -.01em; margin-top: 40px; }
.step p { font-size: 15px; line-height: 1.45; color: var(--text-2); margin-top: 8px; }
@media (max-width: 819px) {
  .step-list { grid-template-columns: minmax(0, 1fr); }
  .step { min-height: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 20px; }
  .step img { width: 76px; height: 76px; grid-row: span 2; margin: 0; }
  .step h3 { margin-top: 0; font-size: 19px; }
  .step p { margin-top: 4px; grid-column: 2; }
  .step { padding-right: 52px; }
  .step-n { font-size: 48px; top: 14px; right: 18px; }
  .mini + .mini { display: none; }
}

/* ---------- platforms ---------- */
.platforms { padding-block: 10vh 14vh; }
.plat-list { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-direction: column; align-items: center; }
.plat-list li {
  font: 800 clamp(56px, 12.5vw, 184px)/.9 var(--font-display); letter-spacing: .005em;
  color: rgba(255, 255, 255, .13); transition: color .45s ease;
}
.plat-list li.on { color: var(--text); }
.plat-list li { position: relative; }
.app-ic {
  position: absolute; left: var(--ix, 70%); top: var(--iy, -30%); width: .62em; height: .62em; z-index: 1;
  border-radius: 22%; rotate: var(--ir, 12deg); scale: 0; pointer-events: none;
  filter: drop-shadow(0 .06em .1em rgba(0, 0, 0, .55));
  transition: scale .25s ease;
}
.plat-list li.on .app-ic { scale: 1; transition: scale .7s var(--spring); }

/* ---------- final CTA ---------- */
.final { padding-bottom: 40px; }
.cta-card {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 36px; background: var(--cta-violet);
  min-height: clamp(660px, 92vh, 880px);
  padding: 64px 24px 0; text-align: center;
}
.cta-head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta-title { font: 800 clamp(64px, 15vw, 240px)/.95 var(--font-display); letter-spacing: .002em; white-space: nowrap; display: inline-block; }
.cta-sub { margin-top: 16px; font-size: clamp(17px, 1.6vw, 21px); color: rgba(255, 255, 255, .82); }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.pit-hint { margin-top: 26px; font: 500 13px/1 var(--font-text); color: rgba(255, 255, 255, .7); display: inline-flex; gap: 6px; align-items: center; }
.pb {
  position: absolute; left: 0; top: 0; z-index: 3; cursor: grab; touch-action: none;
  filter: drop-shadow(0 12px 14px rgba(40, 10, 90, .45)); will-change: transform; user-select: none;
}
.pb:active { cursor: grabbing; }
@media (max-width: 819px) {
  .cta-card { border-radius: 32px; padding-top: 52px; min-height: 640px; }
  .cta-card .btn-store { padding: 0 22px; font-size: 16px; }
}

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-block: 28px 48px; border-top: 1px solid var(--sep); margin-top: 24px; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand img { width: 40px; height: 40px; border-radius: 10px; }
.foot-brand strong { display: block; font: 800 20px/1 var(--font-display); text-transform: uppercase; }
.foot-brand span { font-size: 13px; color: var(--text-3); }
.foot-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-3); }
.foot-meta > * { white-space: nowrap; }
.foot-meta a:hover { color: var(--text); }

/* ---------- reveal ---------- */
.rv { transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.rv.pre { opacity: 0; transform: translateY(44px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- logo ---------- */
.nav-brand img.nav-logo { width: auto; height: 44px; border-radius: 0; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.foot-brand img.foot-logo { width: auto; height: 56px; border-radius: 0; }

/* ---------- what is (definition + facts) ---------- */
.about { padding-block: 10vh 4vh; }
.about-p { font-size: clamp(19px, 1.9vw, 26px); line-height: 1.45; color: var(--text); max-width: 46ch; margin-top: 22px; text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 40px 0 0; }
.facts > div { background: var(--surface); border-radius: 20px; padding: 18px 20px; }
.facts dt { font: 600 12px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.facts dd { margin: 8px 0 0; font-size: 16px; line-height: 1.4; color: var(--text); }

/* ---------- FAQ ---------- */
.faq { padding-block: 8vh 10vh; }
.faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.qa { background: var(--surface); border-radius: 20px; padding: 0 22px; }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: 700 18px/1.3 var(--font-head); margin: 0; }
.qa summary::after { content: "+"; flex: none; font: 400 28px/1 var(--font-text); color: var(--text-2); transition: transform .3s var(--spring, ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 70ch; }
.faq-upd { margin-top: 18px; font-size: 13px; color: var(--text-3); }
@media (max-width: 600px) { .qa summary h3 { font-size: 16px; } .nav-brand img.nav-logo { height: 38px; } }