:root {
  --background: #050505;
  --foreground: #f4f1e8;
  --card: #0b0c0d;
  --card-foreground: #f4f1e8;
  --popover: #0b0c0d;
  --popover-foreground: #f4f1e8;
  --primary: #bdff00;
  --primary-foreground: #080a02;
  --secondary: #111315;
  --secondary-foreground: #f4f1e8;
  --muted: #151718;
  --muted-foreground: #9da19a;
  --accent: #bdff00;
  --accent-foreground: #080a02;
  --destructive: #ff4f5e;
  --border: #2a2e31;
  --input: #2a2e31;
  --ring: #bdff00;
  --radius: 0.3rem;
  --lime: #bdff00;
  --lime-soft: #d6ff69;
  --danger: #ff4f5e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--foreground); background: var(--background); font-family: Inter, Arial, sans-serif; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header { min-height: 76px; padding: 0 clamp(20px,5vw,76px); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #232628; background:rgba(5,5,5,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(18px); }
.brand,.footer-brand { display:inline-flex; align-items:center; gap:12px; font-weight:950; letter-spacing:.16em; }
.brand img,.footer-brand img { object-fit:contain; filter:drop-shadow(0 0 12px rgba(189,255,0,.18)); }
.site-header nav { display:flex; gap:clamp(18px,3vw,44px); color:#babdb7; font-size:.84rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.site-header nav a:hover,.site-header nav a:focus-visible { color:var(--lime); }
.header-cta { padding:12px 18px; color:#070900; background:var(--lime); font-size:.8rem; font-weight:950; letter-spacing:.08em; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }

.hero { position:relative; min-height:720px; padding:clamp(64px,8vw,120px) clamp(20px,6vw,92px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.7fr); align-items:center; gap:clamp(40px,7vw,110px); isolation:isolate; background:linear-gradient(90deg,rgba(5,5,5,.99) 0%,rgba(5,5,5,.86) 48%,rgba(5,5,5,.65) 100%),url('assets/zynox-banner.png') 50% 35%/cover no-repeat; }
.hero::after { content:""; position:absolute; inset:auto -15% 9% 36%; height:8px; background:var(--lime); transform:rotate(-25deg); box-shadow:0 0 36px rgba(189,255,0,.45); z-index:-1; }
.hero-grid { position:absolute; inset:0; z-index:-2; opacity:.18; background-image:linear-gradient(#60645d 1px,transparent 1px),linear-gradient(90deg,#60645d 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,black,transparent 72%); }
.hero-copy { max-width:820px; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; color:#c6cac1; font-size:.76rem; font-weight:850; letter-spacing:.18em; }
.eyebrow i { width:28px; height:2px; background:var(--lime); box-shadow:0 0 12px var(--lime); }
.hero h1,.section-heading h2,.checkout-strip h2 { margin:22px 0; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-weight:900; line-height:.88; letter-spacing:.015em; text-transform:uppercase; }
.hero h1 { font-size:clamp(4.2rem,8.2vw,9rem); }
.hero h1 strong,.checkout-strip h2 strong { color:var(--lime); font-weight:inherit; }
.hero-copy>p { max-width:620px; color:#c0c3bc; font-size:clamp(1rem,1.4vw,1.25rem); }
.hero-actions { margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }
.button { min-height:52px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:24px; border:1px solid #424640; font-size:.8rem; font-weight:950; letter-spacing:.08em; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); transition:transform .2s,border-color .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#090b00; border-color:var(--lime); background:var(--lime); }
.button-primary:hover { background:var(--lime-soft); }
.button-ghost:hover { border-color:var(--lime); color:var(--lime); }
.trust-row { margin:34px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:22px; list-style:none; color:#aaa; font-size:.82rem; }
.trust-row b { margin-right:6px; color:var(--lime); }

.stock-console { padding:28px; border:1px solid #4e5447; background:rgba(9,10,10,.9); clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px); box-shadow:0 28px 80px rgba(0,0,0,.45),inset 0 0 60px rgba(189,255,0,.025); }
.console-top { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:22px; border-bottom:1px solid var(--border); }
.micro { color:#777d73; font-family:ui-monospace,monospace; font-size:.7rem; letter-spacing:.12em; }
.console-top h2 { margin:4px 0 0; font-size:1.15rem; letter-spacing:.06em; }
.signal { width:11px; height:11px; border-radius:50%; background:var(--lime); box-shadow:0 0 18px var(--lime); animation:pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.stock-stats { display:grid; grid-template-columns:repeat(3,1fr); padding:22px 0; border-bottom:1px solid var(--border); }
.stock-stats div { display:grid; gap:2px; padding:0 15px; border-right:1px solid var(--border); }
.stock-stats div:first-child { padding-left:0; }
.stock-stats div:last-child { border:0; }
.stock-stats b { font:900 1.8rem/1 ui-monospace,monospace; color:var(--lime); }
.stock-stats span { color:#81857f; font-size:.72rem; text-transform:uppercase; }
.stock-list { display:grid; gap:18px; padding:24px 0; }
.stock-list>div { display:grid; grid-template-columns:1fr auto; gap:8px; font-size:.82rem; }
.stock-list strong { font-family:ui-monospace,monospace; color:var(--lime); }
.stock-list i { grid-column:1/-1; height:3px; background:#252824; overflow:hidden; }
.stock-list i::after { content:""; display:block; height:100%; width:var(--fill); background:var(--lime); box-shadow:0 0 10px var(--lime); }
.stock-list .stock-zero { color:#777; }
.stock-list .stock-zero strong { color:var(--danger); }
.stock-list .stock-request strong { color:#d9a7ff; font-size:.68rem; letter-spacing:.08em; }
.stock-list .stock-request i::after { background:linear-gradient(90deg,#8c4cff,var(--lime)); }
.console-link { display:flex; justify-content:space-between; padding-top:18px; border-top:1px solid var(--border); color:var(--lime); font-size:.76rem; font-weight:900; letter-spacing:.1em; }

.ticker { overflow:hidden; border-block:1px solid #242724; background:var(--lime); color:#080a02; transform:rotate(-1deg) scale(1.02); }
.ticker div { width:max-content; padding:12px 0; font-weight:950; letter-spacing:.14em; white-space:nowrap; animation:marquee 24s linear infinite; }
.ticker span { padding:0 30px; }
@keyframes marquee { to { transform:translateX(-42%); } }

.catalog { padding:110px clamp(20px,6vw,92px) 80px; }
.section-heading { display:grid; grid-template-columns:.5fr 1fr .7fr; align-items:end; gap:32px; margin:120px 0 40px; scroll-margin-top:100px; }
.section-heading:first-child { margin-top:0; }
.section-heading>div { display:flex; align-items:center; gap:14px; }
.section-heading .index { color:var(--lime); font:900 2.1rem ui-monospace,monospace; }
.section-heading p { margin:0; color:var(--muted-foreground); }
.section-heading>div p { font-size:.72rem; font-weight:850; letter-spacing:.14em; }
.section-heading h2 { margin:0; font-size:clamp(3rem,5vw,5.8rem); }
.section-heading em { color:transparent; font-style:normal; -webkit-text-stroke:1px var(--lime); }

.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.product-card { min-height:310px; display:flex; flex-direction:column; position:relative; overflow:hidden; border:1px solid #262a2c; background:linear-gradient(145deg,#111315,#090a0b 65%); clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); transition:transform .22s,border-color .22s,box-shadow .22s; }
.product-card::before { content:""; position:absolute; width:180px; height:180px; right:-90px; top:-100px; border-radius:50%; background:var(--accent); filter:blur(70px); opacity:.12; }
.product-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent) 60%,#333); box-shadow:0 24px 54px rgba(0,0,0,.36); }
.product-body { padding:23px; display:flex; flex:1; flex-direction:column; position:relative; z-index:1; }
.product-media { height:205px; overflow:hidden; position:relative; border-bottom:1px solid color-mix(in srgb,var(--accent) 38%,#222); background:#060706; }
.product-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(5,5,5,.86)); pointer-events:none; }
.product-media img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease,filter .45s ease; }
.product-card:hover .product-media img { transform:scale(1.035); filter:saturate(1.12) contrast(1.04); }
.card-top { display:flex; align-items:center; justify-content:space-between; }
.product-mark { width:48px; height:48px; display:grid; place-items:center; color:#050505; background:var(--accent); font-weight:950; font-size:.9rem; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); box-shadow:0 0 24px color-mix(in srgb,var(--accent) 28%,transparent); }
.status { padding:6px 8px; border:1px solid; font:800 .64rem ui-monospace,monospace; letter-spacing:.04em; }
.status.in { color:var(--lime); border-color:rgba(189,255,0,.28); background:rgba(189,255,0,.05); }
.status.out { color:var(--danger); border-color:rgba(255,79,94,.34); background:rgba(255,79,94,.07); }
.status.request { color:#d9a7ff; border-color:rgba(190,112,255,.34); background:rgba(151,71,214,.1); }
.product-card h3 { margin:34px 0 8px; max-width:94%; font-size:1.22rem; line-height:1.2; }
.product-card p { margin:0; color:#91958f; font-size:.9rem; }
.card-bottom { margin-top:auto; padding-top:24px; display:flex; align-items:flex-end; justify-content:space-between; }
.card-bottom strong { max-width:70%; font-size:clamp(1.15rem,2vw,1.65rem); letter-spacing:-.04em; }
.card-bottom a,.card-bottom button { padding:9px 12px; border:0; color:#0a0b08; background:var(--accent); font:900 .7rem inherit; letter-spacing:.05em; cursor:pointer; }
.featured { border-color:rgba(189,255,0,.55); box-shadow:inset 0 0 40px rgba(189,255,0,.03); }
.featured-label { position:absolute; right:-31px; top:58px; z-index:3; width:130px; padding:4px; text-align:center; transform:rotate(45deg); background:var(--lime); color:#080a02; font-size:.6rem; font-weight:950; letter-spacing:.1em; }
.sold { filter:saturate(.45); opacity:.72; }
.sold .card-bottom button { color:#7b7e79; background:#252725; cursor:not-allowed; }
.games-grid { grid-template-columns:minmax(0,900px); }
.games-grid .product-card { min-height:470px; }
.discord-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

.checkout-strip { margin-top:70px; padding:90px clamp(20px,6vw,92px); display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; border-block:1px solid #30342e; background:linear-gradient(115deg,#10120f 0%,#060706 65%); position:relative; overflow:hidden; }
.checkout-strip::after { content:"ZYNOX"; position:absolute; right:-20px; bottom:-85px; color:transparent; -webkit-text-stroke:1px #20251c; font:900 12rem Impact,sans-serif; }
.checkout-strip>* { position:relative; z-index:1; }
.checkout-strip h2 { font-size:clamp(3.8rem,7vw,7.5rem); }
.payment-panel { padding:34px; border-left:3px solid var(--lime); background:rgba(5,5,5,.65); }
.payment-panel>span { color:#83887f; font-size:.72rem; font-weight:850; letter-spacing:.14em; }
.payment-panel>div { margin:16px 0; display:flex; flex-wrap:wrap; gap:10px; }
.payment-panel b { padding:12px 16px; border:1px solid #3b4038; background:#11130f; font-size:.82rem; }
.payment-panel p { max-width:620px; color:var(--muted-foreground); }
.payment-panel .discord-url { margin:18px 0 0; color:var(--lime); font-family:ui-monospace,monospace; font-weight:850; letter-spacing:.04em; }
.payment-panel .button { margin-top:10px; }

footer { padding:34px clamp(20px,6vw,92px); display:flex; align-items:center; justify-content:space-between; gap:30px; color:#777b74; border-top:1px solid #20221f; font-size:.78rem; }
.footer-brand { color:var(--foreground); }

@media (max-width:1050px) {
  .hero { grid-template-columns:1fr; }
  .stock-console { max-width:680px; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .section-heading { grid-template-columns:.5fr 1fr; }
  .section-heading>p { grid-column:2; }
}
@media (max-width:760px) {
  .site-header { min-height:66px; }
  .site-header nav { display:none; }
  .header-cta { padding:10px 12px; }
  .hero { min-height:auto; grid-template-columns:1fr; padding-top:70px; }
  .hero h1 { font-size:clamp(3.6rem,17vw,6.2rem); }
  .stock-console { padding:20px; }
  .section-heading { grid-template-columns:1fr; gap:18px; }
  .section-heading>p { grid-column:auto; }
  .product-grid,.discord-grid { grid-template-columns:1fr; }
  .checkout-strip { grid-template-columns:1fr; }
  footer { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}