:root {
  --bg:#f5f7f6;
  --surface:#ffffff;
  --surface-soft:#eef4f2;
  --surface-strong:#e5efec;
  --text:#16302d;
  --muted:#5c706b;
  --line:#dbe5e2;
  --brand:#2e7588;
  --brand-dark:#123f54;
  --brand-soft:#dceff2;
  --accent:#8bb9bf;
  --success:#dff1ec;
  --success-text:#1d6a57;
  --shadow:0 20px 50px rgba(15, 42, 39, .08);
  --radius:24px;
  --max:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.55;
}
img { max-width:100%; display:block; }
a { color:inherit; }
.container { width:min(calc(100% - 40px), var(--max)); margin-inline:auto; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:16px; top:16px; background:#fff; padding:10px 14px; border-radius:10px; z-index:200; }

.site-header {
  position:sticky; top:0; z-index:100; backdrop-filter:blur(18px);
  background:rgba(245,247,246,.86); border-bottom:1px solid rgba(219,229,226,.85);
}
.navbar { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:14px; text-decoration:none; font-weight:800; letter-spacing:.06em; }
.brand-logo { width:48px; height:48px; object-fit:contain; }
.brand span { display:flex; flex-direction:column; font-size:20px; }
.brand small { font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-links a { text-decoration:none; color:var(--muted); font-weight:650; padding:10px 14px; border-radius:999px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--brand-dark); background:var(--surface); }
.nav-cta { background:var(--brand-dark); color:#fff !important; box-shadow:0 10px 22px rgba(18,63,84,.15); }
.menu-toggle { display:none; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 14px; font-size:20px; }

.hero { padding:78px 0 38px; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; }
.eyebrow, .kicker { display:inline-flex; align-items:center; gap:8px; color:var(--brand); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow::before, .kicker::before { content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; }
.hero h1, .page-hero h1, h2 { margin:0 0 16px; letter-spacing:-.04em; line-height:1.05; }
.hero h1 { font-size:clamp(44px, 7vw, 72px); max-width:12ch; }
.hero .lead { font-size:20px; color:var(--muted); max-width:58ch; margin:0 0 26px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:750; border-radius:999px; padding:14px 22px; transition:transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--brand-dark); color:#fff; box-shadow:0 14px 26px rgba(18,63,84,.16); }
.btn-secondary { background:var(--surface); color:var(--brand-dark); border:1px solid var(--line); }
.btn-ghost { background:transparent; color:var(--brand-dark); border:1px solid var(--line); }
.hero-points { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.point { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow); }
.point strong { display:block; margin-bottom:4px; font-size:14px; }
.point span { color:var(--muted); font-size:13px; }
.visual-card { position:relative; background:linear-gradient(180deg, #fff, #f4f7f6); border:1px solid var(--line); border-radius:32px; padding:18px; box-shadow:var(--shadow); }
.visual-card img { width:100%; border-radius:20px; }
.visual-badge { position:absolute; right:18px; top:18px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:12px; font-weight:700; color:var(--brand-dark); box-shadow:var(--shadow); }

.stats-strip { margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:20px 22px; box-shadow:var(--shadow); }
.stat .label { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.stat strong { display:block; margin-top:8px; font-size:26px; letter-spacing:-.03em; }
.stat small { display:block; margin-top:6px; color:var(--muted); font-size:13px; }

.section { padding:84px 0; }
.section.white { background:#fff; }
.section.alt { background:linear-gradient(180deg, #eef4f2, #f6f8f7); }
.section.dark { background:linear-gradient(180deg, #123f54, #0f3344); color:#fff; }
.section-head { display:grid; grid-template-columns:1fr .92fr; gap:26px; align-items:end; margin-bottom:30px; }
.section-head h2 { font-size:clamp(34px, 5vw, 54px); }
.section-head p { margin:0; color:var(--muted); font-size:18px; }
.section.dark .section-head p { color:#d2e1df; }

.value-grid, .audience-grid, .principle-grid, .card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:var(--shadow); }
.card h3 { margin:0 0 12px; font-size:24px; letter-spacing:-.025em; }
.card p { margin:0; color:var(--muted); }
.icon { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--surface-soft); color:var(--brand-dark); margin-bottom:18px; }
.icon svg { width:26px; height:26px; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
.feature-list { display:grid; gap:14px; }
.feature-item { display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line); }
.feature-item:first-child { border-top:none; padding-top:0; }
.feature-item strong { display:block; margin-bottom:4px; }
.feature-item p { margin:0; color:var(--muted); }
.check { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-dark); font-weight:800; flex:0 0 auto; }

.step-band { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.step-card { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:var(--shadow); }
.step-no { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--brand-dark); color:#fff; font-weight:800; margin-bottom:16px; }
.step-card h3 { margin:0 0 8px; }
.step-card p { margin:0; color:var(--muted); }

.dashboard-panel, .cta-panel, .banner-panel {
  display:grid; grid-template-columns:.95fr 1.05fr; gap:30px; align-items:center;
  background:linear-gradient(135deg, rgba(18,63,84,.98), rgba(46,117,136,.95));
  color:#fff; border-radius:32px; padding:38px; box-shadow:0 26px 70px rgba(18,63,84,.2);
}
.dashboard-panel p, .cta-panel p, .banner-panel p { color:#d8e5e2; }
.dashboard-panel ul, .cta-panel ul { margin:18px 0 0; padding-left:18px; }
.dashboard-panel li, .cta-panel li { margin:8px 0; }
.dashboard-panel .visual-card, .cta-panel .visual-card, .banner-panel .visual-card { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }

.audience-grid.two { grid-template-columns:repeat(2,1fr); }
.audience-card { background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:30px; box-shadow:var(--shadow); }
.audience-card ul { margin:14px 0 0; padding-left:18px; color:var(--muted); }
.audience-card li { margin:8px 0; }
.audience-card h3 { margin:0 0 10px; font-size:28px; }
.audience-card p { color:var(--muted); margin:0; }
.audience-card.alt { background:linear-gradient(180deg, #123f54, #0f3344); color:#fff; }
.audience-card.alt p, .audience-card.alt li { color:#d5e3e0; }

.page-hero { padding:76px 0 24px; }
.page-hero .lead { font-size:20px; color:var(--muted); max-width:64ch; }
.content-grid { display:grid; grid-template-columns:280px 1fr; gap:34px; align-items:start; }
.side-nav { position:sticky; top:104px; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:16px; box-shadow:var(--shadow); }
.side-nav a { display:block; text-decoration:none; padding:12px 14px; color:var(--muted); border-radius:14px; font-weight:700; }
.side-nav a:hover { background:var(--surface-soft); color:var(--brand-dark); }
.prose { background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:34px; box-shadow:var(--shadow); }
.prose h2 { font-size:34px; margin:0 0 14px; }
.prose h3 { margin:0 0 8px; font-size:24px; }
.prose section + section { margin-top:40px; }
.prose p { color:var(--muted); margin:0 0 12px; }
.prose .card-grid, .prose .value-grid, .prose .audience-grid { margin-top:18px; }
.prose blockquote { margin:22px 0; padding:18px 20px; background:var(--surface-soft); border-left:4px solid var(--brand); border-radius:0 16px 16px 0; font-size:18px; font-weight:650; color:var(--brand-dark); }
.prose ul { margin:12px 0 0; padding-left:18px; color:var(--muted); }
.prose li { margin:8px 0; }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-card { background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:30px; box-shadow:var(--shadow); }
.contact-card h2 { margin:0 0 12px; font-size:32px; }
.contact-meta { display:grid; gap:14px; margin-top:18px; }
.contact-item { padding:16px 18px; background:var(--surface-soft); border-radius:18px; }
.contact-item small { display:block; color:var(--muted); margin-bottom:4px; }

.notice { padding:14px 16px; background:#fff7e8; border:1px solid #ead7b1; border-radius:12px; color:#695631; font-size:14px; }

.site-footer { padding:58px 0 34px; background:#eef3f1; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:28px; }
.site-footer .brand-logo { width:40px; height:40px; }
.footer-grid h4 { margin:0 0 10px; }
.footer-grid a { display:block; text-decoration:none; color:var(--muted); margin:8px 0; }
.footer-grid a:hover { color:var(--brand-dark); }
.footer-grid p { margin:12px 0 0; color:var(--muted); }
.footer-bottom { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:13px; }

@media (max-width: 1080px) {
  .hero-grid, .section-head, .split, .dashboard-panel, .cta-panel, .banner-panel, .content-grid, .contact-grid { grid-template-columns:1fr; }
  .value-grid, .card-grid, .principle-grid { grid-template-columns:repeat(2,1fr); }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .hero h1 { max-width:none; }
}
@media (max-width: 900px) {
  .nav-links { display:none; position:absolute; top:76px; left:20px; right:20px; flex-direction:column; align-items:stretch; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .menu-toggle { display:block; }
  .side-nav { position:static; }
  .audience-grid.two, .step-band, .hero-points { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .container { width:min(calc(100% - 26px), var(--max)); }
  .navbar { min-height:74px; }
  .brand span { font-size:18px; }
  .brand small { display:none; }
  .hero { padding-top:56px; }
  .hero .lead, .page-hero .lead, .section-head p { font-size:17px; }
  .stats-strip, .value-grid, .audience-grid, .principle-grid, .card-grid { grid-template-columns:1fr; }
  .section { padding:68px 0; }
  .visual-card { padding:12px; }
  .prose { padding:24px; }
  .footer-grid, .footer-bottom { grid-template-columns:1fr; display:grid; }
}