:root{
  --bg1:#07090f; --bg2:#121a2e; --ink:#eef1f8; --muted:#a3abc0; --line:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.055); --glass-hi:rgba(255,255,255,.12);
  --a1:#7cc4ff; --a2:#a78bfa; --a3:#f0abfc;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(167,139,250,.28), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(124,196,255,.20), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg1) 70%);
  background-attachment: fixed;
  min-height:100vh;
}
a{color:var(--a1); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}
header.top{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; color:var(--ink)}
.brand-mark{width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg,var(--a1),var(--a2) 55%,var(--a3));
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 6px 18px rgba(124,196,255,.35)}
nav.lang a{color:var(--muted); margin-left:14px; font-size:14px}
nav.lang a[aria-current]{color:var(--ink)}
.hero{padding:56px 0 40px}
.eyebrow{display:inline-block; font-size:13px; color:var(--muted); border:1px solid var(--line);
  background:var(--glass); padding:5px 12px; border-radius:999px; backdrop-filter:blur(8px)}
h1{font-size:clamp(34px,6vw,58px); line-height:1.05; margin:18px 0 16px; letter-spacing:-1px}
.grad{background:linear-gradient(100deg,var(--a1),var(--a2) 50%,var(--a3)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:clamp(17px,2.2vw,20px); color:#cfd5e4; max-width:680px}
.card{background:linear-gradient(180deg,var(--glass-hi),var(--glass)); border:1px solid var(--line);
  border-radius:22px; padding:28px; backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 20px 50px rgba(0,0,0,.35)}
.product{display:grid; grid-template-columns:120px 1fr; gap:26px; align-items:center; margin:28px 0}
.product img{width:120px; height:120px; border-radius:27px; box-shadow:0 14px 40px rgba(167,139,250,.35)}
.product h2{margin:0 0 6px; font-size:26px}
.tag{display:inline-block; font-size:12px; color:#0b0f1a; background:linear-gradient(90deg,var(--a1),var(--a2)); padding:3px 10px; border-radius:999px; font-weight:600; margin-left:8px; vertical-align:middle}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:22px 0 10px}
.feat{padding:20px; border-radius:18px; border:1px solid var(--line); background:var(--glass)}
.feat h3{margin:0 0 6px; font-size:16px}
.feat p{margin:0; color:var(--muted); font-size:15px}
section{margin:46px 0}
section h2.sec{font-size:22px; margin:0 0 14px}
.muted{color:var(--muted)}
dl.facts{display:grid; grid-template-columns:200px 1fr; gap:8px 18px; margin:0}
dl.facts dt{color:var(--muted)}
dl.facts dd{margin:0}
footer{border-top:1px solid var(--line); margin-top:60px; padding:24px 0 40px; color:var(--muted); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between}
.prose h2{font-size:20px; margin:30px 0 8px}
.prose p, .prose li{color:#d3d8e6}
@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .product{grid-template-columns:1fr; text-align:left}
  dl.facts{grid-template-columns:1fr}
  dl.facts dt{margin-top:8px}
}