/* imenaudio.com. Palette + type from ../../DESIGN.md ("The Reliquary Machine") */
:root {
  --night:#07070f; --sky:#120f26; --slab:#141322; --slab-2:#1b1a2e; --edge:#2a2740;
  --gold:#c8a96a; --gold-dim:#8a7448; --ink:#ece8f7; --dim:#a39cbf; --faint:#6e688c;
  --light:#a166f7; --light-hi:#d6c2ff;
  --serif:"Cinzel", Georgia, serif; --sans:"Inter", system-ui, sans-serif; --mono:"JetBrains Mono", Consolas, monospace;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { background:var(--night); }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; color:var(--ink); font:15px/1.6 var(--sans); background:var(--night); overflow-x:hidden; }
::selection { background:var(--light); color:#fff; }
#sky { position:fixed; inset:0; z-index:0; pointer-events:none; }
nav, main, footer { position:relative; z-index:1; width:min(64rem, 100%); margin:0 auto; padding:0 16px; }
a { color:var(--light-hi); }
a:focus-visible, button:focus-visible { outline:2px solid var(--light); outline-offset:3px; }

nav { display:flex; align-items:center; gap:12px; padding-top:20px; padding-bottom:20px; }
nav .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font:600 15px var(--serif); letter-spacing:.22em; }
nav .brand span { color:var(--gold); }
nav svg { width:34px; height:34px; }
nav .links { margin-left:auto; display:flex; gap:20px; }
nav .links a { color:var(--dim); text-decoration:none; font:500 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; }
nav .links a:hover, nav .links a[aria-current] { color:var(--ink); }

main { flex:1; }
.hero { text-align:center; padding:56px 0 40px; }
.hero.vid { position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--edge); padding:0; aspect-ratio:16/9; max-height:70vh; width:100%; display:grid; place-items:center; }
.hero.vid video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero.vid::after { content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 50%, #07070fcc, #07070f55 70%, #07070fcc); }
.hero.vid .over { position:relative; z-index:1; padding:24px 16px; }
@media (max-width:640px) { .hero.vid { aspect-ratio:4/5; } }
.hero svg { width:84px; height:84px; }
h1 { margin:16px 0 0; font:600 clamp(30px, 7vw, 54px)/1.1 var(--serif); letter-spacing:.2em; }
h1 span { color:var(--gold); }
.lead { max-width:34rem; margin:14px auto 0; color:var(--dim); font-size:17px; }
h2 { margin:48px 0 14px; font:600 11px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dim); }
h2:first-child { margin-top:8px; }
p.note { color:var(--dim); margin:-6px 0 0; }

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:12px; }
.grid.big { grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr)); }
.card { display:flex; flex-direction:column; gap:4px; padding:18px; border-radius:14px; border:1px solid var(--edge);
  background:linear-gradient(180deg, #17152bcc, #0f0e1bcc); box-shadow:0 1px 0 #ffffff0d inset; }
.card.feat { border-color:var(--gold-dim); }
.card b { font:600 16px var(--serif); letter-spacing:.14em; }
.card .what { font:400 12px var(--mono); color:var(--dim); }
.card p { margin:6px 0 0; color:var(--dim); font-size:14px; }
.card .row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; }
.price { font:600 18px var(--mono); }
.price.free { color:var(--light-hi); }
.btn { display:inline-block; padding:8px 16px; border-radius:999px; border:1px solid var(--light); background:#a166f726; color:var(--ink);
  font:600 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; }
.btn:hover { background:#a166f74d; }
.btn[aria-disabled="true"] { border-color:var(--edge); background:none; color:var(--faint); cursor:default; }
.cta { text-align:center; margin-top:32px; }

.show { display:grid; grid-template-columns:1fr 1.3fr; gap:24px; align-items:center; margin-top:56px; }
.show .big { font:600 22px/1.3 var(--serif); letter-spacing:.06em; margin:0 0 8px; }
.show p { color:var(--dim); margin:0; }
.show .ctl { display:flex; gap:12px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.scope { width:100%; aspect-ratio:16/8; border-radius:18px; border:1px solid var(--gold-dim);
  background:radial-gradient(120% 90% at 50% 0%, #2a1f55, #120f26 55%, #090812); box-shadow:inset 0 0 0 5px #0b0a15, inset 0 0 0 6px #c8a96a33; }
.ab { display:inline-flex; border:1px solid var(--edge); border-radius:999px; overflow:hidden; }
.ab button { all:unset; cursor:pointer; padding:7px 14px; font:600 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.ab button[aria-pressed="true"] { background:#a166f733; color:var(--ink); }
.ab button:focus-visible { outline:2px solid var(--light); outline-offset:-2px; }
@media (max-width:760px) { .show { grid-template-columns:1fr; } }
.promise { display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); gap:12px; }
.promise div { padding:14px 16px; border-left:1px solid var(--gold-dim); color:var(--dim); }
.promise b { display:block; color:var(--ink); font-weight:600; }

.prose { max-width:42rem; }
.prose h1 { font-size:clamp(24px, 5vw, 34px); text-align:left; }
.prose h2 { margin-top:32px; }
.prose p, .prose li { color:var(--dim); }

footer { padding-top:56px; padding-bottom:28px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  color:var(--faint); font:400 11px var(--mono); letter-spacing:.08em; }
footer a { color:var(--faint); }

@media (max-width:520px) { nav .links { gap:14px; } nav .brand b { display:none; } }