:root{ --header-h:64px; --blue:#0b3a82; --blue-600:#0d49a1; --sky:#f4f8fc; --text:#0f172a; --muted:#475569; }
*{ box-sizing:border-box }
body{ margin:0; font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:#fff }
a{ color:inherit; text-decoration:none }
.container{ max-width:1120px; margin:0 auto; padding:0 16px }
header{ position:sticky; top:0; z-index:30; border-bottom:1px solid #e5e7eb; background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(6px) }
.nav{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between }
.brand{ display:flex; gap:10px; align-items:center; height:var(--header-h); font-weight:700; }
.brand img{ height:calc(var(--header-h) - 8px); width:auto; max-height:100%; aspect-ratio:1/1; object-fit:contain; border:none; display:block; }
.nav a{ padding:8px 10px; border-radius:10px }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer }
.btn.primary{ background:var(--blue); color:#fff; border-color:var(--blue) }
.btn.primary:hover{ background:var(--blue-600) }
.input, select, textarea{ width:100%; padding:12px 12px; border-radius:10px; border:1px solid #cbd5e1; outline:none; font-size:14px }
.label{ font-size:12px; color:#64748b; margin-bottom:6px }
.grid{ display:grid; gap:16px }
.grid-2{ grid-template-columns:1fr }
@media(min-width:900px){ .grid-2{ grid-template-columns:1fr 1fr } }
.hero{ background:var(--sky); padding:56px 0 }
.h1{ font-size:40px; line-height:1.1; margin:0 0 8px }
.h2{ font-size:24px; margin:0 0 8px }
.muted{ color:var(--muted) }
.card{ border:1px solid #e5e7eb; border-radius:16px; padding:16px; background:#fff }
.products{ display:grid; gap:16px }
@media(min-width:760px){ .products{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1024px){ .products{ grid-template-columns:repeat(3,1fr) } }
.small{ font-size:12px; color:#6b7280 }
.footer{ border-top:1px solid #e5e7eb; margin-top:40px; padding:24px 0 }
.hidden{ display:none }
.center{ display:flex; gap:8px; }
.searchbar{ display:flex; gap:8px; margin-top:16px }

.brand>div{ font-size:calc(var(--header-h)*0.46); line-height:1; color:var(--blue); font-weight:800; }

@media (min-width: 1024px){ :root{ --header-h:72px; } }

@media (max-width: 480px){ :root{ --header-h:56px; } .brand>div{ font-size:calc(var(--header-h)*0.44); } }