:root { --deep:#232447; --violet:#403293; --indigo:#445fbd; --gold:#ffd700; --gold-soft:#ffbe22; --lavender:#dedcff; --card:#2d3058ed; --card-solid:#2d3058; --lime:#96e76d; --pink:#ff006a; --line:rgba(207,204,255,.18); --font:"Manrope",sans-serif; --mono:"Roboto Mono",monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; color:#fff; background:var(--deep); font-family:var(--font); line-height:1.55; } body::before { content:""; position:fixed; inset:0; z-index:-4; pointer-events:none; background:radial-gradient(ellipse 72% 28% at 5% 12%,rgba(135,102,255,.3),transparent 75%),radial-gradient(ellipse 80% 28% at 100% 83%,rgba(255,0,106,.16),transparent 70%),var(--deep); }.site-shell { width:min(100%,500px); min-height:100vh; position:relative; z-index:1; margin:0 auto; background:rgba(35,36,71,.9); box-shadow:0 0 40px rgba(0,0,0,.2); }.floating-emojis { position:fixed; z-index:0; inset:0; pointer-events:none; overflow:hidden; }.floating-emojis i { position:absolute; opacity:.12; font-size:25px; filter:drop-shadow(0 0 9px currentColor); animation:drift 12s ease-in-out infinite alternate; }.floating-emojis i:nth-child(1) { top:10%; left:3%; }.floating-emojis i:nth-child(2) { top:27%; right:5%; animation-delay:-3s; }.floating-emojis i:nth-child(3) { top:48%; left:4%; animation-delay:-8s; }.floating-emojis i:nth-child(4) { top:67%; right:4%; animation-delay:-5s; }.floating-emojis i:nth-child(5) { top:81%; left:3%; animation-delay:-10s; }.floating-emojis i:nth-child(6) { top:92%; right:5%; animation-delay:-6s; }

.page-header { min-height:69px; position:relative; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:10px 16px; text-align:center; background:linear-gradient(90deg,var(--violet),var(--indigo)); }.header-shine { position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.15) 50%,transparent 75%); animation:shimmer 3.4s linear infinite; }.page-header h1 { z-index:1; margin:0; color:var(--gold); font-size:clamp(20px,5.5vw,28px); line-height:1.15; letter-spacing:-.035em; text-shadow:2px 2px 7px rgba(0,0,0,.35); }.page-header small { z-index:1; margin-top:3px; color:#dedcff; font:8px var(--mono); letter-spacing:.13em; }
.hero-banner { height:220px; position:relative; overflow:hidden; border-bottom:4px solid var(--gold); background:#191933; }.hero-banner img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 42%; }.hero-banner::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,rgba(8,8,23,.12),transparent 42%,rgba(8,8,23,.25)); }.hero-banner span { position:absolute; z-index:1; left:12px; bottom:11px; padding:6px 8px; border:1px solid rgba(255,230,139,.42); border-radius:6px; color:#fff5c9; background:rgba(40,27,73,.78); font:8px var(--mono); letter-spacing:.06em; }.hero-banner span i { width:6px; height:6px; display:inline-block; margin:0 5px 1px 0; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); animation:blink 1.2s infinite; }

.main-content { padding:22px 16px 105px; }.intro-block { text-align:center; }.intro-block h2 { margin:0 0 7px; color:var(--gold-soft); font-size:clamp(20px,5.5vw,26px); line-height:1.2; text-shadow:2px 2px 6px rgba(0,0,0,.38); }.intro-block p { max-width:420px; margin:0 auto; color:var(--lavender); font-size:15px; line-height:1.5; }.main-cta { width:min(100%,320px); min-width:260px; min-height:52px; display:flex; justify-content:center; align-items:center; gap:12px; margin:24px auto 24px; padding:0 26px; border:1px solid rgba(151,205,255,.22); border-radius:14px; color:#f2f8ff; background:rgba(23,37,56,.92); box-shadow:0 6px 18px rgba(0,0,0,.24); font-size:17px; font-weight:700; text-decoration:none; transition:transform .2s,background .2s,box-shadow .2s; }.main-cta:hover { transform:translateY(-2px); background:rgba(37,57,82,.98); box-shadow:0 8px 20px rgba(52,174,241,.22); }.contact-text { padding-bottom:3px; border-bottom:1px solid #77d5ff; text-decoration:underline; text-decoration-color:rgba(255,78,132,.9); text-underline-offset:3px; font-size:17px; }.premium-telegram { width:22px; height:22px; position:relative; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#63d9ff,#168adf 70%); box-shadow:0 0 0 2px rgba(95,215,255,.14),0 0 13px rgba(58,190,255,.68); animation:telegram-pop 1.8s ease-in-out infinite; }.premium-telegram::after { content:""; width:6px; height:6px; position:absolute; top:1px; right:2px; border-radius:50%; background:rgba(255,255,255,.9); filter:blur(.4px); }.premium-telegram svg { width:13px; position:relative; z-index:1; fill:currentColor; filter:drop-shadow(0 1px 1px rgba(0,0,0,.17)); }
.video-section { padding:18px 12px 14px; border:1px solid rgba(207,204,255,.14); border-radius:15px; background:rgba(45,48,88,.67); box-shadow:0 4px 16px rgba(0,0,0,.2); text-align:center; }.section-label { color:var(--lime); font:10px var(--mono); letter-spacing:.1em; }.section-label span { margin-right:4px; color:var(--gold); }.video-section h3 { margin:7px 0 3px; color:var(--gold); font-size:21px; text-shadow:1px 1px 5px rgba(0,0,0,.3); }.video-section > p { margin:0 0 13px; color:var(--lavender); font-size:14px; }.video-container,.bot-video-wrap { position:relative; width:min(100%,330px); margin:0 auto; padding:5px; overflow:hidden; border-radius:13px; background:linear-gradient(145deg,var(--gold),#746eff 52%,var(--pink)); box-shadow:0 6px 20px rgba(0,0,0,.27); }.video-container video,.bot-video-wrap video { width:100%; aspect-ratio:9/16; display:block; border-radius:9px; object-fit:cover; background:#17162e; }.video-container::after,.bot-video-wrap::after { content:""; position:absolute; z-index:1; inset:5px; border-radius:9px; pointer-events:none; background:linear-gradient(to bottom,rgba(8,5,25,.55),transparent 22%,transparent 73%,rgba(8,5,25,.7)); }.video-live,.sound-control,.video-caption,.video-start,.video-actions { position:absolute; z-index:3; }.video-live { top:12px; left:12px; padding:5px 6px; border:1px solid rgba(255,255,255,.2); border-radius:5px; color:#fff4bd; background:rgba(35,36,71,.72); font:8px var(--mono); letter-spacing:.05em; }.video-live i { width:5px; height:5px; display:inline-block; margin:0 3px 1px 0; border-radius:50%; background:#ff5b6a; box-shadow:0 0 8px #ff5b6a; animation:blink 1.2s infinite; }.sound-control { width:34px; height:34px; top:11px; right:11px; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:#fff; background:rgba(35,36,71,.67); cursor:pointer; font-size:15px; }.video-actions { top:50px; right:11px; display:flex; gap:5px; }.video-actions button,.video-external { width:27px; height:27px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#fff7d4; background:rgba(35,36,71,.75); font:15px var(--font); text-decoration:none; cursor:pointer; }.video-external { font:700 15px var(--mono); }.video-caption { bottom:41px; left:0; right:0; color:#f9f2ca; font:9px var(--mono); text-align:center; pointer-events:none; }.video-start { display:none; top:50%; left:50%; min-height:46px; padding:0 14px; transform:translate(-50%,-50%); border:1px solid rgba(255,238,150,.6); border-radius:25px; color:#fff9dc; background:linear-gradient(135deg,#ff006a,#ff9c39); box-shadow:0 5px 18px rgba(0,0,0,.35); white-space:nowrap; font:700 12px var(--font); cursor:pointer; }.video-container.needs-action .video-start { display:block; }
.features-section { display:grid; gap:10px; margin-top:20px; }.feature-card { position:relative; display:flex; gap:13px; align-items:flex-start; padding:15px; overflow:hidden; border-radius:13px; background:var(--card); box-shadow:0 4px 16px rgba(0,0,0,.2); }.feature-card::before { content:""; position:absolute; top:0; left:-110%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); transition:left .7s; }.feature-card:hover::before { left:110%; }.feature-icon { flex:0 0 auto; width:43px; height:43px; display:grid; place-items:center; border-radius:12px; background:rgba(255,215,0,.11); font-size:24px; }.feature-card h3 { margin:0 0 3px; color:var(--gold); font-size:16px; line-height:1.25; }.feature-card p { margin:0; color:var(--lavender); font-size:13px; line-height:1.45; }.why-card { margin-top:16px; padding:17px 16px; border-radius:13px; background:var(--card-solid); box-shadow:0 4px 16px rgba(0,0,0,.2); }.why-card h3 { margin:0 0 11px; color:var(--gold-soft); font-size:17px; text-align:center; }.why-card ul { margin:0; padding:0; list-style:none; }.why-card li { position:relative; padding:6px 0 6px 20px; color:var(--lime); font-size:13px; line-height:1.4; }.why-card li::before { content:"•"; position:absolute; left:7px; font-size:18px; line-height:15px; }
.live-channel-section { margin-top:21px; padding:16px 10px 10px; overflow:hidden; border:1px solid rgba(142,221,255,.2); border-radius:15px; background:linear-gradient(145deg,rgba(53,78,121,.76),rgba(25,32,61,.83)); box-shadow:0 7px 20px rgba(0,0,0,.16); }.live-channel-heading { padding:0 4px 13px; text-align:center; }.live-channel-heading h3 { margin:5px 0; color:var(--gold); font-size:20px; line-height:1.2; }.live-channel-heading p { margin:0; color:var(--lavender); font-size:13px; line-height:1.45; }.accordion { margin-top:14px; overflow:hidden; border:1px solid rgba(207,204,255,.16); border-radius:13px; background:rgba(45,48,88,.68); }.accordion summary { min-height:56px; display:flex; align-items:center; gap:9px; padding:10px 13px; cursor:pointer; list-style:none; }.accordion summary::-webkit-details-marker { display:none; }.summary-icon { font-size:21px; }.accordion summary b { flex:1; color:#fff9d7; font-size:13px; }.summary-open { color:#c7c2ff; font:9px var(--mono); }.accordion[open] .summary-open { color:var(--gold); }.accordion-body { padding:0 10px 12px; }.accordion-copy { margin:0 0 9px; color:var(--lavender); font-size:12px; }.telegram-window { overflow:hidden; border:4px solid #192431; border-radius:15px; background:#0f1925; box-shadow:0 8px 22px rgba(0,0,0,.34); }.telegram-bar { min-height:60px; display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:#182534; }.telegram-bar b { display:block; font-size:14px; }.telegram-bar small { display:block; margin-top:2px; color:#829aab; font-size:10px; }.telegram-bar > span { color:#a5bfce; font-size:15px; }.telegram-chat { height:600px; position:relative; padding:13px 9px; overflow:hidden; background-color:#0c1521; background-image:radial-gradient(rgba(126,185,220,.08) 1px,transparent 1px); background-size:18px 18px; }.message { width:90%; position:relative; padding:10px 9px 8px; border-radius:4px 13px 13px 13px; color:#e2eff7; background:#193142; box-shadow:0 3px 8px rgba(0,0,0,.2); }.message b { color:#52beef; font-size:12px; }.message p { margin:5px 0 7px; font-size:12px; line-height:1.44; }.reaction-list { display:flex; flex-wrap:wrap; gap:4px; }.reaction-list button { padding:4px 6px; border:0; border-radius:10px; color:#c5e8f4; background:#16445e; cursor:pointer; font-size:11px; transition:transform .16s,background .16s; }.reaction-list button:active { transform:scale(.88); }.reaction-list button.is-selected { outline:1px solid #79dfff; background:#277098; }.reaction-list strong { font:9px var(--mono); }.small-list { margin-top:4px; }.message-time { display:block; margin-top:7px; color:#7898aa; text-align:right; font-size:9px; }.message-time strong { color:inherit; font:inherit; }.share { width:31px; height:31px; position:absolute; right:-42px; bottom:8px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#203c51; font-style:normal; font-size:14px; }.chat-date { width:max-content; display:block; margin:13px auto; padding:5px 10px; border-radius:8px; color:#cbe0e8; background:#243b4e; font-size:10px; }.message-two { width:76%; }.message-two img { width:100%; height:135px; display:block; margin:7px 0; object-fit:cover; object-position:center 22%; }.message-live { width:85%; margin-top:12px; background:#18394b; }.live-members { display:flex; align-items:center; gap:7px; padding:6px; margin:3px 0 7px; border-radius:6px; background:rgba(5,32,46,.35); }.live-members span { display:flex; }.live-members i { width:19px; height:19px; display:grid; place-items:center; margin-right:-5px; border:1px solid #1c4056; border-radius:50%; color:#fff; background:#bf6d83; font:7px var(--mono); }.live-members i:nth-child(2) { background:#6f8bda; }.live-members i:nth-child(3) { background:#82af85; }.live-members i:nth-child(4) { background:#d1a767; }.live-members b { color:#bceada; font-size:9px; }.live-members em { width:6px; height:6px; display:inline-block; margin:0 4px 1px 0; border-radius:50%; background:#70f1ca; box-shadow:0 0 7px #70f1ca; animation:blink 1.1s infinite; }.channel-live { position:absolute; right:9px; bottom:10px; padding:5px 7px; border-radius:6px; color:#a8ebd7; background:rgba(19,64,68,.9); font:8px var(--mono); animation:blink 2s infinite; }.telegram-input { min-height:41px; display:flex; align-items:center; gap:7px; padding:0 9px; color:#8daab8; background:#192735; font-size:16px; }.telegram-input span { flex:1; font-size:11px; }.telegram-input b { font-size:14px; }.bot-banner { width:100%; height:150px; display:block; margin-bottom:8px; object-fit:cover; object-position:center 10%; border-radius:9px; }.bot-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.bot-grid p { min-height:83px; margin:0; padding:8px; border-radius:9px; color:#fff5cf; background:rgba(31,28,63,.74); font-size:14px; }.bot-grid b { display:block; margin-top:5px; color:var(--gold); font-size:10px; line-height:1.25; }.bot-grid small { display:block; margin-top:3px; color:var(--lavender); font-size:8px; line-height:1.3; }.bot-video-wrap { width:min(100%,260px); margin-top:10px; }.trust-line { margin:17px 0 0; color:#c9c5ff; text-align:center; font-size:10px; line-height:1.5; }
.telegram-fab { position:fixed; z-index:10; right:15px; bottom:13px; display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; text-decoration:none; }.telegram-fab > span { width:51px; height:51px; display:grid; place-items:center; border:1px solid rgba(238,250,255,.58); border-radius:50%; background:linear-gradient(145deg,#4acff4,#167ddb); box-shadow:0 8px 24px rgba(21,115,210,.55),0 0 0 6px rgba(64,196,241,.12); animation:fab-bounce 2.1s infinite; }.telegram-fab svg { width:27px; fill:currentColor; }.telegram-fab small { padding:2px 5px; border-radius:4px; color:#d7f4ff; background:rgba(32,42,78,.88); font:8px var(--mono); }
.message { animation:message-enter .6s both; }.message-two { animation-delay:.22s; }.message-live { animation-delay:.46s; }.reveal { opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1); }.reveal.is-visible { opacity:1; transform:translateY(0); }
@keyframes shimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } } @keyframes blink { 50% { opacity:.35; } } @keyframes drift { from { transform:translateY(0) rotate(-8deg); } to { transform:translateY(-36px) rotate(12deg); } } @keyframes fab-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } } @keyframes telegram-pop { 0%,100% { transform:translateY(0) scale(1); box-shadow:0 0 0 2px rgba(95,215,255,.14),0 0 13px rgba(58,190,255,.68); } 50% { transform:translateY(-2px) scale(1.08); box-shadow:0 0 0 5px rgba(95,215,255,0),0 0 17px rgba(58,190,255,.78); } } @keyframes message-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:520px) { .main-content { padding-left:20px; padding-right:20px; }.hero-banner { height:248px; }.video-container { width:min(100%,350px); }.telegram-window { max-width:410px; margin:0 auto; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }