/* ==========================================================================
   Sarro Solutions — design system
   Single source of truth for every page. Change a token here, the whole
   site follows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Light is the base. Dark overrides only the colours, so every rule below
   is written once and works in both themes.
   -------------------------------------------------------------------------- */
:root {
  /* Brand ramp — the gradient that carries the identity */
  --brand-1: #4f46e5;
  --brand-2: #7c3aed;
  --brand-3: #db2777;
  --brand-grad: linear-gradient(120deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));

  /* Surfaces */
  --canvas:      #ffffff;
  --surface:     #f7f8fc;
  --surface-2:   #eef1f8;
  --raised:      #ffffff;

  /* Ink — contrast checked against --canvas */
  --ink:         #0b1020;  /* headings        */
  --ink-body:    #434c66;  /* body copy       */
  --ink-muted:   #6b7590;  /* captions, meta  */

  /* Lines */
  --line:        #e3e7f1;
  --line-strong: #cdd4e5;

  /* Accents */
  --accent:       var(--brand-1);
  --accent-ink:   #4338ca;   /* accent text on light — passes AA */
  --accent-wash:  #eef0fe;
  --ok:           #047857;
  --ok-wash:      #e7f6f0;
  --warn:         #b45309;
  --warn-wash:    #fdf3e3;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(11, 16, 32, .06), 0 1px 3px rgba(11, 16, 32, .04);
  --shadow-md: 0 4px 12px rgba(11, 16, 32, .07), 0 2px 4px rgba(11, 16, 32, .04);
  --shadow-lg: 0 18px 40px rgba(11, 16, 32, .10), 0 4px 12px rgba(11, 16, 32, .05);
  --shadow-brand: 0 10px 30px rgba(79, 70, 229, .28);

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --maxw: 1180px;

  /* Type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

/* Dark: system preference, unless the visitor explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:    #080b14;
    --surface:   #0d1220;
    --surface-2: #141b2d;
    --raised:    #101728;

    --ink:       #f2f5fc;
    --ink-body:  #b3bcd4;
    --ink-muted: #8590ad;

    --line:        #1e2740;
    --line-strong: #2d3958;

    --accent-ink:  #a5b4fc;
    --accent-wash: #161e3a;
    --ok:          #34d399;
    --ok-wash:     #0c2820;
    --warn:        #fbbf24;
    --warn-wash:   #2a2008;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .55);
    --shadow-lg: 0 20px 44px rgba(0, 0, 0, .6);
    --shadow-brand: 0 10px 34px rgba(124, 58, 237, .4);

    color-scheme: dark;
  }
}

/* Dark: explicitly chosen — must win in both directions */
:root[data-theme="dark"] {
  --canvas:    #080b14;
  --surface:   #0d1220;
  --surface-2: #141b2d;
  --raised:    #101728;

  --ink:       #f2f5fc;
  --ink-body:  #b3bcd4;
  --ink-muted: #8590ad;

  --line:        #1e2740;
  --line-strong: #2d3958;

  --accent-ink:  #a5b4fc;
  --accent-wash: #161e3a;
  --ok:          #34d399;
  --ok-wash:     #0c2820;
  --warn:        #fbbf24;
  --warn-wash:   #2a2008;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .55);
  --shadow-lg: 0 20px 44px rgba(0, 0, 0, .6);
  --shadow-brand: 0 10px 34px rgba(124, 58, 237, .4);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brand-2); color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand-1);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--surface { background: var(--surface); }

.section-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.section-head h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.85rem);
  margin-bottom: .85rem;
}
.section-head p {
  font-size: 1.075rem;
  color: var(--ink-muted);
}

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   4. Shared bits
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
}

.grad-text {
  background: var(--brand-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.grad-text--anim { animation: grad-pan 9s linear infinite; }

@keyframes grad-pan {
  to { background-position: 200% center; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 650;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-body);
  white-space: nowrap;
}
.pill--live { color: var(--ok); background: var(--ok-wash); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.pill--work { color: var(--warn); background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.pill--brand { color: var(--accent-ink); background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent-ink) 26%, transparent); }

.dot {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.dot--pulse { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 650;
  font-size: .95rem;
  line-height: 1;
  padding: .85rem 1.4rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary {
  background-image: var(--brand-grad);
  background-size: 160% auto;
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { transform: translateY(-2px); background-position: right center; }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: var(--raised);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px); }

.btn--quiet {
  background: transparent;
  color: var(--accent-ink);
  padding-inline: .25rem;
}
.btn--quiet:hover { gap: .75rem; }

.btn--sm { padding: .6rem 1rem; font-size: .875rem; }

/* Inline text link with a travelling arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 650;
  color: var(--accent-ink);
  text-decoration: none;
  transition: gap .18s var(--ease), color .18s var(--ease);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform .18s var(--ease); }
.link-arrow:hover { gap: .65rem; }
.link-arrow:hover svg { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  font-weight: 750;
  font-size: 1.075rem;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-right: auto;
}
.brand svg { width: 34px; height: 34px; }

.nav { display: flex; align-items: center; gap: .35rem; }

.nav a {
  padding: .5rem .8rem;
  border-radius: var(--r-sm);
  font-size: .925rem;
  font-weight: 600;
  color: var(--ink-body);
  text-decoration: none;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent-wash); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink-body);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }

/* Theme toggle swaps which glyph is visible */
.theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .ico-sun  { display: none; }
}

.nav-toggle { display: none; }

@media (max-width: 760px) {
  .nav-toggle { display: inline-grid; }
  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: .75rem var(--gutter) 1.25rem;
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: .8rem .9rem; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(3rem, 8vw, 6rem);
  isolation: isolate;
}

/* Soft colour wash + grid, both purely decorative */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  inset: -30% -10% auto -10%;
  height: 70vmax;
  background:
    radial-gradient(38% 42% at 22% 28%, color-mix(in srgb, var(--brand-1) 26%, transparent), transparent 70%),
    radial-gradient(34% 38% at 78% 18%, color-mix(in srgb, var(--brand-3) 22%, transparent), transparent 70%),
    radial-gradient(40% 44% at 58% 62%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent 72%);
  filter: blur(20px);
  opacity: .8;
}
.hero::after {
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(70% 60% at 50% 35%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 20%, transparent 75%);
}

.hero__inner {
  position: relative;
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.35rem, 6.4vw, 4.15rem);
  letter-spacing: -.035em;
  margin: 1.25rem 0 0;
}

.hero__lead {
  font-size: clamp(1.075rem, 2.1vw, 1.3rem);
  color: var(--ink-body);
  max-width: 40rem;
  margin: 1.25rem auto 0;
}

.hero__sub {
  font-size: 1rem;
  color: var(--ink-muted);
  max-width: 38rem;
  margin: .9rem auto 0;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 2.25rem;
}

/* Trust strip under the hero */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.stat { text-align: center; }
.stat__n {
  display: block;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 750;
  letter-spacing: -.03em;
  color: var(--ink);
}
.stat__l {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card > :last-child { margin-top: auto; }
/* Pills and links are inline-sized; without this the column stretches them. */
.card > .pill,
.card > .link-arrow,
.card > .muted-note { align-self: flex-start; }

.card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.card h3 {
  font-size: 1.16rem;
  margin-bottom: .55rem;
}
.card p {
  color: var(--ink-muted);
  font-size: .95rem;
  margin-bottom: 1.15rem;
}

/* Gradient icon tile */
.tile {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background-image: var(--brand-grad);
  color: #fff;
  margin-bottom: 1.15rem;
  box-shadow: var(--shadow-brand);
}
.tile svg { width: 22px; height: 22px; }
.tile--soft {
  background-image: none;
  background-color: var(--accent-wash);
  color: var(--accent-ink);
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--accent-ink) 20%, transparent);
}

.muted-note {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Feature row (icon + copy, side by side) */
.feature {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
}
.feature > :last-child { margin-top: 0; }
.feature h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.feature p  { font-size: .95rem; color: var(--ink-muted); margin: 0; }

/* --------------------------------------------------------------------------
   9. Project cards (portfolio pages)
   -------------------------------------------------------------------------- */
.project {
  overflow: hidden;
  padding: 0;
}
.project__banner {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 8;
  display: grid;
  place-items: center;
  background-image: var(--brand-grad);
  overflow: hidden;
}
.project__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 34px 34px;
}
.project__mark {
  position: relative;
  z-index: 1;
  /* Sized off the card, not the viewport — long names must not bleed out. */
  font-size: clamp(1.35rem, 2.6cqi + .9rem, 2.2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-align: center;
  color: #fff;
  padding-inline: 1rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}
.project__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.15rem;
}
.project__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .5rem;
}
.project__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-top: auto;
  padding-top: .35rem;
}

/* --------------------------------------------------------------------------
   10. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(2.25rem, 6vw, 3.75rem);
  text-align: center;
  background-image: var(--brand-grad);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 75%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin-bottom: .75rem;
}
.cta-band p {
  color: rgba(255, 255, 255, .88);
  max-width: 34rem;
  margin: 0 auto 1.85rem;
}
.cta-band .btn--ghost {
  background: #fff;
  color: var(--brand-1);
  border-color: transparent;
}
.cta-band .btn--ghost:hover { color: var(--brand-1); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  margin-top: var(--section-y);
}
.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer p { font-size: .925rem; color: var(--ink-muted); }
.site-footer a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer__bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   12. Modal
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: color-mix(in srgb, #05070f 68%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.modal[data-open="true"] { opacity: 1; pointer-events: auto; }

.modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.985);
  transition: transform .22s var(--ease);
}
.modal[data-open="true"] .modal__panel { transform: none; }

.modal__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem clamp(1.25rem, 4vw, 2.25rem);
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.modal__head h2 { font-size: 1.4rem; margin-right: auto; }
.modal__body { padding: clamp(1.35rem, 4vw, 2.25rem); }

/* --------------------------------------------------------------------------
   13. Prose — styles the rich copy injected into modals.
   Plain elements are styled directly so the content stays readable
   without a utility-class framework.
   -------------------------------------------------------------------------- */
.prose { color: var(--ink-body); }
.prose > * + * { margin-top: 1rem; }

.prose .lead {
  font-size: 1.1rem;
  color: var(--ink-body);
  font-weight: 500;
}
.prose h3 {
  font-size: 1.3rem;
  margin-top: 2.25rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}
.prose h4 {
  font-size: 1.05rem;
  margin-top: 1.75rem;
  color: var(--ink);
}
.prose strong { color: var(--ink); font-weight: 650; }
.prose ul { padding-left: 1.15rem; display: grid; gap: .45rem; }
.prose li { font-size: .96rem; }
.prose li::marker { color: var(--accent); }
.prose .note {
  font-size: .89rem;
  color: var(--ink-muted);
  border-left: 3px solid var(--line-strong);
  padding-left: .9rem;
}

/* Feature blocks inside prose */
.f-list { display: grid; gap: .7rem; }
.f-item {
  display: flex;
  gap: .85rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.f-item__ico { font-size: 1.15rem; line-height: 1.4; flex: none; }
.f-item h5 {
  font-size: .975rem;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: .2rem;
}
.f-item p { font-size: .9rem; color: var(--ink-muted); margin: 0; }

/* Price cards inside prose */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }
.price {
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.price--hero {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-wash);
}
.price h5 { font-size: 1rem; color: var(--ink); margin-bottom: .2rem; }
.price__amt {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-ink);
  letter-spacing: -.02em;
  margin-bottom: .35rem;
}
.price p { font-size: .88rem; color: var(--ink-muted); margin: 0; }

.prose-cta {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.prose-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
  margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   14. Scroll reveal
   -------------------------------------------------------------------------- */
/* Gated on .js — set by the inline head script. With JS off or blocked the
   content simply renders, rather than staying at opacity 0 forever. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Stagger children of a revealed group */
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal-group].is-in > * { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   15. Motion + print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .hero::before, .hero::after, .modal { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   16. Prose extras
   Classes produced when the in-progress project copy was converted off
   utility classes. Kept here so that content stays plain HTML.
   -------------------------------------------------------------------------- */
.prose h5 {
  font-size: .975rem;
  font-weight: 650;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.prose a { color: var(--accent-ink); font-weight: 600; }

.prose .feature-card {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.prose .feature-card > * + * { margin-top: .5rem; }
.prose .feature-card p  { font-size: .9rem; color: var(--ink-muted); }
.prose .feature-card ul { padding-left: 1.05rem; gap: .3rem; }
.prose .feature-card li { font-size: .88rem; color: var(--ink-muted); }

.prose .lead {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.prose .accent      { color: var(--accent-ink); font-weight: 600; }
.prose .ico-ok      { color: var(--ok); flex: none; font-weight: 700; }
.prose .ok-strong   { color: var(--ok); font-weight: 650; }
.prose .small       { font-size: .875rem; color: var(--ink-muted); }
.prose .center      { text-align: center; }
.prose .center-strong { text-align: center; font-weight: 650; color: var(--ink); }

.prose .row-start { display: flex; align-items: flex-start; gap: .5rem; }

.prose .chip-ok {
  background: var(--ok-wash);
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
  border-radius: var(--r-sm);
  padding: .5rem .75rem;
  font-size: .88rem;
}

.prose .code {
  font-family: var(--font-mono);
  font-size: .84em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .15rem .4rem;
  color: var(--accent-ink);
}

.prose .callout {
  margin-top: 1.75rem;
  padding: 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--accent-wash);
}
.prose .callout > * + * { margin-top: .5rem; }

.prose .stack-sm { display: grid; gap: .5rem; font-size: .9rem; }
.prose .cols2    { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; font-size: .9rem; }
@media (max-width: 560px) { .prose .cols2 { grid-template-columns: 1fr; } }

.prose .pill-row { display: flex; flex-wrap: wrap; gap: .4rem; }

.prose .quote-list {
  padding-left: 1.05rem;
  font-style: italic;
  color: var(--brand-2);
  display: grid;
  gap: .3rem;
  font-size: .9rem;
}

/* --------------------------------------------------------------------------
   17. App store badges
   Marks and wording mirror Famorama's own StoreBadges component so the site
   and the app cannot drift apart. Play is deliberately first, matching it.

   These links must NOT carry target="_blank". apps.apple.com sniffs the user
   agent and answers iOS with a 301 to itms-appss:// — a custom scheme a fresh
   blank tab will not follow, so Safari opens an empty tab and reports the
   address as invalid. Navigating in place hands off to the App Store app and
   leaves the page where it was.
   -------------------------------------------------------------------------- */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .95rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: #0b0f1a;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease);
}
.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: #161c2b;
}

.store-badge__mark { width: 22px; height: 22px; flex: none; }

.store-badge__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.store-badge__cap {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .72;
}
.store-badge__name {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* On a dark canvas a near-black pill disappears — give it a visible edge. */
:root[data-theme="dark"] .store-badge {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--ink);
}
:root[data-theme="dark"] .store-badge:hover { background: var(--raised); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .store-badge {
    background: var(--surface-2);
    border-color: var(--line-strong);
    color: var(--ink);
  }
  :root:not([data-theme="light"]) .store-badge:hover { background: var(--raised); }
}

/* For saturated backgrounds (the gradient CTA band). */
.store-badge--on-color,
:root[data-theme="dark"] .store-badge--on-color {
  background: #fff;
  color: #0b0f1a;
  border-color: transparent;
}
.store-badge--on-color:hover,
:root[data-theme="dark"] .store-badge--on-color:hover { background: #f1f2f8; }

.store-note {
  font-size: .82rem;
  color: var(--ink-muted);
  margin-top: .6rem;
}

/* Inside prose, `.prose a` would otherwise repaint the badge label with the
   accent colour — the badge owns its own foreground. */
.prose .store-badge { color: #fff; font-weight: 400; }
.prose .store-badge .store-badge__name { font-weight: 700; }

:root[data-theme="dark"] .prose .store-badge { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prose .store-badge { color: var(--ink); }
}

.prose-cta .store-badges {
  justify-content: center;
  margin-top: .85rem;
}