:root{
  --blue:#0078d4;
  --blue-dark:#075a9c;
  --blue-pale:#eaf5fd;
  --ink:#263746;
  --muted:#60717e;
  --bg:#f4f4f9;
  --white:#fff;
  --line:#dbe4eb;
  --warning:#fff7df;
  --max:1120px;
  --radius:10px;
  --shadow:0 2px 8px rgba(0,0,0,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Arial,Helvetica,sans-serif;
  margin:0;
  padding:0;
  background:var(--bg);
  color:#333;
  line-height:1.65;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
header{
  background:var(--blue);
  color:#fff;
  padding:20px;
  text-align:center;
}
.header-inner{max-width:var(--max);margin:auto}
header h1{margin:0;font-size:clamp(1.8rem,4vw,2.65rem)}
header p{margin:7px 0 0}
.topnav{
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.topnav-inner{
  max-width:var(--max);
  margin:auto;
  padding:10px 20px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 18px;
}
.topnav a{font-weight:700;font-size:.95rem}
main{max-width:var(--max);margin:auto;padding:22px 20px 55px}
section,.card{
  margin-bottom:20px;
  background:#fff;
  padding:clamp(18px,3vw,28px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
h1,h2,h3{line-height:1.25}
h2{color:var(--blue-dark);margin-top:0}
h3{color:#145f91}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr);
  gap:24px;
  align-items:center;
}
.hero-grid img{margin:auto;border-radius:8px;max-height:380px;object-fit:contain}
.lead{font-size:1.12rem;color:#3d4d58}
.badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.badge{
  padding:7px 11px;
  background:var(--blue-pale);
  color:var(--blue-dark);
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
}
.grid-2,.grid-3{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.link-card{
  display:block;
  border:1px solid var(--line);
  border-radius:9px;
  padding:16px;
  color:var(--ink);
  background:#fff;
}
.link-card:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-1px)}
.link-card strong{display:block;color:var(--blue-dark);margin-bottom:4px}
.notice{
  background:var(--warning);
  border-left:5px solid #e4ad2e;
  padding:15px 17px;
  border-radius:6px;
  margin:18px 0;
}
.info{
  background:var(--blue-pale);
  border:1px solid #c9e4f6;
  padding:17px;
  border-radius:8px;
  margin:18px 0;
}
.price-box{
  border:2px solid var(--blue);
  border-radius:10px;
  overflow:hidden;
}
.price-head{background:var(--blue);color:#fff;padding:15px 20px;font-weight:700;font-size:1.2rem}
.price-body{padding:20px}
.price-main{font-size:1.55rem;color:var(--blue-dark);font-weight:700}
.button{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  border-radius:7px;
  padding:11px 16px;
  font-weight:700;
}
.button:hover{background:var(--blue-dark);text-decoration:none}
.text-link{font-weight:700;border-bottom:2px solid var(--blue)}
.steps{counter-reset:step;list-style:none;padding:0}
.steps li{position:relative;padding:0 0 18px 46px}
.steps li:before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:0;width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:700;
}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;color:var(--blue-dark)}
.breadcrumbs{font-size:.9rem;color:var(--muted);margin-bottom:16px}
.subpage-title{font-size:clamp(2rem,5vw,3.1rem);color:var(--blue-dark);margin:.2rem 0 15px}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:22px}
.article-layout main{padding:0}
.sidebar{align-self:start;position:sticky;top:16px}
.sidebar .card{padding:19px}
.sidebar ul{padding-left:20px;margin:0}
.contact a{word-break:break-word}
.small{font-size:.9rem;color:var(--muted)}
footer{
  text-align:center;
  padding:22px 15px;
  background:var(--blue);
  color:#fff;
}
footer a{color:#fff}
@media(max-width:850px){
 .hero-grid,.article-layout,.grid-3{grid-template-columns:1fr}
 .sidebar{position:static}
}
@media(max-width:620px){
 .grid-2{grid-template-columns:1fr}
 main{padding-left:14px;padding-right:14px}
 .topnav-inner{justify-content:flex-start}
}