:root{
  --navy:#0e2a47; --blue:#194f82; --sky:#eaf3fb; --orange:#f28a28;
  --ink:#17212b; --muted:#5c6977; --line:#d9e2ea; --white:#fff;
  --shadow:0 14px 36px rgba(14,42,71,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,92vw);margin:auto}
.topbar{background:var(--navy);color:#dce8f3;font-size:.9rem}
.topbar .container{display:flex;justify-content:space-between;gap:18px;padding:8px 0;flex-wrap:wrap}
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:74px}
.brand img{width:190px;height:auto}
.menu{display:flex;align-items:center;gap:26px;font-weight:600;color:#304254}
.menu a:hover{color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:12px 18px;font-weight:700;border:1px solid transparent;transition:.2s}
.btn-primary{background:var(--orange);color:#18212a}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(.98)}
.btn-outline{border-color:#b8c8d6;color:var(--navy);background:#fff}
.hero{background:linear-gradient(120deg,#f7fbff 0%,#eef6fb 60%,#fff5eb 100%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;padding:86px 0}
.eyebrow{font-size:.83rem;text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:var(--blue)}
h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.04;margin:.5rem 0 1.2rem;color:var(--navy);letter-spacing:-.035em}
.hero p{font-size:1.17rem;color:var(--muted);max-width:700px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-visual{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:36px}
.hero-product{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-product img{height:150px;width:100%;object-fit:contain;background:#fff;border-radius:12px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:24px 0}
.metric{padding:16px 0;border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric strong{display:block;color:var(--navy);font-size:1.2rem}
.metric span{color:var(--muted);font-size:.92rem}
section{padding:80px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}
.section-head h2{font-size:clamp(2rem,3vw,2.7rem);line-height:1.1;margin:.35rem 0;color:var(--navy)}
.section-head p{max-width:640px;color:var(--muted);margin:0}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.category{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;transition:.2s;min-height:150px}
.category:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#b9cddd}
.category .num{font-size:.8rem;font-weight:800;color:var(--orange);letter-spacing:.12em}
.category h3{margin:8px 0 6px;color:var(--navy);line-height:1.25}
.category p{margin:0;color:var(--muted);font-size:.92rem}
.alt{background:#f6f9fc}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 4px 15px rgba(14,42,71,.04)}
.product-card .image{height:245px;padding:22px;background:linear-gradient(#fff,#f7fafc)}
.product-card img{width:100%;height:100%;object-fit:contain}
.product-card .body{padding:20px}
.badge{display:inline-block;font-size:.76rem;font-weight:800;color:var(--blue);background:var(--sky);padding:4px 8px;border-radius:999px}
.product-card h3{margin:10px 0 5px;color:var(--navy)}
.product-card p{margin:0 0 14px;color:var(--muted);font-size:.94rem}
.text-link{color:var(--blue);font-weight:800}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.feature-box{background:var(--navy);border-radius:20px;color:#fff;padding:40px;box-shadow:var(--shadow)}
.feature-box h2{font-size:2.4rem;line-height:1.1;margin:.3rem 0 1rem}
.feature-box p{color:#d7e5f1}
.feature-list{display:grid;gap:12px;margin-top:22px}
.feature-list div{padding:13px 0;border-top:1px solid rgba(255,255,255,.14)}
.cta{background:linear-gradient(120deg,var(--navy),#174d7d);color:#fff;border-radius:22px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta h2{margin:0 0 8px;font-size:2rem}
.cta p{margin:0;color:#d8e4ef}
footer{background:#091c30;color:#cbd7e3;padding:54px 0 24px;margin-top:80px}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:40px}
footer h4{color:#fff;margin-top:0}
footer a{display:block;margin:7px 0;color:#cbd7e3}
footer .brand img{width:185px;filter:brightness(1.4)}
.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;font-size:.88rem;color:#95a9bb}
.page-hero{background:#f5f9fc;padding:58px 0;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:3rem;margin-bottom:.4rem}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filter{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#486173;font-weight:700;font-size:.88rem}
.detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;padding-top:60px}
.detail-image{border:1px solid var(--line);border-radius:18px;padding:38px;background:#fff}
.detail-image img{width:100%;height:400px;object-fit:contain}
.specs{width:100%;border-collapse:collapse;margin-top:18px}
.specs td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.specs td:first-child{font-weight:700;color:#384f61;width:40%}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.contact-card{border:1px solid var(--line);border-radius:16px;padding:28px}
.notice{background:#fff8e9;border:1px solid #efd7a4;border-radius:12px;padding:14px 16px;color:#72501b;margin-top:20px}
.mobile-toggle{display:none}
@media(max-width:900px){
 .hero-grid,.feature,.detail,.contact-grid{grid-template-columns:1fr}
 .hero-grid{gap:35px;padding:55px 0}
 .category-grid{grid-template-columns:repeat(2,1fr)}
 .product-grid{grid-template-columns:repeat(2,1fr)}
 .metrics{grid-template-columns:repeat(2,1fr)}
 .metric{border-right:0}
 .menu{display:none}
 .mobile-toggle{display:block;font-weight:800}
 .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
 section{padding:58px 0}
 .category-grid,.product-grid,.footer-grid{grid-template-columns:1fr}
 .hero-product img{height:120px}
 .topbar .container{justify-content:center}
 .section-head{display:block}
 .cta{display:block;padding:30px}
 .cta .btn{margin-top:20px}
 .page-hero h1{font-size:2.3rem}
}