:root { --ink:#e8eef5; --dim:#9db0c3; --panel:#141e2a; --edge:#31445a; --gold:#ffd166; --teal:#2fa39c; --crystal:#7fd4ff; --rust:#c2452f; }
* { box-sizing:border-box; }
body { margin:0; background:#0d141d; color:var(--ink); font:16px/1.6 system-ui,"Segoe UI",Roboto,sans-serif; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
header.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.logo { font-weight:800; letter-spacing:.22em; color:var(--gold); font-size:18px; }
.logo span { color:var(--teal); }
.hero { position:relative; display:grid; gap:22px; padding:26px 0 40px; }
@media (min-width:860px) { .hero { grid-template-columns:1.1fr 1fr; align-items:center; } }
h1.title { font-size:clamp(38px,7vw,64px); line-height:1.02; margin:0; letter-spacing:.06em;
  background:linear-gradient(92deg,#ffd166,#7fd4ff 55%,#66e8df); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { font-size:clamp(16px,2.4vw,20px); color:var(--dim); margin:12px 0 20px; max-width:46ch; }
.cta { display:inline-block; background:linear-gradient(180deg,#ffd166,#e8a53c); color:#1a1205;
  font-weight:800; font-size:19px; padding:14px 38px; border-radius:12px; text-decoration:none;
  border:1px solid #ffe3a1; box-shadow:0 6px 24px #ffd16633; }
.cta:hover { transform:translateY(-2px); }
#hero-preview { width:100%; aspect-ratio:16/10; border-radius:14px; border:1px solid var(--edge);
  background:#0a1017; display:block; }
section { padding:34px 0; }
h2 { font-size:26px; letter-spacing:.05em; color:var(--gold); margin:0 0 14px; }
#features { list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
#features li { background:var(--panel); border:1px solid var(--edge); border-radius:12px; padding:14px 16px; }
#features b { color:var(--crystal); display:block; }
#gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
#gallery img { width:100%; border-radius:12px; border:1px solid var(--edge); }
#controls { background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:18px 22px; }
#controls kbd { background:#22303f; border:1px solid var(--edge); border-bottom-width:3px; border-radius:6px; padding:2px 8px; font-size:13px; }
#controls ul { margin:8px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
footer { padding:26px 0 34px; color:var(--dim); font-size:13px; border-top:1px solid var(--edge); margin-top:20px; }
.two { color:var(--teal); font-weight:700; }