/* ============================================================
   LLM Data Analytics Agent — Monochrome (black & white) Theme
   Version: 1.0.0
   ============================================================ */

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════
   DATAGENT — THE ONE PALETTE
   ────────────────────────────────────────────────────────────────────
   This is the ONLY place a colour is defined for the marketing site.
   style.css is linked first on every page, so this block always wins;
   pro.css and premium.css consume these tokens and never redefine one.

   THE SITE IS DARK ONLY. There is no light theme: every value below is
   tuned against the near-black surface (#070707).

   THE SITE IS MONOCHROME. Every decorative colour is a NEUTRAL GREY, and
   the greys are separated by LIGHTNESS rather than by hue. That is the
   whole point of the brand: the product is local-first, offline and
   private, and a page with no colour in it says that before a word is
   read.

   Each value below is the ORIGINAL colour converted to the neutral of the
   same relative luminance, so every light/dark relationship the design
   was built on survives the conversion untouched.

   THE ONE EXCEPTION — the four STATUS hues. A green tick and a red cross
   that are the same grey are worse than useless, so status keeps a
   colour, muted to a low-chroma tint. Every status state also carries a
   glyph, a shape or a label, so the state is readable with the colour
   removed entirely.

   BRAND RAMP — neutral, separated by lightness
     --primary       grey    · borders, brand marks, brand hairlines
     --primary-hi    grey    · headings, hover states (light)
     --primary-deep  grey    · the solid primary fill (near-white)
     --accent        grey    · small accents, glows, thin strokes
     --accent-hi     grey    · text sitting on a saturated fill
     --accent-soft   grey    · LARGE fills and body text on a fill (muted)
     --emphasis      grey    · RARE emphasis only (one word, one chip)
     --emphasis-hi   grey    · the light partner of --emphasis
     --pink          grey    · RARE emphasis only (gradient endpoint)
     --success       green   · status only, always with a non-colour cue

   THE INVERTED CTA
     --primary-deep is near-white, so the primary button's label is
     --text-inverse (near-black). The strongest action on the page is the
     only thing that inverts. It reads at a glance on a dark surface.

   SURFACE RAMP — dark, five steps
     --surface        the page surface
     --surface-2      raised panel / alternate band
     --surface-3      card
     --surface-4      elevated card (hover)
     --surface-deep   floor: footer, code blocks, page wipe
     --surface-violet / -mint / -peach   the three band surfaces
     --glass / --glass-2 / --glass-3     translucent glass fills
     --line / --line-2 / --line-glow     hairlines

   TEXT RAMP
     --text       body copy + headings
     --text-2     secondary copy
     --text-muted meta, captions, table labels
     --text-inverse   text ON a light surface (the inverted CTA)

   LINKS
     --link / --link-hover / --link-visited  — a colour of its own, so a
     link never reads as body text and a visited link never disappears.
     Prose links are underlined: in monochrome the underline, not the hue,
     is what says "this is a link".

   STATUS
     --success / --warning / --danger / --info (+ the *-bg tints).
     Every status colour is paired with a glyph, a shape or a label so the
     state is readable without relying on hue.

   GRADIENTS
     The eleven tokens below are the only gradient literals in the site,
     and every stop in every one of them is a tone.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ramp — neutral, separated by LIGHTNESS not by hue ─────── */
  --primary:       #7b7b7b;  /* grey — borders, marks, hairlines        */
  --primary-hi:    #9d9d9d;  /* grey, light — headings, hover states   */
  --primary-deep:  #f2f2f2;  /* grey, near-white — the solid CTA fill   */
  --accent:        #c1c1c1;  /* grey — small accents, glows            */
  --accent-hi:     #d6d6d6;  /* grey, light — text on a saturated fill */
  --accent-soft:   #adadad;  /* grey, muted — LARGE fills, long text   */
  --emphasis:      #a9a9a9;  /* grey — RARE emphasis only              */
  --emphasis-hi:   #bdbdbd;
  --emphasis-soft: #9f9f9f;
  --pink:          #9f9f9f;  /* grey — RARE emphasis only              */
  --pink-soft:     #989898;
  --success:       #a2c3a7;  /* green — status only, muted             */
  --text:          #f4f4f4;  /* the near-white                         */

  /* ── Surface ramp (dark only) ───────────────────────────────────── */
  --surface:        #070707;  /* THE page surface                      */
  --surface-2:      #0a0a0a;  /* raised panel / alt band                */
  --surface-3:      #0d0d0d;  /* card                                  */
  --surface-4:      #141414;  /* elevated card (hover)                  */
  --surface-deep:   #040404;  /* floor: footer, code, page wipe         */
  --surface-violet: #0d0d0d;  /* band surface (the name is legacy)        */
  --surface-mint:   #121212;  /* band surface (the name is legacy)        */
  --surface-peach:  #0f0f0f;  /* band surface (the name is legacy)        */
  --glass:          rgba(255, 255, 255, 0.045);
  --glass-2:        rgba(255, 255, 255, 0.072);
  --glass-3:        rgba(255, 255, 255, 0.10);
  --line:           rgba(255, 255, 255, 0.09);
  --line-2:         rgba(255, 255, 255, 0.18);
  --line-glow:      rgba(157, 157, 157, 0.35);

  /* ── Text ramp ──────────────────────────────────────────────────── */
  --text-2:         #b1b1b1;  /* secondary copy                         */
  --text-muted:     #868686;  /* meta, captions, table labels           */
  --text-inverse:   #070707;  /* text ON a light surface                */

  /* ── Links ──────────────────────────────────────────────────────── */
  --link:           #ffffff;  /* unmistakably a link, 11.9:1           */
  --link-hover:     #ffffff;
  --link-visited:   #bfbfbf;  /* still reads as a link, 10.7:1          */

  /* ── Status (always with a second, non-colour cue) ─────────────── */
  --success-bg:     rgba(154, 190, 160, 0.14);
  --warning:        #c7ae7d;
  --warning-bg:     rgba(195, 168, 116, 0.14);
  --danger:         #b07474;
  --danger-bg:      rgba(169, 102, 102, 0.14);
  --info:           #7386a4;
  --info-bg:        rgba(114, 133, 163, 0.14);

  /* ── Gradients — the ONLY gradient literals in the site ─────────── */
  /* violet ramp: fills, marks, progress bars (white text stays ≥5.7:1) */
  --grad-brand:    linear-gradient(120deg, #585858 0%, #676767 100%);
  /* the warm ramp: gradient TEXT and rare accent hairlines only       */
  --grad-accent:   linear-gradient(115deg, #9d9d9d 0%, #9f9f9f 52%, #a9a9a9 100%);
  /* one tinted-surface ramp; --tint carries the per-card wash         */
  --grad-surface:  linear-gradient(160deg, var(--tint, rgba(255, 255, 255, 0.06)), rgba(255, 255, 255, 0.035) 70%);
  /* the hero aurora: one violet core fading out through the accent    */
  --grad-aurora:   radial-gradient(circle at 26% 32%, rgba(123, 123, 123, 0.42), rgba(186, 186, 186, 0.10) 52%, transparent 72%);
  /* the technical lattice                                            */
  --grad-grid:     linear-gradient(rgba(123, 123, 123, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 123, 123, 0.055) 1px, transparent 1px);
  /* the fade that lets the lattice dissolve (mask-image)             */
  --grad-mask:     radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 80%);
  /* the 1px gradient hairline mask (mask-composite: exclude)         */
  --grad-mask-line: linear-gradient(#000 0 0);
  /* the readability veil that sits over the WebGL stage              */
  --grad-scrim:     linear-gradient(180deg, rgba(5, 5, 5, 0.46) 0%, rgba(5, 5, 5, 0.04) 30%, rgba(5, 5, 5, 0.16) 66%, rgba(5, 5, 5, 0.48) 100%);
  /* one ambient orb; --orb-tint carries the wash                     */
  --grad-orb:      radial-gradient(closest-side, var(--orb-tint, rgba(123, 123, 123, 0.30)), transparent 72%);
  /* one pointer spotlight; --spot-size / --spot-alpha carry the rest  */
  --grad-spot:     radial-gradient(var(--spot-size, 300px) circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, var(--spot-alpha, 0.14)), transparent 68%);
  /* the button sheen                                                  */
  --grad-sheen:    linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);

  /* ── Legacy aliases ───────────────────────────────────────────────
     The old layer namespaces are kept as one-line pointers so the
     stylesheets and scripts written against them keep working — but the
     VALUE behind each name now lives in exactly one place (above).
     website/js/billing.js reads --border / --text-secondary;
     website/css/pages-motion.css reads --px-ease / --px-grad-hot.      */
  --border:         var(--line);
  --text-secondary: var(--text-2);
  --primary-light:  var(--primary-hi);
  --accent-pink:    var(--pink);
  --bg-card:        var(--surface-3);
  --px-grad-hot:    var(--grad-accent);
  --px-ease:        var(--ease-out);
  --da-violet:      var(--primary);
  --da-ink:         var(--surface-deep);
  /* Runtime value published by js/fx-core.js on :root. */
  --fx-scroll: 0;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --radius:    999px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --radius-xl: 38px;

  /* ── Elevation + glow ───────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px -3px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.9), 0 2px 10px -6px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 40px 90px -40px rgba(123, 123, 123, 0.55), 0 10px 30px -18px rgba(0, 0, 0, 0.9);
  --glow-primary: 0 0 44px -8px rgba(123, 123, 123, 0.55);
  --glow-accent:  0 0 44px -8px rgba(191, 191, 191, 0.45);
  --glow-strong:  0 40px 90px -40px rgba(123, 123, 123, 0.55), 0 10px 30px -18px rgba(0, 0, 0, 0.9);
  --inset-top:    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ── Type ───────────────────────────────────────────────────────── */
  --font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', 'Arial Black', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-organic:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-organic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:          cubic-bezier(0.4, 0.01, 0.2, 1);
  --dur-fast: 140ms;
  --dur-med:  260ms;
  --dur-slow: 380ms;
  --persp: 1400px;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--surface-deep);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--surface-deep); }
::-webkit-scrollbar-thumb { background: var(--primary-deep); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

body {
  font-family: var(--font);
  background: var(--surface-deep);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
}

::selection {
  background: var(--primary);
  color: var(--text-inverse);
}

/* ── Links ───────────────────────────────────────────────────────────
   Links get a colour of their own (--link) so they never read as body
   text, and a visited colour that still reads as a link. The rules are
   wrapped in :where() so they carry no specificity: every component
   (buttons, nav, footer, cards) keeps its own colour.                 */
:where(a) {
  color: var(--link);
  text-decoration: none;
  transition: color var(--transition);
}
:where(a:visited) { color: var(--link-visited); }
:where(a:hover) { color: var(--link-hover); }

/* Inline links inside running copy are underlined — that is the cue that
   survives when the colour cannot be seen. */
.main-content p a,
.main-content li a,
.main-content dd a,
.main-content td a,
.main-content h1 a,
.main-content h2 a,
.main-content h3 a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.main-content p a:hover,
.main-content li a:hover,
.main-content dd a:hover,
.main-content td a:hover,
.main-content h1 a:hover,
.main-content h2 a:hover,
.main-content h3 a:hover {
  text-decoration-color: var(--link);
}

img { max-width: 100%; display: block; }

/* ── Animated Background ───────────────────────────────────── */
.bg-grid {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image:
    var(--grad-grid);
  background-size: 60px 60px;
}

.bg-orbs {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-orbs::before,
.bg-orbs::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: orbFloat 20s ease-in-out infinite;
}

.bg-orbs::before {
  width: 600px; height: 600px;
  --orb-tint: rgba(123, 123, 123, 0.24);
  background: var(--grad-orb);
  top: -200px; right: -200px;
}

.bg-orbs::after {
  width: 500px; height: 500px;
  --orb-tint: rgba(119, 119, 119, 0.16);
  background: var(--grad-orb);
  bottom: -150px; left: -150px;
  animation-delay: -10s;
}

/* ══════════════════════════════════════════════════════════════════════
   THE HERO FILM
   ──────────────────────────────────────────────────────────────────────
   A monochrome dashboard loop behind the lattice and the hero copy.

   It REPLACES the WebGL stage on the home page - fx-webgl.js skips the
   canvas when a [data-hero-film] is present - because two full-viewport
   motion layers behind one hero is a bug, not a design.

   It sits FIRST in the stacking order, so the lattice and the ambient
   orbs still overlay it and the clip reads as a world behind the site
   rather than as a video pasted on top of it.

   saturate(0) is the belt-and-braces: the clip is already grey, and no
   future replacement of the file may introduce a hue.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   THE GLYPHS
   ──────────────────────────────────────────────────────────────────────
   The site's icon language is SVG, not emoji: a colour emoji is a hue on
   a black-and-white page, and a hue that is not part of the palette reads
   as an oversight rather than as an accent.

   Every glyph is a 24x24 line icon sized in em, so it takes the
   font-size of whatever it sits in - a card tile, a table cell, a heading
   - exactly as the emoji it replaced did.  The stroke, the fill and the
   weight all live here, so the whole set can be restyled in one place.
   ══════════════════════════════════════════════════════════════════════ */
.glyph {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-film {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  filter: saturate(0);
  opacity: 0;
  transition: opacity 1.6s var(--ease-soft);
}

.hero-film.is-live { opacity: 0.34; }

/* The film is motion, so it goes away when motion goes away. */
html.fx-reduced .hero-film { display: none; }

/* While the film is playing the ambient orbs step back, or they wash it
   out.  They come straight back up if the clip never plays. */
body.fx-film-live .bg-orbs::before,
body.fx-film-live .bg-orbs::after { opacity: 0.3 !important; }

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* ── Navigation ────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 2rem;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(5, 5, 5, 0.75);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(98, 98, 98, 0.1);
  transition: all var(--transition);
}

.navbar.scrolled {
  background: rgba(5, 5, 5, 0.92);
  border-bottom-color: rgba(100, 100, 100, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.nav-logo-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: white;
  box-shadow: var(--glow-primary);
}

.nav-logo span {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  background: rgba(98, 98, 98, 0.1);
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--primary-hi);
  border-radius: 1px;
}

.nav-cta {
  padding: 10px 24px !important;
  background: var(--primary-deep) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 15px rgba(100, 100, 100, 0.3);
  transition: all var(--transition) !important;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 25px rgba(101, 101, 101, 0.5) !important;
  background: var(--primary-deep) !important;
  filter: brightness(1.16);
}

.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}

.nav-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--transition);
}

.nav-mobile-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Main Content ──────────────────────────────────────────── */
.main-content {
  position: relative;
  z-index: 1;
  padding-top: 72px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: 100px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(98, 98, 98, 0.1);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.section-title .gradient-text {
  color: var(--primary-hi);
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-2);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ── Hero Section ──────────────────────────────────────────── */
.hero {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 2rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: var(--grad-aurora);
  border-radius: 50%;
  animation: heroGlow 8s ease-in-out infinite;
}

@keyframes heroGlow {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(99, 99, 99, 0.12);
  border: 1px solid rgba(100, 100, 100, 0.25);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 32px;
  animation: fadeInUp 0.8s ease;
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(125, 171, 133, 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); }
}

.hero-title {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
  animation: fadeInUp 0.8s ease 0.1s both;
}

.hero-title .line {
  display: block;
}

.hero-title .gradient {
  color: var(--primary-hi);
}

.hero-desc {
  font-size: 1.2rem;
  color: var(--text-2);
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.8;
  animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease 0.3s both;
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-top: 64px;
  animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-stat {
  text-align: center;
}

.hero-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-hi);
}

.hero-stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.hero-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--line);
}

/* ── Buttons ─────────────────────────────────────────────────────────
   ONE base rule (.btn). Everything else is a modifier, and the three
   action levels are visually unmistakable:

     .btn-primary / .btn-on-dark  solid violet fill + light border
     .btn-secondary               outline, no fill
     .btn-ghost                   quiet glass, no strong fill
     .btn-tertiary / .btn-text    text only, no fill, no border

   The primary fill is --primary-deep (3.5:1 against the surface, 5.2:1
   against its own near-white text) with a --primary-hi border, so it
   can never be mistaken for the page or for a secondary action.      */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 34px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line-2);
  background: var(--glass);
  color: var(--text);
  backdrop-filter: blur(10px);
  box-shadow: var(--inset-top);
  transition: transform 160ms var(--ease-spring),
              box-shadow var(--dur-med) var(--ease-out-organic),
              background var(--dur-fast) var(--ease-out-organic),
              border-color var(--dur-fast) var(--ease-out-organic),
              color var(--dur-fast) var(--ease-out-organic);
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--line-glow);
}

.btn:active { transform: scale(0.96); }

/* The focus ring is an accessibility requirement, not a preference. */
.btn:focus-visible,
a:focus-visible,
.toast-close:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Primary — the one filled action. */
.btn-primary {
  background: var(--primary-deep);
  border-color: var(--primary-hi);
  color: var(--text-inverse);
  box-shadow: 0 12px 32px -12px rgba(102, 102, 102, 0.85), var(--inset-top);
}
.btn-primary:hover {
  background: var(--primary-deep);
  border-color: var(--text-inverse);
  color: var(--text-inverse);
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -14px rgba(102, 102, 102, 0.95), var(--inset-top);
}
.btn-primary:active { transform: translateY(0); }

/* Secondary — an outline. Never a filled violet. */
.btn-secondary {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text);
}
.btn-secondary:hover {
  background: var(--glass-2);
  border-color: var(--line-glow);
  color: var(--text);
}

/* Ghost — a quiet tinted surface, clearly below primary. */
.btn-ghost {
  background: var(--glass);
  border-color: var(--line);
  color: var(--text-2);
}
.btn-ghost:hover {
  background: var(--glass-2);
  border-color: var(--line-2);
  color: var(--text);
}

/* Tertiary — text only. No fill, no border. */
.btn-tertiary,
.btn-text {
  background: transparent;
  border-color: transparent;
  color: var(--link);
  padding-left: 10px;
  padding-right: 10px;
  box-shadow: none;
}
.btn-tertiary:hover,
.btn-text:hover {
  color: var(--link-hover);
  border-color: transparent;
}

/* The same filled treatment, for a call to action on a dark band. */
.btn-on-dark {
  background: var(--primary-deep);
  border-color: var(--primary-hi);
  color: var(--text-inverse);
  box-shadow: 0 16px 44px -14px rgba(102, 102, 102, 0.8), var(--inset-top);
}
.btn-on-dark:hover {
  background: var(--primary-deep);
  border-color: var(--text-inverse);
  color: var(--text-inverse);
  box-shadow: 0 24px 56px -16px rgba(102, 102, 102, 0.95), var(--inset-top);
}

.btn-lg {
  padding: 16px 40px;
  font-size: 1.05rem;
  border-radius: var(--radius);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.85rem;
  border-radius: var(--radius);
}

.btn-icon {
  font-size: 1.2em;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.card:hover {
  border-color: var(--line-2);
  background: var(--surface-4);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), var(--glow-primary);
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
  position: relative;
}

.card-icon.purple {
  background: rgba(99, 99, 99, 0.12);
  border: 1px solid rgba(100, 100, 100, 0.2);
  color: var(--primary-hi);
}

.card-icon.blue {
  background: rgba(113, 133, 163, 0.12);
  border: 1px solid rgba(114, 133, 163, 0.2);
  color: var(--info);
}

.card-icon.green {
  background: rgba(118, 167, 126, 0.12);
  border: 1px solid rgba(121, 169, 129, 0.2);
  color: var(--success);
}

.card-icon.pink {
  background: rgba(163, 163, 163, 0.12);
  border: 1px solid rgba(164, 164, 164, 0.2);
  color: var(--pink);
}

.card-icon.amber {
  background: rgba(194, 167, 114, 0.12);
  border: 1px solid rgba(196, 170, 118, 0.2);
  color: var(--warning);
}

.card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.card-text {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* ── Grids ─────────────────────────────────────────────────── */
.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: 24px;
}

/* ── Features Page ─────────────────────────────────────────── */
.feature-card {
  padding: 36px;
}

.feature-card .card-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  font-size: 1.8rem;
}

.feature-card .card-title {
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.feature-tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 14px;
}

.feature-tag.core {
  background: rgba(99, 99, 99, 0.15);
  color: var(--primary-hi);
}

.feature-tag.ai {
  background: rgba(163, 163, 163, 0.15);
  color: var(--pink);
}

.feature-tag.export {
  background: rgba(114, 133, 163, 0.15);
  color: var(--info);
}

.feature-tag.enterprise {
  background: rgba(119, 168, 127, 0.15);
  color: var(--success);
}

/* ── Comparison Table ──────────────────────────────────────── */
.comparison-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-3);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 900px;
}

.comparison-table thead {
  background: var(--surface-3);
  border-bottom: 2px solid var(--line);
}

.comparison-table th {
  padding: 18px 16px;
  font-weight: 700;
  text-align: center;
  color: var(--text-2);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.comparison-table th:first-child {
  text-align: left;
  padding-left: 24px;
  min-width: 180px;
}

.comparison-table th.highlight {
  color: var(--accent);
  background: rgba(98, 98, 98, 0.08);
  border-top: 2px solid var(--primary);
  position: relative;
}

.comparison-table th.highlight::after {
  content: '★ YOUR PICK';
  display: block;
  font-size: 0.65rem;
  color: var(--primary-hi);
  margin-top: 4px;
  letter-spacing: 0.1em;
}

.comparison-table td {
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid rgba(38, 38, 38, 0.5);
  color: var(--text-2);
}

.comparison-table td:first-child {
  text-align: left;
  padding-left: 24px;
  font-weight: 600;
  color: var(--text);
}

.comparison-table td.highlight {
  background: rgba(95, 95, 95, 0.04);
}

.comparison-table tbody tr:hover {
  background: rgba(94, 94, 94, 0.03);
}

.comparison-table tbody tr:hover td.highlight {
  background: rgba(98, 98, 98, 0.08);
}

/* Status is never signalled by colour alone: the glyph is in the
   markup (✓ / ✗ / a word) and the SHAPE differs as well — a disc for
   "yes", a square for "no", a dashed pill for "partial". */
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.check.yes {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(160, 194, 166, 0.45);
  border-radius: 50%;
}

.check.no {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(174, 111, 111, 0.45);
  border-radius: 7px;
}

.check.partial {
  width: auto;
  min-width: 26px;
  height: auto;
  min-height: 26px;
  padding: 3px 9px;
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px dashed rgba(198, 173, 124, 0.55);
  border-radius: 7px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.check.yes-strong {
  background: rgba(121, 169, 129, 0.2);
  color: var(--success);
  box-shadow: 0 0 12px rgba(121, 169, 129, 0.2);
}

.price-tag {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.diff-card {
  text-align: center;
  padding: 40px 28px;
}

.diff-card .diff-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.diff-card .diff-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.diff-card .diff-desc {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* ── Download Page ─────────────────────────────────────────── */
.download-hero {
  text-align: center;
  padding: 80px 0 60px;
}

.download-card {
  max-width: 600px;
  margin: 0 auto;
  padding: 48px;
  text-align: center;
  background: var(--surface-3);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: var(--glow-strong);
  position: relative;
}

.download-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: var(--grad-accent);
  z-index: -1;
  opacity: 0.3;
}

.download-version {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(99, 99, 99, 0.15);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 20px;
}

.download-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.download-size {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 32px;
}

.download-requirements {
  max-width: 700px;
  margin: 60px auto 0;
}

.req-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.req-card {
  padding: 24px;
}

.req-card .req-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.req-card .req-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.quickstart {
  max-width: 700px;
  margin: 60px auto 0;
}

.step-list {
  list-style: none;
  counter-reset: steps;
}

.step-item {
  counter-increment: steps;
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}

.step-item:last-child { border-bottom: none; }

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  background: rgba(99, 99, 99, 0.15);
  border: 1px solid rgba(100, 100, 100, 0.3);
  color: var(--accent);
  font-weight: 800;
  font-size: 0.9rem;
}

.step-content h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.step-content p {
  font-size: 0.88rem;
  color: var(--text-2);
}

/* ── Code Blocks ───────────────────────────────────────────── */
.code-block {
  background: var(--surface-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.8;
  overflow-x: auto;
  color: var(--text-2);
  margin: 16px 0;
  position: relative;
}

.code-block code {
  display: block;
  white-space: pre;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.code-block .comment { color: var(--text-muted); }
.code-block .keyword { color: var(--pink); }
.code-block .string { color: var(--success); }
.code-block .command { color: var(--primary-hi); }

.code-inline {
  display: inline;
  padding: 2px 8px;
  background: rgba(98, 98, 98, 0.1);
  border: 1px solid rgba(99, 99, 99, 0.15);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent);
}

/* ── Docs Page ─────────────────────────────────────────────── */
.docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}

.docs-sidebar {
  position: sticky;
  top: 100px;
  padding: 24px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.docs-sidebar h2 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.docs-nav {
  list-style: none;
}

.docs-nav li a {
  display: block;
  padding: 8px 12px;
  font-size: 0.88rem;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.docs-nav li a:hover,
.docs-nav li a.active {
  background: rgba(98, 98, 98, 0.1);
  color: var(--accent);
}

.docs-content h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 48px 0 16px;
  padding-top: 24px;
  color: var(--text);
}

.docs-content h2:first-child {
  margin-top: 0;
}

.docs-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 32px 0 12px;
  color: var(--text);
}

.docs-content p {
  font-size: 0.95rem;
  color: var(--text-2);
  margin-bottom: 16px;
  line-height: 1.8;
}

.docs-content ul {
  padding-left: 24px;
  margin-bottom: 16px;
}

.docs-content li {
  font-size: 0.93rem;
  color: var(--text-2);
  margin-bottom: 8px;
  line-height: 1.7;
}

.docs-content li strong {
  color: var(--text);
}

.arch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0;
}

.arch-card {
  padding: 24px;
  text-align: center;
}

.arch-card .arch-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.arch-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.arch-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Contact Page ──────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-form {
  padding: 40px;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 14px 18px;
  background: var(--surface-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.95rem;
  transition: all var(--transition);
  outline: none;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 99, 99, 0.15);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  text-decoration: none;
  color: var(--text);
}

.contact-link-card:hover {
  color: var(--text);
}

.contact-link-card .link-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.contact-link-card .link-info h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.contact-link-card .link-info p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding: 60px 0 40px;
  background: var(--surface);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-top: 12px;
  max-width: 300px;
  line-height: 1.7;
}

.footer-col h2 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  font-size: 0.9rem;
  color: var(--text-2);
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ── Scroll to Top ─────────────────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--primary-deep);
  color: var(--text-inverse);
  border: 1px solid var(--primary-hi);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition);
  box-shadow: var(--glow-primary);
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--primary-hi);
  transform: translateY(-2px);
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }

/* ── Page Header (inner pages) ─────────────────────────────── */
.page-header {
  padding: 80px 0 48px;
  text-align: center;
}

.page-header h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.page-header p {
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 560px;
  margin: 0 auto;
}

/* ── Pill Tabs ─────────────────────────────────────────────── */
.pill-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 48px;
  padding: 4px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  display: inline-flex;
}

.pill-tab {
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  background: transparent;
  font-family: var(--font);
}

.pill-tab:hover {
  color: var(--text);
}

.pill-tab.active {
  background: var(--primary);
  color: var(--text-inverse);
  box-shadow: 0 2px 10px rgba(100, 100, 100, 0.3);
}

/* ── Tech Stack Badges ─────────────────────────────────────── */
.tech-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  transition: all var(--transition);
}

.tech-badge:hover {
  border-color: var(--primary);
  color: var(--accent);
}

/* ── Highlight Box ─────────────────────────────────────────── */
.highlight-box {
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(100, 100, 100, 0.2);
  --tint: rgba(123, 123, 123, 0.10);
  background: var(--grad-surface);
  margin: 32px 0;
}

.highlight-box h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--accent);
}

.highlight-box p {
  color: var(--text-2);
  line-height: 1.8;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .arch-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; }
}

@media (max-width: 768px) {
  .navbar { padding: 0 1.2rem; }

  .nav-links {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition);
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-links a {
    padding: 12px 16px;
    width: 100%;
  }

  .nav-mobile-toggle { display: flex; }

  .hero { padding: 60px 1.5rem; }
  .hero-title { font-size: 2.4rem; }
  .hero-desc { font-size: 1rem; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .hero-stat-value { font-size: 1.5rem; }

  .section { padding: 60px 0; }
  .container { padding: 0 1.2rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .arch-grid { grid-template-columns: 1fr; }
  .req-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .download-card { padding: 32px 24px; }

  .comparison-table { font-size: 0.8rem; }
  .comparison-table th, .comparison-table td { padding: 12px 8px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: 16px; }
  .hero-stat-divider { display: none; }
  .section-header { margin-bottom: 40px; }
  .section-title { font-size: 1.6rem; }
  .card { padding: 24px; }
  .feature-card { padding: 24px; }
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  .navbar, .scroll-top, .bg-grid, .bg-orbs { display: none; }
  body { background: Canvas; color: CanvasText; }
  .card { border: 1px solid #ddd; box-shadow: none; }
}