@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Baloo Tamma 2"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/baloo-tamma-2-kannada-400-normal.woff2") format("woff2"); unicode-range: U+0C80-0CFF, U+200C-200D, U+25CC; }
@font-face { font-family: "Baloo Tamma 2"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/baloo-tamma-2-kannada-700-normal.woff2") format("woff2"); unicode-range: U+0C80-0CFF, U+200C-200D, U+25CC; }
@font-face { font-family: "Baloo Tamma 2"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/baloo-tamma-2-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo Tamma 2"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/baloo-tamma-2-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;
  --fs: 1;
  --paper: #fbf7f0; --card: #ffffff; --ink: #1c1a2e; --ink-muted: #5b5870; --line: #e2d9c8;
  --brand: #2f5bea; --on-brand: #ffffff; --sun: #ffc94a; --coral: #ff7a59; --mark: #ffc94a;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kannada: "Baloo Tamma 2", "Noto Sans Kannada", "Kannada Sangam MN", sans-serif;
  --space-2: 0.5rem; --space-4: 1rem; --space-6: 1.5rem; --space-10: 2.5rem;
  --radius-md: 1rem; --radius-pill: 999px;
}
:root[data-theme="dark"] {
  --paper: #12111c; --card: #1c1a2e; --ink: #f3eee4; --ink-muted: #b7b3c9; --line: #35324d;
  --brand: #9bb2ff; --on-brand: #12111c; --mark: rgba(255, 201, 74, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12111c; --card: #1c1a2e; --ink: #f3eee4; --ink-muted: #b7b3c9; --line: #35324d;
    --brand: #9bb2ff; --on-brand: #12111c; --mark: rgba(255, 201, 74, 0.45);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: calc(100% * var(--fs)); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.625 var(--sans); }
body, .card, .menu { transition: background-color .2s, color .2s; }
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 720px) { .wrap { padding: 0 var(--space-6); } }

h1 { font: 700 clamp(1.875rem, 6vw, 2.25rem)/1.22 var(--sans); letter-spacing: -0.01em; margin: 0 0 var(--space-4); }
h2 { font: 700 1.5rem/2rem var(--sans); margin: var(--space-10) 0 var(--space-2); }
.lead { font-size: 1.125rem; line-height: 1.75rem; margin: 0 0 var(--space-6); }
.eyebrow { display: flex; align-items: center; gap: 0.5rem; font: 700 0.8125rem/1.125rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.muted { color: var(--ink-muted); }
p, ul, ol { margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }
:lang(kn), .kn { font-family: var(--kannada); line-height: 1.9; letter-spacing: 0; text-transform: none; }
[lang="kn"] h1 { font-family: var(--kannada); line-height: 1.5; }
[lang="kn"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }
a { color: var(--brand); }
.mark { background: linear-gradient(transparent 58%, var(--mark) 58% 92%, transparent 92%); padding: 0 2px; }

.icon { width: 1.5rem; height: 1.5rem; flex: none; display: inline-block; vertical-align: middle; }
.eyebrow .icon { width: 1.25rem; height: 1.25rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin: 0 0 var(--space-4); }
.feature-list { list-style: none; padding: 0; }
.feature-list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.feature-list .icon { color: var(--brand); width: 1.75rem; height: 1.75rem; margin-top: 0.1rem; }
.tag { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--sun); color: #1c1a2e; font: 700 0.8125rem/1.125rem var(--sans); padding: 0.5rem 0.875rem; border-radius: var(--radius-pill); }
[lang="kn"] .tag { font-family: var(--kannada); font-size: 0.9375rem; }
.tag .icon { width: 1.125rem; height: 1.125rem; }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--space-10) 0; }
.hero { scroll-margin-top: 1rem; }

.btn { display: inline-block; background: var(--brand); color: var(--on-brand); font: 700 1rem/1.5rem var(--sans); padding: 0.75rem 1.5rem; border-radius: var(--radius-pill); text-decoration: none; border: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand); }

.site-header { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); margin-bottom: var(--space-10); }
.site-header .wrap { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; }
.wordmark { font: 800 1.25rem/1.75rem var(--sans); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.wordmark-kn { font-weight: 700; color: var(--ink-muted); }
.site-footer { border-top: 1px solid var(--line); margin-top: var(--space-10); padding: var(--space-6) 0 var(--space-10); color: var(--ink-muted); font-size: 0.875rem; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.icon-btn[hidden] { display: none; }
.icon-btn .i-close { display: none; }
.icon-btn[aria-expanded="true"] .i-open { display: none; }
.icon-btn[aria-expanded="true"] .i-close { display: inline; }

.scrim { position: fixed; inset: 0; background: rgba(10, 9, 20, 0.5); z-index: 20; }
.menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(22rem, 88vw); background: var(--paper); border-left: 1px solid var(--line); padding: 5rem var(--space-6) var(--space-6); overflow-y: auto; z-index: 30; }
.scrim[hidden], .menu[hidden] { display: none; }
.menu-open .icon-btn { position: relative; z-index: 40; }
.menu-title { margin: 0 0 var(--space-4); font-size: 1.25rem; line-height: 1.75rem; }
.menu-label { display: flex; align-items: center; gap: 0.5rem; margin: var(--space-6) 0 var(--space-2); font-weight: 700; font-size: 0.875rem; color: var(--ink-muted); }
.menu-label .icon { width: 1.25rem; height: 1.25rem; }
.seg { display: flex; gap: 0.5rem; }
.seg button, .seg a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem 0.25rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font: 700 0.875rem/1.25rem var(--sans); text-decoration: none; cursor: pointer; }
.seg a[lang="kn"] { font-family: var(--kannada); }
.seg button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.seg button:disabled { opacity: 0.4; cursor: default; }

.update-banner { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 50; display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}