:root{
  --bg:#f7fafc;
  --surface:#ffffff;
  --ink:#0b172a;
  --muted:#4b5563;
  --brand:#2563eb;
  --brand2:#22d3ee;
  --ring: 0 0 0 3px rgba(37,99,235,.15);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.container{max-width:1160px;margin:auto;padding:0 20px}
a{color:var(--brand);text-decoration:none}
header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter: blur(10px);border-bottom:1px solid #e5e7eb;z-index:30}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:14px 0}
nav a{padding:8px 12px;border-radius:10px}
nav a:hover{background:#eef2ff}
.logo{display:flex;align-items:center;gap:10px;font-weight:800}
.logo img{height:36px;width:36px;border-radius:10px;box-shadow: var(--ring)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;padding:56px 0 28px}
h1{font-size:46px;line-height:1.1;margin:0 0 10px}
.lead{color:var(--muted);margin:0 0 14px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;font-weight:700;border:1px solid #d1d5db;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 8px 24px rgba(37,99,235,.2)}
.btn.secondary{background:#fff;color:var(--ink)}
.btn.secondary:hover{background:#f8fafc}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.badge{font-size:12px;color:#111827;background:#eef2ff;border:1px solid #dbeafe;padding:4px 10px;border-radius:999px}

.hero-media{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.hero-media img{display:block;width:100%;height:auto}

.section{padding:52px 0}
.section h2{font-size:32px;margin:0 0 10px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--surface);border:1px solid #e5e7eb;border-radius:14px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.card p{color:var(--muted);margin:6px 0 0}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{background:linear-gradient(180deg, #ffffff, #f8fafc);border:1px solid #e5e7eb;border-radius:14px;padding:16px}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#dbeafe;color:#1e3a8a;font-weight:800;margin-bottom:8px}

.table{width:100%;border-collapse:collapse;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}
.table th,.table td{padding:12px 14px;border-bottom:1px solid #e5e7eb;text-align:left}
.table thead th{background:#f1f5f9}
.table tr:hover td{background:#f8fafc}

.notice{display:flex;gap:12px;align-items:flex-start;background:#ecfeff;border:1px solid #a5f3fc;border-radius:12px;padding:14px}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid #e5e7eb;background:#fff}

.faq details{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 16px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:700}
footer{border-top:1px solid #e5e7eb;padding:26px 0;color:#6b7280;background:#ffffff}
.kwd{color:#1e40af;font-weight:800}

@media (max-width: 960px){
  .hero{grid-template-columns:1fr}
  .grid-3,.steps{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  h1{font-size:38px}
}