/* Astra College OS - public product page. LIGHT, always.
 *
 * The page is printed, projected into committee meetings and pasted into
 * proposals, so it has one art-directed light design rather than following
 * the visitor's OS theme. Two deliberately dark moments remain: the door
 * reader (a picture of a device) and the demo panel at the end, which wears
 * the sign-in screen's royal gradient so the two feel like one building.
 *
 * Colour rules carried over from the app:
 *  - four module hues, each with a MEANING (blue records, green teaching,
 *    amber money & marks, rose people); solid, never gradients;
 *  - a gradient means AI and nothing else;
 *  - colour never carries meaning alone: every hue sits beside a label.
 *  - `--hue` paints bars and icons; `--hue-ink` is the darker step that
 *    passes contrast as TEXT on white (amber #e8890c alone is ~2.6:1).
 * Grid tracks are always minmax(0, 1fr): a bare 1fr lets one long word set
 * the width of the whole page on a phone. */

@font-face {
  font-family: 'Inter';
  src: url('/site/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage';
  src: url('/site/display.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #f7f9fd;
  --surface: #ffffff;
  --tint: #eef3fb;
  --ink: #0b1530;
  --text: #24304a;
  --muted: #55627a;
  --faint: #7d889d;
  --line: rgba(11, 21, 48, 0.08);
  --line-2: rgba(11, 21, 48, 0.14);
  --brand: #0b58e0;
  --brand-deep: #0a3fa8;
  --btn: linear-gradient(180deg, #1f6bff 0%, #0b4fd0 100%);
  --shadow: 0 1px 2px rgba(11, 21, 48, .05), 0 12px 32px -16px rgba(11, 21, 48, .18);
  --shadow-lg: 0 2px 6px rgba(11, 21, 48, .05), 0 40px 80px -36px rgba(11, 40, 110, .35);

  --hue-blue: #0b58e0;
  --hue-green: #059669;
  --hue-amber: #e8890c;
  --hue-rose: #9f1239;
  --ai: linear-gradient(120deg, #6d5dfc, #1d93b8);

  --display: 'Bricolage', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1200px;
  --gutter: 24px;
  --r: 18px;
  color-scheme: light;
}

[data-hue='blue'] { --hue: var(--hue-blue); --hue-ink: #0a4cc2; }
[data-hue='green'] { --hue: var(--hue-green); --hue-ink: #047857; }
[data-hue='amber'] { --hue: var(--hue-amber); --hue-ink: #a35a00; }
[data-hue='rose'] { --hue: var(--hue-rose); --hue-ink: #9f1239; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(11, 88, 224, 0.18); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.ic { width: 1em; height: 1em; flex: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 12px;
  font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn .ic { width: 16px; height: 16px; transition: transform .2s ease; }
.btn:hover .ic { transform: translateX(2px); }
.btn-primary {
  background: var(--btn); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -10px rgba(11, 88, 224, .7);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 30px -10px rgba(11, 88, 224, .85); }
.btn-glass { background: var(--surface); border-color: var(--line-2); color: var(--ink); box-shadow: var(--shadow); }
.btn-glass:hover { border-color: rgba(11, 88, 224, .35); }
.btn-quiet { color: var(--muted); padding: 0 12px; }
.btn-quiet:hover { color: var(--ink); }
.btn-lg { height: 52px; padding: 0 24px; font-size: 15.5px; border-radius: 14px; }
.btn-block { width: 100%; }

/* Navigation -------------------------------------------------------------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(255, 255, 255, .86); backdrop-filter: blur(16px) saturate(160%); border-bottom-color: var(--line); }
.nav-inner { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); height: 72px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { height: 30px; width: auto; }
.brand-divider { width: 1px; height: 22px; background: var(--line-2); }
.brand-product { font-weight: 600; font-size: 15px; color: var(--muted); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { padding: 8px 12px; border-radius: 10px; font-size: 14.5px; color: var(--muted); text-decoration: none; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--ink); background: rgba(11, 21, 48, .05); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; place-items: center; color: var(--ink); }
.nav-toggle .ic { width: 20px; height: 20px; }
.nav-toggle .i-close, .nav.open .nav-toggle .i-open { display: none; }
.nav.open .nav-toggle .i-close { display: block; }
.nav-sheet { display: none; }

/* Shared section furniture ------------------------------------------------ */
.section { position: relative; padding: 120px 0; }
.section-deep { background: var(--tint); border-block: 1px solid var(--line); }
.head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.head-left { margin: 0; text-align: left; }
.head > p:not(.kicker) { margin-top: 16px; color: var(--muted); font-size: 17px; }
.head a { color: var(--brand); }
.kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
}
.kicker::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.kicker-ai { background: var(--ai); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker-ai::before { background: #6d5dfc; }

h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.sub { margin-top: 16px; color: var(--muted); font-size: 17px; max-width: 540px; }

.checks { display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.checks .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--hue-ink, var(--brand)); }

.points { display: grid; gap: 22px; margin-top: 34px; }
.points li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; }
.points li > .ic {
  width: 42px; height: 42px; padding: 11px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--brand); box-shadow: var(--shadow);
}
.points b { display: block; color: var(--ink); font-weight: 600; }
.points span { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.split-rev { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

/* Reveal: hidden only once JS has said it will reveal things. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative; padding: 150px 0 72px; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 60% at 80% 35%, rgba(11, 88, 224, .13), transparent 70%),
    radial-gradient(ellipse 45% 50% at 5% 0%, rgba(29, 147, 184, .12), transparent 70%),
    linear-gradient(180deg, #f4f7fd 0%, var(--bg) 100%);
}
.hero-glow { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.hero .orb-a { width: 480px; height: 480px; right: -80px; top: -140px; background: rgba(94, 203, 232, .22); animation: drift 18s ease-in-out infinite alternate; }
.hero .orb-b { width: 380px; height: 380px; left: -140px; top: 300px; background: rgba(11, 88, 224, .10); animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(60px, 40px); } }
.hero-glow .grid {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(11,21,48,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11,21,48,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(11, 88, 224, .2); background: rgba(255,255,255,.8);
  font-size: 13px; font-weight: 500; color: var(--brand-deep);
}
.pill .ic { width: 15px; height: 15px; }
.hero h1 { margin-top: 22px; font-size: clamp(42px, 6.2vw, 80px); line-height: .98; letter-spacing: -0.045em; }
.hero h1 .hl { color: var(--brand); }
.lead { margin-top: 24px; max-width: 540px; font-size: 18px; line-height: 1.62; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 34px; font-size: 13.5px; color: var(--muted); }
.hero-legend li { display: flex; align-items: center; gap: 8px; }
.hero-legend s { width: 10px; height: 10px; border-radius: 3px; background: var(--hue); }

/* The ledger: the college day, as it lands in the record. */
.ledger {
  position: relative; border-radius: 22px; padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.ledger-head, .ledger-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.ledger-head { padding: 4px 6px 14px; border-bottom: 1px solid var(--line); }
.ledger-title { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink); }
.ledger-date { color: var(--faint); font-size: 13px; }
.ledger-list { position: relative; height: 392px; overflow: hidden; margin: 12px 0; mask-image: linear-gradient(180deg, #000 82%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); }
.entry {
  display: grid; grid-template-columns: 48px 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 11px 10px; border-radius: 14px; margin-bottom: 6px;
  transition: background .6s ease;
}
.entry.new { background: #f1f5fd; animation: drop .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
.entry time { font: 500 12.5px/1 var(--mono); color: var(--faint); }
.entry .e-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--hue-ink); background: color-mix(in srgb, var(--hue) 11%, white); border: 1px solid color-mix(in srgb, var(--hue) 22%, white); }
.entry .e-icon .ic { width: 17px; height: 17px; }
.entry.ai .e-icon { color: #fff; background: var(--ai); border-color: transparent; }
.entry b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry span.e-text i { display: block; font-style: normal; font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry .chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: var(--hue-ink); background: color-mix(in srgb, var(--hue) 10%, white); white-space: nowrap; }
.entry.ai .chip { color: #5546d6; background: #efedff; }
.ledger-foot { padding: 14px 6px 4px; border-top: 1px solid var(--line); color: var(--faint); }
.ledger-foot b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger-sync { display: flex; align-items: center; gap: 6px; }
.ledger-sync .ic { width: 14px; height: 14px; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.nepal-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px;
  margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.nepal-strip li { display: flex; align-items: center; gap: 8px; }
.nepal-strip .ic { width: 16px; height: 16px; color: var(--brand); }

/* Cards shared by portals, families, tiles, trust --------------------------- */
.portal, .family, .tile, .sec, .steps {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
}

/* Portals ----------------------------------------------------------------- */
.portals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.portal { position: relative; padding: 18px 20px 24px; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.portal:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hue) 40%, white); box-shadow: var(--shadow-lg); }
.portal::before { content: ''; position: absolute; left: 20px; right: 20px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--hue); }
.p-icon { display: grid; place-items: center; width: 40px; height: 40px; margin: 20px 0 14px; border-radius: 12px; color: var(--hue-ink); background: color-mix(in srgb, var(--hue) 11%, white); }
.p-icon .ic { width: 19px; height: 19px; }
.portal h3 { margin-bottom: 12px; font-size: 19px; }

/* The little screens are pictures of the app, so they stay app-like. */
.mini { height: 128px; border-radius: 14px; padding: 14px; background: #f5f7fb; border: 1px solid var(--line); font-size: 12px; overflow: hidden; color: var(--text); }
.mini-office { display: flex; align-items: center; gap: 14px; }
.mini-ring { position: relative; width: 84px; height: 84px; flex: none; display: grid; place-items: center; }
.mini-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.mini-ring circle { fill: none; stroke-width: 11; }
.mini-ring .trk { stroke: rgba(11, 21, 48, .08); }
.mini-ring .val { stroke: var(--hue); stroke-linecap: round; stroke-dasharray: var(--v) 100; }
.mini-ring b { font-size: 17px; color: var(--ink); }
.mini-stats { display: grid; }
.mini-stats i { font-style: normal; color: var(--faint); font-size: 11px; }
.mini-stats b { color: var(--ink); font-size: 15px; margin-bottom: 6px; }
.mini-register { display: grid; gap: 7px; align-content: center; }
.mini-register span { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.mini-register em { font-style: normal; color: var(--text); }
.mini-register s { text-decoration: none; width: 22px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 11px; }
.mini-register .p { background: #d1fae5; color: #047857; }
.mini-register .a { background: #ffe4e9; color: var(--hue-rose); }
.mini-student { display: grid; gap: 7px; align-content: center; }
.ms-next { padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--hue) 12%, white); }
.ms-next i { display: block; font-style: normal; color: var(--hue-ink); font-size: 11px; }
.ms-next b { color: var(--ink); font-size: 13.5px; }
.ms-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ms-row > span { padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.ms-row i { display: block; font-style: normal; color: var(--faint); font-size: 11px; }
.ms-row b { color: var(--ink); font-size: 15px; }
.mini-parent { display: grid; gap: 10px; align-content: center; }
.mp-wards { display: inline-flex; width: fit-content; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; }
.mp-wards b, .mp-wards i { padding: 3px 12px; border-radius: 999px; font-style: normal; }
.mp-wards b { background: var(--hue); color: #fff; }
.mp-wards i { color: var(--faint); }
.mp-alert { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: #fff4e0; color: #8a4b00; line-height: 1.4; }
.mp-alert .ic { width: 14px; height: 14px; margin-top: 1px; }

/* Module families --------------------------------------------------------- */
.families { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.family { padding: 26px 22px; }
.family h3 { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.family h3 s { width: 12px; height: 12px; border-radius: 4px; background: var(--hue); }
.family li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--line-2); }
.family li:last-child { border-bottom: 0; padding-bottom: 0; }
.family li > .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--hue-ink); }
.family b { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.family span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

/* Tap to attend: the reader is a device, so its panel stays dark. --------- */
.tap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: center; overflow: hidden;
  padding: 28px; border-radius: 24px;
  background: linear-gradient(150deg, #0f3a8f 0%, #082459 55%, #041029 100%);
  box-shadow: var(--shadow-lg);
}
.tap-reader {
  position: relative; height: 280px; border-radius: 20px; padding: 14px;
  background: #050d22; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  display: flex; flex-direction: column; gap: 12px;
}
.tr-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(214, 226, 255, .5); }
.tr-led { width: 8px; height: 8px; border-radius: 50%; background: #475569; transition: background .2s, box-shadow .2s; }
.tr-led.on { background: #34d399; box-shadow: 0 0 12px #34d399; }
.tr-screen { position: relative; flex: 1; border-radius: 12px; background: linear-gradient(180deg, #0b1d44, #071530); display: grid; place-items: center; overflow: hidden; }
.tr-idle { display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(214, 226, 255, .7); font-size: 13px; transition: opacity .3s; }
.tr-idle .ic { width: 30px; height: 30px; color: #5ecbe8; }
.tr-hit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 14px; background: rgba(46, 158, 104, .2); opacity: 0; transition: opacity .3s; }
.tr-hit b { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2f72ff; color: #fff; font-size: 14px; }
.tr-hit strong { display: block; color: #fff; font-size: 15px; }
.tr-hit em { display: block; font-style: normal; color: #6ee7b7; font-size: 12.5px; }
.tr-screen.hit .tr-hit { opacity: 1; }
.tr-screen.hit .tr-idle { opacity: 0; }
.tr-card {
  position: absolute; right: -18px; bottom: -26px; width: 118px; height: 74px; border-radius: 9px;
  background: #fff; box-shadow: 0 16px 30px -10px rgba(0,0,0,.7);
  transform: translate(60px, 50px) rotate(14deg); opacity: 0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s;
  overflow: hidden;
}
.tr-card s { position: absolute; inset: 0 0 auto; height: 18px; background: linear-gradient(90deg, #0f3a8f, #1849d6); }
.tr-card b { position: absolute; left: 8px; top: 26px; width: 30px; height: 36px; border-radius: 5px; background: #dbe6ff; color: #0f3a8f; font-size: 11px; display: grid; place-items: center; }
.tr-card i { position: absolute; left: 46px; height: 5px; border-radius: 3px; background: #c7d2e6; }
.tr-card i:nth-of-type(1) { top: 30px; width: 54px; }
.tr-card i:nth-of-type(2) { top: 42px; width: 38px; }
.tr-card.tap { opacity: 1; transform: translate(-70px, -78px) rotate(-4deg); }

.tap-register { border-radius: 16px; padding: 14px; background: #fff; color: var(--ink); }
.treg-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; font-size: 13px; }
.treg-head em { font-style: normal; color: #64748b; font-size: 12.5px; }
.treg-head em span { color: #059669; font-weight: 700; }
.tap-register li { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px; border-radius: 9px; font-size: 13.5px; transition: background .4s; }
.tap-register li em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #eef1f6; color: #64748b; }
.tap-register li.ok { background: #ecfdf5; }
.tap-register li.ok em { background: #d1fae5; color: #047857; }

/* Made for Nepal bento ----------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.tile { position: relative; grid-column: span 2; padding: 26px; overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.tile:hover { border-color: color-mix(in srgb, var(--hue) 35%, white); box-shadow: var(--shadow-lg); }
.tile-cal, .tile-pay { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.t-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; color: var(--hue-ink); background: color-mix(in srgb, var(--hue) 11%, white); }
.t-icon .ic { width: 20px; height: 20px; }
.tile h3 { font-size: 18px; margin-bottom: 8px; }
.tile p { color: var(--muted); font-size: 14.5px; }
.sms { display: flex; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: #fdecef; color: #7f1031; font-size: 13.5px; line-height: 1.45; }
.sms .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.digits { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; }
.digits b { font-size: 34px; font-weight: 600; color: #047857; letter-spacing: .04em; }
.digits i { font-style: normal; font-size: 18px; color: var(--faint); font-variant-numeric: tabular-nums; }

.cal { border-radius: 16px; padding: 16px; background: #f5f7fb; border: 1px solid var(--line); }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-head b { font-size: 16px; color: var(--ink); }
.cal-toggle { position: relative; display: grid; grid-template-columns: repeat(2, 38px); padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: default; }
.cal-toggle s { position: absolute; top: 3px; left: 3px; width: 38px; bottom: 3px; border-radius: 999px; background: var(--hue-blue); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.cal.ad .cal-toggle s { transform: translateX(38px); }
.cal-toggle i { position: relative; font-style: normal; font-size: 11.5px; font-weight: 600; text-align: center; padding: 3px 0; color: var(--muted); transition: color .35s; }
.cal:not(.ad) .cal-toggle i:first-of-type, .cal.ad .cal-toggle i:last-of-type { color: #fff; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal-dow { font-size: 11px; color: var(--faint); margin-bottom: 4px; }
.cal-dow i { font-style: normal; }
.cal-dow i:last-child { color: var(--hue-rose); }
.cal-grid i { font-style: normal; font-size: 12.5px; padding: 6px 0; border-radius: 8px; color: var(--text); font-variant-numeric: tabular-nums; transition: background .3s; }
.cal-grid i.sat { color: var(--hue-rose); }
.cal-grid i.today { background: var(--hue-blue); color: #fff; font-weight: 700; }
.cal-grid i.exam { box-shadow: inset 0 -2px 0 var(--hue-amber); }

.inv { position: relative; border-radius: 16px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); font-size: 13.5px; overflow: hidden; }
.inv-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #e5e9f0; }
.inv-head b { font: 600 12.5px var(--mono); }
.inv-head em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #fef3c7; color: #b45309; transition: all .3s; }
.inv-head em.paid { background: #d1fae5; color: #047857; }
.inv-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #eef1f6; }
.inv-row i { font-style: normal; color: #475569; }
.inv-total { border-bottom: 0; }
.inv-total b { color: var(--brand); font-size: 16px; }
.inv-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.inv-btns s { text-decoration: none; text-align: center; padding: 9px 0; border-radius: 10px; color: #fff; font-weight: 600; font-size: 13px; transition: transform .2s, box-shadow .2s; }
.inv-btns .esewa { background: #41a124; }
.inv-btns .khalti { background: #5c2d91; }
.inv-btns .esewa.press { transform: scale(.95); box-shadow: 0 0 0 4px rgba(65, 161, 36, .3); }
.inv-stamp {
  position: absolute; right: 22px; top: 54px; padding: 6px 16px; border: 3px solid #059669; border-radius: 10px;
  color: #059669; font: 800 26px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-align: center;
  transform: rotate(-12deg) scale(1.8); opacity: 0; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s;
  background: rgba(255,255,255,.88);
}
.inv-stamp i { display: block; font: 600 10px var(--mono); letter-spacing: .05em; }
.inv-stamp.on { opacity: 1; transform: rotate(-12deg) scale(1); }

/* AI ----------------------------------------------------------------------- */
.chat {
  position: relative; border-radius: 22px; padding: 1px; background: var(--ai);
  box-shadow: 0 40px 80px -40px rgba(109, 93, 252, .45);
}
.chat > * { position: relative; }
.chat::before { content: ''; position: absolute; inset: 1px; border-radius: 21px; background: #fff; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.chat-av { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--ai); color: #fff; }
.chat-av .ic { width: 18px; height: 18px; }
.chat-head b { display: block; color: var(--ink); font-size: 14.5px; }
.chat-head i { display: block; font-style: normal; color: var(--faint); font-size: 12.5px; }
.chat-body { display: grid; gap: 12px; padding: 18px; min-height: 300px; align-content: start; }
.bubble { max-width: 88%; padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; }
.bubble.me { justify-self: end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.bubble.ai { background: #f3f4fb; color: var(--text); border-bottom-left-radius: 5px; display: grid; gap: 10px; }
.bubble.ai b { color: #5546d6; }
.bubble pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: #0b1530; font: 12.5px/1.6 var(--mono); color: #c7d7ff; overflow-x: auto; }
.bubble.ai.typing > * { opacity: 0; transform: translateY(6px); }
.bubble.ai > * { transition: opacity .5s, transform .5s; }
.bubble.ai.typing > .shown { opacity: 1; transform: none; }
.chat-input { display: flex; justify-content: space-between; align-items: center; margin: 0 14px 14px; padding: 8px 8px 8px 16px; border-radius: 14px; border: 1px solid var(--line-2); color: var(--faint); font-size: 14px; }
.chat-input s { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--ai); color: #fff; }
.chat-input .ic { width: 16px; height: 16px; }

/* Trust + rollout ---------------------------------------------------------- */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.sec, .steps { padding: 28px; display: grid; gap: 22px; align-content: start; }
.sec li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.sec li > .ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: #eef3fd; color: var(--brand); }
.sec b, .steps b { display: block; color: var(--ink); font-weight: 600; }
.sec span, .steps span:not(.step-n) { display: block; color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.steps { position: relative; }
.steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 19px; top: 46px; bottom: -18px; width: 2px; background: linear-gradient(rgba(11, 88, 224, .3), transparent); }
.step-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 17px var(--display); color: #fff; background: var(--btn); box-shadow: 0 8px 20px -8px rgba(11, 88, 224, .8); }

/* FAQ ---------------------------------------------------------------------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq-wrap .head { position: sticky; top: 110px; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq details:first-child { border-top: 1px solid var(--line-2); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px;
  font-weight: 600; font-size: 16.5px; color: var(--ink); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 18px; height: 18px; color: var(--brand); transition: transform .3s ease; }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { padding: 0 4px 22px; color: var(--muted); font-size: 15px; max-width: 640px; }

/* Demo request: the one royal panel, the sign-in screen's own ground. ------ */
.section-cta { padding-top: 40px; }
.cta-panel {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start;
  padding: 56px; border-radius: 28px;
  background: linear-gradient(145deg, #0f3a8f 0%, #082459 45%, #020a1f 100%);
  box-shadow: var(--shadow-lg);
  color: rgba(214, 226, 255, .7);
}
.cta-panel .orb-a { width: 520px; height: 520px; right: -200px; top: -240px; background: rgba(94, 203, 232, .22); }
.cta-panel h2 { color: #fff; }
.cta-panel .kicker { color: #5ecbe8; }
.cta-panel .sub { color: rgba(214, 226, 255, .72); }
.cta-copy, .demo-form { position: relative; }
.contact { display: grid; gap: 12px; margin-top: 30px; font-size: 15px; }
.contact li { display: flex; align-items: center; gap: 10px; }
.contact .ic { width: 18px; height: 18px; color: #5ecbe8; }
.contact a { color: #fff; }
.demo-form { display: grid; gap: 14px; padding: 26px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.demo-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.demo-form input, .demo-form select, .demo-form textarea {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: #f8fafd; color: var(--ink); font: 15px var(--sans);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.demo-form textarea { resize: vertical; }
.demo-form input::placeholder, .demo-form textarea::placeholder { color: var(--faint); }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { outline: none; background: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(11, 88, 224, .15); }
.demo-form .invalid { border-color: #e11d48; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1em; font-size: 14px; color: var(--muted); }
.form-status.err { color: #be123c; }
.form-done { text-align: center; padding: 40px 10px; }
.form-done .ic { width: 48px; height: 48px; margin: 0 auto 14px; padding: 12px; border-radius: 50%; background: #d1fae5; color: #047857; }
.form-done h3 { font-size: 22px; }
.form-done p { margin-top: 8px; color: var(--muted); }

/* Footer ------------------------------------------------------------------- */
.footer { padding: 72px 0 32px; border-top: 1px solid var(--line); background: var(--surface); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; }
.footer-brand img { height: 30px; width: auto; }
.footer-brand p { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 320px; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-links h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.footer-links a { display: block; padding: 4px 0; color: var(--muted); font-size: 14px; text-decoration: none; }
.footer-links a:hover { color: var(--brand); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; }
.footer-base span { display: inline-flex; align-items: center; gap: 6px; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-toggle { display: grid; }
  .nav.open { background: #fff; border-bottom-color: var(--line); box-shadow: var(--shadow); }
  .nav.open .nav-sheet { display: grid; gap: 4px; padding: 8px var(--gutter) 22px; }
  .nav-sheet a:not(.btn) { padding: 12px 4px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
  .nav-sheet .btn { margin-top: 12px; }
  .portals, .families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .section { padding: 88px 0; }
  .hero { padding-top: 120px; }
  .hero-inner, .split, .split-rev, .trust, .faq-wrap, .cta-panel, .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .split-rev .chat { order: 2; }
  .faq-wrap .head { position: static; }
  .tile-cal, .tile-pay { grid-column: span 6; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .tile { grid-column: span 3; }
  .tile:last-child { grid-column: span 6; }
  .cta-panel { padding: 40px; }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; }
  .nav-demo { display: none; }
  .nav-inner { height: 64px; gap: 12px; }
  .brand-divider, .brand-product { display: none; }
  .section { padding: 72px 0; }
  .head { margin-bottom: 40px; text-align: left; }
  .lead { font-size: 16.5px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .ledger { padding: 12px; }
  .ledger-list { height: 330px; }
  .entry { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 9px 6px; }
  .entry time { display: none; }
  .entry .e-icon { width: 34px; height: 34px; }
  .ledger-sync { display: none; }
  .nepal-strip { justify-content: flex-start; gap: 10px 20px; margin-top: 56px; }
  .portals, .families { grid-template-columns: minmax(0, 1fr); }
  .tap { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .tap-reader { height: 220px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile, .tile:last-child, .tile-cal, .tile-pay { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .tile { padding: 22px; }
  .cta-panel { padding: 24px 18px; border-radius: 22px; }
  .demo-form { padding: 18px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-base { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}