/* ============================================================
   Social Studio — premium light SaaS design system
   ============================================================ */
:root {
  /* Cool, chosen neutrals (moved off the warm-cream "AI look"): a faint slate
     bias reads as designed and lets the terracotta brand accent feel deliberate
     rather than the generic cream+terracotta template. */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --surface-3: #e5e9ee;          /* subtle hover / inset surfaces */
  --overlay: #ffffff;            /* popovers, menus, modals */
  --input-bg: #ffffff;
  --border: #e2e6eb;
  --border-2: #edf0f3;           /* softer hairline */
  --border-hover: #cfd5dd;       /* neutral hover border on cards */
  --glass: rgba(255,255,255,.72);/* frosted topbar / sticky nav */
  --text: #15181d;
  --text-2: #454b55;             /* nav links, secondary body */
  --text-3: #98a0ab;             /* section labels, muted icons */
  --muted: #616873;
  --primary: #b8560f;
  --primary-600: #94420a;
  --primary-50: #fbeee0;
  --accent: #c96a1f;
  --cyan: #dd8a2e;
  --success: #16a34a;
  --success-50: #ecfdf3;
  --success-100: #d4efde;
  --warning: #d97706;
  --warning-50: #fffbeb;
  --warning-100: #fdecc8;
  --danger: #dc2626;
  --danger-50: #fef2f2;
  --danger-100: #f6d3d3;
  --info: #0ea5e9;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 18px;
  /* type */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'Inter', Georgia, 'Times New Roman', serif;
  /* motion */
  --ease-out: cubic-bezier(.2,.6,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --t-fast: .12s; --t: .16s; --t-slow: .24s;
  /* reusable gradients (replace 12+ hardcoded copies) */
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent));
  --gradient-brand: linear-gradient(135deg, #b8560f, #c96a1f 55%, #dd8a2e);
  --gradient-tint: linear-gradient(135deg, rgba(180,83,14,.13), rgba(180,83,14,.12) 55%, rgba(217,138,43,.12));
  /* premium layered shadows — softer + multi-stop for real depth */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow: 0 2px 4px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.07);
  --shadow-lg: 0 4px 8px rgba(16,24,40,.04), 0 18px 48px rgba(16,24,40,.12);
  --shadow-pop: 0 8px 16px rgba(16,24,40,.06), 0 28px 64px rgba(16,24,40,.16);
  --shadow-primary: 0 6px 16px rgba(180,83,14,.28);
  /* focus rings (a11y) */
  --ring: 0 0 0 3px var(--primary-50);
  --ring-strong: 0 0 0 3px rgba(180,83,14,.35);
  --sidebar-w: 256px;
  color-scheme: light;
}

/* ============================================================
   Dark theme — html[data-theme="dark"] (pre-paint script in
   base.html sets it from localStorage, falls back to system pref).
   Only tokens flip here; every component inherits automatically.
   Accent text/icons lighten for AA on dark; button *fills* stay
   vivid so white label text keeps contrast.
   ============================================================ */
html[data-theme="dark"] {
  --bg: #0f1215;
  --surface: #171b20;
  --surface-2: #1e232a;
  --surface-3: #262c34;
  --overlay: #1c2128;
  --input-bg: #1c2128;
  --border: #2c333c;
  --border-2: #222830;
  --border-hover: #3a434e;
  --glass: rgba(15,18,25,.72);
  --text: #eef1f4;
  --text-2: #b3bcc7;
  --text-3: #838d99;
  --muted: #909aa6;
  --primary: #e6944a;
  --primary-600: #f0a862;
  --primary-50: rgba(230,148,74,.16);
  --accent: #e6a860;
  --success: #34d27b; --success-50: rgba(52,210,123,.13); --success-100: rgba(52,210,123,.22);
  --warning: #f0a93b; --warning-50: rgba(240,169,59,.13); --warning-100: rgba(240,169,59,.22);
  --danger: #f26d6d;  --danger-50: rgba(242,109,109,.13);  --danger-100: rgba(242,109,109,.24);
  --info: #48b9ee;
  --gradient-primary: linear-gradient(135deg, #c9691f, #e6944a);
  --gradient-tint: linear-gradient(135deg, rgba(230,148,74,.18), rgba(180,83,14,.16) 55%, rgba(217,138,43,.12));
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.40);
  --shadow: 0 2px 4px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.46);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.36), 0 18px 48px rgba(0,0,0,.56);
  --shadow-pop: 0 8px 16px rgba(0,0,0,.42), 0 28px 64px rgba(0,0,0,.62);
  --shadow-primary: 0 6px 18px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(230,148,74,.30);
  --ring-strong: 0 0 0 3px rgba(230,148,74,.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-600); }
h1,h2,h3,h4,h5 { font-weight: 700; letter-spacing: -0.02em; color: var(--text); }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 11px; padding: 22px 20px 14px;
  font-weight: 800; font-size: 1.18rem; letter-spacing: -0.03em;
}
.sidebar .brand .logo {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gradient-brand); color: #fff; font-size: 1.05rem;
  box-shadow: var(--shadow-primary);
}
.nav-links { padding: 6px 14px 12px; flex: 1; overflow-y: auto; }
.nav-links a {
  position: relative;
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  color: var(--text-2); font-weight: 500; font-size: .92rem; margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.nav-links a i { font-size: 1.05rem; width: 20px; text-align: center; color: var(--text-3); transition: color .15s; }
.nav-links a:hover { background: var(--surface-3); color: var(--text); }
.nav-links a:hover i { color: var(--text-2); }
.nav-links a.active { background: var(--primary-50); color: var(--primary-600); font-weight: 600; }
.nav-links a.active i { color: var(--primary); }
/* accent bar on the active item */
.nav-links a.active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--gradient-primary);
}
/* section labels (moved out of base.html inline style) */
.nav-sec {
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin: 18px 0 6px 12px;
}

/* viewing-as segmented control (owner only) */
.view-as { padding: 2px 16px 18px; }
.va-lbl { font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: var(--text-3); margin: 0 0 9px 2px; }
.va-seg { display: flex; gap: 5px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px; padding: 5px; }
.va {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 8px; border-radius: 9px; font-weight: 600; font-size: .85rem; color: var(--muted);
  transition: background .15s, color .15s, box-shadow .15s;
}
.va i { font-size: 1rem; }
.va:hover { color: var(--text-2); }
.va.on { background: var(--surface); color: var(--primary-600); box-shadow: var(--shadow-sm); }
.va.on i { color: var(--primary); }

.sidebar .side-foot { padding: 12px; border-top: 1px solid var(--border); }
.user-chip { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.side-foot .uwrap {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  padding: 7px 8px; border-radius: 10px; transition: background .15s;
}
.side-foot .uwrap:hover { background: var(--surface-3); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; color: #fff;
  background: var(--gradient-brand); display: grid; place-items: center; font-weight: 700;
  box-shadow: var(--shadow-primary);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 28px; border-bottom: 1px solid var(--border); background: var(--glass);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  position: sticky; top: 0; z-index: 20;
}
.topbar .page-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.topbar-action { display: flex; align-items: center; gap: 10px; }
.content { padding: 30px 32px 48px; max-width: 1280px; width: 100%; margin: 0 auto; }
/* Reclaim wasted gutters on large monitors — content breathes wider, text stays readable */
@media (min-width: 1700px) { .content { max-width: 1480px; } }
@media (min-width: 2200px) { .content { max-width: 1640px; } }
/* full-bleed pages (dense grids/tables) can opt out of the reading cap */
.content.content-wide { max-width: none; }

/* ---------- Public (marketing) nav ---------- */
.pubnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: 1120px; margin: 0 auto;
}
.pubnav .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.2rem; }
.pubnav .brand .logo { width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background: var(--gradient-primary); color:#fff; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 22px; }
.card-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
/* clickable / interactive cards lift on hover */
.card-hover { transition: transform .16s, box-shadow .16s, border-color .16s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-hover); }

/* ---------- Reusable icon tile (premium duotone) ---------- */
.icon-tile {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.2rem; background: var(--gradient-tint); border: 1px solid rgba(180,83,14,.2);
  box-shadow: 0 6px 14px rgba(180,83,14,.12), inset 0 1px 0 rgba(255,255,255,.65);
}
.icon-tile i {
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.icon-tile-sm { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; }
.icon-tile-lg { width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem; }
/* solid variant (filled gradient + white glyph) */
.icon-tile.solid { background: var(--gradient-primary); border-color: transparent; box-shadow: var(--shadow-primary); }
.icon-tile.solid i { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }

/* ---------- Stat cards ---------- */
.stat { padding: 20px 22px; }
.stat .num { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.stat .lbl { color: var(--muted); font-size: .85rem; }
.stat .ico { width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background: var(--gradient-tint); border:1px solid rgba(180,83,14,.18); color: var(--primary);
  font-size:1.1rem; margin-bottom:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: .92rem; letter-spacing: -.01em;
  padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
  text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-strong); }
.btn-primary { background: var(--gradient-primary); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { color:#fff; box-shadow: var(--shadow-primary); }
.btn-light { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-light:hover { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); transform: none; }
.btn-danger { background: var(--surface); border-color: var(--danger-100); color: var(--danger); }
.btn-danger:hover { background: var(--danger-50); }
.btn-success { background: var(--success); color:#fff; box-shadow: var(--shadow-sm); }
.btn-success:hover { color:#fff; box-shadow: var(--shadow); }
.btn-linkedin { background:#0a66c2; color:#fff; box-shadow: var(--shadow-sm); }
.btn-linkedin:hover { color:#fff; box-shadow: var(--shadow); }
.btn-lg { padding: 12px 22px; font-size: 1rem; border-radius: 12px; }
.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Forms ---------- */
label, .form-label { font-weight: 600; font-size: .88rem; margin-bottom: 6px; display: block; }
input:not([type=checkbox]):not([type=radio]):not([type=submit]),
textarea, select {
  width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--input-bg); font: inherit; color: var(--text); transition: border .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
a:focus-visible, .nav-links a:focus-visible, .va:focus-visible, summary:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 8px;
}
/* Native file inputs: give the "Choose File" button the same look as a light button */
input[type=file] { padding: 7px 10px; cursor: pointer; color: var(--muted); font-size: .9rem; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; cursor: pointer; margin-right: 12px;
  padding: 7px 14px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
  transition: border .15s, background .15s;
}
input[type=file]::file-selector-button:hover { border-color: var(--primary); color: var(--primary-600); background: var(--primary-50); }
/* Native date/time pickers: keep the calendar indicator on-brand */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.form-text, .help { color: var(--muted); font-size: .82rem; margin-top: 5px; }
.field { margin-bottom: 18px; }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex; align-items:center; gap:5px; padding: 3px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; text-transform: capitalize;
}
.pill-draft { background:var(--surface-3); color:var(--text-2); }
.pill-scheduled { background: var(--primary-50); color: var(--primary-600); }
.pill-approved { background: var(--warning-50); color: var(--warning); }
.pill-pending_approval { background: var(--warning-50); color: var(--warning); }
.pill-posted { background: var(--success-50); color: var(--success); }
.pill-failed { background: var(--danger-50); color: var(--danger); }
.pill-archived { background: var(--surface-3); color: var(--muted); }
.pill-ai { background: linear-gradient(135deg,var(--primary-50),#f3e8ff); color: var(--primary-600); }

/* ---------- Alerts (messages) ---------- */
.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-size:.92rem;
  border:1px solid var(--border); background:var(--surface); box-shadow: var(--shadow-sm); }
.flash-success { border-left: 4px solid var(--success); }
.flash-error, .flash-danger { border-left: 4px solid var(--danger); }
.flash-warning { border-left: 4px solid var(--warning); }
.flash-info { border-left: 4px solid var(--info); }

/* ---------- Empty states ---------- */
.empty { text-align:center; padding: 48px 24px; color: var(--muted); }
.empty .big { font-size: 2.4rem; margin-bottom: 8px; }

/* ---------- Lists / tables ---------- */
.list-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: none; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { text-align:left; padding: 10px 12px; border-bottom:1px solid var(--border); font-size:.9rem; }
.table th { color: var(--muted); font-weight:600; }
.muted { color: var(--muted); }

/* ---------- Onboarding steps ---------- */
.steps { display:grid; gap:12px; }
.step { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface); }
.step.done { background: var(--success-50); border-color: var(--success-100); }
.step .n { width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--primary-50); color:var(--primary-600); font-weight:700; font-size:.85rem; }
.step.done .n { background:var(--success); color:#fff; }

/* ---------- Landing ---------- */
.hero { text-align:center; padding: 72px 20px 40px; max-width: 800px; margin: 0 auto; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height:1.08; margin-bottom: 18px; }
/* Flat brand color, not a gradient-clipped word (the most dated AI-landing tell). */
.hero .grad { color: var(--primary); }
.hero p { font-size: 1.15rem; color: var(--muted); margin-bottom: 28px; }
.eyebrow { display:inline-block; padding:5px 12px; border-radius:999px; background:var(--primary-50);
  color:var(--primary-600); font-weight:600; font-size:.8rem; margin-bottom:18px; }
.feature { padding: 24px; height:100%; transition: transform .16s, box-shadow .16s, border-color .16s; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color:var(--border-hover); }
.feature .fico { width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;
  background: var(--gradient-tint); border:1px solid rgba(180,83,14,.18); color:var(--primary); margin-bottom:14px;
  box-shadow: 0 6px 14px rgba(180,83,14,.12), inset 0 1px 0 rgba(255,255,255,.6); }
.feature:hover .fico i { transform: scale(1.04); }
.section { max-width: 1080px; margin: 0 auto; padding: 24px; }

/* ---------- Public nav (sticky) ---------- */
.pubnav { position: sticky; top: 0; z-index: 40; background: var(--glass);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); max-width: none; }
.pubnav > .brand, .pubnav > .pubnav-links, .pubnav > .flex { }
.pubnav { padding-left: max(32px, calc((100% - 1120px)/2)); padding-right: max(32px, calc((100% - 1120px)/2)); }
.pubnav-links { display: flex; gap: 26px; }
.pubnav-links a { color: var(--text-2); font-weight: 600; font-size: .92rem; }
.pubnav-links a:hover { color: var(--primary); }
@media (max-width: 820px) { .pubnav-links { display: none; } }

/* ---------- Auth split-screen (login / signup) ---------- */
.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - 69px); }
.auth-aside { position: relative; overflow: hidden; color: #fff; padding: 56px 52px;
  background: linear-gradient(150deg, #b8560f 0%, #c96a1f 55%, #dd8a2e 140%); display: flex; flex-direction: column; }
.auth-aside::before { content:""; position:absolute; width:460px; height:460px; right:-140px; top:-120px;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 65%); border-radius:50%; }
.auth-aside::after { content:""; position:absolute; width:360px; height:360px; left:-120px; bottom:-130px;
  background: radial-gradient(circle, rgba(217,138,43,.4), transparent 65%); border-radius:50%; }
.auth-aside .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; color:#fff; position:relative; z-index:1; }
.auth-aside .brand .logo { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); }
.auth-aside h2 { color:#fff; font-size: 2rem; line-height:1.12; margin: 26px 0 14px; position:relative; z-index:1; max-width: 460px; }

/* auth panel visual (frosted product preview + channel chips) */
.auth-art { position:relative; z-index:1; margin: 30px 0 auto; }
.aa-card { background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:16px;
  padding:18px; backdrop-filter: blur(8px); box-shadow: 0 18px 44px rgba(0,0,0,.20); max-width:360px }
.aa-pill { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700;
  background: rgba(255,255,255,.2); padding:5px 11px; border-radius:999px; margin-bottom:13px }
.aa-line { height:9px; border-radius:6px; background: rgba(255,255,255,.34); margin:9px 0 }
.aa-line.lg { height:13px; width:86%; background: rgba(255,255,255,.6) }
.aa-line.short { width:54% }
.aa-foot { display:flex; gap:16px; margin-top:14px; font-size:.74rem; color: rgba(255,255,255,.88) }
.aa-chips { display:flex; gap:11px; margin-top:18px }
.aa-chip { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:1.25rem; color:#fff;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); backdrop-filter: blur(6px);
  animation: drift 7s ease-in-out infinite }
.aa-chips .aa-chip:nth-child(2){animation-delay:.6s} .aa-chips .aa-chip:nth-child(3){animation-delay:1.2s}
.aa-chips .aa-chip:nth-child(4){animation-delay:1.8s} .aa-chips .aa-chip:nth-child(5){animation-delay:2.4s}
.auth-aside .pts { position:relative; z-index:1; display:grid; gap:14px; margin-bottom: 8px; }
.auth-aside .pts div { display:flex; gap:11px; align-items:flex-start; font-size:.98rem; color: rgba(255,255,255,.92); }
.auth-aside .pts i { margin-top:2px; }
.auth-main { display:flex; align-items:center; justify-content:center; padding: 40px 24px; background: var(--bg); }
.auth-card { width:100%; max-width: 400px; }
.auth-card h3 { font-size: 1.5rem; margin: 0 0 4px; }
.auth-card.text-c .field { text-align: left; }
.auth-ico { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin:0 auto 16px;
  font-size:1.6rem; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.auth-ico-ok { color:#12855b; background: color-mix(in srgb, #12855b 12%, transparent); border-color: color-mix(in srgb, #12855b 24%, transparent); }
.auth-ico-warn { color:#b45309; background: color-mix(in srgb, #b45309 12%, transparent); border-color: color-mix(in srgb, #b45309 24%, transparent); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-aside { display:none; } }

/* ---------- Spinner ---------- */
.spin { width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;
  border-radius:50%; display:inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Utilities ---------- */
.row-gap > * { margin-bottom: 16px; }
.flex { display:flex; } .between { justify-content:space-between; } .center { align-items:center; }
.gap { gap: 10px; } .gap-lg { gap: 18px; } .wrap { flex-wrap: wrap; }
.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.mt { margin-top:16px; } .mb { margin-bottom:16px; } .mb-lg { margin-bottom:28px; }
.text-c { text-align:center; margin-top:30px; }
.no-margin, .m-0 { margin: 0 !important; }
.content-narrow { max-width: 880px; margin-left: auto; margin-right: auto; }

/* ---------- Mobile ---------- */
.menu-btn { display:none; background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text); }
@media (max-width: 860px) {
  .sidebar { position: fixed; left: -100%; z-index: 50; transition: left .25s; box-shadow: var(--shadow-lg); }
  .sidebar.open { left: 0; }
  .menu-btn { display:block; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .content { padding: 18px; }
}
@media (max-width: 520px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Marketing pages (landing + features/pricing/use-cases/about…)
   ============================================================ */
.lp{overflow:hidden}
.grad{color:var(--primary)}
.lp-hero{position:relative;max-width:1180px;margin:0 auto;padding:56px 24px 28px}
.lp-hero::before{content:"";position:absolute;inset:-40% 0 auto 0;height:560px;z-index:-1;
  background:radial-gradient(45% 55% at 25% 5%,rgba(180,83,14,.15),transparent 70%),
             radial-gradient(40% 50% at 92% 8%,rgba(217,138,43,.12),transparent 70%)}
/* asymmetric two-column hero */
.lp-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.lp-hero-copy{text-align:left}
.lp-hero h1{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.06;margin:16px 0 16px}
.lp-hero .sub{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--muted);margin:0 0 22px;max-width:560px}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.lp-trust{margin-top:14px;font-size:.88rem;color:var(--muted)}.lp-trust b{color:var(--text)}
.lp-try{margin:0}
.lp-try-row{display:flex;gap:8px;flex-wrap:wrap}
.lp-try-input{flex:1;min-width:220px;padding:13px 15px;border:1px solid var(--border);border-radius:12px;
  font:inherit;background:var(--surface);color:var(--text)}
.lp-try-input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.lp-hero-visual{position:relative}
@media(max-width:900px){
  .lp-hero{text-align:center;padding-top:40px}
  .lp-hero-grid{grid-template-columns:1fr;gap:32px}
  .lp-hero-copy{text-align:center}
  .lp-hero .sub{margin-left:auto;margin-right:auto}
  .lp-cta{justify-content:center}
  .lp-hero-visual{order:2}
}

/* page hero for sub-pages */
.lp-phero{position:relative;text-align:center;padding:56px 24px 8px;max-width:780px;margin:0 auto}
.lp-phero .kicker{color:var(--primary-600);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.lp-phero h1{font-size:clamp(1.9rem,4.4vw,2.9rem);margin:10px 0 14px}
.lp-phero p{color:var(--muted);font-size:1.12rem}

/* hero product mock */
.lp-mock{max-width:880px;margin:44px auto 0;border-radius:18px;border:1px solid var(--border);
  background:var(--surface);box-shadow:0 30px 80px rgba(16,24,40,.18);overflow:hidden}
.lp-hero-visual .lp-mock{margin:0;max-width:none;box-shadow:0 24px 70px rgba(16,24,40,.16)}
@media(max-width:900px){.lp-hero-visual .lp-mock{max-width:560px;margin:0 auto}}
/* brandmark (SVG logo glyph inside the gradient tile) */
.logo .brandmark{width:66%;height:66%;display:block}
.lp-mock .bar{display:flex;gap:7px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.lp-mock .bar span{width:11px;height:11px;border-radius:50%;background:var(--border)}
.lp-mock .bar .url{margin-left:12px;font-size:.78rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px 12px}
.lp-mockbody{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;padding:20px;text-align:left}
.lp-postcard{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface)}
.lp-postcard p{margin:6px 0;font-size:.92rem}
.lp-postcard .by{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:.82rem;color:var(--muted)}
.lp-graphic{border-radius:14px;padding:22px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(150deg,#1a1206,#5c2e0a);min-height:200px}
.lp-graphic .eb{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#e8c9a0;font-weight:700}
.lp-graphic h4{color:#fff;font-size:1.35rem;line-height:1.1;margin:10px 0}
.lp-graphic h4 span{background:linear-gradient(120deg,#e6a860,#f0c088);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-graphic .gh{font-size:.78rem;color:#e8c9a0;font-weight:700}

/* sections */
.lp-sec{max-width:1120px;margin:0 auto;padding:64px 24px}
.lp-band{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lp-head{text-align:center;max-width:680px;margin:0 auto 40px}
.lp-head .kicker{color:var(--primary-600);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.lp-head h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin:8px 0 12px}
.lp-head p{color:var(--muted);font-size:1.05rem}

.lp-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-feat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;transition:.18s}
.lp-feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.lp-feat .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:1.6rem;color:#fff;
  background:var(--gradient-primary);margin-bottom:15px;box-shadow:0 8px 20px rgba(180,83,14,.32)}
.lp-feat h4{font-size:1.1rem;margin:0 0 6px}.lp-feat p{color:var(--muted);font-size:.93rem;margin:0}

.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-step{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;position:relative}
.lp-step .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--primary-50);color:var(--primary-600);margin-bottom:14px}
.lp-step h4{margin:0 0 6px;font-size:1.12rem}.lp-step p{color:var(--muted);font-size:.93rem;margin:0}

.lp-spot{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:40px 0;border-top:1px solid var(--border)}
.lp-spot:nth-child(even) .lp-spot-media{order:-1}
.lp-spot .tag{color:var(--primary-600);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.lp-spot h3{font-size:1.6rem;margin:8px 0 12px}.lp-spot p{color:var(--muted);font-size:1rem}
.lp-spot ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}
.lp-spot li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}.lp-spot li i{color:var(--success);margin-top:3px}
.lp-spot-media{border-radius:16px;min-height:240px;border:1px solid var(--border);
  background:var(--gradient-tint);display:grid;place-items:center;color:var(--primary);font-size:3.4rem}

/* use-case cards */
.uc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.uc-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px}
.uc-card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.35rem;color:#fff;
  background:var(--gradient-primary);margin-bottom:14px}
.uc-card h3{font-size:1.2rem;margin:0 0 6px}.uc-card p{color:var(--muted);margin:0 0 12px;font-size:.95rem}
.uc-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.uc-card li{display:flex;gap:9px;font-size:.92rem}.uc-card li i{color:var(--success);margin-top:2px}

/* pricing */
.lp-prices{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:20px;justify-content:center}
.price{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px}
.price.pop{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50);position:relative}
.price.pop .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gradient-primary);color:#fff;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:999px}
.price h4{font-size:1.15rem;margin:0}.price .amt{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;margin:10px 0 2px}
.price .amt small{font-size:.95rem;font-weight:500;color:var(--muted)}
.price ul{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px}
.price li{display:flex;gap:10px;font-size:.93rem}.price li i{color:var(--success)}

/* faq */
.lp-faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.lp-faq details{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px 18px}
.lp-faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";font-size:1.3rem;color:var(--muted)}
.lp-faq details[open] summary::after{content:"\2013"}
.lp-faq p{color:var(--muted);margin:0 0 16px;font-size:.95rem}

/* prose (about / legal) */
.lp-prose{max-width:760px;margin:0 auto;padding:8px 24px 24px}
.lp-prose h2{font-size:1.3rem;margin:28px 0 10px}.lp-prose h3{font-size:1.05rem;margin:20px 0 8px}
.lp-prose p,.lp-prose li{color:var(--text-2);font-size:.98rem;line-height:1.7}
.lp-prose ul{margin:8px 0 8px 18px}.lp-prose .muted{color:var(--muted)}

/* final cta */
.lp-final{max-width:1000px;margin:40px auto;border-radius:22px;padding:54px 28px;text-align:center;color:#fff;
  background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e 150%);position:relative;overflow:hidden}
.lp-final h2{color:#fff;font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 10px}
.lp-final p{color:rgba(255,255,255,.9);max-width:540px;margin:0 auto 24px;font-size:1.08rem}
.btn-white{background:#fff;color:var(--primary-600)}.btn-white:hover{color:var(--primary-600);filter:brightness(.97)}

/* footer */
.lp-foot{border-top:1px solid var(--border);background:var(--surface)}
.lp-foot-in{max-width:1120px;margin:0 auto;padding:48px 24px 28px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.lp-foot .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem}
.lp-foot .brand .logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--gradient-primary)}
.lp-foot p{color:var(--muted);font-size:.9rem;margin:12px 0 0;max-width:280px}
.lp-foot h6{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}
.lp-foot a{display:block;color:var(--text-2);font-size:.92rem;margin-bottom:9px}.lp-foot a:hover{color:var(--primary)}
.lp-copy{border-top:1px solid var(--border);text-align:center;padding:18px;color:var(--muted);font-size:.85rem}

@media(max-width:860px){
  .lp-mockbody{grid-template-columns:1fr}
  .lp-feats,.lp-steps{grid-template-columns:1fr}
  .lp-spot{grid-template-columns:1fr;gap:20px}.lp-spot:nth-child(even) .lp-spot-media{order:0}
  .lp-prices,.uc-grid{grid-template-columns:1fr}
  .lp-foot-in{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Mega-menu nav · hero animation · scroll reveals · suite/footer
   ============================================================ */
/* mega-menu */
.pubnav-links{display:flex;gap:6px;align-items:center}
.nav-item{position:relative}
.nav-item>a,.nav-item>span{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:9px;
  color:var(--text-2);font-weight:600;font-size:.92rem;cursor:pointer;white-space:nowrap}
.nav-item>a:hover,.nav-item:hover>span{color:var(--primary);background:var(--primary-50)}
.nav-item .caret{font-size:.7rem;transition:transform .15s}
.nav-item:hover .caret{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 8px);left:0;background:var(--overlay);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:14px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.16s;z-index:60}
.nav-item:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}  /* hover bridge */
.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:4px}
.mega-grid.one{grid-template-columns:minmax(220px,1fr)}
.mega-link{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:11px;color:var(--text)}
.mega-link:hover{background:var(--surface-2);color:var(--text)}
.mega-link i{font-size:1.05rem;width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;
  color:#b8560f;background:linear-gradient(160deg,#fdf4ea,#f7e2cb);border:1px solid #f0d7bb;box-shadow:0 4px 14px rgba(180,83,14,.10)}
:root[data-theme="dark"] .mega-link i{color:#f0a862;background:linear-gradient(160deg,#241a10,#3a2814);border-color:#4a3418;box-shadow:none}
.mega-link b{font-size:.9rem;display:block;line-height:1.2}
.mega-link small{color:var(--muted);font-size:.8rem;line-height:1.3}
@media(max-width:980px){.pubnav-links{display:none}}

/* hero: animated brand aura + circular frosted channel chips ("one core → every channel") */
.lp-orbit{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lp-aura{position:absolute;left:50%;top:-180px;width:720px;height:720px;transform:translateX(-50%);
  background:conic-gradient(from 0deg,rgba(180,83,14,.18),rgba(180,83,14,.16),rgba(217,138,43,.14),rgba(180,83,14,.18));
  filter:blur(64px);border-radius:50%;animation:aura 22s linear infinite}
@keyframes aura{to{transform:translateX(-50%) rotate(360deg)}}
.orbit-ico{position:absolute;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;
  background:rgba(255,255,255,.72);backdrop-filter:blur(7px);border:1px solid rgba(180,83,14,.18);
  box-shadow:0 8px 22px rgba(180,83,14,.14);animation:drift 7s ease-in-out infinite}
.orbit-ico.lg{width:58px;height:58px;font-size:1.55rem}
.orbit-ico.sm{width:40px;height:40px;font-size:1.05rem}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-16px)}}
.ic-li{color:#0a66c2}.ic-x{color:#0f1419}.ic-ig{color:#e1306c}.ic-fb{color:#1877f2}.ic-yt{color:#ff0000}
.ic-tt{color:#0f1419}.ic-pin{color:#e60023}.ic-th{color:#0f1419}.ic-bs{color:#1185fe}.ic-rd{color:#ff4500}
@media(max-width:900px){.lp-orbit{display:none}}

/* Turelis signature: autonomous content pipeline (unique hero motif) */
.lp-pipe{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:32px auto 0;max-width:780px}
.lp-pipe .step{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--surface);
  border:1px solid var(--border);font-weight:600;font-size:.9rem;box-shadow:var(--shadow-sm);
  animation:pipe 5s ease-in-out infinite}
.lp-pipe .step i{color:var(--primary)}
.lp-pipe .pipe-arrow{color:#e2cfae;font-size:1rem;margin:0 2px}
.lp-pipe .pipe-you{margin-left:10px;font-size:.82rem;font-weight:700;color:var(--primary-600);
  background:var(--primary-50);border-radius:999px;padding:7px 14px}
@keyframes pipe{0%,100%{box-shadow:var(--shadow-sm);border-color:var(--border);transform:translateY(0)}
  8%,17%{box-shadow:0 8px 22px rgba(180,83,14,.22);border-color:var(--primary);transform:translateY(-3px)}}
@media(max-width:560px){.lp-pipe .pipe-arrow{transform:rotate(90deg)}.lp-pipe{flex-direction:column}.lp-pipe .pipe-you{margin:6px 0 0}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.orbit-ico{animation:none}}

/* product suite grid */
.suite-cat{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:28px 0 12px}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prod-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;color:inherit;transition:.16s}
.prod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-hover);color:inherit}
.prod-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;color:#fff;
  background:var(--gradient-primary);margin-bottom:12px}
.prod-card h4{margin:0 0 5px;font-size:1.04rem;display:flex;align-items:center;gap:8px}
.prod-card p{margin:0;color:var(--muted);font-size:.9rem}

/* channels grid */
.chan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.chan{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:.9rem;font-weight:600}
.chan i{font-size:1.25rem}
.chan .tag{margin-left:auto;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px}
.chan .live{background:var(--success-50);color:var(--success)}
.chan .soon{background:var(--surface-3);color:var(--muted)}

/* rich footer columns */
.foot-rich{display:grid;grid-template-columns:1.6fr repeat(6,1fr);gap:26px}
@media(max-width:960px){.prod-grid{grid-template-columns:1fr 1fr}.foot-rich{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.prod-grid{grid-template-columns:1fr}.foot-rich{grid-template-columns:1fr 1fr}}

/* Google auth button + email divider */
.btn-google{background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:600}
.btn-google:hover{background:var(--surface-2);color:var(--text)}
.btn-google i{color:#ea4335}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem;margin:4px 0 14px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border)}

/* Premium duotone icon chips (override flat purple squares) */
.lp-feat .ic, .prod-card .ic, .uc-card .ic{
  background:linear-gradient(135deg,rgba(180,83,14,.13),rgba(180,83,14,.12) 55%,rgba(217,138,43,.12));
  border:1px solid rgba(180,83,14,.20);
  box-shadow:0 8px 18px rgba(180,83,14,.14), inset 0 1px 0 rgba(255,255,255,.65);
}
.lp-feat .ic i, .prod-card .ic i, .uc-card .ic i{
  background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lp-feat:hover .ic, .prod-card:hover .ic{transform:translateY(-1px)}

/* Contact page */
.ct-card{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:16px 18px;margin-bottom:12px}
.ct-card .ic{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:1.2rem;
  background:linear-gradient(135deg,rgba(180,83,14,.13),rgba(217,138,43,.12));border:1px solid rgba(180,83,14,.2)}
.ct-card .ic i{background:linear-gradient(135deg,#b8560f,#c96a1f,#dd8a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.ct-card b{display:block;font-size:.95rem}
.ct-card .muted{font-size:.88rem}
@media(max-width:760px){.ct-cols{grid-template-columns:1fr!important}}

/* ============================================================
   Theme toggle (topbar + marketing nav) + marketing display face
   ============================================================ */
.theme-toggle{display:inline-grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
  border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t),box-shadow var(--t)}
.theme-toggle:hover{background:var(--surface-3);color:var(--text)}
.theme-toggle:focus-visible{outline:none;box-shadow:var(--ring)}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* Refined editorial display face for marketing headlines only (UI stays Inter) */
.lp-hero h1, .lp-phero h1, .lp-head h2, .lp-final h2, .hero h1{
  font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;letter-spacing:-.02em;
}

/* ============================================================
   Spotlight product frames — real UI in place of a lone icon.
   Each spotlight shows the actual feature (a draft, a slide, the
   autopilot queue, a video, the CLI) so the page reads as a real
   product, not a template.
   ============================================================ */
.lp-spot-media{min-height:0;border:0;background:none;display:block;padding:0;font-size:initial;color:inherit}
.ss{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;
  box-shadow:0 22px 55px rgba(16,24,40,.13);position:relative}
.ss-top{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--border);
  background:var(--surface-2)}
.ss-top .d{width:9px;height:9px;border-radius:50%;background:var(--border);flex:0 0 auto}
.ss-tt{margin-left:8px;font-size:.78rem;font-weight:600;color:var(--muted)}
.ss-tag{margin-left:auto;font-size:.66rem;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px}
.ss-tag.ok{background:var(--success-50);color:var(--success)}
.ss-tag.sch{background:var(--primary-50);color:var(--primary-600)}
.ss-body{padding:16px}
.ss-h{font-weight:700;font-size:.98rem;margin:0 0 6px;line-height:1.3}
.ss-p{color:var(--muted);font-size:.86rem;margin:0;line-height:1.5}
.ss-p b{color:var(--text)}
.ss-p sup{color:var(--primary-600);font-weight:700;font-size:.62rem;margin-left:1px}
.ss-srcs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}
.ss-srcs span{font-size:.7rem;font-weight:600;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:6px;padding:3px 8px}
/* voice-match meter + integrity checks */
.ss-meter{display:flex;align-items:center;gap:10px;margin:16px 0 12px;font-size:.78rem;color:var(--muted);font-weight:600}
.ss-bar{flex:1;height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.ss-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#dd8a2e)}
.ss-meter b{color:var(--text)}
.ss-chks{display:flex;flex-wrap:wrap;gap:6px}
.ss-chk{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:600;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px 10px}
.ss-chk i{color:var(--success)}
/* design studio: slide + themes + chat */
.ss-slide{border-radius:12px;padding:20px;color:#fff;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(150deg,#1a1206,#5c2e0a)}
.ss-slide .eb{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#e8c9a0;font-weight:700}
.ss-slide h4{color:#fff;font-size:1.2rem;line-height:1.12;margin:8px 0}
.ss-slide h4 span{background:linear-gradient(120deg,#e6a860,#f0c088);-webkit-background-clip:text;background-clip:text;color:transparent}
.ss-dots{display:flex;gap:5px}.ss-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.ss-dots i.on{background:#fff;width:16px;border-radius:3px}
.ss-themes{display:flex;align-items:center;gap:6px;margin:12px 0 10px}
.ss-themes span{width:22px;height:22px;border-radius:6px;border:1px solid var(--border)}
.ss-themes span:nth-child(1){background:linear-gradient(135deg,#1a1206,#5c2e0a)}
.ss-themes span:nth-child(2){background:linear-gradient(135deg,#b8560f,#dd8a2e)}
.ss-themes span:nth-child(3){background:linear-gradient(135deg,#f97316,#ec4899)}
.ss-themes span:nth-child(4){background:linear-gradient(135deg,#0ea5e9,#14b8a6)}
.ss-themes span:nth-child(5){background:#f4f4f5}
.ss-themes span:nth-child(6){background:linear-gradient(135deg,#111827,#374151)}
.ss-themes small{margin-left:auto;font-size:.72rem;color:var(--muted)}
.ss-chat{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
.ss-chat i{color:var(--primary)}
/* autopilot queue */
.ss-queue{display:grid;gap:8px}
.ss-row{display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-radius:11px;padding:10px 12px;background:var(--surface)}
.ss-row>i{font-size:1.15rem;flex:0 0 auto}
.ss-rt{min-width:0}.ss-rt b{display:block;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-rt small{color:var(--muted);font-size:.74rem}
.ss-row .ss-tag{margin-left:auto}
.ss-btn{margin-left:auto;font-size:.72rem;font-weight:700;color:#fff;background:var(--gradient-primary);
  border-radius:8px;padding:6px 12px;flex:0 0 auto}
/* video */
.ss-video{position:relative;border-radius:12px;min-height:130px;
  background:linear-gradient(135deg,#2a1a08,#160f06 70%),radial-gradient(60% 80% at 30% 20%,rgba(180,83,14,.5),transparent);
  display:grid;place-items:center}
.ss-play{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
  color:#5c2e0a;font-size:1.3rem;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ss-dur{position:absolute;right:10px;bottom:9px;font-size:.7rem;font-weight:700;color:#fff;background:rgba(0,0,0,.55);border-radius:6px;padding:2px 7px}
.ss-scenes{display:flex;gap:5px;margin:10px 0}
.ss-scenes i{flex:1;height:26px;border-radius:5px;background:var(--surface-3);border:1px solid var(--border)}
.ss-scenes i.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-50)}
/* API terminal */
.ss-term .ss-top.dark{background:#0d1224;border-bottom-color:#1f2740}
.ss-term .ss-top.dark .d{background:#39415f}
.ss-term .ss-top.dark .ss-tt{color:#8b93b5}
.ss-code{background:#0b0f1e;color:#cdd6f4;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.8rem;line-height:1.75;padding:16px 16px;white-space:pre-wrap;word-break:break-word}
.ss-code .c-cmt{color:#6b7394;display:block}
.ss-code .c-l{display:block}.ss-code .c-p{color:#e6944a}.ss-code .c-a{color:#f9a03f}
.ss-code .c-o{color:#8ee6a9;display:block}
@media(max-width:860px){.ss-slide h4{font-size:1.05rem}}

/* ============================================================
   Product suite grid + vision/mission (platform positioning)
   ============================================================ */
.suite{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.suite-card{position:relative;display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:22px;color:inherit;transition:.18s;overflow:hidden}
.suite-card::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--gradient-primary);opacity:0;transition:.18s}
.suite-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover);color:inherit}
.suite-card:hover::after{opacity:1}
.suite-card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(180,83,14,.13),rgba(180,83,14,.12) 55%,rgba(217,138,43,.12));
  border:1px solid rgba(180,83,14,.20);box-shadow:0 8px 18px rgba(180,83,14,.14),inset 0 1px 0 rgba(255,255,255,.6)}
.suite-card .ic i{background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.suite-tag{position:absolute;top:20px;right:20px;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.suite-card h4{font-size:1.12rem;margin:0 0 7px}
.suite-card p{color:var(--muted);font-size:.92rem;margin:0;line-height:1.5}
.suite-glue{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.glue-item{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:14px;padding:16px 18px;font-size:.95rem;color:var(--text-2)}
.glue-item b{color:var(--text)}
.glue-item i{font-size:1.3rem;flex:0 0 auto;
  background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:860px){.suite{grid-template-columns:1fr}.suite-glue{grid-template-columns:1fr}}

/* vision & mission */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:920px;margin:0 auto}
.vm-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px}
.vm-label{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--primary-600);margin-bottom:12px}
.vm-card p{font-size:1.12rem;line-height:1.5;color:var(--text);margin:0;font-family:var(--font-display);font-weight:500}
.vm-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:960px;margin:26px auto 0}
.vp{text-align:left}
.vp i{font-size:1.5rem;display:block;margin-bottom:10px;
  background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.vp b{display:block;font-size:.98rem;margin-bottom:4px}
.vp span{color:var(--muted);font-size:.88rem;line-height:1.45}
@media(max-width:860px){.vm{grid-template-columns:1fr}.vm-principles{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.vm-principles{grid-template-columns:1fr}}

/* ============================================================
   Editorial icon treatment — drop the pastel "AI chip" (tinted
   rounded square + gradient glyph) for a clean solid brand icon.
   This is the single biggest "AI-generated" tell on card grids.
   ============================================================ */
/* Unified icon tile site-wide: soft amber tint + amber glyph, consistent with
   the .pico duotone product icons. One treatment everywhere (no flat-orange
   chips, no bare glyphs) so the icon language reads as one system. */
.lp-feat .ic, .prod-card .ic, .uc-card .ic{
  width:54px;height:54px;padding:0;margin:0 0 15px;display:grid;place-items:center;border-radius:15px;
  font-size:1.5rem;line-height:1;color:#b8560f;
  background:linear-gradient(160deg,#fdf4ea,#f7e2cb) !important;border:1px solid #f0d7bb !important;
  box-shadow:0 4px 14px rgba(180,83,14,.10) !important;
}
.lp-feat .ic i, .prod-card .ic i, .uc-card .ic i{
  background:none !important;-webkit-text-fill-color:#b8560f;color:#b8560f;font-size:1.5rem;
}
.vp i, .glue-item i{ background:none !important; -webkit-text-fill-color:var(--primary); color:var(--primary); }
:root[data-theme="dark"] .lp-feat .ic, :root[data-theme="dark"] .prod-card .ic, :root[data-theme="dark"] .uc-card .ic{
  background:linear-gradient(160deg,#241a10,#3a2814) !important;border-color:#4a3418 !important;box-shadow:none !important}
:root[data-theme="dark"] .lp-feat .ic i, :root[data-theme="dark"] .prod-card .ic i, :root[data-theme="dark"] .uc-card .ic i{
  color:#f0a862;-webkit-text-fill-color:#f0a862}
.lp-feat:hover .ic, .prod-card:hover .ic{ transform:translateY(-1px); }
.suite-card .suite-tag{ top:22px; }

/* ── Homepage 2026 refresh: real-screenshot slots, honest proof, vs-stack,
      condensed engine, founder note ─────────────────────────────────────── */

/* Real screenshot: drops in over the illustrative mock when the PNG exists. */
.lp-shot{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--border);
  box-shadow:0 24px 70px rgba(16,24,40,.16)}
.lp-hero-visual .lp-shot{border-radius:18px}

/* Honest trust strip under the hero (facts, not fabricated social proof). */
/* Frosted rather than solid: it floats directly over the hero aurora, so the
   ambient light reads through it instead of being punched out by a flat panel. */
.lp-proofstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  max-width:960px;margin:30px auto 0;padding:16px 20px;
  background:var(--fx-glass);backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid var(--border);border-radius:14px}
.lp-proofstrip span{display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:600;color:var(--muted)}
.lp-proofstrip i{color:var(--success);font-size:1rem}

/* Why-not-just-X comparison. */
.lp-vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin-inline:auto}
.vs-col{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px}
.vs-col .vs-h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.05rem;margin-bottom:14px}
.vs-col .vs-h .logo{width:24px;height:24px;display:inline-grid;place-items:center;border-radius:7px;background:var(--gradient-primary)}
.vs-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.vs-col li{display:flex;align-items:flex-start;gap:10px;font-size:.94rem;line-height:1.45;color:var(--text)}
.vs-diy{opacity:.92}
.vs-diy .vs-h{color:var(--muted)}
.vs-diy li{color:var(--muted)}
.vs-diy li i{color:#c0392b;margin-top:2px;font-size:.85rem}
.vs-tur{border-color:var(--primary-600);box-shadow:0 10px 40px rgba(148,66,10,.10)}
.vs-tur li i{color:var(--success);margin-top:2px}

/* Condensed shared-engine row (replaces the old 8-card feature grid). */
.eng{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.eng-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;transition:.18s}
.eng-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.eng-item .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;
  margin-bottom:12px;background:var(--surface-2)}
.eng-item .ic i{background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eng-item h4{font-size:1.02rem;margin:0 0 6px}
.eng-item p{color:var(--muted);font-size:.9rem;margin:0;line-height:1.5}

/* Founder note. */
.lp-founder{display:flex;gap:22px;align-items:flex-start;max-width:820px;margin-inline:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px 30px}
.lp-founder-mark{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border)}
.lp-founder-mark svg{width:28px;height:28px}
.lp-founder-body p{margin:0 0 12px;font-size:1.05rem;line-height:1.6;color:var(--text)}
.lp-founder-sign{font-size:.92rem !important;color:var(--muted) !important;font-weight:600}
.lp-founder-sign a{color:var(--primary-600);text-decoration:none}
.lp-founder-sign a:hover{text-decoration:underline}

/* Founder photo (falls back to the brandmark when no photo is set). */
.lp-founder-photo{flex:0 0 auto}
.lp-founder-photo img{width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:1px solid var(--border);display:block}
.lp-founder-photo .lp-founder-mark{width:52px;height:52px}

/* Early-access section (honest early-stage proof, replaces testimonials until real ones exist). */
.lp-early{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
  max-width:1000px;margin-inline:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:34px 36px}
.lp-early .early-copy h3{font-size:1.35rem;margin:0 0 10px}
.lp-early .early-copy p{color:var(--muted);font-size:1rem;line-height:1.6;margin:0 0 20px}
.lp-early .lp-cta{margin:0}
.early-perks{display:flex;flex-direction:column;gap:16px}
.early-perk{display:flex;gap:13px;align-items:flex-start}
.early-perk .ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:1.15rem;background:var(--surface-2)}
.early-perk .ic i{background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.early-perk b{display:block;font-size:.98rem;margin-bottom:2px}
.early-perk span{color:var(--muted);font-size:.9rem;line-height:1.5}

@media(max-width:820px){
  .lp-vs{grid-template-columns:1fr}
  .eng{grid-template-columns:1fr 1fr}
  .lp-early{grid-template-columns:1fr;gap:24px;padding:28px 24px}
  .lp-founder{flex-direction:column;gap:14px;padding:24px 22px}
}
@media(max-width:520px){ .eng{grid-template-columns:1fr} }

/* ── Premium motion layer (futuristic hero) ──────────────────────────────
   All animation is transform/opacity/background-position/filter only, so it
   stays on the GPU. Everything here is disabled under prefers-reduced-motion. */

/* Living aurora: the existing rotating orb + two slow-drifting colour blooms. */
.lp-aura::before,.lp-aura::after{content:"";position:absolute;border-radius:50%;filter:blur(72px)}
.lp-aura::before{width:62%;height:62%;left:-8%;top:6%;
  background:radial-gradient(circle,rgba(230,148,74,.55),transparent 68%);animation:bloomA 19s ease-in-out infinite}
.lp-aura::after{width:56%;height:56%;right:-6%;bottom:0;
  background:radial-gradient(circle,rgba(201,106,31,.5),transparent 68%);animation:bloomB 25s ease-in-out infinite}
@keyframes bloomA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,8%) scale(1.12)}}
@keyframes bloomB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,-6%) scale(1.08)}}

/* Futuristic dot-grid, masked to fade out, slowly panning. */
.lp-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:26px 26px;
  color:rgba(180,83,14,.11);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 24%,#000 28%,transparent 74%);
          mask-image:radial-gradient(ellipse 78% 62% at 50% 24%,#000 28%,transparent 74%);
  animation:gridpan 34s linear infinite}
:root[data-theme="dark"] .lp-hero::after{color:rgba(240,168,98,.10)}
@keyframes gridpan{to{background-position:0 52px}}

/* Shimmering gradient headline word. */
.lp-hero h1 .grad{
  background:linear-gradient(100deg,var(--primary) 0%,#e6a860 28%,var(--primary) 52%,#e6a860 80%,var(--primary) 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:shimmer 6.5s linear infinite}
@keyframes shimmer{to{background-position:220% center}}

/* "How it works" per-step mini visuals. */
.step-viz{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.sv-chip{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:.8rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:5px 10px}
.sv-chip i{color:var(--primary)}
.sv-tags{display:flex;gap:6px;flex-wrap:wrap}
.sv-tags span{font-size:.72rem;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 8px}
.sv-line{height:8px;border-radius:5px;background:var(--surface-3)}
.sv-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;
  color:var(--success);background:var(--success-50);border-radius:999px;padding:4px 10px;margin-top:3px}
.sv-approve{flex-direction:row;align-items:center;justify-content:space-between}
.sv-approve b{font-size:.82rem;display:block}.sv-approve small{color:var(--muted);font-size:.72rem}
.sv-ok{font-size:.76rem;font-weight:700;color:#fff;background:var(--gradient-primary);border-radius:8px;
  padding:6px 12px;display:inline-flex;align-items:center;gap:6px}

/* Premium duotone product icon tile (custom SVG, theme-adaptive). */
.pico{flex:0 0 auto;display:grid;place-items:center;border-radius:12px;
  --ico-fill:#f4cf9f;--ico-stroke:#a8480a;
  background:linear-gradient(160deg,#fdf4ea,#f7e2cb);border:1px solid #f0d7bb;
  box-shadow:0 4px 14px rgba(180,83,14,.10);transition:transform .18s ease}
.pico svg{width:62%;height:62%;display:block}
:root[data-theme="dark"] .pico{--ico-fill:#5c3410;--ico-stroke:#f0a862;
  background:linear-gradient(160deg,#241a10,#3a2814);border-color:#4a3418;box-shadow:none}
.mega-link .pico{width:36px;height:36px;border-radius:10px}
.suite-card .pico{width:48px;height:48px;border-radius:14px;margin-bottom:14px}
.suite-card:hover .pico{transform:translateY(-2px)}

/* Designed visual tile for spotlight media that has no screenshot (replaces
   a lone icon floating in an empty box). Premium gradient panel + dot grid. */
.feat-viz{display:grid;place-items:center;min-height:280px;border-radius:18px;position:relative;
  overflow:hidden;border:1px solid var(--border);
  background:
    radial-gradient(55% 50% at 28% 18%, rgba(224,164,88,.30), transparent 70%),
    radial-gradient(50% 50% at 82% 92%, rgba(201,106,31,.20), transparent 70%),
    var(--surface)}
.feat-viz::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:34px 34px;opacity:.3;
  -webkit-mask-image:radial-gradient(circle at 50% 46%, #000, transparent 68%);
          mask-image:radial-gradient(circle at 50% 46%, #000, transparent 68%)}
.feat-viz .fv-ic{position:relative;z-index:1;width:92px;height:92px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(160deg,#fdf4ea,#f7e2cb);border:1px solid #f0d7bb;
  box-shadow:0 18px 44px rgba(180,83,14,.20), 0 0 0 7px rgba(255,255,255,.55)}
:root[data-theme="dark"] .feat-viz .fv-ic{background:linear-gradient(160deg,#241a10,#3a2814);border-color:#4a3418;
  box-shadow:0 18px 44px rgba(0,0,0,.45), 0 0 0 7px rgba(255,255,255,.04)}
.feat-viz .fv-ic i{font-size:2.6rem;-webkit-text-fill-color:transparent;
  background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);-webkit-background-clip:text;background-clip:text}
:root[data-theme="dark"] .feat-viz .fv-ic i{background:linear-gradient(135deg,#e6944a,#f0a862);-webkit-background-clip:text;background-clip:text}

/* Interactive particle constellation behind the hero. */
.lp-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.lp-hero-grid{position:relative;z-index:1}

/* Centered hero CTAs: .lp-phero is centered, so its buttons + trust line must be too. */
.lp-phero .lp-cta{justify-content:center}
.lp-phero .lp-trust{text-align:center}

/* Wide centered screenshot band (how-it-works, course hero). */
.hiw-shot, .shot-band{max-width:960px;margin:34px auto 0}
.hiw-shot img, .shot-band img{width:100%;display:block}

/* Screenshots: pop-zoom on hover, click to open full-size + readable. */
.lp-shot{cursor:zoom-in;transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;position:relative;z-index:1}
.lp-shot:hover{transform:scale(1.28);box-shadow:0 40px 95px rgba(16,24,40,.38);z-index:60}
/* On a two-column spotlight, grow toward the outer edge so the zoom doesn't cover the copy. */
.lp-spot:nth-child(odd) .lp-spot-media .lp-shot{transform-origin:center right}
.lp-spot:nth-child(even) .lp-spot-media .lp-shot{transform-origin:center left}
@media(max-width:820px){.lp-shot:hover{transform:scale(1.12)}}

/* "How it works": screenshot left, numbered steps right. */
.lp-hiw{display:grid;grid-template-columns:1.28fr .72fr;gap:46px;align-items:center;max-width:1120px;margin-inline:auto}
.lp-hiw-media .lp-shot{transform-origin:center left}
.lp-hiw-media img{width:100%}
.lp-hiw-steps{display:flex;flex-direction:column;gap:24px}
.hiw-step{display:flex;gap:16px;align-items:flex-start}
.hiw-step .n{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:700;
  background:var(--primary-50);color:var(--primary-600)}
.hiw-step h4{margin:0 0 5px;font-size:1.14rem}
.hiw-step p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
@media(max-width:820px){.lp-hiw{grid-template-columns:1fr;gap:28px}}
.imgzoom{position:fixed;inset:0;z-index:9999;background:rgba(15,18,21,.85);display:grid;place-items:center;
  padding:20px;cursor:zoom-out;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.imgzoom[hidden]{display:none}
.imgzoom img{max-width:96vw;max-height:94vh;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.imgzoom .zc{position:absolute;top:16px;right:22px;color:#fff;font-size:2rem;line-height:1;opacity:.85;cursor:pointer}

/* Secondary spotlight placeholder tiles removed — copy goes clean & full-width. */
.lp-spot:has(> .lp-spot-media.feat-viz){grid-template-columns:1fr;max-width:820px;margin-inline:auto}
.lp-spot > .lp-spot-media.feat-viz{display:none}
/* A spotlight with no media goes clean full-width. */
.lp-spot.solo{grid-template-columns:1fr;max-width:820px;margin-inline:auto}

/* Hero glow + floating 3D product collage. */
.lp-hero-visual{perspective:1300px}
.lp-hero-visual::before{content:"";position:absolute;inset:-10% -8%;z-index:-1;border-radius:28px;
  background:radial-gradient(58% 58% at 60% 42%,rgba(224,164,88,.42),transparent 72%);
  filter:blur(36px);animation:glowpulse 5.5s ease-in-out infinite}
@keyframes glowpulse{0%,100%{opacity:.45}50%{opacity:.9}}

.lp-collage{position:relative;width:100%;aspect-ratio:5/4;transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);will-change:transform}
.lp-collage .cc{position:absolute;display:block;text-decoration:none;transform:var(--rest);
  animation:ccenter 1s cubic-bezier(.2,.85,.25,1) var(--d,.1s) both;transition:filter .25s ease}
.lp-collage .card{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:var(--surface);box-shadow:0 20px 48px rgba(16,24,40,.22);
  animation:ccfloat var(--fd,8s) ease-in-out var(--d,.1s) infinite}
.lp-collage .card img{display:block;width:100%;height:auto}
@keyframes ccenter{from{opacity:0;transform:var(--rest) translateY(70px)}to{opacity:1;transform:var(--rest)}}
@keyframes ccfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* placement + depth (front → back by translateZ) */
.cc1{--rest:rotateY(-7deg) translateZ(70px);width:74%;left:5%;top:15%;--fd:8s;--d:.15s;z-index:4}
.cc2{--rest:rotateY(-13deg) translateZ(15px);width:45%;left:55%;top:-3%;--fd:9.5s;--d:.35s;z-index:2}
.cc3{--rest:rotateY(12deg) translateZ(-15px);width:42%;left:-4%;top:52%;--fd:10.5s;--d:.5s;z-index:1}
.cc4{--rest:rotateY(-9deg) translateZ(45px);width:47%;left:49%;top:55%;--fd:7.5s;--d:.65s;z-index:3}
.lp-collage .cc:hover{filter:brightness(1.03)}
.lp-collage .cc:hover .card{box-shadow:0 28px 64px rgba(180,83,14,.32);border-color:var(--primary)}

@media(max-width:900px){
  .lp-hero-visual{perspective:none}
  .lp-collage{aspect-ratio:auto;transform:none!important}
  .lp-collage .cc2,.lp-collage .cc3,.lp-collage .cc4{display:none}
  .lp-collage .cc1{position:relative;width:100%;left:0;top:0;--rest:none;
    animation:ccfadein .8s ease both}
  .lp-collage .cc1 .card{animation:none}
  .lp-particles{display:none}
}
@keyframes ccfadein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Sheen sweep across the primary hero CTA. */
.lp-try .btn-primary{position:relative;overflow:hidden}
.lp-try .btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg);animation:sheen 5s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,55%{left:-70%}100%{left:130%}}

/* Respect reduced-motion: kill every motion-layer + base animation. */
@media(prefers-reduced-motion:reduce){
  .lp-pipe .step,.lp-aura,.lp-aura::before,.lp-aura::after,.lp-hero::after,
  .lp-hero h1 .grad,.lp-hero-visual::before,.lp-try .btn-primary::after,
  .lp-collage,.lp-collage .cc,.lp-collage .card,.orbit-ico{animation:none !important}
  /* Keep the full layered collage, just frozen (no entrance/float/parallax),
     so reduced-motion users still get the premium composition, not a blank. */
  .lp-collage .cc{opacity:1 !important}
  .lp-particles{display:none}
  .lp-hero h1 .grad{-webkit-text-fill-color:var(--primary);color:var(--primary)}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ============================================================
   Motion layer — reusable entrance + interaction primitives.
   Markup-driven, so any template can opt in without new CSS:
     <div data-reveal>                 fade + rise (default)
     <div data-reveal="left|right">    slide in from the side
     <div data-reveal="scale|pop">     settle in (pop overshoots)
     <div data-reveal="blur|fade">     defocus / plain fade
     <div data-reveal-group>           stagger every child that reveals
   The engine in base.html adds .in when the element enters the
   viewport and assigns --i for the stagger. Transform + opacity
   only, so every transition stays on the compositor.
   ============================================================ */
:root{
  --m-dur:.62s;
  --m-ease:cubic-bezier(.22,.68,.28,1);    /* soft decelerate */
  --m-spring:cubic-bezier(.34,1.34,.5,1);  /* gentle overshoot */
  --m-dist:22px;
  --m-stagger:65ms;
}

[data-reveal]{
  opacity:0;
  transform:translate3d(0,var(--m-dist),0);
  transition:opacity var(--m-dur) var(--m-ease),
             transform var(--m-dur) var(--m-ease),
             filter var(--m-dur) var(--m-ease);
  transition-delay:calc(var(--i,0) * var(--m-stagger));
  will-change:opacity,transform;
}
[data-reveal="left"] {transform:translate3d(calc(-1 * var(--m-dist)),0,0)}
[data-reveal="right"]{transform:translate3d(var(--m-dist),0,0)}
[data-reveal="down"] {transform:translate3d(0,calc(-1 * var(--m-dist)),0)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="pop"]  {transform:scale(.9);transition-timing-function:var(--m-spring)}
[data-reveal="blur"] {transform:none;filter:blur(10px)}
[data-reveal="fade"] {transform:none}
[data-reveal].in{opacity:1;transform:none;filter:none;will-change:auto}

/* Hover/press micro-motion for anything clickable. */
.m-lift{transition:transform var(--t) var(--m-ease),box-shadow var(--t) var(--m-ease),
                   border-color var(--t) var(--m-ease)}
.m-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.m-press{transition:transform var(--t-fast) var(--m-ease)}
.m-press:active{transform:scale(.97)}

/* Icon tiles that tilt as their card is hovered. */
.m-lift .jico,.m-lift .ic{transition:transform var(--t-slow) var(--m-spring)}
.m-lift:hover .jico,.m-lift:hover .ic{transform:scale(1.08) rotate(-4deg)}

/* Numbers that count up (engine animates [data-count]); the tabular
   figures stop the tile resizing on every frame. */
.m-count{font-variant-numeric:tabular-nums}

/* Skeleton shimmer for content still loading. */
.m-skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:mskel 1.4s ease-in-out infinite;border-radius:var(--radius-sm);
  color:transparent!important}
@keyframes mskel{to{background-position:-135% 0}}

@media(prefers-reduced-motion:reduce){
  /* Show everything in its settled state, with no movement at all. */
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .m-lift,.m-press,.m-lift .jico,.m-lift .ic{transition:none!important}
  .m-lift:hover{transform:none}
  .m-press:active{transform:none}
  .m-lift:hover .jico,.m-lift:hover .ic{transform:none}
  .m-skel{animation:none}
}

/* ============================================================
   Futuristic layer (fx-*) — ambient depth + light, tuned to the
   brand rather than neon: terracotta warmth against a cool slate
   counterpoint, everything low-opacity so copy stays legible in
   both themes. Continuous animations are transform/opacity/filter
   only and all of it stops under prefers-reduced-motion.
   ============================================================ */
:root{
  --fx-warm:rgba(200,106,31,.20);
  --fx-cool:rgba(70,110,160,.16);
  --fx-line:rgba(21,24,29,.055);       /* grid hairline */
  --fx-glass:rgba(255,255,255,.62);
  --fx-glow:rgba(200,106,31,.34);
}
html[data-theme="dark"]{
  --fx-warm:rgba(230,148,74,.20);
  --fx-cool:rgba(96,140,200,.16);
  --fx-line:rgba(255,255,255,.05);
  --fx-glass:rgba(23,27,32,.62);
  --fx-glow:rgba(230,148,74,.42);
}

/* --- Ambient aurora field. Sits behind everything, never interactive. --- */
.fx-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.fx-field::before,.fx-field::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.fx-field::before{width:58vw;height:58vw;left:-14vw;top:-18vw;
  background:radial-gradient(circle,var(--fx-warm),transparent 66%);animation:fxdriftA 32s ease-in-out infinite}
.fx-field::after{width:52vw;height:52vw;right:-16vw;bottom:-20vw;
  background:radial-gradient(circle,var(--fx-cool),transparent 66%);animation:fxdriftB 41s ease-in-out infinite}
@keyframes fxdriftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,5vh,0) scale(1.14)}}
@keyframes fxdriftB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,-6vh,0) scale(1.1)}}

/* Fine engineering grid, drifting slowly. Masked so it fades out downward. */
.fx-field .fx-grid{position:absolute;inset:-60px 0 0;
  background-image:linear-gradient(var(--fx-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--fx-line) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 46%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 46%,transparent 88%);
  animation:fxgrid 26s linear infinite}
@keyframes fxgrid{to{background-position:0 58px,58px 0}}

/* --- Scroll progress beam across the top of the viewport. --- */
.fx-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:100;pointer-events:none;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--cyan));
  box-shadow:0 0 12px var(--fx-glow);opacity:.92}

/* --- Glass panel: frosted surface with a light hairline. --- */
.fx-glass{background:var(--fx-glass);backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid var(--border);box-shadow:var(--shadow)}

/* --- Luminous border: a conic sweep that lights up on hover. Uses a mask
       so only the 1px rim is painted, never the card's interior. --- */
.fx-edge{position:relative;isolation:isolate}
.fx-edge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0turn,var(--fx-glow) .12turn,transparent .3turn,
             transparent .5turn,var(--fx-glow) .62turn,transparent .8turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .28s var(--m-ease);pointer-events:none;z-index:1}
.fx-edge:hover::before,.fx-edge:focus-within::before{opacity:1;animation:fxspin 4s linear infinite}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes fxspin{to{--a:360deg}}

/* --- Cursor spotlight. The engine feeds --mx/--my as percentages. --- */
.fx-spot{position:relative;isolation:isolate}
.fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--fx-glow),transparent 70%);
  opacity:0;transition:opacity .3s var(--m-ease);mix-blend-mode:soft-light}
.fx-spot:hover::after{opacity:.9}
.fx-spot>*{position:relative;z-index:1}

/* --- Pointer tilt (engine sets --rx/--ry). --- */
.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;transition:transform .32s var(--m-ease)}

/* --- Magnetic control: drifts toward the cursor (engine sets --tx/--ty). --- */
.fx-magnet{transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .22s var(--m-ease)}

/* --- Headline sweep: a slow specular pass over display type. --- */
.fx-shine{background:linear-gradient(100deg,var(--text) 20%,var(--primary) 42%,var(--cyan) 52%,var(--text) 72%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:fxshine 7.5s linear infinite}
@keyframes fxshine{to{background-position:-220% center}}

/* --- Status dot that pulses like live telemetry. --- */
.fx-live{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--success);flex:none}
.fx-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:fxping 2.1s cubic-bezier(0,0,.2,1) infinite}
@keyframes fxping{0%{transform:scale(1);opacity:.7}75%,100%{transform:scale(2.6);opacity:0}}

/* --- Sidebar nav: an accent rail that slides in on hover/active. --- */
.nav-links a{position:relative}
.nav-links a::before{content:"";position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;
  background:var(--gradient-primary);transform:translateY(-50%);
  transition:height .24s var(--m-ease);box-shadow:0 0 8px var(--fx-glow)}
.nav-links a:hover::before{height:46%}
.nav-links a.active::before{height:64%}

/* --- App content gets depth: the shell reads as a lit surface, not flat. --- */
.fx-app-bg{background:
  radial-gradient(1100px 520px at 76% -8%,color-mix(in srgb,var(--primary) 7%,transparent),transparent 62%),
  radial-gradient(860px 460px at -6% 12%,color-mix(in srgb,#4b7bb5 6%,transparent),transparent 60%)}

@media(prefers-reduced-motion:reduce){
  .fx-field::before,.fx-field::after,.fx-field .fx-grid,.fx-shine,.fx-live::after,
  .fx-edge:hover::before{animation:none!important}
  .fx-shine{-webkit-text-fill-color:var(--text);color:var(--text)}
  .fx-tilt,.fx-magnet{transform:none!important;transition:none}
  .fx-spot::after{display:none}
  .nav-links a::before{transition:none}
  .fx-progress{transition:none}
}