:root{
  --bg:#0b0f14; --panel:#101722; --line:rgba(255,255,255,.08); --text:#f5f7fb;
  --muted:#b7c1cf; --red:#c81d25; --red-2:#e53d45; --silver:#d8dde5;
  --accent:#7dd3fc; --shadow:0 18px 40px rgba(0,0,0,.28); --radius:20px; --max:1200px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(200,29,37,.22), transparent 28%),
    radial-gradient(circle at 85% 0%, rgba(125,211,252,.12), transparent 18%),
    linear-gradient(180deg, #0a0f14 0%, #0d1218 35%, #0b1016 100%);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 2rem)); margin-inline:auto}
.topbar{border-bottom:1px solid var(--line); background:rgba(7,10,14,.72); backdrop-filter:blur(14px); position:sticky; top:0; z-index:1000;}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:1rem;}
.brand{display:flex; align-items:center; gap:.9rem; font-weight:800; letter-spacing:.2px}
.brand-mark{width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--red),#8c0f15); display:grid; place-items:center; box-shadow:var(--shadow); font-weight:900;}
.brand small{display:block; color:var(--muted); font-weight:600; letter-spacing:.3px}
.menu{display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center}
.menu a{color:var(--muted); font-weight:600; font-size:.95rem}
.menu a:hover,.menu a.active{color:var(--text)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border-radius:14px; padding:.95rem 1.2rem; font-weight:800; border:1px solid var(--line); transition:.2s ease;}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--red),var(--red-2)); color:#fff; border:none; box-shadow:0 14px 30px rgba(200,29,37,.25);}
.btn-secondary{background:rgba(255,255,255,.03); color:var(--text)}
.btn-light{background:#fff; color:#111827; border:none}
.hero{padding:4rem 0 2.5rem}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--silver); font-size:.88rem; font-weight:700;}
h1{font-size:clamp(2.3rem, 5vw, 4rem); line-height:1.05; margin:.9rem 0 1rem; letter-spacing:-.03em;}
.lead{font-size:1.05rem; color:var(--muted); max-width:72ch}
section{padding:3.5rem 0; border-top:1px solid rgba(255,255,255,.04)}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.5rem;}
.section-head h2{margin:0; font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.03em}
.section-head p{margin:0; color:var(--muted); max-width:58ch}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.block{padding:1.35rem}
.block h3{margin:.2rem 0 .45rem; font-size:1.05rem}
.block p,.block li{color:var(--muted)}
.icon{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(200,29,37,.18), rgba(125,211,252,.14)); border:1px solid var(--line); margin-bottom:.9rem; font-weight:800;}
.product-card{padding:1.15rem}
.tag{display:inline-block; padding:.35rem .65rem; border-radius:999px; font-size:.8rem; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--silver); margin-bottom:.7rem}
.article{padding:1.5rem}
.article h2{font-size:clamp(1.5rem,2.5vw,2.2rem); margin-top:0}
.article h3{margin-top:1.6rem}
.article p,.article li{color:var(--muted)}
.article ul,.article ol{padding-left:1.2rem}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
label{display:block; font-weight:700; margin-bottom:.35rem}
input,select,textarea{width:100%; background:#0f1722; color:var(--text); border:1px solid var(--line); border-radius:14px; padding:.95rem 1rem; font:inherit;}
textarea{min-height:150px; resize:vertical}
.map-box{min-height:320px; border-radius:18px; border:1px dashed var(--line); display:grid; place-items:center; color:var(--muted); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));}
.cta{padding:1.8rem; background:radial-gradient(circle at top right, rgba(200,29,37,.18), transparent 30%), linear-gradient(135deg, #111927, #0e151f); display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:center;}
.cta h2{margin:0 0 .45rem; font-size:clamp(1.7rem,3vw,2.5rem)}
.cta p{margin:0; color:var(--muted)}
.cta-actions{display:flex; gap:.8rem; justify-content:flex-end; flex-wrap:wrap}
footer{padding:2rem 0 3rem; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:1rem; margin-bottom:1rem}
.footer-card{padding:1.2rem}
.footer-card h3{margin:.2rem 0 .7rem; color:var(--text); font-size:1rem}
.footer-card p,.footer-card li{margin:0 0 .45rem}
.footer-card ul{list-style:none; padding:0; margin:0}
.legal{font-size:.9rem; color:#93a1b6; padding-top:1rem; border-top:1px solid var(--line)}
@media (max-width: 980px){
  .grid-2,.grid-3,.cta,.form-grid,.footer-grid{grid-template-columns:1fr 1fr}
  .cta-actions{justify-content:flex-start}
}
@media (max-width: 720px){
  .menu{display:none}
  .grid-2,.grid-3,.cta,.form-grid,.footer-grid{grid-template-columns:1fr}
  section{padding:3rem 0}
}