*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #0d0d17;
  --surface:      #111120;
  --card:         #16162a;
  --card-hover:   #1c1c32;
  --accent:       #7c6aff;
  --accent-glow:  rgba(124, 106, 255, 0.18);
  --text:         #dddaf0;
  --muted:        #52506e;
  --border:       #1e1e36;
  --border-bright:#2e2e50;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Mascot keyframes ── */
@keyframes mc-bob    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes mc-work   { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-4px) rotate(2deg)} }
@keyframes mc-dance  { 0%{transform:translateY(0) scale(1) rotate(0)} 18%{transform:translateY(-16px) scale(1.08) rotate(-6deg)} 36%{transform:translateY(0) scale(1) rotate(4deg)} 54%{transform:translateY(-10px) scale(1.05) rotate(-3deg)} 72%{transform:translateY(0) scale(1) rotate(0)} 100%{transform:translateY(0) scale(1) rotate(0)} }
@keyframes mr-blink  { 0%,85%,100%{transform:scaleY(1)} 92%{transform:scaleY(0.05)} }
@keyframes mr-spin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes mr-ant    { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
@keyframes mb-morph  { 0%{border-radius:62% 38% 32% 68% / 58% 32% 68% 42%} 33%{border-radius:35% 65% 68% 32% / 48% 62% 38% 52%} 66%{border-radius:48% 52% 32% 68% / 35% 48% 52% 65%} 100%{border-radius:62% 38% 32% 68% / 58% 32% 68% 42%} }
@keyframes mf-flutter{ 0%,100%{transform:rotate(-1deg)} 50%{transform:rotate(1deg)} }
@keyframes mc-spool  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes pulse     { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
@keyframes shimmer   { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes cs-pulse  { 0%,100%{box-shadow:0 0 12px rgba(124,106,255,0.15)} 50%{box-shadow:0 0 28px rgba(124,106,255,0.35)} }

/* ── Scroll reveal ── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.d1 { transition-delay:0.05s; }
.d2 { transition-delay:0.15s; }
.d3 { transition-delay:0.25s; }
.d4 { transition-delay:0.35s; }

/* ── Nav ── */
nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0;
  background:rgba(13,13,23,0.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  z-index:100;
}
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; color:var(--text); text-decoration:none; }
.nav-logo svg { width:24px; height:24px; }
.nav-right { display:flex; align-items:center; gap:20px; }
.nav-link { font-size:13px; color:var(--muted); text-decoration:none; transition:color 0.15s; }
.nav-link:hover { color:var(--text); }

/* ── Hero ── */
.hero {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:96px 24px 80px; position:relative; overflow:visible;
}
.hero::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:700px; height:500px;
  background:radial-gradient(ellipse at 50% 0%, rgba(124,106,255,0.13) 0%, transparent 70%);
  pointer-events:none;
}
.beta-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:99px; background:rgba(124,106,255,0.12); border:1px solid rgba(124,106,255,0.3); font-size:11px; font-weight:600; color:var(--accent); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:28px; }
.beta-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite; }
.hero-icon { width:88px; height:88px; border-radius:22px; background:var(--card); border:1px solid var(--border-bright); display:flex; align-items:center; justify-content:center; margin-bottom:28px; box-shadow:0 0 40px rgba(124,106,255,0.15), 0 8px 32px rgba(0,0,0,0.4); }
.hero-icon svg { width:52px; height:52px; }
h1 { font-size:clamp(40px,6vw,64px); font-weight:700; letter-spacing:-0.03em; line-height:1.1; margin-bottom:16px; background:linear-gradient(135deg,var(--text) 0%,rgba(221,218,240,0.6) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:clamp(16px,2.5vw,20px); color:var(--muted); max-width:480px; line-height:1.6; margin-bottom:40px; }
.hero-sub strong { color:var(--text); font-weight:500; }
.hero-mascot-r { position:absolute; right:max(48px, calc(50% - 400px)); bottom:48px; pointer-events:none; opacity:0.88; }
.hero-mascot-l { position:absolute; left:max(48px, calc(50% - 400px)); bottom:56px; pointer-events:none; opacity:0.72; }
@media (max-width:960px) { .hero-mascot-r, .hero-mascot-l { display:none; } }

/* ── App demo animation ── */
.app-demo {
  width:300px; border-radius:14px; overflow:hidden;
  background:#111120; border:1px solid #1e1e36;
  box-shadow:0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  margin:40px auto 0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  user-select:none;
}
.demo-chrome {
  height:32px; background:#16162a; border-bottom:1px solid #1e1e36;
  display:flex; align-items:center; padding:0 12px; gap:8px;
}
.demo-dots { display:flex; gap:5px; }
.demo-dots span { width:9px; height:9px; border-radius:50%; }
.demo-dots span:nth-child(1) { background:#ff5f57; }
.demo-dots span:nth-child(2) { background:#febc2e; }
.demo-dots span:nth-child(3) { background:#28c840; }
.demo-chrome-title { flex:1; text-align:center; font-size:11px; color:#52506e; margin-right:32px; }
.demo-body { padding:14px; height:190px; position:relative; overflow:hidden; }

/* Phase 1: Drop zone */
.demo-dropzone {
  position:absolute; inset:14px;
  border:1.5px dashed #2e2e50; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  animation: demo-phase1 8s ease-in-out infinite;
}
@keyframes demo-phase1 {
  0%,12%   { opacity:1; }
  20%,100% { opacity:0; }
}
.demo-drop-text { font-size:11px; color:#52506e; }
.demo-drop-icon { width:32px; height:32px; border-radius:8px; background:#16162a; border:1px solid #2e2e50;
                  display:flex; align-items:center; justify-content:center;
                  animation: demo-drop-bob 2s ease-in-out infinite; }
@keyframes demo-drop-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* Phase 2: File added */
.demo-file-row {
  position:absolute; top:14px; left:14px; right:14px;
  height:44px; border-radius:10px; background:#16162a; border:1px solid #1e1e36;
  display:flex; align-items:center; padding:0 12px; gap:10px;
  animation: demo-phase2 8s ease-in-out infinite;
}
@keyframes demo-phase2 {
  0%,14%  { opacity:0; transform:translateY(6px); }
  20%,78% { opacity:1; transform:translateY(0); }
  86%,100%{ opacity:0; }
}
.demo-file-dot { width:7px; height:7px; border-radius:50%; background:#60a5fa; flex-shrink:0; }
.demo-file-name { font-size:11px; color:#dddaf0; flex:1; }
.demo-file-ext { font-size:10px; color:#52506e; font-family:monospace; }

/* Phase 2b: Format grid */
.demo-formats {
  position:absolute; top:72px; left:14px; right:14px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:5px;
  animation: demo-phase2 8s ease-in-out infinite;
}
.demo-fmt {
  border-radius:8px; padding:6px 2px; font-size:10px; font-weight:700;
  background:#16162a; border:1px solid #1e1e36; text-align:center;
}
.demo-fmt:nth-child(1) { color:#60a5fa; }
.demo-fmt:nth-child(2) { color:#34d399; }
.demo-fmt:nth-child(3) { color:#fbbf24; }
.demo-fmt:nth-child(4) { color:#a78bfa; }
.demo-fmt-selected { animation: demo-select 8s ease-in-out infinite; }
@keyframes demo-select {
  0%,28%  { border-color:#1e1e36; background:#16162a; }
  36%,78% { border-color:rgba(124,106,255,0.5); background:rgba(124,106,255,0.1); }
  86%,100%{ border-color:#1e1e36; background:#16162a; }
}

/* Phase 3: Converting */
.demo-converting {
  position:absolute; top:14px; left:14px; right:14px;
  animation: demo-phase3 8s ease-in-out infinite;
}
@keyframes demo-phase3 {
  0%,43%   { opacity:0; }
  50%,70%  { opacity:1; }
  78%,100% { opacity:0; }
}
.demo-conv-row { height:44px; border-radius:10px; background:#16162a; border:1px solid #1e1e36;
                 display:flex; align-items:center; padding:0 12px; gap:10px; margin-bottom:8px; }
.demo-conv-label { font-size:11px; color:#dddaf0; flex:1; }
.demo-conv-pct { font-size:10px; color:#7c6aff; font-family:monospace; }
.demo-progress-track { height:3px; border-radius:2px; background:#1e1e36; overflow:hidden; }
.demo-progress-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,#7c6aff,#a78bfa,#7c6aff);
  background-size:200% 100%;
  animation: demo-bar-fill 8s ease-in-out infinite;
}
@keyframes demo-bar-fill {
  0%,43%  { width:0%; }
  50%     { width:15%; }
  62%     { width:72%; }
  70%,100%{ width:100%; }
}

/* Phase 4: Done */
.demo-done {
  position:absolute; top:14px; left:14px; right:14px;
  animation: demo-phase4 8s ease-in-out infinite;
}
@keyframes demo-phase4 {
  0%,73%  { opacity:0; transform:translateY(4px); }
  80%,95% { opacity:1; transform:translateY(0); }
  100%    { opacity:0; }
}
.demo-done-row { height:44px; border-radius:10px; background:rgba(52,211,153,0.08); border:1px solid rgba(52,211,153,0.25);
                 display:flex; align-items:center; padding:0 12px; gap:10px; }
.demo-done-check { width:18px; height:18px; border-radius:50%; background:rgba(52,211,153,0.2);
                   display:flex; align-items:center; justify-content:center; font-size:10px; color:#34d399; flex-shrink:0; }
.demo-done-name { font-size:11px; color:#dddaf0; flex:1; }
.demo-done-size { font-size:10px; color:#34d399; font-family:monospace; }

/* ── Buttons ── */
.download-buttons { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; transition:all 0.15s ease; cursor:pointer; border:none; }
.btn svg { width:16px; height:16px; flex-shrink:0; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 0 20px rgba(124,106,255,0.35); }
.btn-primary:hover { background:#8e7dff; box-shadow:0 0 28px rgba(124,106,255,0.5); transform:translateY(-1px); }
.btn-cs { background:var(--card); color:var(--muted); border:1px solid var(--border-bright); cursor:default; position:relative; overflow:hidden; animation:cs-pulse 2.5s ease-in-out infinite; }
.btn-cs::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(124,106,255,0.07) 50%, transparent 100%); background-size:200% 100%; animation:shimmer 2.2s ease-in-out infinite; }
.btn-cs:hover { border-color:rgba(124,106,255,0.5); color:var(--text); }
.version-note { font-size:12px; color:var(--muted); }

/* ── Privacy strip ── */
.privacy-strip { display:flex; align-items:center; justify-content:center; gap:32px; padding:20px 24px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.privacy-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.privacy-item svg { width:15px; height:15px; color:var(--accent); flex-shrink:0; }

/* ── Why local ── */
.why-local { padding:80px 24px; max-width:800px; margin:0 auto; }
.compare-wrap { margin-top:40px; border-radius:16px; overflow:hidden; border:1px solid var(--border); }
.compare-table { width:100%; border-collapse:collapse; }
.compare-table th, .compare-table td { padding:14px 20px; font-size:13px; border-bottom:1px solid var(--border); }
.compare-table thead { background:var(--surface); }
.compare-table th { font-weight:600; text-align:center; }
.compare-table th:first-child { text-align:left; color:var(--muted); font-weight:500; }
.compare-table th:nth-child(2) { color:var(--muted); }
.compare-table th:nth-child(3) { color:var(--accent); }
.compare-table td { text-align:center; background:var(--card); }
.compare-table td:first-child { text-align:left; color:var(--text); }
.compare-table td:nth-child(3) { background:rgba(124,106,255,0.04); }
.compare-table tbody tr:last-child td { border-bottom:none; }
.compare-table tbody tr:hover td { background:var(--card-hover); }
.compare-table tbody tr:hover td:nth-child(3) { background:rgba(124,106,255,0.08); }
.chk { color:#34d399; font-size:15px; font-weight:700; }
.crs { color:var(--muted); font-size:15px; }

/* ── Features ── */
.features { padding:80px 24px; max-width:960px; margin:0 auto; }
.section-label { text-align:center; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.section-title { text-align:center; font-size:clamp(24px,4vw,36px); font-weight:700; letter-spacing:-0.02em; margin-bottom:48px; color:var(--text); }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; padding-top:28px; }
.feature-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:24px; transition:border-color 0.15s, transform 0.15s; position:relative; overflow:visible; }
.feature-card:hover { border-color:var(--border-bright); transform:translateY(-2px); }
.card-mascot { position:absolute; top:-26px; right:10px; pointer-events:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.feature-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:20px; }
.feature-card h3 { font-size:14px; font-weight:600; margin-bottom:6px; }
.feature-card p { font-size:12px; color:var(--muted); line-height:1.6; }

/* ── Power features ── */
.power-features { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:80px 24px; }
.power-inner { max-width:960px; margin:0 auto; }
.power-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:48px; }
.power-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:28px 24px; transition:border-color 0.15s, transform 0.15s; }
.power-card:hover { border-color:var(--border-bright); transform:translateY(-2px); }
.power-icon { width:44px; height:44px; border-radius:12px; background:var(--accent-glow); border:1px solid rgba(124,106,255,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:22px; }
.power-card h3 { font-size:15px; font-weight:600; margin-bottom:8px; color:var(--text); }
.power-card p { font-size:12px; color:var(--muted); line-height:1.7; }
.power-tag { display:inline-block; padding:2px 8px; border-radius:99px; font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; background:rgba(124,106,255,0.12); color:var(--accent); margin-top:10px; }

/* ── How it works ── */
.how { background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:80px 24px; position:relative; }
.how-inner { max-width:800px; margin:0 auto; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px; margin-top:48px; }
.step { text-align:center; }
.step-num { width:36px; height:36px; border-radius:50%; background:var(--accent-glow); border:1px solid rgba(124,106,255,0.3); color:var(--accent); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.step h3 { font-size:14px; font-weight:600; margin-bottom:6px; }
.step p  { font-size:12px; color:var(--muted); line-height:1.6; }
.how-mascot { position:absolute; right:max(24px,calc(50% - 460px)); top:50%; transform:translateY(-50%); opacity:0.75; pointer-events:none; }
@media (max-width:1060px) { .how-mascot { display:none; } }

/* ── Pricing ── */
.pricing { padding:80px 24px; max-width:640px; margin:0 auto; text-align:center; }
.pricing-card { background:var(--card); border:1px solid var(--border-bright); border-radius:20px; padding:40px 36px; margin-top:40px; position:relative; overflow:hidden; }
.pricing-card::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:320px; height:180px; background:radial-gradient(ellipse at 50% 0%, rgba(124,106,255,0.18) 0%, transparent 70%); pointer-events:none; }
.price-amount { font-size:56px; font-weight:800; letter-spacing:-0.04em; color:var(--text); line-height:1; }
.price-label { font-size:13px; color:var(--muted); margin-top:6px; }
.price-trial { display:inline-flex; align-items:center; gap:6px; margin:14px 0 28px; padding:6px 14px; border-radius:99px; background:rgba(124,106,255,0.1); border:1px solid rgba(124,106,255,0.25); font-size:12px; font-weight:600; color:var(--accent); }
.price-features { list-style:none; text-align:left; margin-bottom:28px; display:flex; flex-direction:column; gap:10px; }
.price-features li { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text); }
.price-features li::before { content:'✓'; color:#34d399; font-weight:700; flex-shrink:0; }
.price-note { font-size:11px; color:var(--muted); margin-top:14px; }
.price-note s { opacity:0.6; }

/* ── Changelog ── */
.changelog { padding:80px 24px; max-width:720px; margin:0 auto; }
.changelog-list { margin-top:40px; }
.changelog-item { display:grid; grid-template-columns:110px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--border); }
.changelog-item:last-child { border-bottom:none; }
.cl-meta { padding-top:2px; }
.cl-version { font-size:12px; font-weight:700; color:var(--accent); }
.cl-date { font-size:11px; color:var(--muted); margin-top:4px; }
.cl-content h3 { font-size:14px; font-weight:600; color:var(--text); margin-bottom:8px; }
.cl-content ul { list-style:none; display:flex; flex-direction:column; gap:5px; }
.cl-content li { font-size:12px; color:var(--muted); padding-left:14px; position:relative; line-height:1.5; }
.cl-content li::before { content:'·'; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* ── FAQ ── */
.faq { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:80px 24px; }
.faq-inner { max-width:720px; margin:0 auto; }
.faq-list { margin-top:40px; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-q { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-size:14px; font-weight:600; color:var(--text); cursor:pointer; user-select:none; }
.faq-q svg { width:16px; height:16px; color:var(--muted); flex-shrink:0; transition:transform 0.2s; }
.faq-item.open .faq-q svg { transform:rotate(45deg); color:var(--accent); }
.faq-a { font-size:13px; color:var(--muted); line-height:1.75; max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease; }
.faq-item.open .faq-a { max-height:200px; padding-bottom:18px; }

/* ── Early Bird ── */
.early-bird { background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:80px 24px; overflow:hidden; }
.eb-inner { max-width:960px; margin:0 auto; display:grid; grid-template-columns:1fr 220px; gap:64px; align-items:center; }
@media(max-width:760px) { .eb-inner { grid-template-columns:1fr; gap:40px; } }
.eb-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:99px; background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.3); font-size:11px; font-weight:700; color:#fbbf24; letter-spacing:0.07em; text-transform:uppercase; margin-bottom:18px; }
.eb-dot { width:6px; height:6px; border-radius:50%; background:#fbbf24; animation:pulse 2s ease-in-out infinite; }
.early-bird h2 { font-size:clamp(26px,4vw,38px); font-weight:700; letter-spacing:-0.025em; margin-bottom:14px; color:var(--text); }
.early-bird .eb-body { font-size:14px; color:var(--muted); line-height:1.75; max-width:480px; }
.early-bird .eb-body strong { color:var(--text); }
.eb-perks { margin:20px 0 0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.eb-perks li { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:9px; }
.eb-perks li::before { content:'✦'; color:#fbbf24; font-size:10px; flex-shrink:0; }
.eb-robin-wrap { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px; }
.eb-robin-mascot { opacity:0; display:inline-block; filter:drop-shadow(0 8px 24px rgba(251,191,36,0.2)); }
.eb-robin-label { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#fbbf24; opacity:0; transition:opacity 0.4s 1.6s; }
.eb-robin-mascot.landed + .eb-robin-label { opacity:1; }
/* Wing flap */
@keyframes eb-wl { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-22deg)} }
@keyframes eb-wr { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(22deg)}  }
/* Fly-in arc */
@keyframes eb-fly-in {
  0%   { opacity:0; transform:translateX(180px) translateY(-55px) rotate(-14deg); }
  58%  { opacity:1; transform:translateX(6px)   translateY(7px)   rotate(4deg);  }
  76%  { opacity:1; transform:translateX(-3px)  translateY(-4px)  rotate(-1deg); }
  90%  { opacity:1; transform:translateX(1px)   translateY(1px)   rotate(0deg);  }
  100% { opacity:1; transform:translateX(0)     translateY(0)     rotate(0deg);  }
}

/* ── CTA ── */
.cta { text-align:center; padding:80px 24px 64px; }
.cta h2 { font-size:clamp(24px,4vw,36px); font-weight:700; letter-spacing:-0.02em; margin-bottom:12px; }
.cta p { font-size:15px; color:var(--muted); margin-bottom:40px; }
.mascot-gang { display:flex; align-items:flex-end; justify-content:center; gap:20px; margin-bottom:40px; }

/* ── Footer ── */
footer { border-top:1px solid var(--border); padding:28px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-left { font-size:12px; color:var(--muted); }
.footer-left a { color:var(--muted); text-decoration:none; }
.footer-left a:hover { color:var(--text); }
.footer-right { display:flex; gap:20px; }
.footer-right a { font-size:12px; color:var(--muted); text-decoration:none; transition:color 0.15s; }
.footer-right a:hover { color:var(--text); }

@media (max-width:600px) {
  nav { padding:16px 20px; }
  footer { padding:24px 20px; flex-direction:column; align-items:flex-start; }
  .privacy-strip { gap:16px; }
  .mascot-gang { gap:12px; }
  .changelog-item { grid-template-columns:1fr; gap:8px; }
}