:root {
  --bg: #090808;
  --panel: #131010;
  --panel-light: #1a1514;
  --ink: #eee8de;
  --muted: #aaa198;
  --red: #b8322a;
  --red-bright: #dc5144;
  --gold: #c3a36b;
  --line: rgba(238, 232, 222, .14);
  --header-height: 68px;
  --content-width: 1060px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0, rgba(132, 62, 23, .12), transparent 32rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { color: #fff; background: var(--red); }
a { color: inherit; }
.content { width: min(calc(100% - 2.5rem), var(--content-width)); margin-inline: auto; }
.skip-link { position: fixed; left: 1rem; top: -6rem; z-index: 100; padding: .7rem 1rem; color: var(--bg); background: var(--ink); }
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: max(1.25rem, calc((100% - var(--content-width)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(9, 8, 8, .92);
  backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border: 1px solid rgba(220, 81, 68, .75);
  color: var(--red-bright);
  font: 800 .62rem/1 sans-serif;
  transform: rotate(45deg);
}
.brand-mark::after { content: "IC"; transform: rotate(-45deg); }
.brand-name { text-transform: uppercase; letter-spacing: .22em; font-weight: 750; font-size: .77rem; }
nav { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 2rem); }
nav a { color: #c7bfb5; text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: .64rem; font-weight: 700; }
nav a:hover, nav a:focus-visible { color: #fff; }
.nav-download { padding: .55rem .85rem; border: 1px solid var(--line); }

.hero { padding-top: 2.5rem; padding-bottom: 2.75rem; }
.hero-banner {
  display: block;
  width: min(100%, 940px);
  height: auto;
  margin-inline: auto;
  border: 1px solid rgba(195, 163, 107, .25);
  box-shadow: 0 1.2rem 3.5rem rgba(0,0,0,.42);
}
.hero-intro { max-width: 720px; margin-top: 2.2rem; }
.eyebrow { margin: 0 0 .65rem; color: var(--gold); text-transform: uppercase; letter-spacing: .19em; font-size: .65rem; font-weight: 750; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.05; letter-spacing: -.025em; }
h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.hero-intro > p:last-child, .section-title > p:last-child { margin: .9rem 0 0; color: var(--muted); font-size: .98rem; }

.garage, .voice, .setup, .privacy { padding-block: 3.5rem; border-top: 1px solid var(--line); }
.section-title { max-width: 670px; margin-bottom: 1.6rem; }
.section-title h2 span { color: var(--red-bright); font-size: .55em; }
.download-card { display: grid; grid-template-columns: .85fr 1.15fr; border: 1px solid var(--line); background: var(--panel); }
.download-main { padding: 1.7rem; border-right: 1px solid var(--line); }
.status-line { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .61rem; }
.status-dot { width: .42rem; aspect-ratio: 1; border-radius: 50%; background: #72ad6c; box-shadow: 0 0 .6rem #72ad6c; }
.button { display: inline-flex; min-height: 3.35rem; align-items: center; justify-content: center; gap: .8rem; padding: .75rem 1.1rem; border: 1px solid var(--line); text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .67rem; font-weight: 800; }
.button-primary { color: #fff; border-color: var(--red); background: var(--red); }
.button-primary:hover, .button-primary:focus-visible { background: #c53d34; }
.button small { color: rgba(255,255,255,.65); font-size: .55rem; }
.testing-note { margin: .9rem 0 0; color: #847b74; font-size: .7rem; }
.release-details { margin: 0; }
.release-details > div { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); }
.release-details > div:last-child { border-bottom: 0; }
.release-details dt { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .61rem; }
.release-details dd { min-width: 0; margin: 0; color: #d8d0c6; font-size: .8rem; overflow-wrap: anywhere; }
.release-details code { color: #90867d; font: .58rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.copy-button { align-self: start; border: 0; padding: 0; color: var(--gold); background: transparent; text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; cursor: pointer; }

.garage-heading { max-width: none; display: grid; grid-template-columns: 1fr minmax(18rem, 28rem); gap: 2rem; align-items: end; }
.garage-heading > p { margin: 0 0 .25rem; color: var(--muted); font-size: .9rem; }
.garage-console { overflow: hidden; border: 1px solid rgba(195, 163, 107, .24); background: linear-gradient(145deg, #171211, #0f0d0d 62%); box-shadow: 0 1.4rem 4rem rgba(0,0,0,.24); }
.garage-toolbar { min-height: 4.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018); }
.garage-toolbar > div { display: flex; align-items: center; gap: .8rem; }
.garage-toolbar strong, .garage-toolbar span { display: block; }
.garage-toolbar strong { font: 400 1rem/1.2 Georgia, serif; }
.garage-toolbar div span { margin-top: .15rem; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; }
.garage-emblem { display: grid !important; place-items: center; width: 2.35rem; aspect-ratio: 1; border: 1px solid rgba(220, 81, 68, .6); color: var(--red-bright); font-size: .58rem !important; font-weight: 800; transform: rotate(45deg); }
.garage-emblem::after { content: "IC"; transform: rotate(-45deg); }
.preview-badge { padding: .38rem .62rem; border: 1px solid rgba(195,163,107,.3); color: var(--gold); text-transform: uppercase; letter-spacing: .11em; font-size: .55rem; }
.garage-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 1px; background: var(--line); }
.garage-slot { min-height: 13.5rem; padding: 1.25rem; background: rgba(12,10,10,.92); }
.slot-number { color: var(--red-bright); text-transform: uppercase; letter-spacing: .14em; font-size: .58rem; font-weight: 750; }
.slot-lock { position: relative; width: 2rem; height: 1.55rem; margin: 2.2rem 0 1.35rem; border: 1px solid #655c55; opacity: .7; }
.slot-lock::before { content: ""; position: absolute; left: .45rem; bottom: calc(100% - 1px); width: .95rem; height: .8rem; border: 1px solid #655c55; border-bottom: 0; border-radius: .6rem .6rem 0 0; }
.garage-slot h3 { margin: 0 0 .45rem; font: 400 1.2rem/1.2 Georgia, serif; }
.garage-slot p { margin: 0; color: #847b74; font-size: .75rem; }
.garage-access { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 1.4rem; border-top: 1px solid var(--line); }
.garage-access .eyebrow { margin-bottom: .4rem; }
.garage-access h3 { margin: 0; font: 400 1.45rem/1.2 Georgia, serif; }
.garage-access div > p:last-child { max-width: 710px; margin: .55rem 0 0; color: var(--muted); font-size: .78rem; }
.garage-link-panel { min-width: min(100%, 25rem); }
.garage-link-panel label { display: block; margin-bottom: .4rem; color: #a69a90; font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; }
.garage-code-row { display: flex; gap: .55rem; }
.garage-code-row input { width: 10.5rem; min-height: 2.75rem; padding: 0 .8rem; border: 1px solid rgba(195,163,107,.34); border-radius: 0; outline: none; color: var(--text); background: #0c0a0a; font: 700 .8rem/1 monospace; letter-spacing: .08em; text-transform: uppercase; }
.garage-code-row input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(195,163,107,.12); }
.garage-button { color: #f1e8df; background: rgba(171,49,39,.86); white-space: nowrap; }
.garage-button:disabled { color: #837a72; background: rgba(255,255,255,.025); cursor: wait; }
.garage-linked-panel { display: flex; align-items: center; gap: 1rem; color: #b9c7ae; }
.garage-linked-panel[hidden], .garage-link-panel[hidden] { display: none; }
.garage-logout { padding: .35rem .55rem; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; }
.garage-message { grid-column: 1 / -1; min-height: 1em; margin: -.75rem 0 0; color: #b9a68f; font-size: .68rem; }
.garage-slot.is-empty .slot-lock { border-color: rgba(195,163,107,.45); }
.garage-slot.is-empty .slot-lock::after { content: "+"; color: var(--gold); }
.garage-slot.is-empty h3 { color: #c7b79c; }
.garage-features { display: grid; grid-template-columns: repeat(3, 1fr); margin: .8rem 0 0; padding: 0; border: 1px solid var(--line); list-style: none; }
.garage-features li { display: flex; align-items: baseline; gap: .55rem; padding: .75rem 1rem; border-right: 1px solid var(--line); }
.garage-features li:last-child { border-right: 0; }
.garage-features strong { color: var(--gold); font: 400 1rem/1 Georgia, serif; }
.garage-features span { color: #8c837b; text-transform: uppercase; letter-spacing: .09em; font-size: .55rem; }

.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--line); }
.steps li { position: relative; min-height: 11rem; padding: 1.5rem; background: var(--panel); }
.steps li:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }
.step-number { color: var(--red-bright); font-family: Georgia, serif; font-size: .8rem; }
.steps h3 { margin: 1rem 0 .45rem; font: 400 1.3rem/1.2 Georgia, serif; }
.steps p { margin: 0; color: var(--muted); font-size: .84rem; }
.steps a { color: var(--gold); }
code { color: #d1a56b; background: rgba(195,163,107,.09); padding: .1em .3em; }

.privacy { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 7vw, 6rem); }
.privacy .section-title { margin: 0; }
.privacy-copy p { margin: 0; color: var(--muted); font-size: .9rem; }
.privacy-copy ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.privacy-copy li { padding: .48rem .7rem; border: 1px solid var(--line); color: #cfc6bc; text-transform: uppercase; letter-spacing: .08em; font-size: .58rem; }

footer { min-height: 9rem; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.5rem; border-top: 1px solid var(--line); color: #776f68; text-transform: uppercase; letter-spacing: .09em; font-size: .56rem; }
footer p { margin: 0; }
footer strong { color: #a79e95; }

@media (max-width: 760px) {
  nav a:not(.nav-download) { display: none; }
  .download-card, .privacy { grid-template-columns: 1fr; }
  .garage-heading, .garage-access { grid-template-columns: 1fr; gap: 1.2rem; }
  .garage-slots { grid-template-columns: 1fr; }
  .garage-slot { min-height: 0; }
  .slot-lock { margin-block: 1.5rem 1rem; }
  .download-main { border-right: 0; border-bottom: 1px solid var(--line); }
  footer { grid-template-columns: 1fr; align-content: center; gap: .7rem; }
}

@media (max-width: 520px) {
  .content { width: min(calc(100% - 1.5rem), var(--content-width)); }
  .site-header { padding-inline: .75rem; }
  .brand-name { font-size: .69rem; }
  .hero { padding-top: 1.25rem; }
  .hero-intro { margin-top: 1.5rem; }
  h1 { font-size: 2.8rem; }
  .garage, .voice, .setup, .privacy { padding-block: 2.8rem; }
  .button { width: 100%; flex-direction: column; gap: .05rem; }
  .release-details > div { grid-template-columns: 4.5rem 1fr; }
  .copy-button { grid-column: 2; justify-self: start; }
  .steps { grid-template-columns: 1fr; }
  .steps li { min-height: 0; grid-column: auto; }
  .garage-features { grid-template-columns: 1fr; }
  .garage-features li { border-right: 0; border-bottom: 1px solid var(--line); }
  .garage-features li:last-child { border-bottom: 0; }
}

.points-section h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.shop-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.shop-item {
  background-color: white;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.shop-item span:first-child {
  font-weight: 700;
  color: var(--color-ink);
}

.shop-item span:last-child {
  font-weight: 600;
  color: var(--color-sapphire);
}

.shop-item button {
  --color-button: var(--color-sapphire);
  background-color: var(--color-button);
  color: white;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: var(--transition);
  width: 100%;
  text-align: center;
}

.shop-item button:hover {
  background-color: color-mix(in srgb, var(--color-button) 90%, black);
  box-shadow: var(--shadow-md);
}

.points-display {
  margin-left: 1rem;
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--color-ink);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}