/* Hero awam Exam360+: pemasa peperiksaan dan dewan maya 3D. */
/* Rujukan menggunakan fallback sistem: Segoe UI di Windows, dengan tajuk Black 900. */
.landing-page { --font-sans:"Segoe UI",ui-sans-serif,system-ui,sans-serif; --landing-ink:#182652; --landing-accent:#4169e1; --landing-tint:#eef2ff; min-height:100dvh; display:flex; flex-direction:column; font-family:var(--font-sans); background:var(--surface-2); }
.landing-page :is(h1,h2,h3,p,figure) { margin:0; }
.landing-page a { text-underline-offset:5px; }
.landing-page [id] { scroll-margin-top:7rem; }
.landing-container { width:min(100% - 5rem,1320px); margin-inline:auto; }
.landing-header { position:relative; z-index:35; background:var(--surface); border-bottom:1px solid var(--border); }
.landing-nav { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.landing-nav-actions { display:flex; align-items:center; gap:1rem; margin-left:auto; }
.landing-nav-actions .theme-control { border:0; background:transparent; }
.landing-nav-actions .theme-control select { max-width:108px; }
.landing-page .btn { min-height:48px; gap:.8rem; font-size:.8125rem; font-weight:900; border-radius:11px; }
.landing-page .btn-primary { background:var(--landing-accent); color:#fff; border-color:var(--landing-accent); box-shadow:0 5px 16px rgb(52 85 206 / .14); }
.landing-header-access { background:transparent!important; color:var(--text)!important; border-color:var(--border-strong)!important; box-shadow:none!important; }
.landing-hero { position:relative; flex:1; display:grid; align-items:center; overflow:hidden; padding:clamp(3rem,6vw,6rem) 0; background:radial-gradient(ellipse at 85% 35%,rgb(113 149 220 / .15),transparent 55%),linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px),var(--surface-2); background-size:auto,64px 64px,64px 64px,auto; }
.landing-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,var(--surface-2) 5%,transparent 70%),linear-gradient(0deg,var(--surface-2),transparent 50%); }
.landing-hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:3.5rem; align-items:center; }
.landing-eyebrow { color:var(--text-muted); font-size:.625rem; font-weight:700; line-height:1.6; letter-spacing:.12em; }
.landing-hero-copy > .landing-eyebrow { display:flex; align-items:center; gap:.6rem; font-size:.6875rem; font-weight:550; letter-spacing:.025em; }
.landing-hero-copy > .landing-eyebrow::before { content:""; width:22px; height:2px; background:var(--brand-strawberry); flex:none; }
.landing-page .landing-hero-copy h1 { color:var(--landing-ink); font-size:clamp(3rem,4.35vw,4.5rem); line-height:.98; letter-spacing:-.065em; font-weight:900; margin:1.65rem 0 1.4rem; text-wrap:balance; }
.landing-hero-copy h1 > span { color:var(--landing-accent); }
.landing-lead { color:var(--text-muted); font-size:.9375rem; font-weight:600; line-height:1.9; max-width:49ch; text-wrap:pretty; }
.landing-hero-actions { display:flex; align-items:center; gap:1.5rem; margin-top:1.85rem; flex-wrap:wrap; }
.landing-text-link { display:inline-flex; align-items:center; gap:.75rem; min-height:44px; color:var(--landing-ink); font-size:.8125rem; font-weight:900; text-decoration:none; }
.landing-hero-note { display:flex; align-items:center; gap:.45rem; color:var(--text-muted); font-size:.6875rem; margin-top:1.5rem!important; line-height:1.7; }
.landing-hero-note .icon { width:16px; height:16px; color:var(--success); }
.landing-demo-card { min-width:0; position:relative; padding:.65rem; border:1px solid var(--border-strong); border-radius:24px; background:var(--surface); box-shadow:0 24px 60px -28px rgb(24 38 82 / .28),0 3px 15px rgb(24 38 82 / .04); }
.landing-demo-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.85rem .75rem 1rem; }
.landing-page .landing-demo-heading h2 { color:var(--landing-ink); font-size:1rem; letter-spacing:-.03em; font-weight:700; margin-top:.15rem; }
.demo-badge { display:flex; gap:.4rem; align-items:center; font-size:.625rem; font-weight:600; color:var(--success); border:1px solid var(--success-border); background:var(--success-bg); padding:.4rem .6rem; border-radius:7px; }
.demo-badge > span { width:5px; height:5px; border-radius:50%; background:currentColor; }
.landing-demo-scene.lab-host { height:clamp(350px,29vw,440px); border:0; border-radius:15px; }
.landing-demo-scene .lab-legend,.landing-demo-scene .lab-tags { display:none; }
.landing-demo-scene .lab-hud { justify-content:center; gap:4px; }
.landing-demo-scene .lab-hud > :nth-child(n+4) { display:none; }
.landing-demo-scene .lab-btn { min-height:36px; border-radius:8px; font-size:.625rem; padding:.4rem .7rem; }
.landing-demo-fallback { display:block; width:100%; height:100%; object-fit:cover; }
.is-demo-ready .landing-demo-fallback { display:none; }
.landing-demo-loading,.landing-demo-paused { position:absolute; inset:auto .75rem 3.5rem; padding:.6rem; text-align:center; border-radius:8px; color:#182652; background:#f6f8fc; font-size:.6875rem; box-shadow:0 3px 10px rgb(24 38 82 / .08); }
.landing-demo-paused { inset:1rem auto auto 1rem; }
.is-demo-paused .lab-canvas { pointer-events:none; }
.is-demo-paused .lab-hud { visibility:hidden; }
.landing-demo-summary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; padding:1rem .65rem; font-size:.6875rem; border-bottom:1px solid var(--border); color:var(--text-muted); }
.landing-demo-summary > span { display:inline-flex; align-items:center; gap:.35rem; }
.landing-demo-summary strong { color:var(--text); font-size:.75rem; font-weight:650; }
.demo-dot { width:6px; height:6px; border-radius:50%; flex:none; }
.demo-dot-green { background:#1b8f5f; }.demo-dot-amber { background:#d9920a; }.demo-dot-pink { background:#c0479e; }
.landing-demo-caption { display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:44px; padding:.2rem .6rem; }
.landing-demo-caption > p { color:var(--text-muted); font-size:.6875rem; line-height:1.6; max-width:40ch; }
.demo-play { flex:none; display:inline-flex; align-items:center; min-height:44px; border:0; background:transparent; padding:.5rem .1rem .5rem .5rem; color:var(--landing-ink); font-size:.6875rem; font-weight:600; cursor:pointer; }
.hero-enter { animation:landing-enter 500ms var(--ease-out) both; }
.landing-hero-copy > :nth-child(2) { animation-delay:50ms; }.landing-hero-copy > :nth-child(3) { animation-delay:100ms; }.landing-hero-copy > :nth-child(4) { animation-delay:150ms; }.landing-hero-copy > :nth-child(5) { animation-delay:200ms; }.landing-demo-card { animation-delay:100ms; }
@keyframes landing-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (hover:hover) and (pointer:fine) { .landing-text-link:hover,.demo-play:hover { color:var(--landing-accent); text-decoration:underline; }.landing-page .btn-primary:hover { background:#2947b7; border-color:#2947b7; } }
:root[data-theme="dark"] .landing-page { --landing-ink:#e2e9ff; --landing-accent:#a6bbff; --landing-tint:#1e2c49; }
:root[data-theme="dark"] .landing-page .btn-primary { color:#162347; }
:root[data-theme="dark"] .landing-header-access { background:transparent!important; color:var(--text)!important; border-color:var(--border-strong)!important; }
@media (hover:hover) and (pointer:fine) { :root[data-theme="dark"] .landing-page .btn-primary:hover { color:#fff; } }
@media (prefers-color-scheme:dark) and (hover:hover) and (pointer:fine) { :root:not([data-theme]) .landing-page .btn-primary:hover { color:#fff; } }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) .landing-page { --landing-ink:#e2e9ff; --landing-accent:#a6bbff; --landing-tint:#1e2c49; }:root:not([data-theme]) .landing-page .btn-primary { color:#162347; }:root:not([data-theme]) .landing-header-access { background:transparent!important; color:var(--text)!important; border-color:var(--border-strong)!important; } }
@media (prefers-reduced-motion:reduce) { .landing-page .hero-enter { animation:none; transform:none; opacity:1; }.landing-page { scroll-behavior:auto; } }

.landing-page > main { display:flex; flex:1; }
.landing-brand { flex:none; }
.landing-lead strong { color:var(--text); font-weight:600; }
.landing-lead p + p { margin-top:.9rem; }
.landing-hero-note { align-items:start; max-width:48ch; }
.landing-hero-note .icon { flex:none; margin-top:2px; }
@media (hover:hover) and (pointer:fine) { .landing-page .landing-header-access:hover { background:var(--surface-3)!important; } }
@media (max-width:1100px) {
  .landing-container { width:calc(100% - 3rem); }.landing-hero-grid { gap:2rem; }.landing-demo-summary { gap:.5rem; padding-inline:.3rem; }
  .landing-demo-caption { flex-wrap:wrap; gap:0; }.landing-demo-caption > p { max-width:none; flex:1 1 200px; }.landing-demo-caption > button { margin-left:auto; }
}
@media (max-width:860px) {
  .landing-hero-grid { grid-template-columns:1fr; gap:2.5rem; }.landing-hero-copy { max-width:600px; }.landing-page .landing-hero-copy h1 { font-size:clamp(3rem,7.5vw,4.2rem); }
  .landing-lead { max-width:55ch; }.landing-demo-scene.lab-host { height:420px; }.landing-demo-heading { padding:1rem; }.landing-demo-caption { flex-wrap:nowrap; }.landing-demo-caption > p { flex:1; }
}
@media (max-width:600px) {
  .landing-container { width:calc(100% - 2rem); }.landing-nav { min-height:72px; gap:.5rem; }.landing-brand .exam360-wordmark { font-size:1.45rem; }
  .landing-nav-actions { gap:.35rem; }.landing-nav-actions .theme-control { padding-left:0; }.landing-nav-actions .theme-control .icon { display:none; }
  .landing-nav-actions .theme-control select { width:76px; font-size:.625rem; }.landing-page .landing-header-access { font-size:.625rem; min-height:40px; padding:.55rem .65rem; gap:.4rem; }.landing-header-access > span { display:none; }
  .landing-hero { padding:2.5rem 0; }.landing-hero-grid { gap:2rem; }.landing-hero-copy > .landing-eyebrow { font-size:.625rem; }
  .landing-page .landing-hero-copy h1 { font-size:clamp(2.65rem,10.5vw,3.6rem); margin:1.1rem 0 1.25rem; }.landing-lead { font-size:.875rem; line-height:1.85; }
  .landing-hero-actions { margin-top:1.5rem; gap:1.25rem; }.landing-hero-actions .btn { font-size:.75rem; padding-inline:1rem; }.landing-hero-actions .landing-text-link { font-size:.75rem; gap:.5rem; }
  .landing-hero-note { margin-top:1rem!important; font-size:.625rem; }.landing-demo-card { padding:.45rem; border-radius:18px; }.landing-demo-heading { padding:.65rem .5rem .85rem; }
  .landing-page .landing-demo-heading h2 { font-size:.875rem; }.landing-demo-heading .landing-eyebrow { font-size:.625rem; }.landing-demo-scene.lab-host { height:300px; border-radius:11px; }
  .landing-demo-summary { justify-content:start; gap:.5rem .9rem; padding:.8rem .4rem; font-size:.625rem; }.landing-demo-summary strong { font-size:.6875rem; }
  .landing-demo-caption { padding-inline:.4rem; gap:.4rem; }.landing-demo-caption > p,.demo-play { font-size:.625rem; }
}
@media (max-width:380px) { .landing-nav-actions .theme-control select { width:62px; }.landing-nav-actions { gap:.15rem; }.landing-page .landing-header-access { padding-inline:.5rem; } }