* { box-sizing: border-box; }
:root { --sky:#0369a1; --sky-2:#0ea5e9; --bg:#f7fafc; --text:#0f172a; --muted:#475569; }
html,body{ margin:0; padding:0; font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); background:#fff; }
a{ color:var(--sky); text-decoration:none; }
.container{ width:min(1120px,92%); margin:0 auto; }
.flex{ display:flex; } .between{ justify-content:space-between;} .align-center{ align-items:center;} .gap{ gap:12px;}
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px;} .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media(max-width:860px){ .grid-3{grid-template-columns:1fr 1fr;} .grid-4{grid-template-columns:1fr 1fr;} .hide-sm{display:none;} }
@media(max-width:520px){ .grid-3,.grid-4{grid-template-columns:1fr;} }
.topbar{ position:sticky; top:0; background:rgba(255,255,255,.8); backdrop-filter:blur(8px); border-bottom:1px solid #e2e8f0; z-index:10;}
.brand .logo{ height:44px; width:44px; border-radius:10px; object-fit:cover;}
.brand-title{ font-weight:800; font-size:1.05rem;} .brand-sub{ font-size:.78rem; color:var(--muted); }
.hero{ background:linear-gradient(180deg,#f0f9ff,#ffffff); border-bottom:1px solid #e2e8f0; }
.hero-inner{ padding:56px 0; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; }
.hero h1{ font-size:clamp(28px,4vw,46px); line-height:1.1; margin:10px 0; }
.hero p{ color:var(--muted); font-size:1rem; }
.hero img{ border-radius:20px; width:100%; height:360px; object-fit:cover; border:1px solid #e2e8f0; box-shadow:0 12px 40px rgba(2,6,23,.08); }
.badges{ display:flex; gap:10px; margin-top:12px;} .badge{ background:#fff; border:1px solid #e2e8f0; padding:8px 12px; border-radius:999px; font-weight:600; font-size:.82rem; }
.section{ padding:42px 0; }
.card{ border:1px solid #e2e8f0; background:#fff; border-radius:16px; padding:16px; box-shadow:0 6px 22px rgba(15,23,42,.04); }
.card h3{ margin:6px 0 8px; font-size:1.05rem;} .card p{ color:var(--muted); font-size:.95rem; }
.btn{ display:inline-block; background:var(--sky); color:#fff; padding:12px 18px; border-radius:14px; font-weight:600; }
.btn.outline{ background:#fff; color:var(--sky); border:1px solid var(--sky); }
.list{ list-style:none; padding:0; margin:0;} .list li{ margin:8px 0; }
.footer{ background:#f8fafc; border-top:1px solid #e2e8f0; margin-top:28px;} .footer .container{ padding:18px 0; } .footer h4{ margin-bottom:8px; }
.copyright{ text-align:center; color:#64748b; font-size:.85rem; padding:4px 0 16px; }
.products-grid .card img{ width:100%; height:160px; object-fit:cover; border-radius:12px; border:1px solid #e2e8f0; }
.table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.table th,.table td{ border:1px solid #e2e8f0; padding:10px; text-align:left; }
.table th{ background:#f1f5f9; }
.notice{ padding:10px 12px; background:#f1f5f9; border:1px dashed #cbd5e1; border-radius:12px; font-size:.9rem; color:#334155; }
.contact-card input,.contact-card textarea{ width:100%; padding:12px 12px; border-radius:12px; border:1px solid #e2e8f0; font-size:1rem; }
.contact-card button{ width:100%; margin-top:10px; }