/* Inter, self-hosted. Variable font: one file per subset covers 300-600,
   which is every weight this site actually uses (300/400/500/600 - never 700).
   Previously this was a render-blocking stylesheet on fonts.googleapis.com. */
/* latin */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300 600; font-display:swap; src:url(/fonts/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300 600; font-display:swap; src:url(/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg:         #0a0a0a;
  --bg-card:    #111111;
  --bg-card-2:  #161616;
  --bg-light:   #f5f5f5;
  --border:     #1e1e1e;
  --border-lt:  #e5e5e5;
  --text:       #ffffff;
  --text-muted: #888888;
  --text-dim:   #555555;
  --text-dark:  #1a1a1a;
  --accent:     #ffffff;
  --link:       #888888;
  --font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* The self-hosted variable font covers 300-600; keep bold text inside that
   range so the browser never has to synthesise a faux-bold 700. */
strong, b { font-weight:600; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; }

.wrap { max-width:1200px; margin:0 auto; padding:0 2rem; }
.section { padding:6rem 0; }
.section--dark { background:var(--bg); }
.section--card { background:var(--bg-card); }
.section--light { background:var(--bg-light); color:var(--text-dark); }

/* ── NAV ─────────────────── */
.nav { position:sticky; top:0; z-index:100; background:rgba(10,10,10,0.85); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.nav__inner { max-width:1200px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; height:60px; }
.nav__logo { display:flex; align-items:center; gap:0.5rem; text-decoration:none; }
.nav__logo img { height:34px; width:auto; display:block; image-rendering:-webkit-optimize-contrast; }
.nav__links { display:flex; gap:0.15rem; list-style:none; }
.nav__links a { font-size:0.82rem; color:var(--text-muted); text-decoration:none; padding:0.45rem 0.75rem; border-radius:6px; transition:color 0.15s; }
.nav__links a:hover { color:var(--text); }
.nav__right { display:flex; align-items:center; gap:1rem; }
.nav__demo { font-size:0.82rem; color:var(--text-muted); text-decoration:none; transition:color 0.15s; }
.nav__demo:hover { color:var(--text); }
.nav__cta { font-size:0.82rem; font-weight:500; color:var(--bg); background:var(--text); padding:0.45rem 1.1rem; border-radius:6px; text-decoration:none; transition:opacity 0.15s; }
.nav__cta:hover { opacity:0.85; }

/* ── HERO ────────────────── */
.hero { padding:8rem 0 5rem; }
.hero__label { font-size:0.72rem; font-weight:500; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); margin-bottom:1.5rem; }
.hero__title { font-size:clamp(2.2rem,5vw,3.8rem); font-weight:600; line-height:1.08; letter-spacing:-0.03em; margin-bottom:1.25rem; max-width:800px; }
.hero__sub { font-size:1.05rem; font-weight:300; color:var(--text-muted); max-width:600px; line-height:1.7; margin-bottom:2.5rem; }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* ── BUTTONS ─────────────── */
.btn { display:inline-flex; align-items:center; gap:0.4rem; font-family:var(--font); font-size:0.85rem; font-weight:500; padding:0.65rem 1.5rem; border-radius:6px; text-decoration:none; cursor:pointer; border:none; transition:all 0.15s; }
.btn--white { background:var(--text); color:var(--bg); }
.btn--white:hover { opacity:0.85; }
.btn--outline { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn--outline:hover { border-color:var(--text-muted); }
.btn--dark { background:var(--bg); color:var(--text); }

/* ── SECTION HEADERS ─────── */
.sh__label { font-size:0.68rem; font-weight:500; text-transform:uppercase; letter-spacing:0.14em; color:var(--text-muted); margin-bottom:0.75rem; }
.section--light .sh__label { color:var(--text-dim); }
.sh__title { font-size:clamp(1.6rem,3.5vw,2.6rem); font-weight:600; line-height:1.12; letter-spacing:-0.025em; margin-bottom:0.65rem; }
.sh__sub { font-size:0.95rem; font-weight:300; color:var(--text-muted); max-width:560px; line-height:1.7; margin-bottom:2.5rem; }
.section--light .sh__sub { color:var(--text-dim); }

/* ── GRID ────────────────── */
.grid { display:grid; gap:1rem; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }

/* ── CARDS ────────────────── */
.card { border-radius:10px; padding:1.75rem; text-decoration:none; display:block; transition:transform 0.2s, border-color 0.2s; }
.card--dark { background:var(--bg-card); border:1px solid var(--border); color:var(--text); }
.card--dark:hover { border-color:#333; transform:translateY(-2px); }
.card--light { background:#fff; border:1px solid var(--border-lt); color:var(--text-dark); }
.card--light:hover { border-color:#ccc; transform:translateY(-2px); }
.card__title { font-size:1rem; font-weight:600; margin-bottom:0.45rem; }
.card__text { font-size:0.84rem; color:var(--text-muted); line-height:1.6; }
.card__link { display:inline-block; margin-top:0.75rem; font-size:0.8rem; font-weight:500; color:var(--text-muted); }
.card--dark .card__link:hover { color:var(--text); }
.card--light .card__text { color:var(--text-dim); }

/* ── MODULE ROW (matching /software page) ─── */
.mod-row { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; padding:4rem 0; border-bottom:1px solid var(--border); }
.mod-row:last-child { border-bottom:none; }
.mod-row.flip { direction:rtl; }
.mod-row.flip > * { direction:ltr; }
.mod__label { font-size:0.68rem; font-weight:500; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); margin-bottom:0.5rem; }
.mod__title { font-size:1.6rem; font-weight:600; letter-spacing:-0.02em; margin-bottom:0.75rem; }
.mod__desc { font-size:0.92rem; color:var(--text-muted); line-height:1.7; margin-bottom:1.25rem; }
.mod__img { width:100%; border-radius:8px; border:1px solid var(--border); }

/* ── FEATURE LIST ────────── */
.feat-list { list-style:none; }
.feat-list li { font-size:0.85rem; color:var(--text-muted); padding:0.4rem 0; display:flex; gap:0.5rem; align-items:flex-start; }
.feat-list li::before { content:'→'; color:var(--text); flex-shrink:0; }

/* ── PAIN / VALUE ────────── */
.pv { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.pv__col { padding:2rem; }
.pv__col--bad { background:var(--bg-card); border-right:1px solid var(--border); }
.pv__col--good { background:var(--bg-card-2); }
.pv__heading { font-size:0.68rem; font-weight:500; text-transform:uppercase; letter-spacing:0.12em; margin-bottom:1rem; }
.pv__heading--bad { color:#ff5555; }
.pv__heading--good { color:#50fa7b; }

/* ── VS TABLE ────────────── */
.vs-table { width:100%; border-collapse:collapse; }
.vs-table th, .vs-table td { padding:0.75rem 1rem; text-align:left; font-size:0.84rem; border-bottom:1px solid var(--border); }
.vs-table th { font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
.vs-table .good { color:#50fa7b; }
.vs-table .bad { color:#ff5555; opacity:0.7; }
.vs-table .belli-col { background:rgba(255,255,255,0.03); }

/* ── BREADCRUMBS ─────────── */
.crumbs { font-size:0.72rem; color:var(--text-dim); margin-bottom:2rem; }
.crumbs a { color:var(--text-muted); text-decoration:none; }
.crumbs a:hover { color:var(--text); }
.crumbs span { margin:0 0.35rem; }

/* ── HUB TAGS ────────────── */
.tags { display:flex; flex-wrap:wrap; gap:0.4rem; }
.tag { font-size:0.72rem; color:var(--text-muted); background:var(--bg-card); border:1px solid var(--border); padding:0.3rem 0.65rem; border-radius:4px; }

/* ── QUIZ ────────────────── */
.quiz { max-width:600px; margin:0 auto; }
.quiz__step { display:none; }
.quiz__step.active { display:block; }
.quiz__bar { display:flex; gap:0.4rem; margin-bottom:2.5rem; }
.quiz__dot { flex:1; height:2px; background:var(--border); border-radius:1px; transition:background 0.3s; }
.quiz__dot.on { background:var(--text); }
.quiz__q { font-size:1.5rem; font-weight:600; letter-spacing:-0.02em; margin-bottom:1.5rem; }
.quiz__opts { display:grid; gap:0.65rem; }
.quiz__opt { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem 1.2rem; font-family:var(--font); font-size:0.9rem; color:var(--text); text-align:left; cursor:pointer; transition:border-color 0.15s; }
.quiz__opt:hover, .quiz__opt.sel { border-color:var(--text); }

/* ── CTA BAND ────────────── */
.cta-band { padding:5rem 0; text-align:center; border-top:1px solid var(--border); }
.cta-band__title { font-size:clamp(1.4rem,3vw,2rem); font-weight:600; letter-spacing:-0.02em; margin-bottom:0.5rem; }
.cta-band__sub { font-size:0.9rem; color:var(--text-muted); margin-bottom:2rem; }
.cta-band__btns { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* ── FOOTER ──────────────── */
.footer { border-top:1px solid var(--border); padding:4rem 0 2rem; }
.footer__grid { display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:2rem; margin-bottom:3rem; }
.footer__brand img { height:30px; width:auto; display:block; margin-bottom:0.75rem; image-rendering:-webkit-optimize-contrast; }
.footer__brand p { font-size:0.8rem; color:var(--text-dim); max-width:240px; }
.footer__col h4 { font-size:0.62rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); margin-bottom:0.75rem; }
.footer__col a { display:block; font-size:0.8rem; color:var(--text-dim); text-decoration:none; padding:0.2rem 0; transition:color 0.15s; }
.footer__col a:hover { color:var(--text); }
.footer__bottom { border-top:1px solid var(--border); padding-top:1.5rem; font-size:0.7rem; color:var(--text-dim); display:flex; justify-content:space-between; }

/* ── RESPONSIVE ──────────── */
@media(max-width:900px) { .g3,.g4 { grid-template-columns:repeat(2,1fr); } .mod-row,.pv { grid-template-columns:1fr; } .mod-row.flip { direction:ltr; } .footer__grid { grid-template-columns:repeat(2,1fr); } .nav__links { display:none; } }
@media(max-width:600px) { .g2,.g3,.g4 { grid-template-columns:1fr; } .footer__grid { grid-template-columns:1fr; } .hero { padding:5rem 0 3rem; } .section { padding:4rem 0; } }

/* ── UNIQUE PROSE + FAQ (permutative pages) ── */
.prose { max-width:820px; }
.prose__block { margin-bottom:2.25rem; }
.prose__block:last-child { margin-bottom:0; }
.prose__block h2 { font-size:1.3rem; font-weight:600; letter-spacing:-0.01em; margin-bottom:0.9rem; color:var(--text); }
.prose__block p { font-size:0.92rem; line-height:1.75; color:var(--text-dim); margin-bottom:0.9rem; }
.prose__block p:last-child { margin-bottom:0; }
.prose__block strong { color:var(--text); font-weight:600; }
.faq { max-width:820px; margin-top:1.25rem; }
.faq__item { border-top:1px solid var(--border); padding:1.35rem 0; }
.faq__item:last-child { border-bottom:1px solid var(--border); }
.faq__q { font-size:0.98rem; font-weight:600; color:var(--text); margin-bottom:0.5rem; }
.faq__a { font-size:0.88rem; line-height:1.7; color:var(--text-muted); }