@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ink: #f8f9ff;
  --muted: #a4a7bb;
  --bg: #0d0c18;
  --surface: #151326;
  --surface-2: #1c1936;
  --line: rgba(255,255,255,.12);
  --cyan: #09abc0;
  --cyan-bright: #22d3e7;
  --violet: #7668ff;
  --club-primary: #1c1936;
  --club-accent: #09abc0;
  --max: 1240px;
  --header: 86px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--bg); }
html.inertial-scroll { scroll-behavior: auto; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 8%, rgba(9,171,192,.14), transparent 28rem),
    radial-gradient(circle at 8% 28%, rgba(118,104,255,.1), transparent 24rem),
    var(--bg);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); padding: 10px 15px; background: white; color: #111; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(100px); pointer-events: none; opacity: .34; }
.ambient-one { width: 330px; height: 330px; background: var(--cyan); top: 8vh; right: -190px; }
.ambient-two { width: 270px; height: 270px; background: var(--violet); top: 54vh; left: -190px; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header);
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 max(28px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, height .3s ease;
}
.site-header.is-scrolled { height: 70px; background: rgba(13,12,24,.82); backdrop-filter: blur(18px); border-color: var(--line); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.menu-brand-logo { display: block; width: 154px; height: auto; }
.sv-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sv-symbol { position: relative; display: inline-block; width: 37px; height: 34px; flex: 0 0 auto; transform: rotate(-7deg); }
.sv-symbol > i, .sv-symbol > span { position: absolute; display: block; width: 29px; height: 10px; border-radius: 3px 10px 3px 10px; background: linear-gradient(100deg, var(--cyan-bright), var(--violet)); box-shadow: 0 0 16px rgba(34,211,231,.2); }
.sv-symbol > i:first-child, .sv-symbol > span:first-child { top: 5px; left: 0; transform: skewX(-24deg); }
.sv-symbol > i:last-child, .sv-symbol > span:last-child { right: 0; bottom: 5px; transform: skewX(-24deg); }
.sv-symbol.compact { width: 23px; height: 21px; }
.sv-symbol.compact > i, .sv-symbol.compact > span { width: 18px; height: 6px; border-radius: 2px 6px 2px 6px; box-shadow: none; }
.sv-symbol.compact > i:first-child, .sv-symbol.compact > span:first-child { top: 3px; }
.sv-symbol.compact > i:last-child, .sv-symbol.compact > span:last-child { bottom: 3px; }
.sv-wordmark { display: inline-flex; align-items: baseline; gap: .26em; font: 700 19px/1 Space Grotesk, sans-serif; letter-spacing: -.035em; }
.sv-wordmark b { font: inherit; }
.sv-wordmark b:last-child { color: var(--cyan-bright); }
.sv-logo.on-light .sv-wordmark { color: #071315; }
.sv-logo.on-light .sv-wordmark b:last-child { color: #075d6a; }
.sv-logo.on-light .sv-symbol > i { background: linear-gradient(100deg, #071315, #087c8b); box-shadow: none; }
.team-home .sv-symbol > i, .story-club-mark .sv-symbol > i { background: #071315; }
.mini-crest .sv-symbol { transform: rotate(-7deg) scale(.86); }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links a { position: relative; color: #d5d6e2; font-size: 14px; font-weight: 600; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--cyan); transition: right .25s ease; }
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button svg { width: 20px; height: 20px; transition: transform .2s ease; }
.button:hover svg { transform: translateX(4px); }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #081114; background: linear-gradient(110deg, var(--cyan-bright), #71e9f1); box-shadow: 0 12px 35px rgba(9,171,192,.2); }
.button-primary:hover { box-shadow: 0 16px 42px rgba(9,171,192,.32); }
.button-outline { border-color: rgba(255,255,255,.21); background: rgba(255,255,255,.04); }
.button-outline:hover { border-color: var(--cyan); background: rgba(9,171,192,.08); }
.button-small { min-height: 42px; padding: 0 17px; }

.hero { position: relative; min-height: 100vh; padding: calc(var(--header) + 76px) max(28px, calc((100vw - var(--max)) / 2)) 74px; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(390px, .76fr); align-items: center; gap: 72px; overflow: hidden; isolation: isolate; }
.hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.hero-grid::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 2%, transparent 48%, var(--bg) 100%); }
.hero-aurora { position: absolute; z-index: -1; width: min(76vw, 980px); height: min(68vw, 760px); right: -18%; top: 3%; border-radius: 46% 54% 61% 39%; background: radial-gradient(circle at 38% 42%, rgba(77,239,245,.5), rgba(9,171,192,.22) 34%, rgba(9,171,192,.04) 64%, transparent 72%); filter: blur(72px); opacity: .52; pointer-events: none; animation: auroraDrift 11s ease-in-out infinite alternate; }
.eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 10px; color: #d9d9e5; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 28px; height: 2px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
h1, h2 { margin: 0; font-family: Space Grotesk, Inter, sans-serif; letter-spacing: -.055em; line-height: .95; }
h1 { max-width: 720px; font-size: clamp(58px, 6.1vw, 96px); }
h1 span, h2 em { color: transparent; background: linear-gradient(95deg, #fff 8%, var(--cyan-bright) 70%, #786cff); -webkit-background-clip: text; background-clip: text; font-style: normal; }
.audience-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 580px; margin-top: 40px; padding: 6px; border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 15px; }
.audience-button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 66px; color: var(--muted); text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; transition: .25s ease; }
.audience-button:hover { color: white; }
.audience-button.is-active { color: white; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.audience-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: rgba(255,255,255,.07); }
.audience-button.is-active .audience-icon { color: #061113; background: var(--cyan-bright); }
.audience-icon svg { width: 20px; height: 20px; }
.audience-button span:last-child { display: grid; gap: 2px; }
.audience-button small { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; opacity: .7; }
.audience-button strong { font-size: 13px; }
.hero-lead { max-width: 610px; margin: 25px 0 0; color: #bec0cf; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 29px; }
.text-link { color: #d5d6e0; font-size: 14px; font-weight: 600; }
.text-link span { margin-left: 8px; color: var(--cyan); }
.hero-proof { display: flex; align-items: center; gap: 14px; max-width: 570px; margin-top: 35px; color: #9295aa; font-size: 12px; line-height: 1.5; }
.hero-proof strong { color: #e6e7ee; }
.proof-icons { display: flex; padding-left: 7px; }
.proof-icons i { width: 30px; height: 30px; display: grid; place-items: center; margin-left: -7px; color: white; border: 2px solid var(--bg); border-radius: 50%; background: #29263f; font: 700 9px/1 Space Grotesk; font-style: normal; }
.proof-icons i:nth-child(2) { color: #111; background: #f2c500; }
.proof-icons i:nth-child(3) { color: var(--cyan); background: #12323b; }

.hero-visual { position: relative; min-height: 660px; display: grid; place-items: center; perspective: 1200px; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.orbit-one { width: 550px; height: 550px; animation: spin 24s linear infinite; }
.orbit-one::before { content: ''; position: absolute; width: 8px; height: 8px; top: 55px; left: 72px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); }
.orbit-two { width: 410px; height: 410px; border-style: dashed; animation: spinReverse 30s linear infinite; }
.floating-tag { position: absolute; z-index: 5; padding: 10px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: #e9eaf2; background: rgba(22,20,38,.82); backdrop-filter: blur(12px); box-shadow: 0 15px 40px rgba(0,0,0,.34); font: 700 10px/1 Space Grotesk; letter-spacing: .07em; animation: float 4.2s ease-in-out infinite; }
.floating-tag i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #ff4d67; box-shadow: 0 0 10px #ff4d67; }
.tag-live { left: -2%; top: 30%; }
.tag-pwa { right: -2%; top: 20%; animation-delay: -.8s; }
.tag-pwa span { color: var(--cyan); }
.tag-mvp { right: -4%; bottom: 24%; animation-delay: -1.5s; }
.tag-mvp strong { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-left: 6px; color: #111; border-radius: 50%; background: #f2c500; }
.phone { position: relative; z-index: 2; }
.phone-frame { position: relative; width: 290px; padding: 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 41px; background: linear-gradient(145deg, #514d61, #14131c 18%, #020205 65%, #403d4d); box-shadow: 0 50px 90px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.13); }
.phone-speaker { position: absolute; top: 17px; left: 50%; z-index: 8; width: 76px; height: 20px; transform: translateX(-50%); border-radius: 20px; background: #050509; }
.phone-screen { position: relative; height: 598px; overflow: hidden; border-radius: 33px; background: #f5f5f7; color: #15141b; }
.hero-phone { --phone-x: 0px; --phone-y: 0px; --phone-rotate: 3deg; transform: translate3d(var(--phone-x),var(--phone-y),0) rotate(var(--phone-rotate)); transition: transform .48s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.hero-phone > .phone-frame { animation: heroLevitate 5.4s ease-in-out infinite; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 39px 18px 14px; color: white; background: linear-gradient(130deg, var(--surface-2), #272244); }
.app-club { display: flex; align-items: center; gap: 9px; }
.mini-crest { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.34); border-radius: 8px; color: var(--cyan-bright); background: rgba(255,255,255,.08); font: 800 10px/1 Space Grotesk; }
.app-club span:last-child { display: grid; gap: 1px; }
.app-club small { color: var(--cyan-bright); font-size: 7px; letter-spacing: .14em; }
.app-club strong { font: 700 12px/1.2 Space Grotesk; }
.icon-button { position: relative; width: 32px; height: 32px; display: grid; place-items: center; color: white; border: 0; border-radius: 50%; background: rgba(255,255,255,.09); }
.icon-button svg { width: 15px; height: 15px; }
.icon-button i { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #ff5d6d; }
.hero-phone-content { padding: 20px 17px 75px; }
.app-greeting { display: grid; gap: 2px; margin-bottom: 13px; }
.app-greeting small { color: #8b8994; font-size: 8px; font-weight: 700; letter-spacing: .11em; }
.app-greeting strong { font: 700 20px/1.2 Space Grotesk; }
.match-card { overflow: hidden; border-radius: 17px; color: white; background: linear-gradient(140deg, #1c1936, #312957); box-shadow: 0 14px 34px rgba(28,25,54,.22); }
.countdown { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.countdown span { color: var(--cyan-bright); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.countdown small { color: #bfc0cc; font-size: 7px; }
.teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; padding: 17px 12px 13px; text-align: center; }
.teams > div { display: grid; justify-items: center; gap: 6px; }
.teams > strong { color: #8d899f; font-size: 10px; }
.teams small { font-size: 7px; font-weight: 700; }
.team-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.3); border-radius: 13px; font: 800 13px/1 Space Grotesk; }
.team-home { color: #071216; background: var(--cyan-bright); }
.team-away { background: #ba2338; }
.app-action { width: calc(100% - 26px); margin: 0 13px 13px; padding: 10px 12px; display: flex; justify-content: space-between; color: #081214; border: 0; border-radius: 9px; background: var(--cyan-bright); font-size: 9px; font-weight: 800; cursor: pointer; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.quick-grid button { min-height: 100px; display: grid; align-content: end; gap: 3px; padding: 12px; text-align: left; border: 1px solid #e6e5ec; border-radius: 14px; background: white; cursor: pointer; }
.quick-grid span { color: #078da0; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.quick-grid strong { font-size: 10px; }
.quick-grid small { color: #888793; font-size: 7px; }
.panel-heading { display: grid; gap: 3px; }
.panel-heading small { color: #078da0; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.panel-heading strong { font: 700 20px/1.2 Space Grotesk; }
.panel-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.panel-stat-row span { display: grid; gap: 3px; padding: 13px; border: 1px solid #e2e1e7; border-radius: 12px; background: white; }
.panel-stat-row small { color: #85838e; font-size: 7px; }
.panel-stat-row strong { font: 700 20px/1 Space Grotesk; }
.publish-card { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 13px; border-radius: 14px; color: white; background: #201d38; }
.publish-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #061013; background: var(--cyan-bright); }
.publish-icon svg { width: 17px; }
.publish-card > span:nth-child(2) { display: grid; gap: 3px; }
.publish-card small { color: var(--cyan-bright); font-size: 6px; font-weight: 800; letter-spacing: .09em; }
.publish-card strong { font-size: 9px; }
.publish-card button { grid-column: 1 / -1; padding: 9px; color: #061013; border: 0; border-radius: 8px; background: var(--cyan-bright); font-size: 8px; font-weight: 800; cursor: pointer; }
.panel-list { display: grid; gap: 8px; margin-top: 12px; }
.panel-list span { display: flex; align-items: center; gap: 7px; padding: 11px; border: 1px solid #e4e3e9; border-radius: 10px; background: white; font-size: 8px; }
.panel-list i { width: 6px; height: 6px; border-radius: 50%; background: #28bb72; }
.panel-list i.muted { background: #b1afba; }
.panel-list b { margin-left: auto; color: #76747f; font-size: 7px; }
.app-bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; padding: 4px 10px 8px; border-top: 1px solid #e6e5e9; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); }
.app-bottom-nav span { display: grid; justify-items: center; gap: 3px; color: #a09eaa; }
.app-bottom-nav span.active { color: #171524; }
.app-bottom-nav svg { width: 16px; height: 16px; }
.app-bottom-nav small { font-size: 6px; }
.app-toast, .demo-toast { position: absolute; left: 16px; right: 16px; bottom: 73px; z-index: 10; padding: 10px 12px; opacity: 0; transform: translateY(12px); color: white; text-align: center; border-radius: 9px; background: #151326; font-size: 8px; font-weight: 700; pointer-events: none; transition: .3s ease; }
.app-toast.show, .demo-toast.show { opacity: 1; transform: translateY(0); }
.visual-caption { position: absolute; right: -5%; bottom: 1%; max-width: 250px; display: flex; gap: 10px; color: #85889a; font-size: 10px; }
.visual-caption span { color: var(--cyan); font-weight: 800; }

.signal-strip { position: relative; z-index: 4; overflow: visible; margin-bottom: -54px; border: 0; background: transparent; transform: rotate(-1.2deg) scale(1.02); pointer-events: none; }
.signal-track { width: max-content; display: flex; align-items: center; padding: 8px 0; animation: signalLoop 17s linear infinite; will-change: transform; }
.signal-group { display: flex; align-items: center; flex-shrink: 0; gap: clamp(42px,4.5vw,78px); padding-right: clamp(42px,4.5vw,78px); }
.signal-group span { color: rgba(247,248,251,.26); font: 700 clamp(52px,7vw,112px)/.92 Space Grotesk; letter-spacing: .018em; white-space: nowrap; }
.signal-group span:nth-of-type(even) { color: transparent; -webkit-text-stroke: .6px rgba(34,211,231,.64); }
.signal-group i { width: 8px; height: 8px; flex: 0 0 auto; opacity: .46; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }

.value-section { position: relative; max-width: var(--max); min-height: 750px; margin: 0 auto; padding: 150px 28px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.section-index { position: absolute; top: 110px; left: 28px; color: rgba(255,255,255,.045); font: 700 140px/1 Space Grotesk; }
h2 { font-size: clamp(43px, 5.4vw, 76px); }
.value-copy { position: relative; z-index: 1; }
.value-copy > p:last-child, .personalizer-intro > p { max-width: 600px; margin: 28px 0 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.channel-stack { position: relative; min-height: 470px; }
.channel-card { --card-rotate: 0deg; position: absolute; width: min(390px, 80%); min-height: 112px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 2px 14px; padding: 22px; opacity: 0; transform: translate3d(0,78px,0) rotate(var(--card-rotate)) scale(.96); border: 1px solid var(--line); border-radius: 12px; background: rgba(27,25,44,.87); box-shadow: 0 24px 50px rgba(0,0,0,.26); backdrop-filter: blur(10px); filter: blur(5px); transition: opacity .55s ease, transform .72s cubic-bezier(.16,1,.3,1), filter .55s ease; will-change: transform, opacity, filter; }
.channel-card.is-in, .channel-target.is-in { opacity: 1; filter: blur(0); }
.channel-card.is-in { transform: translate3d(0,0,0) rotate(var(--card-rotate)) scale(1); }
.channel-card span { grid-row: 1 / 3; color: var(--cyan); font: 700 12px/1 Space Grotesk; }
.channel-card strong { font: 700 15px/1 Space Grotesk; letter-spacing: .05em; }
.channel-card small { color: var(--muted); font-size: 11px; }
.c-one { --card-rotate: -4deg; top: 8px; left: 0; }
.c-two { --card-rotate: 3deg; top: 108px; right: 0; }
.c-three { --card-rotate: -1deg; top: 210px; left: 4%; }
.channel-target { position: absolute; z-index: 3; right: 0; bottom: 0; width: min(365px,86%); min-height: 142px; display: grid; align-content: center; justify-items: start; gap: 10px; padding: 27px 30px; opacity: 0; transform: translate3d(0,88px,0) scale(.92); color: #071315; border-radius: 18px; background: linear-gradient(110deg, var(--cyan-bright), #7bf2f2); box-shadow: 0 28px 65px rgba(9,171,192,.28); filter: blur(7px); transition: opacity .62s ease, transform .78s cubic-bezier(.16,1,.3,1), filter .62s ease; will-change: transform, opacity, filter; }
.channel-target.is-in { transform: translate3d(0,0,0) scale(1); }
.channel-target .sv-wordmark { font-size: 23px; }
.channel-target small { font-size: 11px; font-weight: 600; letter-spacing: .04em; }

.personalizer-section { padding: 130px max(28px, calc((100vw - var(--max)) / 2)) 160px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(28,25,54,.2), transparent 23%); }
.personalizer-intro { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 80px; margin-bottom: 65px; }
.personalizer-intro > p { margin: 0 0 7px; font-size: 16px; }
.personalizer-workspace { display: grid; grid-template-columns: minmax(340px, .76fr) minmax(500px, 1.24fr); min-height: 760px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: #131120; box-shadow: 0 40px 100px rgba(0,0,0,.3); }
.config-panel { padding: 34px; border-right: 1px solid var(--line); background: rgba(255,255,255,.025); }
.config-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.config-heading > span { color: var(--cyan-bright); font: 700 12px/1 Space Grotesk; letter-spacing: .14em; }
.config-heading button { padding: 5px; color: #8e90a2; border: 0; background: none; font-size: 12px; cursor: pointer; }
.config-heading button:hover { color: white; }
.field-label { display: block; margin: 23px 0 9px; color: #e4e5ec; font-size: 12px; font-weight: 700; }
.text-field, .select-wrap { position: relative; }
.text-field input, .select-wrap select { width: 100%; height: 51px; padding: 0 52px 0 15px; color: white; border: 1px solid rgba(255,255,255,.13); outline: 0; border-radius: 9px; background: #1a182a; font-size: 14px; transition: border .2s, box-shadow .2s; }
.text-field input:focus, .select-wrap select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(9,171,192,.12); }
.text-field > span { position: absolute; top: 17px; right: 15px; color: #77798b; font-size: 10px; }
.field-help { display: block; margin-top: 7px; color: #737688; font-size: 10px; }
.select-wrap select { appearance: none; padding-right: 40px; }
.select-wrap svg { position: absolute; right: 14px; top: 16px; width: 18px; color: #8a8c9b; pointer-events: none; }
.upload-zone { min-height: 94px; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed rgba(255,255,255,.2); border-radius: 11px; background: rgba(255,255,255,.02); cursor: pointer; transition: .2s ease; }
.upload-zone:hover, .upload-zone.is-dragging { border-color: var(--cyan); background: rgba(9,171,192,.05); }
.upload-zone input { position: absolute; opacity: 0; pointer-events: none; }
.upload-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: var(--cyan); border-radius: 9px; background: rgba(9,171,192,.1); }
.upload-icon svg { width: 20px; }
.upload-zone > span:nth-child(3) { display: grid; gap: 3px; }
.upload-zone strong { font-size: 12px; }
.upload-zone small { color: #7e8091; font-size: 9px; }
.upload-zone b { margin-left: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 9px; white-space: nowrap; }
.color-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.color-controls label { display: flex; align-items: center; gap: 11px; min-height: 55px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #1a182a; cursor: pointer; }
.color-controls input { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: none; cursor: pointer; }
.color-controls input::-webkit-color-swatch-wrapper { padding: 0; }
.color-controls input::-webkit-color-swatch { border: 0; border-radius: 7px; }
.color-controls label span { display: grid; gap: 2px; }
.color-controls small { color: #818394; font-size: 8px; }
.color-controls b { font-size: 10px; letter-spacing: .04em; }
.preset-row { display: flex; gap: 8px; margin-top: 10px; }
.preset-row button { width: 34px; height: 25px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; }
.preset-row i { display: block; width: 100%; height: 100%; border-radius: 4px; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); }
.config-submit { width: 100%; margin-top: 27px; border: 0; }
.privacy-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; color: #707385; font-size: 9px; }
.privacy-note svg { width: 13px; }

.preview-stage { --club-primary: #1c1936; --club-accent: #09abc0; position: relative; min-height: 760px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--club-accent) 22%, transparent), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--club-primary) 78%, #06050d), #090812); transition: background .35s ease; }
.preview-stage::before { content: ''; position: absolute; inset: 0; opacity: .09; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at center, black, transparent 75%); }
.preview-glow { position: absolute; width: 420px; height: 420px; border: 1px solid color-mix(in srgb, var(--club-accent) 40%, transparent); border-radius: 50%; box-shadow: 0 0 90px color-mix(in srgb, var(--club-accent) 16%, transparent); transition: .35s ease; }
.preview-meta { position: absolute; z-index: 8; top: 24px; left: 27px; right: 27px; display: flex; justify-content: space-between; align-items: center; }
.preview-meta > span { color: #c7c8d2; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.preview-meta > span i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #4ee38a; box-shadow: 0 0 10px #4ee38a; }
.device-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: rgba(9,8,18,.65); }
.device-switch button { width: 31px; height: 28px; display: grid; place-items: center; color: #7f8293; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.device-switch button.is-active { color: white; background: rgba(255,255,255,.11); }
.device-switch svg { width: 15px; height: 15px; }
.preview-device-wrap { position: relative; z-index: 3; padding-top: 35px; transition: .35s ease; }
.custom-phone .phone-frame { width: 283px; }
.custom-phone .phone-screen { height: 592px; background: #f4f3f6; }
.custom-statusbar { height: 31px; display: flex; justify-content: space-between; align-items: end; padding: 0 18px 5px; color: white; background: var(--club-primary); font-size: 7px; transition: background .3s ease; }
.custom-app-header { min-height: 73px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 15px 12px; color: white; background: var(--club-primary); transition: background .3s ease; }
.crest { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.34); border-radius: 11px; color: #071113; background: var(--club-accent); font: 800 11px/1 Space Grotesk; transition: background .3s ease, color .3s ease; }
.crest img, .app-icon img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.custom-app-header > div:nth-child(2) { display: grid; gap: 2px; }
.custom-app-header small { color: color-mix(in srgb, var(--club-accent) 80%, white); font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.custom-app-header strong { max-width: 154px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11px/1.2 Space Grotesk; }
.custom-app-header > button { width: 30px; height: 30px; display: grid; align-content: center; gap: 4px; padding: 7px; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); }
.custom-app-header > button i { display: block; width: 100%; height: 1px; background: white; }
.preview-page { display: none; height: 418px; padding: 16px 14px 68px; overflow: hidden; }
.preview-page.is-active { display: block; animation: pageIn .3s ease; }
.custom-welcome { display: grid; gap: 2px; }
.custom-welcome small { color: color-mix(in srgb, var(--club-accent) 76%, #222); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.custom-welcome strong { color: #17151d; font: 700 18px/1.2 Space Grotesk; }
.custom-match-card { overflow: hidden; margin-top: 11px; color: white; border-radius: 15px; background: linear-gradient(135deg, var(--club-primary), color-mix(in srgb, var(--club-primary) 70%, #4d4770)); box-shadow: 0 14px 30px color-mix(in srgb, var(--club-primary) 28%, transparent); transition: background .3s ease; }
.custom-countdown { height: 35px; display: flex; align-items: center; justify-content: center; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.11); }
.custom-countdown strong { color: var(--club-accent); font: 700 12px/1 Space Grotesk; }
.custom-countdown span { margin-right: 4px; color: #aaa8b6; font-size: 5px; }
.custom-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 13px 10px 9px; }
.custom-teams > div { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.small-crest, .opponent-crest { width: 44px; height: 44px; border-radius: 12px; }
.opponent-crest { display: grid; place-items: center; color: white; background: #a51f36; font: 800 13px/1 Space Grotesk; }
.custom-teams small { width: 100%; overflow: hidden; text-overflow: ellipsis; color: #efeff3; text-align: center; white-space: nowrap; font-size: 6px; font-weight: 700; }
.custom-teams > b { color: #898696; font-size: 8px; }
.custom-match-info { display: flex; justify-content: space-between; padding: 7px 12px; color: #b7b5c2; border-top: 1px solid rgba(255,255,255,.09); font-size: 6px; font-weight: 700; }
.custom-match-card > button { width: calc(100% - 20px); margin: 3px 10px 10px; padding: 8px 9px; display: flex; justify-content: space-between; color: color-mix(in srgb, var(--club-primary) 88%, #000); border: 0; border-radius: 7px; background: var(--club-accent); font-size: 7px; font-weight: 800; cursor: pointer; transition: background .3s ease; }
.custom-module-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.custom-module-row button { min-height: 77px; display: grid; align-content: end; gap: 2px; padding: 10px; text-align: left; border: 1px solid #e2e1e6; border-radius: 12px; background: white; cursor: pointer; }
.custom-module-row span { color: color-mix(in srgb, var(--club-accent) 75%, #222); font-size: 6px; font-weight: 800; }
.custom-module-row strong { color: #23212a; font-size: 8px; }
.custom-module-row small { color: #92909a; font-size: 6px; }
.live-score { padding: 13px; color: white; border-radius: 13px; background: var(--club-primary); }
.live-score small { display: block; color: var(--club-accent); font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.live-score small i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #ff5368; }
.live-score > strong { display: block; margin-top: 9px; font: 600 9px/1 Space Grotesk; }
.live-score > strong b { color: var(--club-accent); font-size: 17px; }
.live-score em { display: block; margin-top: 4px; color: #a9a6b4; font-size: 7px; font-style: normal; }
.chat-list { display: grid; gap: 10px; margin-top: 14px; }
.chat-list > div { display: flex; align-items: end; gap: 7px; }
.chat-list > div > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; color: white; border-radius: 50%; background: #6a667a; font-size: 6px; font-weight: 700; }
.chat-list p { max-width: 182px; margin: 0; padding: 9px 10px; display: grid; gap: 2px; color: #38363e; border-radius: 11px 11px 11px 3px; background: white; box-shadow: 0 3px 10px rgba(0,0,0,.07); font-size: 7px; }
.chat-list p b { font-size: 6px; }
.chat-list .own { justify-content: flex-end; }
.chat-list .own p { color: white; border-radius: 11px 11px 3px 11px; background: var(--club-primary); }
.chat-input { position: absolute; left: 14px; right: 14px; bottom: 66px; min-height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 5px 5px 5px 11px; color: #9997a1; border: 1px solid #dfdee3; border-radius: 20px; background: white; font-size: 7px; }
.chat-input button { width: 27px; height: 27px; color: color-mix(in srgb, var(--club-primary) 90%, #000); border: 0; border-radius: 50%; background: var(--club-accent); }
.community-heading small { color: color-mix(in srgb, var(--club-accent) 72%, #222); font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.community-heading strong { display: block; margin-top: 3px; color: #211f27; font: 700 18px/1.2 Space Grotesk; }
.community-heading p { margin: 5px 0 0; color: #8d8b95; font-size: 7px; }
.player-list { display: grid; gap: 7px; margin-top: 14px; }
.player-list button { display: grid; grid-template-columns: 35px 1fr; gap: 2px 9px; align-items: center; padding: 8px; color: #24212b; text-align: left; border: 1px solid #e1e0e5; border-radius: 10px; background: white; }
.player-list span { grid-row: 1 / 3; width: 35px; height: 35px; display: grid; place-items: center; color: color-mix(in srgb, var(--club-primary) 92%, black); border-radius: 9px; background: var(--club-accent); font: 700 11px/1 Space Grotesk; }
.player-list b { font-size: 8px; }
.player-list small { color: #9896a0; font-size: 6px; }
.custom-bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 64px; display: grid; grid-template-columns: repeat(3,1fr); padding: 5px 22px 8px; border-top: 1px solid #e0dfe4; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); }
.custom-bottom-nav button { display: grid; justify-items: center; align-content: center; gap: 3px; color: #a2a0a9; border: 0; background: transparent; cursor: pointer; }
.custom-bottom-nav button.is-active { color: color-mix(in srgb, var(--club-primary) 90%, #000); }
.custom-bottom-nav svg { width: 16px; height: 16px; }
.custom-bottom-nav small { font-size: 6px; }
.custom-bottom-nav button.is-active::after { content: ''; width: 16px; height: 2px; border-radius: 2px; background: var(--club-accent); }
.app-icon-view { position: relative; z-index: 3; width: min(460px, 80%); }
.desktop-wallpaper { min-height: 330px; display: grid; justify-items: center; align-content: center; padding: 40px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: linear-gradient(145deg, color-mix(in srgb, var(--club-primary) 86%, #000), #07060c); box-shadow: 0 40px 80px rgba(0,0,0,.35); }
.app-icon { width: 108px; height: 108px; display: grid; place-items: center; overflow: hidden; color: color-mix(in srgb, var(--club-primary) 90%, #000); border-radius: 24px; background: var(--club-accent); box-shadow: 0 18px 45px color-mix(in srgb, var(--club-accent) 25%, transparent); font: 800 24px/1 Space Grotesk; }
.desktop-wallpaper strong { margin-top: 18px; font: 700 21px/1.2 Space Grotesk; }
.desktop-wallpaper small { margin-top: 7px; color: #aaaabb; text-align: center; }
.preview-stage.result-pulse .phone { animation: resultPulse .7s ease; }

.closing-section { position: relative; min-height: 620px; display: grid; justify-items: center; align-content: center; padding: 120px 28px; overflow: hidden; text-align: center; border-top: 1px solid var(--line); }
.closing-section .eyebrow { justify-content: center; }
.closing-section h2 { max-width: 980px; }
.closing-section > p:not(.eyebrow) { max-width: 690px; margin: 28px 0 31px; color: var(--muted); font-size: 17px; }
.closing-orbit { position: absolute; z-index: -1; width: 760px; height: 760px; border: 1px solid rgba(9,171,192,.16); border-radius: 50%; box-shadow: 0 0 120px rgba(9,171,192,.08), inset 0 0 120px rgba(118,104,255,.05); }
footer { min-height: 105px; display: flex; align-items: center; gap: 28px; padding: 0 max(28px, calc((100vw - var(--max)) / 2)); border-top: 1px solid var(--line); color: #7e8091; }
footer p { margin-left: auto; font-size: 11px; }
footer > a:last-child { color: #c7c8d3; font-size: 11px; font-weight: 600; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes signalLoop { to { transform: translateX(-25%); } }
@keyframes pageIn { from { opacity: 0; transform: translateX(8px); } }
@keyframes resultPulse { 50% { transform: scale(1.025) rotate(-1deg); } }
@keyframes heroLevitate { 0%,100% { transform: translateY(0) rotate(.2deg); } 50% { transform: translateY(-12px) rotate(-.35deg); } }
@keyframes auroraDrift { 0% { transform: translate3d(-4%,3%,0) rotate(-7deg) scale(.94); } 50% { transform: translate3d(7%,-5%,0) rotate(8deg) scale(1.05); } 100% { transform: translate3d(-2%,7%,0) rotate(2deg) scale(.98); } }
@keyframes hintNudge { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(4px,3px,0); } }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr minmax(330px,.7fr); gap: 32px; }
  .nav-links { display: none; }
  .hero-visual { min-height: 620px; transform: scale(.92); }
  .value-section { gap: 45px; }
  .personalizer-workspace { grid-template-columns: 390px 1fr; }
}

@media (max-width: 820px) {
  :root { --header: 70px; }
  .site-header { padding-inline: 20px; }
  .site-header .button { margin-left: auto; font-size: 11px; min-height: 38px; padding-inline: 12px; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding: 120px 22px 70px; gap: 30px; }
  .hero-copy { max-width: 680px; }
  h1 { font-size: clamp(52px, 12vw, 82px); }
  .hero-visual { min-height: 630px; transform: none; }
  .tag-live { left: 5%; }
  .tag-pwa { right: 5%; }
  .tag-mvp { right: 3%; }
  .value-section { min-height: auto; grid-template-columns: 1fr; padding: 120px 22px; }
  .channel-stack { width: min(570px, 100%); margin: 0 auto; }
  .personalizer-section { padding: 105px 22px 120px; }
  .personalizer-intro { grid-template-columns: 1fr; gap: 25px; }
  .personalizer-workspace { grid-template-columns: 1fr; }
  .config-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .preview-stage { min-height: 720px; }
  footer { flex-wrap: wrap; padding-block: 25px; }
  footer p { order: 3; width: 100%; margin: 0; }
  footer > a:last-child { margin-left: auto; }
}

@media (max-width: 560px) {
  .menu-brand-logo { width: 126px; }
  .site-header .button { padding-inline: 11px; }
  .hero { padding-top: 110px; }
  .eyebrow { margin-bottom: 17px; font-size: 10px; }
  h1 { font-size: clamp(46px, 14.5vw, 68px); }
  h2 { font-size: clamp(39px, 11.5vw, 58px); }
  .audience-switch { grid-template-columns: 1fr; margin-top: 30px; }
  .audience-button { min-height: 58px; }
  .hero-lead { font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 14px; }
  .hero-actions .button { width: 100%; }
  .text-link { text-align: center; }
  .hero-proof { align-items: flex-start; }
  .hero-visual { min-height: 585px; margin-inline: -10px; }
  .orbit-one { width: 410px; height: 410px; }
  .orbit-two { width: 320px; height: 320px; }
  .hero-phone { transform: scale(.91) rotate(2deg); }
  .hero-phone:hover { transform: scale(.91) rotate(0deg); }
  .floating-tag { font-size: 8px; }
  .tag-live { left: 0; top: 28%; }
  .tag-pwa { right: 0; top: 16%; }
  .tag-mvp { right: -2%; bottom: 24%; }
  .visual-caption { right: 2%; bottom: -1%; }
  .value-section { padding-block: 100px; gap: 50px; }
  .section-index { top: 75px; font-size: 100px; }
  .value-copy > p:last-child, .personalizer-intro > p, .closing-section > p:not(.eyebrow) { font-size: 15px; }
  .channel-stack { min-height: 390px; }
  .channel-card { width: 88%; }
  .c-two { right: 0; }
  .channel-target { width: 240px; right: 0; }
  .personalizer-section { padding-inline: 14px; }
  .personalizer-intro { padding-inline: 8px; }
  .personalizer-workspace { border-radius: 16px; }
  .config-panel { padding: 25px 18px; }
  .upload-zone { align-items: flex-start; flex-wrap: wrap; }
  .upload-zone b { margin-left: 50px; }
  .preview-stage { min-height: 675px; }
  .preview-meta { left: 17px; right: 17px; }
  .preview-device-wrap { transform: scale(.92); }
  .app-icon-view { width: 88%; }
  .closing-section { min-height: 570px; padding-inline: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Full product story */
.feature-story { padding-top: 135px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(9,171,192,.045), transparent 18%); }
.feature-heading { max-width: var(--max); margin: 0 auto 72px; padding: 0 28px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 80px; }
.feature-heading > p { max-width: 550px; margin: 0 0 8px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.feature-scroll { position: relative; height: 285vh; }
.feature-sticky { position: sticky; top: 70px; height: calc(100vh - 70px); min-height: 650px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-block: 1px solid var(--line); background: #0a0912; }
.feature-progress { position: relative; z-index: 4; height: 66px; display: grid; grid-template-columns: 70px 1fr 135px; align-items: center; gap: 20px; padding: 0 max(28px, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid var(--line); }
.feature-progress > span { color: #707385; font: 600 11px/1 Space Grotesk; }
.feature-progress > span b { color: var(--cyan-bright); font-size: 16px; }
.feature-progress > div { height: 2px; overflow: hidden; background: rgba(255,255,255,.1); }
.feature-progress > div i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 14px var(--cyan); transition: width .12s linear; }
.feature-progress > strong { color: #d2d3dd; text-align: right; font: 700 10px/1 Space Grotesk; letter-spacing: .1em; }
.feature-viewport { min-height: 0; overflow: hidden; }
.mobile-swipe-hint { display: none; }
.feature-track { width: max-content; height: 100%; display: flex; gap: clamp(16px,1.5vw,25px); padding-inline: 5vw; will-change: transform; }
.feature-panel { --feature-panel-opacity: .4; --feature-canvas-scale: .92; --feature-canvas-opacity: .54; --feature-canvas-saturate: .72; width: 90vw; height: 100%; flex: 0 0 90vw; display: grid; grid-template-columns: minmax(340px,.78fr) minmax(460px,1.22fr); align-items: center; gap: clamp(34px,4vw,62px); padding: 36px max(28px, calc((90vw - var(--max)) / 2)); opacity: var(--feature-panel-opacity); transition: opacity .32s ease; }
.feature-copy { max-width: 490px; }
.status-badge { display: inline-flex; align-items: center; min-height: 25px; margin-bottom: 23px; padding: 0 9px; border: 1px solid; border-radius: 20px; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.status-badge.available { color: #5be99a; border-color: rgba(91,233,154,.34); background: rgba(91,233,154,.07); }
.status-badge.available::before { content: ''; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #5be99a; box-shadow: 0 0 9px #5be99a; }
.status-badge.conditional { color: #ffc66d; border-color: rgba(255,198,109,.35); background: rgba(255,198,109,.07); }
.status-badge.optional { color: #aaa1ff; border-color: rgba(170,161,255,.35); background: rgba(170,161,255,.07); }
.feature-kicker { margin: 0 0 12px; color: var(--cyan-bright); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.feature-copy h3 { margin: 0; max-width: 470px; font: 700 clamp(34px,3.5vw,54px)/1.02 Space Grotesk; letter-spacing: -.045em; }
.feature-copy > p:not(.feature-kicker) { margin: 22px 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.feature-copy ul, .sponsor-copy ul, .price-card ul { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.feature-copy li, .sponsor-copy li, .price-card li { position: relative; padding-left: 19px; color: #d0d1db; font-size: 12px; }
.feature-copy li::before, .sponsor-copy li::before, .price-card li::before { content: ''; position: absolute; top: 8px; left: 0; width: 8px; height: 1px; background: var(--cyan); }
.feature-canvas { position: relative; width: min(100%, 670px); min-height: 470px; display: grid; align-content: center; justify-items: center; overflow: hidden; transform: scale(var(--feature-canvas-scale)); opacity: var(--feature-canvas-opacity); filter: saturate(var(--feature-canvas-saturate)); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: radial-gradient(circle at 65% 20%, rgba(9,171,192,.14), transparent 40%), #12101f; box-shadow: 0 28px 75px rgba(0,0,0,.3); transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .35s ease, filter .35s ease, border-color .35s ease; will-change: transform; }
.feature-panel.is-feature-active .feature-canvas { border-color: rgba(34,211,231,.27); box-shadow: 0 34px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(34,211,231,.05); }
.feature-canvas::before { content: ''; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px); background-size: 46px 46px; }
.feature-app-card { position: relative; z-index: 1; width: 330px; min-height: 260px; padding: 28px; border-radius: 20px; background: white; color: #17151f; box-shadow: 0 28px 65px rgba(0,0,0,.35); transform: rotate(-3deg); }
.feature-app-card.dark { color: white; background: linear-gradient(140deg,#24203e,#141221); }
.feature-app-card small { color: var(--cyan-bright); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.feature-app-card > strong { display: block; margin-top: 5px; font: 700 27px/1.1 Space Grotesk; }
.score-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 11px; margin: 35px 0; text-align: center; }
.score-line span { display: grid; place-items: center; min-height: 58px; padding: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; font-size: 9px; font-weight: 700; }
.score-line span:first-child { color: #061012; background: var(--cyan-bright); }
.score-line b { color: #777387; font-size: 10px; }
.feature-app-card button { width: 100%; padding: 12px; color: #061012; border: 0; border-radius: 9px; background: var(--cyan-bright); font-size: 9px; font-weight: 800; }
.float-card { position: absolute; right: 9%; bottom: 10%; width: 190px; min-height: 80px; padding: 20px; transform: rotate(5deg); }
.float-card > strong { font-size: 19px; }
.schedule-month { position: relative; z-index: 1; width: 76%; display: flex; align-items: end; justify-content: space-between; margin-bottom: 16px; }
.schedule-month small { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.schedule-month strong { font: 700 29px/1 Space Grotesk; }
.schedule-game { position: relative; z-index: 1; width: 76%; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 13px; margin: 5px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.05); }
.schedule-game.featured { border-color: rgba(9,171,192,.45); background: rgba(9,171,192,.09); transform: translateX(18px); }
.schedule-game i { width: 42px; height: 42px; display: grid; place-items: center; color: #071113; border-radius: 9px; background: var(--cyan-bright); font: 700 15px/1 Space Grotesk; font-style: normal; }
.schedule-game span { display: grid; gap: 3px; }
.schedule-game small { color: #8d8e9d; font-size: 7px; }
.schedule-game strong { font-size: 11px; }
.schedule-game > b { font-size: 11px; }
.canvas-ticket { background: radial-gradient(circle at 20% 80%, rgba(118,104,255,.2), transparent 40%),#11101c; }
.ticket-card { position: relative; z-index: 1; width: 360px; min-height: 245px; overflow: hidden; padding: 27px; color: #11111a; border-radius: 21px; background: linear-gradient(125deg,#fff,#d9fbff); box-shadow: 0 30px 70px rgba(0,0,0,.35); transform: rotate(-5deg); }
.ticket-card > span { color: #057f90; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.ticket-card > div { margin-top: 28px; }
.ticket-card small { display: block; color: #7c7b84; font-size: 8px; }
.ticket-card strong { display: block; margin-top: 4px; font: 700 25px/1.08 Space Grotesk; }
.ticket-card footer { min-height: 0; margin-top: 29px; padding: 14px 0 0; display: flex; align-items: center; gap: 12px; color: #16151c; border-top-color: rgba(0,0,0,.12); }
.ticket-card footer b, .ticket-card footer em { font-size: 9px; font-style: normal; }
.ticket-card footer i { height: 13px; border-left: 1px solid #aaa; }
.tap-hint { position: absolute; z-index: 2; right: 12%; bottom: 16%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: white; border: 1px solid var(--line); border-radius: 10px; background: rgba(13,12,24,.82); backdrop-filter: blur(10px); font-size: 10px; font-weight: 700; }
.tap-hint i { width: 24px; height: 24px; border: 2px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 0 7px rgba(9,171,192,.1); }
.mini-score { position: relative; z-index: 1; width: 74%; display: flex; align-items: center; padding: 17px; color: white; border-radius: 14px; background: #24203e; }
.mini-score span { color: var(--cyan-bright); font-size: 8px; font-weight: 800; }
.mini-score span i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #ff4d67; }
.mini-score strong { margin-left: auto; font: 700 28px/1 Space Grotesk; }
.mini-score small { margin-left: 13px; color: #92909e; }
.message { position: relative; z-index: 1; width: 68%; display: flex; align-items: end; gap: 9px; margin: 10px auto 0; }
.message b { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: white; border-radius: 50%; background: #514d62; font-size: 8px; }
.message p { margin: 0; padding: 12px 14px; color: #23212a; border-radius: 14px 14px 14px 3px; background: white; font-size: 10px; }
.message.own { justify-content: flex-end; }
.message.own p { color: white; border-radius: 14px 14px 3px 14px; background: #2b2747; }
.m-two { transform: translateX(28px); }
.m-three { transform: translateX(-13px); }
.canvas-typer { color: #181620; }
.typer-heading { position: relative; z-index: 1; width: 70%; padding: 23px; border-radius: 16px 16px 0 0; background: white; }
.typer-heading small { color: #078fa2; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.typer-heading strong { display: block; font: 700 27px/1.2 Space Grotesk; }
.typer-heading span { display: block; margin-top: 7px; color: #898791; font-size: 9px; }
.typer-score { position: relative; z-index: 1; width: 70%; display: grid; grid-template-columns: 38px 1fr auto 1fr 38px; align-items: center; gap: 10px; padding: 26px 22px; background: #f0eff3; }
.typer-score button { width: 36px; height: 36px; border: 1px solid #d7d5dc; border-radius: 8px; background: white; }
.typer-score strong { text-align: center; font: 700 30px/1 Space Grotesk; }
.typer-score b { color: #9b99a2; }
.typer-submit { position: relative; z-index: 1; width: 70%; padding: 13px; color: #061012; border: 0; border-radius: 0 0 12px 12px; background: var(--cyan-bright); font-size: 9px; font-weight: 800; }
.mvp-title, .mvp-player { position: relative; z-index: 1; width: 74%; }
.mvp-title { margin-bottom: 12px; }
.mvp-title small { color: var(--cyan); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.mvp-title strong { display: block; font: 700 29px/1.2 Space Grotesk; }
.mvp-player { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 11px; margin: 6px 0; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.05); }
.mvp-player.active { border-color: rgba(9,171,192,.5); background: rgba(9,171,192,.1); transform: translateX(18px); }
.mvp-player > i { width: 42px; height: 42px; display: grid; place-items: center; color: #071113; border-radius: 9px; background: var(--cyan-bright); font: 700 13px/1 Space Grotesk; font-style: normal; }
.mvp-player span { display: grid; gap: 3px; }
.mvp-player span strong { font-size: 11px; }
.mvp-player span small { color: #858696; font-size: 8px; }
.mvp-player > b { color: var(--cyan-bright); font-size: 13px; }
.canvas-notify { align-content: start; padding-top: 68px; background: radial-gradient(circle at 50% 110%, rgba(9,171,192,.25), transparent 55%),linear-gradient(150deg,#27243d,#0c0b14); }
.lock-time { position: relative; z-index: 1; display: grid; justify-items: center; margin-bottom: 36px; font: 500 57px/1 Space Grotesk; }
.lock-time small { margin-top: 8px; font: 700 8px/1 Inter; letter-spacing: .12em; }
.notification { position: relative; z-index: 1; width: 76%; display: flex; gap: 11px; padding: 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: rgba(255,255,255,.11); backdrop-filter: blur(15px); box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.notification.second { margin-top: 9px; opacity: .68; transform: scale(.96); }
.notification p { display: grid; gap: 2px; margin: 0; }
.notification small { color: #a9a7b5; font-size: 6px; letter-spacing: .08em; }
.notification strong { font-size: 10px; }
.notification em { color: #bebdca; font-size: 8px; font-style: normal; }
.gallery-instruction { margin: 0; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 13px; color: #6e7081; font-size: 8px; letter-spacing: .11em; }
.gallery-instruction span { color: var(--cyan); font-weight: 800; }
.gallery-instruction i { width: 50px; height: 1px; background: var(--line); }

/* Match center */
.match-center { padding: 150px max(28px, calc((100vw - var(--max)) / 2)); background: linear-gradient(180deg,#0d0c18,#131025 55%,#0d0c18); }
.match-center-heading { position: sticky; top: max(110px,calc(50vh - 195px)); align-self: start; max-width: 355px; }
.match-center-heading h2 { font-size: clamp(42px,4.2vw,64px); }
.match-center-heading > p:last-child { max-width: 640px; margin: 27px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.match-center-layout { display: grid; grid-template-columns: minmax(250px,.92fr) 340px minmax(330px,1fr); align-items: start; gap: clamp(34px,4vw,58px); }
.match-story-phone { position: sticky; top: max(90px,calc(50vh - 305px)); align-self: start; width: 340px; min-height: 610px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 38px; color: #17151d; background: #f4f3f6; box-shadow: 0 50px 100px rgba(0,0,0,.42); }
.match-story-phone::before { content: ''; position: absolute; z-index: 5; top: 10px; left: 50%; width: 82px; height: 20px; transform: translateX(-50%); border-radius: 20px; background: #08070d; }
.story-phone-top { min-height: 110px; display: grid; grid-template-columns: auto 1fr; align-content: end; gap: 3px 10px; padding: 35px 21px 18px; color: white; background: #24203e; }
.story-club-mark { grid-row: 1/3; width: 43px; height: 43px; display: grid; place-items: center; color: #071113; border-radius: 11px; background: var(--cyan-bright); font: 800 11px/1 Space Grotesk; }
.story-phone-top strong { align-self: end; font: 700 12px/1 Space Grotesk; }
.story-phone-top small { color: var(--cyan-bright); font-size: 7px; letter-spacing: .1em; }
.phase-screen { display: none; min-height: 427px; padding: 30px 22px 90px; }
.phase-screen.is-active { display: block; animation: pageIn .35s ease; }
.phase-screen > small { color: #078da0; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.phase-screen > h3 { margin: 5px 0 0; font: 700 30px/1.1 Space Grotesk; letter-spacing: -.035em; }
.phase-countdown { display: grid; grid-template-columns: repeat(6,auto); align-items: end; gap: 3px; margin: 45px 0 32px; padding: 24px 12px; color: white; border-radius: 15px; background: #24203e; }
.phase-countdown b { color: var(--cyan-bright); text-align: right; font: 700 22px/1 Space Grotesk; }
.phase-countdown span { color: #aaa8b5; font-size: 6px; }
.phase-actions { display: grid; gap: 8px; }
.phase-screen button { padding: 12px; border: 0; border-radius: 8px; font-size: 8px; font-weight: 800; }
.phase-actions button:first-child, .phase-screen[data-phase-screen="during"] > button, .phase-screen[data-phase-screen="after"] > button { color: #071113; background: var(--cyan-bright); }
.phase-actions button:last-child { color: white; background: #24203e; }
.phase-screen[data-phase-screen="during"] { color: white; background: #171527; }
.phase-screen[data-phase-screen="during"] > small { color: #ff6d7f; }
.phase-screen[data-phase-screen="during"] > small i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #ff5269; }
.phase-screen[data-phase-screen="during"] > h3 { margin-top: 25px; color: var(--cyan-bright); font-size: 53px; }
.phase-screen[data-phase-screen="during"] > h3 span { color: #7f7b8e; }
.phase-screen[data-phase-screen="during"] > em { color: #9f9dac; font-size: 9px; font-style: normal; }
.phase-chat { display: grid; gap: 8px; margin: 35px 0 24px; }
.phase-chat p { width: fit-content; max-width: 80%; margin: 0; padding: 11px 12px; color: #23212a; border-radius: 12px 12px 12px 3px; background: white; font-size: 8px; }
.phase-chat p.own { margin-left: auto; color: white; border-radius: 12px 12px 3px 12px; background: #34304f; }
.phase-screen[data-phase-screen="after"] > p { color: #8c8a95; font-size: 10px; }
.phase-player { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 11px; margin: 32px 0 15px; padding: 11px; border: 1px solid #dcdae1; border-radius: 12px; background: white; }
.phase-player > b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: var(--cyan-bright); }
.phase-player span { display: grid; gap: 3px; }
.phase-player span strong { font-size: 9px; }
.phase-player span small { color: #92909b; font-size: 7px; }
.phase-player > i { font-style: normal; }
.phase-tabs { position: absolute; left: 15px; right: 15px; bottom: 15px; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 4px; border-radius: 11px; background: #e6e4e9; }
.phase-tabs button { padding: 10px 4px; color: #898791; border: 0; border-radius: 8px; background: transparent; font-size: 8px; font-weight: 700; cursor: pointer; }
.phase-tabs button.is-active { color: white; background: #24203e; }
.match-steps { display: grid; }
.match-step { min-height: 78vh; display: grid; align-content: center; padding: 70px 8px 70px 42px; opacity: .12; transform: translate3d(0,62px,0) scale(.965); filter: blur(8px); border-left: 1px solid var(--line); outline: 0; transition: border-color .55s ease, opacity .55s ease, transform .72s cubic-bezier(.16,1,.3,1), filter .55s ease; will-change: transform, opacity, filter; }
.match-step.is-active { border-color: var(--cyan); opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
.match-step.is-past { opacity: .08; transform: translate3d(0,-62px,0) scale(.965); filter: blur(9px); }
.match-step:focus-visible { border-color: var(--cyan-bright); box-shadow: inset 3px 0 0 var(--cyan-bright); }
.match-step > span { color: var(--cyan); font: 700 45px/1 Space Grotesk; opacity: .28; }
.match-step > small { margin-top: 24px; color: var(--cyan-bright); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.match-step h3 { margin: 7px 0 14px; font: 700 clamp(34px,4vw,54px)/1.05 Space Grotesk; letter-spacing: -.045em; }
.match-step p { max-width: 600px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }

/* Club admin */
.admin-section { padding: 150px max(28px, calc((100vw - var(--max)) / 2)); border-top: 1px solid var(--line); }
.admin-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px; }
.admin-heading > p { margin: 0 0 7px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.admin-demo { position: relative; min-height: 610px; margin-top: 70px; display: grid; grid-template-columns: 240px 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; color: #20202a; background: #f2f2f5; box-shadow: 0 40px 90px rgba(0,0,0,.3); }
.admin-sidebar { display: flex; flex-direction: column; gap: 7px; padding: 29px 18px; color: white; background: #171527; }
.admin-logo { display: grid; gap: 8px; margin: 0 9px 17px; }
.admin-logo .sv-wordmark { font-size: 15px; }
.admin-logo .sv-symbol { width: 29px; height: 27px; }
.admin-logo .sv-symbol > i { width: 23px; height: 8px; }
.admin-logo > small { margin-left: 39px; color: #777489; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.admin-click-hint { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 3px; min-height: 38px; margin: -4px 8px 8px; color: #a9a6ba; }
.admin-click-hint svg { width: 40px; height: 29px; color: var(--cyan-bright); animation: hintNudge 2.3s ease-in-out infinite; }
.admin-click-hint b { font-size: 9px; font-weight: 600; line-height: 1.25; }
.admin-sidebar button { min-height: 46px; padding: 14px 16px; color: #aaa7b9; text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.admin-sidebar button:hover { color: white; transform: translateX(3px); background: rgba(255,255,255,.055); }
.admin-sidebar button.is-active { color: #061315; border-color: rgba(93,240,247,.5); background: linear-gradient(105deg,var(--cyan-bright),#70ecf2); box-shadow: 0 10px 26px rgba(9,171,192,.22); }
.admin-workspace { padding: 27px 30px; }
.admin-top { display: flex; justify-content: space-between; align-items: center; }
.admin-top > span { display: grid; gap: 4px; }
.admin-top small { color: #95939e; font-size: 7px; font-weight: 700; letter-spacing: .1em; }
.admin-top strong { font: 700 25px/1 Space Grotesk; }
.admin-top > b { display: flex; align-items: center; gap: 6px; padding: 8px 10px; color: #6e6c77; border: 1px solid #dcdae0; border-radius: 8px; background: white; font-size: 8px; }
.admin-top > b i { width: 6px; height: 6px; border-radius: 50%; background: #f4ae3d; }
.admin-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 24px; }
.admin-stats article { display: grid; gap: 5px; padding: 17px; border: 1px solid #dedde2; border-radius: 11px; background: white; }
.admin-stats small { color: #93919c; font-size: 8px; }
.admin-stats strong { font: 700 18px/1 Space Grotesk; }
.admin-stats span { color: #72707b; font-size: 8px; }
.admin-editor { min-height: 260px; margin-top: 12px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; }
.admin-editor > div { display: grid; align-content: start; gap: 7px; padding: 17px; border: 1px solid #dedde2; border-radius: 11px; background: white; }
.admin-editor label { margin-top: 4px; color: #74727d; font-size: 8px; font-weight: 700; }
.admin-editor input, .admin-editor select { height: 39px; padding: 0 11px; color: #282630; border: 1px solid #dedde2; border-radius: 7px; background: #f8f8fa; font-size: 9px; }
.admin-preview-card { position: relative; overflow: hidden; color: white; background: linear-gradient(135deg,#24203e,#38315f) !important; }
.admin-preview-card::after { content: ''; position: absolute; width: 160px; height: 160px; right: -80px; bottom: -80px; border: 1px solid rgba(9,171,192,.35); border-radius: 50%; }
.admin-preview-card small { color: var(--cyan-bright); }
.admin-preview-card strong { max-width: 260px; margin-top: 30px; font: 700 24px/1.05 Space Grotesk; }
.admin-preview-card p { color: #bbb8c7; font-size: 9px; }
.admin-preview-card span { width: fit-content; margin-top: auto; padding: 7px 9px; color: #071113; border-radius: 6px; background: var(--cyan-bright); font-size: 7px; font-weight: 800; }
.admin-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; }
.admin-bottom small { color: #898792; font-size: 8px; }
.admin-bottom button { padding: 12px 15px; color: #071113; border: 0; border-radius: 8px; background: var(--cyan-bright); font-size: 8px; font-weight: 800; cursor: pointer; }
.admin-publish-toast { position: absolute; right: 24px; bottom: 74px; z-index: 5; min-width: 240px; display: flex; align-items: center; gap: 10px; padding: 13px; opacity: 0; transform: translateY(15px); color: white; border-radius: 11px; background: #171527; box-shadow: 0 18px 35px rgba(0,0,0,.3); pointer-events: none; transition: .3s ease; }
.admin-publish-toast.show { opacity: 1; transform: translateY(0); }
.admin-publish-toast > i { width: 29px; height: 29px; display: grid; place-items: center; color: #071113; border-radius: 50%; background: #55e291; font-style: normal; }
.admin-publish-toast span { display: grid; gap: 2px; }
.admin-publish-toast strong { font-size: 10px; }
.admin-publish-toast small { color: #9694a3; font-size: 7px; }
.admin-benefits { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-top: 0; }
.admin-benefits span { min-height: 76px; display: flex; align-items: center; gap: 10px; padding: 15px; color: #b9bac6; border-right: 1px solid var(--line); font-size: 10px; }
.admin-benefits span:last-child { border: 0; }
.admin-benefits b { color: var(--cyan); font: 700 11px/1 Space Grotesk; }

/* Sponsor */
.sponsor-section { max-width: var(--max); min-height: 820px; margin: 0 auto; padding: 150px 28px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; }
.sponsor-visual { position: relative; min-height: 540px; display: grid; place-items: center; }
.sponsor-visual::before { content: ''; position: absolute; width: 480px; height: 480px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; box-shadow: 0 0 100px rgba(9,171,192,.06); }
.sponsor-label { position: absolute; top: 12%; left: 2%; z-index: 3; padding: 8px 10px; color: #9c9dae; border: 1px solid var(--line); border-radius: 7px; background: #151326; font-size: 8px; letter-spacing: .1em; }
.sponsor-app-card { position: relative; z-index: 2; width: 315px; min-height: 380px; display: grid; justify-items: center; align-content: center; padding: 34px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: linear-gradient(150deg,#25213e,#12101d); box-shadow: 0 35px 80px rgba(0,0,0,.4); transform: rotate(-3deg); }
.sponsor-app-card::before { content: ''; position: absolute; width: 240px; height: 240px; right: -100px; top: -100px; border: 1px solid rgba(9,171,192,.28); border-radius: 50%; }
.sponsor-demo { position: absolute; top: 14px; right: 14px; padding: 5px 7px; color: #9d9aaa; border: 1px solid var(--line); border-radius: 5px; font-size: 6px; letter-spacing: .1em; }
.sponsor-brand-mark { width: 180px; min-height: 75px; display: grid; place-items: center; margin-bottom: 29px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; font: 700 22px/1 Space Grotesk; letter-spacing: .08em; }
.sponsor-app-card > small { color: var(--cyan-bright); font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.sponsor-app-card > strong { margin-top: 5px; font: 700 17px/1 Space Grotesk; }
.sponsor-app-card button { width: 100%; margin-top: 35px; padding: 12px; color: #061012; border: 0; border-radius: 8px; background: var(--cyan-bright); font-size: 8px; font-weight: 800; }
.sponsor-report { position: absolute; z-index: 3; right: -2%; bottom: 7%; width: 245px; display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: rgba(20,18,33,.92); box-shadow: 0 25px 55px rgba(0,0,0,.35); backdrop-filter: blur(13px); }
.sponsor-report > small { color: var(--cyan); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.sponsor-report > span { display: grid; gap: 2px; padding-top: 9px; border-top: 1px solid var(--line); }
.sponsor-report b { font-size: 9px; }
.sponsor-report em { color: #77798a; font-size: 7px; font-style: normal; }
.sponsor-copy > p:not(.eyebrow) { margin: 27px 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.sponsor-copy > p strong { color: white; }
.sponsor-copy ul { gap: 12px; }
.sponsor-copy li { font-size: 13px; }
.sponsor-note { display: flex; gap: 11px; margin-top: 28px; padding: 15px; border: 1px solid rgba(255,198,109,.2); border-radius: 10px; background: rgba(255,198,109,.04); }
.sponsor-note > i { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; color: #15121d; border-radius: 50%; background: #ffc66d; font: 700 11px/1 serif; }
.sponsor-note p { margin: 0; color: #aaa8b5; font-size: 10px; line-height: 1.6; }

/* Pilot */
.pilot-section { position: relative; min-height: 760px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; padding: 130px max(28px, calc((100vw - var(--max)) / 2)); overflow: hidden; color: #181711; background: #f4c900; }
.pilot-section::before { content: 'SOKÓŁ'; position: absolute; right: -2%; bottom: -8%; color: rgba(0,0,0,.065); font: 700 19vw/1 Space Grotesk; letter-spacing: -.08em; }
.dark-eyebrow { color: #38351f; }
.dark-eyebrow span { background: #171711; box-shadow: none; }
.pilot-copy { position: relative; z-index: 2; }
.pilot-copy h2 em { color: #181711; background: none; -webkit-text-stroke: 1px #181711; }
.pilot-copy > p:not(.eyebrow) { max-width: 590px; margin: 27px 0; color: #403c22; font-size: 16px; line-height: 1.75; }
.pilot-modules { display: flex; flex-wrap: wrap; gap: 7px; }
.pilot-modules span { padding: 7px 9px; border: 1px solid rgba(0,0,0,.2); border-radius: 20px; font-size: 7px; font-weight: 800; letter-spacing: .06em; }
.pilot-phone { position: relative; z-index: 2; width: 330px; min-height: 585px; justify-self: center; padding: 10px; border-radius: 40px; background: #111; box-shadow: 0 45px 75px rgba(55,43,0,.28); transform: rotate(4deg); }
.pilot-phone::before { content: ''; position: absolute; z-index: 5; top: 16px; left: 50%; width: 80px; height: 19px; transform: translateX(-50%); border-radius: 20px; background: #090909; }
.sokol-shield { position: absolute; z-index: 3; top: 37px; left: 27px; width: 48px; height: 58px; display: grid; place-items: center; color: #f4c900; border: 2px solid #f4c900; clip-path: polygon(50% 0,100% 18%,88% 78%,50% 100%,12% 78%,0 18%); background: #151515; font: 800 24px/1 Space Grotesk; }
.sokol-shield small { display: block; font-size: 5px; }
.pilot-screen { min-height: 565px; padding: 135px 19px 65px; overflow: hidden; color: white; border-radius: 32px; background: linear-gradient(150deg,#24231f,#10100e); }
.pilot-screen > small { color: #f4c900; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.pilot-screen > strong { display: block; margin-top: 5px; font: 700 28px/1.05 Space Grotesk; }
.pilot-screen > div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 55px 0 45px; }
.pilot-screen > div > span { width: 70px; height: 70px; display: grid; place-items: center; justify-self: center; border-radius: 17px; font: 800 25px/1 Space Grotesk; }
.sokol-mini { color: #111; background: #f4c900; }
.rival-mini { background: #a62738; }
.pilot-screen > div b { color: #77746a; }
.pilot-screen button { width: 100%; padding: 13px; color: #14130c; border: 0; border-radius: 9px; background: #f4c900; font-size: 9px; font-weight: 800; }
.pilot-phone > p { position: absolute; right: -85px; bottom: 75px; display: flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid rgba(0,0,0,.16); border-radius: 8px; background: rgba(255,255,255,.72); backdrop-filter: blur(8px); font-size: 8px; font-weight: 800; }
.pilot-phone > p i { width: 6px; height: 6px; border-radius: 50%; background: #2abf6d; box-shadow: 0 0 8px #2abf6d; }

/* Pricing and contact */
.pricing-section { padding: 150px max(28px, calc((100vw - var(--max)) / 2)); background: #0b0a13; }
.pricing-heading { max-width: 870px; }
.pricing-heading > p:last-child { max-width: 630px; margin: 27px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 65px; }
.price-card { position: relative; padding: 38px; border: 1px solid var(--line); border-radius: 19px; background: #15131f; }
.price-card.founding { border-color: rgba(9,171,192,.45); background: linear-gradient(145deg,rgba(9,171,192,.09),#161320 45%); box-shadow: 0 30px 75px rgba(9,171,192,.07); }
.price-label { color: var(--cyan-bright); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.price-card h3 { margin: 10px 0 6px; font: 700 28px/1.1 Space Grotesk; }
.price-card > p { min-height: 48px; max-width: 450px; margin: 0; color: #8d8f9f; font-size: 12px; line-height: 1.6; }
.price { display: flex; align-items: end; gap: 10px; margin-top: 30px; }
.price > strong { font: 700 69px/.84 Space Grotesk; letter-spacing: -.07em; }
.price > span { color: #a0a2b0; font-size: 10px; line-height: 1.4; }
.launch-price { display: flex; justify-content: space-between; align-items: center; margin: 29px 0; padding: 13px 0; border-block: 1px solid var(--line); }
.launch-price small { color: #7f8191; font-size: 8px; letter-spacing: .1em; }
.launch-price b { font-size: 11px; }
.price-card ul { min-height: 160px; gap: 10px; }
.price-card li { font-size: 11px; }
.price-card .button { width: 100%; margin-top: 30px; }
.founding-ribbon { position: absolute; top: 17px; right: 17px; padding: 7px 9px; color: #061012; border-radius: 20px; background: var(--cyan-bright); font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.price-footnote { display: block; margin-top: 11px; color: #6f7182; text-align: center; font-size: 8px; }
.faq { max-width: 900px; margin: 100px auto 0; }
.faq > h3 { margin: 0 0 25px; font: 700 32px/1.1 Space Grotesk; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { min-height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #e5e6ed; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: var(--cyan); font-size: 21px; font-weight: 400; transition: transform .2s ease; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { max-width: 750px; margin: -5px 0 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.contact-section { max-width: var(--max); margin: 0 auto; padding: 150px 28px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: start; }
.contact-copy { position: sticky; top: 120px; }
.contact-copy > p:not(.eyebrow) { margin: 27px 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.contact-points { display: grid; border-top: 1px solid var(--line); }
.contact-points span { display: flex; align-items: center; gap: 13px; padding: 15px 0; color: #c0c1cc; border-bottom: 1px solid var(--line); font-size: 11px; }
.contact-points b { color: var(--cyan); font: 700 10px/1 Space Grotesk; }
.sales-form { display: grid; gap: 17px; padding: 37px; border: 1px solid var(--line); border-radius: 20px; background: #15131f; }
.sales-form-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.sales-form-heading span { color: var(--cyan-bright); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.sales-form-heading small { color: #777989; font-size: 9px; }
.sales-form > label, .form-row label { display: grid; gap: 8px; color: #d2d3dc; font-size: 11px; font-weight: 600; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sales-form input:not([type="checkbox"]), .sales-form textarea { width: 100%; padding: 13px 14px; color: white; border: 1px solid rgba(255,255,255,.14); outline: 0; border-radius: 9px; background: #1c1929; font-size: 13px; resize: vertical; }
.sales-form input:focus, .sales-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(9,171,192,.1); }
.sales-form ::placeholder { color: #646676; }
.consent { grid-template-columns: auto 1fr; align-items: start; color: #8b8d9d !important; font-weight: 400 !important; line-height: 1.5; }
.consent input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--cyan); }
.sales-form .button { width: 100%; border: 0; }
.form-note { margin: -6px 0 0; color: #6f7181; text-align: center; font-size: 8px; }
.form-note a { color: var(--cyan-bright); text-decoration: underline; text-underline-offset: 2px; }
.form-status { min-height: 0; color: #66e5a0; text-align: center; font-size: 10px; }

@media (max-width: 1050px) {
  .feature-panel { grid-template-columns: .85fr 1.15fr; gap: 35px; }
  .feature-canvas { min-height: 430px; }
  .match-center-layout { grid-template-columns: 320px 1fr; gap: 55px; }
  .match-center-heading { position: static; grid-column: 1 / -1; max-width: 850px; }
  .match-center-heading h2 { font-size: clamp(43px,5.4vw,76px); }
  .match-story-phone { margin-left: 0; }
  .admin-demo { grid-template-columns: 210px 1fr; }
  .admin-sidebar { padding-inline: 14px; }
  .admin-sidebar button { padding-inline: 13px; font-size: 12px; }
  .sponsor-section { gap: 50px; }
  .sponsor-report { right: 0; }
  .contact-section { gap: 55px; }
}

@media (max-width: 820px) {
  .feature-heading, .admin-heading { grid-template-columns: 1fr; gap: 25px; }
  .feature-scroll { height: auto; }
  .feature-sticky { position: relative; top: auto; height: auto; min-height: 0; display: block; overflow: visible; }
  .feature-progress { display: none; }
  .feature-viewport { overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .feature-viewport:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
  .mobile-swipe-hint { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding: 14px 25px 0; color: #858797; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .mobile-swipe-hint span { color: var(--cyan-bright); font-size: 17px; }
  .feature-viewport::-webkit-scrollbar { display: none; }
  .feature-track { width: max-content; height: auto; gap: 14px; padding-inline: 4vw; transform: none !important; }
  .feature-panel { --feature-panel-opacity: 1; --feature-canvas-scale: 1; --feature-canvas-opacity: 1; --feature-canvas-saturate: 1; width: min(88vw,680px); min-height: 720px; flex-basis: min(88vw,680px); grid-template-columns: 1fr; gap: 35px; padding: 50px 25px; scroll-snap-align: center; }
  .feature-copy { max-width: none; }
  .feature-canvas { width: 100%; min-height: 390px; }
  .gallery-instruction { padding-block: 20px; }
  .gallery-instruction span { font-size: 0; }
  .gallery-instruction span::after { content: 'PRZESUŃ'; font-size: 8px; }
  .match-center-layout { grid-template-columns: 1fr; gap: 45px; }
  .match-center-heading { grid-column: auto; }
  .match-story-phone { position: relative; top: auto; margin: 0 auto; }
  .match-steps { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .match-step, .match-step.is-past { min-height: 0; padding: 22px 16px; opacity: .52; transform: none; filter: none; border: 1px solid var(--line); border-radius: 12px; }
  .match-step.is-active { opacity: 1; transform: none; filter: none; }
  .match-step > span { font-size: 28px; }
  .match-step > small { margin-top: 14px; }
  .match-step h3 { font-size: 22px; }
  .match-step p { font-size: 11px; }
  .admin-demo { grid-template-columns: 1fr; }
  .admin-sidebar { flex-direction: row; overflow-x: auto; }
  .admin-logo { margin: 0 15px 0 0; white-space: nowrap; }
  .admin-logo > small, .admin-click-hint { display: none; }
  .admin-sidebar button { white-space: nowrap; }
  .admin-benefits { grid-template-columns: 1fr 1fr; }
  .admin-benefits span:nth-child(2) { border-right: 0; }
  .admin-benefits span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .sponsor-section { grid-template-columns: 1fr; }
  .sponsor-copy { max-width: 700px; }
  .pilot-section { grid-template-columns: 1fr; gap: 55px; }
  .pilot-phone { justify-self: center; }
  .pricing-grid { grid-template-columns: 1fr; }
  .contact-section { grid-template-columns: 1fr; }
  .contact-copy { position: static; }
}

@media (max-width: 560px) {
  .feature-story { padding-top: 105px; }
  .feature-heading { padding-inline: 22px; }
  .feature-panel { width: 92vw; min-height: 680px; flex-basis: 92vw; padding: 42px 18px; }
  .feature-copy h3 { font-size: 35px; }
  .feature-copy > p:not(.feature-kicker) { font-size: 14px; }
  .feature-canvas { min-height: 350px; border-radius: 16px; }
  .feature-app-card { width: 75%; min-height: 225px; padding: 21px; }
  .float-card { width: 45%; min-height: 70px; }
  .ticket-card { width: 74%; min-height: 220px; }
  .schedule-month, .schedule-game, .mini-score, .message, .typer-heading, .typer-score, .typer-submit, .mvp-title, .mvp-player, .notification { width: 85%; }
  .match-center, .admin-section, .pricing-section { padding: 105px 22px; }
  .match-story-phone { width: min(340px,100%); }
  .match-steps { grid-template-columns: 1fr; }
  .match-step { opacity: .65; }
  .match-step.is-active { opacity: 1; }
  .admin-demo { border-radius: 14px; }
  .admin-sidebar { padding: 13px; }
  .admin-workspace { padding: 20px 14px; }
  .admin-top > b { display: none; }
  .admin-stats { grid-template-columns: 1fr; }
  .admin-editor { grid-template-columns: 1fr; }
  .admin-preview-card { min-height: 215px; }
  .admin-bottom { align-items: stretch; flex-direction: column; gap: 10px; }
  .admin-bottom button { width: 100%; }
  .admin-benefits { grid-template-columns: 1fr; }
  .admin-benefits span { min-height: 58px; border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .admin-benefits span:last-child { border-bottom: 0 !important; }
  .sponsor-section { min-height: auto; padding: 105px 22px; }
  .sponsor-visual { min-height: 470px; transform: scale(.9); margin-inline: -20px; }
  .sponsor-app-card { width: 285px; }
  .sponsor-report { width: 215px; }
  .pilot-section { padding: 105px 22px; }
  .pilot-phone { width: 295px; min-height: 540px; transform: rotate(2deg); }
  .pilot-screen { min-height: 520px; }
  .pilot-phone > p { right: -16px; }
  .price-card { padding: 29px 21px; }
  .price { align-items: center; }
  .price > strong { font-size: 58px; }
  .founding-ribbon { top: -13px; right: 14px; }
  .faq summary { font-size: 12px; }
  .contact-section { padding: 105px 22px; }
  .sales-form { padding: 27px 18px; }
  .sales-form-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-scroll { height: auto; }
  .feature-sticky { position: relative; top: auto; height: auto; min-height: 0; display: block; }
  .feature-viewport { overflow-x: auto; }
  .feature-track { width: max-content; height: auto; transform: none !important; }
  .feature-panel { --feature-panel-opacity: 1; --feature-canvas-scale: 1; --feature-canvas-opacity: 1; --feature-canvas-saturate: 1; width: min(88vw,760px); min-height: 700px; flex-basis: min(88vw,760px); }
  .channel-card, .channel-target { opacity: 1; transform: none; filter: none; }
  .match-step, .match-step.is-past { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 560px) {
  .site-header { gap: 10px; }
  .site-header .brand { gap: 7px; }
}

@media (max-width: 380px) {
  .site-header .button { padding-inline: 9px; font-size: 10px; }
  .hero { padding-inline: 17px; }
}

@media (max-height: 700px) and (min-width: 821px) {
  .feature-sticky { min-height: 560px; }
  .feature-panel { padding-block: 22px; }
  .feature-canvas { min-height: 390px; }
  .match-story-phone { transform: scale(.88); transform-origin: top center; }
}

/* Audience gateway */
body.audience-pending { overflow: hidden; }
.audience-gate[hidden] { display: none; }
.audience-gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; padding: 40px 24px; color: white; background: #0d0c18; isolation: isolate; transition: opacity .6s ease, visibility .6s ease; }
.audience-gate.is-leaving { opacity: 0; visibility: hidden; }
.gate-grid { position: absolute; inset: 0; z-index: -3; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at center,black,transparent 78%); }
.gate-aurora { position: absolute; z-index: -2; width: min(140vw,1700px); height: min(115vw,1350px); left: 50%; top: 46%; transform: translate(-50%,-50%); border-radius: 43% 57% 64% 36%; background: radial-gradient(circle at 48% 46%,rgba(70,239,244,.42),rgba(9,171,192,.18) 30%,rgba(118,104,255,.14) 48%,transparent 70%); filter: blur(88px); animation: gateAurora 12s ease-in-out infinite alternate; }
.gate-orbit { position: absolute; z-index: -1; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; pointer-events: none; }
.gate-orbit-one { width: min(72vw,900px); height: min(72vw,900px); animation: gateOrbitOne 28s linear infinite; }
.gate-orbit-two { width: min(51vw,640px); height: min(51vw,640px); border-style: dashed; animation: gateOrbitTwo 34s linear infinite; }
.gate-content { width: min(920px,100%); display: grid; justify-items: center; text-align: center; animation: gateContentIn .8s cubic-bezier(.16,1,.3,1) both; }
.gate-logo { width: clamp(190px,22vw,280px); height: auto; }
.gate-kicker { margin: 25px 0 0; color: var(--cyan-bright); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gate-content h1 { margin-top: 15px; font-size: clamp(58px,8vw,112px); line-height: .92; }
.gate-lead { max-width: 590px; margin: 24px auto 0; color: #aaaebe; font-size: clamp(16px,1.6vw,20px); line-height: 1.6; }
.gate-choices { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 43px; }
.gate-choices button { position: relative; min-height: 132px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 18px; padding: 25px 28px; overflow: hidden; color: white; text-align: left; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: rgba(22,20,38,.72); box-shadow: 0 24px 60px rgba(0,0,0,.24); backdrop-filter: blur(18px); cursor: pointer; transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.gate-choices button::before { content: ''; position: absolute; inset: 0; opacity: 0; background: linear-gradient(115deg,rgba(34,211,231,.2),transparent 48%,rgba(118,104,255,.18)); transform: translateX(-55%); transition: opacity .35s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.gate-choices button:hover, .gate-choices button:focus-visible { transform: translateY(-8px) scale(1.018); border-color: rgba(34,211,231,.62); background: rgba(28,25,54,.9); box-shadow: 0 30px 80px rgba(9,171,192,.17); outline: 0; }
.gate-choices button:hover::before, .gate-choices button:focus-visible::before { opacity: 1; transform: translateX(0); }
.gate-choice-icon { position: relative; z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; color: var(--cyan-bright); background: rgba(255,255,255,.06); transition: transform .4s ease, color .3s ease, background .3s ease; }
.gate-choice-icon svg { width: 29px; height: 29px; }
.gate-choices button:hover .gate-choice-icon, .gate-choices button:focus-visible .gate-choice-icon { transform: rotate(-5deg) scale(1.08); color: #081316; background: var(--cyan-bright); }
.gate-choices button > span:nth-child(2) { position: relative; z-index: 1; display: grid; gap: 7px; }
.gate-choices button small { color: #85899b; font-size: 10px; font-weight: 700; letter-spacing: .11em; }
.gate-choices button strong { font: 700 clamp(19px,2vw,25px)/1.05 Space Grotesk; }
.gate-choices button > i { position: relative; z-index: 1; color: var(--cyan-bright); font: 400 29px/1 Space Grotesk; font-style: normal; transition: transform .35s ease; }
.gate-choices button:hover > i, .gate-choices button:focus-visible > i { transform: translateX(7px); }
.gate-note { margin-top: 23px; color: #6f7283; font-size: 11px; }

/* Larger hero motion system */
.hero-aurora { width: min(112vw,1480px); height: min(98vw,1260px); right: -40%; top: -17%; filter: blur(92px); opacity: .62; }
.floating-tag { padding: 15px 19px; border-radius: 13px; font-size: 15px; letter-spacing: .055em; box-shadow: 0 22px 55px rgba(0,0,0,.38); }
.floating-tag i { width: 8px; height: 8px; margin-right: 8px; }
.tag-live { left: -11%; top: 34%; }
.tag-pwa { right: -6%; top: 15%; }
.tag-mvp { right: -10%; bottom: 22%; }
.tag-news { left: 5%; top: 7%; animation-delay: -2.1s; }
.tag-news span, .tag-ticket span { color: var(--cyan-bright); }
.tag-ticket { left: -5%; bottom: 11%; animation-delay: -2.8s; }
.tag-community { right: -15%; top: 47%; animation-delay: -3.4s; }
.signal-strip { margin-top: -70px; margin-bottom: -78px; }
.signal-track { padding: 5px 0; animation-duration: 38s; }
.signal-group { gap: clamp(50px,5.5vw,94px); padding-right: clamp(50px,5.5vw,94px); }
.signal-group span { color: rgba(247,248,251,.22); font-size: clamp(68px,9vw,148px); }
.signal-group span:nth-of-type(even) { -webkit-text-stroke: .55px rgba(34,211,231,.58); }

/* One Sport Vibe card replaces fragmented channels */
.channel-target { left: 50%; right: auto; bottom: 18px; width: min(500px,96%); min-height: 190px; justify-items: center; padding: 36px; transform: translate3d(-50%,95px,0) scale(.88); color: white; border: 1px solid rgba(34,211,231,.32); border-radius: 22px; background: radial-gradient(circle at 50% 20%,rgba(9,171,192,.22),transparent 58%),#151326; box-shadow: 0 35px 90px rgba(0,0,0,.4),0 0 65px rgba(9,171,192,.16); }
.channel-target.is-in { transform: translate3d(-50%,0,0) scale(1); }
.channel-target img { width: min(310px,84%); height: auto; }
.channel-target small { color: var(--cyan-bright); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.channel-stack.is-resolved .channel-target { transform: translate3d(-50%,-22px,0) scale(1.08); }
.channel-stack.is-resolved .channel-card { opacity: 0; filter: blur(9px); pointer-events: none; }
.channel-stack.is-resolved .c-one { transform: translate3d(-180px,-105px,0) rotate(-20deg) scale(.72); }
.channel-stack.is-resolved .c-two { transform: translate3d(190px,-75px,0) rotate(17deg) scale(.72); }
.channel-stack.is-resolved .c-three { transform: translate3d(-55px,145px,0) rotate(-11deg) scale(.7); }

/* Guided personalizer and desktop preview */
.personalizer-workspace { position: relative; overflow: visible; isolation: isolate; }
.config-panel { position: relative; z-index: 4; border-radius: 22px 0 0 22px; animation: configPanelGlow 3.2s ease-in-out infinite; }
.try-form-hint { position: absolute; z-index: 12; top: 43px; right: -205px; width: 185px; display: grid; justify-items: start; color: white; pointer-events: none; filter: drop-shadow(0 10px 20px rgba(0,0,0,.28)); }
.try-form-hint span { display: grid; gap: 3px; font-size: 13px; font-weight: 600; line-height: 1.25; transform: rotate(-3deg); }
.try-form-hint b { color: var(--cyan-bright); font: 800 18px/1 Space Grotesk; letter-spacing: .08em; }
.try-form-hint svg { width: 122px; height: 74px; margin-top: 1px; color: var(--cyan-bright); transform: rotate(4deg); }
.try-form-hint svg path { stroke-width: 2.2; }
.text-field.is-edited input, .select-wrap.is-edited select, .upload-zone.is-edited, .color-controls label.is-edited { border-color: rgba(34,211,231,.75); background: rgba(9,171,192,.09); box-shadow: 0 0 0 3px rgba(9,171,192,.1),0 0 25px rgba(9,171,192,.12); }
.text-field.is-edited > span { color: var(--cyan-bright); }
.palette-note { display: flex; align-items: center; gap: 7px; margin-top: -9px; color: #777a8c; font-size: 9px; line-height: 1.45; }
.palette-note i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #777a8c; }
.palette-note.is-ready { color: var(--cyan-bright); }
.palette-note.is-ready i { background: var(--cyan-bright); box-shadow: 0 0 11px var(--cyan-bright); }
.device-switch { gap: 5px; padding: 4px; border-radius: 12px; }
.device-switch button { width: auto; min-width: 108px; height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.device-switch button.is-active { color: #071315; background: var(--cyan-bright); box-shadow: 0 7px 22px rgba(9,171,192,.22); }
.device-switch svg { width: 20px; height: 20px; }
.app-icon-view { width: min(660px,88%); }
.windows-desktop { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 17px; background: radial-gradient(circle at 72% 18%,color-mix(in srgb,var(--club-accent) 35%,transparent),transparent 30%),linear-gradient(145deg,color-mix(in srgb,var(--club-primary) 72%,#070715),#080712 70%); box-shadow: 0 42px 95px rgba(0,0,0,.46); }
.windows-desktop::before { content: ''; position: absolute; width: 45%; aspect-ratio: 1; left: 31%; top: 15%; opacity: .2; border: 1px solid var(--club-accent); border-radius: 38% 62% 53% 47%; transform: rotate(27deg); box-shadow: 0 0 75px color-mix(in srgb,var(--club-accent) 35%,transparent); }
.windows-shortcut { position: absolute; z-index: 2; left: 6%; top: 9%; width: 100px; display: grid; justify-items: center; gap: 6px; color: white; text-align: center; }
.windows-shortcut .app-icon { width: 68px; height: 68px; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.windows-shortcut strong { width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.windows-shortcut small { color: #a8a8b5; font-size: 8px; }
.windows-widget { position: absolute; z-index: 2; right: 7%; top: 16%; width: 46%; display: grid; gap: 7px; padding: 24px; color: white; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: rgba(18,16,31,.72); box-shadow: 0 22px 50px rgba(0,0,0,.25); backdrop-filter: blur(13px); }
.windows-widget small { color: var(--club-accent); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.windows-widget strong { font: 700 24px/1.1 Space Grotesk; }
.windows-widget span { color: #b2b1bf; font-size: 10px; }
.windows-taskbar { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: center; gap: 9px; padding: 7px 13px; color: white; background: rgba(15,14,25,.86); border-top: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(18px); }
.windows-start { width: 31px; height: 31px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 7px; border-radius: 7px; background: rgba(255,255,255,.08); }
.windows-start i { display: block; background: #5edce9; }
.taskbar-search { min-width: 105px; padding: 7px 12px; color: #8f909e; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.055); font-size: 8px; }
.taskbar-club { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; margin-left: 2px; border: 1px solid color-mix(in srgb,var(--club-accent) 60%,white); border-radius: 9px; color: #071315; background: var(--club-accent); font: 800 8px/1 Space Grotesk; box-shadow: 0 0 0 2px rgba(255,255,255,.1); }
.taskbar-club img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.taskbar-time { margin-left: auto; text-align: right; font-size: 8px; line-height: 1.1; }
.taskbar-time small { color: #a3a3ae; font-size: 7px; }
.desktop-caption { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 17px 0 0; color: #c8c8d2; font-size: 11px; }
.desktop-caption i { width: 7px; height: 7px; border-radius: 50%; background: var(--club-accent); box-shadow: 0 0 11px var(--club-accent); }

/* Fluid feature gallery */
.feature-track { transition: none; }

/* Unified match phone and scroll rail */
.match-center-heading { position: relative; top: auto; max-width: 920px; margin-bottom: 72px; }
.match-center-heading h2 { font-size: clamp(48px,6vw,86px); }
.match-center-heading > p:last-child { max-width: 690px; }
.match-center-layout { grid-template-columns: 320px minmax(0,1fr); gap: clamp(70px,9vw,145px); }
.match-story-phone { position: sticky; top: max(92px,calc(50vh - 305px)); width: auto; min-height: 0; overflow: visible; border: 0; border-radius: 0; color: inherit; background: none; box-shadow: none; }
.match-story-phone::before { display: none; }
.match-story-phone .phone-frame { width: 290px; }
.match-story-phone .phone-screen { height: 598px; }
.match-story-screen { background: #f4f3f6; }
.match-steps { --rail-position: 7%; position: relative; padding-left: 28px; }
.match-steps::before, .match-steps::after { content: ''; position: absolute; left: 0; width: 3px; border-radius: 4px; }
.match-steps::before { top: 7%; bottom: 7%; background: rgba(255,255,255,.22); }
.match-steps::after { top: var(--rail-position); height: 22%; background: linear-gradient(180deg,var(--cyan-bright),var(--cyan)); box-shadow: 0 0 20px rgba(34,211,231,.45); transition: top .12s linear; }
.match-step { min-height: 56vh; padding: 48px 10px 48px 38px; border-left: 0; }
.match-step.is-active { border-color: transparent; }

/* Sticky club panel with numbered highlights */
.admin-scroll { height: 190vh; margin-top: 70px; }
.admin-sticky { position: sticky; top: max(18px,calc(50vh - 360px)); }
.admin-demo { min-height: 560px; margin-top: 0; grid-template-columns: 280px 1fr; overflow: visible; }
.admin-sidebar { position: relative; padding: 30px 21px; border-radius: 20px 0 0 0; }
.admin-logo img { width: 162px; height: auto; }
.admin-logo > small { margin-left: 0; }
.admin-click-hint { position: absolute; z-index: 8; left: -118px; top: 158px; width: 180px; min-height: 90px; display: grid; grid-template-columns: 92px 1fr; margin: 0; color: white; filter: drop-shadow(0 10px 19px rgba(0,0,0,.4)); }
.admin-click-hint svg { width: 92px; height: 66px; color: var(--cyan-bright); }
.admin-click-hint b { font-size: 14px; line-height: 1.18; }
.admin-sidebar button { min-height: 56px; padding: 16px 18px; font-size: 15px; }
.admin-workspace { border-radius: 0 20px 0 0; background: #f2f2f5; }
.admin-benefits span { opacity: .34; transform: translateY(8px); transition: opacity .35s ease,transform .35s ease,background .35s ease,color .35s ease; }
.admin-benefits span.is-active { opacity: 1; transform: translateY(0); color: white; background: rgba(9,171,192,.12); box-shadow: inset 0 2px 0 var(--cyan-bright); }
.admin-benefits span.is-active b { color: var(--cyan-bright); }

/* Solvera Sokół pilot */
.pilot-section { --pilot-word-x: 0px; }
.pilot-section::before { content: 'SOKÓŁ ŁAŃCUT'; left: -47vw; right: auto; bottom: -4%; width: max-content; color: rgba(0,0,0,.07); font-size: 23vw; font-weight: 800; white-space: nowrap; transform: translate3d(var(--pilot-word-x),0,0); will-change: transform; }
.pilot-copy h2 { font-weight: 800; }
.pilot-copy h2 em { color: #181711; -webkit-text-stroke: 0; font-weight: 800; }
.pilot-phone { width: auto; min-height: 0; padding: 0; background: none; transform: rotate(4deg); }
.pilot-phone::before { display: none; }
.pilot-phone .phone-frame { width: 290px; border-color: rgba(0,0,0,.3); box-shadow: 0 45px 75px rgba(55,43,0,.28),inset 0 0 0 1px rgba(255,255,255,.13); }
.pilot-phone .phone-screen { height: 598px; }
.pilot-screen { min-height: 0; padding: 0; color: white; background: linear-gradient(150deg,#24231f,#10100e); }
.pilot-app-header { min-height: 112px; display: flex; align-items: end; gap: 11px; padding: 36px 18px 17px; border-bottom: 1px solid rgba(255,255,255,.1); background: #171713; }
.pilot-app-header img { width: 48px; height: 48px; object-fit: contain; }
.pilot-app-header span { display: grid; gap: 3px; }
.pilot-app-header small { color: #f4c900; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.pilot-app-header strong { font: 700 12px/1 Space Grotesk; }
.pilot-app-content { padding: 28px 19px 66px; }
.pilot-app-content > small { color: #f4c900; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.pilot-app-content > strong { display: block; margin-top: 5px; font: 700 28px/1.05 Space Grotesk; }
.pilot-app-content > div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 55px 0 45px; }
.pilot-app-content > div > span { width: 70px; height: 70px; display: grid; place-items: center; justify-self: center; overflow: hidden; border-radius: 17px; font: 800 25px/1 Space Grotesk; }
.sokol-mini img { width: 100%; height: 100%; object-fit: contain; padding: 5px; background: #111; }
.pilot-app-content button { width: 100%; padding: 13px; color: #14130c; border: 0; border-radius: 9px; background: #f4c900; font-size: 9px; font-weight: 800; }
.pilot-phone > p { right: -100px; }
.footer-brand-logo { display: block; width: 154px; height: auto; }

@keyframes gateAurora { 0% { transform: translate(-56%,-46%) rotate(-8deg) scale(.92); } 100% { transform: translate(-43%,-55%) rotate(10deg) scale(1.08); } }
@keyframes gateOrbitOne { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes gateOrbitTwo { from { transform: translate(-50%,-50%) rotate(360deg); } to { transform: translate(-50%,-50%) rotate(0); } }
@keyframes gateContentIn { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes configPanelGlow { 0%,100% { box-shadow: -18px 0 58px rgba(9,171,192,.08),0 0 0 1px rgba(34,211,231,.05); } 50% { box-shadow: -10px 0 88px rgba(9,171,192,.24),0 0 0 1px rgba(34,211,231,.24); } }

@media (max-width: 1050px) {
  .floating-tag { padding: 12px 15px; font-size: 12px; }
  .tag-live { left: -3%; }
  .tag-community { right: -5%; }
  .try-form-hint { right: -155px; transform: scale(.85); }
  .admin-demo { grid-template-columns: 245px 1fr; }
  .admin-click-hint { left: -70px; width: 140px; grid-template-columns: 72px 1fr; }
  .admin-click-hint svg { width: 72px; }
}

@media (max-width: 820px) {
  .audience-gate { padding: 28px 20px; }
  .gate-orbit-one { width: 105vw; height: 105vw; }
  .gate-orbit-two { width: 78vw; height: 78vw; }
  .gate-choices { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
  .gate-choices button { min-height: 104px; padding: 18px 20px; }
  .gate-choice-icon { width: 50px; height: 50px; }
  .gate-note { display: none; }
  .floating-tag { font-size: 10px; }
  .tag-news { left: 2%; }
  .tag-ticket { left: 0; }
  .tag-community { right: 0; }
  .signal-strip { margin-top: -38px; margin-bottom: -48px; }
  .signal-group span { font-size: clamp(58px,13vw,92px); }
  .channel-stack.is-resolved .c-one { transform: translate3d(-80px,-90px,0) rotate(-18deg) scale(.72); }
  .channel-stack.is-resolved .c-two { transform: translate3d(90px,-60px,0) rotate(15deg) scale(.72); }
  .channel-target { width: min(460px,92%); }
  .personalizer-workspace { overflow: hidden; }
  .config-panel { border-radius: 16px 16px 0 0; }
  .try-form-hint { position: relative; top: auto; right: auto; width: 100%; grid-template-columns: 1fr 105px; align-items: center; margin: -12px 0 8px; transform: none; }
  .try-form-hint svg { grid-column: 2; grid-row: 1; width: 100px; transform: rotate(155deg); }
  .try-form-hint span { grid-column: 1; grid-row: 1; }
  .preview-meta { align-items: flex-start; }
  .device-switch button { min-width: 94px; }
  .match-center-heading { margin-bottom: 48px; }
  .match-center-layout { grid-template-columns: 1fr; gap: 42px; }
  .match-story-phone { position: relative; top: auto; margin: 0 auto; }
  .match-steps { padding-left: 0; }
  .match-steps::before, .match-steps::after { display: none; }
  .match-step { min-height: 0; padding: 25px 18px; }
  .admin-scroll { height: auto; margin-top: 50px; }
  .admin-sticky { position: relative; top: auto; }
  .admin-demo { grid-template-columns: 1fr; min-height: 0; overflow: hidden; }
  .admin-click-hint { display: none; }
  .admin-sidebar { border-radius: 14px 14px 0 0; }
  .admin-sidebar button { min-height: 48px; font-size: 13px; }
  .admin-workspace { border-radius: 0; }
  .pilot-phone > p { right: -24px; }
}

@media (max-width: 560px) {
  .gate-content { align-content: center; }
  .gate-logo { width: 175px; }
  .gate-kicker { margin-top: 18px; font-size: 9px; }
  .gate-content h1 { font-size: clamp(48px,15vw,68px); }
  .gate-lead { margin-top: 15px; font-size: 14px; }
  .gate-choices button { grid-template-columns: 46px 1fr auto; gap: 13px; min-height: 92px; border-radius: 15px; }
  .gate-choice-icon { width: 46px; height: 46px; border-radius: 12px; }
  .gate-choice-icon svg { width: 23px; height: 23px; }
  .gate-choices button small { font-size: 8px; }
  .gate-choices button strong { font-size: 18px; }
  .hero-aurora { width: 165vw; height: 155vw; right: -83%; top: 10%; }
  .floating-tag { padding: 9px 11px; font-size: 8px; }
  .tag-news { top: 5%; }
  .tag-community { top: 49%; }
  .signal-group span { font-size: 56px; }
  .channel-target { min-height: 158px; padding: 26px; }
  .channel-target img { width: 235px; }
  .device-switch { width: 100%; }
  .device-switch button { min-width: 0; flex: 1; padding-inline: 8px; }
  .preview-meta { gap: 10px; }
  .preview-meta > span { max-width: 75px; }
  .app-icon-view { width: 94%; }
  .windows-widget { width: 55%; right: 4%; padding: 14px; }
  .windows-widget strong { font-size: 17px; }
  .windows-shortcut { left: 3%; transform: scale(.82); }
  .taskbar-search { display: none; }
  .match-story-phone .phone-frame, .pilot-phone .phone-frame { width: 283px; }
  .admin-benefits span.is-active { box-shadow: inset 3px 0 0 var(--cyan-bright); }
  .pilot-section::before { font-size: 32vw; }
  .footer-brand-logo { width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .audience-gate *, .hero-aurora, .floating-tag, .signal-track, .config-panel { animation: none !important; }
  .channel-stack.is-resolved .channel-card { opacity: 1; filter: none; transform: none; }
  .admin-scroll { height: auto; }
  .admin-sticky { position: relative; top: auto; }
}

/* Preview entrance */
body.launch-locked { overflow: hidden; }
.launch-gate[hidden] { display: none; }
.launch-gate { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden; padding: 34px 22px; color: white; background: #0d0c18; isolation: isolate; transition: opacity .72s ease, visibility .72s ease; }
.launch-gate.is-unlocking { opacity: 0; visibility: hidden; }
.launch-grid { position: absolute; inset: 0; z-index: -3; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size: 76px 76px; mask-image: radial-gradient(circle at center,black,transparent 78%); }
.launch-glow { position: absolute; z-index: -2; border-radius: 45% 55% 60% 40%; filter: blur(90px); opacity: .42; animation: launchGlow 9s ease-in-out infinite alternate; }
.launch-glow-one { width: min(82vw,1080px); height: min(74vw,920px); right: -26%; top: -26%; background: radial-gradient(circle,rgba(34,211,231,.72),rgba(9,171,192,.18) 44%,transparent 70%); }
.launch-glow-two { width: min(62vw,780px); height: min(58vw,690px); left: -23%; bottom: -31%; background: radial-gradient(circle,rgba(118,104,255,.52),rgba(118,104,255,.08) 47%,transparent 72%); animation-delay: -4s; }
.launch-content { width: min(830px,100%); display: grid; justify-items: center; text-align: center; animation: gateContentIn .85s cubic-bezier(.16,1,.3,1) both; }
.launch-logo { width: min(270px,62vw); height: auto; }
.launch-kicker { margin: 27px 0 15px; color: #d0d2dd; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.launch-content h1 { max-width: none; font-size: clamp(56px,7vw,104px); }
.coming-soon { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; padding: 9px 13px; color: #bfc2ce; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.045); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.coming-soon i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-bright); box-shadow: 0 0 16px var(--cyan-bright); animation: comingPulse 1.8s ease-in-out infinite; }
.launch-form { width: min(530px,100%); display: grid; gap: 9px; margin-top: 38px; }
.launch-form > label { color: #8f92a4; text-align: left; font-size: 11px; font-weight: 600; }
.launch-form > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(20,18,35,.72); box-shadow: 0 20px 55px rgba(0,0,0,.28); backdrop-filter: blur(15px); transition: border-color .25s ease,box-shadow .25s ease; }
.launch-form:focus-within > div { border-color: rgba(34,211,231,.62); box-shadow: 0 0 0 4px rgba(9,171,192,.1),0 22px 60px rgba(0,0,0,.3); }
.launch-form input { min-width: 0; height: 48px; padding: 0 15px; color: white; border: 0; outline: 0; background: transparent; font-size: 15px; }
.launch-form input::placeholder { color: #696c7e; }
.launch-form button { min-width: 124px; height: 48px; padding: 0 17px; color: #071315; border: 0; border-radius: 9px; background: linear-gradient(110deg,var(--cyan-bright),#6feaf1); font-size: 11px; font-weight: 800; letter-spacing: .08em; cursor: pointer; transition: transform .2s ease,box-shadow .2s ease; }
.launch-form button:hover, .launch-form button:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(9,171,192,.3); outline: 0; }
.launch-form button:disabled { opacity: .62; cursor: progress; transform: none; }
.launch-form button span { margin-left: 8px; font-size: 18px; }
.launch-form > p { min-height: 20px; margin: 0; color: #ff7d8f; text-align: left; font-size: 11px; }
.launch-form.has-error > div { border-color: rgba(255,93,113,.75); animation: launchShake .35s ease; }
.launch-domain { margin-top: 12px; color: #656879; font-size: 10px; letter-spacing: .12em; }

/* Larger, slower signal ticker */
.signal-strip { margin-top: -91px; margin-bottom: -105px; }
.signal-track { animation-duration: 56s; }
.signal-group { gap: clamp(58px,6.2vw,112px); padding-right: clamp(58px,6.2vw,112px); }
.signal-group span { font-size: clamp(88px,11.4vw,192px); }

/* Translucent cards and animated Sport Vibe border */
.channel-card { border-color: rgba(255,255,255,.17); background: rgba(24,22,41,.62); box-shadow: 0 24px 55px rgba(0,0,0,.2); backdrop-filter: blur(17px); }
.channel-target { isolation: isolate; overflow: hidden; gap: 8px; border: 0; background: transparent; }
.channel-target::before { content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; width: 145%; aspect-ratio: 1; background: conic-gradient(from 0deg,transparent 0 16%,rgba(34,211,231,.95) 27%,rgba(118,104,255,.92) 42%,transparent 55% 72%,rgba(34,211,231,.7) 86%,transparent 100%); transform: translate(-50%,-50%); animation: channelBorderSpin 5.5s linear infinite; }
.channel-target::after { content: ''; position: absolute; z-index: 1; inset: 2px; border-radius: 20px; background: radial-gradient(circle at 50% 16%,rgba(9,171,192,.24),transparent 58%),rgba(18,16,31,.9); backdrop-filter: blur(18px); }
.channel-target > * { position: relative; z-index: 2; }
.channel-target small { margin-top: 3px; }
.channel-url { color: rgba(255,255,255,.64); font-size: 11px; font-weight: 600; letter-spacing: .08em; transition: color .2s ease; }
.channel-url:hover, .channel-url:focus-visible { color: white; outline: 0; }

/* Guided form from the left with a breathing gradient aura */
.config-panel { isolation: isolate; animation: none; }
.config-panel::before { content: ''; position: absolute; z-index: -1; inset: -12px -10px; border-radius: 30px; opacity: .58; background: linear-gradient(125deg,rgba(34,211,231,.64),rgba(9,171,192,.06) 42%,rgba(118,104,255,.55)); filter: blur(25px); transform: scale(.985); animation: formGradientPulse 3.4s ease-in-out infinite; pointer-events: none; }
.try-form-hint { top: 92px; left: -218px; right: auto; width: 202px; justify-items: end; text-align: right; }
.try-form-hint span { align-items: end; }
.try-form-hint svg { width: 132px; height: 74px; margin-right: -4px; transform: rotate(-3deg); }

/* Desktop version of the same club application */
.app-icon-view { width: min(760px,94%); }
.desktop-monitor { width: 100%; display: grid; justify-items: center; filter: drop-shadow(0 42px 55px rgba(0,0,0,.42)); }
.monitor-screen { border: 8px solid #272631; border-bottom-width: 10px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.monitor-neck { width: 74px; height: 31px; background: linear-gradient(90deg,#292832,#4a4855 50%,#26252e); clip-path: polygon(21% 0,79% 0,100% 100%,0 100%); }
.monitor-base { width: 184px; height: 10px; border-radius: 10px 10px 4px 4px; background: linear-gradient(90deg,#24232c,#55535f 50%,#24232c); box-shadow: 0 9px 18px rgba(0,0,0,.34); }
.windows-desktop { aspect-ratio: 16/9.6; border-radius: 10px; }
.windows-desktop::before { opacity: .11; }
.desktop-app-shell { position: absolute; z-index: 2; inset: 0 0 42px; display: grid; grid-template-columns: 142px 1fr; overflow: hidden; color: #17151f; background: #f4f4f7; }
.desktop-app-sidebar { display: flex; flex-direction: column; gap: 4px; padding: 20px 13px; color: white; background: color-mix(in srgb,var(--club-primary) 88%,#05050b); }
.desktop-club-brand { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; margin: 0 4px 19px; }
.desktop-club-brand .club-mark { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; color: color-mix(in srgb,var(--club-primary) 92%,#000); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: var(--club-accent); font: 800 8px/1 Space Grotesk; }
.desktop-club-brand .club-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.desktop-club-brand strong { overflow: hidden; font: 700 8px/1.18 Space Grotesk; text-overflow: ellipsis; }
.desktop-nav-item { padding: 9px 10px; color: rgba(255,255,255,.58); border-radius: 7px; font-size: 7px; font-weight: 700; }
.desktop-nav-item.is-active { color: color-mix(in srgb,var(--club-primary) 92%,#000); background: var(--club-accent); box-shadow: 0 8px 20px color-mix(in srgb,var(--club-accent) 22%,transparent); }
.desktop-app-main { min-width: 0; padding: 18px 20px; }
.desktop-app-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #dedde4; }
.desktop-app-top > span { display: grid; gap: 2px; }
.desktop-app-top small { color: color-mix(in srgb,var(--club-accent) 78%,#08717d); font-size: 6px; font-weight: 800; letter-spacing: .12em; }
.desktop-app-top strong { font: 700 13px/1 Space Grotesk; }
.desktop-app-top > b { color: #74727d; font-size: 6px; font-weight: 600; }
.desktop-app-top > b i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #ff5970; }
.desktop-welcome { display: grid; gap: 2px; margin: 15px 0 10px; }
.desktop-welcome small { color: #8d8b96; font-size: 6px; font-weight: 800; letter-spacing: .12em; }
.desktop-welcome strong { font: 700 17px/1.1 Space Grotesk; }
.desktop-dashboard { display: grid; grid-template-columns: minmax(0,1.32fr) minmax(120px,.68fr); gap: 10px; }
.desktop-match-card { overflow: hidden; color: white; border-radius: 12px; background: linear-gradient(135deg,color-mix(in srgb,var(--club-primary) 92%,#05050b),color-mix(in srgb,var(--club-primary) 72%,#36304f)); box-shadow: 0 15px 35px color-mix(in srgb,var(--club-primary) 18%,transparent); }
.desktop-countdown { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.desktop-countdown span { color: var(--club-accent); font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.desktop-countdown small { color: rgba(255,255,255,.62); font-size: 5px; }
.desktop-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 13px 10px; text-align: center; }
.desktop-teams > span { display: grid; justify-items: center; gap: 4px; }
.desktop-teams i { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; color: color-mix(in srgb,var(--club-primary) 92%,#000); border-radius: 9px; background: var(--club-accent); font: 800 8px/1 Space Grotesk; font-style: normal; }
.desktop-teams i img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.desktop-teams .desktop-rival { color: white; background: #ac2b42; }
.desktop-teams small { max-width: 90px; overflow: hidden; font-size: 5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.desktop-teams > b { color: rgba(255,255,255,.38); font-size: 7px; }
.desktop-match-card button { width: calc(100% - 20px); margin: 0 10px 10px; padding: 8px; color: color-mix(in srgb,var(--club-primary) 92%,#000); border: 0; border-radius: 7px; background: var(--club-accent); font-size: 6px; font-weight: 800; }
.desktop-modules { display: grid; gap: 8px; }
.desktop-modules article { display: grid; align-content: end; gap: 3px; min-height: 84px; padding: 11px; border: 1px solid #dddce3; border-radius: 10px; background: white; }
.desktop-modules small { color: color-mix(in srgb,var(--club-accent) 76%,#08717d); font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.desktop-modules strong { font-size: 8px; }
.desktop-modules span { color: #898792; font-size: 5px; }

/* Smaller magnetic feature slides */
.feature-scroll { height: 305vh; }
.feature-track { gap: clamp(8px,.65vw,12px); padding-inline: 12vw; }
.feature-panel { width: 76vw; flex-basis: 76vw; padding-inline: max(28px,calc((76vw - var(--max)) / 2)); }
.feature-canvas { min-height: 430px; }

/* Clearer panel benefits and an arrow aimed at the first tab */
.admin-click-hint { left: -165px; top: 78px; width: 185px; min-height: 92px; display: block; text-align: left; }
.admin-click-hint b { display: block; margin-left: 2px; font-size: 14px; }
.admin-click-hint svg { width: 132px; height: 70px; margin: -2px 0 0 48px; }
.admin-benefits { grid-template-columns: repeat(4,1fr); gap: 10px; padding-top: 14px; border: 0; }
.admin-benefit { min-height: 154px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 15px; padding: 24px 20px; opacity: .28; transform: translateY(12px) scale(.98); color: #adafbd; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); transition: opacity .4s ease,transform .45s ease,background .4s ease,border-color .4s ease,box-shadow .4s ease; }
.admin-benefit > b { color: var(--cyan); font: 700 25px/1 Space Grotesk; opacity: .55; }
.admin-benefit > div { display: grid; align-content: start; gap: 8px; }
.admin-benefit strong { color: white; font: 700 14px/1.18 Space Grotesk; }
.admin-benefit small { color: #858898; font-size: 10px; line-height: 1.55; }
.admin-benefit.is-active { opacity: 1; transform: translateY(0) scale(1); border-color: rgba(34,211,231,.42); background: linear-gradient(145deg,rgba(9,171,192,.13),rgba(118,104,255,.055)); box-shadow: 0 20px 50px rgba(0,0,0,.22),inset 0 2px 0 var(--cyan-bright); }
.admin-benefit.is-active > b { color: var(--cyan-bright); opacity: 1; }

/* Sokół word travels from right to left */
.pilot-section::before { left: auto; right: -47vw; }

@keyframes launchGlow { from { transform: translate3d(-3%,2%,0) rotate(-5deg) scale(.92); } to { transform: translate3d(4%,-4%,0) rotate(8deg) scale(1.08); } }
@keyframes comingPulse { 0%,100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes launchShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes channelBorderSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes formGradientPulse { 0%,100% { opacity: .34; transform: scale(.975); filter: blur(22px); } 50% { opacity: .72; transform: scale(1.012); filter: blur(31px); } }

@media (max-width: 1050px) {
  .signal-group span { font-size: clamp(80px,12vw,142px); }
  .try-form-hint { left: -158px; right: auto; transform: scale(.84); transform-origin: right center; }
  .feature-track { padding-inline: 8vw; }
  .feature-panel { width: 84vw; flex-basis: 84vw; }
  .admin-click-hint { left: -92px; width: 112px; }
  .admin-click-hint b { font-size: 11px; }
  .admin-click-hint svg { width: 95px; margin-left: 20px; }
  .admin-benefit { min-height: 142px; padding: 18px 14px; gap: 10px; }
  .admin-benefit > b { font-size: 20px; }
}

@media (max-width: 820px) {
  .launch-kicker { font-size: 10px; }
  .launch-form { margin-top: 30px; }
  .signal-strip { margin-top: -50px; margin-bottom: -62px; }
  .signal-track { animation-duration: 48s; }
  .signal-group span { font-size: clamp(68px,15vw,108px); }
  .try-form-hint { position: relative; top: auto; left: auto; right: auto; width: 100%; grid-template-columns: 1fr 100px; justify-items: start; margin: -10px 0 9px; text-align: left; transform: none; }
  .try-form-hint span { align-items: start; }
  .try-form-hint svg { grid-column: 2; grid-row: 1; width: 100px; margin: 0; transform: rotate(151deg); }
  .app-icon-view { width: 96%; }
  .desktop-app-shell { grid-template-columns: 112px 1fr; }
  .desktop-app-sidebar { padding-inline: 9px; }
  .desktop-dashboard { grid-template-columns: 1fr .62fr; }
  .feature-scroll { height: auto; }
  .feature-track { gap: 12px; padding-inline: 4vw; }
  .feature-panel { width: min(88vw,680px); flex-basis: min(88vw,680px); }
  .admin-click-hint { display: none; }
  .admin-benefits { grid-template-columns: 1fr 1fr; }
  .admin-benefit { min-height: 135px; }
}

@media (max-width: 560px) {
  .launch-gate { padding: 24px 16px; }
  .launch-logo { width: 190px; }
  .launch-kicker { margin-top: 22px; letter-spacing: .11em; }
  .launch-content h1 { font-size: clamp(48px,14vw,66px); }
  .coming-soon { margin-top: 22px; }
  .launch-form > div { grid-template-columns: 1fr; }
  .launch-form input, .launch-form button { width: 100%; }
  .launch-form > p { text-align: center; }
  .signal-group span { font-size: 68px; }
  .desktop-monitor { transform: scale(.98); }
  .monitor-screen { border-width: 5px; border-bottom-width: 7px; }
  .desktop-app-shell { grid-template-columns: 78px 1fr; }
  .desktop-app-sidebar { padding: 12px 6px; }
  .desktop-club-brand { grid-template-columns: 25px 1fr; gap: 5px; margin-bottom: 10px; }
  .desktop-club-brand .club-mark { width: 25px; height: 25px; }
  .desktop-nav-item { padding: 6px 5px; font-size: 5px; }
  .desktop-app-main { padding: 11px 9px; }
  .desktop-app-top > b { display: none; }
  .desktop-dashboard { grid-template-columns: 1fr; }
  .desktop-modules { grid-template-columns: 1fr 1fr; }
  .desktop-modules article { min-height: 57px; padding: 7px; }
  .desktop-match-card { display: none; }
  .windows-taskbar { height: 34px; padding: 4px 8px; }
  .windows-start, .taskbar-club { width: 25px; height: 25px; }
  .taskbar-time { font-size: 6px; }
  .monitor-neck { height: 24px; }
  .admin-benefits { grid-template-columns: 1fr; }
  .admin-benefit { min-height: 124px; }
}

@media (prefers-reduced-motion: reduce) {
  .launch-gate *, .channel-target::before, .config-panel::before { animation: none !important; }
}

/* Revision 09 — calmer motion and clearer scroll stories */
.channel-target::before { animation-duration: 16s; }

/* Move the personalizer glow from the whole panel to the club-name field. */
.config-panel::before { content: none; display: none; }
.text-field { isolation: isolate; z-index: 0; padding: 1px; overflow: hidden; border-radius: 11px; background: transparent; box-shadow: 0 0 24px rgba(9,171,192,.09); }
.text-field::before { content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; background: conic-gradient(from 0deg,rgba(34,211,231,.18),rgba(34,211,231,.95),rgba(118,104,255,.82),rgba(34,211,231,.18) 68%,rgba(34,211,231,.18)); transform: translate(-50%,-50%); animation: nameFieldBorder 10s linear infinite; }
.text-field::after { content: ''; position: absolute; z-index: 1; inset: 2px; border-radius: 8px; background: #1a182a; pointer-events: none; }
.text-field input { position: relative; z-index: 2; height: 49px; border: 0; background: transparent; box-shadow: none; }
.text-field input:focus { border: 0; box-shadow: none; }
.text-field:focus-within { box-shadow: 0 0 0 3px rgba(9,171,192,.11),0 0 30px rgba(9,171,192,.17); }
.text-field > span { z-index: 3; }
.config-heading > span { font-size: 13px; }
.field-label { font-size: 14px; }
.text-field input, .select-wrap select { font-size: 15.5px; }
.field-help { font-size: 11.5px; line-height: 1.5; }
.upload-zone strong { font-size: 13px; }
.upload-zone small, .upload-zone > b { font-size: 10px; }
.color-controls small { font-size: 10px; }
.color-controls b { font-size: 11px; }
.palette-note { font-size: 10.5px; }

/* Match story: tighter stages, finer progress rail and a larger phone. */
.match-center-heading { width: 100%; max-width: none; }
.match-center-heading h2 em, .match-center-heading > p:last-child { white-space: nowrap; }
.match-center-heading > p:last-child { max-width: none; }
.match-center-layout { width: calc(100% - clamp(18px,3vw,44px)); margin-left: clamp(18px,3vw,44px); grid-template-columns: 350px minmax(0,1fr); gap: clamp(48px,7vw,108px); }
.match-story-phone { top: max(84px,calc(50vh - 328px)); }
.match-story-phone .phone-frame { width: 318px; }
.match-story-phone .phone-screen { height: 654px; }
.match-steps { padding-left: 20px; }
.match-steps::before, .match-steps::after { border-radius: 2px; }
.match-steps::before { width: 1px; background: rgba(255,255,255,.14); }
.match-steps::after { width: 2px; height: 13%; box-shadow: 0 0 12px rgba(34,211,231,.34); }
.match-step { min-height: 38vh; padding: 28px 8px 28px 30px; }
.feature-track { gap: clamp(3px,.3vw,5px); }

/* The active club-panel benefit expands while the remaining cards make room. */
.admin-benefits { display: flex; grid-template-columns: none; align-items: stretch; }
.admin-benefit { min-width: 0; flex: .74 1 0; transition: flex-grow .58s cubic-bezier(.2,.8,.2,1),opacity .4s ease,transform .45s ease,background .4s ease,border-color .4s ease,box-shadow .4s ease; }
.admin-benefit.is-active { flex-grow: 1.62; }
.admin-benefit:not(.is-active) small { opacity: .48; transition: opacity .35s ease; }
.admin-benefit.is-active small { opacity: 1; }

/* Sponsor card grows over a stationary circle; the partner mark catches light. */
.sponsor-section { min-height: 132vh; align-items: start; }
.sponsor-visual { --sponsor-scale: .9; --sponsor-lift: 26px; position: sticky; top: max(80px,calc(50vh - 270px)); }
.sponsor-focus { position: relative; width: 100%; min-height: 540px; display: grid; place-items: center; transform: translate3d(0,var(--sponsor-lift),0) scale(var(--sponsor-scale)); transform-origin: center; transition: transform .14s linear; will-change: transform; }
.sponsor-copy { position: sticky; top: max(110px,calc(50vh - 225px)); }
.sponsor-copy h2 { font-size: clamp(42px,4vw,58px); }
.sponsor-copy h2 em { white-space: nowrap; }
.sponsor-brand-mark { position: relative; overflow: hidden; box-shadow: inset 0 0 28px rgba(34,211,231,.035); }
.sponsor-brand-mark::after { content: ''; position: absolute; inset: -45% auto -45% -55%; width: 34%; background: linear-gradient(100deg,transparent,rgba(255,255,255,.82),rgba(34,211,231,.28),transparent); transform: skewX(-18deg); animation: sponsorMarkShine 4.8s ease-in-out infinite; pointer-events: none; }

/* Scroll-led FAQ: one question, four distinct angles. */
.faq.faq-scroll { height: 245vh; max-width: 980px; margin-top: 105px; }
.faq-sticky { position: sticky; top: max(88px,calc(50vh - 205px)); min-height: 410px; }
.faq-sticky > h3 { margin: 0 0 34px; font: 700 36px/1.1 Space Grotesk; }
.faq-stack { position: relative; min-height: 230px; perspective: 900px; }
.faq-card { --faq-angle: -1.35deg; position: absolute; inset: 0; min-height: 205px; padding: 22px 28px 25px; opacity: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 18px; background: linear-gradient(145deg,rgba(31,28,51,.97),rgba(16,15,28,.98)); box-shadow: 0 28px 75px rgba(0,0,0,.28); transform: translate3d(0,62px,0) rotate(var(--faq-angle)) scale(.94); transform-origin: center; pointer-events: none; transition: opacity .52s ease,transform .72s cubic-bezier(.16,1,.3,1),border-color .45s ease,box-shadow .45s ease; }
.faq-card:nth-child(2) { --faq-angle: 1.05deg; }
.faq-card:nth-child(3) { --faq-angle: -.65deg; }
.faq-card:nth-child(4) { --faq-angle: 1.45deg; }
.faq-card.is-active { z-index: 3; opacity: 1; transform: translate3d(0,0,0) rotate(var(--faq-angle)) scale(1); border-color: rgba(34,211,231,.31) !important; box-shadow: 0 35px 90px rgba(0,0,0,.36),0 0 42px rgba(9,171,192,.075); pointer-events: auto; }
.faq-card.is-before { opacity: 0; transform: translate3d(0,-58px,0) rotate(calc(var(--faq-angle) - 1.1deg)) scale(.94); }
.faq-card.is-after { opacity: 0; transform: translate3d(0,62px,0) rotate(calc(var(--faq-angle) + 1.1deg)) scale(.94); }
.faq-card summary { min-height: 62px; font-size: 18px; }
.faq-card[open] { border-bottom: 1px solid rgba(34,211,231,.31); }
.faq-card p { max-width: 820px; margin: 4px 0 8px; font-size: 15px; line-height: 1.72; }
.faq-progress { display: flex; align-items: center; gap: 7px; margin: 24px 0 0; color: #6e7080; font: 600 12px/1 Space Grotesk; }
.faq-progress b { color: var(--cyan-bright); font-size: 19px; }
.faq-progress i { width: 64px; height: 1px; margin-left: 7px; background: linear-gradient(90deg,var(--cyan-bright),rgba(255,255,255,.13)); }

@keyframes nameFieldBorder { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes sponsorMarkShine { 0%,58% { left: -55%; opacity: 0; } 67% { opacity: 1; } 86%,100% { left: 125%; opacity: 0; } }

@media (max-width: 1050px) {
  .match-center-heading > p:last-child { white-space: normal; }
  .match-center-layout { width: calc(100% - 18px); margin-left: 18px; grid-template-columns: 335px minmax(0,1fr); gap: 46px; }
  .match-story-phone .phone-frame { width: 308px; }
  .match-story-phone .phone-screen { height: 634px; }
  .admin-benefit.is-active { flex-grow: 1.42; }
  .sponsor-copy h2 { font-size: clamp(38px,5vw,58px); }
}

@media (max-width: 820px) {
  .match-center-heading h2 em, .sponsor-copy h2 em { white-space: normal; }
  .match-center-layout { width: 100%; margin-left: 0; grid-template-columns: 1fr; }
  .match-story-phone .phone-frame { width: 295px; }
  .match-story-phone .phone-screen { height: 608px; }
  .admin-benefits { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-benefit, .admin-benefit.is-active { flex: none; }
  .sponsor-section { min-height: auto; }
  .sponsor-visual, .sponsor-copy { position: relative; top: auto; }
  .sponsor-focus { min-height: 500px; transform: none !important; }
  .faq.faq-scroll { height: auto; margin-top: 90px; }
  .faq-sticky { position: relative; top: auto; min-height: 0; }
  .faq-stack { min-height: 0; display: grid; gap: 13px; }
  .faq-card, .faq-card.is-active, .faq-card.is-before, .faq-card.is-after { position: relative; inset: auto; min-height: 0; padding: 5px 18px 12px; opacity: 1; transform: rotate(var(--faq-angle)); pointer-events: auto; }
  .faq-card summary { min-height: 62px; font-size: 14px; }
  .faq-card p { margin: 0 0 10px; font-size: 13px; }
  .faq-progress { display: none; }
}

@media (max-width: 560px) {
  .field-label { font-size: 13px; }
  .text-field input, .select-wrap select { font-size: 15px; }
  .admin-benefits { grid-template-columns: 1fr; }
  .sponsor-focus { min-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .text-field::before, .sponsor-brand-mark::after { animation: none !important; }
  .sponsor-focus, .faq-card { transition: none !important; }
}

/* Revision 10 — quicker, scroll-synchronised match story */
.match-story-screen { position: relative; }
.phase-screen { position: absolute; z-index: 1; inset: 110px 0 0; display: block; min-height: 0; opacity: 0; visibility: hidden; transform: translate3d(0,18px,0) scale(.988); filter: blur(4px); pointer-events: none; transition: opacity .28s ease,transform .46s cubic-bezier(.2,.8,.2,1),filter .36s ease,visibility 0s linear .46s; will-change: opacity,transform,filter; }
.phase-screen.is-active { display: block; opacity: 1; visibility: visible; transform: translate3d(0,0,0) scale(1); filter: blur(0); animation: none; pointer-events: auto; transition-delay: 0s; }
.phase-tabs { z-index: 4; }
.match-step { min-height: 34vh; transition: opacity .32s ease,transform .46s cubic-bezier(.2,.8,.2,1),filter .34s ease; }
.match-step.is-past { transform: translate3d(0,-34px,0) scale(.975); filter: blur(5px); }
.match-step.is-future { transform: translate3d(0,34px,0) scale(.975); filter: blur(5px); }
.match-steps::after { transition: top .09s linear; }

@media (max-width: 820px) {
  html { scroll-behavior: smooth; }
  .phase-screen { inset: 110px 0 0; }
  .match-step, .match-step.is-past, .match-step.is-future { min-height: 0; transform: none; filter: none; }
}

/* Revision 11 — touch-first phone and tablet experience */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-x: none; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 3px; }
#top, #dla-klubow, #dla-kibicow, #personalizer, #funkcje, #centrum-meczu, #panel-klubu, #sponsor, #realizacja, #cennik, #kontakt { scroll-margin-top: calc(var(--header) + 18px); }

.mobile-menu-toggle { display: none; }
.mobile-navigation[hidden] { display: none; }
.mobile-navigation { position: fixed; inset: 0; z-index: 180; }
.mobile-navigation-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; border: 0; background: rgba(4,3,10,.7); backdrop-filter: blur(7px); transition: opacity .32s ease; }
.mobile-navigation-sheet { position: absolute; top: 0; right: 0; width: min(430px,100%); height: 100dvh; min-height: 100%; display: flex; flex-direction: column; padding: calc(28px + env(safe-area-inset-top,0px)) 26px calc(26px + env(safe-area-inset-bottom,0px)); overflow-y: auto; color: white; border-left: 1px solid rgba(255,255,255,.14); background: linear-gradient(155deg,rgba(29,26,49,.98),rgba(10,9,18,.99)); box-shadow: -30px 0 90px rgba(0,0,0,.48); transform: translate3d(104%,0,0); transition: transform .38s cubic-bezier(.2,.8,.2,1); outline: 0; }
.mobile-navigation.is-open .mobile-navigation-backdrop { opacity: 1; }
.mobile-navigation.is-open .mobile-navigation-sheet { transform: translate3d(0,0,0); }
.mobile-navigation-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mobile-navigation-head img { width: 158px; height: auto; }
.mobile-navigation-close { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: white; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(255,255,255,.055); cursor: pointer; }
.mobile-navigation-close span { font: 300 30px/1 Inter,sans-serif; transform: translateY(-1px); }
.mobile-navigation-sheet > p { margin: 38px 0 18px; color: #8f92a3; font-size: 14px; line-height: 1.55; }
.mobile-navigation-links { display: grid; border-top: 1px solid var(--line); }
.mobile-navigation-links a { min-height: 62px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.mobile-navigation-links a::after { content: '↗'; color: #6f7284; font-size: 18px; transform: rotate(45deg); transition: color .2s ease,transform .2s ease; }
.mobile-navigation-links a span { color: #686b7d; font: 700 10px/1 Space Grotesk,sans-serif; }
.mobile-navigation-links a strong { font: 600 20px/1.15 Space Grotesk,sans-serif; }
.mobile-navigation-links a[aria-current="location"] { color: var(--cyan-bright); }
.mobile-navigation-links a[aria-current="location"] span { color: var(--cyan-bright); }
.mobile-navigation-links a[aria-current="location"]::after { color: var(--cyan-bright); transform: rotate(45deg) translateY(-3px); }
.mobile-navigation-cta { width: 100%; min-height: 56px; margin-top: auto; }
.mobile-navigation-contact { min-height: 48px; display: grid; place-items: center; margin-top: 8px; color: #a7a9b8; font-size: 14px; font-weight: 600; }
body.mobile-navigation-open { overflow: hidden; }

@media (max-width: 1050px) {
  :root { --header: calc(74px + env(safe-area-inset-top,0px)); }
  .site-header, .site-header.is-scrolled { height: var(--header); padding-top: env(safe-area-inset-top,0px); padding-inline: clamp(20px,3.4vw,34px); }
  .site-header.is-scrolled { background: rgba(13,12,24,.9); }
  .mobile-menu-toggle { min-width: 54px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-left: auto; padding: 0 14px; color: #e9eaf1; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.045); cursor: pointer; }
  .mobile-menu-toggle > span { font-size: 13px; font-weight: 700; }
  .mobile-menu-toggle > i { width: 20px; display: grid; gap: 5px; }
  .mobile-menu-toggle b { width: 20px; height: 1.5px; display: block; border-radius: 2px; background: currentColor; transition: transform .24s ease; }
  .mobile-menu-toggle[aria-expanded="true"] b:first-child { transform: translateY(3.25px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] b:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .site-header > .button { margin-left: 0; min-height: 48px; }
  .hero { padding-inline: clamp(22px,4vw,42px); }
  .value-section, .personalizer-section, .match-center, .admin-section, .sponsor-section, .pilot-section, .pricing-section, .contact-section { padding-inline: clamp(22px,4vw,42px); }
  .feature-heading { padding-inline: clamp(22px,4vw,42px); }
}

@media (min-width: 821px) and (max-width: 1050px) {
  .hero { grid-template-columns: minmax(0,1fr) minmax(300px,.7fr); gap: 24px; }
  .hero-copy h1 { font-size: clamp(54px,7vw,74px); }
  .hero-visual { min-height: 590px; transform: scale(.87); transform-origin: center right; }
  .personalizer-workspace { grid-template-columns: minmax(350px,.82fr) minmax(0,1.18fr); }
  .feature-panel { width: 82vw; flex-basis: 82vw; }
  .button, .mobile-menu-toggle, .device-switch button, .admin-sidebar button, .phase-tabs button { min-height: 48px; }
  .text-field input, .select-wrap select, .sales-form input:not([type="checkbox"]), .sales-form textarea, .admin-editor input, .admin-editor select { font-size: 16px; }
  .feature-copy li, .sponsor-copy li, .price-card li { font-size: 13px; line-height: 1.5; }
  .price-card > p { font-size: 14px; }
  .admin-benefit small { font-size: 12px; }
  .faq-card summary { font-size: 16px; }
  .faq-card p { font-size: 14px; }
  .sales-form > label, .form-row label, .contact-points span { font-size: 13px; }
}

@media (max-width: 820px) {
  :root { --header: calc(68px + env(safe-area-inset-top,0px)); }
  body { background: radial-gradient(circle at 88% 4%,rgba(9,171,192,.13),transparent 22rem),var(--bg); }
  .site-header, .site-header.is-scrolled { height: var(--header); padding-inline: 20px; }
  .menu-brand-logo { width: 138px; }
  .site-header > .button { min-height: 48px; padding-inline: 14px; font-size: 12px; }
  .mobile-menu-toggle { min-width: 52px; min-height: 48px; }

  .launch-gate, .audience-gate { min-height: 100dvh; padding-top: calc(24px + env(safe-area-inset-top,0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom,0px)); overflow-y: auto; }
  .launch-form input, .sales-form input:not([type="checkbox"]), .sales-form textarea, .text-field input, .select-wrap select, .admin-editor input, .admin-editor select { font-size: 16px; }
  .launch-form button, .gate-choices button, .button, .audience-button, .upload-zone, .color-controls label, .preset-row button, .device-switch button, .phase-tabs button, .admin-sidebar button, .admin-bottom button, .faq-card summary { min-height: 48px; }

  .hero { min-height: 100svh; padding: calc(var(--header) + 38px) 20px 70px; gap: 42px; }
  .hero-copy { max-width: 720px; }
  .hero-copy h1 { font-size: clamp(50px,11.6vw,76px); line-height: .96; }
  .hero-lead { max-width: 650px; font-size: 17px; line-height: 1.62; }
  .audience-switch { max-width: 650px; }
  .audience-button { min-height: 70px; padding: 13px 15px; }
  .audience-icon { width: 42px; height: 42px; }
  .audience-button small { font-size: 11px; }
  .audience-button strong { font-size: 15px; }
  .hero-actions { margin-top: 28px; }
  .hero-actions .button { min-height: 54px; }
  .text-link { min-height: 48px; display: inline-flex; align-items: center; font-size: 15px; }
  .hero-proof { font-size: 14px; }
  .hero-visual { width: 100%; min-height: 610px; }
  .hero-phone { transform: scale(.95) rotate(2deg); }
  .floating-tag { padding: 11px 13px; font-size: 10px; }
  .signal-strip { margin-top: -32px; margin-bottom: -38px; }
  .signal-group span { font-size: clamp(58px,13vw,96px); }

  h2 { font-size: clamp(42px,9.3vw,66px); line-height: .98; }
  .value-section, .personalizer-section, .match-center, .admin-section, .sponsor-section, .pilot-section, .pricing-section, .contact-section { padding-top: 104px; padding-bottom: 104px; }
  .value-copy > p:last-child, .personalizer-intro > p, .feature-heading > p, .match-center-heading > p:last-child, .admin-heading > p, .sponsor-copy > p:not(.eyebrow), .pilot-copy > p:not(.eyebrow), .pricing-heading > p:last-child, .contact-copy > p:not(.eyebrow), .closing-section > p:not(.eyebrow) { font-size: 16px; line-height: 1.7; }
  .section-index { top: 72px; left: 20px; font-size: 96px; }

  .channel-stack { min-height: 440px; }
  .channel-card { min-height: 106px; padding: 19px; }
  .channel-target { min-height: 172px; }
  .channel-target small, .channel-url { font-size: 12px; }

  .personalizer-intro { margin-bottom: 42px; }
  .personalizer-workspace { min-height: 0; border-radius: 18px; }
  .config-panel { padding: clamp(24px,5vw,34px); }
  .config-heading { margin-bottom: 24px; }
  .config-heading > span, .field-label { font-size: 14px; }
  .config-heading button { min-height: 44px; padding: 8px; font-size: 14px; }
  .text-field input, .select-wrap select { height: 54px; }
  .text-field input { height: 52px; }
  .text-field > span { top: 18px; font-size: 12px; }
  .field-help, .palette-note { font-size: 13px; }
  .upload-zone { min-height: 104px; }
  .upload-zone strong { font-size: 15px; }
  .upload-zone small { font-size: 12px; line-height: 1.45; }
  .upload-zone b { min-height: 40px; display: inline-flex; align-items: center; padding-inline: 13px; font-size: 12px; }
  .color-controls label { min-height: 62px; }
  .color-controls small { font-size: 12px; }
  .color-controls b { font-size: 13px; }
  .preset-row { gap: 10px; }
  .preset-row button { width: 48px; height: 42px; padding: 5px; }
  .config-submit { min-height: 56px; margin-top: 22px; }
  .privacy-note { font-size: 12px; line-height: 1.5; }
  .preview-stage { min-height: 720px; }
  .preview-meta { top: 18px; left: 18px; right: 18px; }
  .preview-meta > span { font-size: 10px; }
  .device-switch button { min-width: 100px; height: 48px; font-size: 12px; }
  .preview-device-wrap { padding-top: 58px; }

  .feature-story { padding-top: 104px; }
  .feature-heading { margin-bottom: 38px; }
  .mobile-swipe-hint { min-height: 48px; justify-content: flex-start; padding: 12px 20px 4px; font-size: 11px; }
  .feature-viewport { scroll-padding-inline: 17px; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  .feature-track { gap: 10px; padding-inline: 17px; }
  .feature-panel { width: calc(100vw - 34px); min-height: 690px; flex-basis: calc(100vw - 34px); gap: 26px; padding: 38px 22px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: rgba(255,255,255,.018); scroll-snap-align: center; scroll-snap-stop: always; }
  .feature-copy h3 { max-width: 620px; font-size: clamp(32px,6.4vw,44px); line-height: 1.04; }
  .feature-copy > p:not(.feature-kicker) { margin: 18px 0; font-size: 16px; line-height: 1.65; }
  .feature-copy li { font-size: 14px; line-height: 1.45; }
  .feature-canvas { min-height: 360px; border-radius: 18px; }
  .gallery-instruction { display: none; }

  .match-center-heading { margin-bottom: 40px; }
  .match-center-heading h2 { font-size: clamp(42px,9.3vw,66px); }
  .match-center-layout { gap: 32px; }
  .match-story-phone { width: min(315px,100%); }
  .match-story-phone .phone-frame { width: min(295px,calc(100vw - 48px)); margin-inline: auto; }
  .match-story-phone .phone-screen { height: min(608px,181vw); min-height: 550px; }
  .match-steps { width: calc(100% + 40px); display: flex; gap: 12px; margin-inline: -20px; padding: 4px 20px 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; }
  .match-steps::-webkit-scrollbar { display: none; }
  .match-step, .match-step.is-past, .match-step.is-future { min-height: 230px; flex: 0 0 min(72vw,520px); align-content: start; padding: 25px 23px; opacity: .62; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); cursor: pointer; scroll-snap-align: center; scroll-snap-stop: always; }
  .match-step.is-active { opacity: 1; border-color: rgba(34,211,231,.38); background: linear-gradient(145deg,rgba(9,171,192,.12),rgba(118,104,255,.045)); box-shadow: 0 18px 45px rgba(0,0,0,.22); }
  .match-step > span { font-size: 34px; }
  .match-step > small { margin-top: 16px; font-size: 10px; }
  .match-step h3 { font-size: 27px; }
  .match-step p { font-size: 15px; line-height: 1.62; }

  .admin-heading { gap: 18px; }
  .admin-scroll { margin-top: 42px; }
  .admin-demo { border-radius: 18px; }
  .admin-sidebar { gap: 8px; padding: 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 14px; scroll-snap-type: x proximity; scrollbar-width: none; touch-action: pan-x pan-y; }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-logo { flex: 0 0 auto; }
  .admin-sidebar button { min-width: 150px; min-height: 52px; flex: 0 0 auto; padding: 13px 16px; font-size: 14px; scroll-snap-align: center; }
  .admin-workspace { padding: 24px 18px; }
  .admin-editor input, .admin-editor select { min-height: 50px; }
  .admin-bottom { gap: 14px; }
  .admin-bottom small { font-size: 12px; line-height: 1.5; }
  .admin-bottom button { min-height: 52px; }
  .admin-benefits { width: calc(100% + 40px); display: flex; gap: 12px; margin-inline: -20px; padding: 14px 20px 10px; overflow-x: auto; border: 0; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; }
  .admin-benefits::-webkit-scrollbar { display: none; }
  .admin-benefit, .admin-benefit.is-active { min-height: 156px; flex: 0 0 min(76vw,520px); padding: 22px; opacity: .72; border: 1px solid var(--line) !important; border-radius: 16px; scroll-snap-align: center; scroll-snap-stop: always; }
  .admin-benefit.is-active { opacity: 1; }
  .admin-benefit strong { font-size: 16px; }
  .admin-benefit small { font-size: 14px; line-height: 1.5; }

  .sponsor-section { gap: 32px; }
  .sponsor-copy { order: -1; }
  .sponsor-copy li { font-size: 15px; line-height: 1.5; }
  .sponsor-note p { font-size: 13px; line-height: 1.55; }
  .sponsor-visual { width: 100%; min-height: 470px; margin-inline: 0; }
  .sponsor-focus { min-height: 470px; }
  .sponsor-visual::before { width: min(88vw,470px); height: min(88vw,470px); }

  .pilot-section { gap: 44px; }
  .pilot-copy > p:not(.eyebrow) { font-size: 16px; }
  .pilot-modules span { min-height: 42px; display: inline-flex; align-items: center; font-size: 11px; }
  .pilot-phone { justify-self: center; }
  .pilot-phone .phone-frame { width: min(290px,calc(100vw - 48px)); }

  .pricing-grid { gap: 16px; margin-top: 44px; }
  .price-card { padding: 30px 24px; border-radius: 18px; }
  .price-card > p { min-height: 0; font-size: 15px; line-height: 1.6; }
  .price-card li { font-size: 14px; line-height: 1.45; }
  .price-card .button { min-height: 56px; }
  .launch-price small, .launch-price b { font-size: 12px; }
  .price-footnote { font-size: 11px; }
  .faq.faq-scroll { margin-top: 72px; }
  .faq-sticky > h3 { margin-bottom: 24px; font-size: 30px; }
  .faq-stack { gap: 12px; }
  .faq-card, .faq-card.is-active, .faq-card.is-before, .faq-card.is-after { padding: 5px 18px 14px; transform: none; border-radius: 15px; }
  .faq-card summary { min-height: 64px; font-size: 16px; line-height: 1.35; }
  .faq-card p { margin-bottom: 12px; font-size: 14px; line-height: 1.65; }

  .contact-section { gap: 38px; }
  .contact-points span { min-height: 54px; font-size: 14px; }
  .sales-form { gap: 19px; padding: 28px 22px; }
  .sales-form-heading span, .sales-form-heading small { font-size: 12px; }
  .sales-form > label, .form-row label { gap: 9px; font-size: 14px; }
  .sales-form input:not([type="checkbox"]), .sales-form textarea { min-height: 54px; padding: 14px 15px; }
  .consent { min-height: 48px; align-items: center; font-size: 13px !important; }
  .consent input { width: 22px; height: 22px; }
  .form-note { font-size: 12px; line-height: 1.55; }
  .form-status { font-size: 13px; }
  .closing-section { min-height: 620px; padding: 104px 22px; }
  footer { min-height: 132px; padding: 26px 22px calc(26px + env(safe-area-inset-bottom,0px)); }
  footer p, footer > a:last-child { font-size: 13px; }
}

@media (max-width: 620px) {
  .site-header > .button { display: none; }
  .mobile-menu-toggle { margin-left: auto; }
  .mobile-navigation-sheet { top: auto; left: 0; right: 0; width: 100%; height: auto; max-height: min(780px,calc(100dvh - 10px)); min-height: 0; padding: 17px 20px calc(20px + env(safe-area-inset-bottom,0px)); border-top: 1px solid rgba(255,255,255,.15); border-left: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -28px 90px rgba(0,0,0,.5); transform: translate3d(0,104%,0); }
  .mobile-navigation-sheet::before { content: ''; width: 44px; height: 4px; align-self: center; margin: -5px 0 14px; border-radius: 4px; background: rgba(255,255,255,.2); }
  .mobile-navigation.is-open .mobile-navigation-sheet { transform: translate3d(0,0,0); }
  .mobile-navigation-head img { width: 142px; }
  .mobile-navigation-close { width: 46px; height: 46px; }
  .mobile-navigation-sheet > p { margin: 23px 0 12px; font-size: 13px; }
  .mobile-navigation-links { grid-template-columns: 1fr 1fr; gap: 8px; border-top: 0; }
  .mobile-navigation-links a { min-height: 58px; grid-template-columns: 27px 1fr; padding: 0 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
  .mobile-navigation-links a::after { display: none; }
  .mobile-navigation-links a strong { font-size: 16px; }
  .mobile-navigation-links a[aria-current="location"] { border-color: rgba(34,211,231,.38); background: rgba(9,171,192,.1); }
  .mobile-navigation-cta { margin-top: 14px; }
}

@media (max-width: 560px) {
  .site-header, .site-header.is-scrolled { padding-inline: 17px; }
  .menu-brand-logo { width: 132px; }
  .mobile-menu-toggle { padding-inline: 12px; }
  .hero { padding-inline: 18px; padding-bottom: 58px; }
  .hero-copy h1 { font-size: clamp(45px,13.6vw,62px); }
  .hero-lead { font-size: 16px; }
  .audience-switch { gap: 9px; }
  .audience-button { min-height: 68px; }
  .hero-actions .button { padding-inline: 17px; font-size: 13px; }
  .hero-proof { gap: 11px; font-size: 13px; }
  .hero-visual { min-height: 565px; margin-inline: -8px; }
  .hero-phone { transform: scale(.9) rotate(2deg); }
  .tag-news, .tag-ticket, .tag-community { display: none; }
  .tag-live { left: 1%; top: 29%; }
  .tag-pwa { right: 1%; top: 15%; }
  .tag-mvp { right: 0; bottom: 22%; }
  .signal-strip { margin-top: -22px; margin-bottom: -31px; }
  .signal-group span { font-size: 56px; }

  .value-section, .personalizer-section, .match-center, .admin-section, .sponsor-section, .pilot-section, .pricing-section, .contact-section { padding-inline: 18px; padding-top: 88px; padding-bottom: 88px; }
  .feature-heading { padding-inline: 18px; }
  .section-index { top: 60px; left: 18px; font-size: 82px; }
  h2, .match-center-heading h2 { font-size: clamp(39px,11vw,54px); }
  .eyebrow { font-size: 11px; line-height: 1.45; }
  .channel-stack { min-height: 410px; }
  .channel-card { width: 91%; }
  .channel-target { width: 94%; min-height: 160px; }
  .channel-target img { width: min(235px,82%); }

  .personalizer-section { padding-inline: 12px; }
  .personalizer-intro { padding-inline: 6px; }
  .config-panel { padding: 25px 18px; }
  .try-form-hint { grid-template-columns: 1fr 76px; }
  .try-form-hint svg { width: 76px; }
  .upload-zone { display: grid; grid-template-columns: 44px 1fr; }
  .upload-zone b { grid-column: 1 / -1; justify-content: center; width: 100%; margin: 3px 0 0; }
  .preview-stage { min-height: 690px; }
  .preview-meta { display: grid; gap: 10px; }
  .preview-meta > span { max-width: none; }
  .device-switch { width: 100%; }
  .device-switch button { min-width: 0; flex: 1; }
  .preview-device-wrap { padding-top: 88px; transform: scale(.92); }
  .app-icon-view { padding-top: 92px; }

  .feature-story { padding-top: 88px; }
  .feature-panel { min-height: 670px; padding: 32px 18px; }
  .feature-copy h3 { font-size: clamp(30px,8.4vw,38px); }
  .feature-canvas { min-height: 330px; }
  .match-story-phone .phone-frame, .pilot-phone .phone-frame { width: min(283px,calc(100vw - 42px)); }
  .match-story-phone .phone-screen { height: min(586px,181vw); min-height: 536px; }
  .match-steps { width: calc(100% + 36px); margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; }
  .match-step, .match-step.is-past, .match-step.is-future { flex-basis: 86vw; min-height: 244px; }

  .admin-demo { margin-inline: -6px; }
  .admin-logo img { width: 132px; }
  .admin-sidebar button { min-width: 144px; }
  .admin-top strong { font-size: 20px; }
  .admin-benefits { width: calc(100% + 36px); margin-inline: -18px; padding-inline: 18px; }
  .admin-benefit, .admin-benefit.is-active { flex-basis: 86vw; }
  .sponsor-copy h2 { font-size: clamp(39px,11vw,54px); }
  .sponsor-visual, .sponsor-focus { min-height: 430px; }
  .sponsor-app-card { width: min(285px,82vw); }
  .sponsor-report { width: min(215px,64vw); right: 0; }
  .pilot-phone > p { right: -8px; }

  .price-card { padding: 28px 20px; }
  .price { flex-wrap: wrap; }
  .price > strong { font-size: clamp(54px,17vw,68px); }
  .launch-price { align-items: flex-start; flex-direction: column; gap: 7px; }
  .founding-ribbon { position: static; width: fit-content; display: block; margin: -12px 0 18px; }
  .faq-card summary { font-size: 15px; }
  .sales-form { padding: 25px 18px; }
  .closing-section { min-height: 570px; padding-inline: 18px; }
  footer { align-items: flex-start; flex-direction: column; gap: 12px; }
  footer p { order: initial; width: auto; }
  footer > a:last-child { min-height: 44px; display: inline-flex; align-items: center; margin-left: 0; }

  .launch-content h1 { font-size: clamp(44px,13.5vw,60px); }
  .launch-form > label { font-size: 13px; }
  .launch-form > div { grid-template-columns: 1fr; }
  .launch-form input, .launch-form button { width: 100%; height: 52px; }
  .gate-content h1 { font-size: clamp(44px,14vw,62px); }
  .gate-lead { font-size: 15px; }
  .gate-choices button { min-height: 96px; }
}

@media (max-width: 360px) {
  .mobile-menu-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mobile-menu-toggle { width: 48px; padding: 0; }
  .mobile-navigation-sheet { padding-inline: 15px; }
  .mobile-navigation-links a { padding-inline: 9px; }
  .mobile-navigation-links a strong { font-size: 15px; }
  .hero, .value-section, .match-center, .admin-section, .sponsor-section, .pilot-section, .pricing-section, .contact-section { padding-inline: 15px; }
  .hero-copy h1 { font-size: 43px; }
  .color-controls { grid-template-columns: 1fr; }
  .match-steps, .admin-benefits { width: calc(100% + 30px); margin-inline: -15px; padding-inline: 15px; }
  .match-step, .match-step.is-past, .match-step.is-future, .admin-benefit, .admin-benefit.is-active { flex-basis: 88vw; }
}

@media (max-width: 820px) and (max-height: 620px) {
  .launch-gate, .audience-gate { place-items: start center; }
  .launch-content, .gate-content { padding-block: 10px 24px; }
  .launch-logo, .gate-logo { width: 150px; }
  .launch-kicker, .gate-kicker { margin-top: 13px; }
  .launch-content h1, .gate-content h1 { margin-top: 10px; font-size: 42px; }
  .coming-soon { margin-top: 14px; }
  .launch-form { margin-top: 20px; }
  .gate-lead { margin-top: 10px; }
  .gate-choices { margin-top: 18px; }
}

@media (hover: none) and (pointer: coarse) {
  .button:hover, .audience-button:hover, .gate-choices button:hover, .admin-sidebar button:hover { transform: none; }
  .button:active, .audience-button:active, .gate-choices button:active, .mobile-menu-toggle:active, .mobile-navigation-links a:active { transform: scale(.98); }
  .hero-phone:hover { transform: scale(.9) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-navigation-backdrop, .mobile-navigation-sheet, .mobile-menu-toggle b { transition: none !important; }
  .feature-viewport, .match-steps, .admin-sidebar, .admin-benefits { scroll-behavior: auto !important; }
}

/* Revision 12 — mobile-first fit, guided swiping and step-by-step personalizer */
html, body { max-width: 100%; overflow-x: clip; }
main, main > section, .personalizer-workspace, .preview-stage, .match-center-layout, .admin-sticky, .admin-demo, .admin-workspace, .sponsor-section, .pilot-section, .pricing-grid, .contact-section { min-width: 0; }
img, svg { max-width: 100%; }
h1, h2, h3, p, li, label, small, strong { overflow-wrap: break-word; }

.config-mobile-progress, .config-step-title, .config-step-actions, .swipe-cue { display: none; }
.config-step { display: block; }
.field-label em { margin-left: 5px; color: #727587; font-size: .72em; font-style: normal; font-weight: 500; }

@keyframes swipeCueGesture {
  0%, 18% { transform: translate3d(-3px,0,0); }
  58%, 78% { transform: translate3d(13px,0,0); }
  100% { transform: translate3d(-3px,0,0); }
}

@keyframes configStepIn {
  from { opacity: 0; transform: translate3d(18px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@media (max-width: 820px) {
  .config-panel { scroll-margin-top: calc(var(--header) + 14px); }
  .config-heading { margin-bottom: 16px; }
  .try-form-hint { display: none; }
  .config-mobile-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px 13px; margin: 0 0 24px; padding: 15px 16px; border: 1px solid rgba(34,211,231,.2); border-radius: 14px; background: linear-gradient(135deg,rgba(9,171,192,.1),rgba(118,104,255,.04)); }
  .config-mobile-progress > span { color: #8e92a4; font: 700 10px/1 Space Grotesk; letter-spacing: .09em; }
  .config-mobile-progress > span b { color: var(--cyan-bright); font-size: 15px; }
  .config-mobile-progress > div { height: 3px; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.1); }
  .config-mobile-progress > div i { display: block; width: 33.333%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--cyan-bright)); box-shadow: 0 0 12px rgba(34,211,231,.45); transition: width .42s cubic-bezier(.2,.8,.2,1); }
  .config-mobile-progress > strong { grid-column: 1 / -1; color: white; font: 700 17px/1.2 Space Grotesk; }
  .config-step[hidden] { display: none !important; }
  .config-step.is-active { display: block; animation: configStepIn .42s cubic-bezier(.2,.8,.2,1) both; }
  .config-step-title { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: #f0f1f6; font: 700 21px/1.15 Space Grotesk; letter-spacing: -.025em; }
  .config-step-title span { min-width: 34px; color: var(--cyan-bright); font-size: 12px; letter-spacing: .08em; }
  .config-step .field-label:first-of-type { margin-top: 0; }
  .config-step-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 25px; }
  .config-step-actions > small { color: #787b8d; font-size: 11px; }
  .config-step-actions button { min-width: 112px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 16px; color: #dfe0e7; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.035); font: 700 13px/1 Space Grotesk; cursor: pointer; }
  .config-step-actions button[data-config-next] { margin-left: auto; color: #061315; border-color: transparent; background: var(--cyan-bright); box-shadow: 0 12px 30px rgba(9,171,192,.17); }
  .config-step-actions button span { font-size: 18px; }
  .config-step-actions-final { margin-bottom: -8px; }
  .config-step-actions-final small { order: 2; text-align: right; }
  .config-submit { margin-top: 22px; }

  .preview-stage { min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 18px 16px 28px; overflow: hidden; }
  .preview-meta { position: relative; top: auto; left: auto; right: auto; flex: 0 0 auto; }
  .preview-device-wrap { width: 100%; display: grid; place-items: center; flex: 0 0 auto; padding-top: 28px; transform: none; transform-origin: center top; }
  .custom-phone .phone-frame { width: min(283px,calc(100vw - 58px)); margin-inline: auto; }
  .custom-phone .phone-screen { height: auto; min-height: 0; aspect-ratio: 265 / 592; }
  .app-icon-view { width: 100%; padding-top: 30px; }
  .desktop-monitor { width: min(100%,680px); transform: none; }
  .preview-glow { width: min(78vw,420px); height: min(78vw,420px); top: 50%; left: 50%; transform: translate(-50%,-43%); }

  .swipe-cue { position: relative; z-index: 8; min-height: 58px; display: flex; align-items: center; gap: 13px; width: fit-content; max-width: calc(100% - 32px); margin: 0 16px 9px; padding: 9px 13px 9px 10px; color: #d8dae3; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; background: rgba(22,20,37,.88); box-shadow: 0 14px 34px rgba(0,0,0,.22); backdrop-filter: blur(14px); }
  .swipe-cue > span:last-child { display: grid; gap: 3px; }
  .swipe-cue strong { color: white; font: 700 12px/1 Space Grotesk; }
  .swipe-cue small { color: #8d90a2; font-size: 10px; line-height: 1.25; }
  .swipe-cue-motion { width: 44px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 1px; flex: 0 0 auto; color: var(--cyan-bright); border-radius: 11px; background: rgba(9,171,192,.1); animation: swipeCueGesture 2.1s cubic-bezier(.45,0,.2,1) infinite; }
  .swipe-cue-motion svg { width: 20px; height: 20px; }
  .swipe-cue-motion svg path { stroke-width: 1.65; }
  .swipe-cue-motion i { font-size: 16px; font-style: normal; }
  .swipe-cue.is-used { opacity: .56; transition: opacity .35s ease; }

  .feature-viewport { position: relative; }
  .feature-track { gap: 12px; padding-left: 17px; padding-right: 62px; }
  .feature-panel { --feature-panel-opacity: .52; width: min(calc(100vw - 64px),680px); flex-basis: min(calc(100vw - 64px),680px); scroll-snap-align: start; }
  .feature-panel.is-feature-active { --feature-panel-opacity: 1; }

  .match-swipe-cue { grid-column: 1; margin: -8px 0 1px; }
  .match-steps { padding-right: 64px; }
  .match-step, .match-step.is-past, .match-step.is-future { flex-basis: min(78vw,520px); scroll-snap-align: start; }
  .match-step:not(.is-active) { opacity: .46; }

  .admin-tabs-cue { margin: 0 0 10px; }
  .admin-sidebar { padding-right: 58px; }
  .admin-sidebar button:not(.is-active) { opacity: .62; }
  .admin-benefits-cue { margin: 13px 0 0; }
  .admin-benefits { padding-right: 64px; }
  .admin-benefit, .admin-benefit.is-active { flex: 0 0 min(78vw,520px); scroll-snap-align: start; }
  .admin-benefit:not(.is-active) { opacity: .48; }

  .feature-canvas, .sponsor-visual, .sponsor-focus, .pilot-phone, .price-card, .sales-form { max-width: 100%; }
  .admin-editor, .admin-stats, .admin-bottom, .color-controls, .form-row { min-width: 0; }
  .pilot-phone > p { right: 0; max-width: calc(100% - 12px); }
}

@media (max-width: 560px) {
  .personalizer-workspace { overflow: hidden; }
  .config-panel { min-height: 475px; padding: 22px 18px 25px; }
  .config-mobile-progress { margin-inline: -2px; }
  .config-step-title { font-size: 20px; }
  .preview-stage { padding-inline: 12px; }
  .preview-meta { display: grid; gap: 10px; }
  .preview-meta > span { max-width: none; }
  .preview-device-wrap, .app-icon-view { padding-top: 22px; }
  .custom-phone .phone-frame { width: min(283px,calc(100vw - 48px)); }

  .feature-track { padding-left: 15px; padding-right: 58px; }
  .feature-panel { width: calc(100vw - 58px); flex-basis: calc(100vw - 58px); min-height: 650px; padding: 30px 18px; }
  .feature-copy > p:not(.feature-kicker) { font-size: 15px; }
  .feature-canvas { min-height: 315px; }

  .match-steps, .admin-benefits { padding-right: 58px; }
  .match-step, .match-step.is-past, .match-step.is-future, .admin-benefit, .admin-benefit.is-active { flex-basis: calc(100vw - 70px); }
  .admin-demo { max-width: 100%; margin-inline: 0; }
  .admin-sidebar { padding-right: 54px; }
  .admin-sidebar button { min-width: min(42vw,150px); }

  .sponsor-app-card { max-width: calc(100vw - 68px); }
  .sponsor-report { max-width: 62vw; }
  .pilot-phone .phone-frame, .match-story-phone .phone-frame { max-width: calc(100vw - 42px); }
}

@media (max-width: 360px) {
  .config-panel { padding-inline: 15px; }
  .config-step-actions { gap: 8px; }
  .config-step-actions > small { display: none; }
  .config-step-actions button { min-width: 105px; }
  .swipe-cue { max-width: calc(100% - 24px); margin-inline: 12px; }
  .feature-panel { width: calc(100vw - 50px); flex-basis: calc(100vw - 50px); }
  .match-step, .match-step.is-past, .match-step.is-future, .admin-benefit, .admin-benefit.is-active { flex-basis: calc(100vw - 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-cue-motion, .config-step.is-active { animation: none !important; }
  .config-mobile-progress > div i { transition: none !important; }
}

/* Revision 12 — magnetic desktop gallery and a readable FAQ accordion */
@media (min-width: 821px) {
  .feature-track {
    gap: clamp(5px,.45vw,8px);
    padding-inline: 8vw;
  }

  .feature-panel {
    width: 84vw;
    flex-basis: 84vw;
  }

  .faq.faq-scroll {
    height: auto;
    max-width: 1080px;
    margin-top: 120px;
  }

  .faq-sticky {
    position: relative;
    top: auto;
    min-height: 0;
  }

  .faq-sticky > h3 {
    margin-bottom: 38px;
    font: 700 clamp(38px,3.2vw,52px)/1.05 Space Grotesk;
    letter-spacing: -.035em;
  }

  .faq-stack {
    position: relative;
    min-height: 0;
    display: grid;
    gap: 15px;
    perspective: none;
  }

  .faq-card,
  .faq-card.is-active,
  .faq-card.is-before,
  .faq-card.is-after {
    position: relative;
    inset: auto;
    min-height: 0;
    padding: 0 32px;
    opacity: 1;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 20px;
    background: linear-gradient(145deg,rgba(29,27,47,.82),rgba(15,14,26,.94));
    box-shadow: 0 18px 52px rgba(0,0,0,.2);
    transform: none;
    pointer-events: auto;
    transition: border-color .38s ease, background .38s ease, box-shadow .38s ease, transform .38s ease;
  }

  .faq-card.is-active {
    border-color: rgba(34,211,231,.56) !important;
    background: linear-gradient(145deg,rgba(19,54,61,.68),rgba(18,16,31,.97) 58%);
    box-shadow: 0 24px 70px rgba(0,0,0,.32), 0 0 0 1px rgba(34,211,231,.08), 0 0 48px rgba(9,171,192,.18);
    transform: translateY(-2px);
  }

  .faq-card summary {
    min-height: 94px;
    padding: 4px 0;
    color: #f2f3f7;
    font: 650 clamp(20px,1.55vw,24px)/1.28 Space Grotesk;
    letter-spacing: -.018em;
  }

  .faq-card summary span {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(34,211,231,.28);
    border-radius: 50%;
    background: rgba(9,171,192,.075);
    font-size: 25px;
    transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
  }

  .faq-card.is-active summary span {
    background: var(--cyan);
    color: #071113;
    box-shadow: 0 0 24px rgba(34,211,231,.28);
  }

  .faq-card p {
    max-width: 900px;
    margin: 0 72px 31px 0;
    color: #b8bac8;
    font-size: 17px;
    line-height: 1.75;
  }

  .faq-progress {
    display: none;
  }
}

/* Revision 13 — hero atmosphere on the preview gate and smarter headings */
.launch-gate {
  background:
    radial-gradient(circle at 82% 8%,rgba(9,171,192,.18),transparent 31rem),
    radial-gradient(circle at 8% 72%,rgba(118,104,255,.13),transparent 27rem),
    linear-gradient(180deg,#0d0c18 0%,#0a0912 100%);
}

.launch-gate::before {
  content: '';
  position: absolute;
  z-index: -4;
  inset: 0;
  background: linear-gradient(112deg,rgba(255,255,255,.018),transparent 36%,rgba(9,171,192,.055) 72%,transparent);
  pointer-events: none;
}

.launch-gate::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at center,transparent 34%,rgba(5,4,11,.48) 100%);
  pointer-events: none;
}

.launch-grid {
  opacity: .16;
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom,black,transparent 92%);
}

.launch-glow-one {
  width: min(96vw,1240px);
  height: min(82vw,980px);
  right: -24%;
  top: -21%;
  opacity: .58;
}

.launch-glow-two {
  width: min(72vw,860px);
  height: min(66vw,760px);
  left: -20%;
  bottom: -28%;
}

.keep-heading-line {
  display: inline-block;
  white-space: nowrap;
}

@media (min-width: 821px) {
  .launch-content {
    width: min(920px,100%);
    padding-block: clamp(22px,3vh,42px);
  }

  .launch-logo {
    width: min(300px,62vw);
  }

  .launch-kicker {
    margin: 36px 0 18px;
  }

  .launch-content h1 {
    line-height: .92;
  }

  .coming-soon {
    margin-top: 36px;
  }

  .launch-form {
    width: min(590px,100%);
    gap: 12px;
    margin-top: 50px;
  }

  .launch-form > label {
    padding-left: 8px;
    font-size: 13px;
  }

  .launch-form > div {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    padding: 8px;
    border-radius: 17px;
  }

  .launch-form input {
    height: 54px;
    padding-inline: 18px;
    font-size: 16px;
  }

  .launch-form button {
    min-width: 142px;
    height: 54px;
    padding-inline: 22px;
  }

  .launch-domain {
    margin-top: 20px;
  }
}

/* Revision 15 — light-led audience gateway and fan benefits story */
.audience-gate {
  --gate-x: 50vw;
  --gate-y: 46vh;
  --gate-dx: 0px;
  --gate-dy: 0px;
  --gate-grid-x: 0px;
  --gate-grid-y: 0px;
  --gate-light-one-x: 0px;
  --gate-light-one-y: 0px;
  --gate-light-two-x: 0px;
  --gate-light-two-y: 0px;
  --gate-ghost-one-x: 0px;
  --gate-ghost-one-y: 0px;
  --gate-ghost-two-x: 0px;
  --gate-ghost-two-y: 0px;
  --wave-x: 50vw;
  --wave-y: 50vh;
  padding: clamp(24px,4vw,62px);
  background:
    radial-gradient(circle at 50% 115%,rgba(118,104,255,.11),transparent 34%),
    linear-gradient(180deg,#080811 0%,#0d0c18 55%,#090912 100%);
  transition: opacity .44s ease, visibility .44s ease;
}

.audience-gate::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  background: radial-gradient(circle 460px at var(--gate-x) var(--gate-y),rgba(85,241,247,.16),rgba(9,171,192,.07) 34%,transparent 72%);
  pointer-events: none;
  transition: background .18s linear;
}

.audience-gate::after {
  content: '';
  position: absolute;
  z-index: 8;
  inset: 0;
  border: 1px solid rgba(255,255,255,.035);
  box-shadow: inset 0 0 170px rgba(0,0,0,.7);
  pointer-events: none;
}

.audience-gate.is-selecting .gate-content { transform: scale(.985); }
.audience-gate.is-leaving { opacity: 0; visibility: hidden; }

.gate-grid {
  z-index: -4;
  opacity: .09;
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 75% 82% at 50% 45%,black 8%,transparent 82%);
  transform: translate3d(var(--gate-grid-x),var(--gate-grid-y),0) scale(1.04);
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
}

.gate-aurora {
  z-index: -3;
  width: min(154vw,2050px);
  height: min(108vw,1420px);
  left: 50%;
  top: 46%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 49%,rgba(157,255,255,.14) 0 4%,rgba(34,211,231,.31) 15%,rgba(9,171,192,.16) 33%,rgba(118,104,255,.11) 49%,transparent 69%);
  filter: blur(72px) saturate(118%);
  opacity: .88;
  animation: none;
  transform: translate3d(calc(-50% + var(--gate-dx)),calc(-50% + var(--gate-dy)),0) scale(.92);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}

.audience-gate.is-ready .gate-aurora { animation: gateLightBreathe 8s ease-in-out infinite alternate; }

.gate-light {
  position: absolute;
  z-index: -2;
  width: min(58vw,760px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .2;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.gate-light-one {
  right: -19%;
  top: -30%;
  background: #22d3e7;
  transform: translate3d(var(--gate-light-one-x),var(--gate-light-one-y),0);
}

.gate-light-two {
  left: -18%;
  bottom: -39%;
  background: #7668ff;
  transform: translate3d(var(--gate-light-two-x),var(--gate-light-two-y),0);
}

.gate-ghosts { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.gate-ghosts span {
  position: absolute;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.055);
  font: 700 clamp(130px,20vw,330px)/.8 Space Grotesk,sans-serif;
  letter-spacing: -.08em;
  white-space: nowrap;
  transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.gate-ghosts span:first-child { left: -3vw; top: 11%; transform: translate3d(var(--gate-ghost-one-x),var(--gate-ghost-one-y),0); }
.gate-ghosts span:last-child { right: -2vw; bottom: 7%; transform: translate3d(var(--gate-ghost-two-x),var(--gate-ghost-two-y),0); }

.gate-transition-wave {
  position: absolute;
  z-index: 2;
  left: var(--wave-x);
  top: var(--wave-y);
  width: 24px;
  height: 24px;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(56,228,239,.98),rgba(9,171,192,.9) 28%,rgba(13,12,24,.98) 72%);
  transform: translate(-50%,-50%) scale(0);
  transition: transform .78s cubic-bezier(.5,0,.1,1),opacity .14s ease;
  pointer-events: none;
}
.audience-gate[data-selection="fan"] .gate-transition-wave { background: radial-gradient(circle,rgba(122,244,249,.98),rgba(9,171,192,.92) 30%,rgba(10,9,20,.98) 72%); }
.audience-gate[data-selection="club"] .gate-transition-wave { background: radial-gradient(circle,rgba(172,164,255,.98),rgba(90,77,222,.9) 30%,rgba(10,9,20,.98) 72%); }
.audience-gate.is-selecting .gate-transition-wave { opacity: 1; transform: translate(-50%,-50%) scale(300); }

.gate-content {
  position: relative;
  z-index: 4;
  width: min(1160px,100%);
  animation: none;
  transform: none;
  transition: transform .58s cubic-bezier(.2,.8,.2,1),opacity .4s ease;
}

.gate-topline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  opacity: 0;
  transform: translate3d(0,-22px,0);
}
.gate-topline > span { display: flex; align-items: center; gap: 10px; color: #85899a; font: 700 10px/1 Space Grotesk,sans-serif; letter-spacing: .16em; }
.gate-topline > span i { width: 30px; height: 1px; background: linear-gradient(90deg,transparent,var(--cyan-bright)); box-shadow: 0 0 12px rgba(34,211,231,.5); }
.gate-logo { width: clamp(176px,17vw,235px); }

.gate-kicker { margin: clamp(38px,6vh,72px) 0 0; opacity: 0; transform: translate3d(0,18px,0); }
.gate-title-mask { overflow: hidden; margin-top: 6px; padding: 0 .08em .1em; }
.gate-content .gate-title-mask h1 { margin: 0; font-size: clamp(72px,10vw,148px); line-height: .88; letter-spacing: -.065em; }
.gate-title-mask h1 span { display: block; transform: translate3d(0,112%,0); }
.gate-lead { max-width: 660px; margin-top: 21px; opacity: 0; transform: translate3d(0,18px,0); }

.gate-choices {
  width: 100%;
  display: flex;
  gap: 12px;
  margin-top: clamp(34px,5vh,56px);
}

.gate-choices .gate-choice {
  --choice-x: 50%;
  --choice-y: 50%;
  min-width: 0;
  min-height: 168px;
  flex: 1 1 50%;
  grid-template-columns: 62px minmax(0,1fr) auto;
  gap: 22px;
  padding: 30px 32px;
  opacity: 0;
  border-color: rgba(255,255,255,.14);
  border-radius: 22px;
  background: linear-gradient(135deg,rgba(26,24,43,.78),rgba(12,12,23,.7));
  box-shadow: 0 30px 90px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.035);
  transform: translate3d(0,42px,0);
  backdrop-filter: blur(24px);
  transition: flex-grow .55s cubic-bezier(.16,1,.3,1),transform .48s cubic-bezier(.16,1,.3,1),opacity .38s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease;
}

.gate-choice::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,transparent 12%,rgba(255,255,255,.075) 48%,transparent 80%);
  opacity: 0;
  transform: translateX(-55%);
  transition: transform .7s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.gate-choices .gate-choice::before { display: none; }
.gate-choice-glow { position: absolute; z-index: 0; inset: 0; opacity: 0; background: radial-gradient(circle 180px at var(--choice-x) var(--choice-y),rgba(34,211,231,.21),transparent 72%); transition: opacity .32s ease; }
.gate-choice-club .gate-choice-glow { background: radial-gradient(circle 190px at var(--choice-x) var(--choice-y),rgba(118,104,255,.22),transparent 72%); }

.gate-choices .gate-choice:hover,.gate-choices .gate-choice:focus-visible {
  flex-grow: 1.12;
  transform: translate3d(0,-5px,0) scale(1.006);
  border-color: rgba(34,211,231,.54);
  background: linear-gradient(135deg,rgba(25,45,55,.82),rgba(15,14,29,.82));
  box-shadow: 0 34px 100px rgba(0,0,0,.34),0 0 55px rgba(9,171,192,.13),inset 0 1px rgba(255,255,255,.08);
}
.gate-choices .gate-choice-club:hover,.gate-choices .gate-choice-club:focus-visible { border-color: rgba(143,132,255,.55); background: linear-gradient(135deg,rgba(43,39,86,.8),rgba(15,14,29,.84)); }
.gate-choices:has(.gate-choice:hover) .gate-choice:not(:hover),.gate-choices:has(.gate-choice:focus-visible) .gate-choice:not(:focus-visible) { opacity: .57; }
.gate-choice:hover::after,.gate-choice:focus-visible::after { opacity: 1; transform: translateX(44%); }
.gate-choice:hover .gate-choice-glow,.gate-choice:focus-visible .gate-choice-glow { opacity: 1; }

.gate-choice .gate-choice-icon { position: relative; z-index: 1; width: 62px; height: 62px; display: grid; place-items: center; gap: 0; border-radius: 18px; }
.gate-choice .gate-choice-icon svg { width: 30px; height: 30px; }
.gate-choices .gate-choice:hover .gate-choice-icon,.gate-choices .gate-choice:focus-visible .gate-choice-icon { transform: translate3d(0,-3px,0) scale(1.055); }
.gate-choice-club:hover .gate-choice-icon,.gate-choice-club:focus-visible .gate-choice-icon { color: #0d0c18; background: #9187ff; }

.gate-choice .gate-choice-copy { position: relative; z-index: 1; min-width: 0; display: grid; gap: 8px; }
.gate-choice .gate-choice-copy small { color: var(--cyan-bright); font-size: 10px; }
.gate-choice-club .gate-choice-copy small { color: #aaa3ff; }
.gate-choice .gate-choice-copy strong { font-size: clamp(22px,2vw,30px); white-space: nowrap; }
.gate-choice .gate-choice-copy em { color: #9295a6; font-size: 13px; line-height: 1.45; font-style: normal; }
.gate-choice > i { font-size: 36px; }
.gate-note { opacity: 0; transform: translate3d(0,12px,0); }
.gate-note span { color: #afb2c1; font-weight: 700; letter-spacing: .08em; }

.audience-gate.is-ready .gate-topline { animation: gateElementIn .72s .05s cubic-bezier(.16,1,.3,1) forwards; }
.audience-gate.is-ready .gate-kicker { animation: gateElementIn .72s .16s cubic-bezier(.16,1,.3,1) forwards; }
.audience-gate.is-ready .gate-title-mask h1 span { animation: gateTitleReveal .9s .2s cubic-bezier(.16,1,.3,1) forwards; }
.audience-gate.is-ready .gate-lead { animation: gateElementIn .72s .36s cubic-bezier(.16,1,.3,1) forwards; }
.audience-gate.is-ready .gate-choice:first-child { animation: gateChoiceIn .78s .46s cubic-bezier(.16,1,.3,1) forwards; }
.audience-gate.is-ready .gate-choice:last-child { animation: gateChoiceIn .78s .56s cubic-bezier(.16,1,.3,1) forwards; }
.audience-gate.is-ready .gate-note { animation: gateElementIn .65s .7s cubic-bezier(.16,1,.3,1) forwards; }

.audience-gate.is-selecting .gate-choice:not(.is-chosen) { opacity: 0 !important; transform: translate3d(0,14px,0) scale(.96) !important; }
.audience-gate.is-selecting .gate-choice.is-chosen { z-index: 4; opacity: 1 !important; transform: translate3d(0,-3px,0) scale(1.035) !important; border-color: rgba(255,255,255,.68); box-shadow: 0 0 90px rgba(34,211,231,.28); }
.audience-gate.is-selecting .gate-topline,.audience-gate.is-selecting .gate-kicker,.audience-gate.is-selecting .gate-title-mask,.audience-gate.is-selecting .gate-lead,.audience-gate.is-selecting .gate-note { opacity: .16; transition: opacity .28s ease; }

@keyframes gateElementIn { to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes gateTitleReveal { to { transform: translate3d(0,0,0); } }
@keyframes gateChoiceIn { to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes gateLightBreathe {
  0% { transform: translate3d(calc(-50% + var(--gate-dx)),calc(-50% + var(--gate-dy)),0) scale(.9); opacity: .76; }
  100% { transform: translate3d(calc(-50% + var(--gate-dx)),calc(-50% + var(--gate-dy)),0) scale(1.02); opacity: .96; }
}

.fan-parallax {
  --fan-echo-one-x: 42vw;
  --fan-echo-two-x: -36vw;
  --fan-echo-three-x: 24vw;
  position: relative;
  height: 300vh;
  min-height: 2100px;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at 79% 42%,rgba(9,171,192,.1),transparent 29rem),
    radial-gradient(circle at 16% 71%,rgba(118,104,255,.08),transparent 26rem),
    linear-gradient(180deg,rgba(10,9,18,.1),#0a0913 14%,#0c0b17 84%,rgba(13,12,24,.1));
}

.fan-parallax::before,.fan-parallax::after { content: ''; position: absolute; z-index: 5; left: 0; right: 0; height: 150px; pointer-events: none; }
.fan-parallax::before { top: 0; background: linear-gradient(#0d0c18,transparent); }
.fan-parallax::after { bottom: 0; background: linear-gradient(transparent,#0d0c18); }
.fan-parallax-light { position: absolute; z-index: -2; left: 58%; top: 33%; width: min(74vw,1050px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(34,211,231,.18),rgba(9,171,192,.07) 37%,rgba(118,104,255,.035) 55%,transparent 72%); filter: blur(70px); transform: translate(-50%,-50%); }

.fan-echoes { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.fan-echo { position: absolute; display: block; color: transparent; -webkit-text-stroke: 1px rgba(91,233,242,.075); font: 700 clamp(100px,14vw,220px)/.82 Space Grotesk,sans-serif; letter-spacing: -.075em; white-space: nowrap; will-change: transform; }
.fan-echo-one { top: 9%; left: -52vw; transform: translate3d(var(--fan-echo-one-x),0,0); }
.fan-echo-two { top: 45%; right: -46vw; transform: translate3d(var(--fan-echo-two-x),0,0); }
.fan-echo-three { bottom: 9%; left: -37vw; transform: translate3d(var(--fan-echo-three-x),0,0); }

.fan-sticky { position: sticky; z-index: 1; top: 0; width: min(1400px,100%); height: 100vh; min-height: 680px; display: grid; grid-template-columns: minmax(0,.86fr) minmax(500px,1.14fr); align-items: center; gap: clamp(50px,7vw,118px); margin: 0 auto; padding: 110px max(28px,calc((100vw - var(--max)) / 2)) 64px; }
.fan-intro { position: relative; z-index: 2; }
.fan-intro h2 { margin-top: 22px; font-size: clamp(54px,5.6vw,84px); line-height: .94; letter-spacing: -.055em; }
.fan-intro > p:not(.eyebrow) { max-width: 565px; margin-top: 31px; color: #aaadbd; font-size: clamp(16px,1.45vw,19px); line-height: 1.75; }
.fan-micro-proof { width: fit-content; display: flex; align-items: center; gap: 10px; margin-top: 30px; padding: 10px 14px; color: #c7cad6; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(255,255,255,.025); font-size: 12px; }
.fan-micro-proof i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-bright); box-shadow: 0 0 18px rgba(34,211,231,.7); }

.fan-story { position: relative; min-height: 510px; overflow: hidden; border: 1px solid rgba(255,255,255,.105); border-radius: 28px; background: linear-gradient(145deg,rgba(27,25,46,.76),rgba(12,11,22,.72)); box-shadow: 0 38px 110px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(24px); }
.fan-story::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 340px at 28% 22%,rgba(34,211,231,.09),transparent 72%); pointer-events: none; }
.fan-story-label { position: absolute; z-index: 4; top: 25px; left: 29px; right: 29px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.fan-story-label span,.fan-story-label b { color: var(--cyan-bright); font: 700 13px/1 Space Grotesk,sans-serif; }
.fan-story-label b { color: #55596b; }
.fan-story-label small { color: #737688; font: 700 9px/1 Space Grotesk,sans-serif; letter-spacing: .14em; }

.fan-scenes { position: absolute; inset: 65px 0 72px; overflow: hidden; mask-image: linear-gradient(transparent,black 14%,black 86%,transparent); }
.fan-scene { --fan-scene-y: 112px; --fan-scene-opacity: 0; --fan-scene-blur: 12px; --fan-scene-scale: .925; position: absolute; inset: 0; display: grid; grid-template-columns: 68px 1fr; align-content: center; column-gap: 22px; padding: 34px 42px; opacity: var(--fan-scene-opacity); filter: blur(var(--fan-scene-blur)); transform: translate3d(0,var(--fan-scene-y),0) scale(var(--fan-scene-scale)); transform-origin: center; will-change: transform,opacity,filter; pointer-events: none; }
.fan-scene:first-child { --fan-scene-y: 0px; --fan-scene-opacity: 1; --fan-scene-blur: 0px; --fan-scene-scale: 1; }
.fan-scene > span { position: absolute; right: 28px; top: 15px; color: rgba(255,255,255,.025); font: 700 122px/1 Space Grotesk,sans-serif; letter-spacing: -.08em; }
.fan-scene-icon { position: relative; z-index: 1; width: 68px; height: 68px; display: grid; place-items: center; grid-row: 1 / span 3; color: var(--cyan-bright); border: 1px solid rgba(34,211,231,.25); border-radius: 20px; background: rgba(9,171,192,.085); box-shadow: 0 0 38px rgba(9,171,192,.08); }
.fan-scene-icon svg { width: 31px; height: 31px; }
.fan-scene h3 { position: relative; z-index: 1; margin: 0; font: 700 clamp(38px,4vw,58px)/.98 Space Grotesk,sans-serif; letter-spacing: -.05em; }
.fan-scene p { position: relative; z-index: 1; max-width: 570px; margin: 20px 0 0; color: #b0b3c2; font-size: clamp(15px,1.25vw,17px); line-height: 1.72; }
.fan-scene > small { position: relative; z-index: 1; margin-top: 23px; color: #747789; font: 700 9px/1.4 Space Grotesk,sans-serif; letter-spacing: .12em; }
.fan-scene.is-active .fan-scene-icon { border-color: rgba(34,211,231,.52); background: rgba(9,171,192,.15); box-shadow: 0 0 42px rgba(9,171,192,.15); }

.fan-story-progress { position: absolute; z-index: 4; left: 29px; right: 29px; bottom: 51px; height: 2px; overflow: hidden; background: rgba(255,255,255,.085); }
.fan-story-progress i { display: block; width: 4%; height: 100%; background: linear-gradient(90deg,var(--cyan-bright),#8c82ff); box-shadow: 0 0 16px rgba(34,211,231,.65); }
.fan-scroll-hint { position: absolute; z-index: 4; left: 29px; bottom: 18px; display: flex; align-items: center; gap: 9px; margin: 0; color: #6f7282; font-size: 10px; }
.fan-scroll-hint span { color: #aeb1be; font: 700 9px/1 Space Grotesk,sans-serif; letter-spacing: .13em; }
.fan-scroll-hint i { color: var(--cyan-bright); font-size: 15px; font-style: normal; }

@media (max-width: 980px) {
  .gate-content { width: min(940px,100%); }
  .gate-choices .gate-choice { padding-inline: 23px; }
  .gate-choice .gate-choice-copy strong { white-space: normal; }
  .fan-sticky { grid-template-columns: minmax(0,.8fr) minmax(440px,1.2fr); gap: 38px; }
  .fan-scene { padding-inline: 30px; }
}

@media (max-width: 820px) {
  .audience-gate { place-items: center; padding: calc(22px + env(safe-area-inset-top,0px)) 20px calc(22px + env(safe-area-inset-bottom,0px)); overflow-y: auto; }
  .gate-topline > span { display: none; }
  .gate-topline { justify-content: center; }
  .gate-logo { width: 174px; }
  .gate-kicker { margin-top: 25px; }
  .gate-content .gate-title-mask h1 { font-size: clamp(58px,15vw,86px); }
  .gate-lead { max-width: 520px; margin-top: 14px; font-size: 15px; }
  .gate-choices { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 27px; }
  .gate-choices .gate-choice { width: 100%; min-height: 112px; grid-template-columns: 52px minmax(0,1fr) auto; gap: 16px; padding: 20px; border-radius: 18px; }
  .gate-choice .gate-choice-icon { width: 52px; height: 52px; border-radius: 15px; }
  .gate-choice .gate-choice-icon svg { width: 25px; height: 25px; }
  .gate-choice .gate-choice-copy { gap: 5px; }
  .gate-choice .gate-choice-copy strong { font-size: 21px; }
  .gate-choice .gate-choice-copy em { font-size: 12px; }
  .gate-choice > i { font-size: 29px; }
  .gate-note { display: block; margin-top: 17px; }
  .gate-ghosts span:first-child { top: 14%; }
  .gate-ghosts span:last-child { bottom: 11%; }

  .fan-parallax { height: 330svh; min-height: 2050px; }
  .fan-sticky { top: 0; height: 100svh; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto minmax(340px,1fr); align-content: center; gap: 28px; padding: calc(var(--header) + 18px) 20px 30px; }
  .fan-intro h2 { margin-top: 14px; font-size: clamp(43px,10.8vw,62px); }
  .fan-intro > p:not(.eyebrow) { max-width: 660px; margin-top: 18px; font-size: 15px; line-height: 1.58; }
  .fan-micro-proof { margin-top: 17px; }
  .fan-story { min-height: 340px; height: 100%; max-height: 435px; border-radius: 23px; }
  .fan-story-label { top: 20px; left: 22px; right: 22px; }
  .fan-scenes { inset: 54px 0 62px; }
  .fan-scene { grid-template-columns: 53px 1fr; column-gap: 15px; padding: 24px 22px; }
  .fan-scene > span { right: 17px; top: 14px; font-size: 86px; }
  .fan-scene-icon { width: 53px; height: 53px; border-radius: 15px; }
  .fan-scene-icon svg { width: 25px; height: 25px; }
  .fan-scene h3 { font-size: clamp(31px,7.5vw,43px); }
  .fan-scene p { margin-top: 13px; font-size: 14px; line-height: 1.55; }
  .fan-scene > small { margin-top: 15px; font-size: 8px; }
  .fan-story-progress { left: 22px; right: 22px; bottom: 43px; }
  .fan-scroll-hint { left: 22px; bottom: 13px; }
  .fan-echo { font-size: clamp(84px,23vw,150px); }
  .fan-echo-two { display: none; }
}

@media (max-width: 560px) {
  .audience-gate { place-items: center; }
  .gate-content { padding-block: 8px 18px; }
  .gate-logo { width: 152px; }
  .gate-kicker { margin-top: 19px; font-size: 9px; }
  .gate-content .gate-title-mask h1 { font-size: clamp(50px,15.5vw,69px); }
  .gate-lead { max-width: 340px; font-size: 14px; line-height: 1.5; }
  .gate-choices { margin-top: 21px; }
  .gate-choices .gate-choice { min-height: 102px; grid-template-columns: 46px minmax(0,1fr) 24px; gap: 12px; padding: 16px 15px; }
  .gate-choice .gate-choice-icon { width: 46px; height: 46px; border-radius: 13px; }
  .gate-choice .gate-choice-copy strong { font-size: 18px; }
  .gate-choice .gate-choice-copy em { font-size: 11px; }
  .gate-note { max-width: 310px; font-size: 10px; }

  .fan-sticky { grid-template-rows: auto minmax(330px,1fr); gap: 20px; padding: calc(var(--header) + 10px) 16px 20px; }
  .fan-intro .eyebrow { font-size: 9px; }
  .fan-intro h2 { font-size: clamp(39px,11.5vw,51px); }
  .fan-intro > p:not(.eyebrow) { margin-top: 14px; font-size: 14px; }
  .fan-micro-proof { margin-top: 13px; padding: 8px 11px; font-size: 10px; }
  .fan-story { min-height: 330px; }
  .fan-scene { grid-template-columns: 46px 1fr; gap: 12px; padding: 20px 18px; }
  .fan-scene-icon { width: 46px; height: 46px; }
  .fan-scene h3 { font-size: clamp(29px,8.2vw,37px); }
  .fan-scene p { font-size: 13px; }
  .fan-scene > small { letter-spacing: .08em; }
  .fan-scroll-hint { font-size: 9px; }
}

@media (max-width: 360px) {
  .gate-choices .gate-choice { grid-template-columns: 42px minmax(0,1fr) 20px; gap: 9px; padding-inline: 12px; }
  .gate-choice .gate-choice-icon { width: 42px; height: 42px; }
  .gate-choice .gate-choice-copy em { font-size: 10px; }
  .fan-sticky { padding-inline: 12px; }
  .fan-story-label,.fan-story-progress { left: 16px; right: 16px; }
  .fan-scroll-hint { left: 16px; }
  .fan-scenes { bottom: 58px; }
  .fan-scene { grid-template-columns: 40px 1fr; gap: 10px; padding: 17px 14px; }
  .fan-scene-icon { width: 40px; height: 40px; border-radius: 12px; }
  .fan-scene-icon svg { width: 21px; height: 21px; }
  .fan-scene h3 { font-size: 27px; }
  .fan-scene p { margin-top: 10px; font-size: 12px; line-height: 1.48; }
  .fan-scene > small { display: none; }
}

@media (max-width: 820px) and (max-height: 700px) {
  .gate-kicker { margin-top: 13px; }
  .gate-lead { margin-top: 9px; }
  .gate-choices { margin-top: 15px; }
  .gate-choices .gate-choice { min-height: 88px; padding-block: 12px; }
  .gate-note { display: none; }
  .fan-sticky { grid-template-rows: auto minmax(300px,1fr); gap: 14px; padding-top: calc(var(--header) + 5px); }
  .fan-intro > p:not(.eyebrow),.fan-micro-proof { display: none; }
  .fan-story { min-height: 300px; }
}

@media (hover: none) and (pointer: coarse) {
  .gate-choices .gate-choice:hover { flex-grow: 1; transform: none; }
  .gate-choices:has(.gate-choice:hover) .gate-choice:not(:hover) { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .audience-gate::before,.gate-grid,.gate-aurora,.gate-light,.gate-ghosts span,.gate-content,.gate-choice,.gate-title-mask h1 span,.gate-topline,.gate-kicker,.gate-lead,.gate-note,.gate-transition-wave { animation: none !important; transition: none !important; }
  .gate-topline,.gate-kicker,.gate-lead,.gate-note,.gate-choices .gate-choice { opacity: 1 !important; transform: none !important; }
  .gate-title-mask h1 span { transform: none !important; }
  .fan-parallax { height: auto; min-height: 0; padding: 105px 0; }
  .fan-sticky { position: relative; height: auto; min-height: 0; grid-template-columns: 1fr; padding-top: 0; padding-bottom: 0; }
  .fan-echoes,.fan-parallax-light,.fan-scroll-hint,.fan-story-progress,.fan-story-label { display: none; }
  .fan-story { max-height: none; padding: 24px; }
  .fan-scenes { position: relative; inset: auto; display: grid; gap: 12px; overflow: visible; mask-image: none; }
  .fan-scene,.fan-scene:first-child { position: relative; inset: auto; opacity: 1 !important; filter: none !important; transform: none !important; pointer-events: auto; border-bottom: 1px solid rgba(255,255,255,.08); }
  .fan-scene:last-child { border-bottom: 0; }
}