/* ===================================================
   VEO AUTOMATION — DESIGN SYSTEM & STYLESHEET
   =================================================== */

/* ---- Custom Properties ---- */
:root {
  --c-primary:    #06b6d4;
  --c-primary-dk: #0891b2;
  --c-secondary:  #14b8a6;
  --c-accent:     #22d3ee;
  --c-bg:         #080810;
  --c-bg-card:    #0c1520;
  --c-text:       #ffffff;
  --c-text-2:     rgba(255,255,255,0.70);
  --c-text-muted: rgba(255,255,255,0.40);
  --c-border:     rgba(255,255,255,0.08);
  --c-border-2:   rgba(255,255,255,0.14);
  --c-error:      #f87171;
  --c-success:    #34d399;
  --c-warning:    #fbbf24;

  --max-w:    1200px;
  --pad-x:    clamp(1rem, 5vw, 2rem);
  --sec-y:    clamp(4rem, 8vw, 8rem);
  --gap:      1.5rem;
  --radius:   1rem;
  --radius-lg:1.5rem;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;

  --glow-cyan: 0 0 40px rgba(6,182,212,0.25);
  --shadow-card: 0 4px 32px rgba(0,0,0,0.45);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }
ul { list-style: none; }

/* ---- Typography ---- */
h1 { font-size: clamp(2.4rem,5vw,4rem);   font-weight:800; letter-spacing:-.03em; line-height:1.1; }
h2 { font-size: clamp(1.75rem,3vw,2.5rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; }
h3 { font-size: 1.25rem;  font-weight:700; line-height:1.3; }
h4 { font-size: 1.0625rem;font-weight:700; line-height:1.35;}
p  { color: var(--c-text-2); }

/* ---- Layout ---- */
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-x); }
.section    { padding: var(--sec-y) 0; }

.sec-header { text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec-header h2 { margin-bottom:.875rem; }
.sec-header p  { max-width:660px; margin:0 auto; font-size:1.0625rem; }

.divider {
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.12), transparent);
}

/* ---- Gradient text ---- */
.grad {
  background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.5rem; border-radius:var(--radius);
  font-weight:700; font-size:.9375rem; cursor:pointer;
  transition: all .2s ease; border:none; white-space:nowrap;
  text-decoration:none; font-family:var(--font);
}
.btn svg { width:20px; height:20px; flex-shrink:0; }

.btn-primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  color:#fff;
  box-shadow: 0 4px 24px rgba(6,182,212,.30);
}
.btn-primary:hover {
  background: linear-gradient(135deg,#22d3ee,#2dd4bf);
  transform:translateY(-2px);
  box-shadow: 0 8px 36px rgba(6,182,212,.45);
}

.btn-secondary {
  background: rgba(255,255,255,.05);
  color:#fff;
  border:1px solid var(--c-border-2);
}
.btn-secondary:hover {
  background: rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.30);
  transform:translateY(-2px);
}

.btn-white { background:#fff; color:var(--c-bg); font-weight:800; }
.btn-white:hover { background:rgba(255,255,255,.9); transform:translateY(-2px); }

.btn-outline-white {
  background:transparent; color:#fff;
  border:2px solid rgba(255,255,255,.55);
}
.btn-outline-white:hover {
  background:rgba(255,255,255,.08);
  border-color:#fff;
  transform:translateY(-2px);
}

.btn-lg { padding:1rem 2rem; font-size:1.0625rem; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; font-weight:800; letter-spacing:.04em;
  padding:.3rem .7rem; border-radius:999px;
}
.badge-cyan     { background:rgba(6,182,212,.10); border:1px solid rgba(6,182,212,.35); color:#67e8f9; }
.badge-teal     { background:rgba(20,184,166,.12); border:1px solid rgba(20,184,166,.35); color:#5eead4; }
.badge-purple   { background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.35); color:#c4b5fd; }
.badge-blue     { background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.35); color:#93c5fd; }
.badge-green    { background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.35); color:#6ee7b7; }
.badge-yellow   { background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.35); color:#fde68a; }
.badge-red      { background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.35); color:#fca5a5; }
.badge-pink     { background:rgba(236,72,153,.12); border:1px solid rgba(236,72,153,.35); color:#f9a8d4; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:1.125rem 0;
  transition: background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  background:rgba(8,8,16,.92);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:.75rem 0;
  border-bottom-color:rgba(255,255,255,.06);
}

.nav-inner {
  display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem;
}

.nav-logo {
  display:flex; align-items:center; gap:.625rem;
  font-weight:800; font-size:1.0625rem; color:#fff;
  flex-shrink:0;
}
.nav-logo-mark {
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.nav-logo-mark img { width:34px; height:34px; object-fit:contain; }

.nav-links {
  display:flex; align-items:center; gap:1.75rem;
  margin-left:auto;
}
.nav-links a {
  font-size:.9rem; font-weight:500;
  color:var(--c-text-2); transition:color .2s;
}
.nav-links a:hover { color:#fff; }

.nav-actions {
  display:flex; align-items:center; gap:.75rem; flex-shrink:0;
}

.nav-burger {
  display:none; background:none; border:none;
  color:#fff; cursor:pointer; padding:.25rem;
  border-radius:.5rem; transition:background .2s;
}
.nav-burger:hover { background:rgba(255,255,255,.08); }

/* Mobile nav */
@media (max-width:800px) {
  .nav-burger { display:flex; align-items:center; justify-content:center; }
  .nav-links {
    display:none; flex-direction:column; align-items:flex-start;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(8,8,16,.98); backdrop-filter:blur(20px);
    padding:1.5rem var(--pad-x) 2rem;
    border-bottom:1px solid var(--c-border);
    gap:1.25rem;
  }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:1.0625rem; }
  .nav-actions .btn-secondary { display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding:10.5rem 0 4rem;
}

/* Background layers */
.hero-bg { position:absolute; inset:0; pointer-events:none; }

.hero-glow-a {
  position:absolute; top:-240px; left:50%; transform:translateX(-50%);
  width:1000px; height:700px;
  background:radial-gradient(ellipse at center, rgba(6,182,212,.16) 0%, transparent 65%);
  animation:bgpulse 7s ease-in-out infinite;
}
.hero-glow-b {
  position:absolute; bottom:-80px; right:-160px;
  width:560px; height:560px;
  background:radial-gradient(ellipse, rgba(20,184,166,.1) 0%, transparent 65%);
  animation:bgpulse 9s ease-in-out infinite reverse;
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 70%);
}

@keyframes bgpulse {
  0%,100% { opacity:.7; }
  50%      { opacity:1; }
}

.hero-content {
  position:relative; text-align:center;
  max-width:880px; margin:0 auto;
}

.hero-eyebrow { display:inline-flex; margin-bottom:1.5rem; }

.hero h1 { margin-bottom:1.375rem; }
.hero h1 mark {
  background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; background-color:transparent;
}

.hero-sub {
  font-size:clamp(1rem,2vw,1.175rem);
  max-width:640px; margin:0 auto 2.5rem;
  color:var(--c-text-2);
}

.hero-btns {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; flex-wrap:wrap; margin-bottom:2rem;
}

.hero-trust {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.875rem 2rem; margin-bottom:1.875rem;
}
.trust-item {
  display:flex; align-items:center; gap:.4rem;
  font-size:.8125rem; color:var(--c-text-muted);
}

.hero-social-row {
  display:flex; align-items:center; justify-content:center;
  gap:.75rem; margin-bottom:3.5rem;
}
.hero-social-label {
  font-size:.75rem; color:var(--c-text-muted);
}

/* Extension UI Mockup */
.hero-mockup-wrap {
  position:relative; max-width:820px; margin:0 auto;
}
.hero-mockup-wrap::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:100px;
  background:linear-gradient(to top, var(--c-bg), transparent);
  pointer-events:none;
}

.ext-window {
  background:var(--c-bg-card);
  border:1px solid rgba(255,255,255,.1);
  border-radius:1.375rem;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.55), var(--glow-cyan);
}

.ext-titlebar {
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem 1rem;
  background:rgba(0,0,0,.35);
  border-bottom:1px solid var(--c-border);
}
.ext-dot { width:11px; height:11px; border-radius:50%; }
.ext-dot.red    { background:#ff5f57; }
.ext-dot.yellow { background:#febc2e; }
.ext-dot.green  { background:#28c840; }
.ext-titlebar-label {
  flex:1; text-align:center;
  font-size:.7rem; color:var(--c-text-muted);
  font-family:var(--mono);
}

.ext-body-wrap {
  display:grid; grid-template-columns:240px 1fr;
}
@media (max-width:640px) {
  .ext-body-wrap { grid-template-columns:1fr; }
  .ext-sidebar { display:none; }
}

.ext-sidebar {
  border-right:1px solid var(--c-border);
  padding:1rem;
  background:rgba(0,0,0,.2);
}
.ext-sidebar-logo {
  display:flex; align-items:center; gap:.5rem;
  font-weight:800; font-size:.875rem; margin-bottom:1rem;
  color:#fff;
}
.ext-sidebar-logo-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--c-primary);
  box-shadow:0 0 8px var(--c-primary);
}

.ext-mode-label {
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--c-text-muted);
  margin-bottom:.5rem;
}
.ext-mode-pills {
  display:flex; flex-direction:column; gap:.35rem;
}
.ext-pill {
  padding:.45rem .75rem; border-radius:.5rem;
  font-size:.75rem; font-weight:600; color:var(--c-text-2);
  cursor:pointer; transition:all .15s;
}
.ext-pill:hover { background:rgba(255,255,255,.05); }
.ext-pill.active {
  background:rgba(6,182,212,.12);
  color:var(--c-primary);
  border:1px solid rgba(6,182,212,.25);
}

.ext-settings {
  margin-top:1rem; padding-top:1rem;
  border-top:1px solid var(--c-border);
}
.ext-setting-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.5rem;
}
.ext-setting-label { font-size:.7rem; color:var(--c-text-muted); }
.ext-setting-val   { font-size:.7rem; color:var(--c-text-2); font-family:var(--mono); }

.ext-main { padding:1rem; }

.ext-run-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.875rem;
}
.ext-status-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .75rem; border-radius:999px;
  font-size:.7rem; font-weight:700;
  background:rgba(6,182,212,.12); color:var(--c-primary);
  border:1px solid rgba(6,182,212,.3);
}
.status-blink {
  width:6px; height:6px; border-radius:50%;
  background:var(--c-primary);
  animation:blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }

.ext-run-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .875rem; border-radius:.5rem;
  background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));
  font-size:.75rem; font-weight:700; color:#fff; border:none;
  cursor:pointer;
}

.queue-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.625rem;
}
.queue-title { font-size:.75rem; font-weight:700; color:#fff; }
.queue-meta  { font-size:.7rem; color:var(--c-text-muted); }

.queue-list { display:flex; flex-direction:column; gap:.35rem; }

.q-item {
  display:flex; align-items:center; gap:.625rem;
  padding:.55rem .75rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--c-border);
  border-radius:.625rem;
}

.q-num {
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; font-weight:800; flex-shrink:0;
}
.q-num.done    { background:rgba(52,211,153,.18); color:var(--c-success); }
.q-num.active  { background:rgba(6,182,212,.18);  color:var(--c-primary); }
.q-num.queued  { background:rgba(255,255,255,.06); color:var(--c-text-muted); }

.q-prompt {
  flex:1; font-size:.72rem; color:var(--c-text-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.q-right {
  display:flex; flex-direction:column; gap:.2rem;
  width:72px; flex-shrink:0;
}
.q-bar-bg {
  height:3px; border-radius:2px;
  background:rgba(255,255,255,.08); overflow:hidden;
}
.q-bar-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));
}
.q-pct {
  font-size:.6rem; text-align:right;
  font-family:var(--mono);
}
.q-pct.done   { color:var(--c-success); }
.q-pct.active { color:var(--c-primary); }
.q-pct.queued { color:var(--c-text-muted); }

/* ============================================================
   STATS BANNER
   ============================================================ */
.stats-strip {
  padding:3rem 0;
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  background:rgba(6,182,212,.03);
}
.stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2rem; text-align:center;
}
@media (max-width:480px) { .stats-grid { grid-template-columns:1fr; } }

.stat-val {
  font-size:clamp(2.5rem,6vw,3.75rem);
  font-weight:800; line-height:1;
  background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:.5rem;
}
.stat-lbl { font-size:.9375rem; color:var(--c-text-2); font-weight:500; }

/* ============================================================
   FEATURES GRID
   ============================================================ */
.feat-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
}
@media (max-width:900px) { .feat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px) { .feat-grid { grid-template-columns:1fr; } }

.feat-card {
  background:var(--c-bg-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:1.625rem;
  position:relative; overflow:hidden;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.feat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));
  opacity:0; transition:opacity .2s;
}
.feat-card:hover::before  { opacity:1; }
.feat-card:hover {
  border-color:rgba(6,182,212,.28);
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.feat-card.hl { border-color:rgba(6,182,212,.18); }
.feat-card.hl::before { opacity:.5; }

.feat-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; margin-bottom:.875rem; }
.feat-icon { font-size:1.875rem; line-height:1; }

.feat-title { font-size:1rem; font-weight:700; color:#fff; margin-bottom:.5rem; }
.feat-desc  { font-size:.85rem; color:var(--c-text-2); line-height:1.65; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps-list { display:flex; flex-direction:column; gap:1rem; max-width:780px; margin:0 auto; }

.step-item {
  display:grid; grid-template-columns:56px 1fr;
  gap:1.25rem; align-items:start;
  background:var(--c-bg-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  transition:border-color .2s, transform .2s;
}
.step-item:hover {
  border-color:rgba(6,182,212,.28);
  transform:translateX(4px);
}

.step-num-wrap {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.step-circle {
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.0625rem; font-weight:800; color:var(--c-primary);
  background:rgba(6,182,212,.1);
  border:1px solid rgba(6,182,212,.3);
  flex-shrink:0;
}
.step-icon-sm { font-size:1.375rem; }

.step-title { font-size:1.0625rem; font-weight:700; color:#fff; margin-bottom:.4rem; }
.step-desc  { font-size:.875rem; color:var(--c-text-2); line-height:1.65; }

/* ============================================================
   GUIDE SECTION
   ============================================================ */
.guide-wrap {
  max-width:820px; margin:0 auto;
}
.guide-wrap > * + * { margin-top:2.25rem; }

.guide-block h3 {
  color:var(--c-accent);
  margin-bottom:.875rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--c-border);
}
.guide-block p {
  font-size:.9375rem; line-height:1.78;
}
.guide-block p + p { margin-top:.875rem; }

/* ============================================================
   MODELS TABLE
   ============================================================ */
.models-cols {
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;
}
@media (max-width:640px) { .models-cols { grid-template-columns:1fr; } }

.models-group-lbl {
  font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--c-text-muted); margin-bottom:.875rem;
}

.model-row {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.25rem;
  background:var(--c-bg-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  margin-bottom:.625rem;
  transition:border-color .2s;
}
.model-row:hover { border-color:rgba(6,182,212,.3); }

.model-name {
  font-weight:700; font-size:.9rem;
  min-width:130px; flex-shrink:0;
}
.model-for {
  font-size:.8rem; color:var(--c-text-2);
}

/* ============================================================
   DOWNLOAD CTA
   ============================================================ */
.dl-cta {
  background:linear-gradient(135deg, rgba(6,182,212,.11), rgba(20,184,166,.11));
  border-top:1px solid rgba(6,182,212,.14);
  border-bottom:1px solid rgba(6,182,212,.14);
  text-align:center; position:relative; overflow:hidden;
}
.dl-cta::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 110%, rgba(6,182,212,.1), transparent);
  pointer-events:none;
}
.dl-cta h2 { margin-bottom:1rem; }
.dl-cta p  { margin-bottom:2.25rem; }

.cta-btns {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.375rem;
}
.cta-note { font-size:.8rem; color:rgba(255,255,255,.35); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap { max-width:760px; margin:0 auto; }

.faq-item {
  background:var(--c-bg-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  margin-bottom:.625rem;
  overflow:hidden;
}

.faq-q {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; width:100%; padding:1.25rem 1.5rem;
  background:none; border:none;
  color:#fff; font-size:.9375rem; font-weight:600;
  text-align:left; cursor:pointer;
  font-family:var(--font);
  transition:color .2s;
}
.faq-q:hover      { color:var(--c-accent); }
.faq-q[aria-expanded="true"] { color:var(--c-primary); }

.faq-chevron {
  width:20px; height:20px; flex-shrink:0;
  transition:transform .25s ease;
  color:var(--c-text-muted);
}
.faq-q[aria-expanded="true"] .faq-chevron {
  transform:rotate(180deg);
  color:var(--c-primary);
}

.faq-body {
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;
}
.faq-body.open { grid-template-rows:1fr; }
.faq-body-inner { overflow:hidden; }

.faq-a {
  padding:.875rem 1.5rem 1.375rem;
  font-size:.9rem; color:var(--c-text-2); line-height:1.72;
  border-top:1px solid var(--c-border);
}

/* ============================================================
   SOCIAL ICONS
   ============================================================ */
.social-icons {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.si {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--c-border);
  transition:all .15s ease; flex-shrink:0;
}
.si:hover {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  transform:scale(1.1);
}
.si svg {
  width:14px; height:14px;
  fill:rgba(255,255,255,.5);
  transition:fill .15s;
}
.si:hover svg { fill:#fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background:#050508;
  border-top:1px solid var(--c-border);
  padding:4rem 0 0;
}

.footer-grid {
  display:grid;
  grid-template-columns:1.7fr repeat(3,1fr);
}
.footer-grid {
  gap:2rem 2.5rem;
  margin-bottom:3rem;
}
@media (max-width:1024px) { .footer-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px)  { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:400px)  { .footer-grid { grid-template-columns:1fr; } }

.footer-col-head {
  font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--c-text-muted); margin-bottom:1.125rem;
}

.footer-brand p { font-size:.875rem; margin-bottom:.375rem; }
.footer-brand .ver { font-size:.775rem; color:var(--c-text-muted); margin-bottom:1.125rem; }
.footer-social-lbl { font-size:.7rem; color:var(--c-text-muted); margin-bottom:.5rem; }

.footer-nav { display:flex; flex-direction:column; gap:.5rem; }
.footer-nav a {
  font-size:.875rem; color:var(--c-text-2);
  display:flex; align-items:center; gap:.4rem;
  transition:color .2s;
}
.footer-nav a:hover { color:var(--c-accent); }

.footer-bottom {
  border-top:1px solid var(--c-border);
  padding:1.375rem 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.footer-copy { font-size:.8rem; color:var(--c-text-muted); }
.footer-btm-links { display:flex; align-items:center; gap:1.5rem; }
.footer-btm-links a {
  font-size:.8rem; color:var(--c-text-muted); transition:color .2s;
}
.footer-btm-links a:hover { color:var(--c-text-2); }

@media (max-width:600px) {
  .footer-bottom { flex-direction:column; text-align:center; }
  .footer-btm-links { justify-content:center; }
}

/* ============================================================
   INNER PAGES — SHARED
   ============================================================ */
.inner-hero {
  padding:9.5rem 0 3.5rem;
  text-align:center;
  border-bottom:1px solid var(--c-border);
  background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(6,182,212,.07) 0%, transparent 60%);
}
.inner-hero .badge  { margin-bottom:1.25rem; }
.inner-hero h1      { margin-bottom:.875rem; }
.inner-hero p       { font-size:1.0625rem; max-width:580px; margin:0 auto; }

.breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; color:var(--c-text-muted);
  margin-bottom:1.5rem; justify-content:center;
}
.breadcrumb a { color:var(--c-text-muted); transition:color .2s; }
.breadcrumb a:hover { color:var(--c-primary); }
.breadcrumb svg { width:12px; height:12px; flex-shrink:0; }

/* Prose (legal / about) */
.prose-wrap {
  max-width:760px; margin:0 auto;
  padding:3.5rem var(--pad-x);
}
.prose-wrap h2 {
  font-size:1.375rem; margin:2.5rem 0 1rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--c-border);
  color:#fff;
}
.prose-wrap h3 {
  font-size:1.125rem; margin:1.75rem 0 .625rem;
  color:var(--c-accent);
}
.prose-wrap p  {
  font-size:.9375rem; line-height:1.78;
  margin-bottom:1.125rem; color:var(--c-text-2);
}
.prose-wrap ul, .prose-wrap ol {
  margin:.875rem 0 1.125rem 1.5rem;
}
.prose-wrap li {
  font-size:.9375rem; line-height:1.7;
  color:var(--c-text-2); margin-bottom:.45rem;
}
.prose-wrap a { color:var(--c-accent); text-decoration:underline; text-underline-offset:3px; }
.prose-wrap a:hover { color:var(--c-primary); }

.last-updated {
  display:inline-block;
  font-size:.8125rem; color:var(--c-text-muted);
  padding:.5rem 1rem;
  background:rgba(255,255,255,.04);
  border-left:3px solid var(--c-primary);
  border-radius:0 .375rem .375rem 0;
  margin-bottom:2rem;
}

/* Permissions table */
.perm-table {
  width:100%; border-collapse:collapse; margin:1.25rem 0; font-size:.875rem;
  overflow:hidden; border-radius:.75rem;
  border:1px solid var(--c-border);
}
.perm-table th {
  padding:.75rem 1rem; text-align:left;
  background:rgba(255,255,255,.04);
  font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--c-text-muted);
  border-bottom:1px solid var(--c-border);
}
.perm-table td {
  padding:.875rem 1rem;
  border-bottom:1px solid var(--c-border);
  color:var(--c-text-2); font-size:.875rem; line-height:1.55;
  vertical-align:top;
}
.perm-table tr:last-child td { border-bottom:none; }
.perm-table td:first-child {
  font-family:var(--mono); font-size:.8rem; color:var(--c-primary);
  white-space:nowrap; width:160px;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-cards { max-width:780px; margin:0 auto; }
.about-card {
  background:var(--c-bg-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:2rem; margin-bottom:1.25rem;
  transition:border-color .2s;
}
.about-card:hover { border-color:rgba(6,182,212,.25); }
.about-card h2 { font-size:1.25rem; color:var(--c-accent); margin-bottom:.875rem; }
.about-card p  { font-size:.9375rem; line-height:1.78; }
.about-card p + p { margin-top:.75rem; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-section { max-width:820px; margin:0 auto; padding:3.5rem var(--pad-x); }
.contact-section > p { font-size:1.0625rem; margin-bottom:2.5rem; }

.contact-cards {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem; margin-bottom:2.5rem;
}
.contact-card {
  background:var(--c-bg-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  transition:border-color .2s, transform .2s;
}
.contact-card:hover { border-color:rgba(6,182,212,.3); transform:translateY(-2px); }
.cc-icon { font-size:2rem; margin-bottom:1rem; }
.cc-head { font-size:1rem; font-weight:700; color:#fff; margin-bottom:.375rem; }
.cc-val  { font-size:.9375rem; font-weight:700; color:var(--c-accent); display:block; margin-bottom:.5rem; }
.contact-card p { font-size:.875rem; }

.contact-social-wrap {
  background:var(--c-bg-card); border:1px solid var(--c-border);
  border-radius:var(--radius-lg); padding:1.75rem;
}
.contact-social-wrap h2 { font-size:1.125rem; margin-bottom:.5rem; }
.contact-social-wrap p  { font-size:.875rem; margin-bottom:1.25rem; }

/* ============================================================
   HELP PAGE
   ============================================================ */
.help-search-wrap {
  max-width:520px; margin:2rem auto 0; position:relative;
}
.help-search-wrap svg {
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--c-text-muted); pointer-events:none;
}
.help-search {
  width:100%; padding:.875rem 1.25rem .875rem 3rem;
  background:var(--c-bg-card);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius); color:#fff;
  font-size:.9375rem; font-family:var(--font);
  outline:none; transition:border-color .2s;
}
.help-search:focus { border-color:var(--c-primary); }
.help-search::placeholder { color:var(--c-text-muted); }

.help-cats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem; margin-bottom:3rem;
}
@media (max-width:700px) { .help-cats { grid-template-columns:1fr 1fr; } }
@media (max-width:400px) { .help-cats { grid-template-columns:1fr; } }

.help-cat {
  background:var(--c-bg-card); border:1px solid var(--c-border);
  border-radius:var(--radius-lg); padding:1.5rem;
  cursor:pointer; transition:all .2s; text-align:left;
}
.help-cat:hover { border-color:rgba(6,182,212,.3); transform:translateY(-2px); }
.help-cat-icon  { font-size:1.875rem; margin-bottom:.75rem; }
.help-cat h3    { font-size:.9375rem; margin-bottom:.35rem; }
.help-cat p     { font-size:.8125rem; }

/* ============================================================
   CHANGELOG PAGE
   ============================================================ */
.changelog-wrap { max-width:720px; margin:0 auto; padding:3.5rem var(--pad-x); }

.cl-entry {
  display:grid; grid-template-columns:24px 1fr;
  gap:1.5rem; margin-bottom:3rem; position:relative;
}
.cl-entry::before {
  content:''; position:absolute;
  left:11px; top:30px; bottom:-3rem;
  width:1px; background:var(--c-border);
}
.cl-entry:last-child::before { display:none; }

.cl-dot {
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--c-primary);
  background:var(--c-bg-card);
  box-shadow:0 0 14px rgba(6,182,212,.3);
  margin-top:.2rem; flex-shrink:0;
}
.cl-dot.current { background:var(--c-primary); }

.cl-meta {
  display:flex; align-items:center; gap:.875rem;
  flex-wrap:wrap; margin-bottom:.875rem;
}
.cl-ver   { font-size:1.125rem; font-weight:800; color:#fff; }
.cl-date  { font-size:.8rem; color:var(--c-text-muted); }

.cl-changes { display:flex; flex-direction:column; gap:.5rem; }
.cl-change {
  display:flex; align-items:flex-start; gap:.625rem;
  font-size:.875rem; color:var(--c-text-2); line-height:1.55;
}
.cl-tag {
  font-size:.65rem; font-weight:800; padding:.2rem .5rem;
  border-radius:.35rem; text-transform:uppercase;
  letter-spacing:.04em; flex-shrink:0; margin-top:.1rem;
}
.tag-new     { background:rgba(52,211,153,.15); color:var(--c-success); }
.tag-fix     { background:rgba(248,113,113,.15); color:var(--c-error); }
.tag-improve { background:rgba(6,182,212,.15); color:var(--c-primary); }
.tag-launch  { background:rgba(251,191,36,.15); color:var(--c-warning); }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.ann-bar {
  position:fixed; top:0; left:0; right:0; z-index:250;
  background:linear-gradient(135deg,rgba(6,182,212,.14),rgba(20,184,166,.12));
  border-bottom:1px solid rgba(6,182,212,.35);
  padding:.5rem 0; text-align:center;
  font-size:.8125rem; color:var(--c-text-2);
  transition: background .3s ease, border-color .3s ease;
}
.ann-bar.scrolled {
  background:rgba(8,8,16,1);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 2px 16px rgba(0,0,0,.5);
}
.ann-bar a { color:var(--c-accent); font-weight:700; }
.ann-bar a:hover { color:#fff; }
.ann-bar strong { color:#fff; }

/* ============================================================
   UTILITY
   ============================================================ */
.text-center { text-align:center; }
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ============================================================
   PRINT / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
}