/* roulang page: index */
:root {
  --brand:#1a56db;
  --brand-dark:#123f9e;
  --brand-deep:#0c2348;
  --ink:#142033;
  --muted:#5c6b82;
  --line:#e3eaf4;
  --bg:#f5f8fc;
  --card:#ffffff;
  --ok:#0f7a4a;
  --warn:#9a3b3b;
  --radius:18px;
  --shadow:0 18px 42px rgba(16,42,88,.08);
  --space:88px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:16px;
  line-height:1.75;
}
img { max-width:100%; display:block; }
button,input,select,textarea { font-family:inherit; }
a { color:inherit; text-decoration:none; }
.container { width:min(1160px, calc(100% - 40px)); margin:0 auto; }
.site-header {
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 24px rgba(16,42,88,.04);
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:20px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:760; font-size:18px; letter-spacing:.02em; }
.logo-mark {
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(145deg,#1a56db,#0c2348);
  color:#fff; box-shadow:0 8px 16px rgba(26,86,219,.28);
}
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-links a {
  padding:8px 14px; border-radius:999px; color:#31445f; font-weight:650;
}
.nav-links a:hover { background:#eef3fb; color:var(--brand-dark); }
.nav-links a.active { background:#e8f0ff; color:var(--brand); }
.nav-side { display:flex; align-items:center; gap:10px; }
.status-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#eef5ff; color:var(--brand-dark); font-size:12px; font-weight:700;
  border:1px solid #d5e4fb;
}
.status-pill i { width:7px; height:7px; border-radius:50%; background:#1a56db; display:block; }
.nav-cta, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; border-radius:999px;
  padding:11px 18px; font-weight:750; transition:.2s ease;
}
.nav-cta, .btn-primary { background:var(--brand); color:#fff; box-shadow:0 10px 20px rgba(26,86,219,.22); }
.nav-cta:hover, .btn-primary:hover { background:var(--brand-dark); transform:translateY(-1px); }
.btn-primary:active, .nav-cta:active { transform:translateY(0); }
.btn-ghost { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); }
.btn-ghost:hover { background:rgba(255,255,255,.2); }
.btn:focus-visible, .nav-cta:focus-visible, .icon-btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid #1a56db; outline-offset:3px;
}
.menu-toggle {
  display:none; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); background:#fff; padding:0;
}
.menu-toggle span { display:block; width:18px; height:2px; background:var(--ink); margin:4px auto; }
.hero {
  position:relative; min-height:92vh; color:#fff; overflow:hidden;
  background:
    radial-gradient(900px 420px at 70% 20%, rgba(72,132,255,.35), transparent 60%),
    linear-gradient(180deg, rgba(6,14,28,.2), rgba(6,14,28,.78)),
    linear-gradient(120deg, #10284d 0%, #163e86 48%, #0b1730 100%);
  display:flex; align-items:flex-end;
}
.hero:before {
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:80px 80px; mask-image:linear-gradient(transparent, #000 30%, #000 70%, transparent);
  opacity:.35;
}
.film-glow { position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(30px); background:rgba(84,146,255,.28); right:8%; top:12%; }
.play-btn {
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  width:104px; height:104px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--brand-deep);
  box-shadow:0 20px 50px rgba(0,0,0,.28);
  display:grid; place-items:center; z-index:2;
}
.play-btn:hover { transform:translate(-50%,-50%) scale(1.04); }
.play-btn svg { margin-left:4px; }
.hero-copy { position:relative; z-index:2; padding:0 0 74px; max-width:760px; }
.eyebrow, .badge {
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:5px 10px; font-size:12px; font-weight:760;
}
.badge-light { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); }
.hero h1 { margin:14px 0 12px; font-size:64px; line-height:1.08; letter-spacing:-.03em; }
.hero p { margin:0 0 22px; font-size:17px; color:rgba(255,255,255,.86); max-width:680px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.transport {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:14px;
  padding:14px 0 18px; color:rgba(255,255,255,.8); font-size:13px;
}
.bar { flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.2); overflow:hidden; }
.bar span { display:block; width:34%; height:100%; background:#fff; }
main section { padding:var(--space) 0; }
.band { background:#fff; }
.band-alt { background:linear-gradient(180deg,#f8fbff,#f3f6fb); }
.band-blue { background:linear-gradient(180deg,#eef4ff,#f7faff); }
.section-head { max-width:760px; margin-bottom:28px; }
.section-head h2, .split-title h2, .block-title h2 { margin:8px 0; font-size:34px; line-height:1.25; letter-spacing:-.02em; }
.kicker { color:var(--brand); font-size:13px; font-weight:800; letter-spacing:.08em; }
.lead { color:var(--muted); margin:0; }
.case-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; }
.stack { display:grid; gap:18px; }
.card, .quote, .panel, .news-item, .qa, .step, .mile, .topic, .scene, .form-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.quote { padding:26px; }
.quote strong { display:block; font-size:18px; margin-bottom:8px; }
.quote p, .card p, .topic p, .scene p, .step p, .mile p, .qa p { color:#3d4d63; margin:0; }
.who { margin-top:16px; color:var(--brand-dark); font-weight:750; font-size:14px; }
.score { color:#d29a2a; letter-spacing:.12em; font-size:13px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.metric { background:#fff; padding:28px 22px; }
.metric b { display:block; font-size:40px; line-height:1; color:var(--brand-deep); letter-spacing:-.04em; }
.metric span { display:block; margin-top:8px; color:var(--muted); font-size:14px; }
.compare { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel { padding:22px; min-height:280px; display:flex; flex-direction:column; justify-content:space-between; }
.panel.dim { background:linear-gradient(180deg,#eef2f6,#e4ebf3); }
.panel.sharp { background:linear-gradient(165deg,#14386f,#1a56db 55%,#7eb0ff); color:#fff; }
.panel.sharp p { color:rgba(255,255,255,.86); }
.tag { display:inline-flex; padding:4px 8px; border-radius:8px; background:rgba(20,32,51,.08); font-size:12px; font-weight:800; }
.panel.sharp .tag { background:rgba(255,255,255,.16); }
.method { display:grid; grid-template-columns:.85fr 1.15fr; gap:28px; align-items:start; }
.steps { display:grid; gap:14px; }
.step { padding:18px 18px 18px 20px; display:grid; grid-template-columns:52px 1fr; gap:12px; }
.num { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:#eaf1ff; color:var(--brand-dark); font-weight:800; }
.bento { display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:auto auto; gap:16px; }
.topic { padding:22px; min-height:180px; display:flex; flex-direction:column; justify-content:space-between; transition:.2s ease; }
.topic:hover, .scene:hover, .news-item:hover, .quote:hover { transform:translateY(-3px); box-shadow:0 22px 46px rgba(16,42,88,.12); }
.topic.wide { grid-row:span 2; background:linear-gradient(180deg,#fff,#f4f8ff); min-height:380px; }
.topic h3, .scene h3, .step h3, .mile h3, .qa h3 { margin:0 0 8px; font-size:20px; }
.more { color:var(--brand); font-weight:800; }
.rail-head, .row-between { display:flex; justify-content:space-between; gap:18px; align-items:end; }
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
.scene { scroll-snap-align:start; padding:20px; min-height:210px; }
.news-list { display:grid; gap:12px; }
.news-item { padding:18px 20px; display:grid; grid-template-columns:120px 1fr auto; gap:16px; align-items:center; }
.news-item time { color:var(--brand); font-weight:800; font-size:14px; }
.chip { font-size:12px; font-weight:800; color:#31527d; background:#eef3fb; border-radius:999px; padding:6px 10px; }
.timeline { position:relative; display:grid; gap:16px; }
.timeline:before { content:""; position:absolute; left:92px; top:0; bottom:0; width:2px; background:#d7e3f5; }
.mile { margin-left:120px; padding:18px 20px; position:relative; }
.mile:before { content:""; position:absolute; left:-40px; top:26px; width:12px; height:12px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 6px #e5eeff; }
.mile .when { position:absolute; left:-120px; top:20px; width:70px; text-align:right; color:var(--muted); font-size:13px; font-weight:750; }
.promise { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.promise article { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow); }
.promise svg { width:28px; height:28px; }
.promise h3 { margin:10px 0 6px; font-size:17px; }
.promise p { margin:0; color:var(--muted); font-size:14px; }
.qa-list { display:grid; gap:12px; }
.qa { padding:20px 22px; }
.consult { display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:start; }
.form-card { padding:22px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
label { display:block; font-size:13px; font-weight:750; margin-bottom:6px; }
input, select, textarea {
  width:100%; border:1px solid #d5dfec; background:#fbfdff; border-radius:12px;
  padding:12px 12px; color:var(--ink);
}
textarea { min-height:120px; resize:vertical; }
.full { grid-column:1 / -1; }
.form-note { padding:12px 14px; border-radius:12px; margin-bottom:12px; }
.is-ok { background:#eefaf4; color:var(--ok); }
.is-bad { background:#fff2f2; color:var(--warn); }
.privacy { color:var(--muted); font-size:14px; margin:12px 0 0; }
.site-footer { background:#0e1b33; color:rgba(255,255,255,.78); padding:42px 0 28px; }
.foot-grid { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.1); }
.site-footer a { color:#fff; margin-right:14px; font-weight:700; }
.site-footer .logo { color:#fff; margin-bottom:8px; }
.copy { padding-top:16px; font-size:13px; color:rgba(255,255,255,.62); }
.modal { position:fixed; inset:0; background:rgba(7,14,28,.72); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; }
.modal.open { display:flex; }
.player {
  width:min(860px,100%); background:#0d1830; color:#fff; border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.player-top { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; }
.stage { height:380px; margin:0 18px 18px; border-radius:18px; position:relative;
  background:radial-gradient(500px 180px at 30% 30%, rgba(255,255,255,.18), transparent 50%), linear-gradient(140deg,#1b4ea8,#091226 70%);
}
.stage .play-btn { width:84px; height:84px; }
.icon-btn { border:0; background:transparent; color:#fff; font-size:22px; cursor:pointer; }
@media (max-width:1024px) {
  .hero h1 { font-size:50px; }
  .case-grid, .method, .consult, .bento { grid-template-columns:1fr; }
  .topic.wide { grid-row:auto; min-height:220px; }
  .metrics, .promise { grid-template-columns:1fr 1fr; }
  .timeline:before { left:18px; }
  .mile { margin-left:48px; }
  .mile .when { position:static; width:auto; text-align:left; display:block; margin-bottom:6px; }
  .mile:before { left:-38px; }
}
@media (max-width:768px) {
  :root { --space:64px; }
  .menu-toggle { display:inline-block; }
  .nav-links { display:none; position:absolute; left:0; right:0; top:76px; background:#fff; border-bottom:1px solid var(--line); padding:12px 16px 16px; flex-direction:column; align-items:stretch; box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .status-pill { display:none; }
  .hero { min-height:780px; }
  .hero h1 { font-size:40px; }
  .play-btn { top:34%; }
  .news-item, .compare, .form-grid { grid-template-columns:1fr; }
  .section-head h2, .split-title h2, .block-title h2 { font-size:28px; }
}
@media (max-width:520px) {
  .container { width:min(1160px, calc(100% - 28px)); }
  .metrics, .promise { grid-template-columns:1fr; }
  .hero h1 { font-size:34px; }
  .hero-copy { padding-bottom:86px; }
  .transport { font-size:12px; }
  .stage { height:240px; }
  .logo { font-size:16px; }
}

/* roulang page: category1 */
:root {
 --brand:#1a56db;
 --brand-dark:#123f9e;
 --brand-deep:#0c2348;
 --ink:#142033;
 --muted:#5c6b82;
 --line:#e3eaf4;
 --bg:#f5f8fc;
 --card:#ffffff;
 --ok:#0f7a4a;
 --warn:#9a3b3b;
 --radius:18px;
 --shadow:0 18px 42px rgba(16,42,88,.08);
 --space:64px;
}
html { scroll-behavior:smooth; }
body {
 margin:0;
 color:var(--ink);
 background:var(--bg);
 font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
 font-size:16px;
 line-height:1.75;
}
img { max-width:100%; display:block; }
button,input,select,textarea { font-family:inherit; }
a { color:inherit; text-decoration:none; }
.container { width:min(1160px, calc(100% - 40px)); margin:0 auto; }
.site-header {
 position:sticky; top:0; z-index:40;
 background:rgba(255,255,255,.92);
 backdrop-filter:blur(16px);
 border-bottom:1px solid var(--line);
 box-shadow:0 8px 24px rgba(16,42,88,.04);
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:20px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:760; font-size:18px; letter-spacing:.02em; color:var(--ink); }
.logo-mark {
 width:36px; height:36px; border-radius:12px;
 display:grid; place-items:center;
 background:linear-gradient(145deg,#1a56db,#0c2348);
 color:#fff; box-shadow:0 8px 16px rgba(26,86,219,.28);
 font-size:16px;
}
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-links a {
 padding:8px 14px; border-radius:999px; color:#31445f; font-weight:650;
}
.nav-links a:hover { background:#eef3fb; color:var(--brand-dark); }
.nav-links a.active { background:#e8f0ff; color:var(--brand); }
.nav-side { display:flex; align-items:center; gap:10px; }
.status-pill {
 display:inline-flex; align-items:center; gap:6px;
 padding:6px 10px; border-radius:999px;
 background:#eef5ff; color:var(--brand-dark); font-size:12px; font-weight:700;
 border:1px solid #d5e4fb;
}
.status-pill i { width:7px; height:7px; border-radius:50%; background:#1a56db; display:block; }
.nav-cta, .btn {
 display:inline-flex; align-items:center; justify-content:center; gap:8px;
 border:0; cursor:pointer; border-radius:999px;
 padding:11px 18px; font-weight:750; transition:.2s ease;
}
.nav-cta, .btn-primary { background:var(--brand); color:#fff; box-shadow:0 10px 20px rgba(26,86,219,.22); }
.nav-cta:hover, .btn-primary:hover { background:var(--brand-dark); transform:translateY(-1px); }
.btn-primary:active, .nav-cta:active { transform:translateY(0); }
.btn-line { background:#fff; color:var(--brand-dark); border:1px solid #c9d8f2; }
.btn-line:hover { background:#eef3fb; }
.btn-ghost { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); }
.btn-ghost:hover { background:rgba(255,255,255,.2); }
.btn:focus-visible, .nav-cta:focus-visible, .icon-btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline:2px solid #1a56db; outline-offset:3px;
}
.menu-toggle {
 display:none; width:42px; height:42px; border-radius:12px;
 border:1px solid var(--line); background:#fff; padding:0; cursor:pointer;
}
.menu-toggle span { display:block; width:18px; height:2px; background:var(--ink); margin:4px auto; }
main section { padding:var(--space) 0; }
.section-head { max-width:760px; margin-bottom:28px; }
.section-head h2, .split-title h2, .block-title h2 { margin:8px 0; font-size:34px; line-height:1.25; letter-spacing:-.02em; }
.lead { color:var(--muted); margin:0; }
.card, .quote, .panel, .news-item, .qa, .step, .mile, .topic, .scene, .form-card {
 background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.card p, .topic p, .scene p, .step p, .mile p, .qa p { color:#3d4d63; margin:0; }
.tag { display:inline-flex; padding:4px 8px; border-radius:8px; background:rgba(20,32,51,.08); font-size:12px; font-weight:800; }
.topic, .scene, .news-item, .quote { transition:.2s ease; }
.topic:hover, .scene:hover, .news-item:hover, .quote:hover { transform:translateY(-3px); box-shadow:0 22px 46px rgba(16,42,88,.12); }
.topic h3, .scene h3, .step h3, .mile h3, .qa h3 { margin:0 0 8px; font-size:20px; }
.rail-head, .row-between { display:flex; justify-content:space-between; gap:18px; align-items:end; }
.news-list { display:grid; gap:12px; }
.news-item { padding:18px 20px; display:grid; grid-template-columns:120px 1fr auto; gap:16px; align-items:center; }
.news-item time { color:var(--brand); font-weight:800; font-size:14px; }
.news-item h3 { margin:0 0 4px; font-size:18px; }
.chip { font-size:12px; font-weight:800; color:#31527d; background:#eef3fb; border-radius:999px; padding:6px 10px; }
.qa-list { display:grid; gap:12px; }
.qa { padding:20px 22px; }
.qa summary { cursor:pointer; font-weight:760; list-style:none; }
.qa summary::-webkit-details-marker { display:none; }
.form-card { padding:22px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
label { display:block; font-size:13px; font-weight:700; color:#31445f; margin-bottom:6px; }
input, select, textarea {
 width:100%; border:1px solid #d5dfec; background:#fbfdff; border-radius:12px;
 padding:12px 12px; color:var(--ink);
}
textarea { min-height:120px; resize:vertical; }
.form-note { padding:12px 14px; border-radius:12px; margin-bottom:12px; background:#eef8f2; color:var(--ok); border:1px solid #c9ead8; }
.site-footer { background:#0e1b33; color:rgba(255,255,255,.78); padding:48px 0 28px; }
.foot-grid { display:flex; justify-content:space-between; gap:28px; align-items:flex-start; }
.site-footer .logo { color:#fff; margin-bottom:8px; }
.site-footer p { margin:0; max-width:460px; }
.foot-nav { display:flex; gap:18px; padding-top:8px; }
.site-footer a { color:rgba(255,255,255,.82); font-weight:700; }
.site-footer a:hover { color:#fff; }
.copy { margin:22px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; }
.eyebrow, .badge {
 display:inline-flex; align-items:center; gap:6px;
 border-radius:999px; padding:5px 10px; font-size:12px; font-weight:760;
}
.badge-light { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff; }
.badge-blue { background:#e8f0ff; color:var(--brand); }
.zone-hero { padding:42px 0 20px; background:linear-gradient(180deg,#f5f8fc 0%,#eef3fb 100%); }
.stack-wrap { display:grid; grid-template-columns:1.35fr .75fr; gap:18px; align-items:start; }
.main-card {
 background:
 radial-gradient(520px 220px at 90% 0%, rgba(90,150,255,.35), transparent 60%),
 linear-gradient(145deg,#163e86,#0c2348);
 color:#fff; border-radius:28px; padding:36px; min-height:460px;
 box-shadow:0 24px 50px rgba(12,35,72,.18); position:relative; overflow:hidden;
}
.main-card h1 { margin:16px 0 12px; font-size:52px; line-height:1.12; letter-spacing:-.03em; }
.main-card p { margin:0 0 22px; color:rgba(255,255,255,.86); max-width:640px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.side-stack { display:grid; gap:18px; padding-top:54px; }
.side-card { background:#fff; border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:var(--shadow); }
.side-card.offset { margin-left:36px; }
.side-card strong { display:block; font-size:28px; letter-spacing:-.03em; color:var(--brand-deep); }
.side-card span { color:var(--muted); font-size:14px; }
.metric-board { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric { background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow); }
.metric b { display:block; font-size:30px; color:var(--brand-deep); letter-spacing:-.03em; }
.metric span { color:var(--muted); font-size:14px; }
.matrix { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
.feature-panel { padding:28px; background:linear-gradient(180deg,#fff,#f7faff); }
.feature-panel h2 { margin:10px 0; font-size:32px; }
.topic-list { display:grid; gap:12px; }
.topic { padding:18px 18px 16px; }
.topic .tag { margin-bottom:8px; }
.compare { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel { padding:26px; }
.panel h3 { margin:8px 0 12px; font-size:24px; }
.panel ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.panel li { padding-left:16px; position:relative; color:#3d4d63; }
.panel li:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); position:absolute; left:0; top:.65em; }
.panel.sharp { background:linear-gradient(160deg,#123f9e,#0c2348); color:#fff; }
.panel.sharp p, .panel.sharp li { color:rgba(255,255,255,.84); }
.panel.sharp li:before { background:#9dc0ff; }
.panel.sharp .tag { background:rgba(255,255,255,.16); color:#fff; }
.dark-band { background:#0e1b33; color:#fff; }
.dark-band .lead { color:rgba(255,255,255,.72); }
.guard { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }
.step { padding:20px; background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); color:#fff; }
.step p { color:rgba(255,255,255,.75); }
.step h3 { color:#fff; }
.age-note { margin-top:14px; font-size:13px; color:#9a3b3b; }
@media (max-width:1024px) {
 .main-card h1 { font-size:42px; }
 .stack-wrap, .matrix, .compare, .guard { grid-template-columns:1fr; }
 .side-stack { padding-top:0; }
 .metric-board { grid-template-columns:1fr 1fr; }
 .section-head h2, .feature-panel h2 { font-size:30px; }
}
@media (max-width:768px) {
 .menu-toggle { display:inline-block; }
 .nav-links {
 display:none; position:absolute; left:0; right:0; top:76px;
 background:#fff; border-bottom:1px solid var(--line);
 padding:12px 16px 16px; flex-direction:column; align-items:stretch;
 box-shadow:0 16px 30px rgba(16,42,88,.08);
 }
 .nav-links.open { display:flex; }
 .nav-links a { padding:12px 14px; }
 .status-pill { display:none; }
 .site-header { position:sticky; }
 .nav-wrap { position:relative; }
 .news-item { grid-template-columns:1fr; }
 .foot-grid, .form-grid, .row-between { display:grid; grid-template-columns:1fr; }
 .main-card { min-height:0; padding:26px; }
 .main-card h1 { font-size:34px; }
}
@media (max-width:520px) {
 .container { width:min(1160px, calc(100% - 28px)); }
 .metric-board { grid-template-columns:1fr; }
 .side-card.offset { margin-left:0; }
 .hero-actions, .foot-nav { flex-direction:column; align-items:flex-start; }
 .main-card h1 { font-size:30px; }
 main section { padding:42px 0; }
}