* { box-sizing: border-box; }
:root { --ink: #07111f; --ink-2: #0c1b2c; --cloud: #e7f2ff; --muted: #8ba0b6; --line: rgba(205,229,255,.13); --cyan: #6ee7f9; --lime: #cbf36a; --coral: #ff8a70; --violet: #9588ff; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ink); font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-noise { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); }
.ambient { position: fixed; z-index: -1; width: 42rem; height: 42rem; border-radius: 50%; filter: blur(95px); opacity: .17; pointer-events: none; }
.ambient-one { top: -22rem; left: 48%; background: #164a68; }
.ambient-two { bottom: -28rem; right: -8rem; background: #33286c; }
.container-wide { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 20; height: 78px; border-bottom: 1px solid rgba(220,240,255,.1); background: rgba(7,17,31,.76); backdrop-filter: blur(18px); }
.header-inner, .footer-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand-lockup, .brand-lockup:hover { color: var(--cloud); text-decoration: none; display: flex; align-items: center; gap: 11px; }
.brand-mark { display: inline-flex; gap: 3px; align-items: end; height: 25px; }
.brand-mark span { display: block; width: 5px; border-radius: 8px 8px 2px 2px; background: var(--lime); transform: skew(-19deg); }
.brand-mark span:nth-child(1) { height: 16px; opacity: .72; }.brand-mark span:nth-child(2) { height: 24px; }.brand-mark span:nth-child(3) { height: 12px; opacity: .52; }
.brand-name { display: block; font: 700 15px/1 'Space Grotesk', sans-serif; letter-spacing: .12em; }.brand-sub { display: block; margin-top: 5px; color: #7890a7; font-size: 8px; font-weight: 700; letter-spacing: .2em; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }.desktop-nav a { color: #9aafc3; font-size: 12px; font-weight: 700; text-decoration: none; transition: color .2s; }.desktop-nav a:hover { color: var(--cloud); }
.header-actions { display: flex; align-items: center; gap: 18px; }.live-pill { color: #9bb2c7; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }.live-dot, .status-label i, .ready-state i, .agent-live i { width: 6px; height: 6px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 11px var(--lime); animation: breathe 2.6s ease-in-out infinite; }.outline-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 17px; border: 1px solid rgba(203,243,106,.42); border-radius: 3px; color: var(--lime); background: rgba(203,243,106,.04); font-size: 11px; font-weight: 800; letter-spacing: .02em; transition: background .2s, transform .2s, box-shadow .2s; }.outline-btn:hover { background: rgba(203,243,106,.12); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(203,243,106,.12); }.outline-btn.compact { padding: 9px 12px; font-size: 10px; }
.hero-section { min-height: 642px; padding: 90px 0 70px; position: relative; }.hero-grid { display: grid; grid-template-columns: 1fr .89fr; gap: 88px; align-items: center; }.eyebrow, .section-kicker, .micro-label { color: #8ca6bb; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }.eyebrow { display: flex; align-items: center; gap: 10px; }.eyebrow-line { width: 28px; height: 1px; background: var(--lime); box-shadow: 0 0 10px var(--lime); }.hero-copy h1 { max-width: 620px; margin: 22px 0 20px; color: var(--cloud); font: 600 clamp(49px, 6.2vw, 82px)/.95 'Space Grotesk', sans-serif; letter-spacing: -.06em; }.hero-copy h1 em, h2 em, h3 em { color: var(--lime); font-style: normal; }.hero-lede { max-width: 480px; margin: 0; color: #93a9bd; font-size: 16px; line-height: 1.65; }.hero-cta-row { display: flex; align-items: center; gap: 24px; margin-top: 32px; }.lime-btn { display: inline-flex; align-items: center; justify-content: center; gap: 17px; padding: 14px 18px; border: 0; border-radius: 3px; color: #17220d; background: var(--lime); font-size: 11px; font-weight: 900; transition: transform .2s, box-shadow .2s; }.lime-btn:hover { transform: translateY(-2px); box-shadow: 0 11px 30px rgba(203,243,106,.18); }.text-btn { padding: 10px 0; border: 0; color: #9eb4c8; background: none; font-size: 11px; font-weight: 800; }.text-btn:hover { color: var(--cloud); }.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 67px; color: #7189a0; font-size: 10px; }.hero-proof strong { color: #b8cad9; }.avatar-stack { display: flex; }.avatar-stack span { display: grid; place-items: center; width: 24px; height: 24px; margin-right: -5px; border: 2px solid var(--ink); border-radius: 50%; color: #0b1b25; background: var(--cyan); font-size: 8px; font-weight: 900; }.avatar-stack span:nth-child(2) { background: var(--coral); }.avatar-stack span:nth-child(3) { background: var(--violet); }.avatar-stack span:nth-child(4) { color: var(--lime); background: #26394b; }
.campaign-stage { max-width: 470px; justify-self: end; width: 100%; }.stage-topline, .stage-footline, .ticket-topline, .ticket-foot, .scan-header, .agent-modal-foot { display: flex; justify-content: space-between; align-items: center; color: #71889d; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.status-label { color: #93acbf; }.campaign-card { position: relative; overflow: hidden; padding: 31px; margin-top: 13px; }.glass-card { border: 1px solid rgba(195,225,255,.15); background: linear-gradient(142deg, rgba(18,38,58,.82), rgba(10,25,42,.58)); box-shadow: 0 30px 100px rgba(0,0,0,.18); backdrop-filter: blur(16px); }.campaign-card:before { content: ''; position: absolute; width: 300px; height: 180px; right: -100px; top: -120px; border-radius: 50%; background: rgba(110,231,249,.14); filter: blur(42px); }.campaign-card-head, .progress-meta, .campaign-card-bottom { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 20px; }.campaign-amount { margin: 10px 0 0; color: var(--cloud); font: 600 48px/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; }.goal-stamp { display: grid; place-items: center; width: 59px; height: 59px; border: 1px solid rgba(203,243,106,.38); border-radius: 50%; color: var(--lime); transform: rotate(11deg); }.goal-stamp span { font-size: 8px; font-weight: 800; letter-spacing: .15em; }.goal-stamp strong { margin-top: -18px; font-size: 8px; letter-spacing: .08em; }.progress-meta { align-items: center; margin-top: 41px; color: #8da4b7; font-size: 10px; }.progress-meta strong { color: var(--cloud); font-size: 12px; }.progress-meta small { color: #6e8297; font-size: 9px; font-weight: 500; }.progress-track { height: 5px; margin: 13px 0 21px; position: relative; border-radius: 5px; background: #1b3141; }.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--lime)); box-shadow: 0 0 18px rgba(203,243,106,.38); }.progress-track i { position: absolute; top: 50%; width: 10px; height: 10px; border: 2px solid var(--lime); border-radius: 50%; background: var(--ink-2); transform: translate(-50%, -50%); }.campaign-gridline { height: 1px; margin: 0 0 20px; background: var(--line); }.campaign-card-bottom { align-items: center; color: #8099ad; font-size: 10px; }.arrow-circle, .mini-arrow { display: grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 1px solid rgba(110,231,249,.28); border-radius: 50%; color: var(--cyan); background: transparent; transition: background .2s, transform .2s; }.arrow-circle:hover, .mini-arrow:hover { background: rgba(110,231,249,.1); transform: rotate(14deg); }.secret-banner { width: 100%; display: flex; align-items: center; gap: 15px; margin-top: 13px; padding: 17px 18px; border: 1px solid rgba(149,136,255,.24); border-radius: 3px; text-align: left; color: var(--cloud); background: rgba(72,59,140,.18); transition: border .25s, background .25s, transform .25s, box-shadow .25s; }.secret-banner:hover, .secret-banner:focus-visible, .secret-banner.triggered { border-color: rgba(149,136,255,.67); background: rgba(95,79,185,.25); box-shadow: 0 0 28px rgba(149,136,255,.14); outline: none; }.secret-banner.triggered { transform: scale(1.02); }.signal-icon, .agent-signal { display: flex; align-items: center; justify-content: center; gap: 3px; width: 29px; height: 29px; border: 1px solid rgba(149,136,255,.42); border-radius: 50%; }.signal-icon i, .agent-signal i { display: block; width: 3px; border-radius: 4px; background: var(--violet); }.signal-icon i:nth-child(1), .agent-signal i:nth-child(1) { height: 6px; opacity: .56; }.signal-icon i:nth-child(2), .agent-signal i:nth-child(2) { height: 13px; }.signal-icon i:nth-child(3), .agent-signal i:nth-child(3) { height: 9px; opacity: .7; }.secret-copy { display: grid; gap: 5px; flex: 1; }.secret-copy strong { color: #dcd7ff; font-size: 11px; }.secret-copy span { color: #a69fe0; font-size: 9px; }.tap-meter { display: flex; gap: 4px; }.tap-meter b { width: 4px; height: 4px; border-radius: 50%; background: #655da3; }.tap-meter b.on { background: var(--lime); box-shadow: 0 0 7px var(--lime); }.stage-footline { margin-top: 14px; font-size: 8px; }.quiet-dot { display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: #5e7390; }
.signal-strip { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(18,35,52,.34); }.strip-inner { display: flex; align-items: center; justify-content: space-between; min-height: 49px; color: #607991; font: 600 10px 'Space Grotesk', sans-serif; letter-spacing: .17em; }.strip-inner i { color: var(--lime); font-style: normal; font-size: 12px; }
.hub-section, .wins-section, .ticket-section { padding: 123px 0 127px; }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }.section-heading h2, .ticket-topline h2 { margin: 16px 0 0; color: var(--cloud); font: 500 clamp(37px, 4.5vw, 58px)/.98 'Space Grotesk', sans-serif; letter-spacing: -.06em; }.section-heading > p { max-width: 270px; margin: 0 0 4px; color: #7f96ab; font-size: 12px; line-height: 1.7; }.hub-grid { display: grid; grid-template-columns: 1.14fr .92fr .82fr; gap: 12px; margin-top: 54px; }.hub-grid > article { min-height: 304px; padding: 27px; position: relative; overflow: hidden; }.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px; }.card-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; font-size: 16px; }.cyan-icon { color: var(--cyan); }.violet-icon { color: var(--violet); }.card-index { color: #536e84; font-size: 9px; font-weight: 800; letter-spacing: .14em; }.hub-grid h3 { margin: 13px 0 12px; color: var(--cloud); font: 500 26px/1.05 'Space Grotesk', sans-serif; letter-spacing: -.04em; }.hub-grid p { max-width: 230px; color: #8197aa; font-size: 11px; line-height: 1.65; }.pulse-bars { position: absolute; right: 28px; bottom: 69px; left: 28px; display: flex; align-items: end; gap: 5px; height: 45px; border-bottom: 1px solid rgba(110,231,249,.2); }.pulse-bars span { flex: 1; background: linear-gradient(180deg, rgba(110,231,249,.8), rgba(110,231,249,.06)); }.card-footer { position: absolute; right: 27px; bottom: 25px; left: 27px; display: flex; justify-content: space-between; color: #87a0b2; font-size: 9px; }.footer-arrow { color: var(--cyan); font-size: 14px; }.path-card { background: linear-gradient(142deg, rgba(31,28,78,.85), rgba(10,25,42,.7)); }.path-orbit { position: absolute; width: 200px; height: 200px; right: -91px; bottom: -56px; border: 1px solid rgba(149,136,255,.28); border-radius: 50%; }.orbit-two { width: 150px; height: 150px; right: -66px; bottom: -30px; border-color: rgba(149,136,255,.19); }.path-steps { display: grid; gap: 8px; margin-top: 27px; }.path-steps span { display: flex; align-items: center; gap: 13px; color: #617a91; font: 700 9px 'Space Grotesk', sans-serif; }.path-steps b { color: #8fa6b8; font-size: 10px; font-weight: 600; text-transform: uppercase; }.path-steps i { margin-left: auto; color: #526b81; font-style: normal; }.path-steps .done { color: var(--violet); }.path-steps .done b { color: #c2bbff; }.path-steps .done i { color: var(--lime); }.path-steps .current { color: var(--lime); }.path-steps .current b { color: var(--cloud); }.path-steps .current i { color: var(--lime); }.quote-card { background: #162933; }.quote-mark { color: var(--coral); font: 700 45px/1 Georgia, serif; }.quote-card blockquote { max-width: 220px; margin: 20px 0 27px; color: #eff7ff; font: 500 21px/1.18 'Space Grotesk', sans-serif; letter-spacing: -.04em; }.quote-person { display: flex; align-items: center; gap: 9px; }.person-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #331e1a; background: var(--coral); font-size: 10px; font-weight: 900; }.quote-person strong, .quote-person small { display: block; }.quote-person strong { color: #bfd0dc; font-size: 10px; }.quote-person small { margin-top: 3px; color: #71899c; font-size: 8px; }.quote-spark { position: absolute; right: 27px; bottom: 26px; color: var(--coral); }
.wins-section { position: relative; background: rgba(10,23,38,.37); }.wins-heading { align-items: center; }.heading-note { display: flex; align-items: start; gap: 13px; max-width: 255px; }.heading-note p { margin: 0; color: #7c94a9; font-size: 11px; line-height: 1.65; }.note-line { width: 24px; height: 1px; flex: 0 0 auto; margin-top: 8px; background: var(--coral); }.case-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; margin-top: 55px; }.case-card { min-height: 417px; position: relative; display: flex; flex-direction: column; padding: 27px; border: 1px solid rgba(195,225,255,.12); background: #102335; overflow: hidden; }.case-card:after { content: ''; position: absolute; width: 170px; height: 170px; right: -80px; top: -81px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }.featured-case { background: linear-gradient(143deg, #1a3036, #11283c); }.cyan-case { background: linear-gradient(143deg, #122837, #101e34); }.violet-case { background: linear-gradient(143deg, #211e42, #141b35); }.case-number { color: #678094; font: 500 12px 'Space Grotesk', sans-serif; }.case-tag { display: block; margin-top: 42px; color: #8fa8b8; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.case-card h3 { margin: 15px 0 14px; color: var(--cloud); font: 500 30px/.99 'Space Grotesk', sans-serif; letter-spacing: -.055em; }.case-card p { max-width: 274px; margin: 0; color: #8da3b3; font-size: 11px; line-height: 1.7; }.case-result { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 33px; }.case-result strong { color: var(--lime); font: 500 33px/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; }.case-result span { color: #89a2b2; font-size: 9px; }.case-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); color: #768ea2; font-size: 9px; font-weight: 800; letter-spacing: .08em; }.case-bottom i { color: #3f586b; font-style: normal; }.case-bottom .mini-arrow { color: var(--cloud); border-color: rgba(255,255,255,.22); }.cyan-case .case-result strong { color: var(--cyan); }.violet-case .case-result strong { color: var(--violet); }.impact-foot { display: flex; align-items: center; gap: 14px; margin-top: 39px; color: #5e7890; font-size: 9px; font-weight: 800; letter-spacing: .15em; }.impact-foot strong { color: var(--coral); font: 500 19px 'Space Grotesk', sans-serif; letter-spacing: 0; }.impact-line { height: 1px; flex: 1; background: var(--line); }
.ticket-section { padding-top: 111px; padding-bottom: 137px; }.ticket-shell { padding: 36px 38px 22px; }.ticket-topline { align-items: start; }.ticket-topline h2 { margin-top: 13px; font-size: 43px; }.ticket-topline h2 em { color: var(--violet); }.vip-badge { padding: 9px 11px; border: 1px solid rgba(149,136,255,.29); color: #b0aaff; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.vip-dot { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 9px var(--violet); }.ticket-tabs { display: flex; align-items: center; gap: 24px; margin-top: 42px; border-bottom: 1px solid var(--line); }.ticket-tab { position: relative; padding: 0 0 14px; border: 0; color: #687f96; background: none; font-size: 10px; font-weight: 800; }.ticket-tab.active { color: var(--cloud); }.ticket-tab.active:after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--violet); }.tab-rule { flex: 1; }.ticket-id { padding-bottom: 14px; color: #556d84; font-size: 9px; letter-spacing: .1em; }.ticket-panels { min-height: 391px; }.ticket-panel { display: grid; grid-template-columns: 1fr .9fr; gap: 80px; padding-top: 44px; }.ticket-form-column h3, .routing-panel h3 { margin: 15px 0 13px; color: var(--cloud); font: 500 31px/1.04 'Space Grotesk', sans-serif; letter-spacing: -.05em; }.ticket-form-column p, .routing-panel p { max-width: 360px; margin: 0; color: #8198ab; font-size: 11px; line-height: 1.65; }.form-label-row { display: flex; align-items: center; justify-content: space-between; max-width: 360px; }.ready-state { color: var(--lime); font-size: 9px; font-weight: 700; }.input-label { display: block; margin-top: 31px; margin-bottom: 7px; color: #7891a6; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }.dark-input { width: 100%; max-width: 360px; padding: 12px 13px; border: 1px solid rgba(195,225,255,.17); border-radius: 2px; outline: 0; color: var(--cloud); background: rgba(4,13,23,.35); font-size: 11px; }.dark-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(110,231,249,.11); }.role-row { display: flex; align-items: center; gap: 8px; margin-top: 19px; }.role-row .micro-label { margin-right: 5px; font-size: 8px; }.role-pill { padding: 7px 9px; border: 1px solid rgba(195,225,255,.14); border-radius: 2px; color: #8098ac; background: transparent; font-size: 9px; }.role-pill.active { border-color: rgba(110,231,249,.42); color: var(--cyan); background: rgba(110,231,249,.08); }.ticket-submit { margin-top: 29px; }.ticket-preview-column { padding-top: 2px; }.video-window { overflow: hidden; border: 1px solid rgba(195,225,255,.16); background: #081521; }.video-top, .video-bottom { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; color: #7890a5; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.video-top i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--coral); }.video-art { position: relative; min-height: 177px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(110,231,249,.25), transparent 32%), linear-gradient(135deg, #122844, #202148 54%, #372139); }.video-art:before { content: ''; position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 23px 23px; }.video-avatar { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: var(--cloud); background: rgba(13,23,46,.44); font: 600 17px 'Space Grotesk', sans-serif; }.video-caption { position: absolute; left: 17px; bottom: 15px; color: #d4e4ef; font-size: 9px; line-height: 1.4; }.video-wave { position: absolute; right: 15px; bottom: 17px; color: var(--cyan); font-size: 12px; letter-spacing: 1px; }.video-bottom { border-top: 1px solid var(--line); text-transform: none; letter-spacing: 0; }.video-bottom b { color: var(--coral); font-size: 9px; }.video-attach { border: 0; color: var(--cyan); background: transparent; font-size: 8px; }.toggle-stack { margin-top: 18px; }.toggle-row { display: flex; align-items: center; gap: 20px; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); }.toggle-row span:first-child { display: grid; gap: 3px; }.toggle-row strong { color: #b8cad7; font-size: 10px; }.toggle-row small { color: #6f889d; font-size: 8px; }.switch-input { position: absolute; opacity: 0; }.switch-ui { width: 29px; height: 16px; flex: 0 0 auto; position: relative; border-radius: 10px; background: #294054; transition: background .2s; }.switch-ui:after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #91a6b8; transition: transform .2s, background .2s; }.switch-input:checked + .switch-ui { background: rgba(149,136,255,.55); }.switch-input:checked + .switch-ui:after { background: #fff; transform: translateX(13px); }.routing-panel { max-width: 480px; }.route-cards { display: grid; gap: 8px; margin-top: 28px; }.route-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(195,225,255,.13); color: #7e95a9; background: rgba(5,15,26,.26); text-align: left; }.route-card.selected { border-color: rgba(149,136,255,.46); background: rgba(104,90,193,.12); }.route-icon { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(149,136,255,.34); color: var(--violet); }.route-card span:nth-child(2) { display: grid; gap: 3px; }.route-card strong { color: #c6d4de; font-size: 10px; }.route-card small { color: #72899d; font-size: 8px; }.route-card i { margin-left: auto; color: var(--lime); font-style: normal; }.routing-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-top: 34px; text-align: right; }.routing-aside p { max-width: 170px; color: #7f98ac; font-size: 10px; line-height: 1.6; }.ring-progress { display: flex; align-items: center; justify-content: center; width: 105px; height: 105px; border: 7px solid rgba(149,136,255,.25); border-top-color: var(--lime); border-right-color: var(--violet); border-radius: 50%; transform: rotate(-35deg); }.ring-progress span, .ring-progress small { transform: rotate(35deg); }.ring-progress span { color: var(--cloud); font: 500 26px 'Space Grotesk', sans-serif; }.ring-progress small { margin-left: 4px; color: #8da4b9; font-size: 7px; line-height: 1.2; text-align: left; }.ticket-foot { padding-top: 19px; border-top: 1px solid var(--line); font-size: 8px; letter-spacing: .1em; }.ticket-foot b { color: var(--lime); font-size: 11px; }
.site-footer { min-height: 83px; border-top: 1px solid var(--line); color: #60778c; font-size: 9px; }.footer-inner { letter-spacing: .08em; }.footer-brand { display: flex; align-items: center; gap: 9px; color: #8ea4b7; font-weight: 800; }.footer-brand .brand-mark { transform: scale(.7); transform-origin: right center; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(3,8,16,.83); backdrop-filter: blur(14px); }.modal-backdrop[hidden] { display: none; }.agent-modal { position: relative; width: min(890px, 100%); max-height: min(700px, calc(100vh - 48px)); overflow: auto; padding: 28px; border: 1px solid rgba(203,243,106,.35); border-radius: 4px; background: radial-gradient(circle at 84% 3%, rgba(203,243,106,.11), transparent 25%), linear-gradient(143deg, rgba(16,39,53,.98), rgba(9,19,32,.98)); box-shadow: 0 0 0 1px rgba(110,231,249,.12), 0 0 60px rgba(203,243,106,.12), 0 30px 120px rgba(0,0,0,.45); animation: modalIn .32s ease-out both; }.modal-close { position: absolute; right: 22px; top: 17px; width: 30px; height: 30px; border: 1px solid rgba(195,225,255,.2); border-radius: 50%; color: #9eb3c5; background: transparent; font-size: 20px; line-height: 1; }.modal-close:hover { color: var(--cloud); border-color: var(--cloud); }.agent-modal-head { display: flex; justify-content: space-between; align-items: start; padding-right: 35px; }.agent-modal-head > div { position: relative; }.agent-signal { position: absolute; top: -1px; left: -44px; border-color: rgba(203,243,106,.36); }.agent-signal i { background: var(--lime); }.agent-modal-head h2 { margin: 13px 0 0; color: var(--cloud); font: 500 39px/.95 'Space Grotesk', sans-serif; letter-spacing: -.06em; }.agent-modal-head h2 em { color: var(--lime); font-style: normal; }.agent-live { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.agent-grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: 22px; margin-top: 29px; }.agent-scan-panel, .agent-action-panel { border: 1px solid rgba(195,225,255,.13); background: rgba(3,13,23,.27); }.agent-scan-panel { padding: 16px; }.scan-header { color: #758da1; font-size: 8px; }.scan-status { color: #8199ac; }.scan-status.active { color: var(--lime); }.scan-viewport { position: relative; min-height: 254px; display: grid; place-items: center; overflow: hidden; margin-top: 14px; border: 1px solid rgba(110,231,249,.23); background: radial-gradient(circle, rgba(110,231,249,.15), transparent 48%), #061320; }.scan-grid { position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(rgba(110,231,249,.29) 1px, transparent 1px), linear-gradient(90deg, rgba(110,231,249,.29) 1px, transparent 1px); background-size: 24px 24px; }.scan-line { position: absolute; left: 13%; right: 13%; top: 20%; height: 1px; background: var(--lime); box-shadow: 0 0 12px var(--lime); opacity: 0; }.scan-viewport.scanning .scan-line { opacity: 1; animation: sweep 2.3s ease-in-out infinite; }.scan-corner { position: absolute; width: 24px; height: 24px; border-color: var(--cyan); border-style: solid; }.sc-tl { top: 22%; left: 19%; border-width: 2px 0 0 2px; }.sc-tr { top: 22%; right: 19%; border-width: 2px 2px 0 0; }.sc-bl { bottom: 22%; left: 19%; border-width: 0 0 2px 2px; }.sc-br { right: 19%; bottom: 22%; border-width: 0 2px 2px 0; }.scan-core { position: relative; display: grid; place-items: center; width: 82px; height: 82px; border: 1px solid rgba(203,243,106,.42); border-radius: 50%; color: var(--lime); box-shadow: 0 0 30px rgba(203,243,106,.13); }.scan-core span { font: 300 29px 'Space Grotesk', sans-serif; }.scan-core small { position: absolute; bottom: -21px; color: #819ba7; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }.privacy-note { display: flex; align-items: center; gap: 6px; min-height: 30px; margin: 11px 0; color: #6f899b; font-size: 8px; line-height: 1.4; }.privacy-note span { color: var(--cyan); }.scan-button { width: 100%; padding: 10px; border-color: rgba(110,231,249,.35); color: var(--cyan); }.agent-action-panel { padding: 16px; }.agent-greeting { display: flex; align-items: center; gap: 12px; padding: 8px 0 17px; border-bottom: 1px solid var(--line); }.agent-greeting p { margin: 0; color: #c3d5e0; font: 500 12px/1.45 'Space Grotesk', sans-serif; }.waveform { display: flex; align-items: center; gap: 2px; width: 28px; height: 27px; flex: 0 0 auto; }.waveform i { width: 3px; border-radius: 4px; background: var(--lime); animation: wave 1.3s ease-in-out infinite; }.waveform i:nth-child(1) { height: 7px; animation-delay: -.3s; }.waveform i:nth-child(2) { height: 16px; animation-delay: -.1s; }.waveform i:nth-child(3) { height: 22px; }.waveform i:nth-child(4) { height: 12px; animation-delay: -.4s; }.waveform i:nth-child(5) { height: 21px; animation-delay: -.2s; }.waveform i:nth-child(6) { height: 14px; animation-delay: -.5s; }.waveform i:nth-child(7) { height: 8px; animation-delay: -.1s; }.waveform i:nth-child(8) { height: 17px; animation-delay: -.4s; }.replay-btn { display: inline-flex; gap: 6px; align-items: center; margin: 10px 0 0 40px; padding: 0; border: 0; color: #8aa1b2; background: transparent; font-size: 8px; }.replay-btn span { color: var(--lime); font-size: 14px; }.qr-block { margin-top: 18px; padding: 14px; border: 1px solid rgba(203,243,106,.21); background: rgba(203,243,106,.035); }.qr-label { display: flex; justify-content: space-between; color: #8198a9; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.qr-label span:last-child { color: var(--lime); }.qr-layout { display: flex; align-items: center; gap: 18px; margin-top: 15px; }.qr-code { display: grid; grid-template-columns: repeat(13, 1fr); width: 118px; height: 118px; padding: 6px; flex: 0 0 auto; border: 5px solid #edf9e2; background: #edf9e2; }.qr-code span { background: #0b1722; }.qr-code span.off { background: #edf9e2; }.qr-meta { display: grid; gap: 5px; }.qr-meta > span { color: #8ea4b4; font-size: 8px; line-height: 1.4; }.qr-meta strong { color: var(--cloud); font: 500 28px 'Space Grotesk', sans-serif; letter-spacing: -.05em; }.qr-meta small { color: #718b9e; font-size: 8px; }.amount-btn { justify-self: start; margin-top: 7px; padding: 0; border: 0; color: var(--lime); background: none; font-size: 8px; }.settle-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 13px; border: 1px solid rgba(203,243,106,.48); color: #18230d; background: var(--lime); text-align: left; }.settle-icon { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(10,20,8,.35); border-radius: 50%; }.settle-btn span:nth-child(2) { display: grid; gap: 3px; flex: 1; }.settle-btn strong { font-size: 10px; }.settle-btn small { color: #516332; font-size: 8px; }.settle-btn > i { font-style: normal; font-size: 16px; }.settled-message { display: flex; gap: 7px; align-items: center; margin: 11px 0 0; color: var(--lime); font-size: 9px; line-height: 1.45; }.settled-message span { font-size: 13px; }.agent-modal-foot { margin-top: 21px; padding-top: 15px; border-top: 1px solid var(--line); font-size: 8px; }.voice-state { color: var(--lime); font-style: normal; }.voice-state.speaking { color: var(--cyan); }
.toast { position: fixed; z-index: 70; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 48px); padding: 13px 17px; border: 1px solid rgba(203,243,106,.34); color: #dbeacb; background: rgba(18,37,44,.94); box-shadow: 0 15px 50px rgba(0,0,0,.35); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .25s, transform .25s; font-size: 10px; }.toast.show { opacity: 1; transform: translateY(0); }.toast-icon { color: var(--lime); font-size: 15px; }
.reveal-in { animation: rise .75s .1s both cubic-bezier(.2,.75,.3,1); }.delay-one { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: none; } } @keyframes breathe { 50% { opacity: .4; } } @keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes sweep { 0%, 100% { top: 21%; } 50% { top: 78%; } } @keyframes wave { 50% { transform: scaleY(.45); } } 
@media (max-width: 900px) { .container-wide { width: min(100% - 40px, 680px); }.desktop-nav { display: none; }.header-actions { margin-left: auto; }.hero-section { padding-top: 65px; }.hero-grid { grid-template-columns: 1fr; gap: 58px; }.campaign-stage { justify-self: stretch; max-width: none; }.hero-proof { margin-top: 42px; }.hub-grid { grid-template-columns: 1fr 1fr; }.quote-card { grid-column: span 2; min-height: 246px !important; }.quote-card blockquote { max-width: 430px; }.case-grid { grid-template-columns: 1fr 1fr; }.featured-case { grid-column: span 2; min-height: 360px; }.ticket-panel { gap: 36px; }.ticket-shell { padding: 28px 24px 20px; } }
@media (max-width: 640px) { .container-wide { width: min(100% - 28px, 510px); }.site-header { height: 67px; }.brand-sub { font-size: 7px; }.header-actions .live-pill { display: none; }.header-actions .compact { padding: 8px 9px; font-size: 9px; }.hero-section { min-height: auto; padding: 58px 0 51px; }.hero-copy h1 { font-size: clamp(47px, 14vw, 67px); }.hero-lede { font-size: 14px; }.hero-cta-row { gap: 15px; }.hero-proof { margin-top: 39px; font-size: 9px; }.campaign-card { padding: 22px; }.campaign-amount { font-size: 39px; }.goal-stamp { width: 49px; height: 49px; }.strip-inner { gap: 19px; justify-content: flex-start; min-width: max-content; animation: strip 25s linear infinite; }.signal-strip { overflow: hidden; }.hub-section, .wins-section, .ticket-section { padding: 79px 0 81px; }.section-heading { display: block; }.section-heading h2 { font-size: 42px; }.section-heading > p { margin-top: 24px; }.hub-grid { grid-template-columns: 1fr; margin-top: 35px; }.hub-grid > article { min-height: 274px; }.quote-card { grid-column: auto; }.case-grid { grid-template-columns: 1fr; margin-top: 35px; }.featured-case { grid-column: auto; min-height: 390px; }.case-card { min-height: 370px; }.impact-foot { gap: 9px; font-size: 7px; }.impact-foot strong { font-size: 16px; }.ticket-topline { display: block; }.vip-badge { display: inline-block; margin-top: 20px; }.ticket-tabs { gap: 14px; }.ticket-id { display: none; }.ticket-panel { grid-template-columns: 1fr; gap: 30px; padding-top: 31px; }.ticket-panels { min-height: 0; }.ticket-preview-column { padding-bottom: 15px; }.ticket-foot { display: block; line-height: 1.8; }.ticket-foot span { display: block; }.ticket-foot span + span { margin-top: 5px; }.footer-inner { display: grid; gap: 5px; padding: 17px 0; font-size: 8px; }.agent-modal { padding: 22px 17px 17px; max-height: calc(100vh - 22px); }.agent-modal-head h2 { font-size: 31px; }.agent-signal { position: static; margin-bottom: 13px; }.agent-grid { grid-template-columns: 1fr; gap: 13px; }.scan-viewport { min-height: 180px; }.qr-layout { gap: 12px; }.qr-code { width: 103px; height: 103px; }.qr-meta strong { font-size: 24px; }.agent-modal-foot { margin-top: 14px; }.heading-note { margin-top: 23px; }.case-tag { margin-top: 30px; } }
@keyframes strip { to { transform: translateX(-30%); } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.api-status { color: #8198ac; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.api-status i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.api-status.online i { background: var(--lime); box-shadow: 0 0 9px var(--lime); }
.api-status.offline i { background: var(--coral); box-shadow: 0 0 9px var(--coral); }
.case-intake { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; margin-top: 28px; padding: 24px 27px; background: linear-gradient(142deg, rgba(24,48,61,.9), rgba(10,25,42,.72)); }
.case-intake-copy h3 { margin: 13px 0 11px; color: var(--cloud); font: 500 25px/1.02 'Space Grotesk', sans-serif; letter-spacing: -.05em; }
.case-intake-copy p { max-width: 280px; margin: 0; color: #8198aa; font-size: 10px; line-height: 1.65; }
.case-intake-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.case-intake-form label { display: grid; gap: 6px; color: #8198aa; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.case-intake-form input, .case-intake-form textarea { width: 100%; border: 1px solid rgba(195,225,255,.16); border-radius: 2px; outline: 0; padding: 10px 11px; color: var(--cloud); background: rgba(4,13,23,.35); font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; resize: vertical; }
.case-intake-form input:focus, .case-intake-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(110,231,249,.11); }
.case-intake-form .full-field { grid-column: span 2; }
.case-intake-form button { justify-self: start; margin-top: 4px; }
@media (max-width: 640px) { .api-status { display: none; } .case-intake { grid-template-columns: 1fr; gap: 22px; padding: 22px 18px; }.case-intake-form { grid-template-columns: 1fr; }.case-intake-form .full-field { grid-column: auto; } }

.video-art { isolation: isolate; }
.video-fallback { display: block; }
.ticket-video { display: none; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; background: #061320; }
.video-art.has-live-video .ticket-video { display: block; }
.video-art.has-live-video #videoFallback { display: none; }
.video-controls { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.video-record-btn, .recording-note { font-size: 8px; }
.video-record-btn { padding: 6px 8px; border: 1px solid rgba(203,243,106,.32); border-radius: 2px; color: var(--lime); background: rgba(203,243,106,.05); }
.video-record-btn:hover { background: rgba(203,243,106,.13); }
.video-record-btn.recording { border-color: rgba(255,138,112,.6); color: var(--coral); background: rgba(255,138,112,.08); }
.recording-note { color: #71899c; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.video-bottom { gap: 9px; }
@media (max-width: 640px) { .video-bottom { flex-wrap: wrap; }.recording-note { order: 3; width: 100%; }.video-controls { margin-left: auto; } }

.qr-code { overflow: hidden; min-width: 0; }
.qr-code canvas, .qr-code img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; object-fit: contain; }
.qr-meta { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .qr-code { width: 96px; height: 96px; padding: 4px; border-width: 4px; } }

.video-placeholder { display:grid; place-items:center; gap:8px; min-height:210px; padding:24px; text-align:center; color:var(--cloud); font-family:'Space Grotesk',sans-serif; font-size:18px; }
.video-placeholder small { max-width:220px; color:var(--muted); font-family:'Manrope',sans-serif; font-size:12px; line-height:1.5; }

/* Neon AI Agent treatment for the multi-tap donation modal */
.agent-modal { background: radial-gradient(circle at 50% 12%, rgba(57, 220, 255, .14), transparent 36%), linear-gradient(155deg, #07111f 0%, #081b2b 54%, #180f2b 100%); border-color: rgba(110,231,249,.36); box-shadow: 0 0 0 1px rgba(203,243,106,.10), 0 0 56px rgba(110,231,249,.18), 0 28px 100px rgba(0,0,0,.56); }
.agent-modal-head { border-bottom-color: rgba(110,231,249,.20); }
.agent-greeting { padding: 16px; border: 1px solid rgba(149,136,255,.25); border-radius: 16px; background: linear-gradient(135deg, rgba(22,42,64,.92), rgba(32,19,54,.78)); box-shadow: inset 0 0 28px rgba(110,231,249,.05); }
.qr-block { border: 1px solid transparent; border-image: linear-gradient(120deg, rgba(110,231,249,.9), rgba(203,243,106,.55), rgba(255,112,225,.8)) 1; background: radial-gradient(circle at 50% 46%, rgba(110,231,249,.11), transparent 57%), rgba(4,15,27,.78); box-shadow: 0 0 24px rgba(110,231,249,.11), inset 0 0 30px rgba(255,112,225,.05); }
.qr-code { border-color: #f4fff0; box-shadow: 0 0 12px rgba(110,231,249,.9), 0 0 30px rgba(255,112,225,.32); }
.settle-btn { background: linear-gradient(100deg, #6ee7f9 0%, #cbf36a 48%, #ff9ce9 100%); box-shadow: 0 0 24px rgba(110,231,249,.28), 0 0 34px rgba(255,112,225,.18); }
.agent-modal.cashapp-mode { border-color: rgba(255,138,112,.62); box-shadow: 0 0 0 1px rgba(255,138,112,.13), 0 0 62px rgba(255,138,112,.22), 0 28px 100px rgba(0,0,0,.58); }
.agent-modal.cashapp-mode .agent-mode-label, .agent-modal.cashapp-mode .agent-live { color: #ff9e8d; }
.agent-modal.cashapp-mode .qr-block { border-image: linear-gradient(120deg, #6ee7f9, #ff8a70, #cbf36a) 1; box-shadow: 0 0 28px rgba(255,138,112,.18), inset 0 0 30px rgba(255,138,112,.08); }
.agent-modal.cashapp-mode .qr-code { box-shadow: 0 0 14px rgba(255,138,112,.95), 0 0 34px rgba(203,243,106,.28); }
.agent-modal.cashapp-mode .settle-btn { background: linear-gradient(100deg, #6ee7f9 0%, #ff8a70 52%, #cbf36a 100%); }
.agent-modal.cashapp-mode #agentModeLabel { color: #ff9e8d; }

/* Single-block reel browsing mode */
body.reel-mode { min-height: 100svh; overflow-x: hidden; background: #050d18; }
body.reel-mode .site-header { position: fixed; inset: 0 0 auto; z-index: 30; background: rgba(5,13,24,.88); backdrop-filter: blur(18px); }
body.reel-mode main { padding-top: 67px; }
body.reel-mode main > .signal-strip, body.reel-mode .site-footer { display: none; }
body.reel-mode [data-reel-slide] { display: none; min-height: calc(100svh - 67px); max-height: calc(100svh - 67px); padding: clamp(22px, 5vw, 58px) 0; overflow: hidden; }
body.reel-mode [data-reel-slide].reel-active { display: block; animation: reelIn .42s cubic-bezier(.2,.8,.2,1) both; }
body.reel-mode [data-reel-slide].reel-active > .container-wide { max-height: calc(100svh - 112px); overflow-y: auto; scrollbar-width: none; }
body.reel-mode [data-reel-slide].reel-active > .container-wide::-webkit-scrollbar { display: none; }
.reel-progress { order: -1; color: var(--lime); font: 700 9px/1 'Space Grotesk', sans-serif; letter-spacing: .12em; }
.reel-hint { position: fixed; z-index: 25; right: 22px; bottom: 18px; color: rgba(231,242,255,.44); font: 700 8px/1 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.case-lock { display: flex; align-items: center; gap: 16px; width: 100%; margin: 30px 0 0; padding: 18px; border: 1px solid rgba(149,136,255,.42); border-radius: 2px; color: var(--cloud); background: linear-gradient(100deg, rgba(27,38,75,.84), rgba(13,23,42,.9)); text-align: left; box-shadow: 0 0 0 1px rgba(110,231,249,.05), 0 0 26px rgba(149,136,255,.09); transition: border-color .2s, box-shadow .2s, transform .2s; }
.case-lock:hover, .case-lock.charging { border-color: var(--lime); box-shadow: 0 0 24px rgba(203,243,106,.2); transform: translateY(-2px); }
.case-lock-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(203,243,106,.45); color: var(--lime); font-size: 16px; }
.case-lock span:nth-child(2) { display: grid; gap: 6px; flex: 1; }
.case-lock strong { font: 700 12px 'Space Grotesk', sans-serif; }
.case-lock small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.case-lock > b { color: var(--lime); font: 700 12px 'Space Grotesk', sans-serif; }
@keyframes reelIn { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 640px) {
  body.reel-mode [data-reel-slide] { min-height: calc(100svh - 67px); max-height: calc(100svh - 67px); padding: 20px 0 42px; }
  body.reel-mode [data-reel-slide].reel-active > .container-wide { max-height: calc(100svh - 105px); }
  .reel-progress { display: none; }
  .reel-hint { right: 14px; bottom: 12px; font-size: 7px; }
  .case-lock { padding: 14px; gap: 10px; }
  .case-lock strong { font-size: 11px; }
}
body.reel-mode [data-reel-slide] { touch-action: manipulation; }

/* Desktop reel scroll wheel: makes the one-block flow explicit instead of hiding it behind a normal page scroll. */
.reel-wheel { --reel-position: 0%; position: fixed; z-index: 28; top: 50%; right: clamp(18px, 3.2vw, 54px); display: grid; justify-items: center; gap: 11px; width: 74px; transform: translateY(-50%); color: rgba(231,242,255,.76); pointer-events: auto; }
.reel-wheel-title, .reel-wheel-help { color: rgba(203,243,106,.72); font: 800 8px/1 'Space Grotesk', sans-serif; letter-spacing: .18em; writing-mode: vertical-rl; transform: rotate(180deg); }
.reel-wheel-help { color: rgba(231,242,255,.4); font-size: 7px; }
.reel-wheel-track { position: relative; display: grid; justify-items: center; align-items: center; gap: 0; width: 44px; height: 210px; padding: 8px 0; border: 1px solid rgba(110,231,249,.28); border-radius: 24px; background: linear-gradient(180deg, rgba(11,32,49,.96), rgba(24,17,47,.94)); box-shadow: 0 0 0 5px rgba(110,231,249,.035), 0 0 28px rgba(110,231,249,.15), inset 0 0 20px rgba(149,136,255,.16); }
.reel-wheel-line { position: absolute; top: 23px; bottom: 23px; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, var(--cyan), var(--violet), var(--lime)); opacity: .48; }
.reel-wheel-thumb { position: absolute; top: calc(23px + var(--reel-position)); left: 50%; width: 23px; height: 23px; transform: translate(-50%, -50%); border: 2px solid var(--lime); border-radius: 50%; background: #101d2e; box-shadow: 0 0 0 4px rgba(203,243,106,.1), 0 0 18px rgba(203,243,106,.78); pointer-events: none; transition: top .35s cubic-bezier(.2,.8,.2,1); }
.reel-wheel-dot { position: relative; z-index: 1; width: 16px; height: 16px; padding: 0; border: 2px solid rgba(231,242,255,.48); border-radius: 50%; background: #0d1c2d; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
.reel-wheel-dot:hover, .reel-wheel-dot.active { border-color: var(--lime); background: var(--lime); transform: scale(1.18); }
.reel-wheel-arrow { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(110,231,249,.34); border-radius: 50%; color: var(--cloud); background: rgba(11,27,43,.9); font: 700 18px/1 'Space Grotesk', sans-serif; cursor: pointer; box-shadow: 0 0 16px rgba(110,231,249,.12); transition: border-color .2s, color .2s, transform .2s; }
.reel-wheel-arrow:hover, .reel-wheel-arrow:focus-visible { border-color: var(--lime); color: var(--lime); transform: scale(1.08); outline: none; }
.reel-wheel-label { color: var(--cloud); font: 800 10px/1 'Space Grotesk', sans-serif; letter-spacing: .12em; }
@media (max-width: 900px) { .reel-wheel { display: none; } }
@media (prefers-reduced-motion: reduce) { .reel-wheel-thumb { transition: none; } }