:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent:#60a5fa;
  --accent-2:#6ee7b7;
  --glass: rgba(255,255,255,0.04);
  --radius:12px;
  --max-width:1100px;
  --gap:1.25rem;
  --text:#e6eef8;
  --shadow: 0 6px 18px rgba(2,6,23,0.55);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#071025 0%, #071627 60%), var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

.container{
  width:clamp(280px,92%,var(--max-width));
  margin:0 auto;
  padding:2rem 0;
}

/* header */
.site-header{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position:sticky;
  top:0;
  z-index:30;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:space-between;
  padding:0.75rem 0;
}
.brand{ display:flex; align-items:center; gap:0.75rem; text-decoration:none; color:var(--text)}
.brand-logo{ width:38px; height:38px; object-fit:contain; display:block; }
.brand-text{ font-weight:700; font-size:1.05rem; letter-spacing:0.3px}

/* nav */
.nav{ display:flex; align-items:center; gap:1rem}
.nav-list{ list-style:none; display:flex; gap:0.75rem; margin:0; padding:0 }
.nav-list a{ color:var(--text); text-decoration:none; padding:0.45rem 0.6rem; border-radius:8px; display:inline-block; font-weight:600; opacity:0.95}
.nav-list a:hover, .nav-list a.active{ background:rgba(255,255,255,0.02)}

/* mobile toggle hide on wide screens */
.nav-toggle{ background:transparent; border:0; color:var(--text); display:flex; align-items:center; padding:0.35rem; border-radius:8px }
@media(min-width:900px){
  .nav-toggle{ display:none }
}

/* hero */
.hero{ padding:3rem 0 4rem; }
.hero-grid{ display:grid; gap:1.25rem; grid-template-columns: 1fr; align-items:center; }
.hero-copy h1{ font-size:2.25rem; margin:0 0 .5rem; letter-spacing:-0.6px}
.lead{ color:var(--muted); font-size:1.05rem; margin:0 0 1rem}
.hero-ctas{ display:flex; gap:.75rem; margin:1rem 0 }
.btn{ padding:0.6rem 0.9rem; border-radius:10px; font-weight:700; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; border:1px solid transparent}
.btn-primary{ background:linear-gradient(90deg,var(--accent-2),var(--accent)); color:#061421; border-radius:12px; box-shadow:var(--shadow)}
.btn-ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.06)}
.keypoints{ display:flex; gap:0.75rem; padding:0; margin:1rem 0 0; list-style:none; color:var(--muted)}

/* hero visual */
.hero-visual{ display:flex; justify-content:center; align-items:center; margin-top:1rem; }
.hero-art{ width:100%; height:auto; max-width:420px; border-radius:14px; box-shadow:var(--shadow); overflow:hidden }

/* about */
.about h2, .features h2{ margin-top:0; margin-bottom:0.75rem; font-size:1.35rem}
.about-grid{ display:grid; gap:1rem; grid-template-columns: 1fr; align-items:start }
.about-stats{ display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:0.5rem }
.card.small{ background:var(--glass); padding:0.8rem; border-radius:10px; min-width:120px; text-align:center; border:1px solid rgba(255,255,255,0.02) }

/* features */
.features-grid{ display:grid; gap:1rem; grid-template-columns: 1fr; margin-top:1rem }
.feature{ background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:1rem; border-radius:12px; border:1px solid rgba(255,255,255,0.02) }

/* newsletter */
.newsletter-card{ background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:1rem; border-radius:14px; display:flex; flex-direction:column; gap:0.75rem }
.newsletter-form{ display:flex; gap:0.5rem; }
.newsletter-form input{ flex:1; padding:0.6rem; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--text) }

/* product grid */
.product-grid{ display:grid; gap:1rem; grid-template-columns: 1fr; margin:1rem 0 4rem }
.product-card{ background:var(--card); padding:1rem; border-radius:12px; border:1px solid rgba(255,255,255,0.03) }
.product-media{ width:100%; height:80px; display:flex; align-items:center; justify-content:center; margin-bottom:0.75rem }

/* contact */
.contact-main{ padding-bottom:4rem }
.contact-form{ display:grid; gap:0.75rem; max-width:720px }
.form-row label{ display:block; font-size:0.9rem; margin-bottom:0.35rem; color:var(--muted) }
.form-row input, .form-row textarea{ width:100%; padding:0.75rem; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--text) }
.form-actions{ display:flex; gap:0.5rem; align-items:center }

/* footer */
.site-footer{ border-top:1px solid rgba(255,255,255,0.03); padding:1.25rem 0; margin-top:3rem; }
.footer-grid{ display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap }

/* typographic tweaks */
.muted{ color:var(--muted); font-size:0.95rem }
.text-link{ color:var(--accent); text-decoration:none; font-weight:700 }

/* accessible sr-only */
.sr-only{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* responsive */
@media(min-width:900px){
  .hero-grid{ grid-template-columns: 1fr 420px }
  .about-grid{ grid-template-columns: 1fr 320px }
  .features-grid{ grid-template-columns: repeat(3,1fr) }
  .product-grid{ grid-template-columns: repeat(2, 1fr) }
}

@media(min-width:1200px){
  .container{ width:var(--max-width) }
  .product-grid{ grid-template-columns: repeat(3, 1fr) }
}