/* SELF-HOSTED FONTS — Allura (script/signature). Source: Google Fonts
   css2?family=Allura (v23), downloaded 2026-07-05, SIL Open Font License.
   Family name 'Allura' and unicode-ranges preserved verbatim from Google so
   --font-script resolution is byte-identical; only the source is now local.
   See vendor/fonts/README.md. */
/* latin */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/allura-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/allura-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* vietnamese */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/allura-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  /* RAW PALETTE — never themed, used by SVG and explicit refs */
  --midnight: #07101f;
  --midnight-2: #0a1325;
  --deep-slate: #141c2e;
  --ivory: #f5f3ee;
  --ivory-soft: rgba(245, 243, 238, 0.78);
  --gold: #d4af6e;
  --gold-bright: #f1ce88;
  --gold-soft: rgba(212, 175, 110, 0.22);
  --teal: #18b7af;
  --teal-soft: rgba(24, 183, 175, 0.24);
  --border: rgba(212, 175, 110, 0.28);
  --glass: rgba(11, 19, 34, 0.68);
  --shadow: rgba(0, 0, 0, 0.35);
  --font-display: "Optima", "Cormorant Garamond", "Georgia", serif;
  --font-sans: "Avenir Next", "Inter", "SF Pro Display", "Segoe UI", Arial, sans-serif;
  --font-script: "Allura", "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive;
  --mx: 50vw;
  --my: 50vh;

  /* SPACING SCALE — going-forward standard for new/edited sections.
     Existing bespoke values are intentionally preserved (the layout's
     hand-tuned 14/18/22px rhythm is not retro-snapped to this grid). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* SEMANTIC TOKENS — DEFAULT = DARK MODE */
  --t-bg-page: #050915;
  --t-bg-grad-1: #050915;
  --t-bg-grad-2: #07101f;
  --t-bg-grad-3: #061226;
  --t-bg-card-1: rgba(16, 25, 44, 0.76);
  --t-bg-card-2: rgba(7, 14, 28, 0.62);
  --t-bg-glass-1: rgba(10, 16, 32, 0.76);
  --t-bg-glass-2: rgba(10, 16, 32, 0.36);
  --t-bg-input: rgba(255, 255, 255, 0.03);
  --t-bg-input-strong: rgba(255, 255, 255, 0.04);

  --t-text: #f5f3ee;
  --t-text-soft: rgba(245, 243, 238, 0.86);
  --t-text-muted: rgba(245, 243, 238, 0.72);
  --t-text-faded: rgba(245, 243, 238, 0.62);
  --t-text-trace: rgba(245, 243, 238, 0.4);
  --t-text-on-gold: #07101f;

  --t-accent: #d4af6e;
  --t-accent-bright: #f1ce88;
  --t-accent-soft: rgba(212, 175, 110, 0.22);
  --t-accent-glow: rgba(212, 175, 110, 0.16);
  --t-accent-rgb: 212, 175, 110;
  --t-accent-bright-rgb: 241, 206, 136;
  /* Text-only accent. Tracks --t-accent on dark surfaces (no change); darkened
     for AA contrast on light surfaces (see [data-theme="light"]). */
  --t-accent-ink: var(--t-accent);

  --t-border: rgba(212, 175, 110, 0.28);
  --t-border-soft: rgba(212, 175, 110, 0.14);
  --t-border-strong: rgba(241, 206, 136, 0.62);

  --t-shadow-card: rgba(0, 0, 0, 0.3);
  --t-shadow-deep: rgba(0, 0, 0, 0.45);

  --t-grain-color-1: rgba(255, 255, 255, 0.18);
  --t-grain-color-2: rgba(255, 255, 255, 0.12);
  --t-grain-blend: screen;
  --t-grain-opacity: 0.16;

  --t-aurora-teal: rgba(24, 183, 175, 0.55);
  --t-aurora-gold: rgba(212, 175, 110, 0.28);
  --t-aurora-opacity: 0.66;

  --t-footer-bg: linear-gradient(90deg, #f5f3ee, #efe6d4, #f5f3ee);
  --t-footer-text: rgba(10, 16, 32, 0.68);

  --t-pen-core: #fff7e1;
  --t-cta-text: #07101f;

  /* Signature gold gradients — the master-brand CTA surface, themeable.
     Kept gold across products as the family crest (per-product accent recolors
     glows/borders/orbit; the gold CTA is the through-line). */
  --t-grad-gold: linear-gradient(135deg, #f2d39d, #c99a53 64%, #f5dba6);
  --t-grad-gold-engrave: linear-gradient(135deg, #e8c590 0%, #b08438 48%, #e8c590 100%);
}

[data-theme="light"] {
  --t-bg-page: #f5f3ee;
  --t-bg-grad-1: #faf7ed;
  --t-bg-grad-2: #f1ece0;
  --t-bg-grad-3: #e6dfd0;
  --t-bg-card-1: rgba(255, 253, 247, 0.92);
  --t-bg-card-2: rgba(232, 224, 207, 0.74);
  --t-bg-glass-1: rgba(255, 253, 247, 0.86);
  --t-bg-glass-2: rgba(255, 253, 247, 0.46);
  --t-bg-input: rgba(45, 30, 10, 0.05);
  --t-bg-input-strong: rgba(45, 30, 10, 0.08);

  --t-text: #1a1f2e;
  --t-text-soft: rgba(26, 31, 46, 0.86);
  --t-text-muted: rgba(26, 31, 46, 0.7);
  --t-text-faded: rgba(26, 31, 46, 0.55);
  --t-text-trace: rgba(26, 31, 46, 0.36);
  --t-text-on-gold: #1a1f2e;

  --t-accent: #b8924c;
  --t-accent-bright: #d4af6e;
  --t-accent-soft: rgba(184, 146, 76, 0.22);
  --t-accent-glow: rgba(184, 146, 76, 0.18);
  --t-accent-rgb: 184, 146, 76;
  --t-accent-bright-rgb: 212, 175, 110;
  /* Darken accent-as-text for WCAG AA on the ivory surface. color-mix tracks
     var(--t-accent) so each product's light page darkens in its own hue. */
  --t-accent-ink: color-mix(in oklab, var(--t-accent) 68%, #000);

  --t-border: rgba(184, 146, 76, 0.45);
  --t-border-soft: rgba(184, 146, 76, 0.25);
  --t-border-strong: rgba(184, 146, 76, 0.82);

  --t-shadow-card: rgba(45, 30, 10, 0.14);
  --t-shadow-deep: rgba(45, 30, 10, 0.22);

  --t-grain-color-1: rgba(45, 30, 10, 0.07);
  --t-grain-color-2: rgba(45, 30, 10, 0.04);
  --t-grain-blend: multiply;
  --t-grain-opacity: 0.08;

  --t-aurora-teal: rgba(24, 183, 175, 0.32);
  --t-aurora-gold: rgba(184, 146, 76, 0.18);
  --t-aurora-opacity: 0.42;

  --t-footer-bg: linear-gradient(90deg, #1a1f2e, #2a1f10, #1a1f2e);
  --t-footer-text: rgba(245, 243, 238, 0.82);

  --t-pen-core: #5a3f18;
  --t-cta-text: #1a1f2e;

  /* Slightly deeper gold in light mode for contrast on the ivory surface. */
  --t-grad-gold: linear-gradient(135deg, #e9c486, #b8924c 64%, #edcf95);
  --t-grad-gold-engrave: linear-gradient(135deg, #d4af6e 0%, #9c7430 48%, #d4af6e 100%);
}

/* ============================================================
   PER-PRODUCT ACCENT IDENTITY
   Each product page sets <body data-product="…"> and inherits its own
   accent hue — every glow, border, sheen, orbit and cursor-glow recolors
   for free because they all read --t-accent / --t-accent-rgb. Hues stay in
   the warm-metal / jewel family so each product reads as a JARA sibling.
   The gold CTA gradient is intentionally NOT overridden (shared family crest).
   ============================================================ */
body[data-product="assistant"] { /* signature gold — brand default, no override needed */ }

body[data-product="flow"] {
  --t-accent: #21c2b3; --t-accent-bright: #5fe6d5;
  --t-accent-rgb: 33, 194, 179; --t-accent-bright-rgb: 95, 230, 213;
  --t-accent-soft: rgba(33, 194, 179, 0.22); --t-accent-glow: rgba(33, 194, 179, 0.16);
  --t-border: rgba(33, 194, 179, 0.28); --t-border-soft: rgba(33, 194, 179, 0.14);
  --t-border-strong: rgba(95, 230, 213, 0.62);
}
[data-theme="light"] body[data-product="flow"] {
  --t-accent: #128c80; --t-accent-bright: #21c2b3;
  --t-accent-rgb: 18, 140, 128; --t-accent-bright-rgb: 33, 194, 179;
  --t-accent-soft: rgba(18, 140, 128, 0.22); --t-accent-glow: rgba(18, 140, 128, 0.18);
  --t-border: rgba(18, 140, 128, 0.45); --t-border-soft: rgba(18, 140, 128, 0.25);
  --t-border-strong: rgba(18, 140, 128, 0.82);
}

body[data-product="voxbridge"] {
  --t-accent: #7aa8ef; --t-accent-bright: #a9c9fb;
  --t-accent-rgb: 122, 168, 239; --t-accent-bright-rgb: 169, 201, 251;
  --t-accent-soft: rgba(122, 168, 239, 0.22); --t-accent-glow: rgba(122, 168, 239, 0.16);
  --t-border: rgba(122, 168, 239, 0.28); --t-border-soft: rgba(122, 168, 239, 0.14);
  --t-border-strong: rgba(169, 201, 251, 0.62);
}
[data-theme="light"] body[data-product="voxbridge"] {
  --t-accent: #4a73c4; --t-accent-bright: #7aa8ef;
  --t-accent-rgb: 74, 115, 196; --t-accent-bright-rgb: 122, 168, 239;
  --t-accent-soft: rgba(74, 115, 196, 0.22); --t-accent-glow: rgba(74, 115, 196, 0.18);
  --t-border: rgba(74, 115, 196, 0.45); --t-border-soft: rgba(74, 115, 196, 0.25);
  --t-border-strong: rgba(74, 115, 196, 0.82);
}

body[data-product="career-coach"] {
  /* VIOLET (2026-06 karar) — amber lambayla karışıyordu; mor lamba PNG'siyle eşleşir */
  --t-accent: #9a4fd0; --t-accent-bright: #c08af0;
  --t-accent-rgb: 154, 79, 208; --t-accent-bright-rgb: 192, 138, 240;
  --t-accent-soft: rgba(154, 79, 208, 0.22); --t-accent-glow: rgba(154, 79, 208, 0.16);
  --t-border: rgba(154, 79, 208, 0.28); --t-border-soft: rgba(154, 79, 208, 0.14);
  --t-border-strong: rgba(192, 138, 240, 0.62);
}
[data-theme="light"] body[data-product="career-coach"] {
  --t-accent: #6d2fa0; --t-accent-bright: #9a4fd0;
  --t-accent-rgb: 109, 47, 160; --t-accent-bright-rgb: 154, 79, 208;
  --t-accent-soft: rgba(109, 47, 160, 0.22); --t-accent-glow: rgba(109, 47, 160, 0.18);
  --t-border: rgba(109, 47, 160, 0.45); --t-border-soft: rgba(109, 47, 160, 0.25);
  --t-border-strong: rgba(109, 47, 160, 0.82);
}

/* Re-derive --t-accent-ink AFTER the per-product accent lands. A custom-property
   substitution resolves on the element where it's declared, and the resolved value
   is inherited — so the html-level --t-accent-ink froze to gold/bronze even on
   product pages. Re-declaring it here, where body sees the product --t-accent,
   lets each product's ink track its own hue (index has no data-product → unaffected). */
body[data-product] { --t-accent-ink: var(--t-accent); }
[data-theme="light"] body[data-product] { --t-accent-ink: color-mix(in oklab, var(--t-accent) 68%, #000); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--t-bg-page); }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--t-text);
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(var(--t-accent-rgb), 0.08), transparent 22rem),
    radial-gradient(circle at 78% 16%, rgba(24, 183, 175, 0.18), transparent 28rem),
    radial-gradient(circle at 18% 85%, rgba(var(--t-accent-rgb), 0.09), transparent 28rem),
    linear-gradient(145deg, var(--t-bg-grad-1) 0%, var(--t-bg-grad-2) 40%, var(--t-bg-grad-3) 100%);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--t-grain-opacity);
  background-image:
    radial-gradient(circle at 20% 30%, var(--t-grain-color-1) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, var(--t-grain-color-2) 0 1px, transparent 1px);
  background-size: 44px 44px, 64px 64px;
  mix-blend-mode: var(--t-grain-blend);
}

.cursor-glow {
  position: fixed;
  width: 22rem;
  height: 22rem;
  left: calc(var(--mx) - 11rem);
  top: calc(var(--my) - 11rem);
  background: radial-gradient(circle, rgba(var(--t-accent-rgb), 0.18), rgba(24, 183, 175, 0.08) 35%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
  opacity: .75;
  transition: opacity .35s ease;
}

.site-shell {
  width: min(100%, 1680px);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 24px clamp(16px, 4vw, 64px) 34px;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(circle at 50% 45%, rgba(var(--t-accent-rgb), 0.14), transparent 22rem), linear-gradient(145deg, var(--t-bg-grad-1), var(--t-bg-grad-2) 65%, var(--t-bg-grad-3));
  display: grid;
  place-content: center;
  text-align: center;
  transition: opacity .9s ease, visibility .9s ease;
}
.loader.hidden { opacity: 0; visibility: hidden; }
.loader-orbit {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 24px;
  position: relative;
  display: grid;
  place-items: center;
}
.loader-orbit::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,110,.56);
  border-left-color: transparent;
  animation: loaderSpin 1.45s cubic-bezier(.2,.8,.25,1) infinite;
}
.loader-orbit span {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 26px 10px rgba(241,206,136,.44);
  transform: translate(-42px, 12px);
}
.loader-orbit strong {
  font-family: var(--font-display);
  font-size: 86px;
  font-weight: 400;
  color: var(--t-text);
}
.loader-wordmark {
  letter-spacing: .38em;
  font-size: clamp(38px, 8vw, 76px);
  margin-left: .38em;
  animation: wordReveal .9s ease both .25s;
}
.loader p {
  margin: 14px 0 0;
  color: var(--t-accent-ink);
  text-transform: uppercase;
  letter-spacing: .38em;
  font-size: 11px;
  animation: fadeUp .9s ease both .55s;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  position: sticky;
  top: 14px;
  z-index: 20;
  min-height: 74px;
  padding: 12px 18px;
  border: 1px solid rgba(var(--t-accent-rgb), 0.12);
  border-radius: 28px;
}
.glass-nav {
  background: linear-gradient(180deg, var(--t-bg-glass-1), var(--t-bg-glass-2));
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 60px var(--t-shadow-deep);
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: max-content;
}
.brand-word,
.card-word,
.main-wordmark {
  font-weight: 300;
  letter-spacing: .33em;
  color: var(--t-text);
  text-transform: uppercase;
}
.brand-word { font-size: clamp(22px, 2.4vw, 34px); margin-left: .18em; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  color: var(--t-text-soft);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
}
.nav-links a {
  position: relative;
  transition: color .25s ease, transform .25s ease;
  padding-bottom: 4px;
}
.nav-links a:hover { color: var(--t-accent-bright); transform: translateY(-1px); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--t-accent-bright), transparent);
  box-shadow: 0 0 12px rgba(var(--t-accent-rgb), 0.55);
  transform: translateX(-50%);
  transition: width .35s ease, opacity .35s ease;
  opacity: 0;
  pointer-events: none;
}
.nav-links a.nav-active {
  color: var(--t-accent-bright);
}
.nav-links a.nav-active::after {
  width: 22px;
  opacity: 1;
}
.nav-links span { color: var(--t-accent-ink); }

/* === Top-nav hover/focus dropdowns (Products / About / Resources) === */
.nav-links .nav-dd { position: relative; display: flex; align-items: center; }
.nav-links .nav-dd__trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-links .nav-dd__caret { font-size: 10px; color: var(--t-accent-ink); transition: transform .25s ease; }
.nav-links .nav-dd:hover .nav-dd__caret,
.nav-links .nav-dd:focus-within .nav-dd__caret { transform: rotate(180deg); }
.nav-links .nav-dd__menu {
  position: absolute; top: calc(100% + 12px); left: 0; min-width: 232px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  text-transform: none; letter-spacing: normal;
  background: linear-gradient(180deg, var(--t-bg-glass-1), var(--t-bg-glass-2));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--t-border); border-radius: 18px;
  box-shadow: 0 24px 60px var(--t-shadow-deep), 0 0 28px rgba(var(--t-accent-rgb), 0.12);
  opacity: 0; transform: translateY(-8px) scale(0.97); transform-origin: top left;
  transition: opacity .22s ease, transform .25s cubic-bezier(.2,.8,.25,1);
  pointer-events: none; z-index: 60;
}
.nav-links .nav-dd__menu--rich { min-width: 326px; }
.nav-links .nav-dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-links .nav-dd:hover .nav-dd__menu,
.nav-links .nav-dd:focus-within .nav-dd__menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.nav-links .nav-dd__item {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px;
  color: var(--t-text-soft); font-size: 13px; letter-spacing: .02em; text-transform: none; transform: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links .nav-dd__item::after { display: none; }
.nav-links .nav-dd__item:hover,
.nav-links .nav-dd__item:focus-visible { background: rgba(var(--t-accent-rgb), 0.1); color: var(--t-text); transform: translateX(2px); outline: none; }
.nav-links .nav-dd__item .nav-dd__name { font-size: 13px; font-weight: 500; color: var(--t-text); letter-spacing: .01em; }
.nav-links .nav-dd__item .nav-dd__desc { font-size: 11px; line-height: 1.4; color: var(--t-text-muted); letter-spacing: .01em; }
[dir="rtl"] .nav-links .nav-dd__menu { left: auto; right: 0; transform-origin: top right; }
[dir="rtl"] .nav-links .nav-dd__item:hover,
[dir="rtl"] .nav-links .nav-dd__item:focus-visible { transform: translateX(-2px); }

/* D-14 — Nav dropdown sahne ışığı + stagger (feat/design-preview değerlendirme dalı).
   Açılışta öğeler 45ms arayla belirir (yalnız açılış; kapanış panelle birlikte temiz).
   Hover/focus öğe, mevcut altın vurgunun üstüne çok hafif inset parlaklık + inline-start
   hairline alır. Yükseliş bağımsız `translate` ile — hover'ın `transform`una dokunmaz. */
@keyframes navDdItemIn {
  from { opacity: 0; translate: 0 6px; }
  to   { opacity: 1; translate: 0 0; }
}
.nav-links .nav-dd:is(:hover, :focus-within) .nav-dd__item {
  animation: navDdItemIn .3s cubic-bezier(.2, .8, .25, 1) both;
}
.nav-links .nav-dd:is(:hover, :focus-within) .nav-dd__item:nth-child(2) { animation-delay: 45ms; }
.nav-links .nav-dd:is(:hover, :focus-within) .nav-dd__item:nth-child(3) { animation-delay: 90ms; }
.nav-links .nav-dd:is(:hover, :focus-within) .nav-dd__item:nth-child(4) { animation-delay: 135ms; }
.nav-links .nav-dd:is(:hover, :focus-within) .nav-dd__item:nth-child(5) { animation-delay: 180ms; }
.nav-links .nav-dd:is(:hover, :focus-within) .nav-dd__item:nth-child(6) { animation-delay: 225ms; }
.nav-links .nav-dd__item { transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.nav-links .nav-dd__item:hover,
.nav-links .nav-dd__item:focus-visible {
  box-shadow: inset 2px 0 0 rgba(var(--t-accent-rgb), 0.5), inset 0 0 18px rgba(var(--t-accent-rgb), 0.07);
}
[dir="rtl"] .nav-links .nav-dd__item:hover,
[dir="rtl"] .nav-links .nav-dd__item:focus-visible {
  box-shadow: inset -2px 0 0 rgba(var(--t-accent-rgb), 0.5), inset 0 0 18px rgba(var(--t-accent-rgb), 0.07);
}
@media (prefers-reduced-motion: reduce) {
  /* Stagger yok — öğeler panelle birlikte anında; sahne ışığı statik. */
  .nav-links .nav-dd:is(:hover, :focus-within) .nav-dd__item { animation: none; }
}
/* /D-14 */

.nav-actions { display: flex; align-items: center; gap: 14px; }
.language-pill,
.outline-cta,
.secondary-cta,
.primary-cta,
.premium-hover,
.access-form button {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.language-pill {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--t-text);
  background: transparent;
  border: 0;
  padding: 12px 10px;
}
.globe { color: var(--t-accent-ink); }
.outline-cta,
.secondary-cta {
  border: 1px solid rgba(var(--t-accent-rgb), 0.58);
  padding: 14px 22px;
  color: var(--t-accent-bright);
  background: var(--t-bg-input);
}
.outline-cta:hover,
.secondary-cta:hover {
  border-color: var(--t-accent-bright);
  box-shadow: 0 0 40px rgba(var(--t-accent-rgb), 0.22);
  transform: translateY(-2px);
}

.jara-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  flex: 0 0 auto;
}
.jara-icon.mini { width: 42px; height: 42px; }
.jara-icon.large { width: 86px; height: 86px; }

/* Brand mark v2 — dual-ring orbit + authentic JARA J (themeable, reduced-motion gated). See memory jara-brand-mark-standard */
.jmark { display: block; width: 100%; height: auto; aspect-ratio: 1; color: var(--t-accent); overflow: visible; }
.jmark .jm-ring { fill: none; stroke: currentColor; stroke-width: 2.2; transform-box: view-box; transform-origin: 60px 60px; }
.jmark .jm-ring--a { stroke-opacity: .78; animation: jmSpin 16s linear infinite; }
.jmark .jm-ring--b { stroke-opacity: .4; animation: jmSpin 23s linear infinite reverse; }
.jmark .jm-node { fill: var(--t-accent-bright); stroke: none; animation: jmPulse 2.6s ease-in-out infinite; }
.jmark .jm-j { fill: none; stroke: currentColor; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.jmark .jm-badge-hl { fill: none; stroke: var(--t-bg-page); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.jmark .jm-badge-lt { fill: none; stroke: var(--t-accent-bright); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes jmSpin { to { transform: rotate(360deg); } }
@keyframes jmPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jmark .jm-ring--a, .jmark .jm-ring--b, .jmark .jm-node { animation: none; } }
.giant-icon > .jmark { filter: drop-shadow(0 0 42px rgba(var(--t-accent-rgb), 0.18)); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(24px, 4vw, 64px);
  min-height: 640px;
  padding: clamp(56px, 6vw, 88px) 0 40px;
  overflow: hidden;
}
.hero-copy, .hero-visual { position: relative; z-index: 2; }
.eyebrow,
.subtitle,
.motion-header small {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--t-accent-ink);
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: 12px;
}
.eyebrow > span:empty,
.subtitle > span:empty,
.motion-header small > span:empty {
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--t-accent), transparent);
  flex-shrink: 0;
}
.main-wordmark {
  font-size: clamp(72px, 12vw, 188px);
  line-height: .85;
  margin: 28px 0 18px;
  margin-left: .12em;
  text-shadow: 0 12px 70px rgba(var(--t-accent-rgb), 0.12);
}
.hero h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.03em;
}
.hero h2 em {
  color: var(--t-accent-bright);
  font-style: italic;
}
.hero p {
  max-width: 620px;
  color: var(--t-text-muted);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  margin: 24px 0 28px;
}
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.48);
  padding: 18px 30px;
  color: var(--t-cta-text);
  background: var(--t-grad-gold);
  box-shadow: 0 18px 46px rgba(var(--t-accent-rgb), 0.24);
}
.primary-cta:hover,
.premium-hover:hover,
.access-form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(var(--t-accent-bright-rgb), 0.55), 0 20px 70px rgba(var(--t-accent-rgb), 0.36);
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  margin-top: 30px;
  color: var(--t-text-faded);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
}
.trust-row i { color: var(--t-accent-ink); font-style: normal; margin-right: 6px; }

.hero-visual {
  min-height: 540px;
  display: grid;
  place-items: center;
}
.giant-icon {
  position: relative;
  width: min(38vw, 520px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.45));
}
.play-motion {
  position: absolute;
  right: 0;
  bottom: 14%;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--t-text);
  background: transparent;
  border: 0;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 10px;
}
.play-motion span {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(var(--t-accent-rgb), 0.58);
  border-radius: 50%;
  color: var(--t-accent-bright);
  box-shadow: inset 0 0 20px rgba(var(--t-accent-rgb), 0.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.play-motion:hover span { transform: scale(1.06); box-shadow: 0 0 34px rgba(var(--t-accent-rgb), 0.3); }
.aurora {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  filter: blur(18px);
  opacity: var(--t-aurora-opacity);
  mix-blend-mode: screen;
}
.aurora-one {
  right: -10%;
  top: 8%;
  width: 46vw;
  height: 18vw;
  background: linear-gradient(110deg, transparent, rgba(24, 183, 175, 0.08), var(--t-aurora-teal), transparent);
  transform: rotate(-34deg);
  animation: auroraFlow 10s ease-in-out infinite alternate;
}
.aurora-two {
  right: 20%;
  bottom: 2%;
  width: 34vw;
  height: 12vw;
  background: linear-gradient(90deg, transparent, var(--t-aurora-gold), transparent);
  transform: rotate(-8deg);
  animation: auroraFlow 14s ease-in-out infinite alternate-reverse;
}
.horizon {
  position: absolute;
  right: -16%;
  bottom: 12%;
  width: 78vw;
  height: 22vw;
  border-top: 3px solid rgba(var(--t-accent-bright-rgb), 0.84);
  border-radius: 50% 50% 0 0;
  transform: rotate(-5deg);
  filter: drop-shadow(0 0 22px rgba(var(--t-accent-bright-rgb), 0.48));
  opacity: .75;
}

/* Cinematic scroll cue — sits at the foot of the hero, fades on scroll (via GSAP) */
.hero-scrollcue {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2vw, 26px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: none;
}
.hero-scrollcue__track {
  position: relative;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: linear-gradient(to bottom, transparent, rgba(var(--t-accent-bright-rgb), 0.55));
}
.hero-scrollcue__dot {
  position: absolute;
  left: 50%;
  top: -6px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--t-accent-bright);
  box-shadow: 0 0 10px 1px rgba(var(--t-accent-bright-rgb), 0.85);
  animation: heroCueDrop 2.3s cubic-bezier(.7, 0, .3, 1) infinite;
}
.hero-scrollcue__label {
  font-size: 9px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--t-text-muted);
  text-indent: .42em;
}
@keyframes heroCueDrop {
  0%   { top: -6px; opacity: 0; }
  28%  { opacity: 1; }
  100% { top: 48px; opacity: 0; }
}

.product-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 0.9vw, 18px);
  margin-top: -20px;
}
.product-card,
.experience-panel,
.motion-panel,
.access-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--t-border);
  background:
    radial-gradient(circle at 70% 90%, rgba(24, 183, 175, 0.13), transparent 28%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 70px var(--t-shadow-card);
}
.product-card {
  min-height: 282px;
  padding: clamp(20px, 1.6vw, 28px);
  transition: transform .55s cubic-bezier(.18,.82,.28,1), border-color .4s ease, box-shadow .4s ease;
}
.product-card::before,
.experience-panel::before,
.motion-panel::before,
.access-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(110deg, transparent 20%, rgba(var(--t-accent-bright-rgb), 0.18), transparent 56%);
  transform: translateX(-120%);
  transition: transform .9s ease;
  pointer-events: none;
}
.product-card:hover::before,
.product-card.active::before,
.experience-panel:hover::before,
.motion-panel:hover::before,
.access-panel:hover::before { transform: translateX(120%); }

/* ---- Blade-tip light reflection on EVERY card ----
   The product cards above already glint via a translateX ::before sweep. This
   extends the SAME premium sheen to every other card surface, but using an
   ::after with an animated background-position instead of a moving pseudo.
   Why background-position and not translateX: the band stays inside the card
   box (only its painted position shifts), so it needs NO overflow:hidden and
   never clips floating children — e.g. the pricing "Popular" badge that sits
   above the card edge. The sheen is clipped to each card's rounded corners via
   border-radius:inherit, and z-index lifts it just over the card content so the
   light reads as passing across the surface. Theme-aware (accent-bright token →
   correct in light & dark). scene-card uses ::after because its ::before is
   already its radial brand glow. */
.pricing-card::after,
.testi-card::after,
.faq-item::after,
.capability-card::after,
.use-card::after,
.mini-card::after,
.prompt-card::after,
.scene-card::after,
.scene .shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  background-image: linear-gradient(110deg,
    transparent 42%,
    rgba(var(--t-accent-bright-rgb), 0.12) 48%,
    rgba(var(--t-accent-bright-rgb), 0.24) 50%,
    rgba(var(--t-accent-bright-rgb), 0.12) 52%,
    transparent 58%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 140% 0;
  transition: background-position .9s ease;
}
.pricing-card:hover::after,
.testi-card:hover::after,
.faq-item:hover::after,
.capability-card:hover::after,
.use-card:hover::after,
.mini-card:hover::after,
.prompt-card:hover::after,
.scene-card:hover::after,
.scene .shot:hover::after { background-position: -45% 0; }
.product-card:hover,
.product-card.active {
  transform: translateY(-10px);
  border-color: var(--t-border-strong);
  box-shadow: 0 26px 90px var(--t-shadow-deep), 0 0 46px rgba(var(--t-accent-rgb), 0.13);
}
.product-lockup {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 0;
}
.product-lockup .script-label {
  grid-column: 2;
  margin-top: 10px;
  justify-self: start;
  width: max-content;
}
.card-word { font-size: clamp(30px, 3vw, 48px); line-height: 1; }
.script-label {
  color: var(--t-accent-bright);
  font-family: var(--font-script);
  font-size: clamp(28px, 2.4vw, 42px);
  line-height: 1.3;
  letter-spacing: .02em;
  text-shadow: 0 0 20px rgba(var(--t-accent-rgb), 0.18);
}
.card-body { margin-top: 28px; }
.card-body p {
  color: var(--t-text-muted);
  line-height: 1.6;
  min-height: 70px;
}
.card-body a {
  display: inline-flex;
  gap: 12px;
  color: var(--t-accent-bright);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
}
.chat-preview {
  width: 90px;
  height: 70px;
  border-radius: 24px 24px 24px 7px;
  border: 1px solid rgba(212,175,110,.3);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(24,183,175,.06));
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.chat-preview span { width: 9px; height: 9px; background: var(--gold-bright); border-radius: 50%; animation: dotTyping 1.4s ease-in-out infinite; }
.chat-preview span:nth-child(2) { animation-delay: .15s; background: var(--t-text); }
.chat-preview span:nth-child(3) { animation-delay: .3s; background: var(--teal); }
.flow-preview { width: 150px; height: 72px; position: relative; }
.flow-preview span,
.prompt-wave,
.big-wave::before {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), var(--gold-bright), transparent);
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(24,183,175,.18);
  animation: waveShift 2.8s ease-in-out infinite;
}
.flow-preview span:nth-child(1) { top: 22px; transform: rotate(-8deg); }
.flow-preview span:nth-child(2) { top: 38px; transform: rotate(5deg); animation-delay: .2s; }
.flow-preview span:nth-child(3) { top: 53px; transform: rotate(-3deg); animation-delay: .45s; }
.wave-preview { display: flex; align-items: center; gap: 4px; height: 76px; }
.wave-preview i,
.big-wave i {
  display: block;
  width: 4px;
  height: 18px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--teal), var(--gold-bright));
  animation: waveBar 1.2s ease-in-out infinite;
}
.wave-preview i:nth-child(2), .big-wave i:nth-child(2) { height: 32px; animation-delay: .1s; }
.wave-preview i:nth-child(3), .big-wave i:nth-child(3) { height: 52px; animation-delay: .2s; }
.wave-preview i:nth-child(4), .big-wave i:nth-child(4) { height: 26px; animation-delay: .3s; }
.wave-preview i:nth-child(5), .big-wave i:nth-child(5) { height: 66px; animation-delay: .4s; }
.wave-preview i:nth-child(6), .big-wave i:nth-child(6) { height: 34px; animation-delay: .5s; }
.wave-preview i:nth-child(7), .big-wave i:nth-child(7) { height: 46px; animation-delay: .6s; }
.wave-preview i:nth-child(8), .big-wave i:nth-child(8) { height: 22px; animation-delay: .7s; }
.wave-preview i:nth-child(9) { height: 14px; animation-delay: .8s; }
.summit-preview {
  width: 130px;
  height: 78px;
  position: relative;
  border-bottom: 1px solid rgba(212,175,110,.28);
}
.summit-preview::before,
.summit-preview::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 18px;
  width: 72px;
  height: 72px;
  border-left: 2px solid rgba(241,206,136,.6);
  border-top: 2px solid rgba(241,206,136,.46);
  transform: rotate(45deg) skew(-8deg, -8deg);
  filter: drop-shadow(0 0 18px rgba(212,175,110,.22));
}
.summit-preview span {
  position: absolute;
  left: 78px;
  top: 12px;
  width: 2px;
  height: 24px;
  background: var(--gold-bright);
  box-shadow: 0 0 18px rgba(212,175,110,.45);
}
.summit-preview span::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  border-left: 18px solid var(--gold-bright);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.pricing {
  padding: clamp(64px, 8vw, 110px) 0 clamp(40px, 5vw, 70px);
  position: relative;
}
.pricing-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.pricing-heading span {
  display: block;
  color: var(--t-accent-ink);
  letter-spacing: .35em;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pricing-heading h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.08;
  margin: 0 0 16px;
  color: var(--t-text);
  letter-spacing: -.02em;
}
.pricing-heading p {
  margin: 0 auto;
  max-width: 540px;
  color: var(--t-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
  max-width: 1200px;
  margin: 0 auto;
}
.pricing-card {
  position: relative;
  padding: clamp(28px, 2.5vw, 40px);
  border: 1px solid var(--t-border);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  display: flex;
  flex-direction: column;
  transition: transform .45s cubic-bezier(.18,.82,.28,1), border-color .35s ease, box-shadow .35s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pricing-card:hover {
  transform: translateY(-6px);
  border-color: var(--t-border-strong);
  box-shadow: 0 22px 60px var(--t-shadow-card), 0 0 36px rgba(var(--t-accent-rgb), 0.1);
}
.pricing-card--popular {
  border-color: var(--t-accent-bright);
  box-shadow: 0 22px 60px rgba(var(--t-accent-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
  background:
    radial-gradient(circle at 80% 0%, rgba(var(--t-accent-rgb), 0.14), transparent 50%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
}
.tier-badge {
  position: absolute;
  top: -14px;
  right: 24px;
  background: var(--t-grad-gold);
  color: var(--t-cta-text);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 500;
  box-shadow: 0 8px 22px rgba(var(--t-accent-rgb), 0.34);
}
.tier-name {
  display: block;
  color: var(--t-accent-ink);
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 18px;
}
.tier-price {
  display: flex;
  flex-wrap: wrap; /* long localized price words (DE "Individuell") drop the period to a new line instead of clipping */
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.tier-price .amount {
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 400;
  color: var(--t-text);
  letter-spacing: -.02em;
  line-height: 1;
}
.tier-price .period {
  color: var(--t-text-faded);
  font-size: 13px;
  letter-spacing: .04em;
}
.tier-tag {
  margin: 0 0 22px;
  color: var(--t-text-muted);
  font-size: 14px;
  line-height: 1.55;
  min-height: 44px;
}
.tier-features {
  margin: 0 0 28px;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--t-border-soft);
  display: grid;
  gap: 12px;
}
.tier-features li {
  position: relative;
  padding-left: 22px;
  color: var(--t-text-soft);
  font-size: 13.5px;
  line-height: 1.55;
}
.tier-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--t-accent-bright);
  font-size: 13px;
  font-weight: 600;
}
.tier-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 15px 22px;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  color: var(--t-text);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: auto;
  transition: border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tier-cta:hover {
  border-color: var(--t-accent-bright);
  color: var(--t-accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(var(--t-accent-rgb), 0.18);
}
.tier-cta--accent {
  background: var(--t-grad-gold);
  color: var(--t-cta-text);
  border-color: rgba(var(--t-accent-bright-rgb), 0.5);
}
.tier-cta--accent:hover {
  color: var(--t-cta-text);
  box-shadow: 0 14px 32px rgba(var(--t-accent-rgb), 0.32);
  border-color: var(--t-accent-bright);
}

/* === Testimonials === */
.testimonials {
  padding: clamp(64px, 8vw, 110px) 0 clamp(32px, 4vw, 56px);
  position: relative;
}
.testi-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.testi-heading span {
  display: block;
  color: var(--t-accent-ink);
  letter-spacing: .35em;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.testi-heading h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.08;
  margin: 0 0 16px;
  color: var(--t-text);
  letter-spacing: -.02em;
}
.testi-heading p {
  margin: 0 auto;
  max-width: 560px;
  color: var(--t-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
  max-width: 1200px;
  margin: 0 auto;
}
.testi-card {
  position: relative;
  padding: clamp(28px, 2.5vw, 38px);
  border: 1px solid var(--t-border);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: transform .45s cubic-bezier(.18,.82,.28,1), border-color .35s ease, box-shadow .35s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.testi-card:hover {
  transform: translateY(-6px);
  border-color: var(--t-border-strong);
  box-shadow: 0 22px 60px var(--t-shadow-card), 0 0 36px rgba(var(--t-accent-rgb), 0.1);
}
.testi-card--featured {
  border-color: rgba(var(--t-accent-bright-rgb), 0.5);
  background:
    radial-gradient(circle at 80% 0%, rgba(var(--t-accent-rgb), 0.14), transparent 50%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  box-shadow: 0 22px 60px rgba(var(--t-accent-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}
.testi-mark {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.6;
  color: var(--t-accent-bright);
  opacity: 0.55;
  height: 22px;
}
.testi-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.18vw, 19px);
  line-height: 1.5;
  color: var(--t-text);
  letter-spacing: -.005em;
}
.testi-card figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--t-cta-text);
  background: var(--t-grad-gold);
  box-shadow: 0 6px 18px rgba(var(--t-accent-rgb), 0.25);
  flex: 0 0 42px;
}
.testi-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testi-meta strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-text);
  letter-spacing: .01em;
}
.testi-meta em {
  font-style: normal;
  font-size: 12px;
  color: var(--t-text-muted);
  letter-spacing: .04em;
}

/* === FAQ === */
.faq {
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 70px);
  position: relative;
}
.faq-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.faq-heading span {
  display: block;
  color: var(--t-accent-ink);
  letter-spacing: .35em;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.faq-heading h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.08;
  margin: 0 0 16px;
  color: var(--t-text);
  letter-spacing: -.02em;
}
.faq-heading p {
  margin: 0 auto;
  max-width: 540px;
  color: var(--t-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.faq-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  position: relative;
  border: 1px solid var(--t-border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.faq-item:hover {
  border-color: var(--t-border-strong);
}
.faq-item.is-open {
  border-color: rgba(var(--t-accent-bright-rgb), 0.45);
  box-shadow: 0 18px 44px var(--t-shadow-card), 0 0 30px rgba(var(--t-accent-rgb), 0.08);
}
.faq-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--t-text);
  font: inherit;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 500;
  text-align: start;
  letter-spacing: -.005em;
  transition: color .25s ease;
}
.faq-toggle:hover {
  color: var(--t-accent-bright);
}
.faq-chev {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  color: var(--t-accent-ink);
  border: 1px solid rgba(var(--t-accent-rgb), 0.3);
  transition: transform .35s cubic-bezier(.18,.82,.28,1), background .25s ease, color .25s ease;
}
.faq-item.is-open .faq-chev {
  transform: rotate(45deg);
  background: var(--t-grad-gold);
  color: var(--t-cta-text);
  border-color: transparent;
}
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.18,.82,.28,1);
}
.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer > p {
  overflow: hidden;
  margin: 0;
  padding: 0 clamp(20px, 2vw, 28px) clamp(20px, 2vw, 26px);
  color: var(--t-text-muted);
  font-size: 14.5px;
  line-height: 1.75;
  letter-spacing: .005em;
  transition: padding-block-end .45s cubic-bezier(.18,.82,.28,1);
}
/* 0fr track can't compress the p's own padding-box (overflow:hidden clips at the
   padding edge), so closed items leaked one answer line — zero it while closed. */
.faq-item:not(.is-open) .faq-answer > p { padding-block-end: 0; }

/* D-06 — FAQ akordeon cilası. Açık öğenin inline-start kenarında yukarıdan
   aşağı dolan ince altın hairline (aktiflik hissi) + kapalı öğede soru hover'ında
   chevron'un nazik kayışı. Yükseklik geçişi zaten .faq-answer grid-template-rows
   ile akıyor (dokunulmadı); .is-open sınıfı mevcut JS'ten geliyor. inset-inline-start
   logical → RTL'de hairline otomatik doğru (sağ) kenarda. */
.faq-item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  z-index: 6;
  background: linear-gradient(180deg, var(--t-accent-bright), var(--t-accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.18, .82, .28, 1);
  pointer-events: none;
}
.faq-item.is-open::before { transform: scaleY(1); }
.faq-item:not(.is-open) .faq-toggle:hover .faq-chev { transform: translateX(3px); }
[dir="rtl"] .faq-item:not(.is-open) .faq-toggle:hover .faq-chev { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-item::before,
  .faq-chev { transition: none; }
  .faq-item:not(.is-open) .faq-toggle:hover .faq-chev,
  [dir="rtl"] .faq-item:not(.is-open) .faq-toggle:hover .faq-chev { transform: none; }
}

/* === Mobile hamburger nav === */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--t-border);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: border-color .25s ease, background .25s ease;
}
.nav-burger:hover { border-color: var(--t-accent-bright); }
.nav-burger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: var(--t-text);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.18,.82,.28,1), opacity .25s ease, top .35s ease;
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 28px; }
.mobile-nav-open .nav-burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.mobile-nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.mobile-nav-open .nav-burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 14, 0.62);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.mobile-nav__panel {
  position: relative;
  height: 100%;
  width: min(420px, 86vw);
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--t-accent-rgb), 0.16), transparent 55%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  border-inline-start: 1px solid var(--t-border-strong);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px 32px;
  transform: translateX(106%);
  transition: transform .45s cubic-bezier(.18,.82,.28,1);
  overflow-y: auto;
}
[dir="rtl"] .mobile-nav__panel { transform: translateX(-106%); }
.mobile-nav-open .mobile-nav { opacity: 1; pointer-events: auto; }
.mobile-nav-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mobile-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-nav__brand .brand-word { width: 70px; }
.mobile-nav__brand .brand-word svg { width: 100%; height: auto; color: var(--t-text); }
.mobile-nav__close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--t-border);
  background: transparent;
  color: var(--t-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.mobile-nav__close:hover {
  color: var(--t-accent-bright);
  border-color: var(--t-accent-bright);
  transform: rotate(90deg);
}
.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.mobile-nav__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--t-text);
  transition: background .25s ease, color .25s ease;
}
.mobile-nav__links a span:last-child {
  color: var(--t-accent-ink);
  opacity: 0.55;
  transition: opacity .25s ease, transform .25s ease;
}
.mobile-nav__links a:hover {
  background: rgba(var(--t-accent-rgb), 0.08);
  color: var(--t-accent-bright);
}
.mobile-nav__links a:hover span:last-child {
  opacity: 1;
  transform: translateX(3px);
}
[dir="rtl"] .mobile-nav__links a:hover span:last-child { transform: translateX(-3px); }
.mobile-nav__divider {
  height: 1px;
  background: var(--t-border);
  margin: 4px 0;
}
.mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 14px;
}
.mobile-nav__label {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}
.mobile-nav__langs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.mobile-nav__langs li {
  font-size: 11px;
  letter-spacing: .15em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--t-border);
  color: var(--t-text-muted);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.mobile-nav__langs li:hover { color: var(--t-text); border-color: var(--t-border-strong); }
.mobile-nav__langs li.is-active {
  color: var(--t-cta-text);
  background: var(--t-grad-gold);
  border-color: transparent;
  font-weight: 600;
}
.mobile-nav__theme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--t-border);
  background: transparent;
  color: var(--t-text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color .25s ease, color .25s ease;
}
.mobile-nav__theme:hover { color: var(--t-accent-bright); border-color: var(--t-accent-bright); }
.mobile-nav__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 26px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--t-bg-page);
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255, 245, 215, 0.45), transparent 55%),
    var(--t-grad-gold-engrave);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.55);
  box-shadow:
    inset 0 2px 1px rgba(255, 248, 220, 0.6),
    inset 0 -2px 2px rgba(50, 28, 4, 0.45),
    0 14px 30px rgba(var(--t-accent-rgb), 0.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mobile-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(var(--t-accent-rgb), 0.36), inset 0 2px 1px rgba(255, 248, 220, 0.6), inset 0 -2px 2px rgba(50, 28, 4, 0.45); }
.mobile-nav-open { overflow: hidden; }

/* === Product detail pages (assistant.html, flow.html, voxbridge.html, career-coach.html) === */
.detail-hero {
  position: relative;
  isolation: isolate;
  overflow: clip; /* contain the ambient accent glow so its -12% horizontal bleed can't cause page-wide horizontal scroll */
  padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 96px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.5vw, 32px);
}
/* Ambient accent aura behind the hero — tinted by the product's --t-accent,
   so each product page glows in its own hue (gold / teal / aurora-blue / amber). */
.detail-hero::before {
  content: "";
  position: absolute;
  inset: -8% -12% 22% -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 54% at 50% 32%,
    rgba(var(--t-accent-rgb), 0.16),
    rgba(var(--t-accent-rgb), 0.05) 46%,
    transparent 72%);
  filter: blur(16px);
}
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t-text-muted);
  background: rgba(var(--t-accent-rgb), 0.04);
  transition: color .25s ease, border-color .25s ease, transform .25s ease, background .25s ease;
}
.detail-back:hover {
  color: var(--t-accent-bright);
  border-color: var(--t-accent-bright);
  background: rgba(var(--t-accent-rgb), 0.10);
  transform: translateX(-3px);
}
[dir="rtl"] .detail-back:hover { transform: translateX(3px); }
.detail-lockup {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: clamp(14px, 1.6vw, 24px);
  row-gap: clamp(8px, 1vw, 18px);
}
.detail-lockup .jara-icon { grid-column: 1; grid-row: 1; }
.detail-lockup .main-wordmark { grid-column: 2; grid-row: 1; font-size: clamp(58px, 8vw, 120px); margin: 0; }
.detail-lockup .script-label { grid-column: 1 / -1; grid-row: 2; width: max-content; justify-self: center; }
.detail-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.06;
  letter-spacing: -.025em;
  margin: 0;
  max-width: 880px;
  color: var(--t-text);
}
.detail-hero-body {
  margin: 0;
  max-width: 620px;
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.7;
  color: var(--t-text-muted);
}
.detail-ctas {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.detail-ctas .primary-cta,
.detail-ctas .secondary-cta {
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.detail-ctas .primary-cta {
  background: var(--t-grad-gold-engrave);
  color: var(--t-cta-text);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.55);
  box-shadow: 0 12px 28px rgba(var(--t-accent-rgb), 0.28);
}
.detail-ctas .primary-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(var(--t-accent-rgb), 0.4); }
.detail-ctas .secondary-cta {
  color: var(--t-text);
  border: 1px solid var(--t-border-strong);
  background: transparent;
}
.detail-ctas .secondary-cta:hover { color: var(--t-accent-bright); border-color: var(--t-accent-bright); }

.detail-section {
  padding: clamp(48px, 6vw, 90px) 0 clamp(32px, 4vw, 64px);
  position: relative;
}
.detail-heading {
  text-align: center;
  max-width: 740px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.detail-heading span {
  display: block;
  color: var(--t-accent-ink);
  letter-spacing: .35em;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.detail-heading h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.08;
  margin: 0 0 14px;
  color: var(--t-text);
  letter-spacing: -.02em;
}
.detail-heading p {
  margin: 0 auto;
  max-width: 560px;
  color: var(--t-text-muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  max-width: 1240px;
  margin: 0 auto;
}
.capability-card {
  position: relative;
  padding: clamp(24px, 2.2vw, 32px);
  border: 1px solid var(--t-border);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .45s cubic-bezier(.18,.82,.28,1), border-color .35s ease, box-shadow .35s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.capability-card:hover {
  transform: translateY(-5px);
  border-color: var(--t-border-strong);
  box-shadow: 0 18px 44px var(--t-shadow-card), 0 0 28px rgba(var(--t-accent-rgb), 0.10);
}
.capability-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--t-accent-bright);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.4);
  background: rgba(var(--t-accent-rgb), 0.08);
}
.capability-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.15;
  color: var(--t-text);
  margin: 4px 0 0;
  letter-spacing: -.01em;
}
.capability-card p {
  margin: 0;
  color: var(--t-text-muted);
  font-size: 14px;
  line-height: 1.65;
}

.uses-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  max-width: 1100px;
  margin: 0 auto;
}
.use-card {
  position: relative;
  padding: clamp(26px, 2.4vw, 34px);
  border: 1px solid var(--t-border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 0%, rgba(var(--t-accent-rgb), 0.08), transparent 50%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform .45s cubic-bezier(.18,.82,.28,1), border-color .35s ease;
}
.use-card:hover { transform: translateY(-4px); border-color: var(--t-border-strong); }
.use-emoji {
  font-size: 24px;
  color: var(--t-accent-bright);
  opacity: 0.7;
}
.use-card strong {
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t-text);
  font-weight: 600;
}
.use-card p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--t-text);
  letter-spacing: -.005em;
}

.detail-final {
  padding: clamp(56px, 6vw, 100px) 0;
  text-align: center;
}
.detail-final-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 56px);
  border-radius: 28px;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.35);
  background:
    radial-gradient(circle at 18% 12%, rgba(var(--t-accent-rgb), 0.14), transparent 50%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.detail-final h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.02em;
  color: var(--t-text);
}
.detail-final p {
  margin: 0;
  max-width: 520px;
  color: var(--t-text-muted);
  font-size: 15px;
  line-height: 1.65;
}
.detail-final .primary-cta {
  border-radius: 999px;
  padding: 16px 32px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: var(--t-grad-gold-engrave);
  color: var(--t-cta-text);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.5);
  box-shadow: 0 14px 32px rgba(var(--t-accent-rgb), 0.32);
  transition: transform .25s ease, box-shadow .25s ease;
}
.detail-final .primary-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(var(--t-accent-rgb), 0.44); }

/* === Proof / signal band (detail pages, per-product accent) === */
.detail-proof { text-align: center; }
.proof-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--t-accent-bright);
  margin-bottom: clamp(20px, 3vw, 34px);
}
.proof-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  max-width: 980px;
  margin: 0 auto;
}
.proof-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 34px) 16px;
  border-radius: 20px;
  border: 1px solid var(--t-border);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--t-accent-rgb), 0.10), transparent 70%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s ease, box-shadow .35s ease;
}
.proof-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--t-accent-bright-rgb), 0.45);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.proof-v {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 5.4vw, 68px);
  line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--t-accent-bright), var(--t-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.proof-v--word { font-size: clamp(26px, 3.2vw, 40px); letter-spacing: .01em; }
.proof-l {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-text-muted);
  max-width: 18ch;
}

/* Compact trust-seal strip — sits beneath the proof band on detail pages.
   Title-only (no subtitle) to stay quiet; per-product accent via theme tokens.
   Logical padding/gap so it mirrors cleanly under [dir=rtl]. */
.seal-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  margin: clamp(22px, 3vw, 36px) auto 0;
  padding: 0;
  max-width: 920px;
  list-style: none;
}
.seal-strip li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px clamp(13px, 1.4vw, 18px);
  border-radius: 999px;
  border: 1px solid var(--t-border);
  background:
    radial-gradient(circle at 18% 50%, rgba(var(--t-accent-rgb), 0.10), transparent 60%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(var(--t-accent-rgb), 0.05);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--t-accent-ink);
  white-space: nowrap;
}
.seal-strip__ring {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--t-accent-ink);
}
.seal-strip__ring svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* === Store badge primitives (shared by the store vitrine below) === */
.store-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.store-glyph { width: 22px; height: 22px; fill: var(--t-text); flex: none; }
.store-badge__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--t-text);
  white-space: nowrap;
}

/* === Store vitrine (BYTE-IDENTICAL across all 4 detail pages) ===
   A premium "coming soon" showcase: eyebrow + heading, two non-clickable store
   badges (span-based, aria-disabled, visible "Coming soon" tag), and a
   corner-bracketed frame holding the master lamp (filterless) — no fake QR
   pattern, no store links, no ratings. Every colour reads var(--t-accent*),
   so a single shared block tints itself per product with zero markup change.
   Logical properties + clamp so it mirrors cleanly under [dir=rtl]. */
.store-vitrine {
  padding: clamp(40px, 5vw, 76px) 0 clamp(28px, 3.4vw, 52px);
  position: relative;
}
.store-vitrine__inner {
  max-width: 940px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: 24px;
  border: 1px solid var(--t-border);
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--t-accent-rgb), 0.10), transparent 62%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px var(--t-shadow-deep, rgba(0, 0, 0, 0.28));
}
.store-vitrine__copy { min-width: 0; }
.store-vitrine__eyebrow {
  display: block;
  color: var(--t-accent-ink);
  letter-spacing: .32em;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.store-vitrine__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--t-text);
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  max-width: 20ch;
}
.store-vitrine .store-row { justify-content: flex-start; }
/* Non-interactive store badge (span, aria-disabled) with visible "coming soon" tag. */
.store-vitrine__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.30);
  background: linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  opacity: .78;
  cursor: default;
}
.store-vitrine__badge .store-glyph { fill: var(--t-text); }
.store-vitrine__badge .store-badge__line { display: flex; flex-direction: column; line-height: 1.15; }
.store-vitrine__badge .store-badge__pre {
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--t-text-muted);
}
.store-vitrine__badge .store-badge__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--t-text);
  white-space: nowrap;
}
.store-vitrine__soon {
  position: absolute;
  inset-block-start: -9px;
  inset-inline-end: 12px;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--t-accent-bright);
  background: var(--t-bg, #07101f);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.45);
  border-radius: 999px;
  padding: 2px 9px;
}
/* Corner-bracketed frame — CSS-drawn brackets, master lamp inside (no filter). */
.store-vitrine__frame {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.store-vitrine__qr {
  position: relative;
  inline-size: min(200px, 46vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 18px;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--t-accent-rgb), 0.14), transparent 68%),
    linear-gradient(180deg, var(--t-bg-card-2), var(--t-bg-card-1));
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(var(--t-accent-rgb), 0.06);
}
.store-vitrine__qr::before,
.store-vitrine__qr::after {
  content: "";
  position: absolute;
  inline-size: 26px;
  block-size: 26px;
  border: 2px solid var(--t-accent-bright);
  opacity: .85;
}
.store-vitrine__qr::before {
  inset-block-start: 10px;
  inset-inline-start: 10px;
  border-inline-end: 0;
  border-block-end: 0;
  border-start-start-radius: 8px;
}
.store-vitrine__qr::after {
  inset-block-end: 10px;
  inset-inline-end: 10px;
  border-inline-start: 0;
  border-block-start: 0;
  border-end-end-radius: 8px;
}
.store-vitrine__corner {
  position: absolute;
  inline-size: 26px;
  block-size: 26px;
  border: 2px solid var(--t-accent-bright);
  opacity: .85;
}
.store-vitrine__corner--tr {
  inset-block-start: 10px;
  inset-inline-end: 10px;
  border-inline-start: 0;
  border-block-end: 0;
  border-start-end-radius: 8px;
}
.store-vitrine__corner--bl {
  inset-block-end: 10px;
  inset-inline-start: 10px;
  border-inline-end: 0;
  border-block-start: 0;
  border-end-start-radius: 8px;
}
.store-vitrine__lamp {
  inline-size: 58%;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 26px rgba(var(--t-accent-rgb), 0.28));
}
.store-vitrine__hint {
  max-width: 22ch;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--t-text-muted);
}

@media (max-width: 1180px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .detail-hero { padding: 24px 0 48px; gap: 18px; }
  .detail-lockup .main-wordmark { font-size: clamp(48px, 14vw, 72px); }
  .capability-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .uses-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .detail-final-inner { padding: 32px 22px; }
  .proof-band { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
  .store-vitrine__inner { grid-template-columns: 1fr; text-align: center; gap: clamp(24px, 6vw, 34px); }
  .store-vitrine__copy { display: flex; flex-direction: column; align-items: center; }
  .store-vitrine__title { max-width: 100%; }
  .store-vitrine .store-row { justify-content: center; }
  .store-vitrine__frame { order: -1; }
}

/* === Capability feature rows (cinematic, detail pages) === */
.cap-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 48px); /* non-JS / reduced-motion fallback: simple vertical sequence */
  max-width: 1180px;
  margin: 0 auto;
}
/* Pinned cinematic stage — JS (cinematic.js §2c) adds .is-staged ONLY when motion is
   allowed. The rows overlap in one viewport stage and are cycled one-at-a-time (homepage
   scene-showcase logic, shorter pin). overflow-x:clip lives on the stage itself so the
   slide-in is contained without page h-scroll and without clipping any pin ancestor.
   reduced-motion / no-JS never get this class → rows stay in the vertical layout above. */
/* Pinned cinematic stage — JS (cinematic.js §2c) adds .is-staged to #capabilities ONLY when
   motion is allowed. The whole SECTION pins as one unit: the heading stays fixed at the top
   (cleared below the sticky nav) while the 4 capabilities cycle one-at-a-time in the stage
   below it. Capability 1 is already on-stage as the section arrives, so there is NO empty
   screen to scroll past. reduced-motion / no-JS never get the class → heading + rows render
   in the normal vertical flow. */
#capabilities.is-staged {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: clamp(92px, 13vh, 150px) 0 clamp(18px, 4vh, 44px);
}
#capabilities.is-staged .detail-heading { flex: 0 0 auto; margin-bottom: clamp(8px, 2vh, 24px); }
#capabilities.is-staged .cap-rows {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;          /* its children are absolute (out of flow); without this the auto-margin flex item collapses to 0 width */
  max-width: none;      /* span the FULL content width like the nav (was capped at 1180 → looked inset) */
  display: block;
  overflow-x: clip;
}
#capabilities.is-staged .cap-rows .cap-row {
  position: absolute;
  inset: 0;
  width: 100%;
  grid-template-columns: 1fr 1fr;   /* equal halves → the gap sits on the page centre, so every row is symmetric */
  align-content: center;            /* vertical center within the stage area below the heading */
  gap: clamp(36px, 4.5vw, 88px);    /* the ONE centre gap — identical for all four; the pair always clusters at the middle */
}
/* Mock + copy each hug the centre line on their own side and meet across the gap,
   so capabilities 2 & 4 (copy on the left) MIRROR 1 & 3 instead of flinging the copy to the far corner.
   The visible card↔text distance is then exactly the grid gap above — the same on every row. */
#capabilities.is-staged .cap-row:nth-child(odd)  .cap-mock { justify-self: end; }
#capabilities.is-staged .cap-row:nth-child(even) .cap-mock { justify-self: start; }
#capabilities.is-staged .cap-row:nth-child(even) .cap-copy { align-items: flex-end; text-align: right; }
[dir="rtl"] #capabilities.is-staged .cap-row:nth-child(even) .cap-copy { align-items: flex-start; text-align: left; }
#capabilities.is-staged .cap-mock {
  height: min(54vh, 500px);         /* definite height caps overflow; aspect-ratio derives a definite width (no collapse) */
  width: auto;
}
.cap-row {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 84px);
}
.cap-row:nth-child(even) .cap-mock { order: 2; } /* alternate sides */
.cap-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}
[dir="rtl"] .cap-copy { align-items: flex-end; text-align: right; }
.cap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t-text-faded);
}
.cap-eyebrow b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--t-accent-bright);
}
.cap-copy h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--t-text);
  margin: 2px 0 0;
  max-width: 16ch;
}
.cap-copy p {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--t-text-muted);
}

/* Device mockup frame (CSS placeholder — real screenshots/footage swap into the same slot) */
.cap-mock {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--t-border);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  box-shadow: 0 30px 70px var(--t-shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cap-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 62% at 28% 16%, rgba(var(--t-accent-rgb), 0.20), transparent 70%);
}
.cap-mock__bar { display: flex; gap: 7px; padding: 2px 4px; }
.cap-mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--t-accent-rgb), 0.30); }
.cap-mock__bar i:first-child { background: rgba(var(--t-accent-bright-rgb), 0.65); }
.cap-mock__screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 4px clamp(10px, 2vw, 24px);
}

/* 1 — smart conversations (chat) */
.cm-bub { display: block; height: 15px; border-radius: 10px; }
.cm-bub--in { width: 64%; background: rgba(255, 255, 255, 0.08); }
.cm-bub--out { width: 50%; align-self: flex-end; background: rgba(var(--t-accent-rgb), 0.30); }
[dir="rtl"] .cm-bub--out { align-self: flex-start; }
.cm-short { width: 40%; }
.cm-field {
  margin-top: 10px; height: 36px; border-radius: 12px;
  border: 1px solid var(--t-border); background: var(--t-bg-input); position: relative;
}
.cm-field b { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; background: var(--t-grad-gold-engrave); }
[dir="rtl"] .cm-field b { right: auto; left: 8px; }

/* 2 — cross-tool memory (node + source chips) */
.cap-mock--mem .cap-mock__screen { align-items: center; }
.cm-node {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); color: var(--t-accent-bright); font-size: 24px;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.5); background: rgba(var(--t-accent-rgb), 0.10);
  box-shadow: 0 0 28px rgba(var(--t-accent-rgb), 0.20);
}
.cm-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 280px; }
.cm-chips span {
  font-size: 11px; letter-spacing: .03em; padding: 6px 13px; border-radius: 999px;
  color: var(--t-text-muted); border: 1px solid var(--t-border-soft); background: rgba(var(--t-accent-rgb), 0.05);
}

/* 3 — multi-modal input (modes + waveform) */
.cap-mock--modes .cap-mock__screen { align-items: center; }
.cm-modes { display: flex; gap: 12px; }
.cm-modes i {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--t-border-soft); background: rgba(var(--t-accent-rgb), 0.07);
}
.cm-modes i:nth-child(2) { background: rgba(var(--t-accent-rgb), 0.16); border-color: rgba(var(--t-accent-bright-rgb), 0.4); }
.cm-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 40px; }
.cm-wave i { width: 4px; border-radius: 2px; background: rgba(var(--t-accent-bright-rgb), 0.55); height: 30%; }
.cm-wave i:nth-child(2) { height: 70%; }
.cm-wave i:nth-child(3) { height: 45%; }
.cm-wave i:nth-child(4) { height: 90%; }
.cm-wave i:nth-child(5) { height: 60%; }
.cm-wave i:nth-child(6) { height: 100%; }
.cm-wave i:nth-child(7) { height: 50%; }
.cm-wave i:nth-child(8) { height: 75%; }
.cm-wave i:nth-child(9) { height: 35%; }

/* 4 — privacy-first (lock + masked rows) */
.cap-mock--priv .cap-mock__screen { align-items: center; gap: 18px; }
.cm-lock { position: relative; width: 52px; height: 44px; border-radius: 10px; background: var(--t-grad-gold-engrave); margin-top: 14px; }
.cm-lock::before {
  content: ""; position: absolute; left: 50%; top: -16px; transform: translateX(-50%);
  width: 26px; height: 24px; border: 4px solid var(--t-accent-bright); border-bottom: none; border-radius: 14px 14px 0 0;
}
.cm-mask { display: flex; gap: 8px; }
.cm-mask span { width: 40px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }

/* === Detail-page cap-mock variants (flow / voxbridge / career-coach) — same system as assistant, accent-tokenised === */

/* flow cap-mock variants */

/* 1 — visual builder (snap-grid canvas + connected nodes, one mid-drag) */
.cap-mock--fl1 .cap-mock__screen { align-items: center; }
.cap-mock--fl1 .fm-canvas {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 116px;
  border-radius: 14px;
  border: 1px solid var(--t-border-soft);
  background:
    linear-gradient(rgba(var(--t-accent-rgb), 0.10) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(var(--t-accent-rgb), 0.10) 1px, transparent 1px) 0 0 / 24px 100%,
    rgba(var(--t-accent-rgb), 0.04);
}
.cap-mock--fl1 .fm-node {
  position: absolute;
  width: 46px; height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.45);
  background: rgba(var(--t-accent-rgb), 0.16);
}
.cap-mock--fl1 .fm-node--a { left: 22px; top: 26px; }
.cap-mock--fl1 .fm-node--b { right: 22px; bottom: 26px; }
.cap-mock--fl1 .fm-link {
  position: absolute;
  left: 64px; top: 50px;
  width: 96px; height: 2px;
  background: linear-gradient(90deg, rgba(var(--t-accent-bright-rgb), 0.55), rgba(var(--t-accent-bright-rgb), 0.20));
  transform: rotate(20deg);
  transform-origin: left center;
}
.cap-mock--fl1 .fm-ghost {
  position: absolute;
  right: 30px; top: 18px;
  width: 46px; height: 26px;
  border-radius: 8px;
  border: 1px dashed rgba(var(--t-accent-bright-rgb), 0.6);
  background: var(--t-grad-gold-engrave);
  opacity: .9;
  box-shadow: 0 6px 18px rgba(var(--t-accent-rgb), 0.30);
}

/* 2 — 100+ integrations (central hub + app chips radiating out) */
.cap-mock--fl2 .cap-mock__screen { align-items: center; }
.cap-mock--fl2 .fm-hub {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--font-display); color: var(--t-accent-bright); font-size: 24px;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.5); background: rgba(var(--t-accent-rgb), 0.10);
  box-shadow: 0 0 28px rgba(var(--t-accent-rgb), 0.20);
}
.cap-mock--fl2 .fm-apps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 280px; }
.cap-mock--fl2 .fm-apps span {
  font-size: 11px; letter-spacing: .03em; padding: 6px 13px; border-radius: 10px;
  color: var(--t-text-muted); border: 1px solid var(--t-border-soft); background: rgba(var(--t-accent-rgb), 0.05);
}

/* 3 — triggers + schedules (trigger sources feeding a single run rail) */
.cap-mock--fl3 .cap-mock__screen { align-items: center; }
.cap-mock--fl3 .fm-triggers { display: flex; gap: 12px; }
.cap-mock--fl3 .fm-triggers i {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--t-border-soft); background: rgba(var(--t-accent-rgb), 0.07);
  position: relative;
}
.cap-mock--fl3 .fm-triggers i::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%; background: rgba(var(--t-accent-bright-rgb), 0.30);
}
.cap-mock--fl3 .fm-triggers i:nth-child(2) {
  background: rgba(var(--t-accent-rgb), 0.16); border-color: rgba(var(--t-accent-bright-rgb), 0.4);
}
.cap-mock--fl3 .fm-triggers i:nth-child(2)::after { background: var(--t-grad-gold-engrave); }
.cap-mock--fl3 .fm-flow {
  display: flex; align-items: center; gap: 0;
  width: 200px; max-width: 80%;
}
.cap-mock--fl3 .fm-rail {
  flex: 1; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--t-accent-bright-rgb), 0.20), rgba(var(--t-accent-bright-rgb), 0.6));
}
.cap-mock--fl3 .fm-run {
  width: 54px; height: 22px; border-radius: 999px; margin-left: -1px;
  background: var(--t-grad-gold-engrave);
  box-shadow: 0 0 22px rgba(var(--t-accent-rgb), 0.30);
}
[dir="rtl"] .cap-mock--fl3 .fm-rail {
  background: linear-gradient(270deg, rgba(var(--t-accent-bright-rgb), 0.20), rgba(var(--t-accent-bright-rgb), 0.6));
}
[dir="rtl"] .cap-mock--fl3 .fm-run { margin-left: 0; margin-right: -1px; }

/* 4 — human handoffs (flow pauses at a person, approve / fallback gate) */
.cap-mock--fl4 .cap-mock__screen { align-items: center; gap: 20px; }
.cap-mock--fl4 .fm-track { display: flex; align-items: center; gap: 10px; }
.cap-mock--fl4 .fm-track i {
  width: 32px; height: 18px; border-radius: 6px;
  border: 1px solid var(--t-border-soft); background: rgba(var(--t-accent-rgb), 0.10);
}
.cap-mock--fl4 .fm-person {
  position: relative;
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.5);
  background: rgba(var(--t-accent-rgb), 0.10);
  box-shadow: 0 0 28px rgba(var(--t-accent-rgb), 0.20);
}
.cap-mock--fl4 .fm-person::before {
  content: ""; position: absolute; left: 50%; top: 13px; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--t-grad-gold-engrave);
}
.cap-mock--fl4 .fm-person::after {
  content: ""; position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  width: 26px; height: 13px; border-radius: 13px 13px 0 0; background: var(--t-grad-gold-engrave);
}
.cap-mock--fl4 .fm-gate { display: flex; gap: 14px; }
.cap-mock--fl4 .fm-gate b { width: 28px; height: 28px; border-radius: 9px; }
.cap-mock--fl4 .fm-gate--ok {
  background: rgba(var(--t-accent-rgb), 0.18);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.55);
}
.cap-mock--fl4 .fm-gate--no {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--t-border-soft);
}

/* voxbridge cap-mock variants */

/* 1 — real-time translation (source line -> bridge node -> target line) */
.cap-mock--vx1 .cap-mock__screen { align-items: stretch; gap: 14px; }
.cap-mock--vx1 .vm-line { display: flex; align-items: center; gap: 10px; }
.cap-mock--vx1 .vm-line span:first-child {
  flex-shrink: 0; font-size: 10px; letter-spacing: .06em; padding: 4px 9px; border-radius: 999px;
  color: var(--t-text-muted); border: 1px solid var(--t-border-soft); background: rgba(var(--t-accent-rgb), 0.05);
}
.cap-mock--vx1 .vm-line i { display: block; height: 13px; border-radius: 8px; flex: 1; }
.cap-mock--vx1 .vm-src i { width: 60%; background: rgba(255, 255, 255, 0.08); }
.cap-mock--vx1 .vm-tgt i { width: 60%; background: rgba(var(--t-accent-rgb), 0.30); }
.cap-mock--vx1 .vm-bridge { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cap-mock--vx1 .vm-bridge::before,
.cap-mock--vx1 .vm-bridge::after {
  content: ""; height: 1px; flex: 1; max-width: 88px;
  background: linear-gradient(90deg, transparent, rgba(var(--t-accent-bright-rgb), 0.5), transparent);
}
.cap-mock--vx1 .vm-node {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); color: var(--t-accent-bright); font-size: 20px;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.5); background: rgba(var(--t-accent-rgb), 0.10);
  box-shadow: 0 0 26px rgba(var(--t-accent-rgb), 0.20);
}

/* 2 — 120+ languages (globe node + orbiting language chips) */
.cap-mock--vx2 .cap-mock__screen { align-items: center; }
.cap-mock--vx2 .vm-globe {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.5); background: rgba(var(--t-accent-rgb), 0.10);
  box-shadow: 0 0 28px rgba(var(--t-accent-rgb), 0.20);
}
.cap-mock--vx2 .vm-globe::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.35);
}
.cap-mock--vx2 .vm-globe::after {
  content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; transform: translateX(-50%);
  background: rgba(var(--t-accent-bright-rgb), 0.35);
}
.cap-mock--vx2 .vm-langs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 290px; }
.cap-mock--vx2 .vm-langs span {
  font-size: 11px; letter-spacing: .03em; padding: 6px 13px; border-radius: 999px;
  color: var(--t-text-muted); border: 1px solid var(--t-border-soft); background: rgba(var(--t-accent-rgb), 0.05);
}

/* 3 — speaker identification (two speakers + diarised tracks) */
.cap-mock--vx3 .cap-mock__screen { align-items: stretch; gap: 14px; }
.cap-mock--vx3 .vm-track { display: flex; align-items: center; gap: 10px; }
.cap-mock--vx3 .vm-who {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 13px; color: var(--t-accent-bright);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.5); background: rgba(var(--t-accent-rgb), 0.10);
}
.cap-mock--vx3 .vm-b .vm-who { color: var(--t-text-muted); border-color: var(--t-border-soft); background: rgba(255, 255, 255, 0.05); }
.cap-mock--vx3 .vm-bars { display: flex; align-items: center; gap: 4px; flex: 1; height: 26px; }
.cap-mock--vx3 .vm-bars i { width: 4px; border-radius: 2px; height: 40%; }
.cap-mock--vx3 .vm-a .vm-bars i { background: rgba(var(--t-accent-bright-rgb), 0.55); }
.cap-mock--vx3 .vm-b .vm-bars i { background: rgba(255, 255, 255, 0.16); }
.cap-mock--vx3 .vm-bars i:nth-child(2) { height: 85%; }
.cap-mock--vx3 .vm-bars i:nth-child(3) { height: 55%; }
.cap-mock--vx3 .vm-bars i:nth-child(4) { height: 100%; }
.cap-mock--vx3 .vm-bars i:nth-child(5) { height: 65%; }
.cap-mock--vx3 .vm-bars i:nth-child(6) { height: 90%; }
.cap-mock--vx3 .vm-bars i:nth-child(7) { height: 45%; }
.cap-mock--vx3 .vm-bars i:nth-child(8) { height: 75%; }
.cap-mock--vx3 .vm-b .vm-bars i:nth-child(2) { height: 60%; }
.cap-mock--vx3 .vm-b .vm-bars i:nth-child(3) { height: 95%; }
.cap-mock--vx3 .vm-b .vm-bars i:nth-child(4) { height: 50%; }
.cap-mock--vx3 .vm-b .vm-bars i:nth-child(5) { height: 80%; }
.cap-mock--vx3 .vm-b .vm-bars i:nth-child(6) { height: 40%; }
.cap-mock--vx3 .vm-b .vm-bars i:nth-child(7) { height: 70%; }
.cap-mock--vx3 .vm-b .vm-bars i:nth-child(8) { height: 55%; }

/* 4 — meeting summaries (summary card: title + checked items + timestamped highlight) */
.cap-mock--vx4 .cap-mock__screen { align-items: stretch; }
.cap-mock--vx4 .vm-card {
  border: 1px solid var(--t-border); border-radius: 14px; background: var(--t-bg-input);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.cap-mock--vx4 .vm-title { height: 11px; width: 48%; border-radius: 6px; background: rgba(var(--t-accent-rgb), 0.30); }
.cap-mock--vx4 .vm-item { display: flex; align-items: center; gap: 10px; }
.cap-mock--vx4 .vm-item b {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 5px; background: var(--t-grad-gold-engrave);
}
.cap-mock--vx4 .vm-item i { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); flex: 1; }
.cap-mock--vx4 .vm-item:nth-child(3) i { flex: 0 0 70%; }
.cap-mock--vx4 .vm-stamp { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.cap-mock--vx4 .vm-stamp span {
  flex-shrink: 0; font-size: 10px; letter-spacing: .06em; padding: 4px 9px; border-radius: 7px;
  color: var(--t-accent-bright); border: 1px solid rgba(var(--t-accent-bright-rgb), 0.4); background: rgba(var(--t-accent-rgb), 0.07);
}
.cap-mock--vx4 .vm-stamp i { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); width: 55%; }

/* career-coach cap-mock variants */

/* 1 — personalised roadmap (adaptive milestone path) */
.cap-mock--cc1 .cap-mock__screen { align-items: center; gap: 18px; }
.cap-mock--cc1 .rm-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 280px;
}
.cap-mock--cc1 .rm-step {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid var(--t-border-soft);
  background: rgba(255, 255, 255, 0.04);
}
.cap-mock--cc1 .rm-step + .rm-step {
  margin-left: 52px;
  position: relative;
}
.cap-mock--cc1 .rm-step + .rm-step::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 52px;
  height: 2px;
  transform: translateY(-50%);
  background: var(--t-border-soft);
}
.cap-mock--cc1 .rm-step--done {
  border-color: rgba(var(--t-accent-bright-rgb), 0.5);
  background: rgba(var(--t-accent-rgb), 0.18);
}
.cap-mock--cc1 .rm-step--now {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.55);
  background: rgba(var(--t-accent-rgb), 0.12);
  box-shadow: 0 0 22px rgba(var(--t-accent-rgb), 0.22);
}
.cap-mock--cc1 .rm-step--now b {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--t-grad-gold-engrave);
}
.cap-mock--cc1 .rm-step--now::after { width: 56px; right: 22px; }
.cap-mock--cc1 .rm-track {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--t-border-soft);
  overflow: hidden;
}
.cap-mock--cc1 .rm-track--fill {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: rgba(var(--t-accent-rgb), 0.42);
}

/* 2 — interview prep (question + voice-feedback reply) */
.cap-mock--cc2 .cap-mock__screen { align-items: stretch; gap: 14px; }
.cap-mock--cc2 .rm-ask {
  display: block;
  width: 58%;
  height: 30px;
  border-radius: 12px 12px 12px 4px;
  border: 1px solid var(--t-border);
  background: rgba(255, 255, 255, 0.06);
}
.cap-mock--cc2 .rm-reply {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 64%;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px 12px 4px 12px;
  background: rgba(var(--t-accent-rgb), 0.18);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.35);
}
.cap-mock--cc2 .rm-reply i {
  flex: 1;
  border-radius: 2px;
  background: rgba(var(--t-accent-bright-rgb), 0.6);
  height: 30%;
}
.cap-mock--cc2 .rm-reply i:nth-child(2) { height: 64%; }
.cap-mock--cc2 .rm-reply i:nth-child(3) { height: 42%; }
.cap-mock--cc2 .rm-reply i:nth-child(4) { height: 86%; }
.cap-mock--cc2 .rm-reply i:nth-child(5) { height: 55%; }
.cap-mock--cc2 .rm-reply i:nth-child(6) { height: 100%; }
.cap-mock--cc2 .rm-reply i:nth-child(7) { height: 48%; }
.cap-mock--cc2 .rm-reply i:nth-child(8) { height: 72%; }
.cap-mock--cc2 .rm-reply i:nth-child(9) { height: 34%; }
.cap-mock--cc2 .rm-cue {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.cap-mock--cc2 .rm-cue span {
  width: 30px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}
.cap-mock--cc2 .rm-cue span:first-child {
  width: 38px;
  background: rgba(var(--t-accent-rgb), 0.3);
}

/* 3 — skill assessments (calibrated benchmark bars vs. tier line) */
.cap-mock--cc3 .cap-mock__screen { align-items: center; }
.cap-mock--cc3 .rm-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  height: 96px;
  width: 100%;
  max-width: 260px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--t-border-soft);
}
.cap-mock--cc3 .rm-bars i {
  width: 26px;
  border-radius: 6px 6px 0 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--t-border-soft);
  border-bottom: none;
  height: 38%;
}
.cap-mock--cc3 .rm-bars i:nth-child(2) { height: 62%; }
.cap-mock--cc3 .rm-bars i:nth-child(3) {
  height: 88%;
  background: rgba(var(--t-accent-rgb), 0.32);
  border-color: rgba(var(--t-accent-bright-rgb), 0.45);
}
.cap-mock--cc3 .rm-bars i:nth-child(4) { height: 54%; }
.cap-mock--cc3 .rm-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(var(--t-accent-bright-rgb), 0.55) 0 7px, transparent 7px 13px);
}

/* 4 — goal tracking (weekly progress ring + streak dots) */
.cap-mock--cc4 .cap-mock__screen { align-items: center; gap: 20px; }
.cap-mock--cc4 .rm-ring {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(rgba(var(--t-accent-rgb), 0.55) 0 68%, rgba(255, 255, 255, 0.06) 68% 100%);
}
.cap-mock--cc4 .rm-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  border: 1px solid var(--t-border-soft);
}
.cap-mock--cc4 .rm-ring b {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--t-grad-gold-engrave);
}
.cap-mock--cc4 .rm-week {
  display: flex;
  gap: 9px;
}
.cap-mock--cc4 .rm-week i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--t-border-soft);
  background: rgba(255, 255, 255, 0.04);
}
.cap-mock--cc4 .rm-week i:nth-child(-n + 4) {
  border-color: rgba(var(--t-accent-bright-rgb), 0.5);
  background: rgba(var(--t-accent-rgb), 0.28);
}


@media (max-width: 860px) {
  .cap-row { grid-template-columns: 1fr; gap: 22px; max-width: 520px; margin: 0 auto; }
  .cap-row:nth-child(even) .cap-mock { order: 0; }
  .cap-copy { align-items: flex-start; text-align: left; }
  [dir="rtl"] .cap-copy { align-items: flex-end; text-align: right; }
}

/* === Cookie consent banner === */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 2vw, 28px);
  transform: translate(-50%, 30px);
  z-index: 180;
  width: min(880px, calc(100vw - 32px));
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.18,.82,.28,1);
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.cookie-banner__panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(16px, 1.8vw, 22px) clamp(20px, 2vw, 26px);
  border-radius: 22px;
  border: 1px solid var(--t-border-strong);
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--t-accent-rgb), 0.12), transparent 45%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cookie-banner__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--t-accent-bright);
  background: rgba(var(--t-accent-rgb), 0.10);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.35);
  flex: 0 0 42px;
}
.cookie-banner__copy strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--t-text);
  letter-spacing: .005em;
  margin-bottom: 4px;
}
.cookie-banner__copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-text-muted);
  max-width: 540px;
}
.cookie-banner__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookie-btn {
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
  white-space: nowrap;
}
.cookie-btn--ghost {
  background: transparent;
  color: var(--t-text-soft);
  border: 1px solid var(--t-border-strong);
}
.cookie-btn--ghost:hover {
  color: var(--t-text);
  border-color: var(--t-accent-bright);
}
.cookie-btn--accent {
  background: var(--t-grad-gold-engrave);
  color: var(--t-cta-text);
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.5);
  box-shadow: 0 8px 22px rgba(var(--t-accent-rgb), 0.28);
}
.cookie-btn--accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(var(--t-accent-rgb), 0.36);
}
@media (max-width: 760px) {
  .cookie-banner__panel { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .cookie-banner__icon { display: none; }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-btn { flex: 1; text-align: center; }
}

.how-it-works {
  padding: clamp(64px, 8vw, 100px) 0 clamp(32px, 4vw, 56px);
  position: relative;
}
.how-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 72px);
}
.how-heading span {
  display: block;
  color: var(--t-accent-ink);
  letter-spacing: .35em;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.how-heading h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.8vw, 68px);
  line-height: 1.08;
  margin: 0 0 18px;
  color: var(--t-text);
  letter-spacing: -.02em;
}
.how-heading p {
  margin: 0 auto;
  max-width: 560px;
  color: var(--t-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  position: relative;
  max-width: 1100px;
}
.how-steps::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--t-accent-soft) 16%, var(--t-accent) 50%, var(--t-accent-soft) 84%, transparent);
  z-index: 0;
}
.how-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 clamp(8px, 1.5vw, 20px);
}
.how-step .step-number {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-5);
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--t-accent-rgb), 0.18), transparent 60%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  border: 1px solid var(--t-border);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--t-accent-bright);
  letter-spacing: .04em;
  box-shadow: inset 0 0 14px rgba(var(--t-accent-rgb), 0.12), 0 10px 28px var(--t-shadow-card);
  transition: border-color .35s ease, box-shadow .35s ease;
}
/* Progressive ascent — the journey culminates in "Elevate". Each step's
   number ring carries a touch more gold than the last. nth-child follows DOM
   order (01/02/03), so it stays correct under RTL where the row visually
   reverses. */
.how-step:nth-child(2) .step-number {
  border-color: rgba(var(--t-accent-rgb), 0.55);
  box-shadow: inset 0 0 18px rgba(var(--t-accent-rgb), 0.2), 0 12px 32px var(--t-shadow-card);
}
.how-step:nth-child(3) .step-number {
  border-color: var(--t-accent-bright);
  box-shadow: inset 0 0 22px rgba(var(--t-accent-rgb), 0.32), 0 16px 40px rgba(var(--t-accent-rgb), 0.22);
}
.how-step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 0 0 var(--space-3);
  color: var(--t-text);
  letter-spacing: -.01em;
}
.how-step p {
  margin: 0;
  color: var(--t-text-muted);
  line-height: 1.65;
  font-size: 14.5px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.trust-band {
  margin: clamp(40px, 5vw, 64px) 0 clamp(20px, 2.5vw, 32px);
  padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3vw, 48px);
  border: 1px solid var(--t-border-soft);
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 20%, rgba(var(--t-accent-rgb), 0.07), transparent 40%),
    radial-gradient(circle at 18% 90%, rgba(24, 183, 175, 0.05), transparent 35%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Trust seals — engraved-gold assurance marks (replaces the old numeric stat band).
   Static by design: a seal reads as permanent, so no idle animation — only a
   restrained warmth-lift on hover. Colours are theme tokens throughout; the
   AA-safe --t-accent-ink keeps titles legible in both light and dark. */
.trust-seals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-seal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 0 clamp(6px, 1vw, 14px);
}
/* hairline divider between seals — logical inset-inline-end so it mirrors under RTL */
.trust-seal:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(-0.5 * clamp(18px, 2.2vw, 34px));
  top: 12%;
  height: 76%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--t-accent-soft), transparent);
}
.seal-ring {
  display: grid;
  place-items: center;
  width: clamp(44px, 4.4vw, 56px);
  height: clamp(44px, 4.4vw, 56px);
  border-radius: 50%;
  color: var(--t-accent-ink);
  border: 1px solid var(--t-border);
  /* engraved well: radial accent glow set into a soft inset shadow */
  background: radial-gradient(circle at 50% 38%, rgba(var(--t-accent-rgb), 0.20), transparent 68%);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(var(--t-accent-rgb), 0.08),
    0 1px 0 rgba(255, 255, 255, 0.05);
}
.seal-ring svg {
  width: 52%;
  height: 52%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.seal-t {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--t-accent-ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.seal-b {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-text-muted);
  max-width: 22ch;
}

/* D-03 — trust-seal "engrave" on first reveal (one-shot, feat/design-preview).
   The D-03 IIFE in index.html measures each mark's stroke length, then arms this
   with .d03-armed ONLY after it successfully hooks — so without JS (or on error)
   the seals render fully visible and nothing below applies. Each mark's SVG stroke
   is drawn like an engraving into its gold well (~900ms), then the label + line ink
   in; the 4 seals stagger 120ms. Seal content (SOC 2, SLA, …) is never touched. */
.trust-seals.d03-armed .seal-ring svg :is(path, circle, rect) {
  stroke-dasharray: var(--d03-l);
  stroke-dashoffset: var(--d03-l);
}
.trust-seals.d03-armed .seal-t,
.trust-seals.d03-armed .seal-b { opacity: 0; }
/* The drawn resting state is set EXPLICITLY visible (opacity 1 / dashoffset 0); the
   animation (fill: both → hidden during its delay, then inks in) only provides the
   entrance. So if the animation never runs — disabled engine, an odd browser, IO that
   never fired — the trust content still shows fully. Content is never animation-hostage. */
.trust-seals.d03-armed .trust-seal.d03-drawn .seal-ring svg :is(path, circle, rect) {
  stroke-dashoffset: 0;
  animation: d03-engrave 900ms cubic-bezier(.55, .06, .2, 1) var(--d03-delay, 0ms) both;
}
.trust-seals.d03-armed .trust-seal.d03-drawn .seal-t {
  opacity: 1;
  animation: d03-ink 520ms ease calc(var(--d03-delay, 0ms) + 600ms) both;
}
.trust-seals.d03-armed .trust-seal.d03-drawn .seal-b {
  opacity: 1;
  animation: d03-ink 520ms ease calc(var(--d03-delay, 0ms) + 720ms) both;
}
@keyframes d03-engrave { from { stroke-dashoffset: var(--d03-l); } to { stroke-dashoffset: 0; } }
@keyframes d03-ink { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* reduced-motion: the IIFE already skips arming, but guard here too — strokes and
   labels stay fully drawn/visible with zero animation; content is never hidden. */
@media (prefers-reduced-motion: reduce) {
  .trust-seals.d03-armed .seal-ring svg :is(path, circle, rect) { stroke-dashoffset: 0; animation: none; }
  .trust-seals.d03-armed .seal-t,
  .trust-seals.d03-armed .seal-b { opacity: 1; animation: none; }
}

.showcase {
  padding: clamp(72px, 9vw, 110px) 0 clamp(56px, 7vw, 84px);
  position: relative;
}
.section-heading { text-align: center; max-width: 1000px; margin: 0 auto 42px; }
.section-heading span,
.access-panel span {
  display: block;
  color: var(--t-accent-ink);
  text-transform: uppercase;
  letter-spacing: .35em;
  font-size: 13px;
  margin-bottom: 16px;
}
.section-heading h2,
.access-panel h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.8vw, 68px);
  line-height: 1.08;
  margin: 0;
  color: var(--t-text);
  letter-spacing: -.02em;
}
.section-heading p {
  margin: 20px auto 0;
  max-width: 720px;
  color: var(--t-text-faded);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  line-height: 1.8;
}
.master-lockup {
  display: grid;
  place-items: center;
  margin: 28px 0 40px;
}
.master-lockup .jara-icon { margin-bottom: clamp(4px, 0.6vw, 10px); }
.master-lockup .subtitle { margin-top: clamp(14px, 2vw, 30px); }
.main-wordmark.small { font-size: clamp(56px, 7vw, 120px); margin: 0 0 0 .32em; }
.experience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 22px);
}
.experience-panel {
  padding: clamp(18px, 1.5vw, 26px);
  min-height: 520px;
  transition: transform .45s ease, border-color .35s ease;
}
.experience-panel:hover { transform: translateY(-8px); border-color: var(--t-border-strong); }
.panel-title { text-align: center; margin-bottom: 18px; }
.panel-title .card-word { display: block; font-size: 42px; }
.panel-title .script-label { display: inline-block; }
.experience-panel p {
  color: var(--t-text-muted);
  line-height: 1.6;
  text-align: center;
  min-height: 52px;
}
.ui-preview {
  margin-top: 22px;
  min-height: 300px;
  display: grid;
  grid-template-columns: clamp(36px, 3vw, 44px) 1fr;
  border: 1px solid rgba(var(--t-accent-rgb), 0.24);
  border-radius: 18px;
  overflow: hidden;
  background: var(--t-bg-card-2);
  position: relative;
}
.ui-preview::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: 0;
  width: 80%;
  height: 45%;
  background: linear-gradient(110deg, transparent, var(--teal-soft), transparent);
  filter: blur(12px);
  transform: rotate(-12deg);
  animation: auroraFlow 8s ease-in-out infinite alternate;
}
.ui-preview aside {
  position: relative;
  z-index: 2;
  border-right: 1px solid rgba(var(--t-accent-rgb), 0.2);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 18px;
  padding: 16px 0;
}
.ui-preview aside i {
  width: 16px;
  height: 16px;
  border: 1px solid var(--t-text-trace);
  border-radius: 50%;
}
.ui-preview aside i:nth-child(2) { background: rgba(var(--t-accent-rgb), 0.35); box-shadow: 0 0 18px rgba(var(--t-accent-rgb), 0.22); }
.ui-preview > div { padding: clamp(18px, 1.7vw, 28px); position: relative; z-index: 2; }
.assistant-ui h3,
.career-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0 0 22px;
  font-size: 24px;
  color: var(--t-text);
}
.assistant-ui input {
  width: 100%;
  padding: 16px 18px;
  color: var(--t-text);
  background: var(--t-bg-input);
  border: 1px solid rgba(var(--t-accent-rgb), 0.25);
  border-radius: 16px;
  outline: none;
}
.assistant-ui input:focus { border-color: var(--t-accent-bright); box-shadow: 0 0 24px rgba(var(--t-accent-rgb), 0.14); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips span {
  border: 1px solid var(--t-border-soft);
  border-radius: 999px;
  color: var(--t-text-faded);
  padding: 8px 10px;
  font-size: 10px;
}
.flow-list header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.flow-list button,
.career-card button {
  border: 1px solid rgba(var(--t-accent-rgb), 0.32);
  color: var(--t-accent-bright);
  background: transparent;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 11px;
}
.flow-list span {
  display: flex;
  justify-content: space-between;
  padding: 13px 14px;
  margin: 10px 0;
  border: 1px solid var(--t-border-soft);
  border-radius: 12px;
  color: var(--t-text-muted);
}
.flow-list b { color: var(--teal); font-weight: 500; }
.big-wave { display: flex; justify-content: center; align-items: center; gap: 5px; height: 112px; margin-top: 20px; }
.language-route {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 18px 0;
  flex-wrap: nowrap;
  max-width: 100%;
}
.language-route span {
  border: 1px solid rgba(var(--t-accent-rgb), 0.24);
  border-radius: 10px;
  padding: 7px 10px;
  color: var(--t-text-muted);
  font-size: 11px;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.language-route strong { font-size: 13px; padding: 0 2px; }
.language-route strong { color: var(--t-accent-ink); }
.mic {
  width: 52px;
  height: 52px;
  display: block;
  margin: 18px auto;
  border-radius: 50%;
  border: 1px solid rgba(var(--t-accent-rgb), 0.55);
  color: var(--t-accent-bright);
  background: var(--t-bg-input);
  box-shadow: 0 0 24px rgba(var(--t-accent-rgb), 0.16);
}
.career-card .gauge {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 10px 0 18px;
  background: conic-gradient(var(--teal) 0 78%, rgba(var(--t-accent-rgb), 0.22) 78% 100%);
  box-shadow: inset 0 0 0 10px var(--t-bg-card-1);
}
.career-card .gauge span { font-size: 24px; font-weight: 500; color: var(--t-text); }
.career-card ul { margin: 0 0 18px; padding-left: 18px; color: var(--t-text-muted); }
.career-card li { margin: 7px 0; }
.career-card button { width: 100%; display: flex; justify-content: space-between; padding: 13px 16px; }

.motion-board { padding: 30px 0 90px; }
.motion-header {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: clamp(10px, 1vw, 18px);
  row-gap: clamp(14px, 2vw, 30px);
  margin: 0 auto clamp(28px, 3vw, 40px);
}
.motion-header > .jara-icon { grid-column: 1; grid-row: 1; }
.motion-header > .brand-word { grid-column: 2; grid-row: 1; font-size: clamp(44px, 6vw, 86px); }
.motion-header > small {
  grid-column: 1 / -1;
  grid-row: 2;
  position: static;
  width: auto;
  margin: 0;
  justify-content: center;
}
.motion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 82px;
}
.motion-panel {
  min-height: 330px;
  padding: 32px;
}
.motion-panel h3 {
  margin: 0 0 34px;
  color: var(--t-accent-ink);
  text-transform: uppercase;
  letter-spacing: .38em;
  font-size: 13px;
}
.motion-panel p {
  margin: 28px 0 0;
  color: rgba(var(--t-accent-rgb), 0.78);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: 10px;
}
.motion-panel p span { color: var(--t-accent-bright); }
.motion-sequence {
  display: grid;
  grid-template-columns: 1fr auto 1.5fr;
  align-items: center;
  gap: 20px;
  min-height: 140px;
}
.motion-sequence b { color: var(--t-accent-ink); font-weight: 300; }
/* Logo-reveal scene 1: the brand mark (magic lamp) wakes, sparks, then the
   wordmark unfolds. Pure-CSS: the lamp rises + fades in, two spark glints
   twinkle above the spout. Loops in sync with the other motion demos. */
.sequence-lamp {
  position: relative;
  display: grid;
  place-items: center;
  height: 130px;
}
.sequence-lamp img {
  width: clamp(120px, 60%, 150px);
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(var(--t-accent-rgb), 0.28));
  animation: lampWake 6s ease-in-out infinite;
}
.sequence-lamp::before,
.sequence-lamp::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--t-accent-bright);
  opacity: 0;
  pointer-events: none;
}
.sequence-lamp::before {
  width: 10px;
  height: 10px;
  top: 20%;
  left: 60%;
  box-shadow: 0 0 16px 5px rgba(var(--t-accent-bright-rgb), 0.55);
  animation: lampSpark 6s ease-in-out infinite;
}
.sequence-lamp::after {
  width: 6px;
  height: 6px;
  top: 30%;
  left: 70%;
  box-shadow: 0 0 12px 4px rgba(var(--t-accent-bright-rgb), 0.5);
  animation: lampSpark 6s ease-in-out 0.35s infinite;
}
.sequence-word {
  text-align: center;
  font-size: 48px;
  letter-spacing: .28em;
  margin-left: .28em;
}
.sequence-word small { display: block; color: var(--t-accent-ink); font-size: 7px; letter-spacing: .24em; margin-top: 10px; text-transform: uppercase; }
.hover-state { display: flex; flex-direction: column; justify-content: center; }
.premium-hover {
  width: min(100%, 520px);
  margin: auto;
  padding: 28px 44px;
  color: var(--t-text);
  border: 1px solid var(--t-border-strong);
  background: linear-gradient(180deg, var(--t-bg-input-strong), var(--t-bg-glass-2));
  box-shadow: inset 0 0 32px rgba(var(--t-accent-rgb), 0.08), 0 0 42px rgba(var(--t-accent-rgb), 0.14);
}
.mini-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 168px;
  position: relative;
}
.mini-carousel::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 16px;
  height: 100px;
  border-top: 1px solid rgba(var(--t-accent-rgb), 0.56);
  border-radius: 50%;
  animation: arcShift 5s ease-in-out infinite alternate;
}
.mini-card {
  position: relative;
  z-index: 2;
  width: 132px;
  min-height: 118px;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  border: 1px solid rgba(var(--t-accent-rgb), 0.22);
  border-radius: 16px;
  background: var(--t-bg-input);
  letter-spacing: .18em;
  transition: transform .45s ease, border-color .35s ease;
  color: var(--t-text);
}
.mini-card em { font-family: var(--font-script); color: var(--t-accent-bright); letter-spacing: 0; font-size: 28px; line-height: 1.2; }
.mini-card.selected { transform: translateY(-16px) scale(1.06); border-color: var(--t-border-strong); box-shadow: 0 0 36px rgba(var(--t-accent-rgb), 0.18); }
.prompt-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.language-mini {
  border: 1px solid var(--t-border-strong);
  color: var(--t-text);
  background: var(--t-bg-input);
  border-radius: 999px;
  padding: 18px 24px;
  box-shadow: 0 0 26px rgba(var(--t-accent-rgb), 0.14);
}
.prompt-card {
  position: relative;
  min-width: 420px;
  min-height: 196px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  padding: 24px;
  border: 1px solid rgba(var(--t-accent-rgb), 0.42);
  border-radius: 26px;
  background: linear-gradient(135deg, var(--t-bg-card-1), var(--t-bg-card-2));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 68px var(--t-shadow-card), 0 0 34px rgba(var(--t-accent-rgb), 0.12);
}
.prompt-card ul { margin: 0; padding: 0; list-style: none; color: var(--t-text-muted); font-size: 13px; }
.prompt-card li { padding: 8px 0; cursor: pointer; transition: color .2s ease; }
.prompt-card li:hover { color: var(--t-accent-bright); }
.prompt-card h4 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--t-text);
}
.prompt-wave { bottom: 42px; left: 190px; right: 42px; }

.access-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: clamp(30px, 5vw, 56px);
  margin: 8px 0 26px;
}
.access-panel h2 { font-size: clamp(36px, 4.5vw, 62px); max-width: 760px; }
.access-form { display: flex; gap: 12px; min-width: min(100%, 520px); }
.access-form input {
  min-width: 0;
  flex: 1;
  color: var(--t-text);
  background: var(--t-bg-input-strong);
  border: 1px solid rgba(var(--t-accent-rgb), 0.27);
  border-radius: 999px;
  padding: 18px 22px;
  outline: none;
}
.access-form input::placeholder { color: var(--t-text-faded); }
.access-form input:focus { border-color: var(--t-accent-bright); }
.access-form button {
  border: 1px solid rgba(var(--t-accent-bright-rgb), 0.65);
  padding: 26px 52px;
  color: var(--t-cta-text);
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255, 245, 215, 0.5), transparent 55%),
    var(--t-grad-gold-engrave);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 250px;
  min-height: 64px;
  position: relative;
  box-shadow:
    inset 0 2px 1px rgba(255, 248, 220, 0.78),
    inset 0 -2px 2px rgba(50, 28, 4, 0.55),
    inset 0 0 22px rgba(120, 80, 25, 0.18),
    0 18px 44px rgba(var(--t-accent-rgb), 0.32),
    0 4px 12px rgba(var(--t-accent-rgb), 0.18);
}
.access-form button::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 245, 215, 0.18), transparent 40%);
  pointer-events: none;
  border: 1px solid rgba(50, 28, 4, 0.18);
}
.access-form button .cta-engraved,
span.cta-engraved {
  position: relative;
  z-index: 2;
  display: inline-block;
  /* Textbook centering for letter-spaced text:
     letter-spacing places trailing space AFTER the last glyph, which
     enlarges the bounding box on the right. A negative margin-inline-end
     of the same magnitude removes that trailing space from layout,
     so the flex-centered box wraps the VISIBLE glyphs only. */
  margin-inline-end: -.3em;
  /* Optical vertical centering: all-caps glyphs sit in the upper part of the
     line box (the descender zone below the baseline is empty), so the text
     reads as too high in a flex-centered button. Nudge it down to compensate. */
  transform: translateY(2px);
  line-height: 1;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  /* Premium debossed bronze: letters look cut from dark warm metal, pressed
     into the gold. A vertical bronze gradient (dark at top = in shadow, lighter
     at the foot = catching light) gives the recessed metallic texture; the
     paired text-shadow adds the deboss lip. Gold surface itself is untouched. */
  color: #241606; /* solid fallback for browsers without background-clip:text */
  background: linear-gradient(180deg, #19100a 0%, #2c1c0c 52%, #3c2912 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0.5px rgba(255, 247, 222, 0.5),  /* light catching the lower bevel (deboss) */
    0 -1px 1px rgba(18, 10, 2, 0.42);      /* soft recessed lip at the top */
}
.site-footer {
  margin-top: 32px;
  padding: clamp(40px, 4.5vw, 64px) clamp(28px, 3.5vw, 56px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--t-accent-rgb), 0.10), transparent 38%),
    radial-gradient(circle at 88% 90%, rgba(24, 183, 175, 0.08), transparent 42%),
    linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  border: 1px solid var(--t-border);
  box-shadow: 0 22px 70px var(--t-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.3fr) minmax(0, 2.7fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.footer-brand .footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.footer-brand .brand-word { font-size: clamp(22px, 2vw, 30px); }
.footer-tagline {
  margin: 0 0 22px;
  color: var(--t-text-muted);
  line-height: 1.65;
  font-size: 14px;
  max-width: 340px;
}
.footer-social {
  display: flex;
  gap: 10px;
  align-items: center;
}
.footer-social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--t-border-soft);
  color: var(--t-text-faded);
  transition: color .3s ease, border-color .3s ease, transform .3s ease, background .3s ease;
}
.footer-social a:hover {
  color: var(--t-accent-bright);
  border-color: var(--t-accent-bright);
  background: rgba(var(--t-accent-rgb), 0.08);
  transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }

/* Footer sits on an always-dark gradient in both themes — keep its accent-text
   bright (don't inherit the light-theme darkening, which would be unreadable here). */
.site-footer { --t-accent-ink: var(--t-accent-bright); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
}
.footer-col h3 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--t-accent-ink);
}
.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.footer-col a {
  color: var(--t-text-muted);
  font-size: 13.5px;
  letter-spacing: .01em;
  transition: color .25s ease, transform .25s ease;
  display: inline-block;
}
.footer-col a:hover {
  color: var(--t-accent-bright);
  transform: translateX(2px);
}

.footer-bar {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: clamp(20px, 2vw, 26px);
  border-top: 1px solid var(--t-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-copy {
  color: var(--t-text-faded);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.footer-copy i { color: var(--t-accent-ink); font-style: normal; margin: 0 6px; }
.footer-region {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--t-text-faded);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer-region .globe { color: var(--t-accent-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Progressive enhancement: only hide reveal items when JS is present
   (html.js is set by the inline <head> bootstrap). Without/before JS the
   content stays visible — the page is never blank if a script fails or is slow. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.25,1);
}
/* Must out-specify the gated hiding rule above (html.js [data-reveal] = 0,2,1),
   so the revealed state needs html.js too (0,3,1) to win. */
html.js [data-reveal].revealed { opacity: 1; transform: translateY(0); }

/* Skip-to-content link — first focusable element, visible only on keyboard focus */
.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-180%);
  z-index: 60;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--t-bg-card-1);
  color: var(--t-text);
  border: 1px solid var(--t-border-strong);
  box-shadow: 0 10px 30px var(--t-shadow-deep);
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .25s cubic-bezier(.2,.8,.25,1);
}
.skip-link:focus { transform: translateX(-50%) translateY(0); outline: none; }

/* === Cinematic product showcase — scene-by-scene (one product on stage at a
   time; each enters on scroll, reveals card + stats + copy, then exits as the
   next arrives from the opposite side). Driven by GSAP ScrollTrigger in
   cinematic.js; static stacked fallback under reduced-motion / small screens. */
.showcase { overflow-x: clip; }
.scene-showcase { position: relative; }
/* The stage is pinned briefly so the product's HORIZONTAL slide-in (from its
   side) is the visible action — not the vertical page scroll. All products are
   stacked in the same stage and the scroll drives a continuous, coordinated
   timeline: each slides in from its side as its text appears, then slides back
   out the same way while the next slides in from the opposite side. Apple-style. */
.scene-track { position: relative; height: 100vh; }
.scene-track .scene { position: absolute; inset: 0; }
.scene-pin {
  height: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 90px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(22px, 4vw, 64px);
}
.scene-stage { grid-column: 1; display: grid; place-items: center; position: relative; }
/* soft brand glow so the stage side never feels empty */
.scene-stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 132%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(var(--t-accent-rgb), .17), rgba(24, 183, 175, .05) 42%, transparent 66%);
  filter: blur(28px);
}
.scene-card, .scene .shot { z-index: 1; }
.scene-copy { grid-column: 2; }
.scene--from-right .scene-stage { grid-column: 2; }
.scene--from-right .scene-copy { grid-column: 1; grid-row: 1; }
.scene-card {
  width: min(486px, 90%);
  border-radius: 24px;
  padding: 18px;
  position: relative;
  border: 1px solid var(--t-border-strong);
  background: linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  box-shadow: 0 40px 90px var(--t-shadow-card), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.scene-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 30% 0%, rgba(var(--t-accent-rgb), .12), transparent 55%);
}
.scene-card .ui-preview { min-height: auto; width: 100%; }
.scene .shot {
  position: absolute;
  border-radius: 16px;
  border: 1px solid var(--t-border-strong);
  background: linear-gradient(180deg, var(--t-bg-card-1), var(--t-bg-card-2));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  padding: 13px 16px;
  width: 190px;
}
.scene .shot .k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--t-text-muted); margin-bottom: 5px; }
.scene .shot .v { font-family: var(--font-display); font-size: 25px; color: var(--t-text); display: block; line-height: 1; }
.scene .shot .v small { font-size: 13px; color: var(--t-accent-bright); }
.scene .shot--a { top: 1%; right: -5%; }
.scene .shot--b { bottom: 3%; left: -6%; }
.scene--from-right .shot--a { right: auto; left: -5%; }
.scene--from-right .shot--b { left: auto; right: -6%; }
.scene-copy .panel-title { text-align: start; margin-bottom: 14px; }
.scene-head {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.02em;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.1;
  color: var(--t-text);
  margin: 0 0 14px;
}
.scene-lead {
  color: var(--t-text-muted);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 42ch;
}
.scene-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.scene-points li { display: flex; align-items: center; gap: 12px; color: var(--t-text); font-size: 14.5px; }
.scene-points li i {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-style: normal; color: var(--t-accent-bright);
  border: 1px solid rgba(var(--t-accent-bright-rgb), .4); background: rgba(var(--t-accent-rgb), .08);
}
[dir="rtl"] .scene .shot--a { right: auto; left: -5%; }
[dir="rtl"] .scene .shot--b { left: auto; right: -6%; }
[dir="rtl"] .scene--from-right .shot--a { left: auto; right: -5%; }
[dir="rtl"] .scene--from-right .shot--b { right: auto; left: -6%; }
/* Tablet & phone: KEEP the side-by-side cinematic (same logic as desktop) but
   scale the product card down so card + its text sit next to each other and fit
   the screen. The card column is `auto` (sizes to the scaled card) and the text
   takes the rest; the mock card is shrunk proportionally with `zoom` so it stays
   a tidy mini-preview instead of reflowing/breaking. */
@media (max-width: 860px) {
  .scene-pin {
    grid-template-columns: auto 1fr;
    gap: clamp(12px, 3vw, 26px);
    padding: 0 clamp(14px, 4vw, 28px);
  }
  .scene--from-right .scene-pin { grid-template-columns: 1fr auto; }
  .scene-card { width: auto; max-width: none; padding: 10px; }
  .scene-card .ui-preview { width: 300px; zoom: 0.66; }
  .scene-stage::before { width: 120%; }
  .scene-head { font-size: clamp(18px, 4.6vw, 30px); margin-bottom: 10px; }
  .scene-lead { font-size: clamp(11.5px, 3.1vw, 15px); line-height: 1.5; margin: 0 0 12px; max-width: none; }
  .scene-points { gap: 8px; }
  .scene-points li { font-size: clamp(11px, 3vw, 14px); gap: 8px; }
  .scene-points li i { flex: 0 0 18px; width: 18px; height: 18px; font-size: 9px; }
  .scene-copy .panel-title { margin-bottom: 8px; }
  .scene-copy .panel-title .card-word { font-size: 26px; }
  .scene .shot { display: none; }
}
@media (max-width: 540px) {
  .scene-card .ui-preview { zoom: 0.5; }
  .scene-pin { gap: 12px; }
}
@media (max-width: 400px) {
  .scene-card .ui-preview { zoom: 0.44; }
  .scene-pin { gap: 9px; padding: 0 12px; }
}

/* RTL adjustments (Arabic) */
[dir="rtl"] .hero {
  grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr);
}
[dir="rtl"] .hero-copy { order: 2; }
[dir="rtl"] .hero-visual { order: 1; }
[dir="rtl"] .nav-links span,
[dir="rtl"] .card-body a span:last-child,
[dir="rtl"] .tier-cta span[aria-hidden="true"],
[dir="rtl"] .primary-cta span:last-child,
[dir="rtl"] .play-motion span,
[dir="rtl"] .language-route strong { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .lang-menu { right: auto; left: 0; transform-origin: top left; }
[dir="rtl"] .lang-menu li { grid-template-columns: 16px 1fr 32px; direction: rtl; }
[dir="rtl"] .footer-col a:hover { transform: translateX(-2px); }
[dir="rtl"] .footer-cols a:hover { transform: translateX(-2px); }
[dir="rtl"] .tier-features li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .tier-features li::before { left: auto; right: 0; }
[dir="rtl"] .career-card ul { padding-right: 18px; padding-left: 0; }
[dir="rtl"] .footer-bar { flex-direction: row-reverse; }
[dir="rtl"] .product-lockup { direction: rtl; }
[dir="rtl"] .product-lockup .script-label { justify-self: end; }
[dir="rtl"] .pricing-card .tier-features li { text-align: right; }
[dir="rtl"] .tier-badge { right: auto; left: 24px; }
[dir="rtl"] .footer-grid { direction: rtl; }
.replay .hero-copy,
.replay .hero-visual { animation: fadeUp .9s ease both; }

@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes wordReveal { from { opacity: 0; letter-spacing: .7em; filter: blur(10px); } to { opacity: 1; letter-spacing: .38em; filter: blur(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auroraFlow { 0% { transform: rotate(-34deg) translateX(-20px) scale(1); opacity: .42; } 100% { transform: rotate(-28deg) translateX(38px) scale(1.12); opacity: .78; } }
@keyframes dotTyping { 0%, 80%, 100% { transform: translateY(0); opacity: .55; } 40% { transform: translateY(-6px); opacity: 1; } }
@keyframes waveShift { 0%,100% { transform: translateX(-8px) rotate(var(--r, 0deg)); opacity: .45; } 50% { transform: translateX(12px) rotate(var(--r, 0deg)); opacity: 1; } }
@keyframes waveBar { 0%,100% { transform: scaleY(.52); opacity: .62; } 50% { transform: scaleY(1.25); opacity: 1; } }
@keyframes lampWake { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 22% { opacity: 1; transform: translateY(0) scale(1); } 40% { transform: translateY(-4px) scale(1.02); } 60%, 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes lampSpark { 0%, 34% { opacity: 0; transform: scale(.4); } 44% { opacity: 1; transform: scale(1.15); } 56% { opacity: 0; transform: scale(.6); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes arcShift { 0% { transform: translateX(-12px) rotate(-3deg); opacity: .44; } 100% { transform: translateX(18px) rotate(5deg); opacity: .9; } }

.lang-dropdown {
  position: relative;
  flex-shrink: 0;
}
.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: linear-gradient(180deg, var(--t-bg-glass-1), var(--t-bg-glass-2));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--t-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px var(--t-shadow-deep), 0 0 28px rgba(var(--t-accent-rgb), 0.12);
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition: opacity .22s ease, transform .25s cubic-bezier(.2,.8,.25,1);
  pointer-events: none;
  z-index: 50;
}
.lang-menu[hidden] { display: block; }
.lang-dropdown.open .lang-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.lang-menu li {
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--t-text-soft);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .04em;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.lang-menu li:hover,
.lang-menu li:focus-visible {
  background: rgba(var(--t-accent-rgb), 0.1);
  color: var(--t-text);
  transform: translateX(2px);
  outline: none;
}
.lang-menu .lang-code {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--t-accent-ink);
  font-weight: 500;
}
.lang-menu .lang-name { font-size: 14px; }
.lang-menu .lang-tick {
  color: var(--t-accent-bright);
  opacity: 0;
  transition: opacity .18s ease;
  font-size: 12px;
  text-align: right;
}
.lang-menu li[aria-selected="true"] .lang-tick { opacity: 1; }
.lang-menu li[aria-selected="true"] {
  background: rgba(var(--t-accent-rgb), 0.06);
  color: var(--t-text);
}
.language-pill {
  cursor: pointer;
}
.language-pill .chev {
  transition: transform .25s ease;
  display: inline-block;
}
.lang-dropdown.open .language-pill .chev {
  transform: rotate(180deg);
}

.theme-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--t-accent-rgb), 0.32);
  background: var(--t-bg-input);
  color: var(--t-accent-bright);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.18,.82,.28,1), border-color .3s ease, box-shadow .3s ease;
  position: relative;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--t-accent-bright);
  transform: rotate(15deg);
  box-shadow: 0 0 22px rgba(var(--t-accent-rgb), 0.22);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--t-accent-bright);
  outline-offset: 2px;
}
/* Branded keyboard focus ring — gold accent, keyboard-only (:focus-visible).
   Element-level so the existing higher-specificity rules (.theme-toggle,
   .lang-menu li) keep their own treatment. Mouse focus on inputs keeps the
   border/glow style; only keyboard focus draws the ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--t-accent-bright);
  outline-offset: 3px;
}
.theme-icon { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color 0.4s ease,
    background-image 0.4s ease,
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    fill 0.4s ease,
    stroke 0.4s ease,
    opacity 0.4s ease !important;
}

.jara-wordmark-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.jara-wordmark-svg {
  display: inline-block;
  height: 1em;
  width: auto;
  aspect-ratio: 760 / 200;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.brand-word .jara-wordmark-svg { stroke-width: 8.5; }
.card-word .jara-wordmark-svg { stroke-width: 6.5; }
.loader-wordmark .jara-wordmark-svg { stroke-width: 5; height: 1em; }
.main-wordmark .jara-wordmark-svg { stroke-width: 4; filter: drop-shadow(0 12px 48px rgba(212,175,110,.16)); }
.main-wordmark.small .jara-wordmark-svg { stroke-width: 4.5; }
.sequence-word .jara-wordmark-svg { stroke-width: 5.5; height: 0.9em; }
.mini-card .jara-wordmark-svg { stroke-width: 9; height: 1.6em; }

/* ── WP-8 Lamp Constellation ──────────────────────────────────────────────
   The four product lamps staged as one family. A hovered/focused lamp bends
   the SECTION's accent to that product — CSS-only via :has(). All colour lives
   in section-scoped --k-acc / --k-acc-rgb (NEVER --t-accent*, which is frozen
   for the cinematic). :has()-less browsers keep the calm gold default. */
.constellation {
  --k-acc: #d4af6e;            /* section-local gold default (independent of --t-accent) */
  --k-acc-rgb: 212, 175, 110;
  padding: clamp(40px, 7vw, 96px) clamp(20px, 6vw, 80px) clamp(8px, 2vw, 24px);
  text-align: center;
}
/* colour morph — one product per hovered/focused lamp; :has() only, no JS */
.constellation:has(.constel-lamp[data-product="assistant"]:hover),
.constellation:has(.constel-lamp[data-product="assistant"]:focus-visible) {
  --k-acc: #d4af6e; --k-acc-rgb: 212, 175, 110;
}
.constellation:has(.constel-lamp[data-product="voxbridge"]:hover),
.constellation:has(.constel-lamp[data-product="voxbridge"]:focus-visible) {
  --k-acc: #7aa8ef; --k-acc-rgb: 122, 168, 239;
}
.constellation:has(.constel-lamp[data-product="flow"]:hover),
.constellation:has(.constel-lamp[data-product="flow"]:focus-visible) {
  --k-acc: #21c2b3; --k-acc-rgb: 33, 194, 179;
}
.constellation:has(.constel-lamp[data-product="career-coach"]:hover),
.constellation:has(.constel-lamp[data-product="career-coach"]:focus-visible) {
  --k-acc: #9a4fd0; --k-acc-rgb: 154, 79, 208;
}
.constel-family {
  list-style: none;
  margin: clamp(28px, 4vw, 52px) auto 0;
  padding: clamp(20px, 3vw, 34px) 0 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 34px);
  /* the family shares one hairline that takes on the active product's hue */
  border-top: 1px solid rgba(var(--k-acc-rgb), 0.28);
  transition: border-color 0.5s ease;
}
.constel-item { display: flex; }
.constel-lamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px 8px 20px;
  text-decoration: none;
  color: var(--t-text-muted);
  border-radius: 20px;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.constel-lamp:focus-visible {
  outline: 2px solid rgba(var(--k-acc-rgb), 0.8);
  outline-offset: 4px;
}
.constel-lamp__glow {
  position: absolute;
  top: clamp(28px, 5vw, 58px);
  width: clamp(120px, 60%, 190px);
  height: clamp(120px, 60%, 190px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--k-acc-rgb), 0.22), transparent 66%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 0;
}
.constel-lamp__img {
  position: relative;
  z-index: 1;
  width: clamp(96px, 15vw, 168px);
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.42));
  transition: filter 0.5s ease;
}
.constel-lamp__name {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--t-text);
  transition: color 0.4s ease;
}
.constel-lamp__script {
  color: rgba(var(--k-acc-rgb), 0.92);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  text-shadow: 0 0 18px rgba(var(--k-acc-rgb), 0.16);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
/* hovered/focused lamp: lift, ignite its glow, warm its drop-shadow + name */
.constel-lamp:is(:hover, :focus-visible) { transform: translateY(-8px); }
.constel-lamp:is(:hover, :focus-visible) .constel-lamp__glow { opacity: 1; }
.constel-lamp:is(:hover, :focus-visible) .constel-lamp__img {
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 26px rgba(var(--k-acc-rgb), 0.5));
}
.constel-lamp:is(:hover, :focus-visible) .constel-lamp__name { color: rgba(var(--k-acc-rgb), 1); }

/* D-02 — constellation idle "breathe" attract loop.
   While the section is untouched, JS chains .breathe from lamp to lamp (~6s each):
   the glow softly pulses and the lamp image floats up ~3px, then settles. Colour
   never changes — the pulse rides the section's gold default (--k-acc-rgb); this
   block drives ONLY glow opacity + an independent `translate` (never `transform`,
   so the hover translateY(-8px) lift is untouched and composes cleanly). The JS
   pauses the loop on hover/focus so the :has() colour morph owns the interaction,
   and only runs while the section is on-screen + tab visible. Reduced-motion
   never starts it (JS-gated). */
.constel-lamp.breathe .constel-lamp__glow { animation: constelBreatheGlow 2.4s ease-in-out; }
.constel-lamp.breathe .constel-lamp__img  { animation: constelBreatheFloat 2.4s ease-in-out; }
@keyframes constelBreatheGlow { 0%, 100% { opacity: 0; } 50% { opacity: 0.58; } }
@keyframes constelBreatheFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

.script-label { position: relative; display: inline-block; }
.panel-title .script-label { margin-top: 8px; }
.script-label__text {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}
.script-label.is-writing .script-label__text {
  animation: handwrite 2.1s linear forwards;
}
.script-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--t-pen-core);
  box-shadow:
    0 0 3px 1px rgba(var(--t-accent-bright-rgb), 0.95),
    0 0 10px 3px rgba(var(--t-accent-bright-rgb), 0.85),
    0 0 22px 8px rgba(var(--t-accent-rgb), 0.55),
    0 0 38px 14px rgba(var(--t-accent-rgb), 0.18);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  filter: blur(0.2px);
}
.script-label.is-writing::after {
  animation: pen-tip 2.1s linear forwards;
}
@keyframes handwrite {
  0%   { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  /* harf 1 — çizim */
  3%   { clip-path: inset(0 92% 0 0); -webkit-clip-path: inset(0 92% 0 0); }
  9%   { clip-path: inset(0 86% 0 0); -webkit-clip-path: inset(0 86% 0 0); }
  /* lift */
  11%  { clip-path: inset(0 86% 0 0); -webkit-clip-path: inset(0 86% 0 0); }
  /* harf 2 */
  16%  { clip-path: inset(0 78% 0 0); -webkit-clip-path: inset(0 78% 0 0); }
  22%  { clip-path: inset(0 72% 0 0); -webkit-clip-path: inset(0 72% 0 0); }
  24%  { clip-path: inset(0 72% 0 0); -webkit-clip-path: inset(0 72% 0 0); }
  /* harf 3 */
  29%  { clip-path: inset(0 64% 0 0); -webkit-clip-path: inset(0 64% 0 0); }
  35%  { clip-path: inset(0 58% 0 0); -webkit-clip-path: inset(0 58% 0 0); }
  37%  { clip-path: inset(0 58% 0 0); -webkit-clip-path: inset(0 58% 0 0); }
  /* harf 4 */
  42%  { clip-path: inset(0 50% 0 0); -webkit-clip-path: inset(0 50% 0 0); }
  48%  { clip-path: inset(0 44% 0 0); -webkit-clip-path: inset(0 44% 0 0); }
  50%  { clip-path: inset(0 44% 0 0); -webkit-clip-path: inset(0 44% 0 0); }
  /* harf 5 */
  55%  { clip-path: inset(0 36% 0 0); -webkit-clip-path: inset(0 36% 0 0); }
  61%  { clip-path: inset(0 30% 0 0); -webkit-clip-path: inset(0 30% 0 0); }
  63%  { clip-path: inset(0 30% 0 0); -webkit-clip-path: inset(0 30% 0 0); }
  /* harf 6 */
  68%  { clip-path: inset(0 22% 0 0); -webkit-clip-path: inset(0 22% 0 0); }
  74%  { clip-path: inset(0 16% 0 0); -webkit-clip-path: inset(0 16% 0 0); }
  76%  { clip-path: inset(0 16% 0 0); -webkit-clip-path: inset(0 16% 0 0); }
  /* harf 7 */
  81%  { clip-path: inset(0 9% 0 0); -webkit-clip-path: inset(0 9% 0 0); }
  87%  { clip-path: inset(0 4% 0 0); -webkit-clip-path: inset(0 4% 0 0); }
  89%  { clip-path: inset(0 4% 0 0); -webkit-clip-path: inset(0 4% 0 0); }
  /* harf 8 — final flourish */
  94%  { clip-path: inset(0 1% 0 0); -webkit-clip-path: inset(0 1% 0 0); }
  100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
}
@keyframes pen-tip {
  /* opacity: kalemin yazıya basıp kalkması; transform Y: handwriting bob; scale: basınç */
  0%   { left: 0%;   opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  3%   { left: 8%;   opacity: 1; transform: translate(-50%, calc(-50% - 5px)) scale(1); }
  6%   { left: 11%;  opacity: 1; transform: translate(-50%, calc(-50% + 4px)) scale(1.05); }
  9%   { left: 14%;  opacity: 0.7; transform: translate(-50%, calc(-50% - 4px)) scale(0.7); }
  11%  { left: 14%;  opacity: 1; transform: translate(-50%, calc(-50% - 5px)) scale(1); }
  16%  { left: 22%;  opacity: 1; transform: translate(-50%, calc(-50% + 4px)) scale(1.05); }
  22%  { left: 28%;  opacity: 0.7; transform: translate(-50%, calc(-50% - 3px)) scale(0.75); }
  24%  { left: 28%;  opacity: 1; transform: translate(-50%, calc(-50% - 5px)) scale(1); }
  29%  { left: 36%;  opacity: 1; transform: translate(-50%, calc(-50% + 5px)) scale(1.05); }
  35%  { left: 42%;  opacity: 0.7; transform: translate(-50%, calc(-50% - 4px)) scale(0.7); }
  37%  { left: 42%;  opacity: 1; transform: translate(-50%, calc(-50% - 5px)) scale(1); }
  42%  { left: 50%;  opacity: 1; transform: translate(-50%, calc(-50% + 4px)) scale(1.05); }
  48%  { left: 56%;  opacity: 0.7; transform: translate(-50%, calc(-50% - 3px)) scale(0.75); }
  50%  { left: 56%;  opacity: 1; transform: translate(-50%, calc(-50% - 5px)) scale(1); }
  55%  { left: 64%;  opacity: 1; transform: translate(-50%, calc(-50% + 5px)) scale(1.05); }
  61%  { left: 70%;  opacity: 0.7; transform: translate(-50%, calc(-50% - 4px)) scale(0.7); }
  63%  { left: 70%;  opacity: 1; transform: translate(-50%, calc(-50% - 5px)) scale(1); }
  68%  { left: 78%;  opacity: 1; transform: translate(-50%, calc(-50% + 4px)) scale(1.05); }
  74%  { left: 84%;  opacity: 0.7; transform: translate(-50%, calc(-50% - 3px)) scale(0.75); }
  76%  { left: 84%;  opacity: 1; transform: translate(-50%, calc(-50% - 5px)) scale(1); }
  81%  { left: 91%;  opacity: 1; transform: translate(-50%, calc(-50% + 5px)) scale(1.05); }
  87%  { left: 96%;  opacity: 1; transform: translate(-50%, calc(-50% - 4px)) scale(1); }
  94%  { left: 99%;  opacity: 0.7; transform: translate(-50%, calc(-50% - 2px)) scale(0.85); }
  100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .script-label__text { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); animation: none !important; }
  .script-label::after { display: none; }
  /* WP-8: no lift/transition on the constellation lamps (colour morph still applies). */
  .constel-lamp,
  .constel-lamp:is(:hover, :focus-visible) { transform: none !important; }
  /* D-02: idle breathe is JS-gated off under reduced-motion; null it defensively too. */
  .constel-lamp.breathe .constel-lamp__glow, .constel-lamp.breathe .constel-lamp__img { animation: none !important; }
  /* Honour reduced-motion across the board: settle every looping animation
     (orbit, aurora, horizon, dot-breath, wave bars, typing dots, loader) on
     its end state and make transitions near-instant. The brand's final
     composition still shows; only the continuous motion stops. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* The cinematic showcase JS is skipped under reduced-motion, so un-stack the
     scenes (they're absolutely stacked for the pinned cinematic) back into
     normal vertical flow — every product visible, no pin, no overlap. */
  .scene-track { height: auto; }
  .scene-track .scene { position: relative; inset: auto; }
  .scene-pin { min-height: auto; padding-top: 48px; padding-bottom: 48px; }
}

/* Below 1620px — switch to 2-col so cards always have ≥370px (original design intent) */
@media (max-width: 1620px) {
  .nav-links { gap: clamp(12px, 2vw, 20px); font-size: 11px; letter-spacing: .14em; }
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 28px; }
  .hero-visual { min-height: 380px; order: -1; }
  .giant-icon { width: min(72vw, 460px); }
  .main-wordmark { font-size: clamp(64px, 10vw, 144px); }
  .hero h2 { font-size: clamp(32px, 4.4vw, 56px); }
  .product-strip,
  .experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion-grid { grid-template-columns: 1fr; }
  .access-panel { flex-direction: column; align-items: stretch; gap: 20px; }
  .section-heading h2,
  .access-panel h2 { font-size: clamp(32px, 4.6vw, 54px); }
}

/* 761–1024px — the full 5-item text nav can't fit beside the brand + actions
   (it page-overflows below ~1000px), so collapse the LINK LIST into the burger
   drawer here while keeping the sticky bar, theme, language and CTA. Below 761px
   the full mobile treatment (next block) takes over. This replaces the old
   `.nav-links a:nth-child(n+4){display:none}` hack that wrongly hid Pricing. */
@media (max-width: 1024px) and (min-width: 761px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}

/* Mobile (760px and below) */
@media (max-width: 760px) {
  .site-shell { padding: 16px 14px 24px; }
  .nav { position: relative; top: 0; border-radius: 20px; padding: 10px 14px; min-height: 64px; gap: 10px; }
  .nav-links { display: none; }
  .nav-actions .outline-cta { display: none; }
  .nav-actions .lang-dropdown { display: none; }
  .nav-actions .theme-toggle { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-actions .language-pill { padding: 8px; font-size: 11px; }
  .theme-toggle { width: 38px; height: 38px; }
  .brand-word { font-size: 22px; }
  .hero { padding: 40px 0 24px; gap: 24px; }
  .hero-visual { min-height: 280px; }
  .giant-icon { width: min(80vw, 360px); }
  .main-wordmark { font-size: clamp(56px, 17vw, 84px); margin: 18px 0 14px; }
  .hero h2 { font-size: clamp(26px, 7vw, 36px); line-height: 1.15; }
  .hero p { font-size: 15px; line-height: 1.65; margin: 18px 0 22px; max-width: 100%; }
  .eyebrow { letter-spacing: .2em; font-size: 10px; gap: 12px; }
  .eyebrow span { width: 28px; }
  .hero-actions, .access-form { flex-direction: column; align-items: stretch; }
  .primary-cta, .secondary-cta { width: 100%; justify-content: center; padding: 16px 22px; }
  .primary-cta { gap: 10px; }
  .trust-row { gap: 12px 16px; font-size: 10px; }
  .product-strip,
  .experience-grid { grid-template-columns: 1fr; gap: 16px; }
  .constellation { padding: 48px 14px 8px; }
  .constel-family { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; max-width: 420px; }
  .constel-lamp__img { width: clamp(88px, 30vw, 132px); }
  .how-it-works { padding: 56px 0 32px; }
  .how-steps { grid-template-columns: 1fr; gap: 32px; max-width: 480px; margin: 0 auto; }
  .how-steps::before { display: none; }
  .how-step .step-number { width: 60px; height: 60px; font-size: 18px; margin-bottom: 16px; }
  .pricing { padding: 56px 0 40px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; gap: 18px; }
  .tier-badge { right: 18px; top: -12px; padding: 6px 14px; font-size: 9px; }
  .tier-tag { min-height: 0; }
  .testi-grid { grid-template-columns: 1fr; max-width: 480px; gap: 16px; }
  .testi-card { padding: 24px; gap: 18px; }
  .testi-mark { font-size: 44px; }
  .testi-card blockquote { font-size: 15.5px; }
  .faq { padding: 48px 0 36px; }
  .faq-list { gap: 10px; }
  .faq-toggle { padding: 16px 18px; font-size: 14.5px; gap: 16px; }
  .faq-chev { flex: 0 0 24px; width: 24px; height: 24px; font-size: 16px; }
  .faq-answer > p { padding: 0 18px 18px; font-size: 14px; line-height: 1.7; }
  .trust-seals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  /* only the middle (odd→even) divider survives at 2-up; end-of-row dividers off */
  .trust-seal:nth-child(2)::after,
  .trust-seal:nth-child(4)::after { display: none; }
  .product-card { min-height: auto; padding: 22px; }
  .experience-panel { min-height: auto; padding: 22px; }
  .ui-preview { min-height: 240px; }
  .section-heading { margin-bottom: 28px; }
  .section-heading span { font-size: 11px; letter-spacing: .28em; }
  .section-heading h2,
  .access-panel h2 { font-size: clamp(28px, 8vw, 40px); }
  .main-wordmark.small { font-size: clamp(48px, 14vw, 72px); }
  .motion-board { padding: 16px 0 56px; }
  .motion-header { row-gap: 12px; column-gap: 10px; }
  .motion-header > small { letter-spacing: .2em; font-size: 11px; }
  .motion-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .motion-panel { padding: 22px; min-height: auto; }
  .motion-sequence { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .motion-sequence b { transform: rotate(90deg); }
  .mini-carousel { flex-wrap: wrap; gap: 10px; }
  .mini-card { width: 110px; min-height: 100px; }
  .mini-card em { font-size: 22px; }
  .prompt-demo { flex-direction: column; gap: 16px; }
  .prompt-card { min-width: 100%; grid-template-columns: 1fr; padding: 20px; }
  .prompt-wave { left: 20px; }
  .access-panel { padding: 24px; }
  .site-footer { padding: 32px 22px; border-radius: 22px; margin-top: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .footer-col h3 { letter-spacing: .2em; }
  .footer-tagline { max-width: 100%; }
  .footer-bar { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
  .footer-copy { font-size: 10.5px; letter-spacing: .14em; line-height: 1.7; }
  .play-motion { right: auto; left: 0; bottom: 0; gap: 10px; }
  .play-motion span { width: 52px; height: 52px; }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
  .main-wordmark { font-size: clamp(48px, 18vw, 68px); }
  .hero h2 { font-size: clamp(24px, 7.5vw, 32px); }
  .hero p { font-size: 14px; }
  .product-card,
  .experience-panel { padding: 18px; }
  .panel-title .card-word { font-size: 32px; }
  .ui-preview { min-height: 220px; grid-template-columns: 36px 1fr; }
  .ui-preview > div { padding: 18px; }
  .assistant-ui h3,
  .career-card h3 { font-size: 18px; }
  .nav-actions { gap: 8px; }
  .lang-dropdown { display: none; }
  .lang-menu { min-width: 180px; right: -40px; }
}

/* Large screens (1680px+) — content stays focused, side padding grows */
@media (min-width: 1680px) {
  .site-shell { padding-inline: clamp(56px, 4vw, 88px); }
}
/* Very large / 4K (2200px+) — explicitly cap scale; never bigger than cap */
@media (min-width: 2200px) {
  .main-wordmark { font-size: 188px; }
  .hero h2 { font-size: 64px; }
  .section-heading h2,
  .access-panel h2 { font-size: 68px; }
  .hero p { font-size: 17px; }
  .main-wordmark.small { font-size: 120px; }
}

/* ============ D-01 "Yaşayan Lamba" hero — canlı vitrin (feat/design-preview) ============
   Runtime davranış (idle tütme + parallax) tamamen index.html inline scriptinde.
   Parallax .giant-icon üzerinde BAĞIMSIZ 'translate' özelliğiyle sürülür → cinematic.js'in
   GSAP 'transform' scrub'ı (yPercent/scale) ile ÇAKIŞMADAN kompoze olur (red line 1). */
.giant-icon { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .giant-icon { translate: none !important; }   /* parallax kapalı — JS zaten yazmaz; bu emniyet kemeri */
}

/* ============ D-05 Pricing 3D tilt + kıvılcım (glint) — canlı vitrin (feat/design-preview) ============
   Tilt runtime davranışı (pointermove → rotateX/rotateY ±4°, rAF lerp + mevcut :hover translateY(-6px) lift'i
   AYNI transform'da kompoze) tamamen index.html inline scriptinde; transform geçişi tilt sürerken JS'te inline
   (transition:none) kapatılır → [data-reveal]'in .9s transform transition'ı rAF'ı geciktirmez, rAF tek yumuşatıcı.
   Glint SAF CSS (maliyet önemsiz, JS/IO yok): popüler kartın sağ-üst köşesinde ::before, ~8sn periyot (görünür ~1.2sn).
   Yalnız pointer:fine'da tilt (JS kapısı); reduced-motion → tilt (JS) + glint (aşağıda) ikisi de kapalı. */
.pricing-card--popular::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(var(--t-accent-bright-rgb), 0.9) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  animation: d05Glint 8s ease-in-out infinite;
}
@keyframes d05Glint {
  0%, 85%, 100% { opacity: 0;    transform: scale(0.35); }
  90%           { opacity: 1;    transform: scale(1.3); }
  95%           { opacity: 0.45; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-card--popular::before { animation: none; opacity: 0; }
}

/* ============ D-15 — tema geçiş "fitil" tülü ============ */
/* Toggle'a basınca tıklanan butondan doğan yumuşak altın parlama tülü ekranı
   süpürür; tema, tülün tepe anında (~160ms) uygulanır ki renk sıçraması tülün
   altında kalsın. Görsel katman — tema mantığı script.js'te, dokunulmadı. */
#themeVeil {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--veil-x, 50%) var(--veil-y, 0%),
    rgba(212, 175, 110, 0.55),
    rgba(212, 175, 110, 0.22) 38%,
    transparent 70%);
}
#themeVeil.is-lit {
  will-change: opacity;
  animation: themeWick 440ms ease-out;
}
@keyframes themeWick {
  0%   { opacity: 0; }
  36%  { opacity: 0.5; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #themeVeil { display: none !important; }
  #themeVeil.is-lit { animation: none !important; }
}