:root{
  --bg:#0b0f14;
  --card:#111826;
  --text:#e6edf3;
  --muted:#aab7c4;
  --brand:#7dd3fc;
  --brand2:#a7f3d0;
  --line:#223047;
  --danger:#fca5a5;
  --ok:#86efac;
  --shadow:0 12px 32px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 20% 0%, rgba(125,211,252,.14), transparent 55%),
             radial-gradient(900px 500px at 80% 10%, rgba(167,243,208,.10), transparent 55%),
             var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:20px; top:16px; width:auto; height:auto; padding:10px 12px;
  background:var(--card); border:1px solid var(--line); border-radius:10px; z-index:9999;
}
header{
  position:sticky; top:0; backdrop-filter:saturate(1.1) blur(10px);
  background:rgba(11,15,20,.72); border-bottom:1px solid rgba(34,48,71,.8);
  z-index:50;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background:rgba(17,24,38,.65); color:var(--muted); font-size:13px;
}
nav{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}
nav a{
  padding:8px 10px; border-radius:10px; color:var(--text);
}
nav a[aria-current="page"]{background:rgba(125,211,252,.12); border:1px solid rgba(125,211,252,.22)}
.hero{padding:54px 0 18px}
.hero-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:22px; align-items:stretch}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
}
.card{
  background:linear-gradient(180deg, rgba(17,24,38,.9), rgba(17,24,38,.65));
  border:1px solid rgba(34,48,71,.9);
  border-radius:18px;
  padding:22px;
  box-shadow:var(--shadow);
}
.card.soft{box-shadow:none}
h1{font-size:40px; line-height:1.15; margin:0 0 12px}
h2{font-size:26px; margin:26px 0 10px}
h3{font-size:18px; margin:18px 0 8px}
p{margin:10px 0}
.muted{color:var(--muted)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
ul{padding-left:18px}
.kv{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.kv span{
  background:rgba(125,211,252,.10);
  border:1px solid rgba(125,211,252,.18);
  padding:7px 10px; border-radius:12px; font-size:14px; color:var(--text);
}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:650;
  border:1px solid rgba(125,211,252,.25);
  background:rgba(125,211,252,.10);
  color:var(--text);
}
.btn.primary{
  background:linear-gradient(90deg, rgba(125,211,252,.22), rgba(167,243,208,.16));
  border-color:rgba(167,243,208,.25);
}
.btn.ghost{
  background:transparent; border:1px solid var(--line);
}
hr{border:none; border-top:1px solid rgba(34,48,71,.8); margin:22px 0}
.notice{
  border-left:4px solid rgba(252,165,165,.8);
  background:rgba(252,165,165,.08);
  padding:12px 14px;
  border-radius:12px;
}
.ok{
  border-left:4px solid rgba(134,239,172,.8);
  background:rgba(134,239,172,.08);
  padding:12px 14px;
  border-radius:12px;
}
table{
  width:100%; border-collapse:collapse; overflow:hidden; border-radius:14px;
  border:1px solid rgba(34,48,71,.9);
}
th,td{padding:12px 12px; vertical-align:top; border-bottom:1px solid rgba(34,48,71,.7)}
th{background:rgba(17,24,38,.85); text-align:left}
tr:last-child td{border-bottom:none}
footer{
  padding:32px 0 40px; border-top:1px solid rgba(34,48,71,.8); margin-top:34px;
}
.footer-grid{display:grid; grid-template-columns:1.4fr .6fr; gap:14px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
.small{font-size:13px}
form{display:grid; gap:10px}
input, textarea, select{
  background:rgba(17,24,38,.65); border:1px solid rgba(34,48,71,.9);
  color:var(--text); border-radius:12px; padding:10px 12px; font:inherit;
}
textarea{min-height:140px; resize:vertical}
label{font-weight:650}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:900px){.form-row{grid-template-columns:1fr}}


/* === Light theme override (Branding v2) === */
:root{
  --bg:#F6F8FB;
  --card:#FFFFFF;
  --text:#0B1220;
  --muted:#475569;
  --brand:#0B4AA2;
  --brand2:#F4C542;
  --line:#D7DFEA;
  --danger:#B42318;
  --ok:#067647;
  --shadow:0 14px 36px rgba(15, 23, 42, .10);
}
body{
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(11,74,162,.12), transparent 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(244,197,66,.16), transparent 55%),
    var(--bg);
  color:var(--text);
}
a{color:var(--brand)}
header{
  background:rgba(255,255,255,.84);
  border-bottom:1px solid rgba(215,223,234,.9);
}
.badge{
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  color:var(--muted);
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96));
  border:1px solid rgba(215,223,234,.95);
  box-shadow:var(--shadow);
}
nav a{color:var(--text)}
nav a[aria-current="page"]{
  background:rgba(11,74,162,.08);
  border:1px solid rgba(11,74,162,.18)
}
.btn{
  border:1px solid rgba(11,74,162,.22);
  background:rgba(11,74,162,.06);
  color:var(--text);
}
.btn.primary{
  background:linear-gradient(90deg, rgba(11,74,162,.14), rgba(244,197,66,.22));
  border-color:rgba(244,197,66,.40);
}
.btn.ghost{
  background:transparent; border:1px solid var(--line);
}
.notice{
  border-left:4px solid rgba(180,35,24,.85);
  background:rgba(180,35,24,.06);
}
.ok{
  border-left:4px solid rgba(6,118,71,.85);
  background:rgba(6,118,71,.06);
}
.hero-banner{
  position:relative;
  overflow:hidden;
}
.hero-banner::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,74,162,.82), rgba(11,74,162,.55)),
    radial-gradient(900px 420px at 15% 30%, rgba(244,197,66,.40), transparent 55%);
  opacity:.95;
}
.hero-banner::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(300px 180px at 20% 70%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(320px 180px at 80% 40%, rgba(255,255,255,.18), transparent 60%);
  mix-blend-mode:screen;
  opacity:.9;
}
.hero-banner > *{position:relative; z-index:1}
.hero-title{color:#fff}
.hero-sub{color:rgba(255,255,255,.88)}
.kv span{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}