:root {
  --bg: #07100f;
  --fg: #26282c;
  --panel: rgba(11, 19, 19, .72);
  --panel-dark: #030807;
  --panel-light: #d9e6dd;
  --line: rgba(190, 226, 199, .18);
  --line-strong: rgba(190, 226, 199, .34);
  --text: #d9e6dd;
  --muted: #87998e;
  --accent: #99dbac;
  --accent-cyan: #99dbac;
  --accent-warm: #99dbac;
  --accent-red: #99dbac;
  --accent-violet: #99dbac;
  --ink: #06100e;
  --glow: rgba(153, 219, 172, .35);
  --glow-strong: rgba(153, 219, 172, .68);
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 76% 10%, rgba(153,219,172,.12), transparent 26rem),
    radial-gradient(circle at 14% 68%, rgba(150,50,42,.13), transparent 28rem),
    linear-gradient(180deg, #030807, #07100f 44%, #090c0d);
  font-family: "Rajdhani", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .25;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),
    linear-gradient(rgba(153,219,172,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153,219,172,.035) 1px, transparent 1px);
  background-size: 220px 220px, 48px 48px, 48px 48px;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 21;
  pointer-events: none;
  opacity: .18;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.04) 2px 3px),
    radial-gradient(circle at 50% 50%, transparent, rgba(0,0,0,.55) 82%);
}

a { color: inherit; }
.page { position: relative; z-index: 1; }

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 72px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(18, 22, 23, .86);
  backdrop-filter: blur(16px);
}
.brand {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle, rgba(153,219,172,.22), transparent 58%), rgba(153,219,172,.04);
  box-shadow: 0 0 22px rgba(153,219,172,.08);
}
.brand img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(153,219,172,.42));
}
.nav-links {
  justify-self: center;
  display: flex;
}
.nav-links a,
.lang button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(153,219,172,.025);
  font-family: "Share Tech Mono", monospace;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav-links a:last-child,
.lang button:last-child { border-right: 1px solid var(--line); }
.nav-links a:hover,
.lang button.active {
  color: var(--ink);
  background: var(--accent);
  text-shadow: none;
}
.nav-links a:nth-child(2):hover,
.nav-links a:nth-child(3):hover,
.nav-links a:nth-child(4):hover { background: var(--accent); }
.lang { display: flex; justify-self: end; }
.lang button { font-family: inherit; cursor: pointer; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 116px 28px 36px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  width: min(760px, 82vw);
  aspect-ratio: 1;
  left: 50%;
  top: 48%;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(153,219,172,.12) 0%, rgba(153,219,172,.035) 36%, transparent 70%);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 38%, rgba(153,219,172,.22) 0%, rgba(153,219,172,.10) 18%, transparent 42%),
    radial-gradient(circle at 18% 78%, rgba(76,117,92,.28) 0%, transparent 38%),
    radial-gradient(circle at 84% 22%, rgba(80,42,36,.22) 0%, transparent 34%),
    linear-gradient(138deg, #020706 0%, #07100f 38%, #10251f 68%, #030706 100%);
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    conic-gradient(from 210deg at 52% 48%, transparent 0deg, rgba(153,219,172,.14) 78deg, transparent 150deg, rgba(153,219,172,.08) 228deg, transparent 310deg),
    radial-gradient(ellipse at 50% 62%, rgba(153,219,172,.11), transparent 58%);
  filter: blur(42px);
  opacity: .72;
  transform: rotate(-7deg);
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,8,7,.94), rgba(3,8,7,.58) 45%, rgba(3,8,7,.30) 78%, rgba(3,8,7,.70)),
    linear-gradient(180deg, rgba(3,8,7,.50), transparent 40%, rgba(3,8,7,.96));
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 0;
  background-image:
    linear-gradient(rgba(153,219,172,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153,219,172,.045) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotateX(62deg) scaleY(2) translateY(32%);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,.62) 0%, transparent 64%);
}
.section {
  width: min(1240px, 100%);
  margin: 0 auto;
}
.hero-inner {
  width: min(1680px, 100%);
  margin: 0 auto;
  text-align: center;
}
.kicker,
.section-kicker,
.mini-label {
  color: var(--accent);
  font-family: "Share Tech Mono", monospace;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.section:nth-of-type(2) .section-kicker,
.section:nth-of-type(2) .mini-label { color: var(--accent-cyan); }
.section:nth-of-type(3) .section-kicker,
.section:nth-of-type(3) .mini-label { color: var(--accent-warm); }
.section:nth-of-type(4) .section-kicker,
.section:nth-of-type(4) .mini-label { color: var(--accent-violet); }
.section:nth-of-type(5) .section-kicker { color: var(--accent-red); }
.hero-title {
  position: relative;
  isolation: isolate;
  margin: 18px auto;
  width: 100%;
  max-width: none;
  font-family: "Orbitron", monospace;
  font-size: clamp(4.8rem, 13.6vw, 13rem);
  line-height: .82;
  letter-spacing: .08em;
  text-indent: .08em;
  text-transform: uppercase;
  font-weight: 900;
  color: #f5fbf7;
  text-shadow:
    0 0 40px var(--glow),
    0 0 82px rgba(153,219,172,.16),
    0 2px 0 rgba(0,0,0,.80);
}
.hero-title::before,
.hero-title::after {
  content: "OXUNICK";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  color: #f5fbf7;
  mix-blend-mode: screen;
  will-change: transform, clip-path, opacity;
}
.hero-title::before {
  text-shadow: 2px 0 rgba(153,219,172,.70), -1px 0 rgba(217,230,221,.32);
  clip-path: inset(0 0 100% 0);
  animation: glitchSliceTop 7.2s steps(1, end) infinite;
}
.hero-title::after {
  text-shadow: -2px 0 rgba(108,178,148,.58), 2px 0 rgba(245,251,247,.22);
  clip-path: inset(0 0 100% 0);
  animation: glitchSliceBottom 7.2s steps(1, end) infinite;
}
.hero-subtitle {
  margin: 20px auto 0;
  max-width: 920px;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.hero-slogan {
  display: inline-flex;
  margin: 18px auto 0;
  padding: 9px 14px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  color: var(--accent);
  background: rgba(153,219,172,.045);
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(.78rem, 1vw, .95rem);
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 0 18px var(--glow);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  justify-content: center;
}
.btn,
.download {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: rgba(153,219,172,.08);
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Orbitron", monospace;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .14em;
  white-space: nowrap;
}
.download {
  color: var(--ink);
  background: var(--accent);
  box-shadow: 0 0 30px var(--glow), inset 0 0 20px rgba(255,255,255,.10);
}
.btn:hover,
.download:hover,
.play:hover {
  border-color: rgba(217,230,221,.54);
  box-shadow: 0 0 0 1px rgba(217,230,221,.08), 0 18px 54px rgba(0,0,0,.34);
  transform: translateY(-1px);
}

@keyframes glitchSliceTop {
  0%, 86%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  87% { opacity: .68; transform: translate3d(-7px, 0, 0); clip-path: inset(12% 0 72% 0); }
  88% { opacity: .42; transform: translate3d(5px, -1px, 0); clip-path: inset(38% 0 48% 0); }
  89% { opacity: .76; transform: translate3d(-3px, 1px, 0); clip-path: inset(6% 0 84% 0); }
  90% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
}
@keyframes glitchSliceBottom {
  0%, 86%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  87.5% { opacity: .50; transform: translate3d(6px, 1px, 0); clip-path: inset(62% 0 22% 0); }
  88.5% { opacity: .72; transform: translate3d(-5px, 0, 0); clip-path: inset(76% 0 10% 0); }
  89.5% { opacity: .36; transform: translate3d(3px, -1px, 0); clip-path: inset(48% 0 40% 0); }
  90.5% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
}
.btn,
.download,
.play {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

main {
  background:
    linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(190,226,199,.055) calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), rgba(190,226,199,.055) calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), rgba(190,226,199,.055) calc(75% - 1px) 75%, transparent 75%);
}
.section {
  width: min(1240px, calc(100% - 56px));
  padding: 92px 0;
  scroll-margin-top: 96px;
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 440px);
  gap: 32px;
  align-items: end;
  margin-bottom: 34px;
}
.section-title {
  margin: 12px 0 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 400;
}
.section-copy,
.service p,
.preset p,
.genre p,
.cta p {
  color: var(--muted);
  line-height: 1.75;
  font-weight: 750;
}
.about {
  position: relative;
  min-height: 0;
  padding: 44px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(3,8,7,.54);
  box-shadow: inset 0 0 110px rgba(153,219,172,.025), 0 26px 90px rgba(0,0,0,.22);
}
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,8,7,.95), rgba(3,8,7,.70) 54%, rgba(3,8,7,.32)),
    linear-gradient(180deg, rgba(3,8,7,.26), rgba(3,8,7,.92)),
    url("./assets/oxunick-media/hellskull.png") right center / cover;
  filter: saturate(.82) contrast(1.08) brightness(.72);
}
.about::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(153,219,172,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153,219,172,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .22;
  pointer-events: none;
}
.about > * {
  position: relative;
  z-index: 1;
}
.about-content {
  max-width: 1040px;
}
.about .section-title {
  max-width: 900px;
}
.about .section-copy {
  max-width: 920px;
  margin: 24px 0 0;
}
.about-text {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1060px;
  margin-top: 26px;
  padding: 0;
}
.about-text p {
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.62;
  font-weight: 760;
}
.about-text p:last-child { margin-bottom: 0; }
.fields {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 26px;
  border: 0;
  background: transparent;
}
.fields span {
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: rgba(153,219,172,.045);
  font-family: "Share Tech Mono", monospace;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fields span:nth-child(3n + 1),
.fields span:nth-child(3n + 2),
.fields span:nth-child(3n) { color: var(--text); }
.fields span { border-right: 1px solid var(--line-strong); }
.fields span:last-child { border-bottom: 1px solid var(--line-strong); }
.genre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.88) contrast(1.08) brightness(.76);
}
.grid,
.presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
}
.service,
.preset {
  position: relative;
  min-height: 285px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(153,219,172,.075), rgba(153,219,172,.018)), rgba(0,0,0,.24);
  transition: background .3s ease, border-color .3s ease, transform .25s ease;
}
.service:hover,
.preset:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(153,219,172,.11), rgba(153,219,172,.026)), rgba(38,40,44,.46);
}
.service:nth-child(2),
.preset:nth-child(2) {
  background: linear-gradient(180deg, rgba(153,219,172,.075), rgba(153,219,172,.018)), rgba(0,0,0,.24);
}
.service:nth-child(3),
.preset:nth-child(3) {
  background: linear-gradient(180deg, rgba(153,219,172,.075), rgba(153,219,172,.018)), rgba(0,0,0,.24);
}
.service:nth-child(4),
.preset:nth-child(4) {
  background: linear-gradient(180deg, rgba(153,219,172,.075), rgba(153,219,172,.018)), rgba(0,0,0,.24);
}
.service:nth-child(5),
.preset:nth-child(5) {
  background: linear-gradient(180deg, rgba(153,219,172,.075), rgba(153,219,172,.018)), rgba(0,0,0,.24);
}
.service:nth-child(6),
.preset:nth-child(6) {
  background: linear-gradient(180deg, rgba(153,219,172,.075), rgba(153,219,172,.018)), rgba(0,0,0,.24);
}
.service:hover,
.preset:hover,
.service:nth-child(2):hover,
.service:nth-child(3):hover,
.service:nth-child(4):hover,
.service:nth-child(5):hover,
.service:nth-child(6):hover,
.preset:nth-child(2):hover,
.preset:nth-child(3):hover,
.preset:nth-child(4):hover,
.preset:nth-child(5):hover,
.preset:nth-child(6):hover {
  background: linear-gradient(180deg, rgba(153,219,172,.11), rgba(153,219,172,.026)), rgba(38,40,44,.46);
}
.service::before,
.preset::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  opacity: .72;
  transform: scaleX(.28);
  transform-origin: left center;
  transition: transform .28s ease, opacity .28s ease;
}
.service:hover::before,
.preset:hover::before {
  opacity: 1;
  transform: scaleX(1);
}
.service:nth-child(2)::before,
.preset:nth-child(2)::before { background: var(--accent); }
.service:nth-child(3)::before,
.preset:nth-child(3)::before { background: var(--accent); }
.service:nth-child(4)::before,
.preset:nth-child(4)::before { background: var(--accent); }
.service:nth-child(5)::before,
.preset:nth-child(5)::before { background: var(--accent); }
.service::after,
.preset::after {
  content: attr(data-num);
  position: absolute;
  right: 18px;
  top: 10px;
  color: rgba(153,219,172,.12);
  font-size: 5rem;
  line-height: 1;
  font-weight: 1000;
}
.service:nth-child(2)::after,
.preset:nth-child(2)::after { color: rgba(153,219,172,.12); }
.service:nth-child(3)::after,
.preset:nth-child(3)::after { color: rgba(153,219,172,.12); }
.service:nth-child(4)::after,
.preset:nth-child(4)::after { color: rgba(153,219,172,.12); }
.service:nth-child(5)::after,
.preset:nth-child(5)::after { color: rgba(153,219,172,.12); }
.service h3,
.preset h3 {
  position: relative;
  margin: 76px 0 16px;
  max-width: 9ch;
  min-height: 2em;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 400;
}
.preset {
  min-height: 198px;
  padding: 20px;
}
.preset::after {
  font-size: 4rem;
}
.preset h3 {
  margin: 48px 0 10px;
  max-width: none;
  min-height: 0;
  white-space: nowrap;
  font-size: clamp(1.65rem, 2.35vw, 2.35rem);
  letter-spacing: .01em;
}
.genres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.genre {
  min-height: 520px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  align-items: end;
  padding: 28px;
  background: var(--panel-dark);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.genre:hover,
.genre:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(153, 219, 172, .56);
  background-color: rgba(153, 219, 172, .055);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(153, 219, 172, .12);
  outline: none;
}
.genre img {
  position: absolute;
  inset: 0;
  opacity: .68;
  z-index: 0;
  transition: transform .55s ease, opacity .35s ease, filter .35s ease;
}
.genre:hover img,
.genre:focus-visible img {
  transform: scale(1.055);
  opacity: .84;
  filter: saturate(.95) contrast(1.16) brightness(.88);
}
.genre::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-86%) skewX(-9deg);
  filter: blur(22px);
  background: linear-gradient(112deg, transparent 18%, rgba(153, 219, 172, .02) 32%, rgba(153, 219, 172, .13) 50%, rgba(153, 219, 172, .035) 66%, transparent 82%);
  transition: opacity .34s ease, transform .72s ease;
}
.genre:hover::before,
.genre:focus-visible::before {
  opacity: 1;
  transform: translateX(86%) skewX(-9deg);
}
.genre::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 12%, rgba(3,8,7,.32) 48%, rgba(3,8,7,.92));
}
.genre-content {
  position: relative;
  z-index: 3;
  transition: transform .28s ease;
}
.genre:hover .genre-content,
.genre:focus-visible .genre-content {
  transform: translateY(-4px);
}
.genre h3 {
  margin: 10px 0;
  font-family: "Orbitron", monospace;
  font-size: clamp(2.65rem, 4.7vw, 5.25rem);
  line-height: .82;
  letter-spacing: .04em;
}
.watch-link {
  display: inline-flex;
  margin-top: 18px;
  border: 1px solid rgba(153, 219, 172, .38);
  padding: 8px 11px;
  color: var(--accent);
  font-family: "Share Tech Mono", monospace;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pill {
  display: inline-flex;
  margin: 0 6px 20px 0;
  border: 1px solid var(--line);
  padding: 6px 9px;
  color: var(--accent);
  font-family: "Share Tech Mono", monospace;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.preset .pill {
  margin-bottom: 14px;
}
.preset:nth-child(2) .pill { color: var(--accent-cyan); }
.preset:nth-child(3) .pill,
.preset:nth-child(4) .pill,
.preset:nth-child(5) .pill { color: var(--accent); }
.preset-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}
.play {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  background: rgba(153,219,172,.08);
  color: var(--accent);
  cursor: pointer;
  font-family: "Share Tech Mono", monospace;
  font-weight: 900;
}
.preset:nth-child(2) .play,
.preset:nth-child(3) .play,
.preset:nth-child(4) .play,
.preset:nth-child(5) .play { color: var(--accent); background: rgba(153,219,172,.08); }
.cta {
  position: relative;
  padding: 44px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(153,219,172,.16), rgba(153,219,172,.03)),
    rgba(0,0,0,.28);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/oxunick-media/screamskull.png") center / cover;
  opacity: .20;
}
.cta > * { position: relative; }
.cta .actions {
  justify-content: flex-start;
  flex-wrap: nowrap;
  max-width: none;
  gap: 6px;
}
.cta .btn {
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  font-size: .58rem;
  letter-spacing: .08em;
}
.cta h2 {
  margin: 0;
  max-width: 820px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 400;
}
footer {
  border-top: 1px solid var(--line);
  padding: 38px 28px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  text-align: center;
  color: var(--muted);
  font-family: "Share Tech Mono", monospace;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (max-width: 980px) {
  .nav { grid-template-columns: auto auto; }
  .nav-links { display: none; }
  .section-head,
  .genres { grid-template-columns: 1fr; }
  .about-text { grid-template-columns: 1fr; }
  .fields { flex-wrap: wrap; }
  .grid,
  .presets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav {
    position: absolute;
    min-height: 64px;
    padding: 0 14px;
  }
  .hero {
    place-items: center;
    padding: 90px 18px 112px;
  }
  .hero-grid { inset: 0; }
  .hero-inner {
    display: grid;
    justify-items: center;
    width: min(100%, 720px);
    text-align: center;
  }
  .kicker {
    max-width: 100%;
    text-align: center;
    letter-spacing: .2em;
  }
  .hero-title {
    width: 100%;
    font-size: clamp(3rem, 16.5vw, 4.2rem);
    letter-spacing: .025em;
    text-indent: .025em;
    transform: none;
    transform-origin: center;
  }
  .hero-subtitle,
  .hero-slogan {
    max-width: 100%;
    text-align: center;
  }
  .hero .actions {
    width: 100%;
    justify-content: center;
  }
  .hero .btn {
    min-width: min(42vw, 180px);
  }
  .section { width: calc(100% - 28px); padding: 64px 0; }
  .section-title,
  .cta h2 { font-size: clamp(2.8rem, 15vw, 4.8rem); }
  .grid,
  .presets { grid-template-columns: 1fr; }
  .service,
  .preset,
  .cta { padding: 22px; }
  .about {
    padding: 22px;
  }
  .about .section-copy { margin-top: 18px; }
  .cta .actions {
    flex-wrap: wrap;
  }
  .preset {
    min-height: 174px;
    padding: 18px;
  }
  .preset h3 {
    margin-top: 42px;
    font-size: clamp(1.85rem, 10vw, 2.35rem);
  }
  .genre { min-height: 420px; }
  footer { padding: 30px 14px; }
}

/* Account navigation */
.nav-account {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-account .account-btn {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(153,219,172,.045);
  font-family: "Share Tech Mono", monospace;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.nav-account .account-btn:hover {
  color: var(--ink);
  background: var(--accent);
  box-shadow: 0 0 24px var(--glow);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .nav-account .account-btn {
    padding: 0 10px;
    font-size: .62rem;
    letter-spacing: .10em;
  }
}



/* === OXUNICK STORE EXTENSIONS === */
.store-page { padding-top: 72px; min-height: 100vh; }
.store-hero { min-height: 430px; display:grid; align-items:end; padding: 120px 28px 54px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.store-hero::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 70% 20%,rgba(153,219,172,.16),transparent 30rem),linear-gradient(138deg,#020706,#07100f 45%,#10251f); }
.store-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(rgba(153,219,172,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(153,219,172,.035) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent); }
.store-hero-inner { width:min(1240px,calc(100% - 56px)); margin:0 auto; }
.store-title { margin:12px 0 12px; font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(4.5rem,11vw,10rem); line-height:.82; font-weight:400; text-transform:uppercase; }
.store-copy { max-width:760px; color:var(--muted); font-size:1.05rem; line-height:1.65; }
.store-toolbar { width:min(1240px,calc(100% - 56px)); margin:0 auto; padding:28px 0 0; display:flex; gap:8px; flex-wrap:wrap; }
.store-chip { padding:8px 11px; border:1px solid var(--line-strong); color:var(--muted); background:rgba(153,219,172,.035); font-family:"Share Tech Mono",monospace; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }
.product-grid { width:min(1240px,calc(100% - 56px)); margin:0 auto; padding:28px 0 92px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-left:1px solid var(--line); border-top:1px solid var(--line); }
.product-card { position:relative; min-height:520px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(3,8,7,.58); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; transition:.25s ease; }
.product-card:hover { transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 28px 80px rgba(0,0,0,.3); }
.product-cover { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; filter:saturate(.88) contrast(1.08) brightness(.82); border-bottom:1px solid var(--line); }
.product-cover-empty { aspect-ratio:1/1; background:radial-gradient(circle at 50% 40%,rgba(153,219,172,.12),transparent 38%),linear-gradient(135deg,#07100f,#0d1c18); border-bottom:1px solid var(--line); }
.product-card-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.product-card h2 { margin:12px 0 8px; font-family:"Bebas Neue",Impact,sans-serif; font-size:2.6rem; line-height:.95; font-weight:400; text-transform:uppercase; }
.product-card p { margin:0; color:var(--muted); line-height:1.55; }
.product-card-bottom { margin-top:auto; padding-top:22px; display:flex; justify-content:space-between; gap:12px; align-items:end; }
.product-price { font-family:"Orbitron",monospace; font-size:1.05rem; color:var(--accent); }
.product-old-price { display:block; color:var(--muted); font-family:"Share Tech Mono",monospace; font-size:.68rem; text-decoration:line-through; margin-bottom:3px; }
.product-arrow { color:var(--accent); font-family:"Share Tech Mono",monospace; font-size:.72rem; letter-spacing:.12em; }
.empty-state { grid-column:1/-1; padding:72px 28px; color:var(--muted); text-align:center; font-family:"Share Tech Mono",monospace; letter-spacing:.12em; }
.product-detail { width:min(1240px,calc(100% - 56px)); margin:0 auto; padding:132px 0 92px; display:grid; grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); gap:52px; }
.detail-art { position:sticky; top:100px; align-self:start; border:1px solid var(--line); background:rgba(3,8,7,.5); }
.detail-art img { width:100%; display:block; }
.detail-art-empty { aspect-ratio:1/1; background:radial-gradient(circle,rgba(153,219,172,.13),transparent 44%),linear-gradient(135deg,#07100f,#0c1a16); }
.detail-title { margin:12px 0 16px; font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(4rem,8vw,7.5rem); line-height:.84; font-weight:400; text-transform:uppercase; }
.detail-short { color:var(--muted); font-size:1.08rem; line-height:1.7; }
.detail-meta { display:flex; gap:8px; flex-wrap:wrap; margin:24px 0; }
.detail-price { margin:24px 0; font-family:"Orbitron",monospace; font-size:1.5rem; color:var(--accent); }
.detail-long { margin:28px 0; padding-top:26px; border-top:1px solid var(--line); color:var(--muted); line-height:1.8; white-space:pre-wrap; }
.detail-audio { width:100%; margin:18px 0; filter:grayscale(1); }
.detail-actions { display:flex; gap:10px; flex-wrap:wrap; }
.nav-links .current { color:var(--ink); background:var(--accent); }
@media(max-width:980px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-detail{grid-template-columns:1fr}.detail-art{position:relative;top:auto;max-width:620px}}
@media(max-width:640px){.store-page{padding-top:64px}.store-hero{padding:100px 14px 42px;min-height:360px}.store-hero-inner,.store-toolbar,.product-grid,.product-detail{width:calc(100% - 28px)}.product-grid{grid-template-columns:1fr}.product-detail{padding-top:96px;gap:28px}.store-title{font-size:clamp(4rem,22vw,6rem)}}