/* ===========================================
   CSS Custom Properties
   =========================================== */
:root {
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-900: #312e81;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --amber-400: #fbbf24;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
}

/* ===========================================
   Reset & Base
   =========================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-800);
  background: var(--slate-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--indigo-600); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--indigo-700); }
img { max-width: 100%; display: block; }

/* ===========================================
   Layout
   =========================================== */
.layout { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

/* ===========================================
   Header
   =========================================== */
header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--slate-200);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
header .inner { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
header .bar { display: flex; height: 3.75rem; align-items: center; justify-content: space-between; }
header .logo {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.125rem; font-weight: 700; color: var(--slate-900);
  letter-spacing: -0.01em;
}
header .logo:hover { opacity: 0.9; color: var(--slate-900); }
header .logo svg { flex-shrink: 0; }
header nav { display: flex; align-items: center; gap: 2rem; }
header nav a { font-size: 0.875rem; font-weight: 500; color: var(--slate-500); transition: color 0.2s; }
header nav a:hover { color: var(--slate-900); }
header .cta {
  display: inline-block; padding: 0.5rem 1.125rem;
  font-size: 0.875rem; font-weight: 600;
  color: #fff !important; background: var(--indigo-600);
  border-radius: 0.5rem; transition: background 0.2s, transform 0.15s;
}
header .cta:hover { background: var(--indigo-700); transform: translateY(-1px); }
.menu-btn { display: none; }

/* ===========================================
   HERO
   =========================================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--slate-950);
  padding: 6rem 0 7rem;
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 60%, rgba(99, 102, 241, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(139, 92, 246, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 90%, rgba(79, 70, 229, 0.1) 0%, transparent 70%);
  animation: glow-drift 20s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, -4%) scale(1.05); }
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
}
.hero-layout {
  display: grid; grid-template-columns: 1fr; gap: 3rem;
  align-items: center; position: relative; z-index: 1;
}
.hero-content { color: #fff; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--indigo-200);
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 9999px;
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: 2.25rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15;
  margin: 0;
}
.hero-accent {
  background: linear-gradient(135deg, var(--indigo-400), #a78bfa, var(--indigo-400));
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero-sub {
  font-size: 1.0625rem; line-height: 1.7;
  color: var(--slate-400); margin: 1.25rem 0 0;
  max-width: 30rem;
}
.hero-actions {
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem; font-weight: 600;
  color: #fff; background: var(--indigo-600);
  border-radius: 0.625rem; border: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(99,102,241,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-primary:hover {
  background: var(--indigo-500); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.35), 0 0 0 1px rgba(99,102,241,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem; font-weight: 600;
  color: var(--slate-300); background: transparent;
  border-radius: 0.625rem;
  transition: color 0.2s, background 0.2s;
}
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.06); }
.btn-ghost .arrow { transition: transform 0.2s; }
.btn-ghost:hover .arrow { transform: translateX(3px); }

/* Hero visual / Mock popup */
.hero-visual { position: relative; display: flex; justify-content: center; }
.mock-glow {
  position: absolute; inset: -20%; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 60%);
  filter: blur(40px); pointer-events: none;
}
.mock-popup {
  position: relative; width: 100%; max-width: 400px;
  background: var(--slate-900);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; overflow: hidden;
  box-shadow:
    0 25px 60px -15px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 80px -20px rgba(99,102,241,0.15);
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.mock-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.mock-bar-left { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: #fff; }
.mock-capture-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem; font-weight: 600;
  color: var(--emerald-400);
  background: rgba(16, 185, 129, 0.1);
  border-radius: 9999px;
}
.capture-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald-400);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}
.mock-toolbar {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.mock-search {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem; color: var(--slate-500);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.375rem;
}
.mock-pills { display: flex; gap: 0.375rem; }
.m-pill {
  padding: 0.1875rem 0.5rem; font-size: 0.6875rem; font-weight: 600;
  color: var(--slate-500); background: rgba(255,255,255,0.04);
  border-radius: 0.25rem;
}
.m-pill.active { color: var(--indigo-400); background: rgba(99,102,241,0.15); }
.mock-list { padding: 0.25rem 0; }
.mock-req {
  display: grid; grid-template-columns: 3rem 1fr 2.25rem 2.75rem;
  align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; font-size: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  opacity: 0; animation: slide-in 0.4s ease forwards;
  animation-delay: calc(0.8s + var(--i) * 0.15s);
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.m-method {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  padding: 0.125rem 0.25rem; border-radius: 0.1875rem; text-align: center;
}
.m-method.get { color: #34d399; background: rgba(52,211,153,0.12); }
.m-method.post { color: #fbbf24; background: rgba(251,191,36,0.12); }
.m-method.put { color: var(--indigo-400); background: rgba(129,140,248,0.12); }
.m-method.del { color: var(--rose-400); background: rgba(251,113,133,0.12); }
.m-url {
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--slate-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-status { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; text-align: center; }
.m-status.ok { color: var(--emerald-400); }
.m-status.created { color: var(--emerald-400); }
.m-status.err { color: var(--rose-400); }
.m-time { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--slate-500); text-align: right; }
.mock-statusbar {
  display: flex; justify-content: space-between;
  padding: 0.625rem 1rem;
  font-size: 0.6875rem; color: var(--slate-500);
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

/* ===========================================
   TRUST BAR
   =========================================== */
.trust-bar {
  border-bottom: 1px solid var(--slate-200);
  background: #fff; padding: 2.5rem 0;
}
.trust-items { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.trust-item {
  display: flex; align-items: center; gap: 0.875rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--d) * 0.12s);
}
.visible .trust-item { opacity: 1; transform: translateY(0); }
.trust-icon {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-50); color: var(--indigo-600);
  border-radius: 0.625rem;
}
.trust-item strong { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--slate-900); }
.trust-item span { font-size: 0.8125rem; color: var(--slate-500); }

/* ===========================================
   SECTION HEADERS
   =========================================== */
.section-header { text-align: center; max-width: 36rem; margin: 0 auto 3.5rem; }
.section-label {
  display: inline-block;
  font-size: 0.8125rem; font-weight: 700;
  color: var(--indigo-600);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}
.section-header h2 {
  font-size: 1.75rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--slate-900); margin: 0;
}
.section-header p { color: var(--slate-500); margin: 0.75rem 0 0; line-height: 1.6; }

/* ===========================================
   FEATURE SHOWCASE
   =========================================== */
.features-showcase { padding: 6rem 0; background: var(--slate-50); }
.feature-block {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  align-items: center; margin-bottom: 5rem;
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.feature-block:last-child { margin-bottom: 0; }
.reveal.visible .feature-block,
.feature-block.visible { opacity: 1; transform: translateY(0); }
.feature-num {
  font-size: 0.8125rem; font-weight: 800;
  color: var(--indigo-600); font-family: var(--font-mono);
  margin-bottom: 0.5rem;
}
.feature-text h3 {
  font-size: 1.5rem; font-weight: 700;
  color: var(--slate-900); margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.feature-text > p { color: var(--slate-600); margin: 0 0 1.25rem; line-height: 1.7; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9375rem; color: var(--slate-700);
  padding: 0.375rem 0;
}
.feature-list li svg { flex-shrink: 0; }

/* Feature visuals */
.feature-visual { display: flex; justify-content: center; }

/* Capture demo */
.capture-demo {
  width: 100%; max-width: 380px;
  background: var(--slate-900); border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.3);
}
.cap-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cap-dots { display: flex; gap: 0.375rem; }
.cap-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.cap-dots span:first-child { background: #ef4444; }
.cap-dots span:nth-child(2) { background: #eab308; }
.cap-dots span:nth-child(3) { background: #22c55e; }
.cap-url { font-size: 0.75rem; color: var(--slate-500); font-family: var(--font-mono); }
.cap-body { padding: 0.375rem 0; }
.cap-row {
  display: grid; grid-template-columns: 3.25rem 1fr 2.25rem;
  align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; font-size: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  opacity: 0; animation: cap-in 0.5s ease forwards;
  animation-delay: calc(1.2s + var(--ci) * 0.3s);
}
@keyframes cap-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.cap-row.pulse { animation: cap-in 0.5s ease forwards, cap-pulse 2s ease-in-out 3s infinite; }
@keyframes cap-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.cap-method {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  padding: 0.125rem 0.25rem; border-radius: 0.1875rem; text-align: center;
}
.cap-method.get { color: #34d399; background: rgba(52,211,153,0.12); }
.cap-method.post { color: #fbbf24; background: rgba(251,191,36,0.12); }
.cap-path { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--slate-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-s { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; text-align: center; }
.cap-s.ok { color: var(--emerald-400); }
.cap-s.pending { color: var(--amber-400); animation: blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Redaction demo */
.redact-demo { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; width: 100%; max-width: 420px; }
.redact-card {
  width: 100%; padding: 1rem 1.25rem;
  border-radius: 10px; font-family: var(--font-mono); font-size: 0.75rem;
}
.redact-card.before {
  background: var(--slate-900); border: 1px solid rgba(255,255,255,0.08);
  color: var(--slate-300);
}
.redact-card.after {
  background: #f0fdf4; border: 1px solid #bbf7d0;
  color: var(--slate-700);
}
.redact-label {
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--slate-500); margin-bottom: 0.75rem;
}
.safe-label { color: var(--emerald-500) !important; }
.redact-line { display: flex; gap: 0.5rem; padding: 0.25rem 0; flex-wrap: wrap; }
.rk { color: var(--indigo-400); white-space: nowrap; }
.after .rk { color: var(--indigo-600); }
.rv { word-break: break-all; }
.rv.sensitive {
  color: var(--rose-400);
  text-decoration: line-through;
  text-decoration-color: rgba(251,113,133,0.4);
}
.rv.safe { color: var(--emerald-500); font-weight: 600; }
.rv.envvar { color: var(--amber-400); font-weight: 600; }
.redact-arrow { color: var(--slate-400); }

/* Code tabs (export demo) */
.code-tabs {
  width: 100%; max-width: 420px;
  background: var(--slate-900); border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.3);
}
.code-tabs input[type="radio"] { display: none; }
.code-tab-labels {
  display: flex; border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.code-tab-labels label {
  flex: 1; padding: 0.625rem 1rem; text-align: center;
  font-size: 0.75rem; font-weight: 600;
  color: var(--slate-500); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.code-tab-labels label:hover { color: var(--slate-300); background: rgba(255,255,255,0.02); }
#tab-curl:checked ~ .code-tab-labels label[for="tab-curl"],
#tab-python:checked ~ .code-tab-labels label[for="tab-python"],
#tab-json:checked ~ .code-tab-labels label[for="tab-json"] {
  color: var(--indigo-400); border-bottom-color: var(--indigo-500);
}
.code-panels { position: relative; min-height: 10rem; }
.code-panel {
  display: none; margin: 0; padding: 1.25rem;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.7;
  color: var(--slate-300); white-space: pre; overflow-x: auto;
}
#tab-curl:checked ~ .code-panels .panel-curl,
#tab-python:checked ~ .code-panels .panel-python,
#tab-json:checked ~ .code-panels .panel-json { display: block; }
.ck { color: var(--indigo-400); }
.cv { color: var(--emerald-400); }
.cs { color: var(--amber-400); }

/* ===========================================
   FORMATS GRID
   =========================================== */
.formats-section {
  padding: 6rem 0; background: var(--slate-900); color: #fff;
  position: relative; overflow: hidden;
}
.formats-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 80% 80%, rgba(99,102,241,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 20% 20%, rgba(139,92,246,0.08) 0%, transparent 70%);
}
.formats-section h2 {
  font-size: 1.75rem; font-weight: 800;
  letter-spacing: -0.02em; text-align: center; margin: 0;
  position: relative;
}
.formats-sub { text-align: center; color: var(--slate-400); margin: 0.75rem 0 0; position: relative; }
.formats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  margin-top: 3rem; position: relative;
}
.format-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; padding: 1.5rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.75rem;
  transition: transform 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.visible .format-card {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--fi) * 0.06s);
}
.format-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(99,102,241,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(99,102,241,0.2);
}
.format-icon { color: var(--indigo-400); }
.format-card strong { font-size: 0.9375rem; color: #fff; }
.format-card span { font-size: 0.75rem; color: var(--slate-400); }

/* ===========================================
   HOW IT WORKS
   =========================================== */
.how-section { padding: 6rem 0; background: #fff; }
.steps-flow { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 3rem; }
.step-card {
  text-align: center; max-width: 16rem;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--si) * 0.15s);
}
.visible .step-card { opacity: 1; transform: translateY(0); }
.step-icon {
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-50); color: var(--indigo-600);
  border-radius: 1rem;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.08);
}
.step-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--slate-900); margin: 0 0 0.5rem; }
.step-card p { font-size: 0.875rem; color: var(--slate-500); margin: 0; line-height: 1.6; }
.step-connector {
  color: var(--slate-300); padding: 0.75rem 0;
  transform: rotate(90deg);
}

/* ===========================================
   DETAILS GRID (More capabilities)
   =========================================== */
.details-section { padding: 6rem 0; background: var(--slate-50); }
.details-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
.detail-card {
  padding: 1.5rem; background: #fff;
  border: 1px solid var(--slate-200); border-radius: 0.75rem;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s, border-color 0.25s;
}
.visible .detail-card {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--di) * 0.07s);
}
.detail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.08);
  border-color: var(--indigo-200);
}
.detail-icon {
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-50); color: var(--indigo-600);
  border-radius: 0.5rem; margin-bottom: 0.875rem;
}
.detail-card h4 { font-size: 1rem; font-weight: 700; color: var(--slate-900); margin: 0 0 0.375rem; }
.detail-card p { font-size: 0.875rem; color: var(--slate-500); margin: 0; line-height: 1.6; }

/* ===========================================
   FAQ
   =========================================== */
.faq { padding: 6rem 0; background: #fff; }
.faq .section-header { margin-bottom: 2.5rem; }
.faq-list { max-width: 42rem; margin: 0 auto; }
.faq-list details {
  border: 1px solid var(--slate-200);
  border-radius: 0.75rem; margin-bottom: 0.625rem;
  background: #fff;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq-list details[open] { border-color: var(--indigo-200); box-shadow: 0 4px 12px -4px rgba(99,102,241,0.08); }
.faq-list summary {
  padding: 1.125rem 1.5rem; font-weight: 600; font-size: 0.9375rem;
  color: var(--slate-900); cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  transition: color 0.2s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+'; font-size: 1.25rem; color: var(--slate-400);
  transition: transform 0.3s, color 0.2s;
  flex-shrink: 0; margin-left: 1rem;
}
.faq-list details[open] summary::after { content: '−'; color: var(--indigo-600); }
.faq-list summary:hover { color: var(--indigo-600); }
.faq-answer {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.875rem; color: var(--slate-600); line-height: 1.7;
}

/* ===========================================
   FINAL CTA
   =========================================== */
.final-cta {
  position: relative; overflow: hidden;
  background: var(--slate-950); padding: 6rem 0;
  text-align: center;
}
.final-cta-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(99,102,241,0.2) 0%, transparent 70%);
}
.final-cta h2 {
  font-size: 2rem; font-weight: 800;
  color: #fff; margin: 0;
  letter-spacing: -0.02em;
  position: relative;
}
.final-cta p {
  color: var(--slate-400); margin: 1rem 0 0;
  font-size: 1.0625rem; line-height: 1.7;
  position: relative;
}
.cta-actions {
  margin-top: 2rem; display: flex; flex-wrap: wrap;
  gap: 0.75rem; justify-content: center;
  position: relative;
}

/* ===========================================
   FOOTER
   =========================================== */
footer { border-top: 1px solid var(--slate-200); background: #fff; }
footer .inner { max-width: 72rem; margin: 0 auto; padding: 2rem 1.5rem; }
footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
footer .copy { font-size: 0.875rem; color: var(--slate-500); }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
footer nav a { font-size: 0.875rem; color: var(--slate-500); transition: color 0.2s; }
footer nav a:hover { color: var(--slate-800); }

/* ===========================================
   SCROLL REVEAL ANIMATION
   =========================================== */
.fade-up {
  opacity: 0; transform: translateY(24px);
  animation: fade-up 0.7s ease forwards;
}
.delay-2 { animation-delay: 0.25s; }
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}
.reveal { }
.reveal.visible .feature-block { opacity: 1; transform: translateY(0); }

/* ===========================================
   PRICING PAGE (kept for pricing.html)
   =========================================== */
.pricing-page { padding: 4rem 0 6rem; }
.pricing-page .intro { text-align: center; max-width: 36rem; margin: 0 auto 3.5rem; }
.pricing-page .intro h1 { font-size: 1.875rem; font-weight: 700; color: var(--slate-900); margin: 0; }
@media (min-width: 640px) { .pricing-page .intro h1 { font-size: 2.25rem; } }
.pricing-page .intro p { color: var(--slate-600); margin-top: 1rem; }
.pricing-page .grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .pricing-page .grid { grid-template-columns: repeat(2, 1fr); max-width: 52rem; margin-left: auto; margin-right: auto; } }
.pricing-page .card {
  position: relative; padding: 2rem; border-radius: 0.75rem; border: 1px solid var(--slate-200);
  background: #fff; display: flex; flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.pricing-page .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.08); }
.pricing-page .card.featured { border-color: var(--indigo-600); background: rgba(79, 70, 229, 0.03); }
.pricing-page .card .badge { position: absolute; top: -0.625rem; left: 50%; transform: translateX(-50%); background: var(--indigo-600); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 9999px; white-space: nowrap; }
.pricing-page .card h2 { font-size: 1.125rem; font-weight: 600; color: var(--slate-900); margin: 0; }
.pricing-page .card .price { margin-top: 1rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.pricing-page .card .price .amount { font-size: 2.25rem; font-weight: 700; color: var(--slate-900); }
.pricing-page .card .price .amount-original { font-size: 1.25rem; font-weight: 500; color: var(--slate-400); text-decoration: line-through; }
.pricing-page .card .price .period { font-size: 0.875rem; color: var(--slate-500); }
.pricing-page .card .desc { font-size: 0.875rem; color: var(--slate-600); margin-top: 0.5rem; }
.pricing-page .card .features { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.625rem; }
.pricing-page .card .features li { font-size: 0.875rem; color: var(--slate-700); display: flex; align-items: flex-start; gap: 0.5rem; }
.pricing-page .card .features li::before { content: '✓'; color: var(--emerald-500); font-weight: 700; flex-shrink: 0; }
.pricing-page .card .features li.muted { color: var(--slate-400); }
.pricing-page .card .features li.muted::before { content: '—'; color: var(--slate-300); }
.pricing-page .card .card-cta {
  margin-top: auto; padding-top: 1.5rem; display: block; text-align: center; padding: 0.625rem;
  font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem;
  transition: background 0.2s, transform 0.15s;
  border: none; cursor: pointer; width: 100%; text-decoration: none;
  font-family: inherit; line-height: inherit; margin-top: 1.75rem;
}
.pricing-page .card .card-cta.primary { background: var(--indigo-600); color: #fff; }
.pricing-page .card .card-cta.primary:hover { background: var(--indigo-700); color: #fff; transform: translateY(-1px); }
.pricing-page .card .card-cta.ghost { background: transparent; color: var(--slate-700); border: 1px solid var(--slate-300); }
.pricing-page .card .card-cta.ghost:hover { background: var(--slate-100); color: var(--slate-900); transform: translateY(-1px); }
.pricing-page .footer-note { text-align: center; margin-top: 2.5rem; font-size: 0.875rem; color: var(--slate-500); }

/* ===========================================
   COMPARISON PAGE (compare.html)
   =========================================== */

/* Hero */
.compare-hero {
  position: relative; overflow: hidden;
  background: var(--slate-950);
  padding: 5rem 0 4.5rem;
  text-align: center;
}
.compare-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(99,102,241,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 20%, rgba(139,92,246,0.1) 0%, transparent 60%);
}
.compare-hero-inner { position: relative; z-index: 1; }
.compare-hero h1 {
  font-size: 2.25rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15;
  color: #fff; margin: 0.625rem 0 0.875rem;
}
@media (min-width: 640px) { .compare-hero h1 { font-size: 3rem; } }
.compare-hero p { font-size: 1.0625rem; color: var(--slate-400); margin: 0 auto; max-width: 28rem; }

/* Hero plan badges */
.compare-hero-plans {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  margin-top: 2.5rem; flex-wrap: wrap;
}
.chp-free, .chp-pro {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 1.25rem 2rem;
  border-radius: 1rem;
  min-width: 9rem;
}
.chp-free {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.chp-pro {
  background: rgba(79,70,229,0.15);
  border: 1px solid rgba(99,102,241,0.35);
  box-shadow: 0 0 30px -8px rgba(99,102,241,0.3);
  position: relative;
}
.chp-badge {
  position: absolute; top: -0.625rem; left: 50%; transform: translateX(-50%);
  background: var(--indigo-600); color: #fff;
  font-size: 0.6875rem; font-weight: 700;
  padding: 0.2rem 0.625rem; border-radius: 9999px;
  white-space: nowrap; letter-spacing: 0.02em;
}
.chp-name { font-size: 0.8125rem; font-weight: 700; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.07em; }
.chp-pro .chp-name { color: var(--indigo-300); }
.chp-price { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1.1; }
.chp-price-row { display: flex; align-items: baseline; gap: 0.5rem; }
.chp-original { font-size: 1rem; font-weight: 500; color: var(--slate-500); text-decoration: line-through; }
.chp-note { font-size: 0.75rem; color: var(--slate-500); }
.chp-pro .chp-note { color: var(--indigo-400); }
.chp-divider {
  font-size: 0.875rem; font-weight: 700;
  color: var(--slate-600); text-transform: uppercase; letter-spacing: 0.1em;
}

/* Comparison section */
.compare-section { padding: 4rem 0 5rem; background: var(--slate-50); }
.compare-wrap {
  max-width: 52rem; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.07);
}

/* Sticky column headers */
.cmp-header {
  display: grid; grid-template-columns: 1fr 6.5rem 6.5rem;
  position: sticky; top: 3.75rem; z-index: 10;
  background: #fff;
  border-bottom: 2px solid var(--slate-200);
}
@media (min-width: 640px) { .cmp-header { grid-template-columns: 1fr 8.5rem 8.5rem; } }
.cmp-hcell {
  padding: 0.875rem 1rem;
  font-size: 0.8125rem; font-weight: 700;
  text-align: center; color: var(--slate-500);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cmp-hcell--feature { text-align: left; }
.cmp-hcell--pro {
  color: var(--indigo-600);
  background: rgba(79,70,229,0.04);
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
}
.cmp-pro-tag {
  font-size: 0.6875rem; font-weight: 700;
  background: var(--indigo-600); color: #fff;
  padding: 0.1rem 0.4rem; border-radius: 0.25rem;
  letter-spacing: 0;
}

/* Category label */
.cmp-category {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.75rem; font-weight: 700;
  color: var(--indigo-600);
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--indigo-50);
  border-top: 1px solid var(--indigo-100);
  border-bottom: 1px solid var(--indigo-100);
}
.cmp-category svg { flex-shrink: 0; }

/* Feature rows */
.cmp-row {
  display: grid; grid-template-columns: 1fr 6.5rem 6.5rem;
  align-items: center;
  border-bottom: 1px solid var(--slate-100);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease, background 0.15s;
}
@media (min-width: 640px) { .cmp-row { grid-template-columns: 1fr 8.5rem 8.5rem; } }
.cmp-row.visible { opacity: 1; transform: translateY(0); }
.cmp-row:hover { background: var(--slate-50); }
.cmp-row:last-child { border-bottom: none; }

.cmp-cell { padding: 0.875rem 1rem; }
.cmp-cell--feature { padding: 0.875rem 1.25rem; }
.cmp-cell--free { text-align: center; }
.cmp-cell--pro {
  text-align: center;
  background: rgba(79,70,229,0.025);
  border-left: 1px solid var(--indigo-100);
}

.cmp-feat { display: block; font-size: 0.875rem; font-weight: 600; color: var(--slate-800); }
.cmp-feat-desc { display: block; font-size: 0.75rem; color: var(--slate-400); margin-top: 0.125rem; line-height: 1.45; }

.cmp-yes { font-size: 0.875rem; font-weight: 700; color: var(--emerald-500); }
.cmp-cell--pro .cmp-yes { color: var(--indigo-600); }
.cmp-no { font-size: 1rem; font-weight: 500; color: var(--slate-300); }
.cmp-limit {
  display: inline-block;
  font-size: 0.75rem; font-weight: 600;
  color: var(--slate-500);
  background: var(--slate-100);
  border-radius: 0.375rem; padding: 0.2rem 0.5rem;
}

/* CTA footer row */
.cmp-footer-row {
  display: grid; grid-template-columns: 1fr 6.5rem 6.5rem;
  align-items: center;
  border-top: 2px solid var(--slate-200);
  background: var(--slate-50);
}
@media (min-width: 640px) { .cmp-footer-row { grid-template-columns: 1fr 8.5rem 8.5rem; } }
.cmp-footer-row .cmp-cell { padding: 1.25rem 0.75rem; }
.cmp-footer-row .cmp-cell--pro { background: rgba(79,70,229,0.04); border-left: 1px solid var(--indigo-100); }

.cmp-cta {
  display: block; text-align: center; padding: 0.5rem 0.625rem;
  font-size: 0.8125rem; font-weight: 700;
  border-radius: 0.5rem; border: none; cursor: pointer;
  font-family: inherit; line-height: 1.4;
  text-decoration: none; width: 100%;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.cmp-cta--ghost {
  background: transparent; color: var(--slate-600);
  border: 1px solid var(--slate-300);
}
.cmp-cta--ghost:hover { background: var(--slate-100); color: var(--slate-900); transform: translateY(-1px); }
.cmp-cta--primary {
  background: var(--indigo-600); color: #fff;
  box-shadow: 0 1px 3px rgba(79,70,229,0.3);
}
.cmp-cta--primary:hover { background: var(--indigo-700); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,0.35); }

/* Final CTA note */
.final-cta-note {
  margin-top: 1.25rem; font-size: 0.8125rem; color: var(--slate-500);
  position: relative;
}
.final-cta-note a { color: var(--slate-400); text-decoration: underline; }
.final-cta-note a:hover { color: var(--slate-200); }

/* ===========================================
   POLICIES PAGE (kept for policies.html)
   =========================================== */
.policies-page { max-width: 48rem; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.policies-page h1 { font-size: 1.875rem; font-weight: 700; color: var(--slate-900); margin: 0; }
.policies-page .subtitle { color: var(--slate-600); margin-top: 0.75rem; }
.policies-page .list { margin-top: 2.5rem; list-style: none; padding: 0; margin-left: 0; }
.policies-page .list li { margin-bottom: 1.5rem; }
.policies-page .list a {
  display: block; padding: 1.5rem; background: #fff; border: 1px solid var(--slate-200); border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: border-color 0.2s, box-shadow 0.2s;
}
.policies-page .list a:hover { border-color: var(--indigo-200); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.policies-page .list h2 { font-size: 1.125rem; font-weight: 600; color: var(--slate-900); margin: 0; }
.policies-page .list p { font-size: 0.875rem; color: var(--slate-600); margin: 0.5rem 0 0; line-height: 1.5; }
.policies-page .list .read-more { font-size: 0.875rem; font-weight: 500; color: var(--indigo-600); margin-top: 0.75rem; }

/* ===========================================
   ARTICLE (Policy content pages)
   =========================================== */
article { max-width: 48rem; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
article .back { font-size: 0.875rem; font-weight: 500; color: var(--slate-500); margin-bottom: 1.5rem; }
article .back:hover { color: var(--slate-700); }
article h1 { font-size: 1.875rem; font-weight: 700; color: var(--slate-900); margin: 0; }
article .updated { font-size: 0.875rem; color: var(--slate-500); margin-top: 0.5rem; }
article .content { margin-top: 2.5rem; }
article .content h2 { font-size: 1.25rem; font-weight: 600; color: var(--slate-900); margin: 2.5rem 0 1rem; }
article .content h2:first-child { margin-top: 0; }
article .content p { color: var(--slate-600); line-height: 1.7; margin: 1rem 0; }
article .content ul { color: var(--slate-600); margin: 1rem 0; padding-left: 1.5rem; }
article .content li { margin: 0.25rem 0; }

/* ===========================================
   AUTH PAGES (login, signup, forgot/reset password)
   =========================================== */
.auth-page {
  min-height: calc(100vh - 3.75rem - 5rem);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
  background: var(--slate-50);
  position: relative; overflow: hidden;
}
.auth-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 50% at 30% 30%, rgba(99,102,241,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 70%, rgba(139,92,246,0.04) 0%, transparent 70%);
}
.auth-card {
  position: relative; width: 100%; max-width: 26rem;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 24px -4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
}
.auth-card .auth-logo {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 1.25rem; font-weight: 700; color: var(--slate-900);
  margin-bottom: 2rem; text-decoration: none;
}
.auth-card .auth-logo:hover { opacity: 0.9; }
.auth-card h1 {
  font-size: 1.375rem; font-weight: 700;
  color: var(--slate-900); text-align: center;
  margin: 0 0 0.375rem; letter-spacing: -0.01em;
}
.auth-card .auth-subtitle {
  font-size: 0.875rem; color: var(--slate-500);
  text-align: center; margin: 0 0 1.75rem; line-height: 1.5;
}
.auth-field { margin-bottom: 1.25rem; }
.auth-field label {
  display: block;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 0.375rem;
}
.auth-field input {
  width: 100%; padding: 0.625rem 0.875rem;
  font-family: var(--font-sans); font-size: 0.9375rem;
  color: var(--slate-800);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.auth-field input:focus {
  border-color: var(--indigo-400);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.auth-field input::placeholder { color: var(--slate-400); }
.auth-field .field-hint {
  font-size: 0.75rem; color: var(--slate-400); margin-top: 0.25rem;
}
.auth-actions { margin-top: 1.5rem; }
.auth-btn {
  width: 100%; padding: 0.75rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem; font-weight: 600;
  color: #fff; background: var(--indigo-600);
  border: none; border-radius: 0.5rem; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(99,102,241,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.auth-btn:hover {
  background: var(--indigo-500);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.35), 0 0 0 1px rgba(99,102,241,0.4);
}
.auth-btn:active { transform: translateY(0); }
.auth-btn:disabled {
  opacity: 0.6; cursor: not-allowed;
  transform: none; box-shadow: none;
}
.auth-link-row {
  margin-top: 0.75rem; text-align: center;
  font-size: 0.8125rem; color: var(--slate-500);
}
.auth-link-row a { font-weight: 600; color: var(--indigo-600); }
.auth-link-row a:hover { color: var(--indigo-700); }
.auth-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.5rem 0; font-size: 0.75rem; color: var(--slate-400);
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--slate-200);
}
.auth-message {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem; line-height: 1.5;
  border-radius: 0.5rem; margin-bottom: 1.25rem;
  display: none;
}
.auth-message.error {
  display: block;
  color: #991b1b; background: #fef2f2;
  border: 1px solid #fecaca;
}
.auth-message.success {
  display: block;
  color: #065f46; background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.auth-message.info {
  display: block;
  color: #1e40af; background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.auth-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin 0.6s linear infinite;
  vertical-align: middle; margin-right: 0.375rem;
}
@keyframes auth-spin {
  to { transform: rotate(360deg); }
}
.password-toggle-wrap {
  position: relative;
}
.password-toggle-wrap input {
  padding-right: 2.75rem;
}
.password-toggle {
  position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 0.25rem; cursor: pointer;
  color: var(--slate-400); transition: color 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.password-toggle:hover { color: var(--slate-600); }

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (min-width: 640px) {
  .hero { padding: 7rem 0 8rem; }
  .hero h1 { font-size: 2.75rem; }
  .trust-items { grid-template-columns: repeat(3, 1fr); }
  .formats-grid { grid-template-columns: repeat(4, 1fr); }
  .details-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-flow { flex-direction: row; gap: 0; justify-content: center; }
  .step-connector { transform: none; padding: 0 0.5rem; }
  .redact-demo { flex-direction: row; gap: 1rem; max-width: 100%; }
}

@media (min-width: 768px) {
  .feature-block { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .feature-block.reverse { direction: rtl; }
  .feature-block.reverse > * { direction: ltr; }
  .feature-block.reverse .feature-text { order: 2; }
  .feature-block.reverse .feature-visual { order: 1; }
  .details-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .hero { padding: 8rem 0 9rem; }
  .hero-layout { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .hero h1 { font-size: 3.25rem; }
  .hero-sub { font-size: 1.125rem; }
  .section-header h2 { font-size: 2.25rem; }
  .final-cta h2 { font-size: 2.5rem; }
  .step-connector { padding: 0 1.5rem; }
}

/* Mobile nav toggle */
@media (max-width: 639px) {
  .menu-btn {
    display: flex; flex-direction: column; gap: 4px; cursor: pointer;
    padding: 0.5rem; z-index: 10;
  }
  .menu-btn span {
    display: block; width: 18px; height: 2px;
    background: var(--slate-700); border-radius: 1px;
    transition: transform 0.3s, opacity 0.3s;
  }
  #menu-toggle:checked ~ .menu-btn span:first-child { transform: rotate(45deg) translate(3px, 3px); }
  #menu-toggle:checked ~ .menu-btn span:nth-child(2) { opacity: 0; }
  #menu-toggle:checked ~ .menu-btn span:last-child { transform: rotate(-45deg) translate(3px, -3px); }
  header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--slate-200);
    padding: 1rem 1.5rem; flex-direction: column; gap: 0.75rem;
    box-shadow: 0 8px 24px -4px rgba(0,0,0,0.08);
  }
  #menu-toggle:checked ~ nav { display: flex; }
  header .cta { text-align: center; margin-top: 0.25rem; }
  .hero-visual { margin-top: 1rem; }
  .mock-popup { max-width: 340px; }
  .capture-demo { max-width: 340px; }
  .code-tabs { max-width: 340px; }
  .hero h1 br { display: none; }
}

/* ===========================================
   EXPORT PREVIEW SECTION
   =========================================== */
.ep-section {
  background: var(--slate-950);
  padding: 5rem 0 6rem;
}
.ep-section .section-header h2 { color: #fff; }
.ep-section .section-header p { color: var(--slate-400); }
.ep-section .section-label { color: var(--indigo-400); }

.ep-shell {
  margin-top: 3rem;
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.1), 0 24px 64px -16px rgba(0,0,0,0.6);
}

/* Request bar */
.ep-req-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ep-req-left {
  display: flex; align-items: center; gap: 0.625rem;
  min-width: 0; flex: 1;
}
.ep-badge-method {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700;
  padding: 0.2rem 0.5rem; border-radius: 0.3rem; flex-shrink: 0;
  letter-spacing: 0.04em;
}
.ep-post { background: rgba(99,102,241,0.2); color: var(--indigo-400); }
.ep-url-text {
  font-family: var(--font-mono); font-size: 0.8125rem;
  color: var(--slate-300); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0;
}
.ep-status-ok {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  color: var(--emerald-400); flex-shrink: 0;
}
.ep-dur {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--slate-500); flex-shrink: 0;
}
.ep-redacted-tag {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 600;
  color: var(--emerald-400);
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.2);
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  flex-shrink: 0;
}

/* Tabs row */
.ep-tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.ep-tabs { display: flex; gap: 0; }
.ep-tab {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500;
  color: var(--slate-500);
  background: none; border: none; cursor: pointer;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  position: relative; bottom: -1px;
}
.ep-tab:hover { color: var(--slate-300); }
.ep-tab.active { color: var(--indigo-400); border-bottom-color: var(--indigo-500); }

.ep-copy {
  display: flex; align-items: center; gap: 0.375rem;
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600;
  color: var(--slate-400);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.35rem 0.875rem; border-radius: 0.4rem; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ep-copy:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Code panels */
.ep-code-wrap { overflow-x: auto; }
.ep-panel {
  display: none;
  margin: 0; padding: 1.5rem 1.5rem 1.75rem;
  font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.75;
  color: var(--slate-300);
  background: transparent;
  white-space: pre;
  min-height: 11rem;
}
.ep-panel.ep-active { display: block; }
.ep-env { color: #fbbf24; }
.ep-redact { color: var(--rose-400); opacity: 0.85; }

/* ===========================================
   CHANGELOG PAGE
   =========================================== */
.cl-page { padding: 4rem 0 6rem; }

.cl-header {
  text-align: center;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 0;
}
.cl-header h1 {
  font-size: 2.25rem; font-weight: 800;
  letter-spacing: -0.03em; color: var(--slate-900);
  margin: 0.5rem 0 0.75rem;
}
.cl-header p { color: var(--slate-500); font-size: 1.0625rem; margin: 0; }
@media (min-width: 640px) { .cl-header h1 { font-size: 2.75rem; } }

.cl-feed {
  max-width: 52rem; margin: 0 auto;
  position: relative;
}
.cl-feed::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 5.5rem;
  width: 1px;
  background: var(--slate-200);
}

.cl-entry {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0 2.5rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--slate-100);
  position: relative;
}
.cl-entry::before {
  content: '';
  position: absolute;
  left: calc(6rem + 2.5rem/2 - 5px);
  top: 2.875rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--indigo-500);
  border: 2px solid var(--slate-50);
  box-shadow: 0 0 0 2px var(--indigo-200);
}
.cl-entry-initial::before { background: var(--emerald-500); box-shadow: 0 0 0 2px #a7f3d0; }

.cl-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  padding-top: 0.125rem; gap: 0.25rem;
}
.cl-version {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  color: var(--indigo-600);
  background: var(--indigo-50);
  border: 1px solid var(--indigo-100);
  padding: 0.2rem 0.5rem; border-radius: 0.3rem;
}
.cl-date {
  font-size: 0.75rem; color: var(--slate-400); white-space: nowrap;
}

.cl-body h2 {
  font-size: 1.125rem; font-weight: 700;
  color: var(--slate-900); margin: 0 0 0.625rem;
  letter-spacing: -0.01em;
}
.cl-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cl-badge {
  font-size: 0.6875rem; font-weight: 700;
  padding: 0.2rem 0.5rem; border-radius: 9999px;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.cl-badge.feature  { background: #ede9fe; color: #6d28d9; }
.cl-badge.fix      { background: #fef3c7; color: #92400e; }
.cl-badge.improvement { background: #dbeafe; color: #1e40af; }
.cl-badge.pro      { background: var(--indigo-600); color: #fff; }
.cl-badge.launch   { background: var(--emerald-500); color: #fff; }

.cl-body ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 0.625rem;
}
.cl-body li {
  font-size: 0.9375rem; color: var(--slate-600);
  padding-left: 1.25rem; position: relative; line-height: 1.6;
}
.cl-body li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--slate-300); font-size: 0.8125rem;
}
.cl-body li strong { color: var(--slate-800); }
.cl-body code {
  font-family: var(--font-mono); font-size: 0.8125rem;
  background: var(--slate-100); padding: 0.1rem 0.35rem;
  border-radius: 0.25rem; color: var(--indigo-700);
}

@media (max-width: 600px) {
  .cl-feed::before { left: 0; }
  .cl-entry { grid-template-columns: 1fr; gap: 0.75rem; padding-left: 1.25rem; }
  .cl-entry::before { left: -5px; top: 0.75rem; }
  .cl-meta { flex-direction: row; align-items: center; }
}

/* ─── Social Proof ──────────────────────────────────────────────────────────── */
.social-proof { padding: 3rem 0 4rem; }
.sp-metrics {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0; margin-bottom: 3rem;
  background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: 1rem; padding: 1.5rem 2rem;
}
.sp-metric { text-align: center; padding: 0.5rem 2rem; flex: 1; min-width: 140px; }
.sp-value { display: block; font-size: 1.25rem; font-weight: 800; color: var(--slate-900); margin-bottom: 0.25rem; }
.sp-label { display: block; font-size: 0.8125rem; color: var(--slate-500); }
.sp-divider { width: 1px; height: 3rem; background: var(--slate-200); flex-shrink: 0; }
.sp-testimonials {
  display: grid; grid-template-columns: 1fr;
  gap: 1.25rem;
}
.sp-testimonial {
  margin: 0; padding: 1.5rem;
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sp-testimonial p {
  margin: 0 0 1rem; font-size: 0.9375rem; color: var(--slate-700);
  line-height: 1.65; font-style: italic;
}
.sp-testimonial footer { font-size: 0.8125rem; color: var(--slate-500); }
.sp-testimonial footer strong { color: var(--slate-800); }

@media (min-width: 640px) {
  .sp-testimonials { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .sp-divider { display: none; }
  .sp-metric { padding: 0.5rem 1rem; min-width: 45%; }
}

/* ─── What's New ────────────────────────────────────────────────────────────── */
.whats-new { padding: 4rem 0; }
.wn-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 2rem; border: 1px solid var(--slate-200); border-radius: 1rem; overflow: hidden; }
.wn-item {
  display: flex; align-items: flex-start; gap: 1.5rem;
  padding: 1.5rem 2rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--slate-100);
  transition: background 0.15s;
}
.wn-item:last-child { border-bottom: none; }
.wn-item:hover { background: var(--slate-50); }
.wn-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 90px; flex-shrink: 0; }
.wn-version { font-size: 0.8125rem; font-weight: 700; color: var(--indigo-600); font-family: var(--font-mono); }
.wn-date { font-size: 0.75rem; color: var(--slate-400); }
.wn-body { flex: 1; }
.wn-body strong { font-size: 0.9375rem; font-weight: 600; color: var(--slate-900); display: block; margin-bottom: 0.25rem; }
.wn-body p { margin: 0; font-size: 0.875rem; color: var(--slate-500); line-height: 1.6; }
.wn-body code { font-family: var(--font-mono); font-size: 0.8125rem; background: var(--slate-100); padding: 0.1rem 0.35rem; border-radius: 0.25rem; color: var(--indigo-700); }
.wn-arrow { font-size: 1rem; color: var(--slate-300); align-self: center; flex-shrink: 0; }
.wn-item:hover .wn-arrow { color: var(--indigo-500); }
.wn-footer { text-align: center; }

/* ─── Use Cases ─────────────────────────────────────────────────────────────── */
.use-cases { padding: 4rem 0; }
.uc-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 3rem; }
.uc-card {
  padding: 2rem; background: #fff;
  border: 1px solid var(--slate-200); border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: box-shadow 0.2s, transform 0.2s;
}
.uc-card:hover { box-shadow: 0 4px 16px rgba(79,70,229,.1); transform: translateY(-2px); }
.uc-icon {
  width: 52px; height: 52px; border-radius: 0.75rem;
  background: var(--indigo-50); color: var(--indigo-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.uc-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--slate-900); margin: 0 0 0.75rem; }
.uc-card p { font-size: 0.9rem; color: var(--slate-600); line-height: 1.7; margin: 0; }

@media (min-width: 640px) {
  .uc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .wn-item { flex-direction: row; }
}

/* ─── Guide ─────────────────────────────────────────────────────────────────── */
.guide-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-top: 3rem;
  padding-bottom: 5rem;
}
.guide-sidebar { display: none; }
.guide-nav {
  position: sticky; top: 5rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.gn-link {
  display: block; padding: 0.5rem 0.875rem;
  font-size: 0.875rem; color: var(--slate-500);
  text-decoration: none; border-radius: 0.5rem;
  transition: color 0.15s, background 0.15s;
  border-left: 2px solid transparent;
}
.gn-link:hover { color: var(--slate-800); background: var(--slate-50); }
.gn-link.active { color: var(--indigo-600); background: var(--indigo-50); border-left-color: var(--indigo-500); font-weight: 600; }
.guide-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--slate-100); }
.guide-header h1 { font-size: 2.25rem; font-weight: 800; color: var(--slate-900); margin: 0.5rem 0 0.75rem; }
.guide-header p { font-size: 1.0625rem; color: var(--slate-500); margin: 0; }
.guide-section {
  padding-top: 2.5rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--slate-100);
}
.guide-section:last-child { border-bottom: none; }
.guide-section h2 {
  font-size: 1.5rem; font-weight: 700; color: var(--slate-900);
  margin: 0 0 1.25rem; scroll-margin-top: 5rem;
}
.guide-section h3 { font-size: 1.0625rem; font-weight: 700; color: var(--slate-800); margin: 1.5rem 0 0.75rem; }
.guide-section p, .guide-section li { font-size: 0.9375rem; color: var(--slate-600); line-height: 1.75; }
.guide-section ul, .guide-section ol { padding-left: 1.5rem; margin: 0.75rem 0; }
.guide-section li { margin-bottom: 0.5rem; }
.guide-section code {
  font-family: var(--font-mono); font-size: 0.8125rem;
  background: var(--slate-100); padding: 0.15rem 0.4rem;
  border-radius: 0.3rem; color: var(--indigo-700);
}
.guide-note {
  background: var(--indigo-50); border: 1px solid #c7d2fe;
  border-radius: 0.625rem; padding: 1rem 1.25rem;
  font-size: 0.875rem; color: var(--slate-700);
  margin-top: 1.25rem; line-height: 1.65;
}
.guide-note strong { color: var(--indigo-700); }
.guide-table {
  width: 100%; border-collapse: collapse; margin: 1.25rem 0;
  font-size: 0.875rem;
}
.guide-table th {
  background: var(--slate-50); text-align: left;
  padding: 0.625rem 1rem; font-weight: 600; color: var(--slate-700);
  border-bottom: 2px solid var(--slate-200);
}
.guide-table td {
  padding: 0.625rem 1rem; color: var(--slate-600);
  border-bottom: 1px solid var(--slate-100);
  vertical-align: top;
}
.guide-table tr:last-child td { border-bottom: none; }
.guide-table td code {
  font-family: var(--font-mono); font-size: 0.8rem;
  background: var(--slate-100); padding: 0.1rem 0.35rem;
  border-radius: 0.25rem; color: var(--indigo-700);
}

@media (min-width: 900px) {
  .guide-layout { grid-template-columns: 220px 1fr; }
  .guide-sidebar { display: block; }
}

/* ─── Blog ──────────────────────────────────────────────────────────────────── */
.blog-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--slate-200); border-radius: 1rem; overflow: hidden; }
.blog-card {
  display: block; padding: 2rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--slate-100);
  transition: background 0.15s;
}
.blog-card:last-child { border-bottom: none; }
.blog-card:hover { background: var(--slate-50); }
.bc-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.625rem; }
.bc-date { font-size: 0.8125rem; color: var(--slate-400); }
.bc-tag {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--indigo-50); color: var(--indigo-600);
  padding: 0.2rem 0.5rem; border-radius: 0.375rem;
}
.blog-card h2 { font-size: 1.125rem; font-weight: 700; color: var(--slate-900); margin: 0 0 0.5rem; line-height: 1.4; }
.blog-card p { font-size: 0.9rem; color: var(--slate-500); margin: 0 0 0.75rem; line-height: 1.6; }
.bc-read { font-size: 0.875rem; color: var(--indigo-600); font-weight: 600; }
.blog-card:hover .bc-read { text-decoration: underline; }

/* Blog post */
.blog-post { max-width: 760px; padding-top: 3rem; padding-bottom: 5rem; }
.bp-header { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--slate-100); }
.bp-header h1 { font-size: 2rem; font-weight: 800; color: var(--slate-900); margin: 0.5rem 0 1rem; line-height: 1.3; }
.bp-lead { font-size: 1.125rem; color: var(--slate-500); margin: 0; line-height: 1.65; }
.bp-body h2 { font-size: 1.375rem; font-weight: 700; color: var(--slate-900); margin: 2rem 0 0.875rem; }
.bp-body h3 { font-size: 1.0625rem; font-weight: 700; color: var(--slate-800); margin: 1.5rem 0 0.75rem; }
.bp-body p, .bp-body li { font-size: 0.9375rem; color: var(--slate-600); line-height: 1.8; }
.bp-body ul, .bp-body ol { padding-left: 1.5rem; margin: 0.75rem 0 1.25rem; }
.bp-body li { margin-bottom: 0.5rem; }
.bp-body code {
  font-family: var(--font-mono); font-size: 0.8125rem;
  background: var(--slate-100); padding: 0.15rem 0.4rem;
  border-radius: 0.3rem; color: var(--indigo-700);
}
.bp-body pre {
  background: var(--slate-900); border-radius: 0.75rem;
  padding: 1.25rem 1.5rem; overflow-x: auto; margin: 1.25rem 0;
}
.bp-body pre code {
  background: none; padding: 0; color: #e2e8f0;
  font-size: 0.875rem; line-height: 1.7;
}
.bp-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--slate-100); }
.bp-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--slate-100); }
.bp-footer a { font-size: 0.875rem; color: var(--indigo-600); text-decoration: none; font-weight: 600; }
.bp-footer a:hover { text-decoration: underline; }

/* ─── Compare pages ─────────────────────────────────────────────────────────── */
.compare-page { max-width: 860px; padding-top: 3rem; padding-bottom: 5rem; }
.compare-summary {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 3rem; flex-wrap: wrap;
}
.cs-card {
  flex: 1; min-width: 220px; padding: 1.5rem;
  border-radius: 1rem; border: 1px solid var(--slate-200);
  background: #fff;
}
.cs-shripi { border-color: var(--indigo-300); background: var(--indigo-50); }
.cs-name { font-size: 1.25rem; font-weight: 800; color: var(--slate-900); margin-bottom: 0.25rem; }
.cs-tagline { font-size: 0.875rem; color: var(--slate-600); margin-bottom: 0.5rem; }
.cs-best { font-size: 0.8125rem; color: var(--slate-500); font-style: italic; }
.cs-vs {
  font-size: 1rem; font-weight: 800; color: var(--slate-300);
  flex-shrink: 0; padding: 0 0.5rem;
}

/* ─── Coming soon button ─────────────────────────────────────────────────────── */
.btn-coming-soon {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--slate-100); color: var(--slate-500);
  border: 1px solid var(--slate-200); border-radius: 0.625rem;
  font-size: 0.9375rem; font-weight: 600; cursor: default;
  user-select: none;
}

/* ─── Inline env-var token (prose) ─────────────────────────────────────────── */
code.ep-env {
  font-family: var(--font-mono);
  font-size: 0.8em;
  background: #f1f5f9;
  color: #4f46e5;
  padding: 0.1em 0.4em;
  border-radius: 0.25em;
  white-space: nowrap;
}