/* ============================================================
   ProjectFrame — Design System
   Hebrew / RTL · Heebo · light + dark
   Tokens are the single source of truth. Surfaces stay near-flat:
   one of {hairline border, soft shadow, tinted bg} per element.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* color — light */
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F5F5F7;   /* alternating sections */
  --ink:       #1D1D1F;   /* headings */
  --body:      #6E6E73;   /* body text */
  --hairline:  #E5E5E7;
  --accent:    #134E48;   /* deep teal — CTAs / logo mark / eyebrows only */
  --accent-ink:#134E48;   /* teal text on light */
  --accent-press: #0E3A35;
  --accent-soft: rgba(19, 78, 72, .07);
  --danger:    #B3261E;   /* form error state only */
  --danger-soft: rgba(179, 38, 30, .07);
  --band:      #1D1D1F;   /* always-dark bands + footer */
  --on-band:   #FFFFFF;
  --on-band-dim: #A8A8AE;
  --band-hairline: rgba(255,255,255,.12);

  /* radius */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* shadow (soft, single-language) */
  --shadow-xs: 0 1px 2px rgba(16,16,18,.05);
  --shadow-sm: 0 2px 8px rgba(16,16,18,.06);
  --shadow:    0 10px 30px -10px rgba(16,16,18,.12);
  --shadow-lg: 0 30px 70px -20px rgba(16,16,18,.22);

  /* type scale 16·20·25·31·39 (fluid) */
  --fs-100: .8125rem;                              /* 13 — eyebrow/labels */
  --fs-200: .9375rem;                              /* 15 — small */
  --fs-300: 1rem;                                  /* 16 — base */
  --fs-400: clamp(1.125rem, 1.04rem + .35vw, 1.25rem);   /* ~18–20 */
  --fs-500: clamp(1.3rem, 1.2rem + .5vw, 1.5625rem);     /* ~21–25 */
  --fs-600: clamp(1.6rem, 1.4rem + .9vw, 1.95rem);       /* ~26–31 */
  --fs-700: clamp(2rem, 1.6rem + 1.7vw, 2.45rem);        /* ~32–39 */
  --fs-800: clamp(2.4rem, 1.8rem + 2.9vw, 3.6rem);       /* hero display */

  /* spacing — multiples of 4 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  --maxw: 1200px;
  --maxw-narrow: 760px;
  --header-h: 84px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  --z-header: 100;
  --z-float: 200;
  --z-menu: 300;
}

/* color — dark (manual override) */
[data-theme="dark"] {
  --bg:        #0F0F10;
  --surface:   #1A1A1C;
  --surface-2: #161617;
  --ink:       #F5F5F7;
  --body:      #A1A1A6;
  --hairline:  #2A2A2D;
  --accent:    #2E8B7E;
  --accent-ink:#5CC2B2;
  --accent-press: #257165;
  --accent-soft: rgba(92, 194, 178, .10);
  --danger:    #FF7A72;
  --danger-soft: rgba(255, 122, 114, .12);
  --band:      #161617;
  --band-hairline: rgba(255,255,255,.10);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.45);
  --shadow:    0 14px 36px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 34px 80px -24px rgba(0,0,0,.7);
}

/* color — dark (system default, when user hasn't chosen) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0F0F10;
    --surface:   #1A1A1C;
    --surface-2: #161617;
    --ink:       #F5F5F7;
    --body:      #A1A1A6;
    --hairline:  #2A2A2D;
    --accent:    #2E8B7E;
    --accent-ink:#5CC2B2;
    --accent-press: #257165;
    --accent-soft: rgba(92, 194, 178, .10);
    --danger:    #FF7A72;
    --danger-soft: rgba(255, 122, 114, .12);
    --band:      #161617;
    --band-hairline: rgba(255,255,255,.10);
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 10px rgba(0,0,0,.45);
    --shadow:    0 14px 36px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 34px 80px -24px rgba(0,0,0,.7);
  }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { color: var(--ink); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-500); line-height: 1.25; }
p  { text-wrap: pretty; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-6); }
.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: var(--surface-2); }
.narrow { max-width: var(--maxw-narrow); margin-inline: auto; }
.center { text-align: center; }
.skip-link {
  position: absolute; right: 12px; top: -60px; z-index: var(--z-menu);
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 10px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--accent-ink); font-size: var(--fs-100); font-weight: 600;
  letter-spacing: .04em; margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px;
}

.lead { font-size: var(--fs-400); color: var(--body); max-width: 56ch; }
.section-head { max-width: 64ch; margin-bottom: clamp(32px, 5vw, 64px); }
.section-head.center { margin-inline: auto; }
.section-head h2 + p { margin-top: var(--s-4); }

/* ---------- Buttons ---------- */
.btn {
  --pad-y: 13px; --pad-x: 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: var(--pad-y) var(--pad-x);
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-weight: 600; font-size: var(--fs-300); line-height: 1;
  transition: transform .15s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-press); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-secondary:hover { border-color: var(--ink); background: var(--accent-soft); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-block { width: 100%; }
.btn-lg { min-height: 54px; padding: 16px 30px; font-size: var(--fs-400); }
/* on dark bands — always-dark surfaces need white label + visible border in BOTH themes */
.on-band .btn-secondary,
.final-cta .btn-secondary { color: #fff; border-color: var(--band-hairline); }
.on-band .btn-secondary:hover,
.final-cta .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); box-shadow: var(--shadow-xs); }
.nav {
  height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.brand img { height: 60px; width: auto; }
@media (max-width: 480px) { .brand img { height: 52px; } }
.brand .on-dark { display: none; }
[data-theme="dark"] .brand .on-light { display: none; }
[data-theme="dark"] .brand .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .on-light { display: none; }
  :root:not([data-theme="light"]) .brand .on-dark  { display: block; }
}

.nav-links { display: flex; align-items: center; gap: var(--s-2); list-style: none; padding: 0; }
.nav-links a {
  display: inline-block; padding: 8px 14px; border-radius: 10px;
  color: var(--ink); font-size: var(--fs-200); font-weight: 600;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav-links a:hover { background: var(--accent-soft); color: var(--accent-ink); }
.nav-links a[aria-current="page"] { color: var(--accent-ink); }

.nav-actions { display: flex; align-items: center; gap: var(--s-2); }
.nav-login { font-size: var(--fs-200); font-weight: 600; color: var(--ink); padding: 8px 12px; border-radius: 10px; }
.nav-login:hover { color: var(--accent-ink); background: var(--accent-soft); }

.theme-toggle {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface);
  color: var(--ink); transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.nav-toggle { display: none; }

/* mobile nav */
@media (max-width: 940px) {
  .nav-links, .nav-login { display: none; }
  .nav-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border-radius: 12px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
  }
  .nav-actions .btn { display: none; }
  .mobile-menu {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu);
    background: var(--bg); padding: var(--s-6);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    display: flex; flex-direction: column; gap: var(--s-2);
    border-top: 1px solid var(--hairline); overflow-y: auto;
  }
  .mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .mobile-menu a.m-link {
    font-size: var(--fs-500); font-weight: 600; color: var(--ink);
    padding: var(--s-4) var(--s-2); border-bottom: 1px solid var(--hairline);
  }
  .mobile-menu .m-actions { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
}
@media (min-width: 941px) { .mobile-menu { display: none !important; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 104px); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-copy h1 { margin-bottom: var(--s-5); }
.hero-copy .lead { margin-bottom: var(--s-8); font-size: var(--fs-500); max-width: 48ch; }
.hero-trust { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-3); color: var(--body); font-size: var(--fs-200); }
.hero-trust svg { color: var(--accent-ink); flex: none; }
.hero-visual { position: relative; }

/* faint accent wash behind hero visual (single soft tint, no glow) */
.hero::before {
  content: ""; position: absolute; inset-block: -10%; inset-inline-start: -10%;
  width: 55%; background: radial-gradient(closest-side, var(--accent-soft), transparent 70%);
  z-index: -1; pointer-events: none;
}

/* ---------- Browser frame ---------- */
.browser {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.browser-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--hairline);
}
.browser-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--hairline); }
.browser-bar span:nth-child(1) { background: #FF5F57; }
.browser-bar span:nth-child(2) { background: #FEBC2E; }
.browser-bar span:nth-child(3) { background: #28C840; }
.browser-bar .browser-url {
  margin-inline-start: auto; font-size: 12px; color: var(--body);
  background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 4px 14px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: ltr;
}
.browser img { width: 100%; height: auto; display: block; }
.is-floating { animation: float 7s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---------- Phone mockup (hero, in front of the browser) ---------- */
.phone {
  position: absolute; z-index: 2;
  inset-block-end: -8%; inset-inline-end: -4%;
  width: clamp(116px, 28%, 180px);
  padding: 7px;
  background: linear-gradient(160deg, #1c1c1f, #0c0c0e);
  border-radius: 36px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.06);
}
.phone-screen {
  position: relative; aspect-ratio: 9 / 19.5;
  border-radius: 29px; overflow: hidden;
  background: var(--surface-2);
}
.phone-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 10px; color: var(--body); font-size: 11px; line-height: 1.45;
  background: repeating-linear-gradient(-45deg, var(--surface-2) 0 9px, var(--surface) 9px 18px);
}
.phone-ph small { display: inline-block; margin-top: 4px; opacity: .7; font-size: 9px; direction: ltr; }
.phone-island {
  position: absolute; z-index: 3; inset-block-start: 5.5%; inset-inline: 0;
  margin-inline: auto; width: 32%; height: 16px; background: #000; border-radius: 999px;
}
.is-floating-slow { animation: float 9s ease-in-out infinite; animation-delay: -1.5s; }
@media (max-width: 900px) {
  .phone { inset-inline-end: 1%; inset-block-end: -6%; width: clamp(110px, 26%, 168px); }
}
@media (max-width: 560px) {
  .phone { width: clamp(96px, 34%, 140px); inset-inline-end: 3%; inset-block-end: -4%; border-radius: 30px; }
  .phone-island { height: 13px; }
}

/* ---------- Problem (dark-ish quote band optional) ---------- */
.problem-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl);
  padding: clamp(32px, 5vw, 64px);
}
.problem-card .lead { font-size: var(--fs-500); color: var(--ink); max-width: 60ch; }
.problem-card .lead strong { color: var(--accent-ink); font-weight: 600; }

/* ---------- Audience cards ---------- */
.cards-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(4, 1fr); }
.aud-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-6); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.aud-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.aud-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); margin-bottom: var(--s-5);
}
.aud-card h3 { font-size: var(--fs-400); margin-bottom: var(--s-2); }
.aud-card p { font-size: var(--fs-200); }

/* ---------- Pain → relief checklist ---------- */
.relief-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.check-list { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.check-list li {
  display: flex; align-items: flex-start; gap: var(--s-4);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: var(--s-5) var(--s-5); font-size: var(--fs-400); color: var(--ink); font-weight: 600;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.check-list li:hover { transform: translateX(-4px); border-color: var(--accent); }
.check-badge {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; margin-top: 1px;
}

/* ---------- Bento — true collage (3 tile sizes, tessellating, framed screenshots) ----------
   Sizes: b-hero 6x2 (dashboard, gantt) · b-tall 3x2 portrait (AI assistant) · b-sm 3x1.
   Placement is via explicit grid-template-areas so the varied tiles tessellate with
   NO mid-section gaps (leftover space only in the last row) at every breakpoint. */
.bento { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.bento-tile {
  position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.bento-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.bento-text { padding: var(--s-6) var(--s-6) var(--s-4); }
.bento-text h3 { font-size: var(--fs-400); display: flex; align-items: center; gap: var(--s-3); }
.bento-text h3 svg { color: var(--accent-ink); flex: none; }
.bento-text p { font-size: var(--fs-200); margin-top: var(--s-2); }

/* Screenshot frame — ONE consistent treatment: fully visible (object-fit: contain),
   same rounded frame everywhere. On mobile the frame is sized by aspect-ratio. */
.bento-media { margin-top: auto; padding: 0 var(--s-6) var(--s-6); }
.bento-media img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10; object-fit: contain;
  background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.b-tall .bento-media img { aspect-ratio: 3 / 4; }   /* portrait screenshot (AI assistant) */

/* From tablet up: explicit area map = guaranteed gap-free tessellation, and the
   screenshot frame fills the grid-sized tile (tile heights come from the grid rows). */
@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: var(--bento-row, 290px);
    grid-template-areas:
      "dash dash dash dash dash dash"
      "dash dash dash dash dash dash"
      "ai   ai   ai   proj proj proj"
      "ai   ai   ai   task task task"
      "pay  pay  pay  contr contr contr"
      "clnt clnt clnt ord  ord  ord"
      "gant gant gant gant gant gant"
      "gant gant gant gant gant gant"
      "ins  ins  ins  rep  rep  rep"
      "emp  emp  emp  .    .    .";
  }
  .bento-media { flex: 1; min-height: 0; margin-top: var(--s-2); }
  .bento-media img { aspect-ratio: auto; height: 100%; }
  /* place each tile into its named area (names reused by the 12-col map below) */
  .ga-dash { grid-area: dash; } .ga-gant { grid-area: gant; } .ga-ai { grid-area: ai; }
  .ga-proj { grid-area: proj; } .ga-task { grid-area: task; } .ga-pay { grid-area: pay; }
  .ga-contr { grid-area: contr; } .ga-clnt { grid-area: clnt; } .ga-ord { grid-area: ord; }
  .ga-ins { grid-area: ins; } .ga-rep { grid-area: rep; } .ga-emp { grid-area: emp; }
}

@media (min-width: 1000px) {
  .bento {
    --bento-row: 250px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "dash dash dash dash dash dash proj proj proj ai   ai   ai"
      "dash dash dash dash dash dash task task task ai   ai   ai"
      "pay  pay  pay  contr contr contr clnt clnt clnt ord  ord  ord"
      "ins  ins  ins  gant gant gant gant gant gant rep  rep  rep"
      "emp  emp  emp  gant gant gant gant gant gant .    .    .";
  }
}

/* ---------- AI spotlight band ---------- */
.spotlight { background: var(--band); color: var(--on-band); position: relative; overflow: hidden; }
.spotlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.on-band h2, .on-band h3 { color: #fff; }
.on-band .eyebrow { color: #6FD7C6; }
.on-band .eyebrow::before { background: #6FD7C6; }
.on-band p { color: var(--on-band-dim); }
.spotlight .browser { border-color: rgba(255,255,255,.1); }
.spotlight .browser-bar { background: #232325; border-bottom-color: rgba(255,255,255,.08); }
.spotlight .browser-bar .browser-url { background: #1a1a1c; border-color: rgba(255,255,255,.1); color: #8a8a90; }
.spotlight-list { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.spotlight-list li { display: flex; gap: var(--s-3); align-items: center; color: #fff; font-weight: 600; font-size: var(--fs-300); }
.spotlight-list svg { color: #6FD7C6; flex: none; }

/* ---------- Differentiators (dark band, bordered list) ---------- */
.diff { background: var(--band); color: var(--on-band); }
.diff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: clamp(32px,5vw,56px); }
.diff-item {
  border: 1px solid var(--band-hairline); border-radius: var(--r-lg); padding: var(--s-8) var(--s-6);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.diff-item:hover { background: rgba(255,255,255,.04); transform: translateY(-4px); }
.diff-num { color: #6FD7C6; font-size: var(--fs-200); font-weight: 600; margin-bottom: var(--s-4); display: block; }
.diff-item h3 { font-size: var(--fs-400); color: #fff; }

/* ---------- Final CTA ---------- */
.final-cta { text-align: center; }
.final-cta .inner {
  background: var(--band); color: #fff; border-radius: var(--r-xl);
  padding: clamp(48px, 8vw, 104px) var(--s-6);
}
.final-cta h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.final-cta p { color: var(--on-band-dim); margin: var(--s-4) auto var(--s-8); max-width: 50ch; }
.final-cta .cta-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--band); color: var(--on-band-dim); padding-block: var(--s-20) var(--s-10); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-10); }
.footer-brand img { height: 78px; width: auto; margin-bottom: var(--s-5); }
.footer-brand p { max-width: 34ch; font-size: var(--fs-200); }
.footer-col h3 { color: #fff; font-size: var(--fs-200); font-weight: 600; margin-bottom: var(--s-5); letter-spacing: .02em; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.footer-col a, .footer-col span { color: var(--on-band-dim); font-size: var(--fs-200); transition: color .2s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid var(--band-hairline);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center;
  font-size: var(--fs-100); color: var(--on-band-dim);
}

/* ---------- Pricing ---------- */
.price-hero { text-align: center; }
.price-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: clamp(28px, 4vw, 56px);
  max-width: 720px; margin-inline: auto;
}
.price-total { text-align: center; margin-bottom: var(--s-8); }
.price-amount { display: flex; align-items: baseline; justify-content: center; gap: var(--s-2); color: var(--ink); }
.price-amount .num { font-size: clamp(3rem, 2rem + 6vw, 5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-amount .cur { font-size: var(--fs-600); font-weight: 600; }
.price-amount .per { font-size: var(--fs-400); color: var(--body); align-self: flex-end; }
.price-vat { font-size: var(--fs-200); color: var(--body); margin-top: var(--s-3); }
.price-breakdown {
  margin-top: var(--s-5); display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
  background: var(--surface-2); border-radius: var(--r-pill); padding: var(--s-3) var(--s-5);
  font-size: var(--fs-200); color: var(--ink);
}
.price-breakdown strong { color: var(--accent-ink); font-weight: 600; }

.slider-block { margin-block: var(--s-10) var(--s-8); }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-5); }
.slider-head label { font-size: var(--fs-400); font-weight: 600; color: var(--ink); }
.slider-count {
  font-size: var(--fs-300); font-weight: 600; color: var(--accent-ink);
  font-variant-numeric: tabular-nums; background: var(--accent-soft); padding: 4px 14px; border-radius: var(--r-pill);
}
input[type="range"].slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: var(--r-pill);
  background: var(--surface-2); outline-offset: 6px; cursor: pointer;
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); border: 4px solid var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease);
}
input[type="range"].slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"].slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
  border: 4px solid var(--surface); box-shadow: var(--shadow-sm);
}
.slider-scale { display: flex; justify-content: space-between; margin-top: var(--s-3); font-size: var(--fs-100); color: var(--body); }
.price-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-block: var(--s-8); }
.tier {
  border: 1px solid var(--hairline); border-radius: var(--r); padding: var(--s-4); text-align: center;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.tier.is-active { border-color: var(--accent); background: var(--accent-soft); }
.tier .tier-range { font-size: var(--fs-100); color: var(--body); }
.tier .tier-price { font-size: var(--fs-400); font-weight: 600; color: var(--ink); margin-top: 2px; }
.tier .tier-price small { font-size: var(--fs-100); color: var(--body); font-weight: 400; }
.price-actions { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.price-actions .note { font-size: var(--fs-200); color: var(--body); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.form-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow); }
.field { margin-bottom: var(--s-5); }
.field label { display: block; font-size: var(--fs-200); font-weight: 600; color: var(--ink); margin-bottom: var(--s-2); }
.field .req { color: var(--accent-ink); }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--hairline); border-radius: var(--r); padding: 13px 16px; min-height: 50px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.field .help { font-size: var(--fs-100); color: var(--body); margin-top: 6px; }
.form-status { font-size: var(--fs-200); margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r); display: none; }
.form-status.is-ok { display: block; background: var(--accent-soft); color: var(--accent-ink); }
.form-status.is-err { display: block; background: var(--danger-soft); color: var(--danger); }
/* honeypot — off-screen for people, present in the DOM for bots */
.hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.form-card .btn[disabled] { opacity: .6; cursor: default; }
.form-sent { text-align: center; padding: var(--s-4) 0; }
.form-sent:focus { outline: none; }
.form-sent__mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); margin-bottom: var(--s-5); }
.form-sent h2 { font-size: var(--fs-500); color: var(--ink); margin-bottom: var(--s-3); }
.form-sent p { color: var(--body); margin-bottom: var(--s-6); }
.contact-info { display: grid; gap: var(--s-5); }
.info-card { display: flex; gap: var(--s-4); align-items: flex-start; background: var(--surface-2); border-radius: var(--r-lg); padding: var(--s-6); }
.info-card .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.info-card h3 { font-size: var(--fs-300); margin-bottom: 2px; }
.info-card a, .info-card p { font-size: var(--fs-200); color: var(--body); }
.info-card a:hover { color: var(--accent-ink); }
/* clickable info cards — the whole card is the link (stretched anchor), keyboard-accessible */
.info-card--link { position: relative; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.info-card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-ink); }
.info-card--link:hover h3 { color: var(--accent-ink); }
.info-card--link:focus-within { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.info-card--link .stretch-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Features page themes ---------- */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items: center; }
.feature-row + .feature-row { margin-top: clamp(56px, 9vw, 120px); }
.feature-row:nth-child(even) .feature-visual { order: -1; }
.feature-copy .pill-list { list-style: none; padding: 0; margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.feature-copy .pill-list li {
  font-size: var(--fs-200); color: var(--ink); background: var(--surface-2);
  border-radius: var(--r-pill); padding: 6px 14px; border: 1px solid var(--hairline);
}
.feature-visual .browser { box-shadow: var(--shadow); }

/* ---------- About ---------- */
.about-story p { font-size: var(--fs-500); color: var(--ink); line-height: 1.55; }
.about-story p + p { margin-top: var(--s-6); }
.about-sign { margin-top: var(--s-8); display: flex; align-items: center; gap: var(--s-4); color: var(--body); font-size: var(--fs-200); }
.about-sign .ic { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; }

/* ---------- Legal page ---------- */
.legal { max-width: var(--maxw-narrow); margin-inline: auto; }
.legal h2 { font-size: var(--fs-600); margin-top: var(--s-12); margin-bottom: var(--s-4); }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { font-size: var(--fs-300); color: var(--body); }
.legal ul { padding-inline-start: var(--s-6); display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.legal a { color: var(--accent-ink); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
/* legal: spacing between consecutive blocks (global reset zeroes margins) + sub-headings */
.legal p, .legal li { line-height: 1.7; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: var(--s-4); }
.legal h3 { font-size: var(--fs-500); margin-top: var(--s-8); margin-bottom: var(--s-3); }
.legal .legal-intro { margin-bottom: var(--s-8); }
.legal .legal-updated { color: var(--body); font-size: var(--fs-200); }

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float {
  position: fixed; inset-inline-start: 22px; inset-block-end: 22px; z-index: var(--z-float);
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
  transition: transform .2s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(48px, 7vw, 88px) clamp(24px, 3vw, 40px); }
.page-hero .eyebrow { justify-content: flex-start; }
.page-hero h1 { font-size: var(--fs-700); max-width: 18ch; }
.page-hero p { margin-top: var(--s-4); max-width: 56ch; font-size: var(--fs-400); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: transform, opacity; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-10); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero-grid, .relief-grid, .spotlight-grid, .contact-grid, .feature-row { grid-template-columns: 1fr; }
  .hero-visual { order: 2; }
  .feature-row:nth-child(even) .feature-visual { order: 0; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .price-tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cards-grid { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .cta-row .btn { width: 100%; }
  .hero-copy .cta-row .btn { flex: 1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .is-floating, .is-floating-slow { animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Print ---------- */
@media print { .site-header, .whatsapp-float, .nav-toggle { display: none; } }

/* ---------- Image lightbox (vanilla, no deps) ---------- */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; border-radius: var(--r); }
.has-zoom { position: relative; }
.has-zoom::after {
  content: ""; position: absolute; inset-block-end: 12px; inset-inline-end: 12px;
  width: 34px; height: 34px; border-radius: 50%; pointer-events: none; z-index: 2;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
  opacity: 0; transform: scale(.85); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.has-zoom:hover::after, .has-zoom:focus-within::after { opacity: 1; transform: scale(1); }

.lightbox { position: fixed; inset: 0; z-index: 500; display: none; }
.lightbox.is-open { display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.lightbox-scrim {
  position: absolute; inset: 0; background: rgba(12,12,14,.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s var(--ease-out);
}
.lightbox.is-shown .lightbox-scrim { opacity: 1; }
.lightbox-dialog {
  position: relative; display: inline-flex; max-width: 94vw; max-height: 90vh;
  opacity: 0; transform: scale(.96); transform-origin: center;
  transition: opacity .25s var(--ease-out), transform .3s var(--ease);
}
.lightbox.is-shown .lightbox-dialog { opacity: 1; transform: none; }
.lightbox-content { display: flex; max-width: 94vw; max-height: 90vh; }

/* the cloned thumbnail frame, enlarged — keeps the same rounded / browser-style look */
.lightbox-frame { margin: 0; max-width: 94vw; max-height: 90vh; }
.lightbox-frame.browser { display: flex; flex-direction: column; }
.lightbox-frame.browser img,
.lightbox-frame--plain img { width: auto; height: auto; max-width: 94vw; object-fit: contain; display: block; }
.lightbox-frame.browser img { max-height: calc(90vh - 46px); }
.lightbox-frame--plain {
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--s-4); overflow: hidden;
}
.lightbox-frame--plain img { max-height: calc(90vh - 32px); max-width: calc(94vw - 32px); border-radius: var(--r); }

.lightbox-close {
  position: absolute; top: clamp(12px,3vw,24px); inset-inline-end: clamp(12px,3vw,24px);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--hairline);
  display: grid; place-items: center; box-shadow: var(--shadow);
  transition: transform .2s var(--ease), background .2s;
}
.lightbox-close:hover { transform: scale(1.06); }
.lightbox-close:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
body.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox-scrim, .lightbox-dialog, .has-zoom::after { transition: none; }
  .lightbox-dialog { transform: none; }
}

/* ---------- Accessibility widget (self-hosted, no deps) ---------- */
.a11y-fab {
  position: fixed; inset-inline-end: 22px; inset-block-end: 22px; z-index: var(--z-float);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none;
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
  cursor: pointer; transition: transform .2s var(--ease);
}
.a11y-fab:hover { transform: scale(1.08); }
.a11y-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.a11y-panel {
  position: fixed; inset-inline-end: 22px; inset-block-end: 88px; z-index: var(--z-menu);
  width: min(330px, calc(100vw - 44px)); max-height: calc(100vh - 120px); overflow-y: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: var(--s-5);
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.a11y-head h2 { font-size: var(--fs-400); margin: 0; }
.a11y-close { background: none; border: none; color: var(--body); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.a11y-close:hover { background: var(--surface-2); color: var(--ink); }
.a11y-group { display: grid; gap: var(--s-2); }
.a11y-label { font-size: var(--fs-100); color: var(--body); font-weight: 600; margin: var(--s-3) 0 var(--s-1); }
.a11y-font { display: flex; align-items: center; gap: var(--s-2); }
.a11y-step {
  flex: 1; height: 44px; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: 1.05rem; display: grid; place-items: center;
}
.a11y-step:hover { border-color: var(--accent-ink); }
.a11y-pct { min-width: 56px; text-align: center; font-size: var(--fs-200); color: var(--body); font-variant-numeric: tabular-nums; }
.a11y-btn {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: var(--fs-200); text-align: start;
}
.a11y-btn svg { flex: none; color: var(--body); }
.a11y-btn:hover { border-color: var(--accent-ink); }
.a11y-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-ink); color: var(--accent-ink); font-weight: 600; }
.a11y-btn[aria-pressed="true"] svg { color: var(--accent-ink); }
.a11y-reset { margin-top: var(--s-4); width: 100%; padding: var(--s-3); border: none; background: none; color: var(--accent-ink); text-decoration: underline; font-size: var(--fs-200); font-weight: 600; }

/* ===== applied accessibility modes (classes on <html>) ===== */
html.a11y-readable, html.a11y-readable body, html.a11y-readable .a11y-panel,
html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable h4,
html.a11y-readable p, html.a11y-readable a, html.a11y-readable li, html.a11y-readable span,
html.a11y-readable button, html.a11y-readable input, html.a11y-readable textarea, html.a11y-readable label {
  font-family: Arial, "Segoe UI", Tahoma, sans-serif !important; letter-spacing: .01em;
}
html.a11y-readable { line-height: 1.75; }

html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-links a:hover, html.a11y-links a:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* high-contrast: boost text/border strength + underline links (kept safe for dark bands) */
html.a11y-contrast { --body: var(--ink); --hairline: var(--ink); --on-band-dim: #fff; }
html.a11y-contrast a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
html.a11y-contrast .btn, html.a11y-contrast .a11y-btn, html.a11y-contrast .info-card { border: 2px solid currentColor; }
html.a11y-contrast :focus-visible { outline-width: 4px; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 800px; margin-inline: auto; display: grid; gap: var(--s-3); }
.faq-item { border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.faq-item:hover { border-color: var(--accent-ink); }
.faq-q-head { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); background: none; border: none; text-align: start; cursor: pointer;
  font-size: var(--fs-300); font-weight: 600; color: var(--ink); line-height: 1.4;
}
.faq-q:hover { color: var(--accent-ink); }
.faq-q:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: var(--r); }
.faq-q[aria-expanded="true"] { color: var(--accent-ink); }
.faq-chevron { flex: none; color: var(--body); transition: transform .3s var(--ease); }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); color: var(--accent-ink); }
.faq-a { padding: 0 var(--s-6) var(--s-5); }
.faq-a p { color: var(--body); font-size: var(--fs-200); line-height: 1.75; max-width: 68ch; margin: 0; }
.faq-a:not([hidden]) { animation: faqReveal .25s var(--ease-out); }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Stage 10: consistency & interaction polish ---------- */
/* Visible focus ring on dark bands (footer + spotlight) — the teal accent is too dark there */
.site-footer :focus-visible, .on-band :focus-visible { outline-color: #fff; }

/* Mobile menu links: hover + press feedback (parity with desktop nav links) */
.mobile-menu a.m-link { transition: color .2s var(--ease); }
.mobile-menu a.m-link:hover { color: var(--accent-ink); }
.mobile-menu a.m-link:active { color: var(--accent-press); }

/* Hamburger + brand: hover affordance (parity with the theme toggle) */
.nav-toggle { transition: background-color .2s var(--ease), color .2s var(--ease); }
.nav-toggle:hover { background: var(--accent-soft); color: var(--accent-ink); }
.brand { transition: opacity .2s var(--ease); }
.brand:hover { opacity: .82; }

/* Consistent press (active) feedback on non-.btn interactive controls */
.nav-toggle:active, .theme-toggle:active, .faq-q:active,
.info-card--link:active, .a11y-fab:active, .whatsapp-float:active { transform: scale(.97); }

/* ---------- Blog ---------- */

/* Featured cover — on-brand dark banner + teal bracket motif, built from title+category
   (pure CSS/SVG, no image file: automatable and never broken). Reserves height via aspect-ratio. */
.post-cover {
  position: relative; overflow: hidden; isolation: isolate;
  background: #1D1D1F; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg);
}
.post-cover__deco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
/* real photo cover — fills the banner (kept sharp); scrim keeps the label + headline legible */
.post-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; display: block; }
.post-cover--photo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.article-cover.post-cover--photo::after { background: linear-gradient(to left, rgba(16,16,18,.86) 0%, rgba(16,16,18,.6) 48%, rgba(16,16,18,.32) 100%); }
.post-cover--card.post-cover--photo::after { background: linear-gradient(to top, rgba(16,16,18,.82) 0%, rgba(16,16,18,.25) 55%, rgba(16,16,18,.05) 100%); }
.post-cover__inner { position: relative; z-index: 1; }
.post-cover__cat {
  display: inline-block; position: relative; z-index: 1; color: #6FD7C6; font-size: var(--fs-100);
  font-weight: 600; letter-spacing: .08em;
}
/* article hero cover */
.article-cover { aspect-ratio: 16 / 6.4; display: flex; align-items: center; padding: clamp(24px, 5vw, 56px); margin-bottom: var(--s-8); }
.article-cover .post-cover__inner { max-width: 28ch; }
.article-cover h1 { color: #fff; font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.5rem); line-height: 1.16; margin-top: var(--s-3); }
/* card thumbnail cover */
.post-cover--card { aspect-ratio: 16 / 8; display: flex; align-items: flex-end; padding: var(--s-5); border-radius: 0; border: 0; }
/* phones: taller hero so the RTL headline fits over the photo (source-order after the base rule = wins) */
@media (max-width: 560px) {
  .article-cover { aspect-ratio: 3 / 2; padding: var(--s-6); }
  .article-cover .post-cover__inner { max-width: none; min-width: 0; }
  .article-cover h1 { font-size: clamp(1.45rem, 1.15rem + 1.8vw, 1.8rem); }
}

/* Blog index cards */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-6); }
.blog-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.blog-card:focus-within { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.blog-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-6); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--fs-100); color: var(--body); font-weight: 600; letter-spacing: .02em; }
.post-meta .dot { color: var(--hairline); }
.blog-card h2 { font-size: var(--fs-400); line-height: 1.3; margin: var(--s-3) 0 var(--s-2); }
.blog-card h2 a { color: var(--ink); }
.blog-card:hover h2 a { color: var(--accent-ink); }
.blog-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.blog-card p { font-size: var(--fs-200); color: var(--body); }
.blog-card .read-more { margin-top: auto; padding-top: var(--s-5); color: var(--accent-ink); font-weight: 600; font-size: var(--fs-200); }

/* Breadcrumb — reset the ol so it never shows list numbers */
.breadcrumb { margin-bottom: var(--s-6); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.breadcrumb li { display: inline-flex; align-items: center; font-size: var(--fs-300); color: var(--body); }
.breadcrumb a { color: var(--accent-ink); }
.breadcrumb a:hover { color: var(--accent-press); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current="page"] { color: var(--body); font-weight: 600; }
.breadcrumb .sep { color: var(--body); opacity: .4; }

/* Article shell */
.article { max-width: 720px; margin-inline: auto; }
.article-meta { color: var(--body); font-size: var(--fs-200); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-10); }
.article-meta .dot { color: var(--hairline); }

/* Reading typography — editorial, centered, generous vertical rhythm */
.prose { color: var(--body); max-width: 700px; margin-inline: auto;
  font-size: clamp(1.075rem, 1.02rem + .32vw, 1.1875rem); line-height: 1.75; }
.prose > * + * { margin-top: var(--s-6); }              /* comfortable gap between paragraphs */
.prose > :first-child { margin-top: 0; }
.prose > h2, .prose > h3 { margin-top: var(--s-12); }   /* clear breathing BEFORE headings */
.prose > h2 + p, .prose > h3 + p { margin-top: var(--s-4); }  /* keep heading tied to its lead paragraph */
.prose h2 { color: var(--ink); font-size: var(--fs-600); line-height: 1.3; letter-spacing: -.01em; }
.prose h3 { color: var(--ink); font-size: var(--fs-500); line-height: 1.35; }
.prose p, .prose li { max-width: 66ch; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-inline-start: var(--s-8); display: grid; gap: var(--s-4); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { padding-inline-start: var(--s-1); line-height: 1.7; }
.prose li::marker { color: var(--accent-ink); }
.prose ol li::marker { font-weight: 600; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
  border-inline-start: 3px solid var(--accent);
  padding-block: var(--s-3); padding-inline-start: var(--s-6);
  margin-block: var(--s-8); margin-inline: 0;
  color: var(--ink); font-size: var(--fs-500); font-weight: 500; line-height: 1.5;
}

/* End-of-article CTA */
.article-cta {
  margin-top: var(--s-12); padding: var(--s-10) var(--s-8);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface-2); text-align: center;
}
.article-cta h2 { font-size: var(--fs-500); }
.article-cta p { color: var(--body); margin: var(--s-2) auto var(--s-6); max-width: 46ch; }