/* ==========================================================================
   Fein marketing site — static, dependency-free.
   Converted from ui_kits/marketing-site (React/Babel preview) to plain
   HTML + CSS. Design tokens mirror /colors_and_type.css.
   ========================================================================== */

/* ── Inter, subsetted to Latin + the punctuation this copy uses (60 KB total) */
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap;
  src:local('Inter Regular'), url('inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal; font-display:swap;
  src:local('Inter SemiBold'), url('inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; font-display:swap;
  src:local('Inter Bold'), url('inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:800; font-style:normal; font-display:swap;
  src:local('Inter ExtraBold'), url('inter-800.woff2') format('woff2'); }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --teal:#0D9488; --teal-400:#2DD4BF; --teal-500:#14B8A6; --teal-700:#0F766E;
  --teal-50:#F0FDFA; --teal-100:#CCFBF1; --teal-800:#115E59;
  --gray-200:#E5E7EB; --gray-300:#D1D5DB; --gray-400:#9CA3AF;
  --gray-500:#6B7280; --gray-700:#374151;
  --cloud:#F3F4F6; --slate:#111827; --slate-900:#0F172A;
  --error-600:#DC2626; --warning-600:#D97706;

  --bg:#ffffff;
  --bg-alt:var(--cloud);
  --surface:#ffffff;
  --border:var(--gray-200);
  --text:#111827;
  --muted:var(--gray-500);
  --faint:var(--gray-400);
  --body:var(--gray-700);
  --accent:var(--teal);
  --accent-hi:var(--teal-700);
  --accent-soft:var(--teal-50);
  --header-bg:rgba(255,255,255,0.82);
  --drawer-bg:#ffffff;
  --card-ring:rgba(255,255,255,1);

  --spring:cubic-bezier(0.34,1.4,0.5,1);
  --ease:cubic-bezier(0.22,1,0.36,1);
}
:root[data-theme="dark"] {
  --bg:#0F172A; --bg-alt:#0B1220; --surface:#0F172A; --border:#1E293B;
  --text:#F8FAFC; --muted:#94A3B8; --faint:#64748B; --body:#CBD5E1;
  --accent:var(--teal-500); --accent-hi:var(--teal-400);
  --accent-soft:rgba(20,184,166,0.16);
  --header-bg:rgba(15,23,42,0.78); --drawer-bg:#0F172A;
  --card-ring:rgba(255,255,255,0.02);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0F172A; --bg-alt:#0B1220; --surface:#0F172A; --border:#1E293B;
    --text:#F8FAFC; --muted:#94A3B8; --faint:#64748B; --body:#CBD5E1;
    --accent:var(--teal-500); --accent-hi:var(--teal-400);
    --accent-soft:rgba(20,184,166,0.16);
    --header-bg:rgba(15,23,42,0.78); --drawer-bg:#0F172A;
    --card-ring:rgba(255,255,255,0.02);
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
a { color:inherit; }
img,svg { max-width:100%; }
h1,h2,h3 { margin:0; }
p { margin:0; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }

.container { max-width:1200px; margin:0 auto; padding:0 32px; }
.container.narrow { max-width:820px; }
.container.mid    { max-width:1080px; }
.container.tight  { max-width:760px; }
.section { padding:96px 0; }
.section.alt { background:var(--bg-alt); }
.grid { display:grid; gap:20px; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.hdr {
  position:sticky; top:0; z-index:50; background:var(--header-bg);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.hdr-in { height:64px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand .mark { color:var(--accent); display:inline-flex; }
:root[data-theme="dark"] .brand .mark { color:#fff; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brand .mark { color:#fff; } }
.brand .word { font-weight:800; font-size:22px; letter-spacing:-0.02em; }
.nav { display:flex; align-items:center; gap:26px; font-size:14px; font-weight:600; }
.nav a { text-decoration:none; opacity:0.78; padding-bottom:4px; border-bottom:2px solid transparent; }
.nav a:hover { opacity:1; }
.nav a[aria-current="page"] { opacity:1; color:var(--accent-hi); border-bottom-color:var(--accent-hi); }
.hdr-right { display:flex; align-items:center; gap:10px; }
.icon-btn {
  width:40px; height:40px; border-radius:9999px; border:0; background:transparent;
  color:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.icon-btn:hover { background:var(--accent-soft); }
.menu-btn { display:none; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; font-family:inherit; font-weight:600; cursor:pointer; border:0;
}
.btn-sm { height:40px; padding:0 18px; border-radius:9999px; font-size:14px; }
.btn-lg { height:56px; padding:0 28px; border-radius:14px; font-size:16px; }
.btn-md { height:48px; padding:0 22px; border-radius:14px; font-size:15px; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 8px 18px -6px rgba(13,148,136,0.5); }
.btn-primary:hover { filter:brightness(1.06); }
.btn-ghost { background:transparent; color:inherit; border:2px solid var(--border); font-weight:600; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent-hi); }

/* Pulsing hero CTA */
@keyframes feinPulseGlow {
  0%,100% { transform:scale(1);     box-shadow:0 12px 26px -8px rgba(13,148,136,0.5), 0 0 0 0 rgba(20,184,166,0.55); }
  50%     { transform:scale(1.02);  box-shadow:0 16px 32px -10px rgba(13,148,136,0.55), 0 0 0 18px rgba(20,184,166,0); }
}
.cta-glow { animation:feinPulseGlow 2.6s infinite cubic-bezier(0.4,0,0.6,1); }

/* ── Eyebrow / section heads ────────────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:9999px;
  background:var(--accent-soft); color:var(--accent-hi);
  font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
}
.pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-hi); }
.sec-head { text-align:center; max-width:720px; margin:0 auto; }
.sec-head h2 { font-size:clamp(32px,4vw,44px); font-weight:800; letter-spacing:-0.025em; margin:12px 0 0; line-height:1.1; }
.sec-head p { margin:14px auto 0; font-size:16px; line-height:1.6; color:var(--muted); max-width:580px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding:88px 0 56px; text-align:center; }
.hero h1 { font-size:clamp(48px,7vw,76px); line-height:1.05; margin:20px auto 0; max-width:900px; font-weight:800; letter-spacing:-0.03em; }
.hero .lede { margin:20px auto 0; max-width:640px; font-size:18px; line-height:1.6; color:var(--muted); }
.hero-cta { margin-top:32px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.hero .reassure { margin:14px auto 0; font-size:13px; color:var(--muted); }
.phones { display:flex; justify-content:center; align-items:flex-end; gap:24px; margin-top:64px; }
.phone { border-radius:36px; padding:6px; background:#111827; flex-shrink:0;
  box-shadow:0 18px 40px -12px rgba(0,0,0,0.25); width:224px; height:464px; }
.phone .screen { width:100%; height:100%; border-radius:30px; background:#fff; overflow:hidden; position:relative; color:#111827; }
.phone.primary { width:260px; height:540px; transform:translateY(-12px);
  box-shadow:0 30px 60px -20px rgba(13,148,136,0.45), 0 18px 40px -10px rgba(0,0,0,0.3); }
:root[data-theme="dark"] .phone { background:#0F172A; }
@keyframes feinFloat { 0%,100%{transform:translateY(-12px);} 50%{transform:translateY(-22px);} }
.hero-float { animation:feinFloat 5.5s var(--ease) infinite; }

/* Phone screen internals */
.mini { height:100%; font-size:12px; }
.mini-map { position:relative; height:100%; background:#EFF1EE; }
.mini-map svg.base { position:absolute; inset:0; }
.pin { position:absolute; transform:translate(-50%,-100%); }
.pin i { width:32px; height:32px; border-radius:50% 50% 50% 4px; transform:rotate(-45deg);
  border:2px solid #fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 10px -3px rgba(0,0,0,0.2); }
.pin i span { transform:rotate(45deg); color:#fff; font-weight:700; font-size:13px; font-style:normal; }
.mini-card { position:absolute; left:12px; right:12px; bottom:12px; background:#fff; border-radius:16px;
  padding:12px 14px; box-shadow:0 -10px 24px -10px rgba(0,0,0,0.18); border:1px solid #E5E7EB;
  display:flex; align-items:center; gap:10px; }
.avatar { width:36px; height:36px; border-radius:9999px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.badge-ok { padding:2px 7px; border-radius:9999px; background:#CCFBF1; color:#115E59; font-size:10px; font-weight:700; }
.mini-pad { padding:20px 14px; background:#F3F4F6; height:100%; }
.mini-title { font-size:18px; font-weight:800; color:#111827; letter-spacing:-0.01em; }
.mini-sub { font-size:11px; color:#6B7280; margin-top:2px; }
.alert-row { background:#fff; border-radius:12px; padding:10px 12px; border:1px solid #E5E7EB; display:flex; gap:10px; }
.alert-row .tile { width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.prof-card { background:#fff; border-radius:14px; padding:14px; border:1px solid #E5E7EB; display:flex; gap:10px; align-items:center; }
.prof-label { margin-top:16px; font-size:10px; color:#6B7280; font-weight:700; letter-spacing:0.08em; }
.prof-list { background:#fff; border-radius:12px; border:1px solid #E5E7EB; margin-top:6px; overflow:hidden; }
.prof-row { padding:10px 12px; display:flex; align-items:center; justify-content:space-between; font-size:12px; border-bottom:1px solid #E5E7EB; }
.prof-row:last-child { border-bottom:0; }
.sw { width:32px; height:18px; border-radius:9999px; background:#0D9488; position:relative; display:inline-block; }
.sw i { position:absolute; top:2px; left:16px; width:14px; height:14px; border-radius:50%; background:#fff; }
.sw.off { background:#D1D5DB; } .sw.off i { left:2px; }

/* ── Feature cards ──────────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:28px; position:relative; overflow:hidden; }
.card .glow { position:absolute; top:-40px; right:-40px; width:140px; height:140px; border-radius:50%; pointer-events:none; }
.card h3 { margin:20px 0 8px; font-size:20px; font-weight:700; letter-spacing:-0.01em; position:relative; }
.card p  { font-size:14.5px; line-height:1.55; color:var(--muted); position:relative; }
.card-top { display:flex; align-items:center; gap:12px; position:relative; }
.tile { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tag { padding:4px 10px; border-radius:9999px; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.feature-card { transition:transform 0.45s var(--spring), box-shadow 0.35s var(--ease); }
.feature-card:hover { transform:translateY(-6px); box-shadow:0 22px 40px -18px rgba(0,0,0,0.22); }
.lift { transition:transform 0.45s var(--spring), box-shadow 0.35s var(--ease); }
.lift:hover { transform:translateY(-5px); box-shadow:0 22px 40px -20px rgba(0,0,0,0.18); }

/* tints */
.t-teal   { --tb:var(--teal-50);  --tf:var(--teal);        --tg:rgba(20,184,166,0.35); }
.t-red    { --tb:#FEE2E2;         --tf:var(--error-600);   --tg:rgba(239,68,68,0.30); }
.t-purple { --tb:#EDE9FE;         --tf:#7C3AED;            --tg:rgba(124,58,237,0.30); }
.t-sky    { --tb:#E0F2FE;         --tf:#0284C7;            --tg:rgba(14,165,233,0.30); }
.t-amber  { --tb:#FFFBEB;         --tf:var(--warning-600); --tg:rgba(245,158,11,0.30); }
.t-slate  { --tb:#F3F4F6;         --tf:var(--slate);       --tg:rgba(15,23,42,0.18); }
:root[data-theme="dark"] .t-teal   { --tb:rgba(20,184,166,0.18); --tf:var(--teal-400); }
:root[data-theme="dark"] .t-red    { --tb:rgba(239,68,68,0.18);  --tf:#FCA5A5; }
:root[data-theme="dark"] .t-purple { --tb:rgba(124,58,237,0.20); --tf:#C4B5FD; }
:root[data-theme="dark"] .t-sky    { --tb:rgba(14,165,233,0.20); --tf:#7DD3FC; }
:root[data-theme="dark"] .t-amber  { --tb:rgba(245,158,11,0.20); --tf:#FCD34D; }
:root[data-theme="dark"] .t-slate  { --tb:rgba(148,163,184,0.18);--tf:#CBD5E1; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) {
  --dm:1; }
  :root:not([data-theme="light"]) .t-teal   { --tb:rgba(20,184,166,0.18); --tf:var(--teal-400); }
  :root:not([data-theme="light"]) .t-red    { --tb:rgba(239,68,68,0.18);  --tf:#FCA5A5; }
  :root:not([data-theme="light"]) .t-purple { --tb:rgba(124,58,237,0.20); --tf:#C4B5FD; }
  :root:not([data-theme="light"]) .t-sky    { --tb:rgba(14,165,233,0.20); --tf:#7DD3FC; }
  :root:not([data-theme="light"]) .t-amber  { --tb:rgba(245,158,11,0.20); --tf:#FCD34D; }
  :root:not([data-theme="light"]) .t-slate  { --tb:rgba(148,163,184,0.18);--tf:#CBD5E1; }
}
.tile   { background:var(--tb); color:var(--tf); box-shadow:0 0 0 4px var(--card-ring), 0 0 0 5px color-mix(in srgb, var(--tf) 25%, transparent); }
.tag    { background:var(--tb); color:var(--tf); }
.card .glow { background:radial-gradient(circle, var(--tg) 0%, transparent 70%); }

/* ── Use cases ──────────────────────────────────────────────────────────── */
.uc { text-align:center; padding:24px; border-radius:16px; background:var(--surface); border:1px solid var(--border); }
.uc .ring { width:56px; height:56px; border-radius:50%; background:var(--accent-soft); color:var(--accent-hi);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.uc .t { font-weight:700; font-size:16px; letter-spacing:-0.01em; }
.uc .s { font-size:13px; margin-top:6px; line-height:1.5; color:var(--muted); }

/* ── Security band ──────────────────────────────────────────────────────── */
.band { background:var(--slate-900); color:#fff; }
.band .sec-head h2 { color:#fff; }
.band .sec-head p  { color:#94A3B8; }
.band .eyebrow     { color:var(--teal-400); }
.pillar { padding:28px; border-radius:18px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); }
.pillar .n { color:var(--teal-400); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; font-weight:600; }
.pillar h3 { margin:8px 0 10px; font-size:20px; font-weight:700; letter-spacing:-0.01em; }
.pillar p  { color:#94A3B8; font-size:14.5px; line-height:1.55; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { margin-top:40px; display:flex; flex-direction:column; gap:10px; }
.qa { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.qa > button {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; background:transparent; border:0; cursor:pointer; color:inherit;
  font-size:16px; font-weight:600; text-align:left; font-family:inherit;
}
.qa > button svg { flex-shrink:0; transition:transform 200ms var(--ease); }
.qa > button[aria-expanded="true"] svg { transform:rotate(180deg); }
.qa .a { padding:0 22px 20px; color:var(--muted); font-size:14.5px; line-height:1.6; }
.qa .a[hidden] { display:none; }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-band {
  padding:clamp(32px,6vw,56px); border-radius:24px; text-align:center; color:#fff;
  background:linear-gradient(135deg,#2DD4BF 0%,#0D9488 100%);
  box-shadow:0 30px 60px -20px rgba(13,148,136,0.4);
}
.cta-band .pill { background:rgba(255,255,255,0.18); color:#fff; }
.cta-band h2 { font-size:clamp(28px,4vw,40px); margin:14px 0 0; font-weight:800; letter-spacing:-0.025em; }
.cta-band p  { margin:14px auto 0; max-width:480px; color:rgba(255,255,255,0.92); font-size:16px; line-height:1.55; }
.cta-band .btn { background:#fff; color:var(--teal); font-weight:700; margin-top:28px; }
.cta-band .btn:hover { filter:brightness(0.97); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ftr { background:var(--surface); border-top:1px solid var(--border); padding:64px 0 32px; }
.ftr-grid { display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:32px; }
.ftr p { margin:14px 0 0; max-width:280px; color:var(--muted); font-size:13.5px; line-height:1.55; }
.ftr h4 { margin:0; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.ftr ul { list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; }
.ftr ul a { text-decoration:none; font-size:14px; }
.ftr ul a:hover { color:var(--accent-hi); }
.ftr .muted-item { opacity:0.7; cursor:default; }
.ftr-base { margin-top:48px; padding-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:var(--faint); }

/* ── Sub-page pieces ────────────────────────────────────────────────────── */
.page-hero { padding:88px 0 48px; text-align:center; }
.page-hero h1 { font-size:clamp(40px,6vw,64px); line-height:1.05; margin:14px auto 0; max-width:880px; font-weight:800; letter-spacing:-0.025em; }
.page-hero p  { margin:18px auto 0; max-width:640px; font-size:17px; line-height:1.6; color:var(--muted); }

.frow { display:grid; grid-template-columns:180px 1fr; gap:32px; padding:32px; border-radius:20px;
  background:var(--surface); border:1px solid var(--border); }
.frow .side { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.frow .side .tile { width:56px; height:56px; border-radius:16px; }
.frow .num { font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-hi); }
.frow h3 { margin:0; font-size:28px; font-weight:700; letter-spacing:-0.02em; }
.frow p  { margin:10px 0 16px; font-size:15.5px; line-height:1.6; color:var(--muted); }
.chips { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li { padding:6px 12px; border-radius:9999px; font-size:12.5px; background:var(--accent-soft); color:var(--accent-hi); }

.tier { padding:32px; border-radius:20px; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); position:relative; }
.tier.pop { background:var(--accent-soft); border-color:var(--teal); box-shadow:0 20px 40px -16px rgba(13,148,136,0.35); }
.tier .flag { position:absolute; top:-12px; left:24px; padding:4px 10px; border-radius:9999px;
  background:var(--teal); color:#fff; font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.tier .name { font-size:14px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.tier.pop .name { color:var(--accent-hi); }
.tier .price { margin-top:14px; display:flex; align-items:baseline; gap:6px; }
.tier .price b { font-size:44px; font-weight:800; letter-spacing:-0.025em; }
.tier .price span { font-size:14px; color:var(--muted); }
.tier .blurb { margin:10px 0 22px; font-size:14.5px; line-height:1.55; color:var(--muted); }
.tier ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; flex:1; }
.tier li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; }
.tier li .ck { width:18px; height:18px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.tier.pop li .ck { background:var(--teal); color:#fff; }
.tier .btn { margin-top:26px; width:100%; }
.tier:not(.pop) .btn { background:var(--surface); color:inherit; box-shadow:inset 0 0 0 2px var(--border); }

.topic { padding:24px; border-radius:16px; background:var(--surface); border:1px solid var(--border); }
.topic .tile { width:48px; height:48px; border-radius:12px; box-shadow:none; }
.topic h3 { margin:14px 0 12px; font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.topic ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.topic li { font-size:13.5px; opacity:0.85; }

.stat { padding:20px 18px; border-radius:16px; background:var(--surface); border:1px solid var(--border); text-align:center; }
.stat b { display:block; font-size:36px; font-weight:800; letter-spacing:-0.025em; }
.stat.hi b { color:var(--accent-hi); }
.stat span { display:block; margin-top:4px; font-size:12.5px; font-weight:600; color:var(--muted); }
.prose { max-width:760px; margin:0 auto; padding:0 32px; font-size:16.5px; line-height:1.75; color:var(--body); }
.prose p + p { margin-top:1em; }
.value { padding:28px; border-radius:18px; background:var(--surface); border:1px solid var(--border); }
.value h3 { margin:0; font-size:20px; font-weight:700; letter-spacing:-0.01em; }
.value p  { margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--muted); }
.center { text-align:center; }

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
/* Resting state is VISIBLE. Only a page that has proven its JS is alive
   (html.has-js, set inline and withdrawn if fein.js never loads) opts into
   the hide-then-reveal transition — so a failed/blocked fein.js can never
   leave the page blank. */
.reveal { opacity:1; transform:none; }
.has-js .reveal { opacity:0; transform:translateY(24px);
  transition:opacity 0.7s var(--ease), transform 0.8s var(--spring); }
.has-js .reveal.in { opacity:1; transform:none; }

/* ── Mobile drawer ──────────────────────────────────────────────────────── */
.drawer { position:fixed; inset:0; z-index:100; display:none; }
.drawer[data-open="true"] { display:block; }
.drawer-bg { position:absolute; inset:0; background:rgba(15,23,42,0.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.drawer-panel { position:absolute; top:0; right:0; bottom:0; width:min(320px,86vw); padding:24px;
  display:flex; flex-direction:column; gap:4px; background:var(--drawer-bg); color:var(--text);
  box-shadow:-12px 0 30px -10px rgba(0,0,0,0.25); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.drawer a.nav-link { display:block; padding:14px 12px; border-radius:10px; font-size:16px; font-weight:600; text-decoration:none; }
.drawer a.nav-link[aria-current="page"] { color:var(--accent-hi); background:var(--accent-soft); }
.drawer .btn { margin-top:12px; height:48px; border-radius:12px; font-size:15px; font-weight:700; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:960px) {
  .container { padding:0 24px; }
  .g3,.g4 { grid-template-columns:repeat(2,1fr); }
  .ftr-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .nav { display:none; }
  .menu-btn { display:inline-flex; }
  .frow { grid-template-columns:1fr; gap:14px; padding:24px; }
  .hero { padding:64px 0 40px; }
  .section { padding:64px 0; }
  .page-hero { padding:64px 0 40px; }
  .phones { gap:12px; transform:scale(0.85); }
}
@media (max-width:560px) {
  .container { padding:0 18px; }
  .g2,.g3,.g4 { grid-template-columns:1fr; }
  .ftr-grid { grid-template-columns:1fr; gap:24px; }
  .hero { padding:48px 0 32px; }
  .section { padding:56px 0; }
  .phones { transform:scale(0.62); margin-top:24px; height:360px; align-items:center; }
  .hide-sm { display:none !important; }
  .hero-cta .btn { width:100%; }
  .prose { padding:0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-glow,.hero-float { animation:none !important; }
  .reveal { transition:none; opacity:1; transform:none; }
  * { scroll-behavior:auto !important; }
}