:root{
  --bg:#171717;
  --bg2:#222;
  --text:#fff;
  --muted:#c9c9c9;
  --accent:#f5f5f5;
  --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,92%);margin:auto}
header{
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.brand{
  font-weight:800;
  letter-spacing:.08em;
  font-size:15px;
}
.hero{
  min-height:650px;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:25px;
  align-items:center;
  padding:55px 0 45px;
  overflow:hidden;
}
.kicker{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ddd;
  margin-bottom:18px;
}
h1{
  font-size:clamp(42px,6vw,74px);
  line-height:.95;
  margin:0 0 22px;
  letter-spacing:-.045em;
}
.hero p{
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
  max-width:480px;
}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#111;
  padding:15px 24px;
  border-radius:5px;
  font-size:14px;
  font-weight:800;
  margin-top:10px;
}
.visual{
  position:relative;
  min-height:470px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.glow{
  position:absolute;
  width:390px;height:390px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 68%);
}
.product{
  position:relative;
  z-index:2;
  width:min(440px,90%);
  filter:drop-shadow(0 30px 35px rgba(0,0,0,.55));
}
.device{
  position:absolute;
  z-index:3;
  border:6px solid #2e2e2e;
  background:#050505;
  border-radius:14px;
  box-shadow:0 22px 45px rgba(0,0,0,.55);
  overflow:hidden;
}
.screen{
  padding:10px;
  color:#fff;
  font-size:10px;
  line-height:1.3;
}
.phone{width:78px;right:5%;bottom:55px;transform:rotate(4deg)}
.tablet{width:150px;left:0;bottom:30px;transform:rotate(-4deg)}
.monitor{width:220px;right:0;top:35px}
.screen .bar{height:5px;background:#555;margin-bottom:8px;border-radius:4px}
.screen .block{height:22px;border:1px solid #444;margin:6px 0;border-radius:3px}
.section{
  padding:85px 0;
  background:#f5f5f5;
  color:#171717;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  background:#fff;
  padding:28px;
  border:1px solid #ddd;
  min-height:180px;
}
.card h2{font-size:19px;margin:0 0 12px}
.card p{color:#555;line-height:1.55;margin:0}
.disclosure{
  padding:50px 0;
  border-top:1px solid var(--line);
}
.disclosure h2{font-size:18px}
.disclosure p{color:#bbb;line-height:1.6;max-width:850px}
footer{
  border-top:1px solid var(--line);
  padding:25px 0 35px;
  color:#999;
  font-size:13px;
}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
@media(max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:40px}
  .visual{min-height:390px}
  .grid{grid-template-columns:1fr}
  .monitor{right:3%;top:10px}
  .tablet{left:2%;bottom:15px}
  .phone{right:4%;bottom:30px}
}

h1 a, .card h2 a { color: inherit; text-decoration: none; }
h1 a:hover, .card h2 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.visual > a { display:flex; align-items:center; justify-content:center; width:100%; }