/* ============================================================
   GENZTAG — shared design system
   Tokens: dark base + one accent per product, tag-shaped cards
   ============================================================ */

:root{
  --bg:      #09080f;
  --bg2:     #100e1a;
  --bg3:     #16132424;
  --card:    #14121f;
  --ink:     #f4f2fb;
  --ink-dim: #a8a2c4;
  --ink-mute:#716a92;
  --line:    rgba(244,242,251,.09);
  --line-2:  rgba(244,242,251,.16);

  --games: #c026ff;
  --games-ink: #f4d9ff;
  --links: #34c6ff;
  --links-ink: #d4f1ff;
  --music: #ff7a45;
  --music-ink: #ffe0cf;
  --shop:  #2fe0a0;
  --shop-ink: #cffceb;

  --radius: 18px;
  --maxw: 1180px;
  --shadow: 0 30px 80px -30px rgba(0,0,0,.65);
}

@media (prefers-color-scheme: light){
  :root{ color-scheme: dark; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:
    radial-gradient(900px 500px at 82% -8%, rgba(192,38,255,.16), transparent 60%),
    radial-gradient(700px 420px at 6% 8%, rgba(52,198,255,.10), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.wordmark{
  font-family:'Unbounded',system-ui,sans-serif;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0;
}

p{ margin:0; color:var(--ink-dim); max-width:62ch; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:6px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---------- nav ---------- */
header.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(9,8,15,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem; }
.brand svg{ width:30px; height:30px; flex:none; }
.nav-links{ display:flex; align-items:center; gap:28px; font-size:.95rem; color:var(--ink-dim); }
.nav-links a{ transition:color .15s; white-space:nowrap; }
.nav-links a:hover{ color:var(--ink); }
.nav-links .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.nav-cta{
  padding:10px 18px; border-radius:100px; font-weight:600; font-size:.9rem;
  background:var(--ink); color:#0a0a12;
  transition:transform .15s;
}
.nav-cta:hover{ transform:translateY(-1px); }
.nav-toggle{ display:none; }

@media (max-width:820px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; background:none; border:1px solid var(--line-2); color:var(--ink); border-radius:10px; padding:8px 12px; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s;
  font-family:inherit;
}
.btn:hover{ transform:translateY(-2px); }
.btn.primary{ background:var(--ink); color:#0a0a12; }
.btn.primary:hover{ box-shadow:0 16px 34px -14px rgba(244,242,251,.4); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn.ghost:hover{ border-color:var(--ink); }
.btn.small{ padding:10px 18px; font-size:.85rem; }

/* ---------- hero ---------- */
.hero{ padding:96px 0 60px; position:relative; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.status-strip{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px; border-radius:100px; border:1px solid var(--line-2);
  font-size:.82rem; color:var(--ink-dim); margin-bottom:26px;
}
.status-strip b{ color:var(--ink); font-weight:700; }
.status-strip .sep{ width:1px; height:12px; background:var(--line-2); }

.hero h1{ font-size:clamp(2.6rem,5.6vw,4.4rem); font-weight:700; }
.hero h1 em{ font-style:normal; background:linear-gradient(96deg,var(--games),var(--links) 55%,var(--music)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead{ margin-top:22px; font-size:1.14rem; color:var(--ink-dim); max-width:52ch; }
.hero .cta-row{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.hero-tags{ position:relative; height:400px; }
.float-tag{
  position:absolute; width:180px; padding:16px 18px 18px;
  background:var(--card); border:1px solid var(--line-2);
  clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 22px);
  box-shadow:var(--shadow);
  animation:drift 7s ease-in-out infinite;
}
.float-tag i{ position:absolute; top:9px; left:9px; width:8px; height:8px; border-radius:50%; border:2px solid var(--tag-c,var(--ink-dim)); }
.float-tag .fi{ font-size:1.3rem; }
.float-tag .fn{ display:block; margin-top:10px; font-weight:700; font-size:.92rem; }
.float-tag .fs{ display:block; margin-top:2px; font-size:.76rem; color:var(--ink-mute); }
.float-tag.t1{ --tag-c:var(--games); top:0; left:10%; transform:rotate(-6deg); animation-delay:0s; }
.float-tag.t2{ --tag-c:var(--links); top:48px; right:0; transform:rotate(4deg); animation-delay:1.6s; }
.float-tag.t3{ --tag-c:var(--music); top:210px; left:0; transform:rotate(3deg); animation-delay:.8s; }
.float-tag.t4{ --tag-c:var(--shop); top:250px; right:14%; transform:rotate(-4deg); animation-delay:2.3s; }
@keyframes drift{ 0%,100%{ transform:translateY(0) rotate(var(--r,0)); } 50%{ transform:translateY(-10px) rotate(var(--r,0)); } }
@media (prefers-reduced-motion:reduce){ .float-tag{ animation:none; } }
@media (max-width:980px){ .hero .wrap{ grid-template-columns:1fr; } .hero-tags{ display:none; } }

/* ---------- section shell ---------- */
section{ padding:76px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); font-weight:700; }
.section-head p{ margin-top:14px; font-size:1.04rem; }

/* ---------- product tag cards ---------- */
.tag-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:760px){ .tag-grid{ grid-template-columns:1fr; } }

.tag-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  clip-path:polygon(28px 0,100% 0,100% 100%,0 100%,0 28px);
  padding:34px 30px 30px;
  display:flex; flex-direction:column; gap:16px;
  transition:border-color .2s, transform .2s;
}
.tag-card:hover{ transform:translateY(-4px); }
.tag-card::before{
  content:''; position:absolute; inset:0;
  clip-path:polygon(28px 0,100% 0,100% 100%,0 100%,0 28px);
  padding:1px; pointer-events:none;
  background:linear-gradient(135deg,var(--c),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55;
}
.tag-card .hole{ position:absolute; top:11px; left:11px; width:10px; height:10px; border-radius:50%; border:2px solid var(--c); background:var(--bg); }
.tag-card .row1{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tag-card .glyph{ font-size:2rem; }
.tag-card .badge{
  font-size:.72rem; font-weight:700; padding:5px 11px; border-radius:100px; white-space:nowrap;
  border:1px solid var(--c); color:var(--c-ink);
}
.tag-card .badge.live{ background:color-mix(in srgb, var(--c) 18%, transparent); }
.tag-card .badge.soon{ background:transparent; color:var(--ink-dim); border-color:var(--line-2); }
.tag-card h3{ font-size:1.4rem; }
.tag-card p{ font-size:.95rem; }
.tag-card .feat{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.tag-card .feat span{ font-size:.76rem; color:var(--ink-mute); border:1px solid var(--line); padding:4px 10px; border-radius:100px; }
.tag-card .go{ margin-top:auto; display:flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem; color:var(--c-ink); padding-top:6px; }
.tag-card[data-p="games"]{ --c:var(--games); --c-ink:var(--games-ink); }
.tag-card[data-p="links"]{ --c:var(--links); --c-ink:var(--links-ink); }
.tag-card[data-p="music"]{ --c:var(--music); --c-ink:var(--music-ink); }
.tag-card[data-p="shop"]{ --c:var(--shop); --c-ink:var(--shop-ink); }
.tag-card[data-p="games"] .hole,.tag-card[data-p="games"] .badge{ border-color:var(--games); }
.tag-card[data-p="links"] .hole,.tag-card[data-p="links"] .badge{ border-color:var(--links); }
.tag-card[data-p="music"] .hole,.tag-card[data-p="music"] .badge{ border-color:var(--music); }
.tag-card[data-p="shop"] .hole,.tag-card[data-p="shop"] .badge{ border-color:var(--shop); }

/* ---------- value props ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:820px){ .value-grid{ grid-template-columns:1fr; } }
.value{ padding:28px; border:1px solid var(--line); border-radius:var(--radius); }
.value .glyph{ font-size:1.7rem; }
.value h3{ font-size:1.12rem; margin-top:14px; }
.value p{ margin-top:8px; font-size:.94rem; }

/* ---------- faq ---------- */
.faq{ display:flex; flex-direction:column; gap:10px; max-width:760px; }
.faq details{ border:1px solid var(--line); border-radius:14px; padding:6px 22px; background:var(--card); }
.faq summary{ cursor:pointer; padding:16px 0; font-weight:600; font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-size:1.3rem; color:var(--ink-mute); flex:none; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ padding-bottom:18px; font-size:.94rem; }

/* ---------- coming soon detail pages ---------- */
.soon-hero{ padding:90px 0 50px; }
.soon-hero .kicker{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:100px; border:1px solid var(--line-2); font-size:.82rem; color:var(--ink-dim); margin-bottom:24px; }
.soon-hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); font-weight:700; max-width:16ch; }
.soon-hero .lead{ margin-top:20px; font-size:1.08rem; max-width:56ch; }
.notify{ margin-top:34px; display:flex; gap:10px; max-width:440px; flex-wrap:wrap; }
.notify input{
  flex:1; min-width:220px; padding:14px 18px; border-radius:100px; border:1px solid var(--line-2);
  background:var(--card); color:var(--ink); font-family:inherit; font-size:.95rem;
}
.notify input:focus-visible{ border-color:var(--c,var(--ink)); }
.notify .note{ width:100%; font-size:.82rem; color:var(--ink-mute); margin-top:4px; }
.notify .ok-msg{ display:none; margin-top:10px; font-size:.9rem; color:var(--c,var(--shop)); }
.notify.sent .ok-msg{ display:block; }
.notify.sent input, .notify.sent button{ opacity:.6; pointer-events:none; }

.preview-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:10px; }
@media (max-width:700px){ .preview-list{ grid-template-columns:1fr; } }
.preview-list li{ display:flex; gap:12px; padding:18px; border:1px solid var(--line); border-radius:14px; }
.preview-list .n{ font-family:'Unbounded',sans-serif; font-size:.8rem; color:var(--c,var(--ink-mute)); flex:none; padding-top:2px; }
.preview-list b{ display:block; font-size:.96rem; }
.preview-list span{ display:block; margin-top:4px; font-size:.85rem; color:var(--ink-dim); }

.other-live{ display:flex; gap:16px; flex-wrap:wrap; margin-top:18px; }
.other-live a{ display:flex; align-items:center; gap:10px; padding:14px 20px; border:1px solid var(--line-2); border-radius:100px; font-weight:600; font-size:.9rem; transition:border-color .15s; }
.other-live a:hover{ border-color:var(--ink); }

/* ---------- 404 ---------- */
.err-hero{ min-height:70vh; display:flex; align-items:center; }
.err-hero .wrap{ text-align:left; }
.err-code{ font-family:'Unbounded',sans-serif; font-size:clamp(4rem,14vw,8rem); font-weight:700; opacity:.14; line-height:1; }
.err-hero h1{ margin-top:-.4em; font-size:clamp(1.8rem,4vw,2.6rem); }
.err-hero p{ margin-top:14px; font-size:1.05rem; }

/* ---------- footer ---------- */
footer.site-foot{ border-top:1px solid var(--line); padding:52px 0 34px; }
.foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot-brand p{ margin-top:14px; font-size:.92rem; max-width:34ch; }
.foot-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.foot-col h4{ font-size:.82rem; text-transform:none; color:var(--ink-mute); font-weight:700; margin-bottom:14px; }
.foot-col ul{ display:flex; flex-direction:column; gap:10px; }
.foot-col a{ font-size:.92rem; color:var(--ink-dim); transition:color .15s; }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{ margin-top:44px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:var(--ink-mute); }

/* ---------- reveal-on-scroll (single orchestrated pass) ---------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }