:root {
  --bg: #f3f4fa;
  --surface: #ffffff;
  --surface-soft: #f7f8fc;
  --surface-dark: #071537;
  --surface-dark-2: #0b1b48;
  --line: #e1e6f2;
  --text: #111a38;
  --muted: #5d6889;
  --purple: #7856ff;
  --purple-2: #9f6bff;
  --purple-3: #c48dff;
  --cyan: #52d1ff;
  --green: #24b36b;
  --orange: #ff9f43;
  --radius: 18px;
  --shadow: 0 18px 45px rgba(22, 33, 72, 0.08);
  --shadow-deep: 0 32px 70px rgba(6, 14, 38, 0.22);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #f5f6fb 0%, #eef2f9 100%);
  line-height: 1.5;
}
a { color: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.topbar { background: linear-gradient(180deg, #07112e, #09173c); color: white; border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0; z-index: 10; }
.nav { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-mark { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--purple), var(--purple-2)); box-shadow: 0 12px 32px rgba(120, 86, 255, 0.32); display: grid; place-items: center; color: white; font-weight: 900; font-size: 22px; }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { font-size: 18px; font-weight: 900; }
.brand-copy span { font-size: 12px; color: rgba(255,255,255,0.78); }
.nav-links { display: flex; align-items: center; gap: 28px; color: rgba(255,255,255,0.84); font-size: 14px; font-weight: 700; }
.nav-links a { text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; text-decoration: none; font-weight: 800; min-height: 46px; padding: 0 18px; border: 1px solid transparent; }
.btn.link { color: white; }
.btn.primary { color: white; background: linear-gradient(135deg, var(--purple), var(--purple-2)); box-shadow: 0 14px 30px rgba(120, 86, 255, 0.24); }
.btn.secondary { color: white; background: transparent; border-color: rgba(255,255,255,0.22); }
.hero { background: linear-gradient(180deg, #08163b 0%, #091641 100%); color: white; padding: 28px 0 26px; }
.hero-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: stretch; }
.hero-copy, .hero-panel { border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); box-shadow: var(--shadow-deep); }
.hero-copy { padding: 28px; }
.eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.eyebrow-badge { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); color: white; font-weight: 900; background: rgba(255,255,255,0.04); }
.eyebrow-text { color: rgba(255,255,255,0.88); font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 800; }
.hero h1 { margin: 0; font-size: clamp(40px, 5.8vw, 68px); line-height: 0.96; letter-spacing: -0.05em; }
.hero h1 .accent { color: var(--purple-2); }
.hero p { color: rgba(255,255,255,0.84); font-size: 18px; margin: 18px 0 0; max-width: 620px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-feature-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.hero-feature { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; color: rgba(255,255,255,0.92); font-size: 13px; font-weight: 700; }
.feature-icon { width: 24px; height: 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; color: var(--purple-3); font-size: 13px; }
.hero-panel { padding: 14px; }
.sim-shell { height: 100%; min-height: 380px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: radial-gradient(circle at 88% 20%, rgba(120,86,255,0.16), transparent 18%), linear-gradient(180deg, #0b1843, #081330); padding: 14px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; }
.sim-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sim-title { font-weight: 800; font-size: 15px; }
.sim-status { display: flex; gap: 12px; align-items: center; color: rgba(255,255,255,0.84); font-size: 12px; }
.dot { width: 9px; height: 9px; border-radius: 999px; background: #00d07d; box-shadow: 0 0 14px rgba(0,208,125,0.5); }
.end-btn { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.03); color: white; font-weight: 800; }
.sim-body { display: grid; grid-template-columns: 1.1fr 0.45fr; gap: 12px; }
.video-panel { border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.04); }
.video-stage { height: 234px; position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent), linear-gradient(180deg, #8ea8c2, #506785 45%, #29384f); }
.video-stage::before { content: ""; position: absolute; inset: 18px 14px 18px 14px; border-radius: 10px; background: radial-gradient(circle at 52% 48%, rgba(255,255,255,0.28), transparent 18%), linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02)); }
.nurse { position: absolute; left: 62px; bottom: 20px; width: 84px; height: 156px; border-radius: 50px 50px 20px 20px; background: linear-gradient(180deg, #335f95 0 26%, #487dc2 26% 64%, #243c5d 64%); box-shadow: inset 0 -16px 0 rgba(0,0,0,0.18); }
.nurse::before { content: ""; position: absolute; left: 24px; top: -26px; width: 34px; height: 34px; border-radius: 50%; background: #e6c3ae; }
.nurse::after { content: ""; position: absolute; left: 20px; top: -20px; width: 42px; height: 20px; border-radius: 60% 60% 40% 40%; background: #30232e; }
.bed { position: absolute; right: 54px; bottom: 34px; width: 182px; height: 52px; border-radius: 14px; background: #ced7e2; box-shadow: 0 8px 22px rgba(0,0,0,0.2); }
.bed::before { content: ""; position: absolute; left: 26px; top: -10px; width: 112px; height: 30px; border-radius: 999px; background: #e7ecf2; }
.bed::after { content: ""; position: absolute; right: 20px; top: -14px; width: 34px; height: 34px; border-radius: 50%; background: #dcbca8; box-shadow: -34px 7px 0 18px #f1f4f8; }
.monitor { position: absolute; width: 60px; height: 42px; border-radius: 8px; background: #182743; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
.monitor::before { content: ""; position: absolute; inset: 8px; border-radius: 4px; background: linear-gradient(90deg, transparent 0 10%, rgba(82,209,255,0.8) 10% 12%, transparent 12% 20%, rgba(82,209,255,0.9) 20% 24%, transparent 24%), linear-gradient(180deg, rgba(255,255,255,0.06), transparent); }
.monitor.one { right: 22px; top: 20px; } .monitor.two { right: 94px; top: 58px; } .monitor.three { left: 164px; top: 28px; }
.controls { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: rgba(255,255,255,0.84); font-size: 12px; }
.timeline { display: flex; align-items: center; gap: 8px; flex: 1; }
.timeline-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.14); position: relative; }
.timeline-bar::after { content: ""; position: absolute; inset: 0 62% 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--purple-2)); }
.side-panel { border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: rgba(255,255,255,0.04); padding: 10px 12px; display: grid; grid-template-rows: auto auto auto 1fr; gap: 14px; }
.side-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.side-tabs span { min-height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,0.03); font-size: 11px; font-weight: 800; }
.side-tabs span.active { background: rgba(255,255,255,0.09); }
.objective-list, .metric-list { display: grid; gap: 8px; }
.side-panel h4 { margin: 0 0 8px; font-size: 13px; }
.objective-list div, .metric-list div { color: rgba(255,255,255,0.82); font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }
.circle-score { margin-top: 6px; width: 92px; height: 92px; border-radius: 999px; border: 5px solid rgba(82,209,255,0.18); border-top-color: #39d2ad; border-right-color: #39d2ad; display: grid; place-items: center; font-size: 24px; font-weight: 900; color: white; margin-left: auto; margin-right: auto; }
.page-section { padding: 16px 0 0; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.card h2, .card h3 { margin: 0 0 12px; line-height: 1.15; }
.card p { margin: 0; color: var(--muted); }
.icon-heading { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.icon-chip { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #7e63ff, #a47bff); color: white; font-size: 24px; box-shadow: 0 12px 28px rgba(120, 86, 255, 0.2); }
.list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--muted); }
.list li::before { content: "✓"; color: var(--purple); font-weight: 900; }
.columns-2 { columns: 2; column-gap: 28px; }
.columns-2 li { break-inside: avoid; }
.soft-panel { min-height: 100%; background: radial-gradient(circle at 92% 82%, rgba(120,86,255,0.12), transparent 18%), linear-gradient(180deg, #ffffff, #fbfbfe); }
.capabilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 4px; }
.capability { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.capability .mini { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(120, 86, 255, 0.10); color: var(--purple); font-size: 16px; font-weight: 900; }
.capability strong { display: block; margin-bottom: 4px; }
.capability span { color: var(--muted); font-size: 14px; }
.why-panel { background: linear-gradient(135deg, #0b1640, #101b53 55%, #1b1e63 100%); color: white; overflow: hidden; position: relative; }
.why-panel p, .why-panel li { color: rgba(255,255,255,0.84); }
.why-flex { display: grid; grid-template-columns: 1fr 0.75fr; gap: 18px; align-items: center; }
.glow-box-wrap { display: grid; place-items: center; min-height: 240px; }
.glow-box { width: 170px; height: 170px; position: relative; transform: rotate(45deg); border-radius: 20px; border: 1px solid rgba(196,141,255,0.48); background: radial-gradient(circle at center, rgba(196,141,255,0.42), rgba(120,86,255,0.18) 40%, transparent 70%); box-shadow: 0 0 65px rgba(120,86,255,0.32), inset 0 0 30px rgba(255,255,255,0.12); }
.glow-box::before, .glow-box::after { content: ""; position: absolute; inset: 24px; border-radius: 18px; border: 1px solid rgba(196,141,255,0.42); }
.glow-box::after { inset: 46px; }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pro-list li::before { content: "●"; color: var(--green); }
.cons-list li::before { content: "●"; color: var(--orange); }
.strip-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 18px; }
.env-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.env-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px 10px; background: #fff; text-align: center; color: var(--muted); min-height: 128px; }
.env-card strong { display: block; margin-top: 10px; font-size: 14px; color: var(--text); }
.env-icon { width: 42px; height: 42px; margin: 0 auto; border-radius: 12px; display: grid; place-items: center; background: rgba(120, 86, 255, 0.10); color: var(--purple); font-size: 22px; }
.career-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.career { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; color: var(--muted); font-weight: 700; }
.career .career-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--purple); }
.cta-band { margin: 18px 0 30px; background: linear-gradient(135deg, #0b1640, #161f69 70%); color: white; border-radius: 18px; box-shadow: var(--shadow-deep); padding: 24px 28px; display: grid; grid-template-columns: 110px 1fr auto; gap: 22px; align-items: center; }
.cta-icon { width: 96px; height: 70px; border-radius: 16px; background: radial-gradient(circle at 40% 48%, rgba(196,141,255,0.42), transparent 28%), linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.12); position: relative; }
.cta-icon::before { content: "▶"; position: absolute; left: 38px; top: 22px; color: #c48dff; font-size: 26px; }
.cta-copy h2 { margin: 0 0 8px; color: white; }
.cta-copy p { margin: 0; color: rgba(255,255,255,0.84); }
.cta-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trust-strip { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; color: rgba(255,255,255,0.84); font-size: 14px; }
.trust-strip span::before { content: "◈"; color: #c48dff; margin-right: 8px; }
.footer-space { height: 18px; }
@media (max-width: 1180px) {
  .hero-grid, .grid-2, .strip-grid, .proscons, .why-flex, .cta-band { grid-template-columns: 1fr; }
  .capabilities, .env-grid, .career-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-feature-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .sim-body, .grid-4, .capabilities { grid-template-columns: 1fr; }
  .env-grid { grid-template-columns: repeat(2, 1fr); }
  .career-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { text-align: center; }
  .cta-actions { justify-content: center; }
  .hero-copy, .hero-panel, .card { padding: 20px; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 24px, 1180px); }
  .nav-actions .btn.link { display: none; }
  .hero-feature-row, .grid-2, .proscons, .strip-grid, .career-grid, .env-grid { grid-template-columns: 1fr; }
}