
:root{
  --bg:#0b0c0f;
  --fg:#e8e8ea;
  --muted:#b9bcc6;
  --gold:#c59a5a;
  --card:#13151a;
  --border:#22252d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.65;
}
a{color:var(--fg); text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:24px}
.nav{position:sticky; top:0; backdrop-filter:saturate(120%) blur(8px); background:rgba(11,12,15,.7); border-bottom:1px solid var(--border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 24px;}
.brand{font-weight:700; letter-spacing:.5px}
.lang a{padding:6px 10px; border:1px solid var(--border); border-radius:20px; margin-left:8px}
.hero{padding:80px 24px; background:linear-gradient(140deg, #0b0c0f 0%, #0f1116 60%, #0b0c0f 100%); border-bottom:1px solid var(--border)}
h1{font-size:clamp(28px,5vw,44px); line-height:1.15; margin:0 0 8px}
h2{font-size:clamp(22px,3.2vw,32px); margin:28px 0 8px}
p.lead{color:var(--muted); max-width:70ch}
.cta{display:inline-block; margin-top:16px; padding:12px 16px; background:var(--gold); color:#111; border-radius:12px; font-weight:600}
.grid{display:grid; gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px}
.small{font-size:.95rem; color:var(--muted)}
footer{border-top:1px solid var(--border); padding:24px; font-size:.95rem; color:var(--muted)}
section{padding:40px 0}
ul{padding-left:20px}
.tag{display:inline-block; border:1px solid var(--border); padding:4px 8px; border-radius:999px; margin:4px 6px 0 0; color:var(--muted)}
.form{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px}
input,textarea{width:100%; background:#0f1116; border:1px solid var(--border); color:var(--fg); border-radius:10px; padding:12px; margin-top:6px}
label{font-weight:600; display:block; margin-top:10px}
button{background:var(--gold); color:#111; padding:12px 16px; border:none; border-radius:12px; font-weight:700; cursor:pointer}
.bullets li{margin:6px 0}
.note{border-left:3px solid var(--gold); padding-left:10px; color:var(--muted)}


/* Logo + product images */
.brand img{height:48px; vertical-align:middle; display:block}
.prod-img{max-width:360px; width:100%; border:1px solid var(--border); border-radius:12px; display:block; margin:0 0 10px 0}
@media (min-width: 900px){
  .card.prod{display:grid; grid-template-columns: 360px 1fr; gap:16px; align-items:start}
}


/* Prominent logo */
.brand img{height:64px; display:block}
.hero .hero-logo{display:block; height:220px; max-width:100%; margin:0 0 16px 0}
@media (max-width:700px){ .brand img{height:52px} .hero .hero-logo{height:170px}}
