/* base.css
   =========================
   2026 minimal + warm tech
   Shared base across pages
   ========================= */

@font-face {
  font-family: "Poppins";
  src:
    url("/static/fonts/Poppins-Regular.woff2") format("woff2"),
    url("/static/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src:
    url("/static/fonts/Poppins-Medium.woff2") format("woff2"),
    url("/static/fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src:
    url("/static/fonts/Poppins-SemiBold.woff2") format("woff2"),
    url("/static/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src:
    url("/static/fonts/Poppins-Bold.woff2") format("woff2"),
    url("/static/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* IMPORTANT: define tokens on html (NOT :root) to avoid iOS/WebKit stale var recompute */
html {
  --font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;

  --shadow-sm: 0 8px 24px rgba(0,0,0,.08);
  --shadow-md: 0 16px 60px rgba(0,0,0,.14);

  --shell: 1120px;

  /* motion */
  --ease: cubic-bezier(.2,.9,.2,1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 520ms;

  /* z-index scale */
  --z-header: 60;
  --z-drawer: 90;
  --z-modal: 1000;

  /* fixed header height */
  --header-h: 76px;

  /* iOS repaint nudge (JS toggles this) */
  --repaint: 0;

  /* ---------------------------------
     DEFAULT = SYSTEM (light baseline)
     --------------------------------- */
  --bg: #fbfbff;
  --panel: rgba(20,16,33,0.04);
  --panel-2: rgba(20,16,33,0.06);
  --ink: rgba(20,16,33,0.92);
  --muted: rgba(20,16,33,0.62);
  --hair: rgba(20,16,33,0.14);

  --accent: #7c5cff;
  --accent-2: #36d6ff;

  --focus: 0 0 0 4px rgba(124,92,255,0.22);

  /* header paint */
  --header-bg: rgba(251,251,255,0.72);
  --header-fade: rgba(251,251,255,0.72);

  /* card depth */
  --card-inset: rgba(255,255,255,0.55);

  /* banding helper (tiny grain via gradients) */
  --grain-a: rgba(20,16,33,0.018);
  --grain-b: rgba(255,255,255,0.020);

  scroll-behavior: smooth;
  color-scheme: light;
}

/* System dark (only when no explicit override is applied) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #0b0c10;
    --panel: rgba(255,255,255,0.06);
    --panel-2: rgba(255,255,255,0.09);
    --ink: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.68);
    --hair: rgba(255,255,255,0.14);

    --focus: 0 0 0 4px rgba(124,92,255,0.28);

    --header-bg: rgba(0,0,0,0.18);
    --header-fade: rgba(0,0,0,0.18);

    --card-inset: rgba(255,255,255,0.05);

    --grain-a: rgba(255,255,255,0.028);
    --grain-b: rgba(0,0,0,0.028);

    color-scheme: dark;
  }
}

/* Explicit theme overrides (JS sets data-theme early, before CSS paints) */
html[data-theme="dark"] {
  --bg: #0b0c10;
  --panel: rgba(255,255,255,0.06);
  --panel-2: rgba(255,255,255,0.09);
  --ink: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);
  --hair: rgba(255,255,255,0.14);

  --accent: #7c5cff;
  --accent-2: #36d6ff;

  --focus: 0 0 0 4px rgba(124,92,255,0.28);

  --header-bg: rgba(0,0,0,0.18);
  --header-fade: rgba(0,0,0,0.18);

  --card-inset: rgba(255,255,255,0.05);

  --grain-a: rgba(255,255,255,0.028);
  --grain-b: rgba(0,0,0,0.028);

  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #fbfbff;
  --panel: rgba(20,16,33,0.04);
  --panel-2: rgba(20,16,33,0.06);
  --ink: rgba(20,16,33,0.92);
  --muted: rgba(20,16,33,0.62);
  --hair: rgba(20,16,33,0.14);

  --shadow-sm: 0 10px 30px rgba(20,16,33,.10);
  --shadow-md: 0 24px 80px rgba(20,16,33,.16);

  --focus: 0 0 0 4px rgba(124,92,255,0.22);

  --header-bg: rgba(251,251,255,0.72);
  --header-fade: rgba(251,251,255,0.72);

  --card-inset: rgba(255,255,255,0.55);

  --grain-a: rgba(20,16,33,0.018);
  --grain-b: rgba(255,255,255,0.020);

  color-scheme: light;
}

/* Prevent boot flicker: JS sets this before first paint, then removes it after */
html[data-theme-preload="1"],
html[data-theme-preload="1"] * {
  transition: none !important;
  animation: none !important;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  background: var(--bg);
  position: relative;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

/* Prevent long tokens (code, URLs) from breaking layout */
code, pre {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ---------------------------------
   No-save images (deterrence)
   --------------------------------- */
img.no-save {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Fixed background layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(124,92,255,.25), transparent 65%),
    radial-gradient(900px 700px at 110% 0%, rgba(54,214,255,.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 28%);

  transform: translateZ(0) scale(calc(1 + var(--repaint)));
  will-change: transform;
}

/* Grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    repeating-linear-gradient(0deg, var(--grain-a) 0px, transparent 2px, var(--grain-b) 4px),
    repeating-linear-gradient(90deg, var(--grain-b) 0px, transparent 3px, var(--grain-a) 6px);

  opacity: .18;
  transform: translateZ(0) scale(calc(1 + var(--repaint)));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

.shell {
  width: min(var(--shell), calc(100% - 2rem));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--panel);
  border: 1px solid var(--hair);
  padding: .75rem 1rem;
  border-radius: 999px;
}
.skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
  outline: none;
  box-shadow: var(--focus);
}

section[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* =========================
   Header + Nav
   ========================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: var(--z-header);
  isolation: isolate;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  background: var(--header-bg);
  border-bottom: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);

  transition: box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  transform: translateZ(0) scale(calc(1 + var(--repaint)));
}

.site-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--hair), transparent);
  opacity: .9;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -28px;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--header-fade), transparent);
  filter: blur(10px);
  opacity: .70;
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: 240px;
  flex: 0 1 auto;
}

.brand-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--hair);
  box-shadow: 0 10px 26px rgba(124,92,255,.14);
  background: var(--panel);
}

.brand-text { min-width: 0; }
.brand-name {
  display: block;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-role {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-top: .1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
  min-width: 0;
}

/* iOS WebKit hard fix */
html[data-ios="1"] .site-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: color-mix(in srgb, var(--header-bg) 88%, var(--bg)) !important;
}

/* =========================
   Theme dropdown (sun/moon)
   ========================= */
.theme-menu {
  position: relative;
  flex: 0 0 auto;
}

.theme-btn {
  height: 42px;
  width: 42px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: var(--panel);
  cursor: pointer;

  display: grid;
  place-items: center;
  position: relative;

  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.theme-btn:hover { transform: translateY(-1px); background: var(--panel-2); }
.theme-btn:focus { outline: none; box-shadow: none; }
.theme-btn:focus-visible { outline: none; box-shadow: var(--focus); }

.theme-icon {
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
}

/* Sun */
html[data-theme="light"] .theme-icon {
  border-radius: 999px;
  background: rgba(124,92,255,0.25);
  box-shadow: 0 0 0 2px rgba(124,92,255,0.55) inset;
}
html[data-theme="light"] .theme-icon::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg,
      rgba(124,92,255,0.85) 0 10deg,
      transparent 10deg 35deg,
      rgba(124,92,255,0.85) 35deg 45deg,
      transparent 45deg 70deg,
      rgba(124,92,255,0.85) 70deg 80deg,
      transparent 80deg 105deg,
      rgba(124,92,255,0.85) 105deg 115deg,
      transparent 115deg 140deg,
      rgba(124,92,255,0.85) 140deg 150deg,
      transparent 150deg 175deg,
      rgba(124,92,255,0.85) 175deg 185deg,
      transparent 185deg 210deg,
      rgba(124,92,255,0.85) 210deg 220deg,
      transparent 220deg 245deg,
      rgba(124,92,255,0.85) 245deg 255deg,
      transparent 255deg 280deg,
      rgba(124,92,255,0.85) 280deg 290deg,
      transparent 290deg 315deg,
      rgba(124,92,255,0.85) 315deg 325deg,
      transparent 325deg 360deg
    );
  opacity: .35;
  filter: blur(.2px);
}

/* Moon */
html[data-theme="dark"] .theme-icon {
  border-radius: 999px;
  background: rgba(54,214,255,0.18);
  box-shadow: 0 0 0 2px rgba(54,214,255,0.55) inset;
}
html[data-theme="dark"] .theme-icon::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  right: -2px;
  top: 1px;
  background: var(--panel);
  opacity: .9;
}

.theme-auto {
  position: absolute;
  right: -6px;
  top: -6px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .22rem .35rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: color-mix(in srgb, var(--bg) 70%, var(--panel));
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  color: var(--muted);
}

.theme-pop {
  position: absolute;
  top: calc(42px + 10px);
  right: 0;
  z-index: calc(var(--z-header) + 2);
  min-width: 210px;
}

.theme-pop-inner {
  border-radius: 16px;
  border: 1px solid var(--hair);
  background: color-mix(in srgb, var(--bg) 78%, var(--panel));
  box-shadow: var(--shadow-md);
  padding: .45rem;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.theme-item {
  width: 100%;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: .65rem;

  padding: .65rem .7rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;

  font: inherit;
  text-align: left;
}
.theme-item:hover {
  background: color-mix(in srgb, var(--bg) 82%, var(--panel-2));
}
.theme-item:focus { outline: none; box-shadow: none; }
.theme-item:focus-visible { outline: none; box-shadow: var(--focus); }

.theme-item-title { font-weight: 700; font-size: .92rem; }
.theme-item-sub { font-size: .82rem; color: var(--muted); }

.theme-check {
  width: 14px;
  height: 14px;
  border-radius: 6px;
  border: 1px solid var(--hair);
  background: transparent;
  position: relative;
}

.theme-item[aria-checked="true"] .theme-check {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--hair));
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.theme-item[aria-checked="true"] .theme-check::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(124,92,255,1), rgba(54,214,255,1));
}

/* =========================
   Icon buttons + hamburger
   ========================= */
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: var(--panel);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  flex: 0 0 auto;
}
.icon-btn:hover { transform: translateY(-1px); background: var(--panel-2); }
.icon-btn:focus { outline: none; box-shadow: none; }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus); }

.burger {
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
  display: inline-block;
  border-radius: 2px;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.burger::before, .burger::after {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
  position: absolute;
  left: 0;
  border-radius: 2px;
  transition: transform var(--dur-2) var(--ease), top var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.burger::before { top: -6px; }
.burger::after { top: 6px; }

body.drawer-open .burger { background: transparent; }
body.drawer-open .burger::before { top: 0; transform: rotate(45deg); }
body.drawer-open .burger::after { top: 0; transform: rotate(-45deg); }

.mobile-nav-btn { display: grid; }

/* =========================
   Buttons + Cards
   ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 42px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 0px solid transparent;
  cursor: pointer;
  font-weight: 600;
  transition: transform var(--dur-2) var(--ease), filter var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  flex: 0 0 auto;
  white-space: nowrap;
}
.btn:focus { outline: none; box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }

.btn-primary {
  color: white;
  background: linear-gradient(135deg, rgba(124,92,255,1), rgba(54,214,255,1));
  box-shadow: 0 14px 40px rgba(124,92,255,.22);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }

.btn-ghost {
  background: var(--panel);
  border: 1px solid var(--hair);
  color: var(--ink);
}
.btn-ghost:hover { transform: translateY(-1px); background: var(--panel-2); }

.card {
  border: 1px solid var(--hair);
  background: var(--panel);
  border-radius: var(--radius-xl);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.08),
    0 1px 0 var(--card-inset) inset;
}

/* =========================
   Drawer / Popover (modern)
   Appears above everything, no layout shift
   ========================= */
body.drawer-open { overflow: hidden; }

/* ✅ FIX 1: Backdrop starts BELOW header (keeps navbar clean) */
.mobile-drawer-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  bottom: 0;

  z-index: calc(var(--z-drawer) - 1);
  background: rgba(0,0,0,0.38);

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
body.drawer-open .mobile-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* The container exists for JS toggling; the actual visual is .drawer-card */
.mobile-drawer {
  position: fixed;
  z-index: var(--z-drawer);
  inset: 0;
  pointer-events: none;
}

/* ✅ FIX 2: Drawer is OPAQUE (no see-through) */
.drawer-card {
  pointer-events: auto;

  position: fixed;
  top: calc(var(--header-h) + 12px);

  width: min(520px, calc(100vw - 24px));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);

  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--hair) 85%, transparent);
  background: var(--bg); /* <- opaque */
  box-shadow:
    0 22px 70px rgba(0,0,0,0.22),
    0 1px 0 var(--card-inset) inset;

  opacity: 0;
  transition:
    transform var(--dur-2) var(--ease),
    opacity var(--dur-2) var(--ease);

  padding: 14px;
}

body.drawer-open .drawer-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Desktop positioning: align to the centered shell, not the viewport edge */
@media (min-width: 981px) {
  .mobile-drawer-backdrop { display: none; } /* no dim */

  .drawer-card {
    left: auto;
    /* gutter = (100vw - shell)/2, then add a little inset */
    right: calc((100vw - var(--shell)) / 2 + 16px);

    transform: translateY(-8px);
    width: 420px;
  }
  body.drawer-open .drawer-card {
    transform: translateY(0);
  }
}

/* Drawer contents */
.drawer-links {
  display: grid;
  gap: 10px;
}

/* Link tiles */
.drawer-link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;

  padding: 14px 14px;
  border-radius: 18px;

  border: 1px solid transparent;
  background: transparent;

  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

.drawer-link:hover {
  background: color-mix(in srgb, var(--bg) 86%, var(--panel-2));
  border-color: color-mix(in srgb, var(--hair) 75%, transparent);
  transform: translateY(-1px);
}

.drawer-link:active { transform: translateY(0); }
.drawer-link:focus { outline: none; box-shadow: none; }
.drawer-link:focus-visible { outline: none; box-shadow: var(--focus); }

.drawer-link-main {
  grid-column: 1;
  grid-row: 1;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.drawer-link-sub {
  grid-column: 1;
  grid-row: 2;
  color: var(--muted);
  font-size: 0.95rem;
}

.drawer-link-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;

  font-size: 1.25rem;
  opacity: 0.75;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.drawer-link:hover .drawer-link-arrow {
  transform: translateX(2px);
  opacity: 0.9;
}

/* =========================
   Drawer mobile CTAs
   ========================= */
/* Mobile CTAs use the same structure as tiles, but look like buttons */
.drawer-mobile-ctas .drawer-link-cta {
  /* keep CTA visible even if Safari flakes on gradients */
  background-color: #7c5cff !important; 
  background-image: linear-gradient(135deg, rgba(124,92,255,1), rgba(54,214,255,1)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;

  color: #fff !important;
  -webkit-text-fill-color: #fff;

  /* halo fix */
  border: 0 !important;
  background-clip: padding-box;
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;

  /* keep only outer glow (remove inset line that looks like border) */
  box-shadow: 0 14px 40px rgba(124,92,255,.25) !important;

  /* optional: nudge Safari to paint it immediately */
  transform: translateZ(0);
  will-change: transform;
}

.drawer-mobile-ctas .drawer-link-cta .drawer-link-main {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.drawer-mobile-ctas .drawer-link-cta .drawer-link-sub {
  color: rgba(255,255,255,0.82) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.82);
}

.drawer-mobile-ctas .drawer-link-cta .drawer-link-arrow {
  color: #fff !important;
  opacity: 0.92 !important;
}

/* Hover / focus keeps CTA feel */
.drawer-mobile-ctas .drawer-link-cta:hover {
  background-color: #7c5cff !important;
  background-image: linear-gradient(135deg, rgba(124,92,255,1), rgba(54,214,255,1)) !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.drawer-mobile-ctas .drawer-link-cta:focus-visible {
  box-shadow:
    0 0 0 4px rgba(124,92,255,0.28),
    0 14px 40px rgba(124,92,255,.25) !important;
}

/* ✅ FIX 3: Mobile CTAs look like the tiles (Contact CTA, FAQ secondary) */
.drawer-mobile-ctas {
  display: none;
  padding: 4px 0 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--hair);
  gap: 10px;
}

/* Desktop-only links */
.drawer-desktop-only { display: none; }

@media (min-width: 981px) {
  .drawer-desktop-only { display: grid; }
}

@media (max-width: 980px) {
  .drawer-mobile-ctas { display: grid; }
}

/* =========================
   Sections + reveal
   ========================= */
.section {
  padding: clamp(3.25rem, 4vw, 5.25rem) 0;
  position: relative;
}
.section::before { content: none !important; }

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.h1 { font-size: clamp(2.4rem, 3.8vw, 3.6rem); line-height: 1.05; margin: 0 0 1rem; }
.h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); margin: 0 0 .75rem; }
.lead { color: var(--muted); font-size: 1rem; max-width: 70ch; }
.muted { color: var(--muted); }

/* =========================
   Footer
   ========================= */
.site-footer {
  border-top: 1px solid var(--hair);
  padding: 2.25rem 0 2.75rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
}
.footer-meta { color: var(--muted); font-size: .95rem; }
.footer-right { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.footer-link { color: var(--muted); }
.footer-link:hover { color: var(--ink); }

/* =========================
   Modal base styles (shared)
   ========================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1.2rem;
  isolation: isolate;
}
.modal[hidden] { display: none !important; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.56);
}

.modal-card {
  position: relative;
  width: min(760px, 100%);
  max-height: min(78vh, 780px);
  overflow: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--hair);

  background: color-mix(in srgb, var(--bg) 78%, var(--panel));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-theme="light"] .modal-head {
  background: color-mix(in srgb, var(--bg) 86%, var(--panel));
}

.modal-title { font-weight: 900; font-size: 1.15rem; }
.modal-sub { color: var(--muted); font-size: .95rem; margin-top: .15rem; }

.modal-body { padding: 1rem; display: grid; gap: .75rem; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .7rem;
  padding: 1rem;
  border-top: 1px solid var(--hair);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

body.is-locked {
  overflow: hidden;
  touch-action: none;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px) {
  html { --header-h: 80px; }
  .footer-inner { flex-direction: column; }
  .header-cta { display: none; }
}

@media (max-width: 520px) {
  .shell { width: min(var(--shell), calc(100% - 1.25rem)); }

  .section {
    padding: clamp(2.25rem, 6vw, 3.25rem) 0;
  }

  .brand { min-width: 0; }
  .brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 170px;
  }

  .brand-name { font-size: .95rem; }
  .brand-role {
    display: block;
    font-size: .78rem;
    margin-top: .05rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .btn { padding: 0 .75rem; height: 40px; }
  .header-inner { gap: .5rem; }

  /* Make the popover feel intentional on tiny screens */
  .drawer-card {
    width: min(520px, calc(100vw - 20px));
    padding: 12px;
    border-radius: 20px;
  }
}