/* base.css — resets, tokens, typography, buttons, utilities */
:root{
  --bg:#f6f7f9; 
  --text:#0f172a; 
  --muted:#6b7280; 
  --card:#ffffff; 
  --border:#e5e7eb;
  --brand:#0f172a;
  --btn-bg: var(--brand);
  --btn-fg: #ffffff;
  --space: clamp(14px, 1.6vw, 24px);
  --radius: 20px;
  --shadow: 0 14px 30px rgba(0,0,0,.10);
  --maxw: 1180px;
  --grad-a: rgba(99,102,241,.45);
  --grad-b: rgba(167,139,250,.45);
  --card-glow: 0 18px 44px rgba(0,0,0,.14);
}
:root[data-theme="dark"]{
  --bg:#0b0e12; 
  --text:#e5e7eb; 
  --muted:#9ca3af; 
  --card:#12161b; 
  --border:#242a33;
  --brand:#e5e7eb;
  --btn-bg:#e5e7eb;
  --btn-fg:#0b0e12;
  --shadow: 0 14px 30px rgba(0,0,0,.30);
  --grad-a: rgba(139,92,246,.45);
  --grad-b: rgba(167,139,250,.45);
  --card-glow: 0 18px 48px rgba(0,0,0,.40);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font:clamp(16px,1.05vw,18px)/1.65 system-ui,-apple-system,Segoe UI,Inter,Roboto,Helvetica,Arial}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(var(--maxw), 92vw); margin:0 auto}
.muted{color:var(--muted)}
h1,h2,h3{text-align:center}
.subhead{margin:.35rem auto 1.2rem;color:var(--muted);text-align:center;max-width:80ch}
.btn{display:inline-flex;align-items:center;gap:.55rem;background:var(--btn-bg);color:var(--btn-fg);
  padding:.9rem 1.25rem;border-radius:16px;border:0;cursor:pointer;font-weight:700;letter-spacing:.2px;box-shadow:var(--shadow)}
/* .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none} */

/* Base ghost */
.btn.ghost{
  border: 1px solid var(--border);
  box-shadow: none;
  transition: box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Light theme: solid white for contrast on light backgrounds/images */
:root:not(.dark) .btn.ghost {
  background: #cecece;
  color: #0f172a; /* dark text */
}

/* Dark theme: subtle translucent panel for contrast on dark */
.dark .btn.ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
}

/* Hover / focus */
.btn.ghost:hover{
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
}
.btn.ghost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--grad-a) 22%, transparent);
}

.section{padding:calc(var(--space)*2.2) 0;border-bottom:1px solid var(--border)}
footer{padding:calc(var(--space)*1.6) 0;text-align:center;color:var(--muted)}

.pattern-diag{
  position:relative; overflow:hidden;
  background-image: repeating-linear-gradient(45deg, rgba(99,102,241,.06) 0, rgba(99,102,241,.06) 8px, transparent 8px, transparent 16px);
}
.pattern-diag .container{position:relative; z-index:1}

.pattern-softgrad{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(99,102,241,.10), transparent 60%),
              radial-gradient(1200px 600px at 100% 20%, rgba(167,139,250,.10), transparent 60%);
}

.row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}

input { color: var(--text)}