:root{--bg:#fbfbfb;--accent:#0b5f8a;--muted:#6b7280;--card:#ffffff}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;margin:0;background:var(--bg);color:#0f1724;line-height:1.45}
.container{max-width:1100px;margin:0 auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:25px}
.brand img{height:auto;width:auto;display:block}
.brand h1{font-size:20px;margin:0;letter-spacing:0.6px}
.tagline{font-size:12px;color:var(--muted)}
nav{display:flex;gap:14px;align-items:center}
nav a{color:var(--muted);text-decoration:none;font-weight:600}
.cta{background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700}
.hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:28px 0}
.hero .eyebrow{color:var(--accent);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:1px}
.hero h2{font-size:36px;margin:10px 0}
.hero p{color:var(--muted);margin:0 0 18px}
.actions{display:flex;gap:12px}
.btn{padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.btn-outline{border:2px solid var(--accent);color:var(--accent);background:transparent}
.btn-solid{background:var(--accent);color:#fff;border:none}
.hero-visual{background:linear-gradient(180deg,#f8fafc,#ffffff);border-radius:14px;padding:22px;box-shadow:0 6px 18px rgba(10,20,30,0.06)}
.product-card{background:var(--card);padding:16px;border-radius:12px;margin-bottom:12px;box-shadow:0 4px 14px rgba(10,20,30,0.04)}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.product-card h3{margin:0 0 8px}
.product-card p{margin:0;color:var(--muted);font-size:14px}
.about{display:flex;gap:18px;align-items:center;padding:28px 0}
.about-text{flex:1}
.about-facts{width:220px}
.about-facts ul{margin:0;padding-left:18px;color:var(--muted)}
footer{padding:20px 0;color:var(--muted);font-size:14px;border-top:1px solid #eef2f6;margin-top:28px;text-align:center}
form{display:grid;gap:10px;max-width:560px}
form input,form textarea{padding:12px;border-radius:8px;border:1px solid #e6eef4}
@media (max-width:900px){.hero{grid-template-columns:1fr;}.products{grid-template-columns:repeat(2,1fr)}.brand img{height:48px}}
@media (max-width:520px){.container{padding:16px}.products{grid-template-columns:1fr}.brand h1{font-size:16px}.hero h2{font-size:26px}nav{display:none}.brand img{height:44px}}