:root{--maxw:1160px;--fg:#0f172a;--muted:#475569;--brand:#0ea5e9;--card:#ffffff;--bg:#f6fbff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:Inter, Pretendard, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, sans-serif;margin:0;color:var(--fg);line-height:1.8;background:var(--bg)}
a{color:var(--brand);text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:20px}
.header{background:linear-gradient(120deg,#e0f2fe 0%, #fdfcff 50%, #e0f2fe 100%);position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(6px)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:36px;height:36px;border-radius:10px;background:#0ea5e9;display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(14,165,233,.35);transition:transform .2s ease}
.brand:hover .logo{transform:rotate(-6deg) scale(1.03)}
.brand .name{font-weight:900;letter-spacing:.2px;color:#0f172a}
.navtabs{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 2px rgba(16,24,40,.04);color:#0f172a;font-weight:700;transition:all .18s ease}
.tab:hover{border-color:#bae6fd;box-shadow:0 6px 18px rgba(14,165,233,.18);transform:translateY(-1px)}
.tab.active{background:#0ea5e9;color:#fff;border-color:#0ea5e9;box-shadow:0 6px 20px rgba(14,165,233,.35)}
.hero{padding:56px 20px 28px}
.hero h1{font-size:clamp(30px,3.2vw,46px);margin:0 0 10px}
.hero p{color:var(--muted);margin:0}
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:8px}
.top-banner{margin:10px 0 22px;border-radius:22px;overflow:hidden;border:1px solid #e2e8f0;box-shadow:0 16px 40px rgba(2,6,23,.08)}
.top-banner img{width:100%;height:auto;display:block}
.card{background:var(--card);border:1px solid #eef2f7;border-radius:18px;padding:24px;margin:18px 0;box-shadow:0 12px 30px rgba(2,6,23,.06);transform:translateY(6px);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.card.reveal{transform:translateY(0);opacity:1}
.card:hover{box-shadow:0 18px 44px rgba(2,6,23,.1)}
.section-title{font-size:22px;margin:6px 0 12px}
.snippet{background:#ecfeff;border:1px solid #67e8f9;color:#134e4a;padding:14px 16px;border-radius:14px}
.internal-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.internal-links a{display:inline-block;padding:6px 10px;border-radius:10px;background:#f1f5f9;transition:background .15s ease, transform .15s ease}
.internal-links a:hover{background:#e2e8f0;transform:translateY(-1px)}
.footer{padding:36px 20px;color:var(--muted)}
table{width:100%;border-collapse:collapse;background:white;border-radius:12px;overflow:hidden}
th,td{padding:12px;border-bottom:1px solid #e2e8f0;text-align:left}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#e2e8f0;font-size:12px}
.cta{display:inline-block;margin-top:12px;padding:10px 16px;border-radius:12px;background:var(--brand);color:#fff;box-shadow:0 10px 22px rgba(14,165,233,.35);transition:transform .15s ease, box-shadow .2s ease}
.cta:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(14,165,233,.45)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.product{grid-column:span 12;background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;box-shadow:0 10px 24px rgba(2,6,23,.06);transition:transform .18s ease, box-shadow .18s ease}
.product:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(2,6,23,.1)}
.product .img{aspect-ratio:4/3;background:#f8fafc;display:grid;place-items:center;color:#94a3b8;font-weight:700}
.product .body{padding:14px 16px}
@media(min-width:900px){.product{grid-column:span 6}}