/* ximator.com — global tokens & atoms */

/* ══════════════════════════════════════════════════════════════════════════════
   BASE RESET  (applies to every page that links styles.css)
   ══════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
button { cursor: pointer; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: var(--border-2); border-radius: 5px; }

:root {
  --bg: #0d0e10;
  --bg-2: #131418;
  --surface: #1c1f26;
  --surface-2: #242830;
  --border: #2e3340;
  --border-2: #3a404e;
  --text: #f3f3ee;
  --text-2: #c9c9c2;
  --mute: #8a8b86;
  --mute-2: #5d5f5b;
  --accent: #ffd400;
  --accent-2: #ffe96b;
  --accent-ink: #1a1500;
  --blue: #6aa7ff;
  --green: #7cd982;
  --red: #ff7766;
  --grid-line: rgba(255, 255, 255, 0.045);
  --grid-line-strong: rgba(255, 255, 255, 0.09);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.45);
  --card-shadow-hover: 0 8px 28px rgba(0,0,0,0.6);
}

/* ── LIGHT MODE (#12) ─────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-2: #ecedf0;
  --surface: #ffffff;
  --surface-2: #f0f1f4;
  --border: #d8dae0;
  --border-2: #c8cad2;
  --text: #0d0e10;
  --text-2: #3a3d44;
  --mute: #6b7280;
  --mute-2: #9ca3af;
  --accent-ink: #1a1500;
  --grid-line: rgba(0,0,0,0.05);
  --grid-line-strong: rgba(0,0,0,0.09);
}
[data-theme="light"] .bp-grid-light {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}

* { box-sizing: border-box; }

.font-display { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.015em; }
.font-body    { font-family: "Inter", system-ui, sans-serif; }
.font-mono    { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* —— Blueprint texture —— */
.bp-grid {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
.bp-grid-light {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
}

/* —— ximator.com logo —— */
.est-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: lowercase;
}
.est-logo .ai { color: var(--mute); }

/* —— Buttons —— */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 13px; font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: default;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.btn-yellow {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-yellow:hover { background: var(--accent-2); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}
.btn-ghost:hover { background: var(--surface); }
.btn-dark {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 6px; }
.btn-lg { height: 46px; padding: 0 20px; font-size: 14px; }

/* —— Pills, tags —— */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  background: var(--surface);
}
.pill-yellow { color: var(--accent); border-color: rgba(255,212,0,0.4); background: rgba(255,212,0,0.06); }
.pill-green  { color: var(--green); border-color: rgba(124,217,130,0.4); background: rgba(124,217,130,0.05); }
.pill-blue   { color: var(--blue); border-color: rgba(106,167,255,0.4); background: rgba(106,167,255,0.05); }
.pill-red    { color: var(--red); border-color: rgba(255,119,102,0.4); background: rgba(255,119,102,0.05); }
.pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* —— Cards / Surfaces —— */
.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}
.surface-2 {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.kbd {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  padding: 2px 5px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--mute);
}

/* —— Hazard stripe (used sparingly) —— */
.hazard {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 10px,
    #0d0e10 10px 20px
  );
}
.hazard-thin {
  height: 3px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 6px,
    var(--bg) 6px 12px
  );
}

/* —— Data table —— */
.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dtable th {
  text-align: left;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.dtable td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
}
.dtable tr:last-child td { border-bottom: 0; }
.dtable .num { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; text-align: right; }

/* —— Annotation callout (blueprint label style) —— */
.callout {
  position: absolute;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
}
.callout-line {
  position: absolute;
  background: var(--accent);
  height: 1px;
  transform-origin: left center;
}
.callout-dot {
  position: absolute;
  width: 7px; height: 7px;
  border: 1.5px solid var(--accent);
  background: var(--bg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* —— Scan line animation —— */
@keyframes bp-scan {
  0%   { transform: translateY(-10%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110%); opacity: 0; }
}
.scan-line {
  position: absolute; left: 0; right: 0; height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(255,212,0,0.25), transparent);
  animation: bp-scan 3.2s linear infinite;
  pointer-events: none;
}

/* —— Misc helpers —— */
.divider-h { height: 1px; background: var(--border); }
.divider-v { width: 1px; background: var(--border); }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; }

/* Sparkline-friendly */
.spark-bg { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* —— Mobile Nav Hamburger & Drawer —— */
.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 6px 9px;
  cursor: pointer;
  color: var(--text);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media(max-width:900px) {
  .nav-hamburger { display: flex; min-width: 44px; min-height: 44px; padding: 10px; }
  .theme-toggle { width: 44px; height: 44px; }
  .nav-drawer-close { min-width: 44px; min-height: 44px; padding: 10px 14px; }
  .nav-drawer a { min-height: 44px; display: flex; align-items: center; }
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 998;
}
.nav-overlay.open { display: block; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 270px;
  height: 100%;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer-close {
  align-self: flex-end;
  background: none;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 16px;
}
.nav-drawer a {
  display: block;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text-2);
  border-radius: 8px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
}
.nav-drawer a:hover { background: var(--surface); color: var(--text); }
.nav-drawer .drawer-divider { height: 1px; background: var(--border); margin: 10px 0; }
.nav-drawer .drawer-cta {
  margin-top: 8px;
  display: block;
  text-align: center;
  background: var(--accent);
  color: #000 !important;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 14px;
}

/* —— Scroll reveal (sitewide, toggled via IntersectionObserver) —— */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SHARED NAVIGATION
   Used by all marketing pages. tool-page.html has its own breadcrumb nav.
   ══════════════════════════════════════════════════════════════════════════════ */
.nav {
  display: flex;
  align-items: center;
  gap: 32px;           /* space between logo and nav-links */
  padding: 0 48px;
  height: 64px;
  border-bottom: 1px solid var(--border);
  background: rgba(13,14,16,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Push the last flex child (buttons/actions) to the far right on all pages */
.nav > *:last-child { margin-left: auto; }

[data-theme="light"] .nav { background: rgba(245,246,248,0.92); }

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo span { color: var(--mute); }
.nav-logo img { display: block; border-radius: 8px; object-fit: cover; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13.5px;
  font-family: "Inter", sans-serif;
  flex-shrink: 0;
}
.nav-links a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;   /* ensure actions always go right even with extra wrappers */
}

/* Theme toggle button — consistent across all pages */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  background: none;
  cursor: pointer;
  color: var(--text-2);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--surface); color: var(--text); }

/* Hide nav-links and ghost button at mobile breakpoint */
@media (max-width: 900px) {
  .nav { padding: 0 20px; gap: 12px; }
  .nav-links { display: none !important; }
  .nav-actions .btn-gh,
  .nav .btn-gh { display: none; }   /* hide secondary "Sign in" btn on mobile */
  /* Bare Log in / Start free / Get started CTAs sit outside .nav-actions on
     most marketing pages (direct children of .nav, or wrapped in an unnamed
     div) — they're already duplicated in the hamburger drawer, so hide them
     here to stop them pushing the hamburger button off the right edge.
     !important needed since some of these links carry an inline display style. */
  .nav a[href^="/signin"] { display: none !important; }
}
@media (max-width: 480px) {
  .nav { height: 56px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT SYSTEM
   ══════════════════════════════════════════════════════════════════════════════ */

/* Max-width container */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.wrap-lg { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.wrap-sm { max-width: 760px; margin: 0 auto; padding: 0 48px; }

/* Section vertical spacing */
.section     { padding: 72px 0; }
.section-sm  { padding: 48px 0; }
.section-lg  { padding: 96px 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   GRID & FLEX UTILITIES
   ══════════════════════════════════════════════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }

/* Gap scale (8px base) */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-10 { gap: 40px; }
.gap-12 { gap: 48px; }

/* ══════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY SCALE
   ══════════════════════════════════════════════════════════════════════════════ */
.text-hero  { font-family:"Space Grotesk",system-ui,sans-serif; font-weight:700; font-size:52px; line-height:1.1; letter-spacing:-0.02em; }
.text-h1    { font-family:"Space Grotesk",system-ui,sans-serif; font-weight:700; font-size:40px; line-height:1.15; letter-spacing:-0.015em; }
.text-h2    { font-family:"Space Grotesk",system-ui,sans-serif; font-weight:600; font-size:28px; line-height:1.2; letter-spacing:-0.01em; }
.text-h3    { font-family:"Space Grotesk",system-ui,sans-serif; font-weight:600; font-size:20px; line-height:1.3; }
.text-body  { font-family:"Inter",system-ui,sans-serif; font-size:15px; line-height:1.65; }
.text-sm    { font-size:13px; line-height:1.55; }
.text-xs    { font-size:11.5px; line-height:1.5; }
.text-mono  { font-family:"IBM Plex Mono",ui-monospace,monospace; }

.text-primary   { color: var(--text); }
.text-secondary { color: var(--text-2); }
.text-muted     { color: var(--mute); }
.text-accent    { color: var(--accent); }
.text-center    { text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════════
   CARD BASE (unified — replaces .testimonial-card, .stat-card, .plan-card, etc.)
   ══════════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-2);
  box-shadow: var(--card-shadow-hover);
}
.card-sm   { padding: 16px; border-radius: 10px; }
.card-lg   { padding: 32px; border-radius: 14px; }
.card-accent { border-color: rgba(255,212,0,0.4); background: rgba(255,212,0,0.04); }
.card-accent:hover { border-color: rgba(255,212,0,0.65); }

/* ══════════════════════════════════════════════════════════════════════════════
   HERO SECTIONS (standardized across marketing pages)
   ══════════════════════════════════════════════════════════════════════════════ */
.page-hero {
  padding: 72px 48px 56px;
  text-align: center;
}
.page-hero-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 16px 0 20px;
}
.page-hero-sub {
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto 36px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER VARIANTS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Simple one-line footer (blog, templates, tools-list, etc.) */
footer.footer-bar,
.footer-bar,
.foot {
  border-top: 1px solid var(--border);
  padding: 28px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--mute);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bar a, .foot a { color: var(--mute); text-decoration: none; transition: color 0.15s; }
.footer-bar a:hover, .foot a:hover { color: var(--text-2); }
.footer-bar .footer-links,
.foot .foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-copy { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--mute); }

/* Full columnar footer (Homepage, Pricing) */
.footer-full {
  padding: 56px 48px 32px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 48px;
}
.footer-col-title {
  font-size: 10.5px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: 13.5px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mute);
  flex-wrap: wrap;
  gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTON ALIASES (backwards-compat for legacy class names used in HTML)
   Maps old .btn-yl / .btn-y / .btn-gh onto the canonical system above.
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-yl, .btn-y {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 24px;
  font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600;
  border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; letter-spacing: 0.005em;
  background: var(--accent); color: var(--accent-ink);
  text-decoration: none;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-yl:hover, .btn-y:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,212,0,0.35);
}

.btn-gh {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 24px;
  font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500;
  border-radius: 8px; border: 1px solid var(--border-2); cursor: pointer;
  white-space: nowrap; letter-spacing: 0.005em;
  background: transparent; color: var(--text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn-gh:hover { background: var(--surface); border-color: var(--border-2); transform: translateY(-1px); }

/* Nav-sized compact buttons (used in nav bar) */
.btn-yl.btn-sm, .btn-y.btn-sm, .btn-gh.btn-sm {
  height: 34px; padding: 0 14px; font-size: 13px; border-radius: 6px;
}
/* Extra-large CTAs */
.btn-yl.btn-lg, .btn-y.btn-lg, .btn-gh.btn-lg {
  height: 52px; padding: 0 28px; font-size: 15px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SPACING HELPERS
   ══════════════════════════════════════════════════════════════════════════════ */
.mt-0 { margin-top:0; }     .mb-0 { margin-bottom:0; }
.mt-2 { margin-top:8px; }   .mb-2 { margin-bottom:8px; }
.mt-4 { margin-top:16px; }  .mb-4 { margin-bottom:16px; }
.mt-6 { margin-top:24px; }  .mb-6 { margin-bottom:24px; }
.mt-8 { margin-top:32px; }  .mb-8 { margin-bottom:32px; }
.mt-12 { margin-top:48px; } .mb-12 { margin-bottom:48px; }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM  (3 breakpoints, all pages use these)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .wrap, .wrap-lg, .wrap-sm { padding: 0 32px; }
  .page-hero { padding: 56px 32px 48px; }
  .page-hero-title { font-size: 42px; }
  .text-hero { font-size: 42px; }
  .footer-full { padding: 48px 32px 28px; }
  .footer-bar,
  .foot        { padding: 24px 32px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile large (≤ 768px) ── */
@media (max-width: 768px) {
  .nav { padding: 0 16px; height: 56px; }
  .wrap, .wrap-lg, .wrap-sm { padding: 0 16px; }
  .section    { padding: 48px 0; }
  .section-lg { padding: 64px 0; }
  .page-hero  { padding: 48px 16px 40px; }
  .page-hero-title { font-size: 34px; }
  .page-hero-sub   { font-size: 15px; }
  .text-hero  { font-size: 34px; }
  .text-h1    { font-size: 30px; }
  .text-h2    { font-size: 22px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-full  { padding: 40px 16px 24px; }
  .footer-bar,
  .foot         { padding: 20px 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .card-lg { padding: 24px; }
}

/* ── Mobile small (≤ 480px) ── */
@media (max-width: 480px) {
  .page-hero-title { font-size: 28px; }
  .text-hero  { font-size: 28px; }
  .text-h1    { font-size: 26px; }
  .footer-grid { grid-template-columns: 1fr; }
  .card { padding: 18px; }
  .btn-lg { height: 42px; padding: 0 18px; font-size: 13.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN POLISH — Gradient text, section atoms, animations
   ══════════════════════════════════════════════════════════════════════════════ */

/* Gradient accent text — use on h1 span for hero headings */
.text-gradient {
  background: linear-gradient(135deg, var(--accent) 0%, #ffb347 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Yellow glow on accent-colored elements */
.glow-accent {
  box-shadow: 0 0 24px rgba(255,212,0,0.2), 0 0 48px rgba(255,212,0,0.08);
}

/* Subtle inner border highlight at top of cards (glass-like) */
.card-glass {
  background: linear-gradient(145deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-top-color: var(--border-2);
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Section divider line with dot */
.section-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  color: var(--mute);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.section-rule::before, .section-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Badge/pill improvements */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
}
.badge-yellow { background: var(--accent); color: var(--accent-ink); }
.badge-outline { border: 1px solid var(--border-2); color: var(--mute); }
.badge-green { background: rgba(124,217,130,0.12); color: var(--green); border: 1px solid rgba(124,217,130,0.3); }

/* Fade-up animation for page sections */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-up { animation: fade-up 0.45s ease both; }
.animate-up-1 { animation-delay: 0.05s; }
.animate-up-2 { animation-delay: 0.12s; }
.animate-up-3 { animation-delay: 0.2s; }

/* Shine sweep on CTA buttons (optional, add class manually) */
@keyframes btn-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Light mode card shadow ── */
[data-theme="light"] {
  --card-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
  --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.12), 0 12px 32px rgba(0,0,0,0.08);
}
[data-theme="light"] .card { border-color: var(--border); }
[data-theme="light"] .card:hover { border-color: var(--border-2); }