/* finansavimoekspertai-www — design system + light/dark theming.
   Direction: royal blue (#1B3A8B) + signal gold (#D8A93C), logo #13.

   THEMING MODEL — all colors flow through CSS variables defined as
   space-separated RGB triplets (`27 58 139`). Tailwind tokens reference them
   as `rgb(var(--c-brand-700) / <alpha-value>)`, so every utility AND every
   component class below recolors automatically when the variables change.

   - `:root`        → light theme values (default).
   - `html.dark`    → dark theme values + the few component overrides that the
                      flipping scale can't express (buttons, panel chrome, grid).
   - `.band-dark`, `.site-footer` → pin the variables to a fixed DARK context so
                      these sections stay dark in BOTH themes (no markup change).
   - `.surface-light` → pin to a fixed LIGHT context (the white form card that
                      sits on the always-dark contact band / unlock gate). */

@import url('/static/fonts/fonts.css');

:root {
  /* brand — royal blue */
  --c-brand-50:  238 242 251;
  --c-brand-100: 220 228 246;
  --c-brand-200: 185 201 238;
  --c-brand-300: 138 163 224;
  --c-brand-600:  33  66 154;
  --c-brand-700:  27  58 139;   /* primary */
  --c-brand-800:  22  48 111;
  --c-brand-900:  18  38  87;
  --c-brand-950:  12  26  60;
  /* accent — gold */
  --c-accent:      216 169  60;
  --c-accent-deep: 184 134  42;
  --c-accent-soft: 246 234 201;
  /* ink — text + neutrals (light theme) */
  --c-ink-900: 15 27 51;
  --c-ink-700: 51 65 85;
  --c-ink-500: 100 116 139;
  --c-ink-300: 203 213 225;
  --c-ink-200: 226 232 240;
  --c-ink-100: 241 245 249;
  /* surfaces */
  --c-page:        245 247 251;
  --c-surface:     255 255 255;
  --c-input:       251 253 253;
  --c-line:        227 232 240;
  --c-line-strong: 203 213 225;
  /* grid + button text helpers */
  --grid-line: 27 58 139;          /* blueprint grid stroke (uses brand) */
  --grid-strength: .045;
  --btn-amber-text: 12 26 60;      /* dark navy text on gold — fixed both themes */

  /* non-color design tokens */
  --shadow-card: 0 1px 2px rgba(12,26,60,.05), 0 10px 30px -12px rgba(12,26,60,.16);
  --shadow-pop:  0 2px 4px rgba(12,26,60,.07), 0 24px 48px -16px rgba(12,26,60,.26);
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-serif: "Fraunces", Georgia, serif;
}

html.dark {
  /* brand — blue tints invert to dark navy; mid/upper shades brighten so they
     read as accents on a dark page */
  --c-brand-50:   22  32  64;
  --c-brand-100:  28  42  84;
  --c-brand-200:  40  58 110;
  --c-brand-300:  96 125 200;
  --c-brand-600: 110 149 242;
  --c-brand-700: 124 160 245;   /* primary accent on dark (light blue) */
  --c-brand-800: 158 186 248;
  --c-brand-900: 200 215 250;
  --c-brand-950: 226 235 252;
  --c-accent:      230 184  80;
  --c-accent-deep: 240 200 110;
  --c-accent-soft:  58  47  26;
  --c-ink-900: 233 238 249;
  --c-ink-700: 196 208 230;
  --c-ink-500: 147 163 194;
  --c-ink-300:  90 107 142;
  --c-ink-200:  42  53  86;
  --c-ink-100:  26  37  71;
  --c-page:        10 17 36;
  --c-surface:     19 31 64;
  --c-input:       14 23 51;
  --c-line:        42 53 86;
  --c-line-strong: 60 74 110;
  --grid-line: 175 196 242;
  --grid-strength: .06;
}

/* ── always-dark sections: pin a fixed dark context (theme-independent) ──
   In these sections the brand tints read as LIGHT text on a dark ground, so
   100 = brightest (links) → 300 = dimmest (muted); 50 stays a dark tint. */
.band-dark, .site-footer {
  --c-brand-50:   26  40  82;     /* dark chip / tint bg */
  --c-brand-100: 214 224 244;     /* brightest — links */
  --c-brand-200: 182 198 228;     /* light body text */
  --c-brand-300: 140 162 202;     /* muted light text */
  --c-brand-600: 150 180 245;     /* light-blue accent */
  --c-brand-700: 178 198 244;     /* logo bars light */
  --c-brand-800: 200 214 246;
  --c-ink-900: 240 244 252;
  --c-ink-700: 205 216 236;
  --c-ink-500: 150 166 198;
  --c-accent:      230 184  80;
  --c-line:        255 255 255;   /* consumed via /alpha for hairlines */
  --c-line-strong: 255 255 255;
}

/* ── light-pinned island (form card on the dark band / unlock card) ── */
.surface-light {
  --c-brand-50:  238 242 251;
  --c-brand-100: 220 228 246;
  --c-brand-200: 185 201 238;
  --c-brand-700:  27  58 139;
  --c-accent:    216 169  60;
  --c-ink-900: 15 27 51;
  --c-ink-700: 51 65 85;
  --c-ink-500: 100 116 139;
  --c-surface: 255 255 255;
  --c-input:   251 253 253;
  --c-line:        227 232 240;
  --c-line-strong: 203 213 225;
  color: rgb(var(--c-ink-900));
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  font-family: var(--font-body);
  color: rgb(var(--c-ink-900));
  background: rgb(var(--c-page));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}
::selection { background: rgb(var(--c-brand-700)); color: #fff; }
:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 3px; border-radius: 4px; }

/* fine engineering grid */
.page-grid::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgb(var(--grid-line) / var(--grid-strength)) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--grid-line) / calc(var(--grid-strength) * .85)) 1px, transparent 1px);
  background-size: 120px 120px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.35) 60%, rgba(0,0,0,.55));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.35) 60%, rgba(0,0,0,.55));
}
main, header, footer { position: relative; z-index: 1; }

/* ── typography helpers ─────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-serif { font-family: var(--font-serif); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--c-brand-600));
}
.kicker i { width: 8px; height: 8px; background: rgb(var(--c-accent)); display: inline-block; border-radius: 2px; }

/* ── logo mark (theme-adaptive via tokens) ──────────────────────────────
   Generic token classes so every theme's logo (server/themes.py) recolors
   with the active theme + light/dark. The SVGs also carry explicit fill/
   stroke attributes as fallbacks (these class rules override them). */
.lmark { display: block; width: 100%; height: 100%; }     /* fills its sized wrapper */
.lmark .t-brand-fill   { fill: rgb(var(--c-brand-700)); }
.lmark .t-brand-stroke { stroke: rgb(var(--c-brand-700)); }
.lmark .t-accent-fill   { fill: rgb(var(--c-accent)); }
.lmark .t-accent-stroke { stroke: rgb(var(--c-accent)); }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  padding: 13px 26px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary {
  background: rgb(var(--c-brand-700)); color: #fff;
  box-shadow: 0 1px 2px rgba(12,26,60,.2), 0 8px 20px -8px rgba(22,48,111,.45);
}
.btn-primary:hover { background: rgb(var(--c-brand-800)); transform: translateY(-2px); }
html.dark .btn-primary { background: rgb(var(--c-brand-600)); color: #fff; }
html.dark .btn-primary:hover { background: rgb(var(--c-brand-700)); }
.btn-primary:active { transform: translateY(0); }
.btn .arr { transition: transform .18s ease; }
.btn:hover .arr { transform: translateX(3px); }
.btn-ghost { background: rgb(var(--c-surface)); color: rgb(var(--c-ink-900)); border-color: rgb(var(--c-line-strong)); }
.btn-ghost:hover { border-color: rgb(var(--c-brand-600)); color: rgb(var(--c-brand-700)); transform: translateY(-2px); }
.btn-amber {
  background: rgb(var(--c-accent)); color: rgb(var(--btn-amber-text)); border-color: rgb(var(--c-accent));
  box-shadow: 0 1px 2px rgba(12,26,60,.18), 0 10px 24px -10px rgba(216,169,60,.55);
}
.btn-amber:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── theme toggle ───────────────────────────────────────────────────── */
.theme-toggle {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid rgb(var(--c-line-strong));
  color: rgb(var(--c-ink-700));
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.theme-toggle:hover { color: rgb(var(--c-brand-700)); border-color: rgb(var(--c-brand-600)); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
html.dark .theme-toggle .i-sun { display: block; }
html.dark .theme-toggle .i-moon { display: none; }

/* ── header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(var(--c-surface) / .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgb(var(--c-line));
  transition: box-shadow .25s ease, background-color .25s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px -12px rgba(12,26,60,.18); }
.brand-name {
  font-family: var(--font-serif); font-size: 1.18rem; letter-spacing: -.01em;
  color: rgb(var(--c-ink-900)); font-weight: 400;
}
.brand-name b { font-weight: 700; }
.brand-name .x2 { color: rgb(var(--c-brand-700)); }
.navlink {
  font-size: .93rem; font-weight: 500; color: rgb(var(--c-ink-700));
  padding: 9px 14px; border-radius: 8px; position: relative;
}
.navlink::after {
  content: ""; position: absolute; left: 14px; right: 100%; bottom: 5px; height: 2px;
  background: rgb(var(--c-accent)); transition: right .22s ease; border-radius: 2px;
}
.navlink:hover { color: rgb(var(--c-brand-700)); }
.navlink:hover::after { right: 14px; }

/* ── hero atmosphere + badge ────────────────────────────────────────── */
.hero-atmo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(820px 480px at 78% 8%, rgb(var(--c-brand-600) / .10), transparent 64%),
    radial-gradient(640px 420px at 8% 96%, rgb(var(--c-accent) / .08), transparent 60%);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--c-brand-700)); background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line-strong)); border-radius: 999px;
  padding: 7px 16px 7px 12px;
}
.hero-badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c-accent)); position: relative; }
.hero-badge .pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid rgb(var(--c-accent)); opacity: 0; animation: ping-soft 2.6s ease-out infinite;
}
@keyframes ping-soft { 0% { transform: scale(.5); opacity: .8; } 70% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }

.mono-foot {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--c-ink-500));
  display: flex; align-items: center; gap: 10px;
}
.mono-foot::before { content: ""; width: 34px; height: 1px; background: rgb(var(--c-line-strong)); flex-shrink: 0; }
.mono-foot-dark { color: rgb(var(--c-brand-300)); }
.mono-foot-dark::before { background: rgb(var(--c-brand-600)); }

/* staggered load-in (hero) */
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
[data-r] { animation: riseIn .7s cubic-bezier(.22,.8,.3,1) both; }
[data-r="1"] { animation-delay: .05s } [data-r="2"] { animation-delay: .14s }
[data-r="3"] { animation-delay: .23s } [data-r="4"] { animation-delay: .32s }
[data-r="5"] { animation-delay: .41s } [data-r="6"] { animation-delay: .5s }
[data-r="7"] { animation-delay: .34s }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.22,.8,.3,1), transform .65s cubic-bezier(.22,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s } .reveal[data-d="2"] { transition-delay: .14s }
.reveal[data-d="3"] { transition-delay: .21s } .reveal[data-d="4"] { transition-delay: .28s }
.reveal[data-d="5"] { transition-delay: .35s } .reveal[data-d="6"] { transition-delay: .42s }

/* skip-to-content link (a11y, WCAG 2.4.1 Bypass Blocks). Self-contained so it
   never depends on Tailwind's tree-shaken `sr-only` utility. */
.skip-link {
  position: absolute; left: 8px; top: -56px; z-index: 100;
  background: rgb(var(--c-brand-700)); color: #fff;
  padding: 10px 16px; border-radius: 8px; text-decoration: none;
  font-family: var(--font-display, inherit); font-weight: 600; font-size: .9rem;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }

/* Desktop services dropdown — shown on hover (mouse), :focus-within (keyboard),
   or when JS adds .open (click/touch). Replaces the old hover-only Tailwind
   group-hover toggle that keyboard and touch users could not operate. */
.nav-dd-panel { display: none; }
.nav-dd:hover > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel,
.nav-dd-panel.open { display: block; }

/* ── hero "galimybių žemėlapis" panel ───────────────────────────────── */
.panel-bar-grad { background: linear-gradient(to bottom, rgb(var(--c-surface)), rgb(var(--c-brand-50))); }
.flow-svg text { font-family: var(--font-body); font-size: 13.2px; fill: rgb(var(--c-ink-700)); font-weight: 500; }
.flow-svg text.dest { font-family: var(--font-display); font-weight: 600; fill: rgb(var(--c-ink-900)); font-size: 13.8px; }
.flow-svg .rail { stroke: rgb(var(--c-brand-200)); stroke-width: 2; fill: none; }
.flow-svg .flow {
  stroke: rgb(var(--c-brand-600)); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-dasharray: 1 10; animation: flowdash 2.8s linear infinite;
}
@keyframes flowdash { to { stroke-dashoffset: -44; } }
.flow-svg .srcnode { fill: rgb(var(--c-surface)); stroke: rgb(var(--c-brand-600)); stroke-width: 2; }
.flow-svg .hub { fill: rgb(var(--c-accent)); }
.flow-svg .hubring {
  fill: none; stroke: rgb(var(--c-accent)); stroke-width: 1.5; opacity: .55;
  transform-box: fill-box; transform-origin: center; animation: hubping 2.6s ease-out infinite;
}
@keyframes hubping { 0% { transform: scale(.55); opacity: .7 } 75% { transform: scale(1.5); opacity: 0 } 100% { opacity: 0 } }

/* ── service cards ──────────────────────────────────────────────────── */
.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 18px;
  padding: 28px 26px 24px; box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc-card:hover { transform: translateY(-4px); border-color: rgb(var(--c-brand-300)); box-shadow: var(--shadow-pop); }
.svc-idx {
  position: absolute; top: 24px; right: 24px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  color: rgb(var(--c-brand-300)); letter-spacing: .1em;
}
.svc-icon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 20px;
  background: rgb(var(--c-brand-50)); border: 1px solid rgb(var(--c-brand-100));
  display: grid; place-items: center; color: rgb(var(--c-brand-700)); font-size: 1.35rem;
  transition: background .22s ease, border-color .22s ease;
}
.svc-card:hover .svc-icon { background: rgb(var(--c-brand-100)); border-color: rgb(var(--c-brand-200)); }
.svc-link {
  margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgb(var(--c-line));
  font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: rgb(var(--c-brand-700));
  display: inline-flex; align-items: center; gap: 7px;
}
.svc-link .arr { transition: transform .2s ease; }
.svc-card:hover .svc-link { color: rgb(var(--c-brand-800)); }
.svc-card:hover .svc-link .arr { transform: translateX(4px); }

/* ── process steps ──────────────────────────────────────────────────── */
.process-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgb(var(--grid-line) / var(--grid-strength)) 1px, transparent 1px);
  background-size: 60px 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.8) 30%, transparent 90%);
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.8) 30%, transparent 90%);
}
.steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 26px; }
.steps::before {
  content: ""; position: absolute; top: 7px; left: 8px; right: 8px; height: 2px;
  background: repeating-linear-gradient(to right, rgb(var(--c-brand-200)) 0 8px, transparent 8px 16px);
}
.step { position: relative; padding-top: 34px; }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px;
  border-radius: 50%; background: rgb(var(--c-surface)); border: 2.5px solid rgb(var(--c-brand-600));
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.step:last-child::before { background: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }
.step:hover::before { background: rgb(var(--c-brand-600)); box-shadow: 0 0 0 6px rgb(var(--c-brand-600) / .13); }
.step:last-child:hover::before { background: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 6px rgb(var(--c-accent) / .2); }
.step-n {
  font-family: var(--font-mono); font-weight: 600; font-size: 1.5rem;
  color: rgb(var(--c-brand-700)); letter-spacing: -.02em; margin-bottom: 8px;
}
.step-n::after { content: "."; color: rgb(var(--c-accent)); }
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px 28px; }
  .steps::before { display: none; }
  .step { padding-top: 0; padding-left: 32px; }
  .step::before { top: 6px; }
}
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }

/* ── market strip ───────────────────────────────────────────────────── */
.market-item {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--c-brand-800));
  padding: 8px 4px; white-space: nowrap;
}
.market-sep { width: 7px; height: 7px; border-radius: 2px; background: rgb(var(--c-accent)); margin: 0 22px; transform: rotate(45deg); flex-shrink: 0; }
@media (max-width: 640px) { .market-sep { margin: 0 14px; } }

/* ── FAQ items ──────────────────────────────────────────────────────── */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
.faq-item {
  background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 12px;
  box-shadow: var(--shadow-card); overflow: hidden; transition: border-color .2s ease;
}
.faq-item[open] { border-color: rgb(var(--c-brand-300)); }
.faq-q-idx {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: rgb(var(--c-brand-600));
  background: rgb(var(--c-brand-50)); border: 1px solid rgb(var(--c-brand-100)); border-radius: 6px;
  padding: 4px 8px; letter-spacing: .06em; flex-shrink: 0;
}
.faq-plus { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: rgb(var(--c-brand-700)); border-radius: 2px;
  transition: transform .25s ease;
}
.faq-plus::before { left: 8px; top: 1px; width: 2px; height: 16px; }
.faq-plus::after { left: 1px; top: 8px; width: 16px; height: 2px; }
.faq-item[open] .faq-plus::before { transform: rotate(90deg) scaleY(0); }
.faq-item[open] .faq-plus::after { transform: rotate(180deg); background: rgb(var(--c-accent-deep)); }

/* ── dark contact band ──────────────────────────────────────────────── */
.band-dark {
  position: relative;
  background: linear-gradient(135deg, var(--c-deep-1, #081026) 0%, var(--c-deep-2, #0E1C44) 55%, var(--c-deep-3, #16306F) 100%);
  color: #fff;
}
.band-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(175,196,242,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(175,196,242,.05) 1px, transparent 1px);
  background-size: 120px 120px;
}
.tick-amber {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
  background: rgb(var(--c-accent) / .14); border: 1px solid rgb(var(--c-accent) / .45);
  display: grid; place-items: center; color: rgb(var(--c-accent));
}
.tick-teal {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
  background: rgb(var(--c-brand-50)); border: 1px solid rgb(var(--c-brand-200));
  display: grid; place-items: center; color: rgb(var(--c-brand-700));
}

/* ── forms ──────────────────────────────────────────────────────────── */
.f-label {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: rgb(var(--c-brand-800));
}
.f-label em { font-style: normal; color: rgb(var(--c-ink-500)); font-weight: 400; text-transform: none; letter-spacing: .02em; }
.f-input {
  font-family: var(--font-body); font-size: .95rem; color: rgb(var(--c-ink-900));
  background: rgb(var(--c-input)); border: 1px solid rgb(var(--c-line-strong)); border-radius: 9px;
  padding: 12px 14px; width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.f-input::placeholder { color: rgb(var(--c-ink-500) / .85); }
.f-input:focus {
  outline: none; border-color: rgb(var(--c-brand-600)); background: rgb(var(--c-surface));
  box-shadow: 0 0 0 3px rgb(var(--c-brand-600) / .16);
}
select.f-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231B3A8B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px; cursor: pointer;
}
textarea.f-input { resize: vertical; min-height: 96px; }

/* ── footer (always-dark, pinned above) ─────────────────────────────── */
.site-footer { background: var(--c-deep-footer, #081026); }
.footer-compliance {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--c-accent));
  border: 1px solid rgb(var(--c-accent) / .35); border-radius: 999px; padding: 6px 13px;
  background: rgb(var(--c-accent) / .07);
}
.footer-h {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--c-brand-300));
}
.footer-rek { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }

/* ── prose tweaks for legal/about pages ─────────────────────────────────
   Base body/heading colors come from Tailwind Typography (`prose prose-slate`
   + `dark:prose-invert` in the templates). Below: only the brand-specific
   overrides, which are theme-token driven so they flip on their own. */
.prose h2 { scroll-margin-top: 5.5rem; font-family: var(--font-display); letter-spacing: -.018em; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { font-family: var(--font-display); letter-spacing: -.012em; }
.prose :where(a):not(:where([class~="not-prose"] *)) { color: rgb(var(--c-brand-700)); text-decoration-color: rgb(var(--c-brand-300)); }
.prose :where(a):hover { color: rgb(var(--c-brand-800)); }
.prose :where(blockquote):not(:where([class~="not-prose"] *)) { border-left-color: rgb(var(--c-accent)); font-style: normal; }
.prose :where(code):not(:where([class~="not-prose"] *)) { color: rgb(var(--c-brand-700)); background: rgb(var(--c-brand-50)); padding: .1em .35em; border-radius: 4px; font-weight: 600; }
.prose :where(code):not(:where([class~="not-prose"] *))::before,
.prose :where(code):not(:where([class~="not-prose"] *))::after { content: ""; }
.prose table { font-size: .9em; }

.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}