/* Lumen — demo website used for the Panescope screenshots and live previews. */
:root {
  --bg:#ffffff; --bg-2:#f6f7fb; --ink:#0f172a; --muted:#5b6478; --line:#e5e8f0; --brand:#4f46e5; --brand-2:#14b8a6; --brand-soft:#eef0ff;
  --card:#ffffff; --shadow:0 20px 50px -20px #1e1b4b33; --radius:16px;
  color-scheme: light dark;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b0f1a; --bg-2:#111727; --ink:#e8ecf6; --muted:#9aa4bb; --line:#222a3d; --brand:#818cf8; --brand-soft:#1c2142; --card:#121a2b; --shadow:0 20px 50px -20px #000a; }
}
@font-face { font-family:"Inter"; src:url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; }
img,svg { display:block;max-width:100%; }
a { color:inherit;text-decoration:none; }
h1,h2,h3 { line-height:1.12;letter-spacing:-.025em;margin:0; }
h2 { font-size:clamp(28px,4vw,42px);margin-bottom:28px; }
p { margin:0; }
.wrap { width:min(1160px,100% - 40px);margin-inline:auto; }
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
.skip { position:absolute;left:8px;top:8px;padding:8px 12px;background:var(--ink);color:var(--bg);border-radius:8px;z-index:100;transform:translateY(-200%);transition:transform .2s; }
.skip:focus { transform:none; }
.eyebrow { color:var(--brand);font-weight:650;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px; }
.announce { padding:10px 20px;background:linear-gradient(90deg,#4f46e5,#7c3aed);color:#fff;text-align:center;font-size:14px; }
.announce a { text-decoration:underline;text-underline-offset:3px;margin-left:6px; }

.btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:11px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap;font-family:inherit; }
.btn-lg { height:50px;padding:0 22px; }
.btn-primary { background:var(--brand);color:#fff;box-shadow:0 8px 20px -8px #4f46e5aa; }
.btn-primary:hover { transform:translateY(-1px);box-shadow:0 12px 26px -10px #4f46e5cc; }
.btn-ghost { border-color:var(--line);background:var(--card); }
.btn-ghost:hover { border-color:var(--brand); }

/* Header */
.header { position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line); }
.header-row { display:flex;align-items:center;gap:28px;height:68px; }
.logo { display:flex;align-items:center;gap:10px;font-weight:750;font-size:19px;letter-spacing:-.02em; }
.nav { display:flex;gap:4px;flex:1; }
.nav-link { display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:9px;color:var(--muted);font-weight:550;font-size:15px;background:none;border:0;cursor:pointer;font-family:inherit; }
.nav-link:hover,.has-menu:hover > .nav-link { color:var(--ink);background:var(--bg-2); }
.nav-item { position:relative; }
.menu { position:absolute;left:0;top:calc(100% + 8px);width:300px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s; }
.has-menu:hover .menu,.has-menu:focus-within .menu,.has-menu.open .menu { opacity:1;visibility:visible;transform:none; }
.menu a { display:block;padding:10px 12px;border-radius:10px; }
.menu a:hover { background:var(--bg-2); }
.menu b { display:block;font-size:15px; }
.menu span { color:var(--muted);font-size:13.5px; }
.header-actions { display:flex;align-items:center;gap:8px; }
.burger { display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--card);flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer; }
.burger span { width:18px;height:2px;border-radius:2px;background:var(--ink); }

/* Hero */
.hero { position:relative;overflow:hidden;padding:84px 0 96px; }
.hero-glow { position:absolute;inset:-30% -10% auto;height:640px;background:radial-gradient(500px 300px at 20% 40%,#818cf855,transparent 70%),radial-gradient(420px 280px at 80% 30%,#2dd4bf44,transparent 70%),radial-gradient(380px 260px at 55% 80%,#f472b633,transparent 70%);filter:blur(10px);pointer-events:none; }
.hero-grid { position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center; }
.pill { display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;font-weight:550;color:var(--muted);margin-bottom:22px; }
.pill .dot { width:8px;height:8px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 0 4px #14b8a633; }
.hero h1 { font-size:clamp(40px,6vw,68px);letter-spacing:-.04em; }
.lead { margin-top:20px;font-size:19px;color:var(--muted);max-width:540px; }
.hero-form { display:flex;gap:10px;margin-top:30px;max-width:520px; }
.hero-form input { flex:1;min-width:0;height:50px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit; }
.fine { margin-top:12px;font-size:14px;color:var(--muted); }
.dashboard { border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow),0 0 0 6px color-mix(in srgb,var(--card) 60%,transparent);overflow:hidden; }
.dash-top { display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--bg-2); }
.dash-top span { width:10px;height:10px;border-radius:50%;background:var(--line); }
.dash-top b { margin-left:10px;font-size:12.5px;font-weight:550;color:var(--muted); }
.dash-body { padding:18px;display:grid;gap:16px; }
.kpis { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.kpi { padding:12px 14px;border:1px solid var(--line);border-radius:12px; }
.kpi small { display:block;color:var(--muted);font-size:12.5px; }
.kpi strong { font-size:22px;letter-spacing:-.02em; }
.kpi em { display:block;font-style:normal;font-size:12.5px;font-weight:600; }
.up { color:#059669; } .down { color:#e11d48; }
.chart { height:150px;border:1px solid var(--line);border-radius:12px;padding:10px; }
.chart svg { width:100%;height:100%; }
.sources { display:grid;gap:8px;font-size:13.5px; }
.sources div { display:grid;grid-template-columns:120px 1fr 52px;gap:10px;align-items:center; }
.sources i { height:8px;border-radius:8px;background:linear-gradient(90deg,var(--brand),#a78bfa);width:var(--w); }
.sources b { text-align:right;font-weight:600; }

.logos { padding:24px 0 40px; }
.logo-row { display:flex;justify-content:space-between;flex-wrap:wrap;gap:22px 36px;color:var(--muted);opacity:.85; }
.logo-row span { font-size:22px; }
.l1 { font-weight:800;letter-spacing:-.04em; } .l2 { font-family:Georgia,serif;font-style:italic; } .l3 { font-weight:700;letter-spacing:.2em;font-size:17px !important; }
.l4 { font-weight:600; } .l5 { font-weight:300;letter-spacing:.02em; } .l6 { font-weight:800;font-style:italic; }

.features { padding:80px 0;background:var(--bg-2); }
.feature-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.feature { padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);transition:transform .2s,box-shadow .2s; }
.feature:hover { transform:translateY(-3px);box-shadow:var(--shadow); }
.feature h3 { font-size:19px;margin:18px 0 8px; }
.feature p { color:var(--muted);font-size:15.5px; }
.tag { display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12px;vertical-align:3px; }
.ficon { width:44px;height:44px;border-radius:12px;position:relative; }
.i1 { background:linear-gradient(135deg,#6366f1,#a78bfa); } .i2 { background:linear-gradient(135deg,#14b8a6,#5eead4); } .i3 { background:linear-gradient(135deg,#f59e0b,#fcd34d); }
.i4 { background:linear-gradient(135deg,#ec4899,#f9a8d4); } .i5 { background:linear-gradient(135deg,#0ea5e9,#7dd3fc); } .i6 { background:linear-gradient(135deg,#ef4444,#fca5a5); }
.ficon::after { content:"";position:absolute;inset:12px;border-radius:6px;border:2.5px solid #fff;opacity:.9; }

.split { padding:96px 0; }
.split-grid { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; }
.funnel { display:grid;gap:12px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow); }
.step { position:relative;display:flex;justify-content:space-between;padding:14px 16px;border-radius:12px;background:var(--bg-2);overflow:hidden;font-size:15px; }
.step::before { content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,#6366f133,#14b8a633); }
.step span,.step b { position:relative; }
.checks { list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px; }
.checks li { padding-left:28px;position:relative;color:var(--muted); }
.checks li::before { content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--brand-soft);box-shadow:inset 0 0 0 5px var(--brand); }

.quotes { padding:96px 0;background:var(--bg-2); }
.quote-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.quote { margin:0;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);display:flex;flex-direction:column;justify-content:space-between;gap:24px; }
.quote blockquote { margin:0;font-size:16.5px; }
.quote figcaption { display:flex;align-items:center;gap:12px; }
.quote small { display:block;color:var(--muted); }
.avatar { display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;font-weight:700;font-size:14px; }
.a1 { background:#6366f1; } .a2 { background:#14b8a6; } .a3 { background:#f59e0b; }

.pricing { padding:96px 0;text-align:center; }
.billing { display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:12px;margin-bottom:32px;background:var(--card); }
.billing button { height:38px;padding:0 16px;border:0;border-radius:9px;background:none;color:var(--muted);font:inherit;font-weight:600;cursor:pointer; }
.billing button.on { background:var(--brand);color:#fff; }
.save { font-size:12px;opacity:.85; }
.plans { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left; }
.plan { position:relative;padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--card); }
.plan.featured { border-color:var(--brand);box-shadow:var(--shadow); }
.badge { position:absolute;top:-12px;left:30px;padding:4px 10px;border-radius:999px;background:var(--brand);color:#fff;font-size:12.5px;font-weight:600; }
.price { margin:14px 0 6px; }
.price b { font-size:44px;letter-spacing:-.03em; }
.price span,.plan-desc { color:var(--muted); }
.plan-desc { margin-bottom:22px; }
.plan .btn { width:100%; }

.faq { padding:96px 0;background:var(--bg-2); }
.faq-grid { display:grid;grid-template-columns:.8fr 1.2fr;gap:48px; }
.faq-list { display:grid;gap:12px; }
details { border:1px solid var(--line);border-radius:14px;background:var(--card);padding:0 20px; }
summary { cursor:pointer;padding:18px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px; }
summary::after { content:"+";font-size:22px;line-height:1;color:var(--brand);transition:transform .2s; }
details[open] summary::after { transform:rotate(45deg); }
details p { padding-bottom:18px;color:var(--muted); }

.signup { padding:96px 0; }
.signup-card { display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;padding:48px;border-radius:28px;background:linear-gradient(135deg,#1e1b4b,#312e81 55%,#0f766e);color:#fff; }
.signup-card p { color:#c7d2fe;margin-top:12px; }
.signup-form { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.signup-form label { display:grid;gap:6px;font-size:14px;font-weight:550;color:#e0e7ff; }
.signup-form input,.signup-form select { height:46px;padding:0 14px;border:1px solid #ffffff33;border-radius:11px;background:#ffffff14;color:#fff;font:inherit; }
.signup-form select option { color:#0f172a; }
.signup-form .wide { grid-column:1/-1; }
.signup-form .check { display:flex;align-items:center;gap:10px;font-weight:500; }
.signup-form .check input { width:18px;height:18px; }

.footer { padding:56px 0;border-top:1px solid var(--line); }
.footer-grid { display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px; }
.footer h4 { margin:0 0 12px;font-size:14px; }
.footer-grid > div > a:not(.logo) { display:block;color:var(--muted);padding:3px 0;font-size:15px; }
.muted-note { margin-top:14px;font-size:13px;color:#c3c7d1; }
.social { display:flex;gap:8px; }
.social a { display:grid;place-items:center;width:22px;height:22px;color:var(--muted); }

@media (max-width: 960px) {
  .hero-grid,.split-grid,.faq-grid,.signup-card { grid-template-columns:1fr; }
  .feature-grid,.quote-grid,.plans { grid-template-columns:1fr 1fr; }
  .nav,.signin { display:none; }
  .burger { display:flex; }
  .header-row { justify-content:space-between; }
}
@media (max-width: 640px) {
  .hero { padding:48px 0 64px; }
  .feature-grid,.quote-grid,.plans,.signup-form,.footer-grid { grid-template-columns:1fr; }
  .hero-form { flex-direction:column; }
  .kpis { grid-template-columns:1fr 1fr; }
  .kpi:last-child { display:none; }
  .header-actions .btn { display:none; }
  .signup-card { padding:28px; }
  .sources div { grid-template-columns:96px 1fr 44px; }
}
body.menu-open .nav { display:flex;position:fixed;inset:68px 0 auto;flex-direction:column;padding:16px 20px 24px;background:var(--bg);border-bottom:1px solid var(--line);z-index:40; }
body.menu-open .nav .menu { position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;width:auto;margin-top:4px; }
.staging .btn-primary { background:#0d9488;box-shadow:0 8px 20px -8px #0d9488aa; }
.staging .pill .dot { background:#f59e0b;box-shadow:0 0 0 4px #f59e0b33; }
/* Layers: the glow behind the hero, the hero above it, badges above their cards. */
.hero-glow { z-index:0; }
.hero-grid { z-index:1; }
.dashboard { position:relative;z-index:2; }
.plan .badge { z-index:1; }
.announce { position:relative;z-index:60; }