:root {
  --bg: #050507;
  --panel: rgba(18, 19, 24, 0.78);
  --panel-strong: rgba(27, 28, 35, 0.92);
  --line: rgba(255, 255, 255, 0.1);
  --muted: #a5a7b2;
  --text: #f4f5f8;
  --red: #ff2638;
  --red-2: #b60016;
  --glow: rgba(255, 38, 56, 0.32);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
  font-family: Inter, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at 50% -10%, #271017 0, #090a0d 32%, var(--bg) 76%);
  min-width: 320px;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.18), transparent 1px);
  background-size: 100% 4px, 7px 7px;
  mix-blend-mode: overlay;
}
.site-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    linear-gradient(112deg, rgba(255,38,56,.08), transparent 28%, rgba(255,255,255,.025) 52%, transparent 76%),
    #050507;
}
.grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0, transparent 72%);
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 14px clamp(18px, 4vw, 56px);
  background: rgba(5, 5, 7, .72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 0; }
.brand img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 14px var(--glow)); }
.nav { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 14px; }
.nav a:hover { color: var(--text); }
.header-actions, .cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  font-weight: 850;
  color: var(--text);
  background: rgba(255,255,255,.05);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.24); }
.btn-primary {
  background: linear-gradient(135deg, #ff2335, #a80013);
  border-color: rgba(255, 86, 98, .55);
  box-shadow: 0 18px 54px rgba(255, 38, 56, .28);
}
.btn-primary:hover { box-shadow: 0 22px 72px rgba(255, 38, 56, .38); }
.btn-ghost:hover { background: rgba(255,255,255,.09); }
.btn-big { min-height: 52px; padding: 0 24px; }

.section-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 86px 0;
}
.hero {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(420px, 1.07fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
  padding-top: 64px;
}
.eyebrow {
  margin: 0 0 14px;
  color: #ff6773;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .16em;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 24px;
  font-size: clamp(54px, 8.4vw, 116px);
  line-height: .86;
  letter-spacing: 0;
  text-shadow: 0 0 34px rgba(255,38,56,.2);
}
h2 { font-size: clamp(34px, 4vw, 62px); line-height: .98; letter-spacing: 0; margin-bottom: 18px; }
h3 { font-size: 20px; line-height: 1.15; margin-bottom: 10px; }
.lead { max-width: 620px; color: #d6d8df; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.micro { margin: 18px 0 0; color: var(--muted); font-weight: 700; }
.hero-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-pills span {
  padding: 9px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px;
  background: rgba(255,255,255,.045); color: #d5d6dc; font-size: 13px; font-weight: 800;
}

.hero-stage {
  position: relative;
  min-height: 560px;
  perspective: 1300px;
}
.hero-mark {
  position: absolute; width: 460px; max-width: 80%; right: 4%; top: -24px;
  opacity: .12; filter: drop-shadow(0 0 60px rgba(255,0,20,.7));
}
.stream-card, .clip-card {
  position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
  background: linear-gradient(145deg, rgba(25,26,33,.94), rgba(8,9,12,.94));
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.04);
}
.stream-card {
  left: 0; top: 88px; width: 78%; transform: rotateY(12deg) rotateX(4deg);
  padding: 14px; overflow: hidden;
}
.stream-card::after, .clip-card::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, transparent, rgba(255,38,56,.28), transparent);
  opacity: .4; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px; mask-composite: exclude;
}
.stream-top { display: flex; align-items: center; gap: 7px; height: 28px; color: #8d909b; font-size: 11px; font-weight: 900; }
.stream-top span { width: 8px; height: 8px; border-radius: 50%; background: #2b2e37; }
.stream-top span:first-child { background: var(--red); box-shadow: 0 0 14px var(--glow); }
.stream-top b { margin-left: auto; letter-spacing: .14em; }
.stream-frame { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #090a0e; }
.game-field {
  position: relative; width: 100%; height: 100%;
  background:
    radial-gradient(circle at 30% 34%, rgba(255,38,56,.22), transparent 18%),
    linear-gradient(135deg, #222734, #090b10 52%, #271014);
}
.game-field::before {
  content: ""; position: absolute; inset: 16% 24%; border: 1px solid rgba(255,255,255,.08);
  transform: rotate(-12deg); box-shadow: 0 0 80px rgba(255,38,56,.18);
}
.hud, .webcam, .chat, .moment, .clip-status, .clip-hud, .clip-web, .clip-info {
  position: absolute; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
}
.hud { padding: 6px 9px; border-radius: 7px; font-size: 12px; font-weight: 900; }
.hud-health { left: 18px; top: 18px; color: #fff; border-color: rgba(255,38,56,.55); }
.hud-score { right: 130px; top: 18px; color: #ddd; }
.webcam { right: 18px; top: 18px; width: 88px; height: 74px; display:grid; place-items:center; color:#fff; border-radius:10px; }
.chat { right: 18px; bottom: 18px; width: 120px; height: 92px; border-radius: 10px; padding: 12px; }
.chat i { display: block; height: 6px; margin-bottom: 9px; border-radius: 99px; background: rgba(255,255,255,.22); }
.moment { width: 76px; height: 46px; border-radius: 10px; border-color: rgba(255,38,56,.8); box-shadow: 0 0 32px rgba(255,38,56,.3); }
.moment-a { left: 42%; top: 38%; }
.moment-b { left: 26%; bottom: 22%; opacity: .55; }
.timeline { position: relative; height: 56px; margin-top: 12px; border-radius: 12px; background: rgba(255,255,255,.05); overflow: hidden; }
.timeline::before { content:""; position:absolute; left:18px; right:18px; top:26px; height:2px; background:rgba(255,255,255,.16); }
.tick { position:absolute; top:19px; width:14px; height:14px; border-radius:50%; background:#5d616d; }
.tick.active { background: var(--red); box-shadow: 0 0 28px rgba(255,38,56,.9); }
.t1{left:20%}.t2{left:48%}.t3{left:67%}.t4{left:82%}
.scan { position:absolute; top:0; bottom:0; width:2px; background:var(--red); box-shadow:0 0 24px var(--red); animation: scan 4.2s ease-in-out infinite; }
.clip-card {
  right: 0; top: 38px; width: 245px; height: 438px;
  transform: rotateY(-18deg) rotateX(5deg) translateZ(80px);
  padding: 14px;
}
.clip-glass { height:100%; border-radius:14px; background:linear-gradient(160deg,#1d222e,#08090d); overflow:hidden; position:relative; }
.clip-main { position:absolute; inset:16px; border-radius:12px; background:linear-gradient(180deg,#301217,#11151d 52%,#07090d); border:1px solid rgba(255,255,255,.1); }
.clip-hud { left:10px; top:10px; padding:5px 8px; border-radius:6px; color:white; border-color:rgba(255,38,56,.6); font-weight:900; font-size:11px; }
.clip-web { right:10px; top:10px; width:62px; height:54px; border-radius:8px; display:grid; place-items:center; font-size:11px; font-weight:900; }
.clip-info { left:14px; bottom:50px; width:88px; height:34px; border-radius:8px; display:grid; place-items:center; font-size:11px; font-weight:900; }
.clip-status { left:18px; right:18px; bottom:18px; border-radius:9px; padding:10px; text-align:center; color:white; background:linear-gradient(135deg,#ff2638,#8a0010); font-size:12px; font-weight:900; }
.extract-line { position:absolute; left:54%; top:246px; width:170px; height:2px; background:linear-gradient(90deg,transparent,var(--red),transparent); box-shadow:0 0 26px var(--red); transform:rotate(-8deg); }

.section-head { max-width: 760px; margin-bottom: 34px; }
.section-head p:not(.eyebrow) { color: var(--muted); }
.process-line { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; }
.step, .feature, .price-card, .phone, details, .source-note, .before-after article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 56px rgba(0,0,0,.28);
}
.step, .feature, .price-card, details { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s ease, border-color .22s ease, box-shadow .22s ease; }
.step:hover, .feature:hover, .price-card:hover, .phone:hover { border-color: rgba(255,38,56,.4); box-shadow:0 24px 70px rgba(255,38,56,.14), 0 20px 70px rgba(0,0,0,.38); }
.step { padding: 22px; min-height: 210px; }
.step span { color: var(--red); font-weight: 950; font-size: 13px; letter-spacing:.16em; }
.step p, .feature p, .price-card p, details p, .source-note p { color: var(--muted); line-height:1.55; margin-bottom:0; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feature { padding: 22px; min-height: 166px; }

.before-after { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.before-after article { padding:30px; position:relative; overflow:hidden; }
.before-after .after { border-color: rgba(255,38,56,.34); background:linear-gradient(145deg,rgba(62,14,20,.7),rgba(17,18,24,.82)); }
ul { margin: 0; padding-left: 20px; color:#d4d5dc; line-height:1.9; }
.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.audience-grid span { padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.045); font-weight:850; }
.phone-row { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
.phone { width: 238px; padding:12px; border-radius:24px; background:#0c0d12; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s ease, border-color .22s ease, box-shadow .22s ease; }
.phone div { position:relative; aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:linear-gradient(180deg,#351118,#10141d 50%,#07080b); border:1px solid rgba(255,255,255,.1); }
.phone b, .phone span, .phone i { position:absolute; font-style:normal; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.42); border-radius:8px; padding:8px; font-size:12px; font-weight:900; }
.phone b { left:12px; top:12px; color:#fff; border-color:rgba(255,38,56,.7); }
.phone span { right:12px; top:54px; }
.phone i { left:12px; bottom:60px; }
.phone p { margin:12px 4px 2px; color:#d6d7de; font-weight:850; }
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.price-card { padding:30px; }
.price-card strong { display:block; font-size: clamp(34px,4vw,54px); line-height:1; margin:18px 0; }
.price-card-hot { border-color:rgba(255,38,56,.5); background:linear-gradient(145deg,rgba(70,10,18,.82),rgba(16,17,22,.9)); }
.source-note { padding:32px; border-color:rgba(255,38,56,.28); }
code { color:#fff; background:rgba(255,38,56,.12); border:1px solid rgba(255,38,56,.26); border-radius:6px; padding:2px 6px; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
details { padding:20px; }
summary { cursor:pointer; font-weight:900; font-size:18px; }
summary::marker { color: var(--red); }
details p { margin-top:12px; }
.final-cta {
  display:grid; grid-template-columns:220px 1fr; gap:34px; align-items:center;
  padding:54px; margin-bottom:70px; border:1px solid rgba(255,38,56,.28); border-radius:24px;
  background:radial-gradient(circle at 20% 20%,rgba(255,38,56,.2),transparent 30%), var(--panel-strong);
  box-shadow: var(--shadow);
}
.final-cta img { width: 100%; opacity:.72; filter:drop-shadow(0 0 36px rgba(255,38,56,.55)); }
.footer {
  width:min(1180px, calc(100% - 36px)); margin:0 auto; padding:28px 0 40px;
  display:flex; gap:18px; justify-content:space-between; color:var(--muted); border-top:1px solid var(--line); font-size:14px;
}
.footer a { color:#ff6874; }

.reveal { opacity:0; transform:translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }
@keyframes scan { 0%,100%{left:12%} 50%{left:72%} }

@media (max-width: 980px) {
  .nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:42px; }
  .hero-stage { min-height:500px; }
  .process-line, .feature-grid { grid-template-columns:1fr 1fr; }
  .audience-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  .topbar { padding:12px 16px; }
  .brand span { display:none; }
  .header-actions .btn-ghost { display:none; }
  .section-shell { width:min(100% - 28px, 1180px); padding:58px 0; }
  .hero { min-height:auto; }
  h1 { font-size:56px; }
  .lead { font-size:17px; }
  .btn-big { width:100%; }
  .hero-stage { min-height:390px; transform:scale(.86); transform-origin:top center; margin-bottom:-40px; }
  .stream-card { width:86%; top:74px; }
  .clip-card { width:178px; height:316px; }
  .extract-line { display:none; }
  .process-line, .feature-grid, .before-after, .audience-grid, .pricing-grid, .faq-grid, .final-cta { grid-template-columns:1fr; }
  .final-cta { padding:28px; }
  .final-cta img { width:140px; }
  .footer { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}