
:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-alt:#f8fbff;
  --text:#183042;
  --muted:#5f7383;
  --primary:#0f5b8d;
  --primary-dark:#0a4367;
  --accent:#d9eef8;
  --border:#dbe4ec;
  --success:#0f6c5b;
  --warning:#9b6b00;
  --shadow:0 18px 40px rgba(16,42,67,.08);
  --radius:22px;
  --radius-sm:14px;
  --max:1180px;
}
*{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,#f8fbfe 0%, #f4f7fb 100%);
  line-height:1.65;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.8rem 1rem; background:#fff; border-radius:12px; z-index:1000; box-shadow:var(--shadow)
}
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(248,251,254,.88);
  border-bottom:1px solid rgba(219,228,236,.8);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0;
}
.brand{
  display:flex; flex-direction:column; gap:.1rem;
}
.brand strong{
  font-size:1.06rem;
  letter-spacing:.02em;
}
.brand span{
  color:var(--muted); font-size:.92rem;
}
.nav{
  display:flex; flex-wrap:wrap; gap:.45rem;
  justify-content:flex-end;
}
.nav a{
  padding:.65rem .9rem;
  border-radius:999px;
  color:var(--text);
  font-weight:600;
}
.nav a.active,.nav a:hover{
  background:#fff;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(16,42,67,.06);
}
.hero{
  padding:4.8rem 0 3.5rem;
}
.hero-grid{
  display:grid; grid-template-columns:1.25fr .75fr; gap:1.5rem; align-items:stretch;
}
.hero-card,.panel,.card,.cta-band,.notice,.quote,.table-wrap,.contact-list,.timeline, .doc-list, .faq{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-card{
  padding:2.2rem;
  background:
    radial-gradient(circle at top right, rgba(15,91,141,.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fafdff 100%);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent); color:var(--primary-dark);
  border-radius:999px; padding:.45rem .8rem; font-weight:700; font-size:.84rem;
}
h1,h2,h3{line-height:1.16; margin:0 0 .8rem}
h1{font-size:clamp(2rem,4vw,3.4rem)}
h2{font-size:clamp(1.55rem,2.5vw,2.2rem)}
h3{font-size:1.15rem}
.lead{font-size:1.1rem; color:#335062}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.35rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:999px; padding:.9rem 1.15rem; font-weight:700; border:1px solid transparent;
  transition:.2s ease;
}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-dark); text-decoration:none}
.btn-secondary{background:#fff; color:var(--text); border-color:var(--border)}
.btn-secondary:hover{text-decoration:none; background:#f8fbff}
.hero-aside{
  padding:1.4rem;
}
.stat-list{
  display:grid; grid-template-columns:1fr 1fr; gap:.9rem;
  margin-top:1rem;
}
.stat{
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
}
.stat strong{display:block; font-size:1.3rem}
.stat span{color:var(--muted); font-size:.95rem}
.badges{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem
}
.badges span{
  display:inline-flex; padding:.45rem .75rem; border-radius:999px;
  background:#eff5f9; border:1px solid var(--border); color:#315061; font-weight:600; font-size:.88rem;
}
.section{
  padding:1.8rem 0 3.2rem;
}
.section-head{
  display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:1.2rem;
}
.section-head p{margin:0; color:var(--muted); max-width:54rem}
.grid-2,.grid-3,.grid-4{
  display:grid; gap:1rem;
}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  padding:1.35rem;
}
.card p:last-child,.panel p:last-child,.notice p:last-child{margin-bottom:0}
.icon-dot{
  width:.78rem; height:.78rem; border-radius:50%; background:var(--primary); display:inline-block; margin-right:.4rem;
}
.panel{padding:1.45rem}
.panel.alt{background:linear-gradient(180deg,#fff 0%,#f7fbff 100%)}
.list-clean{padding-left:1rem; margin:.6rem 0 0}
.list-clean li{margin:.4rem 0}
.kpi{
  display:flex; gap:1rem; align-items:flex-start;
}
.kpi .number{
  min-width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center;
  background:#ebf5fb; color:var(--primary-dark); font-weight:800;
}
.notice{
  padding:1.2rem 1.25rem;
  border-left:6px solid var(--primary);
}
.notice.warning{border-left-color:var(--warning); background:#fffaf1}
.notice.success{border-left-color:var(--success); background:#f5fcf9}
.table-wrap{overflow:auto; padding:0}
table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}
th,td{
  text-align:left;
  padding:1rem;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
th{
  background:#f8fbff;
  font-size:.93rem;
  color:#355164;
}
tr:last-child td{border-bottom:0}
.quote{
  padding:1.4rem;
  position:relative;
}
.quote p{
  font-size:1.06rem; margin:0 0 .7rem;
}
.quote cite{font-style:normal; color:var(--muted)}
.timeline{
  padding:1rem 1.2rem;
}
.timeline-item{
  display:grid; grid-template-columns:100px 1fr; gap:1rem; padding:1rem 0;
  border-bottom:1px solid var(--border);
}
.timeline-item:last-child{border-bottom:0}
.timeline-item strong{color:var(--primary-dark)}
.doc-list a{
  display:flex; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem;
  border-bottom:1px solid var(--border);
  color:var(--text);
  font-weight:650;
}
.doc-list a:last-child{border-bottom:0}
.doc-list small{color:var(--muted); font-weight:500}
.contact-list{padding:1.25rem}
.contact-item{padding:.85rem 0; border-bottom:1px solid var(--border)}
.contact-item:last-child{border-bottom:0}
.contact-item strong{display:block}
.cta-band{
  padding:1.5rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  background:linear-gradient(135deg,#0f5b8d 0%,#103d66 100%);
  color:#fff;
}
.cta-band p,.cta-band h2{color:#fff; margin:0}
.cta-band .btn-secondary{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.22)}
.faq{padding:1rem 1.25rem}
.faq details{padding:.8rem 0; border-bottom:1px solid var(--border)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; font-weight:700}
.site-footer{
  margin-top:2rem;
  background:#10293a;
  color:#d6e2ea;
}
.site-footer a{color:#fff}
.footer-grid{
  display:grid; grid-template-columns:1.3fr .8fr .9fr; gap:1.2rem;
  padding:2rem 0 1rem;
}
.footer-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:1.15rem;
}
.footer-meta{
  padding:0 0 1.7rem;
  color:#c3d0d8;
  font-size:.95rem;
}
.page-hero{
  padding:3rem 0 1.6rem;
}
.breadcrumbs{
  color:var(--muted); font-size:.92rem; margin-bottom:.5rem;
}
.highlight-box{
  background:linear-gradient(180deg,#eef7fd 0%,#fff 100%);
  border:1px solid #d8e8f4;
  border-radius:18px;
  padding:1rem;
}
.tag{
  display:inline-flex; padding:.35rem .65rem; border-radius:999px; background:#edf4f8; border:1px solid var(--border); font-size:.85rem; font-weight:700;
}
.meta-inline{
  display:flex; flex-wrap:wrap; gap:.55rem;
}
@media (max-width: 960px){
  .hero-grid,.grid-3,.grid-4,.footer-grid,.grid-2{grid-template-columns:1fr}
  .section-head{flex-direction:column; align-items:flex-start}
  .timeline-item{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .nav-wrap{align-items:flex-start; flex-direction:column}
  .nav{justify-content:flex-start}
  .hero{padding-top:2.6rem}
  .hero-card{padding:1.4rem}
  h1{font-size:2rem}
}
