/* =============================================================
   João Rodrigues — Portfolio · "Doppler Terminal"
   ============================================================= */

/* 1. Tokens ---------------------------------------------------- */
@property --dop { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --bg: #06070a;
  --bg-2: #0a0c11;
  --panel: rgba(255, 255, 255, .028);
  --panel-2: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #eaedf3;
  --muted: #8b93a5;
  --dim: #5b6274;

  --g: #19f5a4;      /* gamma green */
  --c: #22d3ee;      /* doppler cyan */
  --p: #a855f7;      /* fade purple */
  --m: #ff4fd8;      /* fade pink  */
  --doppler: linear-gradient(100deg, #19f5a4 0%, #22d3ee 30%, #a855f7 64%, #ff4fd8 100%);

  --display: "Chakra Petch", system-ui, sans-serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --r: 18px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. Reset & base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.02em; font-weight: 600; }
::selection { background: var(--g); color: #001b10; }
:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1rem; background: var(--g); color: #001b10; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* 3. Utilities ------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.section { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.ic { width: 1.05em; height: 1.05em; flex: none; }

.doppler-text {
  background: var(--doppler);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: dopShift 9s ease-in-out infinite alternate;
}
@keyframes dopShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* 4. Typography ------------------------------------------------ */
.kicker {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g); display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem;
}
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.h2 { font-family: var(--display); font-size: clamp(2rem, 5.2vw, 4rem); text-transform: none; max-width: 18ch; }
.lead { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 52ch; margin-top: 1.2rem; }
.section-head { margin-bottom: clamp(40px, 6vw, 72px); }

/* 5. Components ------------------------------------------------ */
.btn {
  --bx: 0px; --by: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.35rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; letter-spacing: -.005em; white-space: nowrap;
  transform: translate(var(--bx), var(--by));
  transition: transform .5s var(--ease-out), background .3s, border-color .3s, box-shadow .4s, color .3s;
}
.btn--sm { min-height: 40px; padding: .55rem 1rem; font-size: .86rem; }
.btn--glow {
  color: #03130c;
  background: linear-gradient(100deg, #19f5a4, #22d3ee 55%, #a855f7);
  box-shadow: 0 0 0 1px rgba(25, 245, 164, .35), 0 10px 40px -10px rgba(25, 245, 164, .55), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--glow:hover { box-shadow: 0 0 0 1px rgba(168, 85, 247, .5), 0 14px 50px -8px rgba(168, 85, 247, .55), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--ghost { color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--ghost:hover { border-color: rgba(25,245,164,.5); background: rgba(25,245,164,.06); }

/* Spotlight cards — border + glow follow the cursor */
.spot {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(17,20,27,.9), rgba(10,12,17,.88));
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .4s, transform .6s var(--ease-out);
}
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(25,245,164,.10), rgba(168,85,247,.06) 40%, transparent 70%);
  opacity: 0; transition: opacity .4s;
}
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(25,245,164,.85), rgba(168,85,247,.6) 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s;
}
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* 6. Background ----------------------------------------------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1200px 700px at 70% -10%, #0e1420 0%, var(--bg) 60%); }
.bg-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-orb {
  position: absolute; left: 0; top: 0; width: 46vmax; height: 46vmax; border-radius: 50%;
  filter: blur(70px); opacity: .32; will-change: transform; pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
}
.bg-orb--g { background: radial-gradient(circle, rgba(25,245,164,.9), rgba(34,211,238,.25) 45%, transparent 70%); }
.bg-orb--p { background: radial-gradient(circle, rgba(168,85,247,.85), rgba(255,79,216,.25) 45%, transparent 70%); opacity: .26; }
.bg-grain {
  position: absolute; inset: -50%; opacity: .06; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg::after { /* vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(6,7,10,.75) 100%);
}

/* Nav ---------------------------------------------------------- */
.nav {
  position: fixed; z-index: 50; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 24px), 1180px);
  display: flex; align-items: center; gap: 1rem;
  padding: 8px 8px 8px 14px; border-radius: 999px;
  background: rgba(10, 12, 17, .55); border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background .4s, border-color .4s, top .4s var(--ease-out);
}
.nav.is-scrolled { background: rgba(8, 9, 13, .82); border-color: var(--line-2); }
.nav-logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.nav-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  font-family: var(--display); font-size: .9rem; color: #03130c; background: var(--doppler);
}
.nav-name { font-family: var(--display); letter-spacing: .02em; }
.tri { margin-left: .2rem; font-size: .85em; }
.nav-links { display: none; gap: .3rem; margin-left: auto; }
.nav-links a { padding: .45rem .8rem; border-radius: 999px; font-size: .88rem; color: var(--muted); transition: color .25s, background .25s; }
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-cta { display: none; }
.nav-burger { margin-left: auto; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; border-radius: 999px; background: rgba(255,255,255,.05); }
.nav-burger span { display: block; width: 18px; height: 1.5px; background: var(--text); transition: transform .35s var(--ease-out); }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.nav-sheet {
  position: fixed; z-index: 49; top: 70px; left: 12px; right: 12px;
  display: grid; gap: 2px; padding: 10px; border-radius: 20px;
  background: rgba(10,12,17,.94); border: 1px solid var(--line-2);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.nav-sheet[hidden] { display: none; }
.nav-sheet a { padding: .9rem 1rem; border-radius: 12px; font-family: var(--display); font-size: 1.15rem; }
.nav-sheet a:hover, .nav-sheet a.is-accent { background: rgba(25,245,164,.08); color: var(--g); }

/* Hero --------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 110px 0 70px; }
.hero-grid { display: grid; gap: 44px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 0 rgba(25,245,164,.6); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(25,245,164,.55); } 70% { box-shadow: 0 0 0 10px rgba(25,245,164,0); } 100% { box-shadow: 0 0 0 0 rgba(25,245,164,0); } }

.hero-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 12.6vw, 8.4rem); line-height: .86; letter-spacing: -.035em;
  margin: 1.4rem 0 1.4rem;
}
.ht-line { display: block; }
.ht-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(234,237,243,.9); position: relative; }
.ht-outline::after {
  content: attr(data-text); position: absolute; inset: 0; color: transparent;
  background: var(--doppler); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 0; clip-path: inset(0 100% 0 0); animation: fillIn 1.6s 0.5s var(--ease-out) forwards, dopShift 9s ease-in-out infinite alternate;
}
@keyframes fillIn { to { clip-path: inset(0 0 0 0); } }

.roles { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.roles li { font-size: .9rem; font-weight: 600; padding: .45rem .9rem; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.035); }
.roles li:nth-child(1) { border-color: rgba(25,245,164,.4); }
.roles li:nth-child(2) { border-color: rgba(34,211,238,.4); }
.roles li:nth-child(3) { border-color: rgba(168,85,247,.45); }

.hero-motto { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 2rem; padding-left: 1rem; border-left: 2px solid; border-image: var(--doppler) 1; }
.motto-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.hero-motto strong { font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.1; font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-ctas .btn { flex: 1 1 auto; }

/* Item card (CS2 inspect) */
.item-card {
  --rx: 0deg; --ry: 0deg;
  position: relative; max-width: 440px; width: 100%; margin-inline: auto;
  border-radius: 22px; padding: 12px;
  background: linear-gradient(180deg, rgba(20,24,33,.85), rgba(10,12,17,.9));
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px -30px rgba(25,245,164,.25), 0 30px 80px -40px rgba(168,85,247,.45);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease-out);
  transform-style: preserve-3d;
}
.item-card::before { /* doppler rim */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--dop), #19f5a4, #22d3ee, #a855f7, #ff4fd8, #19f5a4);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinDop 6s linear infinite; opacity: .9;
}
@keyframes spinDop { to { --dop: 360deg; } }
.ic-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: radial-gradient(500px circle at var(--sx, 30%) var(--sy, 20%), rgba(255,255,255,.12), transparent 40%); mix-blend-mode: overlay; }
.ic-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; color: var(--muted); }
.ic-rarity { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 6px; color: #ffd7f4; background: rgba(235, 75, 75, .16); border: 1px solid rgba(235,75,75,.4); }
.ic-img { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1.02; background: #0b0d12; }
.ic-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(1.05) contrast(1.05); }
.ic-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,7,10,.65)), linear-gradient(120deg, rgba(25,245,164,.12), transparent 40%, rgba(168,85,247,.16)); }
.hud-corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--g); z-index: 2; opacity: .85; }
.hud-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.hud-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-color: var(--c); }
.hud-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-color: var(--p); }
.hud-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-color: var(--m); }
.ic-body { padding: 14px 6px 4px; }
.ic-name { font-family: var(--display); font-size: 1.2rem; font-weight: 600; margin-bottom: .8rem; color: #ffe2a8; }
.ic-name span { color: var(--dim); margin: 0 .15rem; }
.ic-name em { font-style: normal; }
.ic-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.ic-meta > div { padding: .55rem .6rem; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.ic-meta dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ic-meta dd { font-weight: 600; font-size: .9rem; }
.float-bar { position: relative; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #19f5a4 0 7%, #22d3ee 7% 15%, #eab308 15% 38%, #f97316 38% 45%, #ef4444 45% 100%); opacity: .9; }
.float-bar i { position: absolute; top: -4px; width: 3px; height: 14px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff; }
.float-legend { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .64rem; color: var(--muted); }

.scroll-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 24px; height: 38px; border: 1.5px solid var(--line-2); border-radius: 14px; display: none; }
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; border-radius: 2px; background: var(--g); transform: translateX(-50%); animation: wheel 1.8s infinite var(--ease-soft); }
@keyframes wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }

/* Stats -------------------------------------------------------- */
.stats { position: relative; margin-top: -10px; }
.stats-band {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: rgba(10,12,17,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.stat { position: relative; padding: 24px 18px; display: flex; flex-direction: column; gap: .35rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-child(n+3) { border-bottom: 0; }
.stat::before { content: ""; position: absolute; left: 18px; top: 0; width: 34px; height: 2px; background: var(--doppler); }
.stat-num { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 6vw, 3.4rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.stat-num b { font-weight: inherit; }
.stat-label { color: var(--muted); font-size: .86rem; line-height: 1.35; }

/* Story -------------------------------------------------------- */
.story-grid { display: grid; gap: 40px; }
.story-media { position: relative; height: clamp(320px, 70vw, 560px); }
.story-media figure { position: absolute; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.sm-a { left: 0; top: 0; width: 78%; aspect-ratio: 16 / 9; }
.sm-b { right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 5; }
.sm-b img { object-position: 50% 35%; }
.sm-tag { position: absolute; left: 14px; bottom: 18%; padding: .35rem .6rem; border-radius: 8px; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.45); color: #ffb4b4; font-size: .68rem; }
.story-text { display: grid; gap: 14px; }
.chapter { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(12,14,19,.88); }
.ch-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--g); font-size: .85rem; }
.chapter h3 { font-family: var(--display); font-size: 1.3rem; margin-bottom: .5rem; }
.chapter p { color: var(--muted); }

/* Pillars ------------------------------------------------------ */
.pillars { display: grid; gap: 16px; }
.pillar { padding: 14px 14px 22px; display: flex; flex-direction: column; }
.pillar-img { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 18px; background: #0b0d12; }
.pillar-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.pillar:hover .pillar-img img { transform: scale(1.05); }
.pillar--feature .pillar-img img { object-position: 50% 30%; }
.pillar-n { color: var(--g); margin: 0 6px .6rem; }
.pillar h3 { font-family: var(--display); font-size: 1.45rem; margin: 0 6px .6rem; }
.pillar p { color: var(--muted); margin: 0 6px 1.2rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 6px 0; }
.tags li { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; padding: .35rem .6rem; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: #cfd5e1; }
.tags svg { width: 13px; height: 13px; }

/* Milestones --------------------------------------------------- */
.ms-grid { display: grid; gap: 30px; }
.timeline { position: relative; display: grid; gap: 18px; padding-left: 34px; }
.tl-progress { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-progress i { position: absolute; left: 0; top: 0; width: 100%; height: var(--tl, 0%); background: linear-gradient(180deg, var(--g), var(--c), var(--p), var(--m)); border-radius: 2px; box-shadow: 0 0 12px rgba(25,245,164,.6); transition: height .2s linear; }
.tl-item { position: relative; padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(12,14,19,.88); }
.tl-dot { position: absolute; left: -32px; top: 28px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); transition: border-color .4s, box-shadow .4s, background .4s; }
.tl-item.is-lit .tl-dot { border-color: var(--g); background: var(--g); box-shadow: 0 0 0 5px rgba(25,245,164,.15), 0 0 18px rgba(25,245,164,.7); }
.tl-phase { color: var(--g); }
.tl-item h3 { font-family: var(--display); font-size: 1.35rem; margin: .45rem 0 .45rem; }
.tl-item p { color: var(--muted); }
.tl-item--now { border-color: rgba(168,85,247,.35); background: linear-gradient(135deg, rgba(30,18,44,.92), rgba(12,22,20,.9)); display: grid; gap: 0 18px; align-content: start; grid-auto-rows: min-content; }
.tl-item--now .tl-phase { color: #d6b4ff; }
.tl-img { width: 100%; max-width: 160px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; margin-top: 16px; border: 1px solid var(--line-2); }

/* Brands marquee ---------------------------------------------- */
.brands { padding-block: 34px; border-block: 1px solid var(--line); background: rgba(10,12,17,.5); }
.brands-label { text-align: center; color: var(--dim); margin-bottom: 18px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 14px; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { display: inline-flex; align-items: center; gap: .6rem; padding: .75rem 1.3rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: #cfd5e1; white-space: nowrap; }
.marquee-track svg { width: 20px; height: 20px; color: var(--g); }
.marquee-track .brand-slot { border-style: dashed; border-color: rgba(168,85,247,.5); color: #d6b4ff; }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }

/* Media -------------------------------------------------------- */
.media-grid { display: grid; gap: 16px; margin-bottom: 18px; }
.channel { display: grid; }
.ch-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ch-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.channel:hover .ch-thumb img { transform: scale(1.05); }
.ch-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,7,10,.85)); }
.play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 68px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #ff0033; box-shadow: 0 10px 40px rgba(255,0,51,.5); transition: transform .5s var(--ease-out); }
.play svg { width: 26px; height: 26px; color: #fff; }
.channel:hover .play { transform: translate(-50%,-50%) scale(1.08); }
.badge-live { position: absolute; z-index: 2; left: 14px; top: 14px; font-family: var(--mono); font-size: .7rem; font-weight: 500; padding: .25rem .55rem; border-radius: 6px; background: #9146ff; color: #fff; letter-spacing: .1em; }
.ch-info { display: grid; gap: .3rem; padding: 18px 20px 22px; }
.ch-platform { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted); }
.ch-platform svg { width: 16px; height: 16px; }
.channel--yt .ch-platform svg { color: #ff3355; }
.channel--tw .ch-platform svg { color: #a970ff; }
.ch-info strong { font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.ch-go { display: inline-flex; align-items: center; gap: .4rem; color: var(--g); font-weight: 600; font-size: .9rem; margin-top: .2rem; }

.feed { margin-top: 18px; padding: 16px; border-radius: 22px; border: 1px solid var(--line); background: rgba(10,12,17,.88); }
.feed-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 14px; }
.feed-head .ch-platform { color: var(--text); font-size: .85rem; }
.feed-count { color: var(--g); }
.feed-head .btn { margin-left: auto; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ig-grid a { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: #0b0d12; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out), filter .5s; }
.ig-grid a:hover img { transform: scale(1.06); filter: saturate(1.2); }
.ig-grid a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.tt-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: #2a2f3b transparent; }
.tt-card { flex: 0 0 clamp(130px, 38vw, 180px); aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--line); position: relative; background: #0b0d12; }
.tt-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.tt-card:hover img { transform: scale(1.06); }
.tt-card::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/14px no-repeat; backdrop-filter: blur(6px); }

/* Manifesto ---------------------------------------------------- */
.manifesto { text-align: left; }
.manifesto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 400px at 20% 30%, rgba(25,245,164,.07), transparent 60%), radial-gradient(700px 400px at 90% 80%, rgba(168,85,247,.08), transparent 60%); }
.manifesto-text { font-family: var(--display); font-weight: 600; font-size: clamp(1.75rem, 4.6vw, 3.6rem); line-height: 1.12; letter-spacing: -.02em; max-width: 24ch; margin-bottom: clamp(40px, 6vw, 70px); }
.manifesto-text .w { color: rgba(234,237,243,.16); transition: color .35s; }
.manifesto-text .w.on { color: var(--text); }
.manifesto-text .w.hl.on { color: var(--g); text-shadow: 0 0 30px rgba(25,245,164,.35); }
.vows { display: grid; gap: 14px; }
.vow { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(12,14,19,.88); }
.vow > .ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: #03130c; background: var(--doppler); }
.vow h3 { font-family: var(--display); font-size: 1.2rem; margin-bottom: .35rem; }
.vow p { color: var(--muted); font-size: .95rem; }
.signature { margin-top: 36px; font-family: var(--display); font-size: 1.2rem; color: var(--muted); }

/* Collabs ------------------------------------------------------ */
.collab-grid { display: grid; gap: 14px; }
.collab { padding: 26px 24px; min-height: 200px; display: flex; flex-direction: column; }
.collab-n { color: var(--g); margin-bottom: auto; padding-bottom: 28px; }
.collab h3 { font-family: var(--display); font-size: 1.35rem; margin-bottom: .5rem; }
.collab p { color: var(--muted); font-size: .95rem; }
.formats { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 18px; border-radius: 16px; border: 1px dashed var(--line-2); background: rgba(10,12,17,.85); }
.formats > span { color: var(--dim); }
.formats ul { display: flex; flex-wrap: wrap; gap: 8px; }
.formats li { font-size: .85rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }

/* Contact ------------------------------------------------------ */
.contact-grid { display: grid; gap: 14px; }
.cc { padding: 26px 22px; display: flex; flex-direction: column; gap: .6rem; }
.cc--primary { background: linear-gradient(140deg, rgba(14,32,27,.94), rgba(26,17,38,.92) 60%, rgba(12,14,19,.92)); border-color: rgba(25,245,164,.3); }
.cc-tag { color: var(--g); }
.cc h3 { font-family: var(--display); font-size: 1.45rem; }
.cc p { color: var(--muted); margin-bottom: .6rem; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.cc-actions .btn { flex: 1 1 auto; }
.linktree-bar { margin-top: 16px; display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.lt-ic { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: #43e660; color: #0a1a0c; flex: none; }
.linktree-bar span { display: grid; }
.linktree-bar small { color: var(--dim); font-size: .68rem; }
.linktree-bar strong { font-family: var(--display); font-size: clamp(1.15rem, 3.4vw, 1.8rem); font-weight: 600; word-break: break-all; }
.linktree-bar > .ic { margin-left: auto; width: 26px; height: 26px; color: var(--g); transition: transform .5s var(--ease-out); }
.linktree-bar:hover > .ic { transform: translate(4px, -4px); }
.official { margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: rgba(9,20,17,.9); border: 1px solid rgba(25,245,164,.2); }
.official-title { display: flex; align-items: center; gap: .6rem; font-weight: 600; margin-bottom: 12px; }
.shield { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--g); color: #03130c; font-size: .8rem; font-weight: 800; }
.official ul { display: flex; flex-wrap: wrap; gap: 8px; }
.official li { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .76rem; padding: .4rem .65rem; border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid var(--line); color: #cfd5e1; }
.official li svg { width: 14px; height: 14px; color: var(--g); }

/* Footer ------------------------------------------------------- */
.footer { padding: 70px 0 34px; border-top: 1px solid var(--line); background: rgba(6,7,10,.7); }
.footer-big { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 7.5vw, 5.6rem); line-height: .95; letter-spacing: -.03em; margin-bottom: 40px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; color: var(--muted); font-size: .88rem; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { display: inline-flex; align-items: center; gap: .5rem; height: 42px; padding: 0 .9rem; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(12,14,19,.85); color: #dfe3ec; font-size: .86rem; font-weight: 600; transition: border-color .3s, color .3s, transform .4s var(--ease-out); }
.socials a:hover { color: var(--g); border-color: rgba(25,245,164,.5); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; color: var(--g); }
.to-top:hover { color: var(--g); }
.footer-note { margin-top: 26px; font-size: .74rem; color: var(--dim); }

/* 7. Effects --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), filter .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.no-js .reveal, .reveal-off .reveal { opacity: 1; transform: none; filter: none; }

/* 8. Responsive ------------------------------------------------ */
@media (min-width: 540px) {
  .hero-ctas .btn { flex: 0 0 auto; }
  .ig-grid { gap: 8px; }
  .tl-item--now { padding-right: 184px; min-height: 296px; }
  .tl-item--now .tl-img { position: absolute; right: 22px; top: 22px; width: 140px; margin-top: 0; }
}
@media (min-width: 720px) {
  .stats-band { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: 30px 26px; border-bottom: 0 !important; border-right: 1px solid var(--line) !important; }
  .stat:last-child { border-right: 0 !important; }
  .stat::before { left: 26px; }
  .media-grid { grid-template-columns: 1fr 1fr; }
  .vows { grid-template-columns: repeat(3, 1fr); }
  .vow { grid-template-columns: 1fr; }
  .collab-grid { grid-template-columns: 1fr 1fr; }
  .ig-grid { grid-template-columns: repeat(6, 1fr); }
  .feed { padding: 20px; }
}
@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger, .nav-sheet { display: none !important; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; }
  .scroll-hint { display: block; }
  .story-grid { grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 40px; }
  .story-head { grid-column: 1 / -1; }
  .story-media { position: sticky; top: 110px; align-self: start; height: 560px; }
  .pillars { grid-template-columns: 1fr 1.12fr 1fr; align-items: stretch; }
  .pillar--feature { transform: translateY(-24px); }
  .pillar--feature .pillar-img { aspect-ratio: 4 / 4.2; }
  .ms-grid { grid-template-columns: .85fr 1.15fr; gap: 64px; }
  .ms-head { position: sticky; top: 120px; align-self: start; }
  .contact-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .collab-grid { grid-template-columns: repeat(4, 1fr); }
  .collab { min-height: 260px; }
}
@media (min-width: 1280px) {
  .hero-title { font-size: 8.8rem; }
}

/* 9. Reduced motion (only intrusive loops) -------------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-duration: 80s; }
  .live-dot, .scroll-hint span { animation: none; }
  .item-card::before { animation: none; }
}

/* =============================================================
   10. Buy-a-skin lead form + floating button
   ============================================================= */
.buy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 420px at 85% 30%, rgba(168,85,247,.10), transparent 60%), radial-gradient(600px 400px at 10% 80%, rgba(25,245,164,.07), transparent 60%); }
.buy-grid { display: grid; gap: 36px; align-items: start; }
.buy-points { display: grid; gap: 10px; margin-top: 26px; }
.buy-points li { display: flex; gap: .6rem; align-items: flex-start; color: #cfd5e1; }
.buy-points .ic { color: var(--g); margin-top: .25rem; }

.buy-form { padding: 22px 18px; display: grid; gap: 16px; scroll-margin-top: 96px; }
.bf-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); }
.bf-badge { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; color: #cfd5e1; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--line); }
.field { display: grid; gap: .45rem; min-width: 0; border: 0; }
.field label, .field legend { font-size: .82rem; font-weight: 600; color: #cfd5e1; padding: 0; }
.field small { color: var(--dim); font-weight: 500; }
.field-row { display: grid; gap: 16px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  padding: .8rem .95rem; border-radius: 12px;
  background: rgba(0,0,0,.35); border: 1px solid var(--line-2);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2319f5a4' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 16px; padding-right: 2.4rem; }
.field select option { background: #0b0d12; }
.field textarea { resize: vertical; min-height: 88px; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgba(25,245,164,.7); box-shadow: 0 0 0 4px rgba(25,245,164,.12); background: rgba(0,0,0,.5); }
.field .is-invalid, .field input.is-invalid { border-color: rgba(255,79,120,.8); box-shadow: 0 0 0 4px rgba(255,79,120,.12); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-block; padding: .55rem .85rem; border-radius: 999px; font-size: .88rem; font-weight: 600; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); transition: all .25s; }
.chips input:checked + span { color: #03130c; background: var(--doppler); border-color: transparent; }
.chips input:focus-visible + span { outline: 2px solid var(--g); outline-offset: 2px; }
.chips.is-invalid span { border-color: rgba(255,79,120,.6); }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: .7rem; font-size: .84rem; color: var(--muted); cursor: pointer; line-height: 1.5; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--g); }
.consent.is-invalid span { color: #ff8fab; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bf-submit { width: 100%; min-height: 54px; font-size: 1rem; }
.bf-submit[disabled] { opacity: .6; cursor: progress; }
.bf-status { min-height: 1.4em; font-size: .9rem; color: var(--muted); }
.bf-status.ok { color: var(--g); }
.bf-status.err { color: #ff8fab; }
.bf-status a { text-decoration: underline; text-underline-offset: 3px; }
.buy-form.is-sent .field, .buy-form.is-sent .field-row, .buy-form.is-sent .consent, .buy-form.is-sent .bf-submit { display: none; }
.bf-done { display: grid; gap: .6rem; padding: 18px; border-radius: 14px; background: rgba(25,245,164,.07); border: 1px solid rgba(25,245,164,.3); }
.bf-done strong { font-family: var(--display); font-size: 1.35rem; }
.bf-done p { color: #cfd5e1; }
.pillar-cta { align-self: flex-start; margin: 16px 6px 0; }

.buy-fab {
  position: fixed; z-index: 45; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 1.1rem .55rem .55rem; border-radius: 999px;
  font-weight: 700; font-size: .92rem; color: #03130c;
  background: linear-gradient(100deg, #19f5a4, #22d3ee 55%, #a855f7);
  box-shadow: 0 0 0 1px rgba(25,245,164,.4), 0 14px 40px -8px rgba(25,245,164,.55), 0 10px 30px -10px rgba(168,85,247,.6);
  transform: translateY(0); transition: transform .5s var(--ease-out), opacity .4s, box-shadow .4s;
}
.buy-fab:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(168,85,247,.5), 0 18px 50px -8px rgba(168,85,247,.6); }
.fab-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #06070a; color: #ffe2a8; font-size: 1rem; }
.buy-fab.is-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
.buy-fab::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1px solid rgba(25,245,164,.45); animation: fabPulse 2.6s infinite; pointer-events: none; }
@keyframes fabPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }

@media (max-width: 539px) {
  .buy-fab { left: 16px; right: 16px; justify-content: center; }
  .footer { padding-bottom: 110px; }
}
@media (min-width: 540px) {
  .field-row { grid-template-columns: 1fr 1.3fr; }
  .buy-form { padding: 28px 26px; }
}
@media (min-width: 960px) {
  .buy-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; }
  .buy-copy { position: sticky; top: 120px; }
  .nav-links a { padding: .45rem .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .buy-fab::before { animation: none; }
}
/* =============================================================
   11. Giveaways showcase
   ============================================================= */
.gw-home { padding-block: clamp(64px, 8vw, 110px) 10px; }
.gw-home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.gw-home-head .h2 { max-width: none; }
.gw-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.gw-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 600; color: #cfd5e1; border: 1px solid var(--line-2); background: rgba(12,14,19,.85); transition: all .25s; }
.gw-chip svg { width: 14px; height: 14px; }
.gw-chip:hover { border-color: rgba(25,245,164,.45); }
.gw-chip[aria-selected="true"] { color: #03130c; background: var(--doppler); border-color: transparent; }
.gw-chip--instagram svg { color: #ff5ad1; } .gw-chip--discord svg { color: #8b9bff; } .gw-chip--twitch svg { color: #a970ff; }
.gw-chip[aria-selected="true"] svg { color: #03130c; }

.gw-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(232px, 70vw, 272px); gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-width: thin; scrollbar-color: #2a2f3b transparent; }
.gw-rail > * { scroll-snap-align: start; }
.gw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.gw-empty { color: var(--muted); padding: 22px; border: 1px dashed var(--line-2); border-radius: 16px; background: rgba(10,12,17,.8); }
.gw-empty a { color: var(--g); text-decoration: underline; }

.gw-card {
  --rc: 235, 75, 75;
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 16px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(18,21,29,.94), rgba(10,12,17,.94));
  border: 1px solid var(--line);
  transition: transform .5s var(--ease-out), border-color .3s, box-shadow .4s;
}
.gw-r-extraordinary { --rc: 228, 174, 57; }
.gw-r-classified { --rc: 211, 46, 230; }
.gw-r-restricted { --rc: 136, 71, 255; }
.gw-r-milspec { --rc: 75, 105, 255; }
.gw-r-industrial { --rc: 94, 152, 217; }
.gw-r-consumer { --rc: 176, 195, 217; }
.gw-r-contraband { --rc: 228, 174, 57; }
.gw-card::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: rgb(var(--rc)); opacity: .8; }
.gw-card:hover { transform: translateY(-4px); border-color: rgba(var(--rc), .5); box-shadow: 0 20px 50px -24px rgba(var(--rc), .55); }
.gw-top { display: flex; align-items: center; gap: 6px; }
.gw-wear { font-family: var(--mono); font-size: .7rem; font-weight: 500; padding: .22rem .5rem; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.gw-price { font-family: var(--mono); font-size: .72rem; padding: .22rem .5rem; border-radius: 6px; color: #e3cbff; background: rgba(168,85,247,.16); border: 1px solid rgba(168,85,247,.4); margin-inline: auto; }
.gw-status { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .24rem .55rem; border-radius: 6px; color: #7dffc6; background: rgba(25,245,164,.12); border: 1px solid rgba(25,245,164,.4); }
.gw-price + .gw-status { margin-left: 0; }
.is-ended .gw-status { color: #aab1c0; background: rgba(255,255,255,.05); border-color: var(--line-2); }
.gw-demo { position: absolute; top: 46px; left: 14px; z-index: 2; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; padding: .18rem .45rem; border-radius: 5px; color: #ffd28a; background: rgba(234,179,8,.12); border: 1px dashed rgba(234,179,8,.5); }
.gw-img { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; margin: 2px 0; }
.gw-img::before { content: ""; position: absolute; inset: 14% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--rc), .32), transparent); filter: blur(10px); transition: opacity .4s, transform .6s var(--ease-out); }
.gw-img img { position: relative; width: 92%; height: auto; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); transition: transform .7s var(--ease-out); }
.gw-card:hover .gw-img img { transform: scale(1.06) rotate(-3deg); }
.gw-card:hover .gw-img::before { transform: scale(1.15); }
.is-ended .gw-img img { filter: grayscale(.55) drop-shadow(0 12px 18px rgba(0,0,0,.55)); opacity: .8; }
.gw-name { font-family: var(--display); font-size: 1.05rem; font-weight: 600; line-height: 1.2; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gw-req { display: flex; gap: .45rem; align-items: flex-start; font-size: .82rem; color: var(--muted); line-height: 1.4; min-height: 2.3em; }
.gw-req svg { width: 14px; height: 14px; flex: none; margin-top: .12rem; color: var(--g); }
.gw-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.gw-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gw-timer { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .74rem; color: #cfd5e1; white-space: nowrap; }
.gw-timer i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 8px var(--g); animation: ping 2s infinite; }
.gw-timer.is-open i { background: var(--c); box-shadow: 0 0 8px var(--c); }
.gw-people { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); }
.gw-people svg { width: 15px; height: 15px; }
.gw-cta { color: #1a0f00; background: linear-gradient(100deg, #f5b544, #ff8a3d); box-shadow: 0 8px 24px -10px rgba(245,181,68,.7); flex: none; }
.gw-cta:hover { box-shadow: 0 10px 30px -8px rgba(255,138,61,.8); }
.gw-winner { display: flex; align-items: center; gap: .6rem; }
.gw-trophy { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(234,179,8,.12); border: 1px solid rgba(234,179,8,.35); }
.gw-winner span:last-child { display: grid; line-height: 1.2; }
.gw-winner small { font-size: .68rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.gw-winner b { font-size: .9rem; }

/* Giveaways page */
.gw-page-hero { padding: 130px 0 30px; }
.gw-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(3rem, 12vw, 7.5rem); line-height: .9; letter-spacing: -.035em; margin-bottom: .6rem;
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.35)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gw-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.gw-summary span { padding: .55rem .9rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(12,14,19,.85); color: var(--muted); font-size: .88rem; }
.gw-summary b { font-family: var(--display); font-size: 1.15rem; color: var(--text); margin-right: .25rem; }
.gw-section { padding: 10px 0 clamp(80px, 10vw, 130px); }
.gw-how { padding: 24px 20px; margin: 8px 0 44px; }
.gw-how-head { margin-bottom: 18px; }
.gw-how-head .mono { color: var(--g); }
.gw-how-head h2 { font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-top: .3rem; }
.gw-steps { display: grid; gap: 12px; }
.gw-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; }
.gw-steps b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-family: var(--display); color: #03130c; background: var(--doppler); }
.gw-steps strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.gw-steps p { color: var(--muted); font-size: .9rem; }
.gw-warn { margin-top: 18px; padding: 12px 14px; border-radius: 12px; font-size: .86rem; color: #ffd9a8; background: rgba(234,179,8,.07); border: 1px solid rgba(234,179,8,.25); }
.gw-block { margin-top: 36px; }
.gw-block-title { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: 1.4rem; margin-bottom: 16px; }
.gw-block-title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.gw-block-title .dot--live { background: var(--g); animation: ping 2s infinite; }
.nav-links a[aria-current="page"], .nav-sheet a[aria-current="page"] { color: var(--g); }

@media (min-width: 720px) {
  .gw-steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .gw-how { padding: 30px 28px; }
}
@media (min-width: 960px) {
  .nav-links { gap: .1rem; }
  .nav-links a { padding: .45rem .55rem; font-size: .84rem; }
}
@media (min-width: 960px) and (max-width: 1179px) {
  .nav-name { display: none; }
}
/* =============================================================
   12. Sales focus: hero, trade section, contact modal
   ============================================================= */
.hero-title--shop { font-size: clamp(2.3rem, 8.6vw, 5.6rem); line-height: .94; }
.hero-title--shop .ht-line { white-space: nowrap; }
.hero-sub { color: #cfd5e1; font-size: clamp(1.02rem, 1.5vw, 1.18rem); max-width: 54ch; margin-bottom: 1.3rem; }
.hero-sub strong { color: var(--text); }
.trust-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.6rem; }
.trust-chips li { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 600; padding: .45rem .8rem; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(12,14,19,.8); }
.trust-chips .ic { color: var(--g); }
.hero-sell { display: inline-block; margin-top: 1rem; color: var(--g); font-weight: 600; font-size: .95rem; }
.hero-sell .ic { display: inline-block; vertical-align: -.15em; margin-left: .3rem; }
.hero-sell:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-by { display: flex; align-items: center; gap: .75rem; margin-top: 1.6rem; color: var(--muted); font-size: .88rem; line-height: 1.35; }
.hero-by img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 2px solid rgba(25,245,164,.5); }
.hero-by strong { color: var(--text); }
.item-card--skin .ic-img--skin { aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(235,75,75,.28), transparent 75%), linear-gradient(160deg, #141822, #0b0d12); }
.ic-img--skin img { width: 88%; height: auto; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); animation: floaty 6s ease-in-out infinite; }
.ic-img--skin::after { display: none; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.ic-cta { width: 100%; margin-top: 4px; }
.item-card--skin .ic-meta dd { font-size: .86rem; }

.nav-lock { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--muted); border: 1px solid var(--line); margin-left: auto; transition: color .25s, border-color .25s; }
.nav-lock svg { width: 18px; height: 18px; }
.nav-lock:hover { color: var(--g); border-color: rgba(25,245,164,.5); }
.nav-burger { margin-left: 0; }
.nav-sheet-lock { display: flex; align-items: center; gap: .6rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 6px; }
.nav-sheet-lock svg { width: 18px; height: 18px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer-links a:hover { color: var(--g); }
.footer-lock { display: inline-flex; align-items: center; gap: .4rem; }
.footer-lock svg { width: 15px; height: 15px; }
.text-link { color: var(--g); text-decoration: underline; text-underline-offset: 3px; }

/* trade section (inspired by the client's reference) */
.trade-grid { display: grid; gap: 36px; align-items: start; }
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 16px; }
.service { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 112px; padding: 18px 10px; border-radius: 16px; text-align: center;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text);
  background: linear-gradient(180deg, rgba(18,24,26,.95), rgba(10,13,15,.95)); border: 1px solid rgba(25,245,164,.14); transition: border-color .3s, transform .4s var(--ease-out), box-shadow .4s; }
.service svg { width: 30px; height: 30px; color: var(--g); }
.service:hover, .service[aria-pressed="true"] { border-color: rgba(25,245,164,.6); transform: translateY(-2px); box-shadow: 0 14px 34px -18px rgba(25,245,164,.7); }
.service[aria-pressed="true"] { background: linear-gradient(180deg, rgba(14,40,32,.95), rgba(10,18,16,.95)); }
.contact-btns { display: grid; gap: 12px; }
.cbtn { display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 54px; padding: .9rem 1.2rem; border-radius: 14px; color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; transition: transform .4s var(--ease-out), box-shadow .4s, filter .3s; }
.cbtn svg { width: 22px; height: 22px; flex: none; }
.cbtn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cbtn--dc { background: linear-gradient(100deg, #5865f2, #4752c4); box-shadow: 0 12px 30px -14px rgba(88,101,242,.9); border: 1px solid rgba(255,255,255,.12); }
.cbtn--ig { background: linear-gradient(90deg, #833ab4, #c13584 30%, #fd1d1d 65%, #fcb045); box-shadow: 0 12px 30px -14px rgba(253,29,29,.8); }
.rules { display: grid; gap: 12px; }
.rule { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; padding: 20px 18px; border-radius: 18px; background: rgba(12,14,19,.92); border: 1px solid var(--line); }
.rule h3 { font-family: var(--display); font-size: 1.15rem; margin-bottom: .35rem; }
.rule p { color: #c3cad7; font-size: .95rem; }
.rule strong { color: var(--text); }
.rule-pct { display: grid; place-items: center; height: 76px; border-radius: 16px; font-family: var(--display); font-weight: 700; font-size: 1.55rem; color: #03130c; background: var(--doppler); }
.rule-pct--txt { font-size: .92rem; line-height: 1.05; text-align: center; }
.rule--sell .rule-pct { background: linear-gradient(135deg, #f5b544, #ff8a3d); color: #1a0f00; }
.rule--buy .rule-pct { background: linear-gradient(135deg, #a855f7, #ff4fd8); color: #fff; }
.rule-pay { display: inline-block; margin-top: .3rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--g); }
.rules-safe { display: flex; gap: .55rem; align-items: flex-start; color: #ffd9a8; font-size: .86rem; padding: 12px 14px; border-radius: 12px; background: rgba(234,179,8,.07); border: 1px solid rgba(234,179,8,.25); }
.rules-safe .ic { flex: none; margin-top: .15rem; }

/* contact modal */
.cmodal { width: min(100% - 24px, 460px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid rgba(25,245,164,.22); border-radius: 24px; color: var(--text);
  background: radial-gradient(500px 260px at 0% 0%, rgba(25,245,164,.10), transparent 60%), radial-gradient(400px 260px at 100% 100%, rgba(168,85,247,.12), transparent 60%), #080a0e;
  box-shadow: 0 40px 120px rgba(0,0,0,.75); overflow: auto; }
.cmodal::backdrop { background: rgba(3,4,6,.74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cmodal[open] { animation: cmIn .45s var(--ease-out); }
@keyframes cmIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.modal-open { overflow: hidden; }
.cm-in { position: relative; padding: 26px 20px 22px; display: grid; gap: 14px; }
.cm-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.06); color: var(--muted); }
.cm-x:hover { color: var(--text); }
.cm-brand { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -.01em; }
.cm-brand em { font-style: italic; }
.cm-title { font-family: var(--display); font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; margin-top: -6px; }
.cm-item { font-family: var(--mono); font-size: .8rem; color: var(--g); padding: .45rem .7rem; border-radius: 10px; background: rgba(25,245,164,.08); border: 1px solid rgba(25,245,164,.3); }
.cm-text { color: #c3cad7; font-size: .98rem; }
.services--modal { margin: 4px 0 0; }
.services--modal .service { min-height: 96px; font-size: .74rem; }
.cm-rule { font-size: .92rem; color: #cfd5e1; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border-left: 3px solid var(--g); }
.cm-rule strong { color: var(--text); }
.cm-msg { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-2); }
.cm-msg .mono { color: var(--dim); font-size: .66rem; }
.cm-msg p { font-size: .9rem; color: #dfe3ec; }
.cm-copy { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--g); padding: .3rem 0; }
.cm-copy svg { width: 15px; height: 15px; }
.cm-copy.is-done { color: #7dffc6; }
.cm-note { font-size: .76rem; color: var(--dim); text-align: center; }

@media (min-width: 720px) {
  .services { grid-template-columns: repeat(4, 1fr); }
  .services--modal { grid-template-columns: 1fr 1fr; }
  .contact-btns { grid-template-columns: 1fr 1fr; }
  .cmodal .contact-btns { grid-template-columns: 1fr; }
  .cm-in { padding: 30px 28px 24px; }
}
@media (min-width: 960px) {
  .trade-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .trade-copy { position: sticky; top: 120px; }
  .services { grid-template-columns: 1fr 1fr; }
  .nav-lock { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ic-img--skin img { animation: none; }
}
/* legal page */
.legal { padding: 130px 0 90px; }
.legal-in { max-width: 760px; }
.legal h1 { margin-bottom: 1.2rem; }
.legal h2 { font-family: var(--display); font-size: 1.3rem; margin: 2rem 0 .5rem; }
.legal p, .legal li { color: #c3cad7; }
.legal strong { color: var(--text); }
.legal-list { display: grid; gap: .6rem; padding-left: 1.1rem; list-style: disc; }
.legal-back { margin-top: 2.4rem; }

/* =============================================================
   13. Clips & live (click-to-play official players)
   ============================================================= */
.clips-follow { display: flex; flex-wrap: wrap; gap: 8px; }
.live { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid rgba(145,70,255,.35); background: #0b0d12; margin-bottom: 16px; box-shadow: 0 30px 80px -40px rgba(145,70,255,.6); }
.live iframe, .clip iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-poster { position: absolute; inset: 0; width: 100%; height: 100%; text-align: left; cursor: pointer; }
.live-poster img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(1.2); transition: transform 1s var(--ease-out), filter .5s; }
.live-poster:hover img { transform: scale(1.04); filter: brightness(.55) saturate(1.3); }
.live-info { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .5rem; justify-items: start; padding: clamp(16px, 3vw, 30px); background: linear-gradient(180deg, transparent, rgba(6,7,10,.85)); }
.live-info .badge-live { position: static; }
.live-info strong { font-family: var(--display); font-size: clamp(1.15rem, 3vw, 2rem); line-height: 1.1; max-width: 22ch; }
.live-info small { color: var(--muted); font-size: .8rem; }
.live-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 999px; font-weight: 700; color: #fff; background: #9146ff; box-shadow: 0 10px 30px -10px rgba(145,70,255,.9); }
.live-cta svg { width: 18px; height: 18px; }
.clip-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 44vw, 210px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #2a2f3b transparent; }
.clip { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; scroll-snap-align: start; background: #0b0d12; border: 1px solid var(--line); }
.clip.is-playing { border-color: rgba(25,245,164,.5); }
.clip-poster { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.clip-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out), filter .4s; }
.clip-poster:hover img { transform: scale(1.05); filter: brightness(.85); }
.clip-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; transform: translate(-50%, -50%); color: #fff;
  background: rgba(6,7,10,.55); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .4s var(--ease-out), background .3s; }
.clip-play svg { width: 24px; height: 24px; margin-left: 3px; }
.clip-poster:hover .clip-play { transform: translate(-50%, -50%) scale(1.1); background: rgba(25,245,164,.85); color: #03130c; }
.clips-note { margin-top: 10px; font-size: .76rem; color: var(--dim); }
.contact-btns--big { max-width: 720px; margin-bottom: 4px; }
.live:not(.is-playing) { aspect-ratio: 16 / 10; }
@media (min-width: 720px) { .live:not(.is-playing) { aspect-ratio: 21 / 8; } .live-poster img { object-position: 50% 30%; } }
@media (min-width: 960px) {
  .clip-row { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; }
}
/* =============================================================
   14. Windoh-style endless giveaway strip
   ============================================================= */
.gw-rail { display: block; overflow: hidden; padding: 8px 0 22px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gw-rail:active { cursor: grabbing; }
.gw-track { position: relative; display: flex; gap: 14px; width: max-content; will-change: transform; }
.gw-dup { display: flex; gap: 14px; }
.gw-track .gw-card { flex: 0 0 clamp(220px, 64vw, 262px); }
.gw-track img { -webkit-user-drag: none; pointer-events: none; }
/* how-to video on the giveaways page */
.gw-how { display: grid; gap: 22px; align-items: center; }
.howto { position: relative; width: 100%; max-width: 340px; margin-inline: auto; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #0b0d12; border: 1px solid rgba(25,245,164,.3); box-shadow: 0 24px 60px -30px rgba(25,245,164,.55); }
.howto.is-wide { max-width: none; aspect-ratio: 16 / 9; }
.howto iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.howto-poster { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.howto-poster img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); transition: transform .8s var(--ease-out), filter .4s; }
.howto-poster:hover img { transform: scale(1.04); filter: brightness(.85); }
.howto-poster .clip-play { width: 72px; height: 72px; background: rgba(25,245,164,.9); color: #03130c; border: 0; }
.howto-poster .clip-play svg { width: 30px; height: 30px; }
.howto-label { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: .6rem .8rem; border-radius: 12px; text-align: center; font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; background: rgba(6,7,10,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (min-width: 900px) {
  .gw-how { grid-template-columns: minmax(260px, 340px) 1fr; gap: 40px; }
  .gw-how:has(.howto.is-wide) { grid-template-columns: 1.2fr 1fr; }
  .gw-how .gw-steps { grid-template-columns: 1fr; }
}
/* =============================================================
   15. YouTube showcase + live band
   ============================================================= */
.yt-sub { color: #fff; background: #ff0033; box-shadow: 0 10px 30px -12px rgba(255,0,51,.8); }
.yt-sub:hover { background: #ff1a47; }
.yt-grid { display: grid; gap: 16px; }
.yt-main { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid rgba(255,0,51,.28);
  box-shadow: 0 40px 100px -40px rgba(255,0,51,.45), 0 30px 80px -50px rgba(168,85,247,.5); }
.yt-main iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; text-align: left; }
.yt-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .5s; }
.yt-poster:hover img { transform: scale(1.03); filter: brightness(.9); }
.yt-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,7,10,0) 45%, rgba(6,7,10,.88)); pointer-events: none; }
.yt-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 92px; height: 64px; display: grid; place-items: center; border-radius: 20px; transform: translate(-50%, -50%);
  color: #fff; background: #ff0033; box-shadow: 0 16px 50px rgba(255,0,51,.55); transition: transform .45s var(--ease-out); }
.yt-play svg { width: 34px; height: 34px; margin-left: 3px; }
.yt-poster:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); }
.yt-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: .45rem; padding: clamp(16px, 3vw, 30px); }
.yt-new { justify-self: start; padding: .25rem .55rem; border-radius: 6px; color: #fff; background: rgba(255,0,51,.85); font-size: .68rem; }
.yt-cap strong { font-family: var(--display); font-size: clamp(1.1rem, 2.6vw, 2rem); line-height: 1.12; text-shadow: 0 2px 20px rgba(0,0,0,.6); max-width: 30ch; }
.yt-side { display: grid; gap: 10px; align-content: start; }
.yt-side-h { color: var(--dim); }
.yt-list { display: grid; gap: 8px; }
.yt-item { width: 100%; display: grid; grid-template-columns: 136px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; text-align: left;
  background: rgba(12,14,19,.9); border: 1px solid var(--line); transition: border-color .3s, background .3s, transform .4s var(--ease-out); }
.yt-item:hover { border-color: rgba(255,0,51,.45); transform: translateX(3px); }
.yt-item.is-current { border-color: rgba(255,0,51,.7); background: linear-gradient(90deg, rgba(255,0,51,.12), rgba(12,14,19,.9)); }
.yt-item-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #000; }
.yt-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-item-thumb i { position: absolute; right: 6px; bottom: 6px; font-style: normal; font-size: .62rem; padding: .15rem .35rem; border-radius: 5px; background: rgba(0,0,0,.75); color: #fff; }
.yt-item-txt { display: grid; gap: .25rem; min-width: 0; }
.yt-item-txt strong { font-size: .88rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-item-txt small { color: var(--dim); font-size: .74rem; }
.yt-all { display: inline-flex; align-items: center; gap: .4rem; color: #ff6680; font-weight: 600; font-size: .9rem; margin-top: 4px; }
.yt-all:hover { color: #ff8da0; }
@media (min-width: 960px) {
  .yt-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
  .yt-side { max-height: 100%; }
}

/* live band */
.live-band { padding: clamp(10px, 3vw, 30px) 0 clamp(60px, 8vw, 100px); }
.lb { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; padding: clamp(24px, 4vw, 44px); border-radius: 26px;
  background: linear-gradient(115deg, #2a0f57 0%, #1a0b38 45%, #0d0a1c 100%); border: 1px solid rgba(169,112,255,.4); box-shadow: 0 40px 100px -50px rgba(145,70,255,.9); }
.lb-glow { position: absolute; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(169,112,255,.45), transparent); filter: blur(10px); animation: lbPulse 6s ease-in-out infinite; }
@keyframes lbPulse { 50% { transform: scale(1.12); opacity: .7; } }
.lb-img { position: absolute; z-index: -2; right: 0; top: 0; height: 100%; width: 55%; object-fit: cover; opacity: .28;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.lb-copy { display: grid; gap: .7rem; max-width: 34rem; }
.lb-tag { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: 999px; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(239,68,68,.9); }
.lb-tag i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ping 1.6s infinite; box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
.lb h2 { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.05; }
.lb-em { color: #c9a6ff; }
.lb p { color: #d6c8f5; }
.lb-btns { display: grid; gap: 10px; align-content: center; }
.lbtn { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.2rem; border-radius: 16px; color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.15rem; transition: transform .4s var(--ease-out), box-shadow .4s, filter .3s; }
.lbtn svg { width: 28px; height: 28px; flex: none; }
.lbtn span { display: grid; line-height: 1.1; }
.lbtn small { font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.lbtn:hover { transform: translateY(-3px); filter: brightness(1.08); }
.lbtn--tw { background: #9146ff; box-shadow: 0 14px 40px -14px rgba(145,70,255,1); }
.lbtn--tt { background: #0b0b10; border: 1px solid rgba(255,255,255,.18); box-shadow: inset 3px 0 0 #25f4ee, inset -3px 0 0 #fe2c55; }
@media (min-width: 900px) {
  .lb { grid-template-columns: 1fr auto; align-items: center; }
  .lb-btns { min-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .lb-glow { animation: none; } }
/* =============================================================
   16. Contact modal v2 — "trade offer" style
   ============================================================= */
.cmodal.cm2 { width: min(100% - 20px, 780px); border-radius: 26px; border: 1px solid rgba(168,85,247,.32);
  background: radial-gradient(600px 300px at 100% 0%, rgba(168,85,247,.16), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(25,245,164,.10), transparent 60%), #07080c; }
.cm2-in { position: relative; display: grid; gap: 18px; padding: 22px 18px 18px; }
.cm2-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-right: 44px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cm2-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 2px solid transparent;
  background: linear-gradient(#07080c, #07080c) padding-box, var(--doppler) border-box; }
.cm2-who { display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-size: 1.15rem; }
.cm2-ok { font-family: var(--sans); font-size: .68rem; font-weight: 700; padding: .15rem .45rem; border-radius: 6px; color: #03130c; background: var(--g); }
.cm2-sub { color: var(--dim); font-size: .66rem; }
.cm2-online { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--muted); }
.cm2-online i { width: 8px; height: 8px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); animation: ping 2s infinite; }
.cm2-body { display: grid; gap: 18px; }
.cm2-title { font-family: var(--display); font-size: 1.45rem; margin-bottom: 12px; }
.cm2-opts { display: grid; gap: 8px; }
.cm2-opt { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; width: 100%; padding: 11px 14px 11px 11px; border-radius: 14px; text-align: left;
  background: rgba(255,255,255,.025); border: 1px solid var(--line); transition: border-color .3s, background .3s, transform .35s var(--ease-out); }
.cm2-opt svg { width: 40px; height: 40px; padding: 9px; border-radius: 11px; color: var(--g); background: rgba(25,245,164,.08); transition: color .3s, background .3s; }
.cm2-opt > span { display: grid; line-height: 1.25; }
.cm2-opt b { font-size: .95rem; }
.cm2-opt small { font-size: .78rem; color: var(--muted); }
.cm2-opt::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--dim); transition: transform .35s var(--ease-out), color .3s; }
.cm2-opt:hover { transform: translateX(3px); border-color: rgba(168,85,247,.45); }
.cm2-opt[aria-pressed="true"] { border-color: transparent; background: linear-gradient(rgba(16,14,26,.96), rgba(16,14,26,.96)) padding-box, var(--doppler) border-box; border: 1px solid transparent; }
.cm2-opt[aria-pressed="true"] svg { color: #03130c; background: var(--doppler); }
.cm2-opt[aria-pressed="true"]::after { color: var(--text); transform: translate(3px, -50%); }
.cm2-right { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.cm2-deal { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cm2-big { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: .9; letter-spacing: -.03em;
  background: var(--doppler); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cm2-big.pop { animation: bigPop .45s var(--ease-out); }
@keyframes bigPop { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.cm2-big-lbl { color: #cfd5e1; font-size: .88rem; max-width: 18ch; line-height: 1.25; }
.cm2-rule { font-size: .9rem; color: #c3cad7; }
.cm2-rule strong { color: var(--text); }
.cm2-chat { display: grid; gap: 6px; }
.cm2-chat-lbl { color: var(--dim); font-size: .62rem; }
.cm2-bubble { justify-self: end; max-width: 95%; padding: .7rem .9rem; border-radius: 16px 16px 4px 16px; font-size: .9rem; color: #fff;
  background: linear-gradient(135deg, #3b2a7a, #24305f); box-shadow: 0 10px 30px -16px rgba(168,85,247,.8); }
.cm2-chat .cm-copy { justify-self: end; }
.cm2-go { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm2-go .cbtn { min-height: 50px; font-size: .84rem; }
.cm2-safe { display: flex; gap: .5rem; align-items: flex-start; font-size: .76rem; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line); }
.cm2-safe .ic { color: var(--g); flex: none; margin-top: .1rem; }
@media (min-width: 720px) {
  .cm2-in { padding: 26px 26px 20px; }
  .cm2-body { grid-template-columns: 1fr 1.05fr; gap: 22px; align-items: start; }
  .cm2-online { margin-left: auto; }
}
/* =============================================================
   17. Trade terminal (replaces the 2x2 tiles)
   ============================================================= */
.trade-head { margin-bottom: 28px; }
.xchg { position: relative; border-radius: 28px; padding: 10px; background: linear-gradient(160deg, rgba(20,24,33,.95), rgba(9,10,15,.96));
  border: 1px solid var(--line-2); box-shadow: 0 50px 120px -60px rgba(25,245,164,.45), 0 40px 100px -60px rgba(168,85,247,.55); }
.xchg::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: .55;
  background: conic-gradient(from var(--dop), #19f5a4, #22d3ee, #a855f7, #ff4fd8, #19f5a4);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinDop 10s linear infinite; }
.xtabs { position: relative; display: flex; gap: 4px; padding: 5px; border-radius: 20px; background: rgba(0,0,0,.4); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.xtabs::-webkit-scrollbar { display: none; }
.xt { position: relative; z-index: 1; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1rem; border-radius: 15px;
  font-weight: 700; font-size: .88rem; color: var(--muted); white-space: nowrap; transition: color .3s; }
.xt svg { width: 20px; height: 20px; }
.xt:hover { color: var(--text); }
.xt[aria-selected="true"] { color: #03130c; }
.xtabs-ink { position: absolute; z-index: 0; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 15px; background: var(--doppler);
  box-shadow: 0 8px 30px -8px rgba(25,245,164,.7); transition: transform .55s var(--ease-out), width .55s var(--ease-out); }
.xp { display: grid; gap: 22px; padding: 22px 14px 16px; }
.xp[hidden] { display: none; }

/* the visual: you give → % → you get */
.xflow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 18px 12px; border-radius: 20px;
  background: radial-gradient(400px 200px at 50% 50%, rgba(168,85,247,.12), transparent 70%), rgba(0,0,0,.28); border: 1px dashed rgba(255,255,255,.1); min-height: 210px; }
.xside { display: grid; gap: 10px; justify-items: center; }
.xlbl { color: var(--dim); font-size: .62rem; }
.xstack { display: flex; align-items: center; justify-content: center; }
.xs { display: grid; place-items: center; width: clamp(64px, 17vw, 108px); aspect-ratio: 4 / 3; border-radius: 14px; margin-left: -18px;
  background: radial-gradient(closest-side, rgba(235,75,75,.3), transparent 75%), linear-gradient(160deg, #161a24, #0c0e13); border: 1px solid var(--line-2); box-shadow: 0 12px 26px -12px rgba(0,0,0,.8); }
.xs:first-child { margin-left: 0; }
.xs img { width: 92%; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.xs--big { width: clamp(92px, 24vw, 150px); background: radial-gradient(closest-side, rgba(255,79,216,.35), transparent 75%), linear-gradient(160deg, #1a1426, #0c0e13); border-color: rgba(255,79,216,.45); }
.xside--get .xs { border-color: rgba(25,245,164,.45); box-shadow: 0 16px 40px -18px rgba(25,245,164,.6); background: radial-gradient(closest-side, rgba(25,245,164,.28), transparent 80%), linear-gradient(160deg, #1d2a2a, #10161a); }
.xside--get .xs--euro { background: radial-gradient(closest-side, rgba(245,181,68,.32), transparent 80%), linear-gradient(160deg, #221a0c, #0e0c08); border-color: rgba(245,181,68,.5); }
.xs--euro { align-content: center; gap: 2px; background: radial-gradient(closest-side, rgba(245,181,68,.32), transparent 80%), linear-gradient(160deg, #221a0c, #0e0c08); border-color: rgba(245,181,68,.5); }
.xs--euro b { font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1; color: #ffd27a; }
.xs--euro small { font-size: .5rem; letter-spacing: .04em; color: #e9c98a; text-align: center; padding: 0 4px; }
.xmid { display: grid; justify-items: center; gap: 4px; min-width: 70px; }
.xline { width: 2px; height: 22px; border-radius: 2px; background: linear-gradient(180deg, transparent, rgba(25,245,164,.8), transparent); }
.xpct { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.4rem); line-height: 1; padding: .35rem .7rem; border-radius: 14px; color: #03130c; background: var(--doppler);
  box-shadow: 0 10px 34px -10px rgba(168,85,247,.9); }
.xmid-lbl { font-size: .7rem; color: var(--muted); white-space: nowrap; }

/* entrance animation when a tab opens */
.xp.is-on .xside--give .xs { animation: xIn .6s var(--ease-out) both; }
.xp.is-on .xside--give .xs:nth-child(2) { animation-delay: .06s; }
.xp.is-on .xside--give .xs:nth-child(3) { animation-delay: .12s; }
.xp.is-on .xpct { animation: xPop .55s .18s var(--ease-out) both; }
.xp.is-on .xside--get .xs { animation: xGet .7s .3s var(--ease-out) both; }
.xp.is-on .xinfo > * { animation: xFade .6s var(--ease-out) both; }
.xp.is-on .xinfo > :nth-child(2) { animation-delay: .05s; } .xp.is-on .xinfo > :nth-child(3) { animation-delay: .1s; } .xp.is-on .xinfo > :nth-child(4) { animation-delay: .15s; }
@keyframes xIn { from { opacity: 0; transform: translateX(-14px) rotate(-4deg); } }
@keyframes xGet { from { opacity: 0; transform: translateX(14px) scale(.9); } }
@keyframes xPop { from { opacity: 0; transform: scale(.7); } }
@keyframes xFade { from { opacity: 0; transform: translateY(8px); } }
.xside--get .xs img { animation: floaty 6s ease-in-out infinite; }

.xinfo { display: grid; gap: 12px; align-content: center; }
.xinfo h3 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); }
.xinfo p { color: #c3cad7; }
.xinfo p strong { color: var(--text); }
.xbul { display: grid; gap: 6px; }
.xbul li { display: flex; gap: .5rem; align-items: flex-start; color: #cfd5e1; font-size: .92rem; }
.xbul .ic { color: var(--g); margin-top: .2rem; }
.xcta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.xcta .btn { flex: 1 1 auto; min-height: 52px; }
.xround { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; flex: none; color: #fff; transition: transform .4s var(--ease-out), filter .3s; }
.xround svg { width: 22px; height: 22px; }
.xround:hover { transform: translateY(-3px); filter: brightness(1.1); }
.xround--dc { background: #5865f2; box-shadow: 0 10px 26px -10px rgba(88,101,242,.9); }
.xround--ig { background: linear-gradient(45deg, #fcb045, #fd1d1d 40%, #c13584 70%, #833ab4); box-shadow: 0 10px 26px -10px rgba(253,29,29,.8); }
.trade .rules-safe { margin-top: 16px; }

@media (min-width: 900px) {
  .xchg { padding: 12px; }
  .xp { grid-template-columns: 1.1fr 1fr; gap: 34px; padding: 26px 22px 20px; align-items: center; }
  .xflow { min-height: 280px; padding: 26px 18px; }
  .xmid { min-width: 96px; }
  .xline { height: 34px; }
  .xcta .btn { flex: 0 0 auto; padding-inline: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xchg::before, .xside--get .xs img { animation: none; }
}@media (max-width: 899px) {
  .xflow { gap: 6px; padding: 16px 8px; min-height: 160px; }
  .xs { width: clamp(50px, 14.5vw, 96px); margin-left: -14px; border-radius: 11px; }
  .xs--big { width: clamp(72px, 21vw, 130px); }
  .xmid { min-width: 56px; }
  .xpct { font-size: clamp(1.25rem, 6vw, 2rem); padding: .3rem .5rem; border-radius: 11px; }
  .xmid-lbl { font-size: .62rem; }
  .xs--euro small { font-size: .42rem; }
  .xline { height: 16px; }
  .xp { padding: 16px 6px 10px; }
}