/* ============================================================
   Ovarli — Marketing Landing CSS
   Theme tokens aligned with the app
   ============================================================ */

:root {
  --bg:#fff; --bg2:#f7f7f5; --bg3:#efefec; --bg4:#e8e8e4;
  --text:#111110; --text2:#6f6e69; --text3:#a8a7a0;
  --border:rgba(0,0,0,.07); --border2:rgba(0,0,0,.14);
  --blue:#2563eb; --blue-s:#1d4ed8; --blue-bg:#eff6ff;
  --green:#16a34a; --green-bg:#f0fdf4;
  --red:#dc2626; --red-bg:#fef2f2;
  --amber:#d97706; --amber-bg:#fffbeb;
  --purple:#7c3aed; --purple-bg:#f5f3ff;
  --gray:#71717a; --orange:#ea580c;
  --r:14px; --rs:9px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 12px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:0 24px 48px -12px rgba(17,17,16,.18),0 8px 16px -8px rgba(17,17,16,.10);
  --font:'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-num:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ── Type scale (#175, mirror of client/src/index.css) ── */
  --text-2xs:10px; --text-xs:11px; --text-sm:12px; --text-base:13px;
  --text-md:14px; --text-lg:16px; --text-xl:20px; --text-2xl:24px;
  --text-3xl:28px; --text-4xl:36px;
  --text-display:44px; /* landing-only: pricing card amount, hero stats */
  /* ── Icon scale (#175) ── */
  --icon-xs:14px; --icon-sm:16px; --icon-md:20px;
  --icon-lg:22px; --icon-xl:24px; --icon-2xl:32px;
}

[data-theme="dark"] {
  --bg:#1e1e1c; --bg2:#272725; --bg3:#2f2f2d; --bg4:#3a3a37;
  --text:#f0efe8; --text2:#9e9d97; --text3:#5e5e58;
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.15);
  --blue:#60a5fa; --blue-s:#3b82f6; --blue-bg:rgba(96,165,250,.13);
  --green:#4ade80; --green-bg:rgba(74,222,128,.10);
  --red:#f87171; --red-bg:rgba(248,113,113,.10);
  --amber:#fbbf24; --amber-bg:rgba(251,191,36,.10);
  --purple:#a78bfa; --purple-bg:rgba(167,139,250,.10);
  --shadow-sm:0 1px 3px rgba(0,0,0,.25);
  --shadow:0 4px 14px rgba(0,0,0,.30);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.55),0 8px 16px -8px rgba(0,0,0,.30);
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  font-size:var(--text-md);
  overflow-x:hidden;
  transition: background .18s, color .18s;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
@media (max-width:700px) { .container { padding:0 18px; } }

.lt-only { display:block; }
.dk-only { display:none; }
[data-theme="dark"] .lt-only { display:none; }
[data-theme="dark"] .dk-only { display:block; }

/* EARLY ACCESS BANNER
   Inspired by Linear/Vercel/Stripe status banners.
   Uses the brand gradient (blue → purple → orange) for visual identity
   and an amber dot as semantic "non-prod / staging" indicator. */
.status-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 11px 24px;
	font-size:var(--text-base);
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--text2);
	background:
		linear-gradient(135deg,
			color-mix(in srgb, var(--blue-bg)   75%, var(--bg)) 0%,
			color-mix(in srgb, var(--purple-bg) 70%, var(--bg)) 50%,
			color-mix(in srgb, var(--amber-bg)  60%, var(--bg)) 100%
		);
}
/* Subtle gradient bottom hairline (brand colors, fades on edges) */
.status-banner::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		color-mix(in srgb, var(--blue)   55%, transparent) 25%,
		color-mix(in srgb, var(--purple) 60%, transparent) 50%,
		color-mix(in srgb, var(--orange) 50%, transparent) 75%,
		transparent 100%
	);
	pointer-events: none;
}
/* Faint top inner-glow for depth */
.status-banner::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--text) 6%, transparent) 50%,
		transparent
	);
	pointer-events: none;
}
.status-banner strong { font-weight: 600; }

.status-dot {
	position: relative;
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
	box-shadow:
		0 0 0 0   color-mix(in srgb, var(--amber) 55%, transparent),
		0 0 8px 0 color-mix(in srgb, var(--amber) 35%, transparent);
	animation: status-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes status-pulse {
	0% {
		box-shadow:
			0 0 0 0   color-mix(in srgb, var(--amber) 55%, transparent),
			0 0 8px 0 color-mix(in srgb, var(--amber) 35%, transparent);
	}
	70% {
		box-shadow:
			0 0 0 8px color-mix(in srgb, var(--amber)  0%, transparent),
			0 0 8px 0 color-mix(in srgb, var(--amber) 35%, transparent);
	}
	100% {
		box-shadow:
			0 0 0 0   color-mix(in srgb, var(--amber)  0%, transparent),
			0 0 8px 0 color-mix(in srgb, var(--amber) 35%, transparent);
	}
}
@media (prefers-reduced-motion: reduce) {
	.status-dot {
		animation: none;
		box-shadow:
			0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent),
			0 0 8px 0 color-mix(in srgb, var(--amber) 35%, transparent);
	}
}

/* HEADER */
.hdr {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:24px;
  padding:14px 32px;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:.5px solid var(--border);
}
[data-theme="dark"] .hdr { background:rgba(30,30,28,.78); }
.hdr-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.hdr-wordmark { height:24px; width:auto; flex-shrink:0; }

.hdr-nav { display:flex; gap:28px; margin-left:24px; flex:1; }
.hdr-nav a { font-size:var(--text-md); color:var(--text2); font-weight:500; transition:color .15s; }
.hdr-nav a:hover { color:var(--text); }

.hdr-tools { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.lang-pick { position:relative; }
.lang-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  padding:7px 10px; border-radius:8px; font-size:var(--text-base); font-weight:500;
}
.lang-btn:hover { background:var(--bg3); }
.lang-flag { font-size:var(--text-md); }
.lang-menu {
  position:absolute; top:calc(100% + 6px); right:0;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  list-style:none; margin:0; padding:6px; min-width:160px;
  box-shadow:var(--shadow-lg); display:none; z-index:200;
}
.lang-menu.open { display:block; }
.lang-menu li {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:6px; font-size:var(--text-base); cursor:pointer;
}
.lang-menu li:hover { background:var(--bg2); }

.theme-tg {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
}
.theme-tg:hover { background:var(--bg3); }
.theme-tg .ic-sun { display:block; }
.theme-tg .ic-moon { display:none; }
[data-theme="dark"] .theme-tg .ic-sun { display:none; }
[data-theme="dark"] .theme-tg .ic-moon { display:block; }

.hdr-cta {
  display:inline-flex; align-items:center;
  padding:9px 16px; background:var(--text); color:var(--bg);
  border-radius:8px; font-size:var(--text-base); font-weight:600;
  transition:opacity .15s,transform .05s;
}
.hdr-cta:hover { opacity:.9; }

.hdr-burger {
  display:none; flex-direction:column; gap:4px;
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg2);
  align-items:center; justify-content:center;
}
.hdr-burger span { display:block; width:16px; height:1.5px; background:var(--text); border-radius:1px; }

.m-drawer {
  display:none; position:fixed; top:64px; left:0; right:0;
  background:var(--bg); border-bottom:1px solid var(--border);
  z-index:99; flex-direction:column; padding:16px 24px; gap:4px;
}
.m-drawer.open { display:flex; }
.m-drawer a {
  padding:12px 0; font-size:var(--text-md); color:var(--text);
  font-weight:500; border-bottom:.5px solid var(--border);
}
.m-drawer a:last-child { border-bottom:none; }
.m-drawer .m-cta {
  margin-top:8px; background:var(--text); color:var(--bg);
  text-align:center; border-radius:9px; padding:12px; border-bottom:none;
}

@media (max-width:900px) {
  .hdr-nav { display:none; }
  .hdr-cta { display:none; }
  .hdr-burger { display:inline-flex; }
  .hdr-tools { margin-left:auto; }
}
@media (max-width:480px) {
  .hdr { padding:12px 18px; gap:12px; }
  .lang-code { display:none; }
}

/* HERO */
.hero { position:relative; padding:80px 0 100px; overflow:hidden; }
@media (max-width:900px) { .hero { padding:50px 0 60px; } }

.hero-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-blob {
  position:absolute; width:600px; height:600px;
  border-radius:50%; filter:blur(100px); opacity:.35;
}
.hb1 { background:radial-gradient(circle,var(--blue),transparent 65%); top:-200px; left:-150px; }
.hb2 { background:radial-gradient(circle,var(--purple),transparent 65%); top:100px; right:-200px; }
[data-theme="dark"] .hero-blob { opacity:.25; }
.hero-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 30%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 30%,#000 30%,transparent 80%);
  opacity:.55;
}

.hero-grid-2 {
  position:relative; display:grid;
  grid-template-columns:1.05fr 1fr; gap:60px; align-items:center;
}
@media (max-width:1000px) { .hero-grid-2 { grid-template-columns:1fr; gap:50px; } }

.hero-text { max-width:560px; }

.badge-ch {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 8px; background:var(--bg2);
  border:1px solid var(--border); border-radius:100px;
  font-size:var(--text-sm); font-weight:500; color:var(--text2); margin-bottom:24px;
}
.badge-flag { font-size:var(--text-md); }

.hero-h1 {
  font-family:var(--font-num);
  font-size:clamp(34px,5.5vw,60px); line-height:1.05;
  letter-spacing:-1.8px; font-weight:800; margin:0 0 22px;
}
.hero-h1 span { display:inline-block; }

.grad-text {
  background:linear-gradient(135deg,var(--blue),var(--purple) 60%,var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-sub {
  font-size:var(--text-lg); color:var(--text2);
  margin:0 0 32px; max-width:540px; line-height:1.55;
}

.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px; }

.btn-primary,.btn-secondary,.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:10px; font-size:var(--text-md); font-weight:600;
  border:1px solid transparent; transition:all .15s; cursor:pointer;
}
.btn-lg { padding:15px 26px; font-size:var(--text-md); }
.btn-full { width:100%; }
.btn-primary { background:var(--text); color:var(--bg); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-secondary { background:var(--bg2); color:var(--text); border-color:var(--border); }
.btn-secondary:hover { background:var(--bg3); border-color:var(--border2); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border2); }
.btn-ghost:hover { background:var(--bg2); }

.hero-trust { display:flex; gap:24px; flex-wrap:wrap; font-size:var(--text-base); color:var(--text2); }
.trust-item { display:inline-flex; align-items:center; gap:6px; }
.trust-item svg { color:var(--green); }

/* Hero artwork */
.hero-art { position:relative; perspective:2000px; }
.hero-screen-wrap {
  position:relative; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  transform:rotateY(-3deg) rotateX(2deg); transform-origin:center;
  transition:transform .3s;
}
.hero-art:hover .hero-screen-wrap { transform:rotateY(-1deg) rotateX(1deg); }
.hero-screen { width:100%; height:auto; }

.float-card {
  position:absolute; display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:var(--bg);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); font-size:var(--text-sm); z-index:2;
  animation:float 6s ease-in-out infinite;
}
.fc-dot { width:8px; height:8px; border-radius:50%; }
.fc-label { color:var(--text2); font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.fc-value { color:var(--text); font-size:var(--text-md); font-weight:700; }
.fc1 { top:18%; left:-6%; animation-delay:0s; }
.fc2 { top:55%; left:-12%; animation-delay:1.5s; }
.fc3 { bottom:12%; right:-8%; animation-delay:3s; }

@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

@media (max-width:1000px) {
  .hero-screen-wrap { transform:none; }
  .float-card { display:none; }
}

/* BAND */
.band {
  padding:30px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.band-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
}
.band-lbl {
  font-size:var(--text-sm); color:var(--text3);
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
.band-icons { display:flex; gap:30px; flex-wrap:wrap; }
.band-icons span {
  font-size:var(--text-md); font-weight:700; color:var(--text2);
  font-family:var(--font-num); letter-spacing:-.3px;
  opacity:.65; transition:opacity .15s;
}
.band-icons span:hover { opacity:1; }
@media (max-width:700px) {
  .band-row { flex-direction:column; align-items:flex-start; gap:16px; }
  .band-icons { gap:18px; }
}

/* SECTION HEAD */
.section-head { text-align:center; max-width:720px; margin:0 auto 60px; }
.eyebrow {
  display:inline-block; font-size:var(--text-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--blue); margin-bottom:12px;
}
.section-head h2 {
  font-family:var(--font-num);
  font-size:clamp(28px,4vw,44px); line-height:1.1;
  letter-spacing:-1.2px; font-weight:800; margin:0 0 16px;
}
.section-sub { font-size:var(--text-lg); color:var(--text2); margin:0; line-height:1.55; }

/* FEATURES */
.features { padding:100px 0; }
@media (max-width:700px) { .features { padding:60px 0; } }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px) { .feat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .feat-grid { grid-template-columns:1fr; gap:16px; } }

.feat {
  padding:28px; background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--r);
  transition:all .2s;
}
.feat:hover {
  background:var(--bg); border-color:var(--border2);
  box-shadow:var(--shadow); transform:translateY(-2px);
}
.feat-ic {
  width:44px; height:44px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--c) 12%,transparent);
  color:var(--c); margin-bottom:18px;
}
.feat h3 {
  font-size:var(--text-lg); font-weight:700; letter-spacing:-.3px;
  margin:0 0 8px; color:var(--text);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.feat p { font-size:var(--text-md); color:var(--text2); line-height:1.55; margin:0; }

.feat-hl {
  background:linear-gradient(135deg,var(--blue-bg),var(--purple-bg));
  border-color:color-mix(in srgb,var(--purple) 25%,transparent);
}
[data-theme="dark"] .feat-hl {
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--blue) 12%,transparent),
    color-mix(in srgb,var(--purple) 12%,transparent));
}
.feat-ic-hl {
  background:linear-gradient(135deg,var(--blue),var(--purple)) !important;
  color:#fff !important;
}
.pill-pro {
  display:inline-flex; padding:2px 7px;
  background:var(--purple); color:#fff;
  border-radius:4px; font-size:var(--text-2xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}

/* SHOWCASE */
.showcase {
  padding:100px 0; background:var(--bg2);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
@media (max-width:700px) { .showcase { padding:60px 0; } }

.show-tabs {
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; margin-bottom:36px;
}
.show-tab {
  padding:10px 18px; background:var(--bg);
  border:1px solid var(--border); border-radius:100px;
  font-size:var(--text-base); font-weight:500; color:var(--text2); transition:all .15s;
}
.show-tab:hover { color:var(--text); border-color:var(--border2); }
.show-tab.active {
  background:var(--text); color:var(--bg);
  border-color:var(--text); font-weight:600;
}

.show-frame {
  position:relative; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  background:var(--bg);
}
.show-pane { display:none; position:relative; animation:fadein .3s; }
.show-pane.active { display:block; }
.show-img { width:100%; height:auto; }
@keyframes fadein { from {opacity:0;transform:scale(.99);} to {opacity:1;transform:scale(1);} }

/* HIGHLIGHTS */
.highlights { padding:100px 0; }
@media (max-width:700px) { .highlights { padding:60px 0; } }
.hl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:800px) { .hl-grid { grid-template-columns:1fr; } }
.hl-num {
  font-family:var(--font-num); font-size:var(--text-base); font-weight:700;
  color:var(--text3); letter-spacing:.12em; margin-bottom:16px;
}
.hl h3 { font-size:var(--text-2xl); font-weight:700; letter-spacing:-.5px; margin:0 0 12px; }
.hl p { font-size:var(--text-md); color:var(--text2); line-height:1.6; margin:0; }

/* PRICING */
.pricing {
  padding:100px 0; background:var(--bg2);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
@media (max-width:700px) { .pricing { padding:60px 0; } }

.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
@media (max-width:900px) { .plans { grid-template-columns:1fr; } }

.plan {
  position:relative; padding:34px 28px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); display:flex; flex-direction:column;
}
.plan-popular {
  border-color:var(--purple); border-width:1.5px;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--purple) 8%,transparent);
}
.plan-flag {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff; padding:5px 14px; border-radius:100px;
  font-size:var(--text-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
.plan h3 { font-size:var(--text-2xl); font-weight:800; letter-spacing:-.5px; margin:0 0 6px; }
.plan-tag { font-size:var(--text-md); color:var(--text2); margin:0 0 24px; }
.plan-price {
  display:flex; align-items:baseline; gap:4px;
  margin:0 0 24px; font-family:var(--font-num);
}
.plan-amt { font-size:var(--text-display); font-weight:800; letter-spacing:-1.2px; line-height:1; }
.plan-cur { font-size:var(--text-lg); font-weight:700; color:var(--text2); }
.plan-per { font-size:var(--text-md); color:var(--text2); margin-left:4px; }
.plan-feats { list-style:none; padding:0; margin:0 0 28px; flex:1; }
.plan-feats li {
  display:flex; align-items:center; gap:10px;
  padding:8px 0; font-size:13.5px;
  border-bottom:.5px solid var(--border);
}
.plan-feats li:last-child { border-bottom:none; }
.plan-feats li::before {
  content:''; width:16px; height:16px;
  border-radius:50%; flex-shrink:0;
  background-repeat:no-repeat; background-position:center;
}
.plan-feats li.ok::before {
  background-color:var(--green-bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
[data-theme="dark"] .plan-feats li.ok::before {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.plan-feats li.ko { color:var(--text3); }
.plan-feats li.ko::before {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a8a7a0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}

.pricing-note { text-align:center; font-size:var(--text-base); color:var(--text3); margin:36px 0 0; }

/* FAQ */
.faq { padding:100px 0; }
@media (max-width:700px) { .faq { padding:60px 0; } }
.faq-wrap { max-width:780px; }
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-list details {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; transition:all .15s;
}
.faq-list details[open] {
  background:var(--bg); border-color:var(--border2); box-shadow:var(--shadow);
}
.faq-list summary {
  padding:18px 22px; font-size:var(--text-md); font-weight:600; color:var(--text);
  cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  list-style:none;
}
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after {
  content:'+'; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--text-lg); color:var(--text2); font-weight:400;
  flex-shrink:0; transition:transform .2s;
}
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-list p {
  padding:0 22px 20px; margin:0;
  font-size:14.5px; color:var(--text2); line-height:1.6;
}

/* FINAL CTA */
.final-cta {
  padding:100px 0; text-align:center;
  background:radial-gradient(ellipse at center,var(--blue-bg),transparent 70%),
             linear-gradient(180deg,var(--bg2),var(--bg));
  border-top:1px solid var(--border);
}
@media (max-width:700px) { .final-cta { padding:60px 0; } }
.final-wrap { max-width:600px; margin:0 auto; }
.final-cta h2 {
  font-family:var(--font-num);
  font-size:clamp(28px,4vw,44px); line-height:1.1;
  letter-spacing:-1.2px; font-weight:800; margin:0 0 14px;
}
.final-cta p { font-size:var(--text-lg); color:var(--text2); margin:0 0 28px; }
.final-cta .hero-ctas { justify-content:center; margin-bottom:0; }

/* FOOTER */
.ftr { background:var(--bg); border-top:1px solid var(--border); padding:60px 0 0; }
.ftr-wrap { display:grid; grid-template-columns:1.4fr 2fr; gap:60px; padding-bottom:40px; }
@media (max-width:800px) { .ftr-wrap { grid-template-columns:1fr; gap:36px; } }
.ftr-tag { margin:16px 0 0; font-size:var(--text-base); color:var(--text2); max-width:320px; }

.ftr-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:600px) { .ftr-cols { grid-template-columns:repeat(2,1fr); gap:24px; } }
.ftr-cols h4 {
  font-size:var(--text-sm); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text3); margin:0 0 14px;
}
.ftr-cols a {
  display:block; padding:6px 0;
  font-size:13.5px; color:var(--text2); transition:color .15s;
}
.ftr-cols a:hover { color:var(--text); }

.ftr-base {
  border-top:1px solid var(--border);
  padding:24px 24px; text-align:center;
  font-size:12.5px; color:var(--text3);
}

/* A11y */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

::selection { background:color-mix(in srgb,var(--blue) 30%,transparent); color:var(--text); }