@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

: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; }
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:28px; }
.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:24px; margin-bottom:0.75rem; }
.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; } }