/* Eduvia
   Layout: light product site. White page with navy type, floating glass nav (scrolls with the page),
   hero photo that fades into the page, levels strip, Uji / Semak / Bantu demo on
   a laptop, timetable. Navy is kept for the
   levels strip and the footer (.on-dark). */

/* Brand display font (single weight) */
@font-face {
  font-family: "Claston";
  src: url("../fonts/claston.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colours */
  --navy: #12195f;
  --yellow: #ebc35b;
  --blue: #5eb6ff;
  --white: #ffffff;

  /* Light theme (default) */
  --bg: var(--white);
  --bg-alt: #f7f7f9;
  --fg: var(--navy);          /* headings, strong text */
  --text: #2b3060;            /* body text */
  --muted: #5d6285;
  --faint: #8a8ea8;
  --surface: var(--white);
  --surface-2: #f4f5f8;
  --line: #e7e8ee;
  --line-strong: #d6d8e2;
  --track: #eceef3;
  --inset: #f2f3f7;
  --spot: rgba(94, 182, 255, 0.1);
  --ok-ink: #1b6bc0;          /* brand blue, darkened for small text on white */
  --ok-bg: #e9f4ff;
  --help-ink: #8a6410;        /* brand yellow, darkened for small text on white */
  --help-bg: #fcf2d6;
  --accent-ink: #1b6bc0;
  --error-ink: #c8323b;       /* form errors */
  --error-bg: #fdeeef;
  --mark: rgba(235, 195, 91, 0.55);
  --shadow: 0 1px 2px rgba(18, 25, 95, 0.04), 0 14px 34px -16px rgba(18, 25, 95, 0.16);
  --shadow-lg: 0 2px 6px rgba(18, 25, 95, 0.05), 0 40px 90px -36px rgba(18, 25, 95, 0.3);

  --yellow-hover: #f2d27e;
  --navy-deep: #0c1150;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Claston", var(--font);
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius: 24px;
  --radius-sm: 14px;
  --nav-top: calc(env(safe-area-inset-top, 0px) + 14px);

  color-scheme: light;
}

/* Navy sections: same components, dark token values */
.on-dark {
  --fg: var(--white);
  --text: #e4e7fb;
  --muted: #bcc2ea;
  --faint: #8d94cc;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent-ink: var(--blue);
  background: var(--navy);
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 16px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--fg); font-family: var(--font-display); font-weight: 400; line-height: 1.1; text-wrap: balance; }

.container { width: min(1160px, 100% - 32px); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Type helpers ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--yellow); }

.display { font-size: clamp(2rem, 4.6vw, 3.5rem); letter-spacing: -0.01em; }
.display span { display: block; }
.body-lg { font-size: 1.12rem; color: var(--muted); margin-top: 20px; }

.mono-label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}

/* Highlighter mark in the brand yellow */
/* Gradient text in the brand colours: a deeper gold (readable on white) into blue.
   The gradient drifts slowly across the words. */
.hero-title .mark {
  display: inline; padding-right: 0.04em;
  background-image: linear-gradient(90deg, #c98a1e 0%, #e2ad3f 38%, #4fa9f8 58%, #2f86e0 100%);
  background-size: 200% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: drift-text 6s ease-in-out infinite alternate;
}
@keyframes drift-text { to { background-position: 100% 50%; } }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border: 0; border-radius: 999px;
  background: var(--yellow); color: var(--navy);
  font: inherit; font-size: 0.98rem; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(201, 150, 30, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn:hover { background: var(--yellow-hover); transform: translateY(-1px); }
.btn-glass { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-glass:hover { background: var(--surface-2); }
.btn-small { padding: 9px 16px; font-size: 0.88rem; }

/* Button with a plain trailing arrow that nudges forward on hover */
.btn-arrow { padding: 16px 26px 16px 28px; gap: 10px; font-size: 1.02rem; }
.btn-arrow svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s;
}
.btn-arrow:hover svg { transform: translateX(4px); }
.btn-block { width: 100%; }

/* ---------- Floating navigation ---------- */

/* Sits over the top of the page and scrolls away with it */
.site-header { position: absolute; top: var(--nav-top); left: 16px; right: 16px; z-index: 50; }
.nav-shell {
  position: relative; max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 30px -18px rgba(18, 25, 95, 0.35);
}

.brand { display: inline-flex; flex: none; }
.brand img { height: 26px; width: auto; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 8px 12px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.2s, background 0.2s; }
.site-nav a:hover { color: var(--fg); background: var(--surface-2); }

.nav-actions { display: flex; align-items: center; gap: 8px; }

.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.lang-switch button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; padding: 6px 9px; border-radius: 999px;
}
.lang-switch button[aria-pressed="true"] { background: var(--navy); color: var(--white); }

.nav-toggle { display: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); cursor: pointer; position: relative; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  position: absolute; left: 12px; width: 16px; height: 2px; background: var(--navy); border-radius: 2px; content: ""; transition: transform 0.2s, top 0.2s;
}
.nav-toggle-bar { top: 19px; }
.nav-toggle-bar::before { left: 0; top: -5px; }
.nav-toggle-bar::after { left: 0; top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav-actions { margin-left: auto; }
  .site-nav {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    padding: 10px; border-radius: 24px; background: var(--white); border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { padding: 12px 14px; font-size: 1rem; color: var(--fg); }
}

/* ---------- Hero ---------- */

/* Photo on the right that fades into the white page (left and bottom edges) */
.hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: min(800px, 100svh); padding: calc(var(--nav-top) + 104px) 0 112px;
}
.hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; pointer-events: none; }
.hero-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 30%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 14%, rgba(0, 0, 0, 0.8) 32%, #000 46%),
    linear-gradient(180deg, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 14%, rgba(0, 0, 0, 0.8) 32%, #000 46%),
    linear-gradient(180deg, #000 58%, transparent 100%);
  mask-composite: intersect;
  animation: fade-in 1.2s ease both;
}
@keyframes fade-in { from { opacity: 0; transform: scale(1.03); } }

.hero-inner { position: relative; width: min(1160px, 100% - 32px); }
.hero-copy { max-width: 540px; }
.hero-copy > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.hero-copy > :nth-child(5) { animation-delay: 0.32s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.hero-title { font-size: clamp(2.6rem, 5vw, 4.3rem); line-height: 1.05; letter-spacing: -0.02em; }
.hero-title > span:first-child { display: block; }
.hero-lead { max-width: 32rem; margin: 24px 0 0; font-size: 1.12rem; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

@media (max-width: 1200px) and (min-width: 901px) {
  .hero-copy { max-width: 440px; }
  .hero-title { font-size: clamp(2.4rem, 4.6vw, 3.4rem); }
  .hero-media { width: 58%; }
  .hero-photo { object-position: 72% 30%; }
}

/* Tablet and phone: photo across the top, fading down into the text */
@media (max-width: 900px) {
  .hero { display: block; min-height: 0; padding: 0 0 80px; }
  .hero-media { position: relative; width: 100%; height: clamp(300px, 62vw, 460px); }
  .hero-photo {
    object-position: 50% 35%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .hero-inner { margin-top: -20px; }
  .hero-copy { max-width: none; }
}

/* ---------- Levels and subjects strip (navy band, white text) ---------- */

.marquee { padding: 22px 0; background: var(--navy); overflow: hidden; }
.marquee-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 55s linear infinite; }
.marquee-group { display: flex; align-items: center; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Levels: display type with a yellow square between items */
.marquee-group span {
  display: inline-flex; align-items: center; gap: 18px; padding-right: 40px;
  font-family: var(--font-display); font-size: 1.35rem; color: var(--white); white-space: nowrap;
}
.marquee-group span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--yellow); }

/* Preschool ages (5 and 6): same text, marked with a yellow star instead of a square */
.marquee-group .preschool::before {
  width: 18px; height: 18px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ebc35b' d='M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.3l-5.8 3.1 1.1-6.5-4.7-4.6 6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Subjects: same type as the levels, blue square instead of yellow */
.marquee-group .subject::before { background: var(--blue); }

/* ---------- Sections ---------- */

.section { padding-block: clamp(80px, 11vw, 136px); position: relative; }
.section-tight { padding-block: clamp(64px, 8vw, 104px); }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }

/* Cards share one look; the pointer spotlight comes from main.js (--mx / --my) */
.module, .programme {
  position: relative; border-radius: var(--radius); border: 1px solid var(--line);
  background:
    radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), var(--spot), transparent 45%),
    var(--surface);
  box-shadow: var(--shadow);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.module:hover, .programme:hover { border-color: var(--line-strong); }

/* Approach: Uji, Semak, Bantu on a laptop */
.demo { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center; }

.demo-steps { display: grid; gap: 12px; }
.demo-steps button {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  text-align: left; padding: 18px 20px 20px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); font: inherit; color: inherit;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.demo-steps button:hover { border-color: var(--line-strong); }
.demo-steps button[aria-selected="true"] { border-color: var(--navy); box-shadow: var(--shadow-lg); transform: translateX(6px); }
.demo-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  font-family: var(--font-mono); font-size: 0.8rem; background: var(--inset); color: var(--muted);
}
.demo-steps button[aria-selected="true"] .demo-num { background: var(--yellow); color: var(--navy); }
.demo-step-text { display: grid; gap: 4px; }
.demo-step-text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; color: var(--fg); }
.demo-step-text span { color: var(--muted); font-size: 0.93rem; }
.demo-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.demo-progress i { display: block; height: 100%; width: 0; background: var(--yellow); }
.demo.is-playing .demo-steps button[aria-selected="true"] .demo-progress i { animation: demo-fill var(--demo-ms, 5000ms) linear forwards; }
@keyframes demo-fill { to { width: 100%; } }

/* Laptop frame */
.laptop { min-width: 0; }
.laptop-screen { padding: 14px 14px 18px; border-radius: 22px 22px 6px 6px; background: #0a0d2e; box-shadow: var(--shadow-lg); }
.laptop-base {
  position: relative; height: 16px; margin: 0 -5%; border-radius: 2px 2px 18px 18px;
  background: linear-gradient(180deg, #e4e6ee, #b9bdcc); box-shadow: 0 18px 30px -18px rgba(18, 25, 95, 0.5);
}
.laptop-base span { position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #a8adbf; }

/* App inside the screen */
.app {
  /* Reversed colours: navy screen, white text */
  --fg: var(--white); --text: #e4e7fb; --muted: #bcc2ea; --faint: #8d94cc;
  --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.2);
  --track: rgba(255, 255, 255, 0.12); --bg-alt: rgba(255, 255, 255, 0.05); --panel: rgba(255, 255, 255, 0.08);
  --ok-ink: var(--blue); --ok-bg: rgba(94, 182, 255, 0.16); --help-ink: var(--yellow); --help-bg: rgba(235, 195, 91, 0.16);
  --right: #22c55e; --wrong: #ef4444;
  display: flex; flex-direction: column; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--navy); color: var(--text);
}
.app-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); }
.app-dots { display: flex; gap: 6px; }
.app-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.app-url { flex: 1; font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); padding: 4px 10px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px 1fr; }
.app-side { display: grid; align-content: start; gap: 6px; padding: 16px 12px; border-right: 1px solid var(--line); background: var(--bg-alt); }
.app-side img { height: 20px; width: auto; margin: 0 6px 12px; }
.app-nav { padding: 8px 10px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; color: var(--muted); transition: background 0.25s, color 0.25s; }
.app-nav.is-active { background: var(--white); color: var(--navy); }
.app-main { position: relative; min-width: 0; padding: clamp(14px, 2.2vw, 24px); overflow: hidden; }

.pane { display: grid; gap: 14px; align-content: start; height: 100%; }
.pane[hidden] { display: none; }
.pane.is-active { animation: pane-in 0.45s ease both; }
@keyframes pane-in { from { opacity: 0; transform: translateY(10px); } }
.pane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pane-head h4 { margin: 4px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--fg); }
.pill-soft { font-family: var(--font-mono); font-size: 0.7rem; padding: 4px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); white-space: nowrap; }

/* 1. Uji */
.q-progress { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.q-progress i { display: block; height: 100%; width: 30%; border-radius: inherit; background: var(--blue); }
.pane.is-active .q-progress i { animation: q-grow 1s 0.2s ease both; }
@keyframes q-grow { from { width: 20%; } }
.q-card { padding: clamp(14px, 2vw, 22px); border-radius: 14px; border: 1px solid var(--line); background: var(--bg-alt); }
.q-text { margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--fg); }
.q-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.q-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel);
  font-family: var(--font-mono); font-size: 0.95rem; color: var(--fg);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.q-opt:hover:not(:disabled) { border-color: var(--blue); transform: translateY(-1px); }
.q-opt:disabled { cursor: default; }
.q-opt::after { font-family: var(--font); font-weight: 700; }
.q-opt.is-wrong { background: rgba(239, 68, 68, 0.2); border-color: var(--wrong); animation: shake 0.35s ease; }
.q-opt.is-wrong::after { content: "✕"; color: var(--wrong); }
.q-opt.is-right { background: rgba(34, 197, 94, 0.2); border-color: var(--right); }
.q-opt.is-right::after { content: "✓"; color: var(--right); }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.q-feedback { margin: 0; font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); min-height: 1.4em; }
.q-msg { display: none; align-items: center; gap: 8px; }
.q-msg.is-shown { display: inline-flex; }
.q-msg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.q-msg[data-state="wrong"] { color: #fca5a5; }
.q-msg[data-state="wrong"]::before { background: var(--wrong); }
.q-msg[data-state="right"] { color: #86efac; }
.q-msg[data-state="right"]::before { background: var(--right); }

/* 2. Semak */
.score-big { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; color: var(--fg); }
.score-big small { font-size: 0.5em; color: var(--faint); }
.skill-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.skill-rows li { display: grid; grid-template-columns: 12rem 1fr 9.5rem; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--fg); }
.skill-rows .bar { height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; }
.skill-rows .bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #8ccbff, var(--blue)); }
.skill-rows .bar.is-low i { background: linear-gradient(90deg, #f3d891, var(--yellow)); }
.pane.is-active .skill-rows .bar i { animation: bar-grow 1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes bar-grow { from { width: 0; } }
.skill-rows em { justify-self: end; font-style: normal; font-family: var(--font-mono); font-size: 0.66rem; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.skill-rows .ok { color: var(--ok-ink); background: var(--ok-bg); }
.skill-rows .help { color: var(--help-ink); background: var(--help-bg); }
.trend { margin: 0; display: grid; gap: 4px; }
.trend-chart { width: 100%; height: auto; max-height: 128px; overflow: visible; }
.trend-grid line { stroke: var(--line); stroke-width: 1; }
.trend-axis text { font-family: var(--font-mono); font-size: 10px; fill: var(--faint); }
.trend-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.trend-points circle { fill: var(--blue); stroke: var(--navy); stroke-width: 2; }
.trend-points circle.is-last { fill: var(--yellow); }
.trend-value { font-family: var(--font-display); font-size: 15px; fill: var(--fg); }
.pane.is-active .trend-line { animation: trend-draw 1.2s 0.3s ease both; }
.pane.is-active .trend-area, .pane.is-active .trend-points, .pane.is-active .trend-value { animation: pane-in 0.5s 1.1s ease both; }
@keyframes trend-draw { from { stroke-dashoffset: 1; } }

/* 3. Bantu */
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: plan; }
.plan li {
  position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 52px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel); counter-increment: plan;
}
.plan li::before {
  content: counter(plan); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.75rem; background: var(--yellow); color: var(--navy);
}
.plan strong { font-size: 0.95rem; color: var(--fg); }
.plan span { font-size: 0.84rem; color: var(--muted); }
.pane.is-active .plan li { animation: pane-in 0.4s ease both; }
.pane.is-active .plan li:nth-child(2) { animation-delay: 0.12s; }
.pane.is-active .plan li:nth-child(3) { animation-delay: 0.24s; }
.toast {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  background: var(--white); color: var(--navy); font-size: 0.85rem; font-weight: 600; box-shadow: var(--shadow-lg);
}
.toast-icon { width: 18px; height: 18px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pane.is-active .toast { animation: toast-in 0.5s 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }

@media (max-width: 1200px) {
  .demo { grid-template-columns: 1fr; gap: 28px; }
  .laptop { padding-inline: 4%; }
  .laptop-base { margin: 0 -4.4%; }
  .demo-steps { grid-template-columns: repeat(3, 1fr); }
  .demo-steps button { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .demo-steps button[aria-selected="true"] { transform: none; }
  .demo-step-text span { display: none; }
}
@media (max-width: 900px) {
  .app { aspect-ratio: auto; }
  .app-body { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .app-main { min-height: 360px; }
  .laptop-screen { padding: 8px 8px 12px; border-radius: 14px 14px 4px 4px; }
  .laptop { padding-inline: 3%; }
  .laptop-base { height: 12px; margin: 0 -3.2%; }
  .skill-rows li { grid-template-columns: 1fr auto; row-gap: 6px; }
  .skill-rows .bar { grid-column: 1 / -1; grid-row: 2; }
  .demo-num { width: 32px; height: 32px; }
  .demo-step-text strong { font-size: 1.2rem; }
}

/* Modules: page previews from the real module, opening a full-page viewer */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.module { padding: 0; overflow: hidden; min-width: 0; display: flex; flex-direction: column; }
.module-preview {
  position: relative; display: block; width: 100%; padding: 18px 18px 0; border: 0; cursor: zoom-in;
  background: linear-gradient(180deg, var(--ok-bg), var(--bg-alt)); overflow: hidden;
}
.module-preview img {
  display: block; width: 100%; height: 230px; object-fit: cover; object-position: top center;
  border-radius: 10px 10px 0 0; background: var(--white);
  box-shadow: 0 -2px 0 rgba(18, 25, 95, 0.04), 0 12px 30px -12px rgba(18, 25, 95, 0.35);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.module-preview:hover img, .module-preview:focus-visible img { transform: translateY(-6px) scale(1.02); }
.module-zoom {
  position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; background: var(--navy); color: var(--white);
  font-size: 0.8rem; font-weight: 600; box-shadow: var(--shadow-lg);
}
.module-zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.module-body { padding: 22px 24px 26px; border-top: 1px solid var(--line); }
.module-ref { display: block; color: var(--accent-ink); margin-bottom: 8px; }
.module h3 { font-size: 1.3rem; margin: 0 0 8px; }
.module p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.modules-note { margin: 24px 0 0; text-align: center; font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); }
@media (max-width: 900px) { .modules { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* Full-page viewer */
.page-viewer {
  width: min(760px, 100vw - 24px); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 20px;
  background: var(--white); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden;
}
.page-viewer::backdrop { background: rgba(12, 17, 80, 0.72); backdrop-filter: blur(4px); }
.page-viewer[open] { display: flex; flex-direction: column; animation: pane-in 0.3s ease both; }
.viewer-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.viewer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--fg); }
.viewer-count { white-space: nowrap; }
@media (max-width: 560px) {
  .viewer-bar { gap: 6px; padding: 10px 10px 10px 14px; }
  .viewer-title { font-size: 1rem; }
  .viewer-btn { width: 34px; height: 34px; }
  .viewer-stage { padding: 8px; }
}
.viewer-btn {
  width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; flex: none;
  background: var(--surface-2); color: var(--fg); font-size: 1.4rem; line-height: 1;
}
.viewer-btn:hover:not(:disabled) { background: var(--navy); color: var(--white); }
.viewer-btn:disabled { opacity: 0.35; cursor: default; }
.viewer-stage { min-height: 0; flex: 1; overflow: auto; background: var(--bg-alt); padding: 16px; }
.viewer-img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow); background: var(--white); }
/* Programmes */
.programmes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Preschool card: warm yellow, star badge */
.programme-preschool {
  border: 2px solid var(--yellow);
  background:
    radial-gradient(260px 180px at 100% 0%, rgba(235, 195, 91, 0.45), transparent 70%),
    linear-gradient(160deg, #fff8e6, var(--surface) 70%);
}
.programme-preschool .mono-label { letter-spacing: 0.04em; }
.programme-badge {
  position: absolute; top: -16px; right: 22px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--navy); color: var(--yellow);
  font-family: var(--font-display); font-size: 1rem; box-shadow: var(--shadow);
}
.programme-badge svg { width: 18px; height: 18px; fill: var(--yellow); }
.programme-preschool:hover { border-color: #ddb043; }
.programme { padding: 30px; display: flex; flex-direction: column; min-width: 0; }
.programme:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.programme .mono-label { color: var(--accent-ink); }
.programme h3 { font-size: 1.6rem; margin: 14px 0 10px; }
.programme p { color: var(--muted); margin: 0; }
/* Highlighted test names (MPT4, MPTg3): same gradient type as the hero */
.programme .hl {
  font-weight: 800; white-space: nowrap;
  background-image: linear-gradient(90deg, #c98a1e 0%, #d99a2b 40%, #3d97ec 60%, #2f86e0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 1100px) { .programmes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .programmes { grid-template-columns: 1fr; } }

/* Fee calculator (Yuran 2027): level and subjects on the left, the totals on navy */
.fee-calc {
  max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 0.7fr;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.fc-inputs { padding: clamp(22px, 3.5vw, 36px); display: grid; gap: 28px; align-content: start; min-width: 0; }
.fc-field { display: grid; gap: 12px; }
.fc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.85rem; font-weight: 600; color: var(--fg); }
.fc-hint { font-weight: 500; color: var(--faint); }
.fc-levels {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px;
  border-radius: 16px; background: var(--bg-alt); border: 1px solid var(--line);
}
.fc-levels button {
  border: 0; border-radius: 12px; padding: 12px 8px; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.25; color: var(--muted);
  transition: background 0.2s, color 0.2s;
}
.fc-levels button:hover { color: var(--fg); }
.fc-range { white-space: nowrap; }
.fc-levels button[aria-pressed="true"] { background: var(--navy); color: var(--white); box-shadow: var(--shadow); }
.fc-subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-subject {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--fg);
  transition: border-color 0.2s, background 0.2s;
}
.fc-subject:hover:not(:disabled) { border-color: var(--navy); }
.fc-subject:disabled { cursor: default; }
.fc-check {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; transition: background 0.2s, border-color 0.2s;
}
.fc-check svg { width: 14px; height: 14px; fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.fc-subject[aria-pressed="true"] { background: var(--help-bg); border-color: var(--yellow); }
.fc-subject[aria-pressed="true"] .fc-check { background: var(--yellow); border-color: var(--yellow); }
.fc-subject[aria-pressed="true"] .fc-check svg { opacity: 1; }

.fc-result {
  padding: clamp(22px, 3.5vw, 36px); display: grid; gap: 22px; align-content: start; min-width: 0;
  background: radial-gradient(320px 220px at 100% 0%, rgba(94, 182, 255, 0.22), transparent 70%), var(--navy);
}
.fc-total + .fc-total { padding-top: 22px; border-top: 1px solid var(--line); }
.fc-total .mono-label { color: var(--yellow); }
.fc-amount { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; color: var(--fg); }
.fc-amount-sm { font-size: 2.1rem; }
.fc-amount em { font-family: var(--font); font-style: normal; font-size: 0.95rem; color: var(--muted); }
.fc-note { margin: 10px 0 0; font-size: 0.9rem; color: var(--muted); }
.fc-breakdown { display: grid; gap: 6px; margin: 14px 0 0; font-size: 0.9rem; }
.fc-breakdown div { display: flex; justify-content: space-between; gap: 12px; }
.fc-breakdown dt { color: var(--muted); }
.fc-breakdown dd { margin: 0; font-weight: 700; color: var(--fg); white-space: nowrap; }
.fc-empty { grid-column: 1 / -1; margin: 0; padding: 24px; text-align: center; color: var(--muted); }
@media (max-width: 860px) { .fee-calc { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 560px) { .fc-levels { grid-template-columns: repeat(2, 1fr); } }

/* Registration gifts background: a soft brand glow and a doodle pattern of the logo's blue
   square and yellow V. The pattern starts at the centre line and is mirrored on the left, and it
   fades towards the middle so the heading, products and button stay clear. */
.gifts-section {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 46% 40% at 50% 64%, rgba(94, 182, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 30% 22% at 50% 86%, rgba(235, 195, 91, 0.16), transparent 70%),
    var(--bg);
}
.gifts-section > .container { position: relative; z-index: 1; }
.gifts-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7; }
.gifts-deco::before, .gifts-deco::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 50%;
  background: url("../img/hadiah/doodles.svg") 0 0 / 320px 320px repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 88%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 88%);
}
.gifts-deco::before { left: 0; transform: scaleX(-1); }
@media (max-width: 640px) {
  .gifts-deco { opacity: 0.5; }
  .gifts-deco::before, .gifts-deco::after { background-size: 240px 240px; }
}

/* Registration gifts: the tote bag and tumbler float side by side, leaning away from each other
   (the images are tilted to mirror one another), and bob together over a soft shadow */
.gifts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 820px; margin: 0 auto; }
.gift { --tilt: -1; position: relative; min-width: 0; height: clamp(200px, 36vw, 360px); display: flex; align-items: center; justify-content: center; }
.gift + .gift { --tilt: 1; }
.gift img {
  position: relative; z-index: 1; width: auto; height: auto; max-width: 100%; max-height: 100%;
  filter: drop-shadow(0 18px 20px rgba(18, 25, 95, 0.16));
  animation: gift-float 4s ease-in-out infinite alternate;
}
.gift::after {
  content: ""; position: absolute; left: 50%; bottom: -22px; width: 58%; height: 22px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(18, 25, 95, 0.2), transparent);
  transform: translateX(-50%); animation: gift-shadow 4s ease-in-out infinite alternate;
}
@keyframes gift-float { to { transform: translateY(-14px) rotate(calc(var(--tilt) * 1.5deg)); } }
@keyframes gift-shadow { to { opacity: 0.55; transform: translateX(-50%) scale(0.82); } }
.gifts-cta { margin-top: 56px; text-align: center; }
@media (max-width: 640px) { .gifts { gap: 16px; } }

/* Jadual 2027 (timetable): age dropdown, group toggle, list of days */
.jadual { max-width: 860px; margin: 0 auto; }
#jadual-view { display: grid; gap: 24px; }
.jv-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px; }
.jv-select { display: grid; gap: 6px; min-width: min(360px, 100%); }
.jv-select span { font-size: 0.85rem; font-weight: 600; color: var(--fg); }
.jv-select select {
  appearance: none; -webkit-appearance: none; width: 100%; cursor: pointer;
  padding: 14px 46px 14px 18px; border-radius: 14px; border: 1px solid var(--line-strong);
  font: inherit; font-size: 1.02rem; font-weight: 600; color: var(--fg);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312195f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat;
  box-shadow: var(--shadow); transition: border-color 0.2s, box-shadow 0.2s;
}
.jv-select select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(94, 182, 255, 0.22); }

.jv-groups { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.jv-groups button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 600; padding: 10px 20px; border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.jv-groups button[aria-pressed="true"] { background: var(--navy); color: var(--white); }

.jv-card {
  padding: clamp(20px, 3vw, 32px); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: grid; gap: 20px;
}
.jv-card h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* Kumpulan colours: A yellow, B blue (card tint, top bar, toggle) */
.jv-card { position: relative; overflow: hidden; }
.jv-card[data-group]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; }
.jv-card[data-group="A"] { border-color: rgba(235, 195, 91, 0.75); background: linear-gradient(180deg, var(--help-bg), var(--surface) 220px); }
.jv-card[data-group="A"]::before { background: var(--yellow); }
.jv-card[data-group="B"] { border-color: rgba(94, 182, 255, 0.75); background: linear-gradient(180deg, var(--ok-bg), var(--surface) 220px); }
.jv-card[data-group="B"]::before { background: var(--blue); }
.jv-card[data-group] .jv-dayblock { background: rgba(255, 255, 255, 0.7); }
.jv-groups button[data-group="A"][aria-pressed="true"] { background: var(--yellow); color: var(--navy); }
.jv-groups button[data-group="B"][aria-pressed="true"] { background: var(--blue); color: var(--navy); }

/* Group descriptions (5 Tahun – Darjah 1 only) */
.jv-notes { list-style: none; margin: -6px 0 0; padding: 0; display: grid; gap: 6px; }
.jv-notes li { position: relative; padding-left: 20px; font-size: 0.95rem; color: var(--text); }
/* The group not selected fades to grey, dot and label included */
.jv-notes li:not(.is-current) { filter: grayscale(1); opacity: 0.45; }
.jv-notes li::before {
  content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 9px; border-radius: 50%;
  background: var(--yellow);
}
.jv-notes li[data-group="B"]::before { background: var(--blue); }
.jv-notes b { color: var(--fg); margin-right: 4px; }
.jv-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.jv-dayblock { padding: 16px; border-radius: 18px; background: var(--bg-alt); border: 1px solid var(--line); min-width: 0; }
.jv-dayblock h4 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--fg); }
.jv-dayblock ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jv-session {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
  padding: 12px 14px 12px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); overflow: hidden;
}
.jv-session::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.jv-subject { font-weight: 700; color: var(--fg); font-size: 0.95rem; }
.jv-time { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.jv-book { justify-self: start; }
.jv-empty { color: var(--muted); margin: 0; text-align: center; }

@media (max-width: 560px) {
  .jv-controls { justify-content: stretch; }
  .jv-select, .jv-groups { width: 100%; }
  .jv-groups button { flex: 1; }
}

/* ---------- Landing pages with the sign-up form: free-trial-class/ and biasiswa/ ---------- */

/* Pinned bar at the top of the screen; pages with it move the floating navigation below it */
.promo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; margin: 0;
  height: calc(env(safe-area-inset-top, 0px) + var(--promo-h)); padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 0 10px;
  background: var(--navy); color: var(--white); text-align: center; font-size: 0.9rem; line-height: 1.3;
}
.promo-bar strong { display: inline-flex; align-items: center; gap: 8px; color: var(--yellow); letter-spacing: 0.04em; }
.promo-bar strong::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); animation: promo-pulse 1.6s ease-in-out infinite; }
@keyframes promo-pulse { 50% { opacity: 0.35; } }
.promo-bar span { color: #d9ddf6; }
.has-promo-bar { --promo-h: 42px; --nav-top: calc(env(safe-area-inset-top, 0px) + var(--promo-h) + 12px); }
.has-promo-bar .trial-card { scroll-margin-top: calc(var(--promo-h) + 20px); }
@media (max-width: 640px) {
  .has-promo-bar { --promo-h: 50px; }
  .promo-bar { flex-direction: column; font-size: 0.8rem; }
}
/* Small phones: room for a longer message to wrap onto a third line */
@media (max-width: 360px) { .has-promo-bar { --promo-h: 64px; } }

/* Offer on the left, form card on the right, over a soft brand glow */
.trial-hero { position: relative; overflow: hidden; padding: calc(var(--nav-top) + 112px) 0 clamp(64px, 8vw, 104px); }
.trial-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 50% at 82% 30%, rgba(94, 182, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 34% 40% at 8% 90%, rgba(235, 195, 91, 0.18), transparent 70%);
}
/* Wide screens: heading, photo and reasons on the left; the form stays in view on the right.
   Phones: heading, photo (in place of the subheadline), form, then reasons. */
.trial-layout {
  position: relative; display: grid; grid-template-columns: 1fr minmax(0, 520px);
  grid-template-areas: "intro card" "photo card" "more card"; column-gap: clamp(32px, 5vw, 72px); row-gap: 32px; align-items: start;
}
.trial-intro { grid-area: intro; padding-top: 12px; }
.trial-more { grid-area: more; }
.trial-card { grid-area: card; }
/* Only stays in view when the window is tall enough to show the whole card */
@media (min-width: 901px) and (min-height: 920px) { .trial-card { position: sticky; top: 24px; } }
@media (min-width: 901px) and (min-height: 920px) { .has-promo-bar .trial-card { top: calc(var(--promo-h) + 24px); } }
.trial-intro > *, .trial-photo, .trial-more { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.trial-intro > :nth-child(2) { animation-delay: 0.08s; }
.trial-intro > :nth-child(3) { animation-delay: 0.16s; }
.trial-photo { animation-delay: 0.2s; }
.trial-more { animation-delay: 0.24s; }
.trial-title > span { display: block; }
.trial-title-long { font-size: clamp(2.3rem, 4.2vw, 3.6rem); }
.trial-intro .hero-lead { max-width: 28rem; font-size: 1.22rem; color: var(--text); }
.trial-photo {
  grid-area: photo; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
/* Biasiswa photo: shown whole (3:2) */
.trial-photo-wide { aspect-ratio: 3 / 2; }
.trial-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 34rem; }
.trial-perks li { position: relative; display: grid; gap: 2px; padding-left: 40px; }
.trial-perks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 8px;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312195f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.trial-perks strong { color: var(--fg); font-size: 1.02rem; }
.trial-perks span { color: var(--muted); font-size: 0.95rem; }

.trial-card {
  scroll-margin-top: 20px; padding: clamp(22px, 3.5vw, 36px); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  animation: rise 0.9s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (max-width: 900px) {
  .trial-hero { padding-top: calc(var(--nav-top) + 92px); }
  .trial-layout { grid-template-columns: 1fr; grid-template-areas: "intro" "photo" "card" "more"; row-gap: 24px; }
  .trial-intro .hide-on-phone { display: none; }
  .trial-photo { max-width: 560px; margin-inline: auto; }
  .trial-card { max-width: 560px; width: 100%; margin-inline: auto; }
  .trial-more { max-width: 560px; width: 100%; margin-inline: auto; padding-top: 16px; }
}

/* Form: fields, chips and choices */
.tf { display: grid; gap: 24px; }
.tf[hidden] { display: none; }
.tf:not(.is-stepped) .tf-label-next { display: none; }

.tf-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 20px; }
.tf-step[hidden] { display: none; }
.tf.is-stepped .tf-step:not([hidden]) { animation: pane-in 0.35s ease both; }
.tf-legend:focus { outline: none; }
.tf-legend { padding: 0; margin-bottom: 20px; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.1; color: var(--fg); }

.tf-field { display: grid; gap: 8px; min-width: 0; }
fieldset.tf-field { border: 0; margin: 0; padding: 0; }
.tf-field > label, .tf-group > legend { padding: 0; font-size: 0.9rem; font-weight: 600; color: var(--fg); }
.tf-group > legend { margin-bottom: 8px; }
.tf-hint { margin: 0; font-size: 0.84rem; color: var(--muted); }
.tf-group > .tf-hint { margin-top: -6px; }

.tf input[type="text"], .tf input[type="email"], .tf input[type="tel"], .tf-select {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-strong);
  font: inherit; font-size: 1rem; color: var(--fg); background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tf input::placeholder { color: var(--faint); }
.tf input[type="text"]:focus, .tf input[type="email"]:focus, .tf-select:focus, .tf-phone:focus-within {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(94, 182, 255, 0.22);
}
.tf-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 46px; font-weight: 600;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312195f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat;
}
.tf-select:invalid { color: var(--faint); font-weight: 500; }
.tf-select option { color: var(--fg); }

/* Phone: country (flag + dial code, native select on top) joined to the number */
.tf-phone {
  display: flex; align-items: stretch; border-radius: 14px; border: 1px solid var(--line-strong);
  background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s;
}
.tf-country {
  position: relative; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px;
  border-right: 1px solid var(--line); border-radius: 14px 0 0 14px; background: var(--bg-alt);
}
.tf-flag { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(18, 25, 95, 0.12); }
.tf-dial { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.tf-country svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tf-country select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 1rem; }
.tf-country:has(select:focus-visible) { box-shadow: inset 0 0 0 2px var(--blue); }
.tf .tf-phone input[type="tel"] { flex: 1; min-width: 0; border: 0; border-radius: 0 14px 14px 0; background: transparent; box-shadow: none; }
.tf .tf-phone input[type="tel"]:focus { outline: none; }

/* Subjects as tickable chips */
.tf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); font-size: 0.95rem; font-weight: 600; color: var(--fg);
  transition: border-color 0.2s, background 0.2s;
}
.tf-chip[hidden] { display: none; }
.tf-chip:hover { border-color: var(--navy); }
.tf-chip input, .tf-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tf-tick {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none;
  transition: background 0.2s, border-color 0.2s;
}
.tf-chip:has(input:checked) { background: var(--help-bg); border-color: var(--yellow); }
.tf-chip:has(input:checked) .tf-tick {
  border-color: var(--yellow);
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312195f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.tf-chip:has(input:focus-visible), .tf-choice:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.tf-empty { margin: 0; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line-strong); font-size: 0.9rem; color: var(--muted); }

/* Yes / No as two large choices */
.tf-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tf-choice {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); font-weight: 700; color: var(--fg);
  transition: border-color 0.2s, background 0.2s;
}
.tf-choice::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tf-choice:hover { border-color: var(--navy); }
.tf-choice:has(input:checked) { border-color: var(--navy); background: var(--ok-bg); }
.tf-choice:has(input:checked)::before { border-color: var(--navy); box-shadow: inset 0 0 0 5px var(--white); background: var(--navy); }

/* Errors: red outline and a message under the field */
.tf-error { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--error-ink); }
.tf-error:empty { display: none; }
.tf-error::before { content: "!"; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 7px; border-radius: 50%; background: var(--error-ink); color: var(--white); font-size: 0.7rem; vertical-align: 1px; }
.tf-field.is-invalid input[type="text"], .tf-field.is-invalid input[type="email"], .tf-field.is-invalid .tf-select,
.tf-field.is-invalid .tf-phone, .tf-field.is-invalid .tf-tick, .tf-field.is-invalid .tf-choice { border-color: var(--error-ink); }
.tf-field.is-invalid input[type="text"]:focus, .tf-field.is-invalid input[type="email"]:focus,
.tf-field.is-invalid .tf-select:focus, .tf-field.is-invalid .tf-phone:focus-within { box-shadow: 0 0 0 4px rgba(200, 50, 59, 0.16); }
.tf-typo { color: var(--fg); }
.tf-typo button { border: 0; padding: 0; background: none; font: inherit; font-weight: 700; color: var(--accent-ink); text-decoration: underline; cursor: pointer; }

/* Summary before sending */
.tf-review { padding: 16px 18px; border-radius: 16px; background: var(--bg-alt); border: 1px solid var(--line); }
.tf-review .mono-label { display: block; margin-bottom: 8px; }
.tf-review dl { margin: 0; display: grid; }
.tf-review dl > div { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.tf-review dl > div:first-child { border-top: 0; }
.tf-review dt { color: var(--muted); }
.tf-review dd { margin: 0; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.tf-edit { border: 0; padding: 0; background: none; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--accent-ink); cursor: pointer; text-decoration: underline; }
@media (max-width: 480px) {
  .tf-review dl > div { grid-template-columns: 1fr auto; }
  .tf-review dd { grid-column: 1; }
  .tf-review .tf-edit { grid-row: 1; grid-column: 2; }
}

.tf-status { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--error-bg); color: var(--error-ink); font-size: 0.92rem; font-weight: 600; }
.tf-status a { color: inherit; }

.tf-nav { display: flex; justify-content: space-between; gap: 12px; }
.tf-nav #tf-next { margin-left: auto; }
.tf-nav .btn:disabled { opacity: 0.7; cursor: progress; transform: none; }
.tf-nav [hidden] { display: none; }
@media (max-width: 480px) {
  .tf-nav { flex-direction: column-reverse; }
  .tf-nav .btn { width: 100%; }
}

/* Bots fill this in; people never see it */
.tf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sent */
.tf-done { display: grid; justify-items: center; gap: 14px; padding: 24px 0 8px; text-align: center; animation: pane-in 0.4s ease both; }
.tf-done:focus { outline: none; }
.tf-done[hidden] { display: none; }
.tf-done h2 { font-size: clamp(1.8rem, 3.4vw, 2.3rem); }
.tf-done p { margin: 0 0 8px; max-width: 34ch; color: var(--muted); }
.tf-done-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312195f' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 30px no-repeat;
  box-shadow: 0 10px 26px -12px rgba(201, 150, 30, 0.75);
}


/* FAQ */
.faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.faq-head { position: sticky; top: 32px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative; padding: 22px 48px 22px 0;
  font-weight: 600; font-size: 1.05rem; color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; font-size: 1.1rem; color: var(--fg); transition: transform 0.25s, background 0.25s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--yellow); border-color: var(--yellow); }
.faq details p { color: var(--muted); padding-bottom: 22px; margin: 0; max-width: 60ch; }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .faq-head { position: static; }
}

/* Footer (navy band) */
.site-footer { padding-block: 64px 32px; overflow: hidden; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.footer-tagline { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; max-width: 22ch; margin: 0; color: var(--fg); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.footer-links a:hover { color: var(--fg); }
.footer-wordmark {
  width: 100%; height: auto; margin: 56px 0 28px; opacity: 0.16;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
  mask-image: linear-gradient(180deg, #000 40%, transparent);
}
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--faint); font-size: 0.88rem; }
.footer-bottom p { margin: 0; }

/* WhatsApp button */
.whatsapp-fab {
  position: fixed; right: 20px; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366;
  display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.6);
  transition: transform 0.2s;
}
.whatsapp-fab:hover { transform: scale(1.06); }
.whatsapp-fab svg { width: 30px; height: 30px; fill: var(--white); }

/* ---------- Scroll reveal (browsers with scroll-driven animations) ---------- */

@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes reveal { from { opacity: 0.2; transform: translateY(28px); } }
}

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