/* ===========================================================================
   EHawkAudio — LIQUID CHROME

   Deep violet ground washed with hot magenta, holographic chrome forms that
   merge and morph, very large rounded grotesque type set tight, and layouts
   that bleed off every edge. Scroll drives scale and parallax rather than
   things politely fading in.

   The chrome is real, not an image: a conic gradient of silver and holographic
   hues clipped to text, and metaballs made by blurring circles then crushing
   the alpha curve so their edges fuse. It costs nothing to download and it
   never looks like a stock asset.
   =========================================================================== */

@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  /* Ground */
  --void:       #0a0316;
  --violet:     #1b0736;
  --violet-2:   #2d0a52;
  --magenta:    #ff2d95;
  --magenta-2:  #ff5cc8;
  --cyan:       #00e5ff;
  --lime:       #c6ff3d;

  /* Chrome ramp - silver with a holographic bloom through it */
  --chrome: conic-gradient(from var(--spin) at 50% 50%,
      #ffffff 0deg, #cdd6ff 38deg, #ff9ae6 76deg, #ffffff 116deg,
      #9af0ff 158deg, #ffffff 200deg, #ffe0a3 244deg, #e7b6ff 292deg, #ffffff 360deg);

  --holo: linear-gradient(115deg, #ff2d95 0%, #b14dff 34%, #00e5ff 68%, #c6ff3d 100%);

  /* Ink */
  --ink:        #ffffff;
  --ink-dim:    rgba(255,255,255,0.66);
  --ink-faint:  rgba(255,255,255,0.42);

  /* Glass */
  --glass:      rgba(255,255,255,0.055);
  --glass-2:    rgba(255,255,255,0.10);
  --edge:       rgba(255,255,255,0.14);
  --edge-2:     rgba(255,255,255,0.28);

  --display: 'Bricolage Grotesque', 'Outfit', system-ui, sans-serif;
  --sans:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --shell: 1240px;
  --r:     28px;
  --r-sm:  16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--void);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }

/* --- THE WASH ------------------------------------------------------------
   Three fixed colour fields. The magenta one tracks scroll, so the whole page
   changes temperature as you move down it rather than sitting still.
   ----------------------------------------------------------------------- */
.wash { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
.wash i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(80px); mix-blend-mode: screen;
}
.wash i:nth-child(1) {
  width: 90vmax; height: 90vmax; top: -35vmax; left: -25vmax;
  background: radial-gradient(circle at 40% 40%, var(--violet-2) 0%, transparent 62%);
  opacity: .95;
}
.wash i:nth-child(2) {
  width: 70vmax; height: 70vmax; top: 10vh; right: -28vmax;
  background: radial-gradient(circle at 50% 50%, var(--magenta) 0%, transparent 60%);
  opacity: .55;
  transform: translate3d(0, calc(var(--sy, 0) * -180px), 0);
}
.wash i:nth-child(3) {
  width: 60vmax; height: 60vmax; bottom: -22vmax; left: 22%;
  background: radial-gradient(circle at 50% 50%, #6a00ff 0%, transparent 64%);
  opacity: .6;
  transform: translate3d(0, calc(var(--sy, 0) * 120px), 0);
}
.noise {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- METABALLS -----------------------------------------------------------
   Circles blurred, then the alpha curve crushed by feColorMatrix, so anything
   that overlaps fuses into one liquid mass instead of reading as two circles.
   ----------------------------------------------------------------------- */
/* The mass sits in the RIGHT half and BEHIND the words. Chrome over a
   headline looks spectacular in a mockup and is unreadable in a browser -
   the type has to win, so the blobs get the empty side of the page. */
.goo { position: absolute; inset: 0; filter: url(#gooey); pointer-events: none; z-index: 0; }
.goo b {
  position: absolute; display: block; border-radius: 50%;
  background: var(--holo);
  opacity: .8;
  will-change: transform;
}
.goo b:nth-child(1) { width: 30vmin; height: 30vmin; left: 58%; top: 6%;
  animation: float1 17s ease-in-out infinite; }
.goo b:nth-child(2) { width: 22vmin; height: 22vmin; left: 74%; top: 40%;
  animation: float2 21s ease-in-out infinite; }
.goo b:nth-child(3) { width: 26vmin; height: 26vmin; left: 62%; top: 52%;
  animation: float3 25s ease-in-out infinite; }
.goo b:nth-child(4) { width: 16vmin; height: 16vmin; left: 88%; top: 14%;
  animation: float2 19s ease-in-out infinite reverse; }

/* On a phone there is no empty side, so the mass drops behind everything and
   fades back rather than fighting the text. */
@media (max-width: 900px) {
  .goo { opacity: .42; }
  .goo b:nth-child(1) { left: 40%; }
  .goo b:nth-child(2) { left: 58%; }
  .goo b:nth-child(3) { left: 46%; }
  .goo b:nth-child(4) { left: 72%; }
}

@keyframes float1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(14vmin, 10vmin) scale(1.22); }
  66%     { transform: translate(-6vmin, 18vmin) scale(.86); }
}
@keyframes float2 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(-16vmin, -12vmin) scale(1.3); }
  75%     { transform: translate(10vmin, 8vmin) scale(.8); }
}
@keyframes float3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-20vmin, 14vmin) scale(1.16); }
}

/* --- CHROME --------------------------------------------------------------- */
.chrome {
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: spin 12s linear infinite;
  filter: drop-shadow(0 4px 26px rgba(255,45,149,.4));
}
@keyframes spin { to { --spin: 360deg; } }

.holo-text {
  background: var(--holo);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .chrome, .goo b { animation: none !important; }
  .wash i { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* --- LAYOUT --------------------------------------------------------------- */
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.wide  { width: min(100% - 1.5rem, 1600px); margin-inline: auto; }
section { position: relative; }
.pad    { padding: clamp(5rem, 13vw, 11rem) 0; }
.pad-sm { padding: clamp(3rem, 7vw, 6rem) 0; }

/* --- HEADER --------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 80;
  background: rgba(10,3,22,.6);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.top__in { display: flex; align-items: center; gap: 1rem; height: 74px; }

.logo { display: flex; align-items: center; gap: .6rem; }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo span {
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  letter-spacing: -.045em;
}

.menu { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.menu a {
  padding: .55rem .95rem; border-radius: 999px;
  font-size: .95rem; font-weight: 500; color: var(--ink-dim);
  transition: color .2s, background .2s;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--ink); background: var(--glass-2); }

.bag { display: inline-flex; align-items: center; gap: .45rem; }
.bag em {
  font-style: normal; min-width: 21px; height: 21px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--holo); color: #12002a;
  font-size: .72rem; font-weight: 800;
}
.bag em[hidden] { display: none; }

.burger {
  display: none; margin-left: auto; width: 44px; height: 40px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--edge); border-radius: 12px;
}
.burger i { display: block; width: 18px; height: 2px; background: #fff; margin: 3.5px auto; border-radius: 2px; }

@media (max-width: 900px) {
  .burger { display: block; }
  .menu {
    position: absolute; top: 74px; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: 1rem 1.25rem 1.5rem;
    background: rgba(14,4,30,.98); border-bottom: 1px solid var(--edge);
  }
  .menu[hidden] { display: none; }
  .menu a { padding: .8rem 1rem; }
}

/* --- TYPE ----------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.055em; line-height: .92; margin: 0 0 .5em; }
h1 { font-size: clamp(3.2rem, 13vw, 11rem); }
h2 { font-size: clamp(2.4rem, 7vw, 5.5rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.04em; line-height: 1.05; }
p  { margin: 0 0 1.1em; color: var(--ink-dim); }
.big { font-size: clamp(1.1rem, 1.9vw, 1.45rem); line-height: 1.5; max-width: 60ch; }

.tag {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 1.5rem;
}
.tag::before { content: ''; width: 34px; height: 2px; background: var(--holo); border-radius: 2px; }

.num {
  font-family: var(--display); font-weight: 800; letter-spacing: -.06em;
  font-size: clamp(4rem, 11vw, 9rem); line-height: .8;
}

/* --- BUTTONS -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 2.1rem; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em;
  transition: transform .2s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s, background .25s;
  position: relative; overflow: hidden;
}
.btn--go {
  background: var(--holo); color: #14002c;
  box-shadow: 0 10px 40px -10px rgba(255,45,149,.85);
}
.btn--go:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 55px -12px rgba(255,45,149,1); }
.btn--ice {
  background: var(--glass); color: #fff; border: 1px solid var(--edge-2);
  backdrop-filter: blur(10px);
}
.btn--ice:hover { background: var(--glass-2); transform: translateY(-3px); }
.btn--full { width: 100%; }
.btn--sm { padding: .7rem 1.3rem; font-size: .92rem; }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none; }

/* --- PANELS --------------------------------------------------------------- */
.panel {
  position: relative; z-index: 1;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  overflow: hidden;
}
.panel--lift { transition: transform .35s cubic-bezier(.2,.9,.3,1.2), border-color .35s; }
.panel--lift:hover { transform: translateY(-6px); border-color: var(--edge-2); }
.panel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.16), transparent 42%);
  opacity: .8;
}

.cols { display: grid; gap: clamp(1rem, 2vw, 1.8rem); }
.cols--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cols--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- HERO ----------------------------------------------------------------- */
.hero { padding: clamp(3rem, 8vw, 7rem) 0 clamp(4rem, 10vw, 8rem); overflow: visible; }
.hero h1 { margin-bottom: .18em; }
.hero__stage { position: relative; z-index: 2; }
/* Matches the 900px cutoff where the blobs stop fading back, so there is no
   band of widths where full-strength chrome sits under full-width text. */
@media (min-width: 901px) {
  .hero__stage > .tag,
  .hero__stage > h1,
  .hero__stage > .big,
  .hero__stage > .acts,
  .hero__stage > .spec { max-width: 60%; }
  .hero__stage > h1 { max-width: 72%; }
}

/* Scroll scrub: the hero shrinks and lifts away as you leave it. */
.scrub {
  transform: scale(calc(1 - var(--sy, 0) * .12)) translate3d(0, calc(var(--sy, 0) * -40px), 0);
  opacity: calc(1 - var(--sy, 0) * .55);
  transform-origin: 50% 20%;
}

.acts { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }

.spec {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 2.4rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* --- MARQUEE -------------------------------------------------------------- */
.marquee {
  overflow: hidden; border-block: 1px solid rgba(255,255,255,.09);
  padding: 1.1rem 0; background: rgba(255,255,255,.02);
}
.marquee div {
  display: flex; gap: 3.5rem; width: max-content;
  animation: slide 38s linear infinite;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  letter-spacing: -.03em; color: var(--ink-faint); white-space: nowrap;
}
.marquee span { display: inline-flex; align-items: center; gap: 3.5rem; }
.marquee span::after { content: '◆'; font-size: .6em; color: var(--magenta); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee div { animation: none; } }

/* --- BIG STAT / FEATURE ROWS ---------------------------------------------- */
.row {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 900px) { .row { grid-template-columns: 1fr; } }

.list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.list li {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
  color: var(--ink-dim); font-size: 1rem;
}
.list li::before {
  content: ''; width: 9px; height: 9px; margin-top: .55em; border-radius: 50%;
  background: var(--holo);
}

/* --- STORE ---------------------------------------------------------------- */
.pricetag { display: flex; align-items: baseline; gap: .8rem; margin: .5rem 0 1.4rem; }
.pricetag b {
  font-family: var(--display); font-weight: 800; letter-spacing: -.06em;
  font-size: clamp(3.4rem, 8vw, 5.5rem); line-height: .85;
}
.pricetag s { color: var(--ink-faint); font-size: 1.2rem; }

.chip {
  display: inline-block; padding: .35rem .85rem; border-radius: 999px;
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--holo); color: #14002c;
}

/* --- CART / LINES --------------------------------------------------------- */
.lines { display: grid; gap: 1rem; }
.ln {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1.2rem; align-items: center;
  padding: 1.3rem 1.5rem; border: 1px solid var(--edge); border-radius: var(--r-sm);
  background: var(--glass);
}
.ln__n { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.03em; }
.ln__m { font-size: .86rem; color: var(--ink-faint); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--edge-2); border-radius: 999px; }
.stepper button { width: 36px; height: 36px; background: none; border: 0; cursor: pointer; color: var(--ink-dim); font-size: 1.2rem; }
.stepper button:hover { background: var(--glass-2); color: #fff; }
.stepper span { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.kill { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: .85rem; padding: .3rem 0; }
.kill:hover { color: var(--magenta-2); }

.sums { display: grid; gap: .7rem; }
.sums > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-dim); }
.sums .tot {
  color: #fff; font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: 1.6rem; padding-top: .9rem; border-top: 1px solid var(--edge);
}
@media (max-width: 620px) { .ln { grid-template-columns: 1fr auto; } .ln__p { grid-column: 1/-1; } }

/* --- FORMS ---------------------------------------------------------------- */
.f { display: grid; gap: .45rem; margin-bottom: 1.2rem; }
.f label { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--mono); }
.f input, .f textarea, .f select {
  width: 100%; padding: .95rem 1.1rem; font: inherit; font-size: 1rem;
  color: #fff; background: rgba(0,0,0,.35);
  border: 1px solid var(--edge-2); border-radius: var(--r-sm);
  transition: border-color .2s, box-shadow .2s;
}
.f input:focus, .f textarea:focus, .f select:focus {
  outline: none; border-color: var(--magenta);
  box-shadow: 0 0 0 4px rgba(255,45,149,.2);
}
.f textarea { min-height: 160px; resize: vertical; }
.f .err { color: var(--magenta-2); font-size: .84rem; min-height: 1.2em; }
.f select option { background: #1b0736; }

.note {
  padding: 1.1rem 1.3rem; border-radius: var(--r-sm);
  border: 1px solid var(--edge-2); background: var(--glass); color: var(--ink-dim);
  font-size: .94rem;
}
.note strong { color: #fff; }
.note--hot { border-color: rgba(255,45,149,.5); background: rgba(255,45,149,.1); }
.note--ok  { border-color: rgba(0,229,255,.45); background: rgba(0,229,255,.08); }

/* --- TOAST ---------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 160%);
  z-index: 95; padding: .95rem 1.6rem; border-radius: 999px;
  background: rgba(20,4,40,.97); border: 1px solid var(--edge-2);
  font-weight: 600; box-shadow: 0 20px 60px -15px #000;
  transition: transform .4s cubic-bezier(.2,.9,.3,1.4);
}
.toast.up { transform: translate(-50%, 0); }

/* --- FOOTER --------------------------------------------------------------- */
.foot { border-top: 1px solid rgba(255,255,255,.08); padding: clamp(3rem,6vw,5rem) 0 2.5rem; margin-top: clamp(4rem,8vw,7rem); }
.foot__g { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.foot h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot a { color: var(--ink-dim); font-size: .95rem; }
.foot a:hover { color: #fff; }
.foot__b {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between;
  font-size: .86rem; color: var(--ink-faint);
}

/* --- REVEAL --------------------------------------------------------------- */
.up { opacity: 0; transform: translateY(40px); transition: opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1); }
.up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .up { opacity: 1; transform: none; transition: none; } }

/* --- UTIL ----------------------------------------------------------------- */
.mid { text-align: center; }
.dim { color: var(--ink-faint); }
.sm  { font-size: .9rem; }
.mono { font-family: var(--mono); }
.auto { margin-inline: auto; }
.stack > * + * { margin-top: 1.1rem; }
.blank { padding: clamp(3rem,7vw,6rem) 1rem; text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }