:root {
  --bg-app: #08080C;
  --bg-base: #0B1220;
  --glass-2: rgba(255,255,255,0.055);
  --glass-border: rgba(255,255,255,0.09);
  --accent: #FF8A3D;
  --accent-300: #FFA85C;
  --text-primary: #FBFBFE;
  --text-secondary: #CFCFD9;
  --text-muted: #9C9CAA;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --ease-glass: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; }
.brand img { width: 40px; height: 40px; }
.hero { text-align: center; padding: 72px 0 56px; }
.hero h1 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 800; font-size: clamp(36px, 6vw, 60px); line-height: 1.05;
  background: linear-gradient(180deg, #fff, var(--accent-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.tagline { color: var(--text-secondary); font-size: 18px; margin-top: 16px; }
.download {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 32px;
  background: var(--accent); color: #08080C; font-weight: 700; font-size: 17px;
  padding: 14px 28px; border-radius: var(--radius-pill); text-decoration: none;
  transition: transform 140ms var(--ease-glass), background 140ms var(--ease-glass);
}
.download:hover { transform: translateY(-2px); background: var(--accent-300); }
.download:focus-visible { outline: 2px solid var(--accent-300); outline-offset: 3px; }
.meta { color: var(--text-muted); font-size: 13px; margin-top: 14px; }
.meta .ver { font-family: "JetBrains Mono", monospace; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.card {
  background: var(--glass-2); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 20px;
}
.card h3 { font-size: 16px; margin-bottom: 6px; }
.card p { color: var(--text-secondary); font-size: 14px; }
.shot { margin: 32px 0; }
.shot img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--glass-border); display: block; }
footer { color: var(--text-muted); font-size: 13px; text-align: center; padding: 40px 0 24px; border-top: 1px solid var(--glass-border); margin-top: 40px; }
footer .build { font-family: "JetBrains Mono", monospace; }
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }