/* ============================================================
   HELLHOUND ($HELL) — ICE BLUE HARDWARE
   Premium AMD gaming-hardware branding × a restrained crypto
   dashboard. Gunmetal surfaces, silver type, precise lines,
   subtle ice-blue illumination, red only for the AMD pairing.
   Every color on the site comes from the tokens below.
   ============================================================ */
:root {
  color-scheme: dark;

  /* neutrals */
  --bg: #090d12;
  --surface: #171f26;
  --surface-2: #202a33;
  --border: #303c46;
  --text: #eaf1f5;
  --muted: #9eabb5;
  --steel: #5c6b77;       /* dividers inside type */

  /* accents */
  --aqua: #0ed1f5;        /* the hound's eye color, measured from the artwork; UI activity */
  --red: #ff4652;         /* $HELL and the tokenized AMD pairing */
  --aqua-soft: rgb(14 209 245 / 0.12);
  --aqua-line: rgb(14 209 245 / 0.4);
  --red-soft: rgb(255 70 82 / 0.12);
  --red-line: rgb(255 70 82 / 0.45);
  --on-aqua: #090d12;

  /* light product panel (the only light surface on the site) */
  --panel-light: #eaf1f5;
  --panel-light-text: #3b4650;

  --radius: 8px;
  --radius-lg: 14px;

  --font-display: "Rajdhani", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shadow: 0 18px 44px rgb(0 0 0 / 0.45);
  --glow-aqua: 0 0 0 1px var(--aqua-line), 0 0 28px rgb(14 209 245 / 0.18);

  --content-max: 1180px;
  --pad-x: clamp(16px, 4vw, 40px);
  --pad-y: clamp(52px, 7vw, 92px);
  --topbar-h: 64px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 12px);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--aqua);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.wrap {
  width: min(100% - 2 * var(--pad-x), var(--content-max));
  margin-inline: auto;
}

/* ---------- Type system ---------- */

.kicker {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sub {
  margin: 0 0 28px;
  max-width: 64ch;
  color: var(--muted);
  font-size: 1.02rem;
}

/* ---------- Section intro + long-form copy (shared) ----------
   Layout convention (2026-10-24): below the hero every section opens with a
   centered kicker / title / short lead in a narrow measure, and the content
   under it (cards, steps, accordion) keeps left-aligned text inside. Long
   paragraphs sit in a centered column, justified (flush left and right, the
   owner's call, 2026-10-25) with hyphenation on so narrow screens do not get
   rivers of space between words. */

.section-head {
  max-width: 780px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}

.section-head > :last-child {
  margin-bottom: 0;
}

.section-head h2 {
  text-wrap: balance;
}

.section-head .sub {
  max-width: 62ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.prose {
  max-width: 72ch;
  margin-inline: auto;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.prose p {
  margin: 0 0 14px;
}

.prose p:last-child {
  margin-bottom: 0;
}

.hell,
.ticker,
.hot {
  color: var(--red);
}

.amd {
  color: var(--red);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn.primary {
  background: var(--aqua);
  border-color: var(--aqua);
  color: var(--on-aqua);
}

.btn.primary:hover {
  box-shadow: var(--glow-aqua);
}

.btn.primary .hell {
  color: inherit; /* dark on the aqua button */
}

.btn.secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.btn.secondary:hover {
  border-color: var(--aqua);
  color: var(--aqua);
}

.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn[aria-disabled="true"]:hover {
  box-shadow: none;
  border-color: var(--border);
  color: var(--text);
}

.btn .ico,
.store-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* ---------- Panels & tiles (shared component system) ---------- */

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.panel-light {
  padding: clamp(18px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--panel-light);
  color: var(--panel-light-text);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.45);
}

.amd-logo {
  height: 18px;
  width: auto;
  flex: 0 0 auto;
  vertical-align: middle;
}

.chain-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.sol-mark {
  display: inline-block;
  height: 0.8em; /* the Solana mark sits inline with the word next to it */
  width: auto;
  vertical-align: -0.05em;
  margin-right: 0.1em;
}

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(9 13 18 / 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: grid;
  min-height: var(--topbar-h);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 36px;
  height: 36px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 3; /* stays in the right-hand column even when the nav is hidden */
  justify-self: end;
}

.brand {
  grid-column: 1;
}

.social {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  transition: border-color 0.15s ease;
}

.social:hover {
  border-color: var(--aqua);
}

.social img {
  width: 16px;
  height: 16px;
}

.social[aria-disabled="true"] {
  cursor: not-allowed;
}

.social[aria-disabled="true"] img {
  opacity: 0.5;
}

.social[aria-disabled="true"]:hover {
  border-color: var(--border);
}

.social[aria-disabled="true"]::after {
  content: "soon";
  position: absolute;
  right: -6px;
  bottom: -7px;
  padding: 1px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 1;
}

.legal-home {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.9rem;
}

@media (max-width: 639px) {
  .topbar-inner {
    gap: 8px;
  }

  .brand {
    font-size: 1.05rem;
    gap: 7px;
  }

  .brand span {
    display: none; /* phones: the hound alone, the wordmark is in the hero */
  }

  .brand img {
    width: 36px;
    height: 36px;
  }

  .topbar-actions {
    gap: 6px;
  }

  .social {
    width: 33px;
    height: 33px;
  }

  .social img {
    width: 14px;
    height: 14px;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate; /* the blended streak layers stack inside the hero, never above its content on first paint */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h)); /* fills the first screen; the next section starts below the fold */
  padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 5vw, 56px);
  text-align: center;
  /* brushed dark metal like the box: fine vertical hairlines over a graphite sheen, no blue */
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.015) 0%, transparent 28%, rgb(0 0 0 / 0.36) 100%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.012) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.12) 0 1px, transparent 1px 11px),
    linear-gradient(90deg, #040608 0%, #0a0d12 22%, #11151b 46%, #0f1318 58%, #090c10 80%, #040608 100%),
    #040608;
  border-bottom: 1px solid var(--border);
}

/* box-art sheen: soft vertical bands, silver with one faint touch of aqua */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.7s ease-out;
  background:
    linear-gradient(180deg, transparent 0%, rgb(200 214 224 / 0.06) 40%, rgb(200 214 224 / 0.05) 60%, transparent 100%) 18% 0 / 90px 100% no-repeat,
    linear-gradient(180deg, transparent 0%, rgb(14 209 245 / 0.04) 45%, rgb(200 214 224 / 0.04) 70%, transparent 100%) 46% 0 / 140px 100% no-repeat,
    linear-gradient(180deg, transparent 0%, rgb(200 214 224 / 0.045) 50%, transparent 100%) 74% 0 / 60px 100% no-repeat;
  filter: blur(30px);
  pointer-events: none;
}

/* thin vertical hairline highlights, deliberately uneven, dimmer than before */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.7s ease-out 0.1s;
  background:
    linear-gradient(180deg, transparent 0%, rgb(225 236 244 / 0.11) 45%, transparent 100%) 12% 0 / 1px 85% no-repeat,
    linear-gradient(180deg, transparent 0%, rgb(225 236 244 / 0.2) 50%, transparent 100%) 27% 100% / 2px 70% no-repeat,
    linear-gradient(180deg, transparent 0%, rgb(225 236 244 / 0.09) 40%, transparent 100%) 39% 0 / 1px 95% no-repeat,
    linear-gradient(180deg, transparent 0%, rgb(140 240 255 / 0.1) 55%, transparent 100%) 55% 30% / 1px 75% no-repeat,
    linear-gradient(180deg, transparent 0%, rgb(225 236 244 / 0.07) 50%, transparent 100%) 68% 0 / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0%, rgb(225 236 244 / 0.13) 48%, transparent 100%) 83% 60% / 2px 60% no-repeat,
    radial-gradient(7px 160px at 27% 42%, rgb(235 245 250 / 0.22), transparent 72%),
    radial-gradient(5px 90px at 83% 58%, rgb(235 245 250 / 0.11), transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero.is-lit::before,
.hero.is-lit::after {
  opacity: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100% - 2 * var(--pad-x), var(--content-max));
}

.hero-brand,
.hero-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 960px) {
  .hero {
    padding: clamp(36px, 5vw, 64px) 0;
    text-align: left;
  }

  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
  }

  .hero-info {
    align-items: flex-start;
    text-align: left;
  }

  .hero::before,
  .hero::after {
    right: 50%; /* streaks stay behind the hound, never across the text column */
  }

  .hero-lockup {
    justify-content: flex-start;
  }

  .hero-brand .hero-logo {
    width: min(380px, 44svh);
  }

  .hero-lockup {
    font-size: clamp(2rem, 3vw, 2.8rem);
  }

  .hero-cta {
    justify-content: flex-start;
  }
}

.hero-logo {
  position: relative;
  width: min(76vw, 340px, 34svh);
  animation: hover-float 7s ease-in-out infinite;
}

.hero-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 32px rgb(0 0 0 / 0.6));
}

.eye-glow {
  position: absolute;
  left: 60.2%;
  top: 47.1%;
  width: 16%;
  height: 10%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(120 240 255 / 0.9), rgb(14 209 245 / 0.4) 45%, transparent 75%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: eye-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes eye-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes hover-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.hero-title {
  margin: 18px 0 14px;
}

.hero-title img {
  display: block;
  width: min(92vw, 460px);
  height: auto;
  filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.6));
}

.hero-lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.32em;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.lk-hell {
  color: var(--red);
}

.lk-slash {
  font-weight: 500;
  color: var(--steel);
}

.lk-quote {
  white-space: nowrap;
}

.lk-amd {
  color: var(--red);
}

.hero-desc {
  margin: 0 0 26px;
  font-size: 1.1rem;
  color: var(--muted);
}

/* two sentences in a row, wrapping like ordinary text */
@media (min-width: 960px) {
  .hero-desc {
    font-size: 1.25rem;
    line-height: 1.5;
  }
}

.ca-pill {
  display: flex;
  width: min(100%, 440px);
  min-height: 48px;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.ca-pill:hover {
  border-color: var(--muted);
}

.ca-pill[disabled] {
  cursor: default;
}

.ca-pill[disabled] .ca-action {
  display: none;
}

.ca-label {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.ca-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 20px;
  min-width: 5.5em;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ca-pill:hover .ca-action {
  color: var(--text);
}

.ca-action svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.ca-action .ico-check {
  display: none;
}

.ca-pill.is-copied .ca-action {
  color: var(--aqua);
}

.ca-pill.is-copied .ico-copy {
  display: none;
}

.ca-pill.is-copied .ico-check {
  display: inline;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-row .btn {
  flex: 1 1 180px;
}

.hero-cta {
  width: min(100%, 440px);
  justify-content: center;
  margin: 14px 0 8px;
}

.toast {
  margin: 0 0 8px;
  min-height: 1.4em;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--aqua);
}

.copy-fallback {
  position: fixed;
  left: -9999px;
}

@media (max-width: 959px) {
  .hero::before,
  .hero::after {
    bottom: 50%; /* stacked layout: streaks only behind the hound, above the text */
  }
}

/* ---------- Sections ---------- */

section.band {
  padding: var(--pad-y) 0;
  border-top: 1px solid var(--border);
}

.band.dark {
  background: var(--surface);
}

/* lore */

.lore-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  .lore-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
  }
}

.lore-copy p {
  margin: 0 0 14px;
}

.lore-art {
  margin: 0;
}

.lore-art img {
  display: block;
  width: 100%;
}

.lore-art figcaption {
  margin-top: 14px;
  font-size: 0.88rem;
}

/* unboxing video: a poster with a play button; the YouTube player only loads on tap */

.unbox-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  .unbox-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
  }
}

.unbox-copy p {
  margin: 0;
}

.yt-short {
  position: relative;
  width: min(100%, 320px, calc(70svh * 9 / 16)); /* 9:16, never taller than about 70% of the screen */
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.yt-short img,
.yt-short iframe,
.yt-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.yt-short iframe {
  border: 0;
}

.yt-short img {
  object-fit: cover;
  transition: transform 0.4s ease;
}

.yt-poster {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.yt-poster:hover img {
  transform: scale(1.03);
}

.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--aqua);
  color: var(--on-aqua);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.45), var(--glow-aqua);
  transition: transform 0.15s ease;
}

.yt-poster:hover .yt-play {
  transform: translate(-50%, -50%) scale(1.06);
}

.yt-play svg {
  width: 30px;
  height: 30px;
  margin-left: 3px;
  fill: currentColor;
}

.yt-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgb(9 13 18 / 0.78);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* receipts: dated, linked evidence cards */

.receipts {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
}

/* intro: key art beside the text on tablets and up, stacked on phones */
.receipts-intro {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  .receipts-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}

.receipts-art {
  margin: 0;
}

.receipts-art img {
  display: block;
  width: min(100%, 560px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 18px 32px rgb(0 0 0 / 0.55));
  animation: hover-float 7s ease-in-out infinite;
}

.receipts-lead {
  margin: 0;
  color: var(--muted);
}

.receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* compact tiles: 2 across on phones, 3 on tablets, all 6 in one row on desktop */
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 359px) {
  .receipt-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 640px) {
  .receipt-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .receipt-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.receipt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.receipt:hover {
  text-decoration: none;
  border-color: var(--aqua);
  transform: translateY(-2px);
}

.receipt-type {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.is-press .receipt-type {
  color: var(--red);
}

.is-award .receipt-type {
  color: var(--aqua);
}

.is-official .receipt-type {
  color: var(--text);
}

.receipt strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.receipt q,
.receipt-body {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.receipt q {
  quotes: "\201C" "\201D";
}

.receipt-src {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

a.receipt .receipt-src::after {
  content: " \2197"; /* the whole tile opens the source */
  color: var(--aqua);
}

.receipt-clip {
  display: block;
  margin: -12px -12px 4px; /* bleeds to the tile edges */
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.receipt-clip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.receipt-clip.is-render img {
  object-fit: contain;
  padding: 10px;
}

.receipt-clip.is-logo img {
  padding: 16px 18px; /* the OC3D mark with breathing room on the dark strip */
}

/* sold-out tiles: the tile opens our capture of the archived listing; the archive itself is the small link */
.receipt-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  color: inherit;
}

.receipt-main:hover {
  text-decoration: none;
}

.receipt-src a {
  color: var(--aqua);
}

.receipt-src a::after {
  content: " \2197";
}

/* holdings */

.holdings {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px rgb(255 70 82 / 0.6);
  animation: live-blink 2.6s ease-in-out infinite; /* slow on/off flash */
}

@keyframes live-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

.holdings-title {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
}

.title-amd {
  height: 0.82em; /* the mark's cap height matches the word next to it */
  width: auto;
  position: relative;
  top: -0.02em;
}

.holdings-sub {
  margin-bottom: 30px;
}

.holdings-usd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 10vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--red);
  text-shadow: 0 0 48px rgb(255 70 82 / 0.28);
  font-variant-numeric: tabular-nums;
}

.holdings-shares {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 0;
}

.holdings-shares strong {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.holdings-shares span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
}

.holdings-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 56px;
  width: min(100%, 720px);
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.holdings-split dt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.holdings-split dt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.holdings-split dd {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.holdings-split dd strong {
  font-weight: 700;
  color: var(--text);
}

.sep {
  margin: 0 8px;
  color: var(--steel);
}

.steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 18px 18px 18px 64px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
}

.step h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* 1 column on phones, 2 on tablets, all 4 steps in one row on desktop */
@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .step {
    padding: 22px 20px 24px; /* the number sits above the title instead of beside it */
  }

  .step::before {
    position: static;
    margin-bottom: 14px;
  }
}

.app-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  vertical-align: -6px;
  margin-left: 8px;
}

.howto-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 32px);
}

@media (max-width: 639px) {
  .howto-actions .btn {
    flex: 1 1 140px; /* the two store buttons share a row */
  }

  .howto-actions .btn.primary {
    flex-basis: 100%; /* Get Fomo takes the full width above them */
  }
}

/* faq */

.faq-list {
  display: grid;
  gap: 8px;
  max-width: 860px;
  margin-inline: auto;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.faq-item summary .hell {
  display: contents;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-body {
  padding: 0 18px 16px;
  color: var(--muted);
}

.faq-body p {
  margin: 0 0 10px;
}

.faq-body code {
  font-family: var(--font-mono);
  color: var(--aqua);
}

.official-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.official-links li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
}

.official-links li > * {
  min-width: 0; /* the value column may shrink below its content, so a long address wraps instead of pushing the row off-screen */
}

.official-links code {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.official-links li span:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.soon {
  color: var(--muted);
}

/* footer */

.site-footer {
  padding: clamp(36px, 5vw, 56px) 0 clamp(22px, 3vw, 30px);
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

.site-footer .wrap {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.site-footer p {
  margin: 0;
}

.site-footer h2 {
  margin: 0;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.footer-hound {
  width: 56px;
  height: 56px;
}

.site-footer h2 {
  flex: 0 0 auto; /* a fixed-width wordmark keeps the brand row shrink-to-fit, so the grid can center it */
}

.site-footer h2 img {
  display: block;
  width: 150px;
  height: auto;
}

.disclaimer {
  max-width: 88ch;
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: justify; /* flush both edges, like the lore copy; centered as a block */
  -webkit-hyphens: auto;
  hyphens: auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 20px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px; /* tap-friendly */
  padding: 0 4px;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 639px) {
  .site-footer {
    padding-top: 28px;
  }

  .site-footer .wrap {
    gap: 12px;
  }

  .footer-hound {
    width: 44px;
    height: 44px;
  }

  .site-footer h2 img {
    width: 120px;
  }

  .footer-links {
    gap: 0 18px; /* a wrapped row, two links per line, instead of a tall column */
  }

  .footer-links a {
    min-height: 36px;
  }

  .disclaimer {
    font-size: 0.68rem;
  }

  .footer-meta {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 12px;
  }
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Legal pages ---------- */

.legal-page {
  width: min(100% - 2 * var(--pad-x), 780px);
  margin: 0 auto;
  padding: 40px 0 70px;
}

.legal-page h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  text-transform: uppercase;
  line-height: 1.05;
}

.legal-date {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-intro {
  margin: 0 0 28px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--aqua);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  font-size: 1.02rem;
}

.legal-page h2 {
  margin: 30px 0 8px;
  font-size: 1.25rem;
}

.legal-page p,
.legal-page li {
  color: var(--muted);
}

.legal-page ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal-page li {
  margin-bottom: 6px;
}

.legal-page code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--aqua);
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-logo,
  .receipts-art img,
  .eye-glow,
  .live-dot,
  .holdings-box {
    animation: none;
  }

  .hero::before,
  .hero::after {
    transition: none;
  }

  .ca-pill {
    transition: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .social,
  .faq-item summary::after {
    transition: none;
  }
}


/* ============================================================
   GTA VI SEASON (2026-10-22): Vice City accents on top of the
   ice-blue hardware system. The hero's .is-gta class and the
   lore / trailer / receipts sections below are the temporary
   theme; the v1 markup lives in archive/v1-amd-hardware/ and
   git tag v1-amd-hardware.
   ============================================================ */
:root {
  --vice-pink: #ff4fa3;
  --vice-orange: #ff8a3d;
  --vice-pink-soft: rgb(255 79 163 / 0.1);
  --vice-pink-line: rgb(255 79 163 / 0.45);
}

.gta-vi {
  background: linear-gradient(90deg, var(--vice-pink), var(--vice-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gta-pill {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 0.5em;
  margin: 0 0 18px;
  padding: 7px 14px;
  border: 1px solid var(--vice-pink-line);
  border-radius: 999px;
  background: var(--vice-pink-soft);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.gta-pill .sep {
  color: var(--steel);
}

/* lore: framed backplate crop and the Hades line */
.lore-art.is-framed img {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.lore-art figcaption.hades,
.lore-banner figcaption.hades {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* the AMD post: lore copy beside the real post (a screenshot that opens the post on X), stacked on phones */
.post-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  .post-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
  }
}

.post-copy p {
  margin: 0 0 14px;
}

.post-copy p:last-child {
  margin-bottom: 0;
}

.x-post {
  width: min(100%, 600px);
  margin: 0 auto;
}

.x-post > a {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.x-post > a:hover {
  border-color: var(--aqua);
  transform: translateY(-2px);
}

.x-post img {
  display: block;
  width: 100%;
  height: auto;
}

.x-post figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 4px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.x-post figcaption img {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  opacity: 0.8;
}

/* trailer: text column beside a 16:9 player on tablets and up, stacked on phones */
.trailer-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  .trailer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 48px;
  }
}

.yt-short.is-wide {
  width: min(100%, 820px);
  aspect-ratio: 16 / 9;
}

.yt-short.is-wide .yt-play {
  background: linear-gradient(135deg, var(--vice-pink), var(--vice-orange));
  color: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.45), 0 0 28px rgb(255 79 163 / 0.35);
}

/* receipts: flat key art instead of the floating card, partner / Rockstar / AMD tile colors */
.receipts-art.is-flat img {
  width: 100%;
  max-width: none;
  filter: none;
  animation: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.is-partner .receipt-type {
  color: var(--vice-pink);
}

.is-rockstar .receipt-type {
  color: var(--vice-orange);
}

.is-amd .receipt-type {
  color: var(--red);
}

/* lore: the GTA render as a full-width banner, never cropped, copy stacked below */
.lore-stack {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
}

.lore-stack .section-head {
  margin-bottom: 0; /* the grid gap spaces it */
}

.lore-banner {
  margin: 0;
}

.lore-banner img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), 0 0 120px rgb(255 79 163 / 0.12);
}

.lore-banner figcaption {
  margin-top: 14px;
}

.lore-stack .gta-pill {
  margin-bottom: 16px;
}

/* receipts (GTA season): bigger tiles; 1 across on phones, 2 on tablets, 3 on desktop */
.receipt-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 640px) {
  .receipt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .receipt-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.receipt {
  gap: 8px;
  padding: 16px;
}

.receipt-clip {
  margin: -16px -16px 6px;
}

.receipt-type {
  font-size: 0.72rem;
}

.receipt strong {
  font-size: 1.2rem;
}

.receipt-body {
  font-size: 0.95rem;
  line-height: 1.5;
}

.receipt-src {
  padding-top: 8px;
  font-size: 0.74rem;
}

/* holdings: AMD tiles (the arrow mark on a white rounded square) floating in the gutters around the figure.
   Decorative only (aria-hidden, no pointer events), kept behind the text, and clipped by the
   section so a box peeking past the edge never widens the page. */
#holdings {
  position: relative;
  overflow: hidden;
}

#holdings .holdings {
  position: relative;
  z-index: 1;
}

.holdings-boxes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.holdings-box {
  --r: 0deg;      /* resting tilt */
  --t: 7s;        /* float period */
  --delay: 0s;    /* negative delays desync the four boxes */
  position: absolute;
  width: clamp(96px, 9vw, 150px);
  height: auto;
  filter: drop-shadow(0 18px 28px rgb(0 0 0 / 0.55));
  transform: rotate(var(--r));
  animation: box-float var(--t) ease-in-out var(--delay) infinite;
  will-change: transform;
}

.box-1 { --r: -7deg; --t: 7.5s; --delay: -1.2s; left: 4%; top: 12%; }
.box-2 { --r: 6deg; --t: 6.5s; --delay: -3.5s; right: 4%; top: 16%; width: clamp(84px, 8vw, 130px); }
.box-3 { --r: 5deg; --t: 8s; --delay: -5s; left: 7%; bottom: 10%; width: clamp(76px, 7vw, 116px); }
.box-4 { --r: -5deg; --t: 7s; --delay: -2.4s; right: 7%; bottom: 8%; width: clamp(90px, 8.5vw, 140px); }

@keyframes box-float {
  0%, 100% {
    transform: rotate(var(--r)) translateY(0);
  }
  50% {
    transform: rotate(calc(var(--r) + 2deg)) translateY(-12px);
  }
}

/* below desktop there are no side gutters: the boxes shrink and sit fully inside the viewport. The top
   pair flanks the LIVE tag, each centered on the tag's midline (clear of the divider above and the title
   below); the bottom pair sits in extra bottom padding under the fees / pool row. `translate` composes
   with the float animation's transform instead of fighting it. */
@media (max-width: 959px) {
  #holdings {
    padding-bottom: calc(var(--pad-y) + 48px);
  }

  .holdings-box {
    width: clamp(64px, 10vw, 96px);
    top: calc(var(--pad-y) + 10px); /* section padding + half the LIVE tag's line = its midline */
    translate: 0 -50%;
  }

  .box-1 { left: 3%; }
  .box-2 { right: 3%; }

  .box-3,
  .box-4 {
    top: auto;
    bottom: 14px;
    translate: none;
  }

  .box-3 { left: 3%; }
  .box-4 { right: 3%; }
}

@media (max-width: 639px) {
  .holdings-box {
    width: 56px;
  }

  .box-1,
  .box-3 { left: 14px; }
  .box-2,
  .box-4 { right: 14px; }
}

/* concepts (GTA season): a dedicated gallery of the fan renders below the holdings, on a Vice City
   tint that echoes the hero, so it sits between the plain and dark bands without breaking their rhythm */
.band.is-vice {
  background:
    radial-gradient(60% 55% at 50% 0%, rgb(255 79 163 / 0.14), transparent 70%),
    radial-gradient(50% 45% at 50% 100%, rgb(255 138 61 / 0.08), transparent 70%),
    linear-gradient(180deg, #130d24 0%, #0d0b1c 55%, #090d12 100%);
  border-top-color: rgb(255 79 163 / 0.22);
}

.concept-grid {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.concept {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.concept figure {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  margin: 0;
}

.concept-media {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow), 0 0 80px rgb(255 79 163 / 0.08);
}

.concept-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-unbox .concept-media {
  aspect-ratio: 1; /* a square photo: a square tile on phones */
}

.c-shelf .concept-media {
  aspect-ratio: 4 / 3; /* the full store photo, uncropped */
}


.concept figcaption {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
}

/* tablets and up: the card full width, then unboxing | shelf.
   14 columns so the square unboxing photo (6) and the 4:3 shelf photo (8) come out the same height. */
@media (min-width: 640px) {
  .concept-grid {
    gap: 20px;
    grid-template-columns: repeat(14, minmax(0, 1fr));
  }

  .c-card { grid-column: 1 / -1; }
  .c-unbox { grid-column: span 6; }
  .c-shelf { grid-column: span 8; }

  /* the unboxing tile fills its row exactly (the gaps make it a few pixels off square) */
  .c-unbox .concept-media {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* hero (GTA season): the Vice City sunset background from the first GTA pass, streaks off, hound layout kept */
.hero.is-vice {
  background:
    radial-gradient(55% 45% at 50% 34%, rgb(255 79 163 / 0.2), transparent 70%),
    radial-gradient(45% 35% at 50% 40%, rgb(255 138 61 / 0.14), transparent 70%),
    linear-gradient(180deg, #150c2b 0%, #0d0b1c 48%, #090d12 100%);
  border-bottom-color: rgb(255 79 163 / 0.22);
}

.hero.is-vice::before,
.hero.is-vice::after {
  display: none;
}

/* desktop: the hound and wordmark sit in the left column, so the Vice City glow moves behind them */
@media (min-width: 960px) {
  .hero.is-vice {
    background:
      radial-gradient(42% 58% at 27% 48%, rgb(255 79 163 / 0.22), transparent 70%),
      radial-gradient(34% 42% at 27% 54%, rgb(255 138 61 / 0.14), transparent 70%),
      linear-gradient(180deg, #150c2b 0%, #0d0b1c 48%, #090d12 100%);
  }
}

@media (min-width: 1240px) {
  .hero.is-vice {
    background:
      radial-gradient(600px 400px at calc(50% - 306px) 48%, rgb(255 79 163 / 0.22), transparent 70%),
      radial-gradient(480px 300px at calc(50% - 306px) 54%, rgb(255 138 61 / 0.14), transparent 70%),
      linear-gradient(180deg, #150c2b 0%, #0d0b1c 48%, #090d12 100%);
  }
}