:root {
  --background: #061b3a;
  --paper: #f1f8ff;
  --muted: #afc3d8;
  --signal: #55b7ff;
  --violet: #a981ff;
  --line: rgba(132, 190, 247, 0.13);
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--paper); font-family: var(--font); background: var(--background); }
.landing { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 38px 20px 54px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 14% 56%, rgba(45, 170, 255, .12), transparent 28%), radial-gradient(circle at 86% 41%, rgba(142, 89, 255, .13), transparent 31%); }
.page-grid { position: absolute; z-index: -1; inset: 0; opacity: .46; background-image: linear-gradient(to bottom, transparent 0, transparent 107px, var(--line) 108px), linear-gradient(to right, transparent 0, transparent 50%, rgba(143, 198, 255, .045) 50%, rgba(143, 198, 255, .045) calc(50% + 1px), transparent calc(50% + 1px)); background-size: 100% 108px, 86px 100%; mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); }
.market-chart { position: absolute; z-index: -1; top: 190px; left: 50%; width: min(1200px, 130vw); opacity: .47; pointer-events: none; transform: translateX(-50%); filter: drop-shadow(0 0 14px rgba(56, 187, 255, .18)); }
.market-chart svg { display: block; width: 100%; height: auto; }
.intro { width: min(768px, 100%); text-align: center; }
.brand-name { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--paper); font-size: 14px; font-weight: 900; letter-spacing: .18em; text-shadow: 0 0 22px rgba(85, 183, 255, .25); }
.brand-name > span { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 15px var(--signal); }
.brand-name b { color: var(--violet); font-weight: 900; }
h1 { margin: 0; color: var(--paper); font-size: 52px; font-weight: 900; line-height: 1.12; letter-spacing: -2.6px; }
h1 span { color: var(--signal); background: linear-gradient(95deg, #44c2ff 5%, #6dafff 43%, #ba86ff 95%); background-clip: text; text-shadow: 0 0 26px rgba(77, 176, 255, .16); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
h1 u { text-decoration-color: #b896ff; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.subtitle { width: min(672px, 100%); margin: 18px auto 0; color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.72; }
.subtitle strong { color: var(--paper); font-weight: 800; }
.subtitle em { color: var(--violet); font-style: normal; font-weight: 700; }
.watch-label { margin: 17px 0 23px; color: var(--signal); font-size: 14px; font-weight: 800; letter-spacing: .01em; text-shadow: 0 0 18px rgba(59, 183, 255, .25); }
.video-shell { position: relative; width: 320px; max-width: calc(100vw - 40px); height: 567px; overflow: hidden; padding: 2px; border: 1px solid rgba(190, 155, 255, .84); background: linear-gradient(145deg, #42c3ff 0%, #9a6aff 56%, #44bdff 100%); box-shadow: 0 0 0 4px rgba(81, 172, 255, .07), 0 0 34px rgba(69, 183, 255, .3), 0 0 56px rgba(149, 98, 255, .22), 0 16px 35px rgba(0, 7, 18, .4); }
.video-shell::after { position: absolute; z-index: 2; inset: 8px; border: 1px solid rgba(235, 243, 255, .16); content: ""; pointer-events: none; }
.video-shell iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; }
.audio-prompt { position: absolute; z-index: 3; inset: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; border: 0; color: #fff; cursor: pointer; background: radial-gradient(circle at 50% 46%, rgba(57, 173, 255, .24), transparent 28%), linear-gradient(180deg, rgba(3, 15, 35, .28), rgba(2, 12, 31, .72)); opacity: 1; transition: opacity .3s ease, visibility .3s ease, background .2s ease; }
.audio-prompt::before { position: absolute; inset: 14px; border: 1px solid rgba(231, 245, 255, .18); content: ""; }
.audio-prompt:hover { background: radial-gradient(circle at 50% 46%, rgba(130, 100, 255, .35), transparent 30%), linear-gradient(180deg, rgba(3, 15, 35, .15), rgba(2, 12, 31, .5)); }
.audio-prompt.is-hidden { visibility: hidden; pointer-events: none; opacity: 0; }
.audio-icon { position: relative; display: grid; place-items: center; width: 80px; height: 80px; border: 1px solid rgba(220, 239, 255, .96); border-radius: 50%; color: #fff; background: linear-gradient(145deg, rgba(50, 180, 255, .86), rgba(129, 82, 241, .9)); box-shadow: inset 0 1px rgba(255,255,255,.52), 0 0 0 9px rgba(110, 180, 255, .09), 0 0 31px rgba(93, 180, 255, .62); animation: sound-pulse 1.85s ease-in-out infinite; }
.play-triangle { margin-left: 3px; font-size: 23px; filter: drop-shadow(0 2px 2px rgba(3, 15, 35, .38)); }
.sound-wave { position: absolute; right: -11px; top: 50%; width: 12px; height: 22px; border: 2px solid rgba(225, 244, 255, .86); border-bottom-color: transparent; border-left-color: transparent; border-top-color: transparent; border-radius: 0 18px 18px 0; transform: translateY(-50%); }
.wave-two { right: -19px; width: 17px; height: 32px; opacity: .76; }
.audio-prompt-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 24px; text-align: center; text-shadow: 0 2px 5px rgba(0, 8, 22, .85); }
.audio-prompt-copy strong { max-width: 258px; font-size: 13px; font-weight: 900; letter-spacing: .015em; line-height: 1.35; }
.audio-prompt-copy small { color: #d2e5fb; font-size: 10px; font-weight: 600; }
.access-gate { display: flex; flex-direction: column; align-items: center; width: min(576px, 100%); margin-top: 23px; text-align: center; }
.access-gate > p { margin: 0 0 3px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.access-gate > p::before { display: inline-block; width: 12px; height: 12px; margin-right: 7px; border: 1px solid currentColor; border-radius: 50%; vertical-align: -1px; content: ""; }
.timer { min-height: 49px; color: var(--paper); font-size: 35px; font-weight: 900; line-height: 1.35; letter-spacing: 4px; text-shadow: 0 0 24px rgba(86, 190, 255, .38); }
.timer.is-unlocked { font-size: 25px; letter-spacing: 1px; }
.access-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; margin-top: 8px; overflow: hidden; border: 1px solid rgba(207, 230, 255, .93); color: #ffffff; font-size: 18px; font-weight: 800; letter-spacing: -.32px; text-shadow: 0 1px 2px rgba(0, 22, 57, .64); transition: transform .25s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease, color .35s ease, opacity .35s ease; }
.access-button::before { position: absolute; inset: 0; z-index: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.46) 48%, transparent 70%); content: ""; transform: translateX(-130%); animation: button-flash 2.7s ease-in-out infinite; }
.access-button > * { position: relative; z-index: 1; }
.telegram-icon { display: inline-block; font-size: 21px; filter: drop-shadow(0 1px 1px rgba(255,255,255,.45)); animation: plane-float 1.75s ease-in-out infinite; }
.lock-icon { display: inline-block; font-size: 19px; filter: grayscale(.25); }
.access-button.is-locked { border-color: rgba(139, 163, 190, .34); color: #aebdd0; background: linear-gradient(105deg, #18314f 0%, #263e5d 48%, #1b3151 100%); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 16px rgba(0, 5, 18, .2); cursor: not-allowed; }
.access-button.is-locked::before { display: none; }
.access-button.is-locked .lock-icon { animation: lock-breathe 2.6s ease-in-out infinite; }
.access-button.is-unlocked { border-color: rgba(207, 230, 255, .93); background: linear-gradient(105deg, #0787db 0%, #3e8dff 42%, #885def 100%); background-size: 180% 100%; box-shadow: inset 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(94, 191, 255, .28), 0 0 22px rgba(55, 160, 255, .54), 0 0 34px rgba(142, 93, 255, .25), 0 7px 20px rgba(0, 5, 18, .25); animation: unlock-reveal .55s cubic-bezier(.2,.9,.2,1) both, telegram-glow 1.75s ease-in-out .55s infinite, button-sheen 3.6s linear .55s infinite; }
.access-button.is-unlocked::before { animation: button-flash 2.7s ease-in-out .45s infinite; }
.access-button:not([aria-disabled="true"]):hover { transform: translateY(-2px) scale(1.008); box-shadow: inset 0 1px rgba(255,255,255,.6), 0 0 0 1px rgba(168, 209, 255, .64), 0 0 32px rgba(55, 160, 255, .82), 0 0 44px rgba(149, 98, 255, .45), 0 11px 26px rgba(0, 5, 18, .32); }
@keyframes telegram-glow { 0%, 100% { box-shadow: inset 0 1px rgba(255,255,255,.52), 0 0 0 1px rgba(94, 191, 255, .22), 0 0 20px rgba(55, 160, 255, .46), 0 0 30px rgba(142, 93, 255, .18), 0 7px 20px rgba(0, 5, 18, .25); } 50% { box-shadow: inset 0 1px rgba(255,255,255,.68), 0 0 0 2px rgba(169, 139, 255, .58), 0 0 34px rgba(74, 177, 255, .9), 0 0 47px rgba(149, 98, 255, .52), 0 8px 24px rgba(0, 5, 18, .3); } }
@keyframes button-sheen { to { background-position: 180% 0; } }
@keyframes button-flash { 0%, 28% { transform: translateX(-130%); } 47%, 100% { transform: translateX(130%); } }
@keyframes plane-float { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(3px, -2px) rotate(-2deg); } }
@keyframes sound-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 8px rgba(110, 180, 255, .09), 0 0 25px rgba(93, 180, 255, .46); } 50% { transform: scale(1.06); box-shadow: 0 0 0 13px rgba(151, 113, 255, .11), 0 0 37px rgba(133, 96, 255, .62); } }
@keyframes lock-breathe { 0%, 100% { opacity: .72; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes unlock-reveal { 0% { transform: scale(.97); filter: brightness(.7); } 55% { transform: scale(1.025); filter: brightness(1.25); } 100% { transform: scale(1); filter: brightness(1); } }

@media (max-width: 640px) {
  .landing { padding: 33px 16px 42px; }
  .market-chart { top: 300px; width: 190vw; opacity: .32; }
  .brand-name { margin-bottom: 10px; font-size: 12px; }
  h1 { font-size: clamp(30px, 9.2vw, 45px); line-height: 1.08; letter-spacing: -1.9px; }
  .subtitle { margin-top: 18px; font-size: 14px; line-height: 1.62; }
  .watch-label { margin: 16px 0 19px; font-size: 11px; }
  .video-shell { width: 100%; max-width: 320px; height: auto; aspect-ratio: 320 / 567; }
  .audio-icon { width: 68px; height: 68px; }
  .play-triangle { font-size: 20px; }
  .sound-wave { right: -10px; }
  .wave-two { right: -17px; }
  .audio-prompt-copy strong { font-size: 11px; }
  .access-gate { margin-top: 20px; }
  .access-gate > p { font-size: 9px; letter-spacing: .1em; }
  .access-gate > p::before { width: 10px; height: 10px; margin-right: 5px; }
  .timer { min-height: 42px; font-size: 29px; letter-spacing: 3px; }
  .timer.is-unlocked { font-size: 20px; }
  .access-button { min-height: 57px; font-size: 14px; }
  .telegram-icon { font-size: 18px; }
}