/* Sansad Nepal — website styling, built on the app's design tokens
   (design/tokens): Nunito + Noto Sans Devanagari, blue/crimson palette. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Noto+Sans+Devanagari:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  /* Brand (from design/tokens/colors.css) */
  --blue-50:#E8F0F9; --blue-500:#0054A6; --blue-600:#004488; --blue-700:#003366; --blue-900:#001A33;
  --crimson-400:#DC143C; --crimson-500:#C8102E; --crimson-50:#FCEAEC;
  --green-500:#1F8A5B; --amber-500:#D9870A;
  --n0:#FFFFFF; --n50:#F7F8FA; --n100:#EFF1F4; --n200:#E3E6EB; --n300:#D2D6DD;
  --n400:#A4ABB6; --n500:#767E8B; --n600:#535A66; --n800:#252931; --n900:#15181E;

  --brand:var(--blue-500); --brand-hover:var(--blue-600); --crimson:var(--crimson-500);
  --ink:var(--n900); --muted:var(--n600); --soft-ink:var(--n500);
  --page:var(--n0); --soft:var(--n50); --line:var(--n200);

  --font-sans:'Nunito','Noto Sans Devanagari',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --radius:16px;
  --shadow:0 1px 2px rgba(21,24,30,.04), 0 8px 30px rgba(21,24,30,.06);
  --shadow-lg:0 30px 70px -20px rgba(0,38,77,.45);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
:lang(ne), [lang="ne"] { font-family:'Noto Sans Devanagari','Nunito',sans-serif; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:1080px; margin:0 auto; padding:0 22px; }
.mono { font-family:var(--font-mono); }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:var(--n0); border-bottom:1px solid var(--line); box-shadow:0 1px 3px rgba(21,24,30,.05); }
.nav { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; font-size:18px; color:var(--ink); }
.brand:hover { text-decoration:none; }
.brand svg { width:36px; height:36px; }
.nav-right { display:flex; align-items:center; gap:8px; }
.nav-links a { color:var(--muted); font-weight:700; font-size:14px; padding:8px 12px; border-radius:9px; }
.nav-links a:hover { color:var(--ink); background:var(--soft); text-decoration:none; }
.lang-toggle { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--n0); margin-left:6px; }
.lang-toggle button { border:0; background:transparent; padding:7px 13px; font:inherit; font-weight:700; font-size:13px; color:var(--muted); cursor:pointer; }
.lang-toggle button.active { background:var(--brand); color:#fff; }

/* Hero */
.hero { background:linear-gradient(180deg,var(--blue-50),#fff 70%); padding:64px 0 40px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.eyebrow { color:var(--brand); font-weight:800; letter-spacing:.04em; font-size:14px; text-transform:none; }
.hero h1 { font-size:48px; line-height:1.08; font-weight:800; letter-spacing:-.02em; margin:12px 0 16px; }
.hero p.sub { font-size:19px; color:var(--muted); margin:0 0 28px; max-width:30ch; }
.badges { display:flex; gap:13px; flex-wrap:wrap; }
.badge { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; padding:12px 18px; border-radius:13px; font-weight:700; }
.badge:hover { text-decoration:none; background:#000; }
.badge.soft { background:var(--soft); color:var(--soft-ink); cursor:default; box-shadow:inset 0 0 0 1px var(--line); }
.badge svg { width:22px; height:22px; }
.badge small { display:block; font-size:10px; opacity:.75; font-weight:600; line-height:1; }
.badge .big { font-size:15px; line-height:1.15; }

/* Phone screenshots already include the device bezel — just present + shadow. */
.phone-wrap { display:flex; justify-content:center; }
.phone { width:300px; max-width:78vw; }
.phone img { display:block; width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(0,38,77,.30)); }

/* Sections */
section { padding:56px 0; }
.section-head { text-align:center; max-width:60ch; margin:0 auto 40px; }
.section-head h2 { font-size:30px; font-weight:800; letter-spacing:-.01em; margin:0 0 8px; }
.section-head p { color:var(--muted); margin:0; font-size:17px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:var(--n0); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:transform .15s ease, box-shadow .15s ease; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.card .ic { width:46px; height:46px; border-radius:12px; background:var(--blue-50); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.card .ic svg { width:24px; height:24px; }
.card.crimson .ic { background:var(--crimson-50); color:var(--crimson); }
.card h3 { margin:0 0 6px; font-size:18px; font-weight:700; }
.card p { margin:0; color:var(--muted); font-size:15px; }

/* Showcase strip */
.shots { display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }
.shots .phone { width:240px; }

/* CTA band */
.band { background:linear-gradient(135deg,var(--blue-600),var(--blue-500)); color:#fff; border-radius:24px; padding:48px 40px; text-align:center; box-shadow:var(--shadow); }
.band h2 { margin:0 0 8px; font-size:28px; font-weight:800; }
.band p { margin:0 0 24px; opacity:.92; font-size:17px; }
.band .badge { background:#fff; color:var(--blue-600); }
.band .badge.soft { background:rgba(255,255,255,.16); color:#fff; box-shadow:none; }

/* Footer */
footer { border-top:1px solid var(--line); padding:30px 0 56px; color:var(--muted); font-size:14px; }
.foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.foot .brand { font-size:15px; }
.foot nav a { color:var(--muted); margin-left:18px; font-weight:600; }

/* Legal pages */
.legal { max-width:760px; margin:0 auto; }
.legal h1 { font-size:30px; font-weight:800; margin:32px 0 4px; }
.legal .updated { color:var(--muted); font-size:14px; margin-bottom:24px; }
.legal h2 { font-size:19px; font-weight:700; margin:28px 0 8px; }
.legal ul { padding-left:20px; } .legal li { margin:4px 0; }

@media (max-width:860px) {
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero p.sub { margin-left:auto; margin-right:auto; }
  .badges { justify-content:center; }
  .hero h1 { font-size:38px; }
  .grid { grid-template-columns:1fr; }
  .nav-links { display:none; }
}