:root{
  --brand:#2563eb; --brand-2:#1e40af; --ink:#0f172a; --muted:#475569; --bg:#ffffff;
  --card:#ffffff; --border:#e2e8f0; --shadow:0 10px 30px rgba(2,6,23,.08);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:50}
.header-inner{height:68px;display:flex;align-items:center;justify-content:space-between}
.nav a{margin-left:18px;font-size:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;font-weight:600;box-shadow:0 1px 0 rgba(2,6,23,.02)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-2)}
.hero{padding:36px 0 8px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.hero-box{background:linear-gradient(135deg,#eff6ff,#fff);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:24px}
.h1{font-size:40px;line-height:1.1;margin:0 0 8px;font-weight:800}
.p{color:var(--muted)}
.search{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.input{flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;font-size:14px}
.select{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0 30px}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.card-img{aspect-ratio:16/9;background:#cbd5e1}
.card-body{padding:12px 14px}
.title{font-weight:700;margin:2px 0}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#f1f5f9;border:1px solid var(--border)}
.footer{border-top:1px solid var(--border);padding:24px 0;margin-top:24px}
.fab{position:fixed;right:20px;bottom:20px;background:#16a34a;color:#fff;border-radius:999px;padding:12px 18px;box-shadow:0 10px 25px rgba(0,0,0,.2);font-weight:700}
.breadcrumbs{font-size:14px;color:var(--muted);margin:10px 0}
.tabs{display:flex;gap:8px;margin:12px 0 16px;flex-wrap:wrap}
.tab{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;font-weight:600}
.tab.active{background:#ebf2ff;border-color:#c7d2fe;color:#1e40af}
.tabpanel{display:none}
.tabpanel.active{display:block}
.subh{font-size:22px;font-weight:700;margin:12px 0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--border);padding:10px;text-align:left}
.table th{background:#f8fafc}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
.media{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#000}
.media img,.media video{width:100%;height:220px;object-fit:cover}
.kv{display:flex;gap:12px;flex-wrap:wrap}
.kv .pill{border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:#fff;font-size:13px}
.small{font-size:12px;color:var(--muted)}
.logo{display:flex;align-items:center;gap:10px}
.logo .dot{width:26px;height:26px;border-radius:6px;background:var(--brand)}