/* ============================================================
   STRYD — homepage theme layer: liquid-glass for BOTH themes + the theme toggle.
   Loaded AFTER stryd.css. Every rule is either theme-neutral (the toggle) or scoped to :root[data-theme="light"] /
   :root[data-theme="dark"]. The inline script in <head> sets data-theme from localStorage('stryd_theme') or the
   system preference before first paint.
   Recipe (same in both themes): a fixed soft color field behind everything, see-through section bands, translucent
   heavily-blurred panels, a bright rim light, a specular sheen, and soft colored depth shadows.
   Text rule: glass lets color through, so glow and glass-fill strengths are capped so that text stays >= 7:1 over the
   brightest part of the field (dark: <= 26% glow, <= 10% fill).
   ============================================================ */

/* ---- theme variables used by the homepage's own blocks (see the <style> in index.html) ---- */
:root {
  --h-ink: #FFFFFF;
  --h-line: rgba(255,255,255,0.08);
  --h-line-2: rgba(255,255,255,0.12);
  --h-fill: rgba(255,255,255,0.04);
  --h-fill-2: rgba(255,255,255,0.06);
  --h-line-gray: rgba(255,255,255,0.35);
}
:root[data-theme="light"] {
  color-scheme: light;
  --h-ink: #0A0A0A;
  --h-line: rgba(0,0,0,0.10);
  --h-line-2: rgba(0,0,0,0.16);
  --h-fill: rgba(0,0,0,0.04);
  --h-fill-2: rgba(0,0,0,0.06);
  --h-line-gray: rgba(0,0,0,0.38);

  /* page + text tokens (dark text on light ground; every text pair is >= 4.5:1) */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F1F4F8;
  --bg-card: #FFFFFF;
  --c-gray-200: #1A1A1A;
  --c-gray-300: #232A31;
  --c-gray-400: #232A31;
  --c-gray-500: #2B3239;
  --c-light-grey: #232A31;
  --c-pale-grey: #2B3239;
  --c-blue-grey: #2B3239;
  --glass-border: rgba(0,0,0,0.12);
  --glass-hi: rgba(255,255,255,0.95);
  --glass-tint: rgba(10,122,255,0.10);
  --glow: 0 0 0 rgba(0,0,0,0);
  --glow-soft: none;
}
/* initTweaks() writes --bg-primary/--bg-secondary inline on <body>; !important in a stylesheet beats that. */
:root[data-theme="light"] body { --bg-primary: #FFFFFF !important; --bg-secondary: #F1F4F8 !important; background: #FFFFFF; color: #1A1A1A; }
:root[data-theme="light"] body.glow-on { --glow: 0 0 0 rgba(0,0,0,0); --glow-soft: none; }
:root[data-theme="light"] .tweaks-panel { display: none !important; }

/* ---- ambient background: a soft color field for the glass to blur ---- */
/* Real glassmorphism needs something colorful behind translucent panels. The fixed ambient layer carries soft brand-blue,
   cyan and indigo light; section bands are see-through so the cards (which scroll over it) pick it up. */
/* Solid white page: no gradient, grain or grid. */
:root[data-theme="light"] body { background: #FFFFFF; }
:root[data-theme="light"] .ambient { display: none; }
/* let the color field show through the section bands (they are opaque by default) */
:root[data-theme="light"] .section-black { background: transparent; }
:root[data-theme="light"] .section-dark  { background: transparent; }

/* ---- headings + text ---- */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3 { color: #0A0A0A; }
:root[data-theme="light"] .hero-title-pulse { color: #0A0A0A; }
:root[data-theme="light"] .eyebrow { color: #0A5FCC; }
:root[data-theme="light"] [style*="color:#fff"],
:root[data-theme="light"] [style*="color: #fff"] { color: #0A0A0A !important; }
:root[data-theme="light"] .partner-tag,
:root[data-theme="light"] .partner-tag * { color: #fff !important; }  /* colored brand tags keep white text */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-primary * { color: #fff !important; }
:root[data-theme="light"] ::selection { background: #0A7AFF; color: #fff; }

/* ---- glass cards: translucent, heavily blurred, bright rim, specular sheen, soft colored depth ---- */
:root[data-theme="light"] .glass {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.26) 48%, rgba(255,255,255,0.40) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(1.04);
  backdrop-filter: blur(30px) saturate(150%) brightness(1.04);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    0 24px 56px rgba(40,62,110,0.14),
    0 4px 12px rgba(40,62,110,0.06),
    0 0 0 1px rgba(30,80,170,0.07),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 1px 0 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(255,255,255,0.40),
    inset 0 -22px 40px rgba(255,255,255,0.18);
}
/* rim light: bright top-left edge fading to a faint blue lower-right edge */
:root[data-theme="light"] .glass::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(255,255,255,1), rgba(255,255,255,0.35) 34%, transparent 60%, rgba(10,122,255,0.06));
}
/* specular sheen across the top-left, like light catching wet glass */
:root[data-theme="light"] .glass::after {
  display: block;
  mix-blend-mode: normal;
  opacity: 1;
  background:
    radial-gradient(120% 70% at 10% -6%, rgba(255,255,255,0.78), rgba(255,255,255,0.20) 38%, transparent 58%),
    radial-gradient(90% 60% at 108% 112%, rgba(10,122,255,0.02), transparent 54%);
}
/* the tilted layers behind the founding-member card read as stacked glass sheets */
:root[data-theme="light"] .glass-stack > .layer-bg  { background: rgba(10,122,255,0.02); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 18px 44px rgba(24,62,140,0.14); }
:root[data-theme="light"] .glass-stack > .layer-mid { background: rgba(255,255,255,0.34); border: 1px solid rgba(255,255,255,0.8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); }
/* the hero video sits in a glass frame too */
:root[data-theme="light"] .hero-bubble {
  box-shadow: 0 26px 60px rgba(24,62,140,0.30), 0 0 0 1px rgba(255,255,255,0.85), 0 0 0 7px rgba(255,255,255,0.32);
}

/* ---- buttons, chips, inputs (glass too) ---- */
:root[data-theme="light"] .btn-ghost {
  color: #0A0A0A; border: 1px solid rgba(255,255,255,0.85);
  background: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0.25));
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 8px 22px rgba(24,62,140,0.14), inset 0 1px 0 #fff;
}
:root[data-theme="light"] .btn-ghost:hover { border-color: #fff; background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.45)); }
:root[data-theme="light"] .chip {
  color: #1F252C; border: 1px solid rgba(255,255,255,0.85);
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(24,62,140,0.10), inset 0 1px 0 #fff;
}
:root[data-theme="light"] .data-label { color: #2B3239; }
:root[data-theme="light"] .input,
:root[data-theme="light"] .textarea,
:root[data-theme="light"] select.input {
  color: #0A0A0A; background-color: rgba(255,255,255,0.52); border: 1px solid rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 3px rgba(24,62,140,0.14), 0 1px 0 rgba(255,255,255,0.8);
}
:root[data-theme="light"] .input:focus,
:root[data-theme="light"] .textarea:focus,
:root[data-theme="light"] select.input:focus { border-color: #0A7AFF; box-shadow: 0 0 0 3px rgba(10,122,255,0.22), inset 0 1px 3px rgba(24,62,140,0.10); background-color: rgba(255,255,255,0.78); }
:root[data-theme="light"] select.input { background-image: linear-gradient(135deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0)); }
:root[data-theme="light"] select.input option { background: #fff; color: #0A0A0A; }
:root[data-theme="light"] .progress-track { background: rgba(24,62,140,0.14); box-shadow: inset 0 1px 2px rgba(24,62,140,0.15); }

/* ---- partner strip, footer, social ---- */
:root[data-theme="light"] .partner-strip {
  border-color: rgba(255,255,255,0.7);
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.18));
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgba(24,62,140,0.08);
}
:root[data-theme="light"] .social a {
  color: #2A2F36; border: 1px solid rgba(255,255,255,0.9);
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(24,62,140,0.10), inset 0 1px 0 #fff;
}
:root[data-theme="light"] .social a:hover { color: #0A7AFF; }
:root[data-theme="light"] .legal, :root[data-theme="light"] .legal a { color: #232A31; }
:root[data-theme="light"] [style*="rgba(255,255,255,0.1)"] { border-color: rgba(255,255,255,0.9) !important; box-shadow: inset 0 1px 0 #fff; }

/* ---- mobile drawer ---- */
:root[data-theme="light"] .mobile-drawer {
  background: linear-gradient(160deg, rgba(234,242,255,0.78), rgba(255,255,255,0.62));
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
}
:root[data-theme="light"] .mobile-drawer a:not(.btn) { color: #0A0A0A; }
:root[data-theme="light"] .mobile-drawer .close { color: #0A0A0A; }

/* ---- header pill: floating frosted glass ---- */
:root[data-theme="light"] .nav {
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.34));
  -webkit-backdrop-filter: blur(26px) saturate(140%) brightness(1.04); backdrop-filter: blur(26px) saturate(140%) brightness(1.04);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 16px 40px rgba(24,62,140,0.20), 0 0 0 1px rgba(30,80,170,0.07), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,0.4);
}
:root[data-theme="light"] .nav .nav-links a { color: #2A2F36; }
:root[data-theme="light"] .nav .nav-links a:hover,
:root[data-theme="light"] .nav .nav-links a.active { background: rgba(255,255,255,0.7); color: #0A0A0A; box-shadow: 0 2px 8px rgba(24,62,140,0.10); }
:root[data-theme="light"] .nav-burger span { background: #0A0A0A; }
:root[data-theme="light"] .logo img { filter: invert(1) hue-rotate(180deg); }

/* ============================================================
   DARK THEME: same liquid-glass recipe as light, on near-black with glowing color.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* bright text so it stays >= 7:1 over the brightest glow behind glass (see header note) */
  --c-gray-200: #EEF1F6;
  --c-gray-300: #CDD5E0;
  --c-gray-400: #D9DFE8;
  --c-gray-500: #CDD5E0;
  --c-light-grey: #D9DFE8;
  --c-pale-grey: #CDD5E0;
  --c-blue-grey: #CDD5E0;
  --glass-border: rgba(255,255,255,0.20);
}
:root[data-theme="dark"] body { background: #000000; }
/* Solid black page: no gradient, grain or grid. */
:root[data-theme="dark"] .ambient { display: none; }
:root[data-theme="dark"] .section-black,
:root[data-theme="dark"] .section-dark { background: transparent; }
:root[data-theme="dark"] .eyebrow { color: #B5D8FF; }

/* ---- glass panels ---- */
:root[data-theme="dark"] .glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 50%, rgba(255,255,255,0.07) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(0.96);
  backdrop-filter: blur(30px) saturate(150%) brightness(0.96);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow:
    0 28px 64px rgba(0,0,0,0.55),
    0 0 30px rgba(10,122,255,0.015),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 1px 0 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    inset 0 -24px 44px rgba(10,122,255,0.008);
}
:root[data-theme="dark"] .glass::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.18) 34%, transparent 60%, rgba(10,122,255,0.09));
}
:root[data-theme="dark"] .glass::after {
  mix-blend-mode: screen;
  opacity: 1;
  background:
    radial-gradient(120% 70% at 10% -6%, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 38%, transparent 58%),
    radial-gradient(90% 60% at 108% 112%, rgba(10,122,255,0.018), transparent 54%);
}
:root[data-theme="dark"] .glass-stack > .layer-bg  { background: rgba(10,122,255,0.08); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 22px 54px rgba(0,0,0,0.45); }
:root[data-theme="dark"] .glass-stack > .layer-mid { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
:root[data-theme="dark"] .hero-bubble {
  box-shadow: 0 30px 70px rgba(0,0,0,0.65), 0 0 40px rgba(10,122,255,0.03), 0 0 0 1px rgba(255,255,255,0.22), 0 0 0 7px rgba(255,255,255,0.05);
}

/* ---- buttons, chips, inputs ---- */
:root[data-theme="dark"] .btn-ghost {
  color: #fff; border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
:root[data-theme="dark"] .btn-ghost:hover { border-color: rgba(255,255,255,0.5); background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)); }
:root[data-theme="dark"] .chip {
  color: #E3E8F0; border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.30);
}
:root[data-theme="dark"] .data-label { color: #CDD5E0; }
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .textarea,
:root[data-theme="dark"] select.input {
  color: #fff; background-color: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.40), 0 1px 0 rgba(255,255,255,0.10);
}
:root[data-theme="dark"] .input:focus,
:root[data-theme="dark"] .textarea:focus,
:root[data-theme="dark"] select.input:focus { border-color: #0A7AFF; box-shadow: 0 0 0 3px rgba(10,122,255,0.30), inset 0 2px 6px rgba(0,0,0,0.30); background-color: rgba(255,255,255,0.10); }
:root[data-theme="dark"] .progress-track { background: rgba(255,255,255,0.14); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }

/* ---- header pill ---- */
:root[data-theme="dark"] .nav {
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.09));
  -webkit-backdrop-filter: blur(26px) saturate(135%) brightness(1.0); backdrop-filter: blur(26px) saturate(135%) brightness(1.0);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow: 0 16px 44px rgba(0,0,0,0.55), 0 0 16px rgba(10,122,255,0.015), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .nav .nav-links a { color: #DCE2EB; }
:root[data-theme="dark"] .nav .nav-links a:hover,
:root[data-theme="dark"] .nav .nav-links a.active { background: rgba(255,255,255,0.14); color: #fff; }

/* ---- partner strip, footer, social, drawer ---- */
:root[data-theme="dark"] .partner-strip {
  border-color: rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.30);
}
:root[data-theme="dark"] .social a {
  color: #E3E8F0; border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.30);
}
:root[data-theme="dark"] .social a:hover { color: #fff; }
:root[data-theme="dark"] .legal, :root[data-theme="dark"] .legal a { color: #D9DFE8; }
:root[data-theme="dark"] .mobile-drawer {
  background: linear-gradient(160deg, rgba(8,16,34,0.82), rgba(5,8,16,0.70));
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
}

/* small-print fixes found by measuring real contrast over the glass */
:root[data-theme="light"] [style*="opacity:0.5"],
:root[data-theme="dark"] [style*="opacity:0.5"] { opacity: 0.88 !important; }                       /* "(Optional)" hints on the contact form */
:root[data-theme="light"] .hero-copy p { color: #1A1A1A !important; }     /* hero tagline sits straight on the strongest blue */
:root[data-theme="dark"] .glass-stack p,
:root[data-theme="dark"] .glass-stack .mono { color: #EEF1F6 !important; } /* the founding card stacks 3 glass layers: keep its small text brightest */
:root[data-theme="dark"] .glass-stack > .layer-bg  { background: rgba(10,122,255,0.01); }
:root[data-theme="dark"] .glass-stack > .layer-mid { background: rgba(255,255,255,0.03); }
:root[data-theme="dark"] .input::placeholder,
:root[data-theme="dark"] .textarea::placeholder { color: #E3E8F0; opacity: 1; }

/* eyebrows that carry an inline brand-blue color: swap to a theme-safe blue */
:root[data-theme="light"] .eyebrow[style*="#0A7AFF"] { color: #0A5FCC !important; }
:root[data-theme="dark"]  .eyebrow[style*="#0A7AFF"] { color: #B5D8FF !important; }

/* ---- theme toggle (both themes) ---- */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto;
  color: #fff; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.22);
}
.theme-toggle:hover { background: rgba(255,255,255,0.14); }
.theme-toggle:focus-visible { outline: 2px solid #0A7AFF; outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .i-sun { display: none; }
.theme-toggle[data-mode="dark"] .i-sun { display: block; }   /* dark mode shows the sun (action: go light) */
.theme-toggle[data-mode="dark"] .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle { color: #0A0A0A; background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.2); }
:root[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.10); }
.mobile-drawer .theme-toggle { width: 48px; height: 48px; }