/* ═══════════════════════════════════════════════════════════════════
   Sakaloz — public site design system (Build 8)
   ONE token file. If a value exists here, no HTML file may repeat the hex.
   Fonts self-hosted (3 weights per family). Motion: three curves —
   two for UI, one symmetric ease for distance-staggered group reveals.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted, /assets/fonts) ───────────────────────────── */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/cormorant-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); }

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  color-scheme: light;             /* fixed palette — no UA dark theming of canvas/controls */
  /* BRAND */
  --wine: #722F37;
  --wine-50:  #F7EDEE;
  --wine-100: #EED8DB;
  --wine-200: #DDB2B7;
  --wine-300: #C98A92;
  --wine-400: #A95862;
  --wine-500: #722F37;
  --wine-600: #5E262D;
  --wine-700: #4A1E24;
  --wine-800: #36161A;
  --wine-900: #241013;
  --coral: #D4956A;
  --coral-100: #F6E6DA;
  --coral-200: #ECCDB4;
  --coral-400: #DFA987;
  --coral-500: #D4956A;
  --coral-600: #C27F52;
  --coral-700: #A36741;
  --coral-800: #7E4E2F;      /* darkest coral — the only coral that passes AA on paper */
  --coral-900: #653D24;      /* hover for coral text on paper: darker, never lighter */
  --cream: #F7E7CE;
  /* PAPER — warm neutrals, NEVER pure white */
  --paper: #F6EBD8;
  --paper-100: #F1E3CC;
  --paper-200: #EAD9BE;
  /* DARK set */
  --night: #1A0B0E;        /* wine-black, not neutral black */
  --night-soft: #241215;
  --night-card: #2E171B;
  --night-rgb: 26, 11, 14;        /* = --night, for glass rgba() */
  --night-card-rgb: 46, 23, 27;   /* = --night-card */
  --night-border: rgba(247, 231, 206, 0.10);
  /* SEMANTIC (light default; dark sections override) */
  --bg: var(--paper);
  --surface: var(--paper-100);
  --ink: var(--wine-800);
  --ink-muted: #5C4145;             /* SOLID — was rgba(54,22,26,.66): faint, and alpha composed differently per surface */
  --heading: var(--wine-600);      /* headings read as wine on paper */
  --border: rgba(114, 47, 55, 0.20);
  --accent: var(--coral);
  --accent-ink: var(--wine-800);
  --success: #4CAF50;
  /* RGB triplets for rgba() glows */
  --coral-rgb: 212, 149, 106;
  --wine-rgb: 114, 47, 55;
  --cream-rgb: 247, 231, 206;
  /* MOTION — exactly two curves */
  --ease-out-soft: cubic-bezier(0.25, 0.1, 0, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-travel: ease-in-out;      /* symmetric — travel-staggered groups only */
  --dur-travel: 1.5s;
  --dur-reveal: 560ms;
  --dur-card: 240ms;
  --dur-feature: 400ms;
  /* RADII */
  --radius-card: 20px;
  --radius-bento: 28px;
  --radius-pill: 999px;
  /* TYPE */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Two-voice headline (one font, two voices): sizes are RELATIVE to the
     headline's own scale slot (.h1/.h2), so one class works at both. The
     voice line is ~70% larger than the base line (1.02 / 0.6 = 1.7). */
  --voice-base: 0.6em;
  --voice-lg: 1.02em;
  /* LAYOUT — identical vertical rhythm on every section */
  --section-pad: clamp(72px, 10vw, 128px);
  --container: 1120px;
  /* Footer wordmark reveal: how much page-bottom the footer reserves for
     the fixed wordmark to be uncovered into. */
  --footer-parallax-height: clamp(190px, 26vw, 400px);
  --gutter: clamp(20px, 4vw, 32px);
}

/* Dark + deep section themes flip the semantic set */
.s-dark {
  --bg: var(--night);
  --surface: var(--night-card);
  --ink: var(--cream);
  --heading: var(--cream);
  --ink-muted: #C9B7A4;            /* SOLID cream-muted on dark */
  --border: var(--night-border);
  --accent-ink: var(--night);
}
.s-deep {
  --bg: var(--wine-700);
  --surface: rgba(247, 231, 206, 0.06);
  --ink: var(--cream);
  --heading: var(--cream);
  --ink-muted: #D3BEAD;            /* SOLID — cream .78 pre-composited over the deep wine */
  --border: rgba(247, 231, 206, 0.16);
  --accent-ink: var(--wine-800);
}

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[dir="ltr"] { unicode-bidi: isolate; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* ── Section shell — every section: same padding, isolation, overflow ── */
.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--section-pad) 0;
  background: var(--bg);
  color: var(--ink);
}
.section > .container { position: relative; z-index: 2; }
/* Dark beats are DEEP WINE, not generic black: a wine bloom from the top corner + a faint answer at the foot */
.section.s-dark {
  background-image:
    radial-gradient(120% 90% at 12% -10%, rgba(var(--wine-rgb), .42), transparent 58%),
    radial-gradient(80% 60% at 100% 110%, rgba(var(--wine-rgb), .22), transparent 60%);
}
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head.left { margin-inline: 0; text-align: start; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wine); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.s-dark .eyebrow, .s-deep .eyebrow { color: var(--accent); }
.h1 { font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: 1.18; letter-spacing: -0.02em; }
.h2 { font-size: clamp(2.1rem, 4.2vw, 3.25rem); line-height: 1.18; }
.h3 { font-size: 1.35rem; line-height: 1.3; }
.h1, .h2, .h3 { color: var(--heading); }
.subline { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.65; color: var(--ink-muted); max-width: 640px; }
.section-head .subline { margin-inline: auto; margin-top: 16px; }
.section-head.left .subline { margin-inline: 0; }
.em { color: var(--wine); font-style: italic; }
.s-dark .em, .s-deep .em { color: var(--accent); }

/* ── Decorative layers (never touch layout / scroll width) ───────── */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Grain: inline SVG feTurbulence, zero network cost */
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  /* No blend modes here: iOS WebKit resolves them against the wrong backdrop and
     washes every dark section out to rosy grey (verified on the iOS 26 simulator,
     Build 12). For a black-alpha noise texture, multiply — and overlay on dark —
     compose identically to normal blending, so this is pixel-identical on desktop. */
  opacity: .06;
}
.s-dark.grain::after, .s-deep.grain::after { opacity: .05; }
/* Ambient orbs — mutually-prime durations so they never resync */
.orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  will-change: transform; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(var(--coral-rgb), .55), rgba(var(--coral-rgb), 0) 70%);
}
.orb.wine { background: radial-gradient(circle at 30% 30%, rgba(var(--wine-rgb), .75), rgba(var(--wine-rgb), 0) 70%); }
.orb.cream { background: radial-gradient(circle at 30% 30%, rgba(var(--cream-rgb), .45), rgba(var(--cream-rgb), 0) 70%); }
.orb-1 { width: 520px; height: 520px; top: -160px; inset-inline-start: -140px; animation: orb-a 22s ease-in-out infinite alternate; }
.orb-2 { width: 440px; height: 440px; bottom: -180px; inset-inline-end: -120px; animation: orb-b 28s ease-in-out infinite alternate; }
.orb-3 { width: 360px; height: 360px; top: 30%; inset-inline-end: 18%; animation: orb-c 26s ease-in-out infinite alternate; }
@keyframes orb-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(60px, 40px, 0) scale(1.08); } }
@keyframes orb-b { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-50px, -60px, 0) scale(1.06); } }
@keyframes orb-c { from { transform: translate3d(0,0,0); } to { transform: translate3d(-40px, 50px, 0); } }
/* VINE — the Sakaloz grapevine (inline <symbol id="vine">, instanced with <use>). Decorative only:
   absolute inside the section (isolation + overflow:hidden), behind the container, pointer-events none.
   Colour = currentColor: wine on paper, cream on dark. .draw = one-time stroke draw-in (hero only). */
.vine {
  position: absolute; z-index: 0; pointer-events: none; overflow: visible;
  width: clamp(300px, 54vw, 760px); aspect-ratio: 800 / 360; height: auto;
  color: var(--wine); opacity: .30;
}
.s-dark .vine, .s-deep .vine { color: var(--cream); opacity: .20; }
.vine.bl { inset-inline-start: -3%; bottom: -4%; }
.vine.br { inset-inline-end: -3%; bottom: -4%; }
.vine.tl { inset-inline-start: -4%; top: -6%; }
.vine.tr { inset-inline-end: -4%; top: -6%; }
.vine.flip { transform: scaleX(-1); }
.vine.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vine-draw 2400ms var(--ease-out-soft) 400ms forwards; }
@keyframes vine-draw { to { stroke-dashoffset: 0; } }

/* Gradient text — never animate filter:blur on this (WebKit stops repainting) */
.grad {
  background: linear-gradient(120deg, var(--cream) 0%, var(--coral-400) 45%, var(--coral) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s-light .grad, .s-paper .grad { background-image: linear-gradient(120deg, var(--wine-700) 0%, var(--wine) 45%, var(--coral-600) 100%); }
/* Glass */
.glass { background: rgba(var(--cream-rgb), .06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); }
/* Glow — 3 layers, negative spread so the blur stays contained */
.glow { box-shadow: 0 0 0 1px rgba(var(--coral-rgb), .2), 0 10px 40px -10px rgba(var(--coral-rgb), .5), 0 0 80px -20px rgba(var(--coral-rgb), .4); }

/* ── Store badges — official proportions (icon + two-line label), Sakaloz palette.
   Night surface like the real badges, cream content, coral hover lift. Links are
   filled from STORE_URLS in site.js; the markup fallback carries the same URL. ── */
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 22px 9px 16px;
  border-radius: 14px; background: var(--night); color: var(--cream);
  border: 1px solid rgba(var(--cream-rgb), .16);
  transition: transform var(--dur-card) var(--ease-out-soft), box-shadow var(--dur-card) var(--ease-out-soft), border-color var(--dur-card) var(--ease-out-soft);
}
.store-badge:hover { transform: translateY(-2px); border-color: rgba(var(--coral-rgb), .55); box-shadow: 0 12px 34px -14px rgba(var(--coral-rgb), .55); }
.store-badge .sb-ic { width: 26px; height: 26px; flex: none; fill: var(--cream); }
.store-badge .sb-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
.store-badge .sb-txt small, .store-badge .sb-txt b { white-space: nowrap; }
.store-badge .sb-txt small { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(var(--cream-rgb), .72); }
.store-badge .sb-txt b { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
/* The download band: generous badges, official "white badge on dark" convention
   (cream surface, night content), a calm staggered breathe, and press feedback. */
.store-badges.lg { gap: 18px; margin-top: 34px; }
.store-badges.lg .store-badge { min-height: 66px; padding: 12px 28px 12px 22px; border-radius: 16px; }
.store-badges.lg .sb-ic { width: 30px; height: 30px; }
.store-badges.lg .sb-txt small { font-size: 11px; }
.store-badges.lg .sb-txt b { font-size: 19px; }
.s-dark .store-badge, .s-deep .store-badge { background: var(--cream); color: var(--night); border-color: rgba(var(--wine-rgb), .14); }
.s-dark .store-badge .sb-ic, .s-deep .store-badge .sb-ic { fill: var(--night); }
.s-dark .store-badge .sb-txt small, .s-deep .store-badge .sb-txt small { color: rgba(var(--wine-rgb), .70); }
.s-dark .store-badge:hover, .s-deep .store-badge:hover { border-color: rgba(var(--coral-rgb), .75); }
.store-badge.pulse { animation: badge-breathe 3.8s var(--ease-out-soft) infinite; }
.store-badge.pulse:nth-of-type(2) { animation-delay: -1.6s; }   /* never beat in unison */
.store-badge.pulse:hover, .store-badge.pulse:focus-visible { animation: none; }
.store-badge:active { animation: none; transform: scale(.96); transition-duration: 140ms; }
@keyframes badge-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(var(--coral-rgb), .18), 0 10px 30px -16px rgba(var(--coral-rgb), .34); }
  50% { transform: scale(1.012); box-shadow: 0 0 0 1px rgba(var(--coral-rgb), .40), 0 14px 44px -14px rgba(var(--coral-rgb), .55), 0 0 60px -18px rgba(var(--coral-rgb), .40); }
}

/* Platform-aware ordering: the visitor's own store leads (set on <html> by site.js) */
html[data-platform="apple"] .store-badge[data-store="play"],
html[data-platform="play"] .store-badge[data-store="apple"] { order: 2; }

/* Inline store links in running text: coral family, AA on paper (coral-800 5.5:1) */
.store-inline { color: var(--coral-800); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(var(--coral-rgb), .55); text-underline-offset: 3px; transition: color var(--dur-card) var(--ease-out-soft); }
.store-inline:hover { color: var(--coral-900); text-decoration-color: currentColor; }
.s-dark .store-inline, .s-deep .store-inline { color: var(--coral-400); }

/* ── Buttons — three roles, escalating intimacy ───────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap;
  transition: transform var(--dur-card) var(--ease-out-soft), box-shadow var(--dur-card) var(--ease-out-soft), background-color var(--dur-card) var(--ease-out-soft), border-color var(--dur-card) var(--ease-out-soft), color var(--dur-card) var(--ease-out-soft);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--coral); color: var(--wine-900); box-shadow: 0 0 0 1px rgba(var(--coral-rgb), .2), 0 10px 40px -10px rgba(var(--coral-rgb), .5), 0 0 80px -20px rgba(var(--coral-rgb), .4); }
.btn-primary:hover { background: var(--coral-400); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--coral-rgb), .3), 0 14px 44px -10px rgba(var(--coral-rgb), .6), 0 0 90px -20px rgba(var(--coral-rgb), .5); }
/* Download icon (hero "Get the app"): points at the action, not the neighbour */
.btn-primary .dl { width: 18px; height: 18px; transition: transform var(--dur-card) var(--ease-out-soft); }
.btn-primary:hover .dl { transform: translateY(2px); }
/* One thing on screen breathes: a slow coral glow on the primary app CTA.
   transform + box-shadow only; hover replaces it; reduced-motion kills it. */
.btn-pulse { animation: cta-breathe 3.4s var(--ease-out-soft) infinite; }
.btn-pulse:hover, .btn-pulse:focus-visible { animation: none; }
@keyframes cta-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(var(--coral-rgb), .22), 0 10px 34px -14px rgba(var(--coral-rgb), .40); }
  50% { transform: scale(1.015); box-shadow: 0 0 0 1px rgba(var(--coral-rgb), .42), 0 12px 44px -12px rgba(var(--coral-rgb), .62), 0 0 56px -14px rgba(var(--coral-rgb), .45); }
}
.btn-primary .arrow { transition: transform var(--dur-card) var(--ease-out-soft); }
.btn-primary:hover .arrow { transform: translateX(3px); }
.btn-secondary { border: 1.5px solid var(--border); color: var(--ink); background: transparent; }
.btn-secondary:hover { border-color: var(--wine); color: var(--wine); transform: translateY(-2px); }
.s-dark .btn-secondary:hover, .s-deep .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.s-light .btn-secondary, .s-paper .btn-secondary { border-color: rgba(var(--wine-rgb), .28); }
.btn-tertiary { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); padding: 8px 4px; min-height: 44px; border-bottom: 1px solid transparent; transition: color var(--dur-card) var(--ease-out-soft), border-color var(--dur-card) var(--ease-out-soft); }
.btn-tertiary:hover { color: var(--wine); border-bottom-color: var(--wine); }
.s-dark .btn-tertiary:hover, .s-deep .btn-tertiary:hover { color: var(--accent); border-bottom-color: var(--accent); }
.btn-tertiary svg { width: 16px; height: 16px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.cta-row.center { justify-content: center; }

/* ── Chips (objection strip) ─────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border);
  font-weight: 600; font-size: 14px; color: var(--ink);
}
.chip svg { width: 16px; height: 16px; color: var(--wine); flex: none; }
.s-dark .chip svg, .s-deep .chip svg { color: var(--accent); }

/* ── Category ticker — constant-SPEED marquee (JS writes one number) ──
   A thin wine band of partner categories: proves variety without claiming
   a count. Every copy of the content runs the same infinite animation; when
   one copy has travelled its own width + the gap, the next sits exactly
   where it started — seamless, no clone-swapping. JS only measures the
   content and solves duration = (width + gap) / speed so the band drifts
   at the same px/s however long the translated content is (a fixed
   duration would make PT race and EN crawl). ── */
.ticker {
  --tk-gap: 34px;
  --ticker-duration: 30s;      /* JS overwrites both of these from measurement */
  --tk-shift: 0px;             /* travel per cycle = one copy width + gap      */
  position: relative; overflow: hidden;
  background: var(--wine); color: var(--cream);
  padding: 13px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* ONE animation, on the track — never on the copies. A marquee built from
   N per-copy animations only works while all N share the same start time;
   any rebuild (language switch, font load, resize) recreates the clones
   but not the original, which keeps its old animation clock — measured
   live: original at 7366ms vs fresh clones at 767ms = a 575px seam. With
   the track as the single animated element, relative phase between copies
   cannot exist. The .ready class is added by JS after measurement, so the
   animation only ever starts with correct numbers (and never starts at
   all without JS or under reduced motion — the band just sits still). */
.ticker__track { display: flex; flex-flow: row nowrap; gap: var(--tk-gap); width: max-content; }
.ticker.ready .ticker__track { animation: ticker var(--ticker-duration) linear infinite; }
.ticker__content { display: flex; flex-flow: row nowrap; align-items: center; gap: var(--tk-gap); flex: none; }
@keyframes ticker {
  0%   { transform: translateZ(0); }
  100% { transform: translate3d(calc(-1 * var(--tk-shift)), 0, 0); }
}
.ticker__content span { white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ticker__content .tk-sep { color: var(--coral); font-weight: 600; letter-spacing: 0; }

/* ── Cards — two speeds ───────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 26px 24px; transition: transform var(--dur-card) var(--ease-out-soft), box-shadow var(--dur-card) var(--ease-out-soft), border-color var(--dur-card) var(--ease-out-soft);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -24px rgba(var(--wine-rgb), .35); border-color: rgba(var(--wine-rgb), .42); }
.s-dark .card:hover, .s-deep .card:hover { border-color: rgba(var(--coral-rgb), .45); }
.card.feature { border-radius: var(--radius-bento); padding: 30px 28px; transition-duration: var(--dur-feature); }
.card.feature:hover { transform: translateY(-4px) scale(1.015); }
.card .icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(var(--wine-rgb), .10); color: var(--wine);
}
.s-dark .card .icon, .s-deep .card .icon { background: rgba(var(--coral-rgb), .14); color: var(--accent); }
.card .icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.card p { color: var(--ink-muted); font-size: 15px; line-height: 1.6; }
.step-no { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--wine); line-height: 1; margin-bottom: 10px; }
.s-dark .step-no, .s-deep .step-no { color: var(--accent); }

/* ── Navbar (glass) ──────────────────────────────────────────────── */
.nav { position: fixed; top: 0; inset-inline: 0; z-index: 50; transition: background-color var(--dur-feature) var(--ease-out-soft), box-shadow var(--dur-feature) var(--ease-out-soft); }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 70px; }
.nav.scrolled { background: rgba(var(--night-rgb), .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--night-border); }
.nav-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: var(--cream); }
.nav-logo img { width: 32px; height: 32px; border-radius: 8px; }
.nav-logo span { color: var(--coral); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-size: 14px; font-weight: 500; color: rgba(var(--cream-rgb), .78); transition: color var(--dur-card) var(--ease-out-soft); }
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.lang-btn { min-height: 44px; min-width: 44px; padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(var(--cream-rgb), .22); color: rgba(var(--cream-rgb), .8); font-size: 12px; font-weight: 600; letter-spacing: .1em; transition: border-color var(--dur-card) var(--ease-out-soft), color var(--dur-card) var(--ease-out-soft); }
.lang-btn:hover { border-color: var(--coral); color: var(--coral); }
.burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { width: 22px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform var(--dur-card) var(--ease-out-soft), opacity var(--dur-card) var(--ease-out-soft); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  position: fixed; top: 70px; inset-inline: 0; z-index: 49; padding: 18px var(--gutter) 24px;
  background: rgba(var(--night-rgb), .96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--night-border);
  opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
  transition: opacity var(--dur-card) var(--ease-out-soft), transform var(--dur-card) var(--ease-out-soft), visibility var(--dur-card);
}
.mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.mobile-menu a { padding: 12px 6px; font-weight: 500; color: var(--cream); min-height: 44px; display: flex; align-items: center; }
/* Scroll progress */
.progress { position: fixed; top: 0; inset-inline-start: 0; height: 2px; width: 100%; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--coral), var(--coral-400)); pointer-events: none; }
[dir="rtl"] .progress { transform-origin: 100% 50%; }

/* ── Two-voice headline — ONE font file (Cormorant), two voices ────
   The base line: uppercase, modest, letterspaced. The voice line:
   lowercase, ~70% larger, in the theme highlight — wine on light ground,
   coral on dark/deep — same slot behaviour as .em, so one class stays
   legible on either ground. Reads as a second typeface; it isn't. ── */
.headline .hl-base { display: block; font-size: var(--voice-base); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.headline .hl-voice { display: block; font-size: var(--voice-lg); font-weight: 700; text-transform: lowercase; line-height: 1.08; letter-spacing: -0.015em; color: var(--wine); }
.s-dark .headline .hl-voice, .s-deep .headline .hl-voice { color: var(--coral); }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero { padding-top: calc(var(--section-pad) + 48px); }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.hero-inner.single { grid-template-columns: 1fr; text-align: center; }
.hero-inner.single .subline, .hero-inner.single .cta-row { margin-inline: auto; justify-content: center; }
.hero .subline { margin-top: 22px; }
.hero .cta-row { margin-top: 32px; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-muted); }
/* Hero load choreography: 700ms, delays 0 / 150 / 350 / 500 */
.hero [data-hero] { opacity: 0; transform: translateY(14px); animation: hero-in 700ms var(--ease-out-soft) forwards; }
.hero [data-hero="1"] { animation-delay: 0ms; }
.hero [data-hero="2"] { animation-delay: 150ms; }
.hero [data-hero="3"] { animation-delay: 350ms; }
.hero [data-hero="4"] { animation-delay: 500ms; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

/* ── Two-path split (homepage) ────────────────────────────────────── */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.path { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.path .pill { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wine); }
.s-dark .path .pill, .s-deep .path .pill { color: var(--accent); }
.path h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.path p { color: var(--ink-muted); }
.path .cta-row { margin-top: auto; }

/* ── Impact band + stats (EMPTY by design — see HTML comment) ────── */
.band { text-align: center; }
.band .h2 { max-width: 720px; margin-inline: auto; }
.band .subline { margin: 18px auto 0; }
.stats { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-top: 40px; }
.stats:empty, .stats[hidden] { display: none; }
.stat b { display: block; font-family: var(--font-display); font-size: 2.6rem; color: var(--cream); line-height: 1; }
.stat span { font-size: 13px; color: var(--ink-muted); }

/* ── Contact ─────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; }
.contact-ways { display: grid; gap: 12px; }
.way { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); transition: transform var(--dur-card) var(--ease-out-soft), border-color var(--dur-card) var(--ease-out-soft), box-shadow var(--dur-card) var(--ease-out-soft); min-height: 64px; }
.way:hover { transform: translateY(-3px); border-color: rgba(var(--wine-rgb), .45); box-shadow: 0 16px 40px -24px rgba(var(--wine-rgb), .35); }
.way .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--wine-rgb), .10); color: var(--wine); flex: none; }
.s-dark .way .ic, .s-deep .way .ic { background: rgba(var(--coral-rgb), .14); color: var(--accent); }
.way .ic svg { width: 20px; height: 20px; }
.way b { display: block; font-size: 15px; color: var(--ink); }
.way span { font-size: 13px; color: var(--ink-muted); }
.way .chev { margin-inline-start: auto; color: var(--wine); }
.s-dark .way .chev, .s-deep .way .chev { color: var(--accent); }
.way .chev svg { width: 18px; height: 18px; }
.form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-bento); padding: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 15px;
  transition: border-color var(--dur-card) var(--ease-out-soft), box-shadow var(--dur-card) var(--ease-out-soft);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(var(--coral-rgb), .18); }
.field input::placeholder, .field textarea::placeholder { color: rgba(var(--wine-rgb), .4); }
.form .btn { width: 100%; margin-top: 6px; }
.form-note { font-size: 12.5px; color: var(--ink-muted); margin-top: 12px; text-align: center; }
/* Honeypot: off-canvas for humans, present for bots. Not display:none (some bots skip hidden fields). */
.form { position: relative; }
.hp { position: absolute; inset-inline-start: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* Inline error state — the enquiry must never be lost: always shows the direct contacts */
.form-error { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(var(--wine-rgb), .06); border: 1px solid rgba(var(--wine-rgb), .24); font-size: 14px; color: var(--ink); }
.form-error-msg { margin: 0 0 6px; font-weight: 500; }
.form-error-fb { margin: 0; color: var(--ink-muted); }
.form-error a { color: var(--wine); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.btn[aria-busy="true"] { opacity: .72; cursor: progress; }
.success { text-align: center; padding: 36px 22px; }
.success:focus { outline: none; }
.success:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.success .check { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(76,175,80,.14); color: var(--success); transform: scale(0); animation: pop 550ms var(--ease-overshoot) 100ms forwards; }
.success .check svg { width: 34px; height: 34px; }
@keyframes pop { to { transform: scale(1); } }

/* ── Sticky mini-CTA (mobile) — hides when #contact is on screen ── */
.sticky-cta {
  position: fixed; bottom: 14px; inset-inline: 14px; z-index: 45;
  display: none; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px 10px 16px; border-radius: var(--radius-pill);
  background: rgba(var(--night-card-rgb), .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--night-border); color: var(--cream); box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
  transform: translateY(120%); opacity: 0;
  transition: transform 400ms var(--ease-out-soft), opacity 400ms var(--ease-out-soft);
}
.sticky-cta.show { transform: none; opacity: 1; }
.sticky-cta .t { font-size: 13.5px; font-weight: 600; }
.sticky-cta .btn { min-height: 40px; padding: 8px 16px; font-size: 13.5px; }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer { background: var(--night); color: var(--cream); padding: 56px 0 28px; border-top: 1px solid var(--night-border); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; }
.footer h4 { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--cream-rgb), .6); margin-bottom: 12px; }
.footer a { color: rgba(var(--cream-rgb), .82); font-size: 14px; display: block; padding: 5px 0; transition: color var(--dur-card) var(--ease-out-soft); }
.footer a:hover { color: var(--coral); }
.footer .brand { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.footer .brand span { color: var(--coral); }
.footer .tagline { color: rgba(var(--cream-rgb), .66); font-size: 14px; margin-top: 8px; max-width: 320px; }
.footer-bottom { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--night-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 12.5px; color: rgba(var(--cream-rgb), .55); }
.footer-bottom a { display: inline; padding: 0; font-size: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer .heart { color: var(--wine); text-decoration: none; cursor: default; }
.footer .heart:hover { color: var(--coral); }

/* ── Footer wordmark reveal — two elements, no JavaScript ──────────
   The footer reserves tall bottom padding; the giant SAKALOZ wordmark is
   position:fixed at the viewport bottom UNDER the page; scrolling the
   reserved padding past the viewport slides the window down over it.
   Stacking, adapted to this codebase: the wordmark sits at z-index -1,
   which paints above only the body canvas and below ALL in-flow content
   — so it can never bleed over a section mid-scroll and no section
   needs a z-index. (The footer must stay free of transform/filter or
   the fixed child would re-anchor to it.) The footer's own night ground
   moves onto .footer-main so the reserved zone stays transparent. ── */
.footer--parallax { position: relative; background: none; border-top: 0; padding: 0 0 var(--footer-parallax-height); }
.footer--parallax .footer-main { background: var(--night); border-top: 1px solid var(--night-border); padding: 56px 0 28px; }
.footer-back {
  position: fixed; bottom: 0; inset-inline: 0; z-index: -1;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4.2rem, 17.5vw, 15.5rem); line-height: 0.78; letter-spacing: 0.015em;
  color: var(--cream);
}
.footer-back span { color: var(--coral); }

/* ── Cookie banner (same consent keys as before) ─────────────────── */
.cookie-banner { position: fixed; bottom: 16px; inset-inline: 16px; z-index: 70; max-width: 720px; margin-inline: auto; background: rgba(var(--night-card-rgb), .96); border: 1px solid var(--night-border); border-radius: var(--radius-card); padding: 16px 18px; color: var(--cream); box-shadow: 0 20px 60px -20px rgba(0,0,0,.6); transform: translateY(140%); opacity: 0; transition: transform 400ms var(--ease-out-soft), opacity 400ms var(--ease-out-soft); }
.cookie-banner.show { transform: none; opacity: 1; }
.cookie-content { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cookie-text { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 300px; font-size: 13.5px; line-height: 1.5; color: rgba(var(--cream-rgb), .85); }
.cookie-text svg { width: 18px; height: 18px; flex: none; color: var(--coral); margin-top: 2px; }
.cookie-link { color: var(--coral); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 8px; }
.cookie-decline, .cookie-accept { min-height: 40px; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.cookie-decline { border: 1px solid rgba(var(--cream-rgb), .22); color: rgba(var(--cream-rgb), .8); }
.cookie-accept { background: var(--coral); color: var(--wine-900); }

/* ── Back to top ─────────────────────────────────────────────────── */
.back-to-top { position: fixed; bottom: 84px; inset-inline-end: 16px; z-index: 44; width: 44px; height: 44px; border-radius: 50%; background: var(--night-card); border: 1px solid var(--night-border); color: var(--cream); display: grid; place-items: center; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity var(--dur-card) var(--ease-out-soft), transform var(--dur-card) var(--ease-out-soft); }
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top svg { width: 18px; height: 18px; }

/* ── Distance-based group reveal — no animation-delay anywhere ─────
   Every element in a group shares ONE duration and ONE curve but gets a
   different travel distance (--travel-d, inline per element), so they
   start together, land together, and move at visibly different speeds —
   objects with different weights, not a queue of tiles. Animations
   attach at render, frozen by the group's .travel-wait class; a single
   IntersectionObserver per group removes that one class and the whole
   group unfreezes together. While paused at time 0 the 0% keyframe
   applies, so the offset first frame is held and nothing flashes into
   the wrong position before release. fill-mode is deliberately NONE:
   the 100% keyframe equals the natural state, so nothing jumps at the
   end — and a filled final keyframe would override the .card:hover
   transform forever. Solo elements keep the [data-reveal] primitive;
   this is for groups. ── */
[data-travel] { animation: travel-up var(--dur-travel) var(--ease-travel); }
.travel-wait [data-travel] { animation-play-state: paused; }
.no-js [data-travel] { animation: none; }
@keyframes travel-up {
  0%   { opacity: 0; transform: translateY(var(--travel-d, 140px)); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── THE reveal primitive — one implementation, used everywhere ──── */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease-out-soft), transform var(--dur-reveal) var(--ease-out-soft); transition-delay: var(--reveal-delay, 0ms); will-change: auto; }
[data-reveal].in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-inner .subline, .hero-inner .cta-row { margin-inline: auto; justify-content: center; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .vine { opacity: .22; }
  .s-dark .vine, .s-deep .vine { opacity: .16; }
  .nav-links { display: none; }
  .burger { display: flex; }
  .paths, .grid-2, .grid-3, .grid-4, .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .sticky-cta { display: flex; }
  .hero { padding-bottom: 56px; }
  .footer a { padding: 11px 0; }          /* 44px tap targets on phones */
  .footer-contact a { padding: 11px 0; }
  .h1 { font-size: clamp(2.3rem, 9vw, 3rem); }
  .back-to-top { bottom: 84px; }
  :root { --footer-parallax-height: 170px; }
}

/* ── Reduced motion — belt and braces ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .orb, .hero [data-hero], .success .check { animation: none !important; opacity: 1; transform: none; }
  .orb { opacity: .4; }
  .vine, .vine.draw { animation: none !important; stroke-dashoffset: 0 !important; }
  .btn-pulse, .store-badge.pulse { animation: none !important; }
  [data-reveal], .hero [data-hero] { opacity: 1 !important; transform: none !important; }
  [data-travel] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .footer-back { position: absolute; }
  .progress { display: none; }
  .nav, .sticky-cta, .cookie-banner, .back-to-top, .mobile-menu { transition: none; }
  .sticky-cta.show, .cookie-banner.show { transform: none; }
  .card:hover, .card.feature:hover, .way:hover, .btn:hover { transform: none; }
}