:root{--brand:#0d6efd;--brand-dark:#0b5ed7;--bg:#ffffff;--muted:#6b7280;--text:#111827;--ring:#e5e7eb}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;color:var(--text);background:var(--bg)}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--ring)}
.header .inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}.brand img{height:34px;width:34px}.brand span{font-size:20px;color:#0b1324}
.nav{display:flex;gap:14px;flex-wrap:wrap}.nav a{color:#0b1324;padding:8px 12px;border-radius:10px}.nav a:hover{background:#eff6ff}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1px solid var(--ring);background:#fff;color:#0b1324;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.hero{background:linear-gradient(110deg,#f8fbff 0,#ffffff 60%);padding:44px 0;border-bottom:1px solid var(--ring)}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 8px}.hero p{color:var(--muted);margin:0 0 16px}
.kv{height:260px;border-radius:16px;overflow:hidden;border:1px solid var(--ring)}.kv img{width:100%;height:100%;object-fit:cover}
.section{padding:28px 0}.h2{font-size:24px;font-weight:800;margin:0 0 10px}
.cards{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--ring);border-radius:14px;overflow:hidden}.card .body{padding:16px}
.features{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.feature{background:#fff;border:1px solid var(--ring);border-radius:14px;padding:14px}
.grid-2{display:grid;gap:16px;grid-template-columns:1fr 1fr}.grid-4{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}.gallery img{width:100%;aspect-ratio:4/3;border-radius:10px;object-fit:cover;border:1px solid #eef2f7}
.list{padding-left:18px}
.footer{margin-top:36px;border-top:1px solid var(--ring);background:#fff}
.footer .cols{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));padding:24px 0}
.footer small{color:#6b7280}
label{font-weight:600}.input,.select,textarea{width:100%;padding:10px 12px;border:1px solid var(--ring);border-radius:10px}
.form-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.notice{padding:12px;border-radius:12px;background:#ecfeff;color:#155e75;border:1px solid #a5f3fc}
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ring);border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--ring)}.table th{background:#f1f5f9;text-align:left}
@media (max-width:980px){.hero .grid{grid-template-columns:1fr}.cards,.features{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}.grid-4,.gallery{grid-template-columns:1fr 1fr}.footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cards,.features,.grid-4,.gallery{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}