:root {
  --bg: #050606;
  --panel: #0a0c0c;
  --line: #272b2b;
  --text: #f1f3ef;
  --muted: #9a9d9b;
  --cyan: #36d8ea;
  --violet: #6d57ff;
  --width: 1568px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Manrope, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 30; 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='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.section-width { width: min(var(--width), calc(100% - 48px)); margin-inline: auto; }
.site-header { padding: 20px 24px 0; position: relative; z-index: 20; }
.header-shell { width: min(var(--width), 100%); height: 84px; margin: auto; padding: 0 18px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 46px; background: rgba(5, 6, 6, .72); backdrop-filter: blur(20px); box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.brand { display: flex; align-items: center; gap: 13px; white-space: nowrap; font-size: 22px; }
.mini-medal { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #414747; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #25292a, #070808 67%); box-shadow: inset 0 0 0 6px #0a0c0c, inset 0 0 0 7px #373c3d, 0 0 24px rgba(54,216,234,.07); font-weight: 700; }
.mini-medal.small { width: 42px; height: 42px; box-shadow: inset 0 0 0 4px #0a0c0c, inset 0 0 0 5px #373c3d; }
.nav { display: flex; align-items: center; gap: 44px; margin: auto; color: #a4a7a5; }
.nav a, .footer a { transition: color .2s; }
.nav a:hover, .footer a:hover { color: var(--cyan); }
.header-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; border-radius: 999px; font-weight: 700; }
.header-cta { padding: 17px 27px; background: #f1f2ee; color: #0b0c0c; }
.menu { display: none; border: 0; background: none; padding: 10px; }
.menu i { display: block; width: 24px; height: 1px; margin: 6px; background: #fff; }
.hero { min-height: 970px; padding-top: 54px; }
.hero-inner { width: min(var(--width), calc(100% - 48px)); min-height: 790px; margin: auto; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; position: relative; }
.hero-copy { position: relative; z-index: 4; }
.pill-label, .kicker { font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.pill-label { width: max-content; display: flex; align-items: center; gap: 11px; border: 1px solid #303535; padding: 10px 16px; border-radius: 999px; background: rgba(11,13,13,.78); box-shadow: 0 8px 35px rgba(0,0,0,.25); }
.pill-label i, .float-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); }
.hero h1 { margin: 38px 0 25px; font-size: clamp(84px, 7.5vw, 146px); line-height: .89; letter-spacing: -.067em; font-weight: 600; }
.hero h1 span { color: #a7aaa8; }
.hero-copy > p { max-width: 780px; margin: 0; color: #c0c3c1; font-size: 22px; line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; margin-top: 37px; }
.button { min-height: 58px; padding: 0 26px; border: 1px solid #353a3a; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); border-color: #778080; box-shadow: 0 14px 42px rgba(0,0,0,.28); }
.button.primary { background: #f2f3ef; color: #0a0b0b; border-color: #f2f3ef; }
.button.ghost { background: #111313; color: #e8eae7; }
.hero-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 38px; }
.hero-tags span, .platforms span { border: 1px solid #292e2e; padding: 11px 16px; border-radius: 999px; color: #838886; font-size: 13px; background: #090b0b; }
.hero-signal { height: 760px; position: relative; display: grid; place-items: center; perspective: 1000px; }
.aura { position: absolute; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(31,141,163,.27), rgba(44,36,112,.1) 48%, transparent 70%); filter: blur(12px); }
.orbit { position: absolute; border: 1px solid rgba(64,163,191,.23); border-radius: 50%; }
.orbit-1 { width: 720px; height: 720px; border-style: dashed; }
.orbit-2 { width: 610px; height: 610px; }
.orbit-3 { width: 500px; height: 500px; }
.ticks { position: absolute; width: 690px; height: 690px; border-radius: 50%; opacity: .23; background: repeating-conic-gradient(from 0deg, #1582a5 0deg 1.3deg, transparent 1.3deg 14deg); -webkit-mask: radial-gradient(transparent 63%, #000 64% 68%, transparent 69%); mask: radial-gradient(transparent 63%, #000 64% 68%, transparent 69%); }
.arc { position: absolute; border-radius: 50%; border: 3px solid transparent; }
.arc-cyan { width: 720px; height: 720px; border-right-color: var(--cyan); border-bottom-color: var(--cyan); transform: rotate(19deg); filter: drop-shadow(0 0 8px rgba(54,216,234,.5)); }
.arc-violet { width: 650px; height: 650px; border-left-color: var(--violet); border-bottom-color: var(--violet); transform: rotate(-24deg); }
.arc-white { width: 622px; height: 622px; border-top-color: rgba(255,255,255,.58); border-right-color: rgba(255,255,255,.58); transform: rotate(-22deg); }
.hero-medal { width: 515px; height: 515px; position: relative; z-index: 3; filter: drop-shadow(0 40px 38px rgba(0,0,0,.72)); transition: transform .2s cubic-bezier(.2,.75,.25,1), filter .2s; transform-style: preserve-3d; will-change: transform; }
.node { position: absolute; z-index: 5; width: 14px; height: 14px; border-radius: 50%; background: #e8ffff; box-shadow: 0 0 13px 5px rgba(54,216,234,.45); }
.node-a { right: 6%; bottom: 17%; }.node-b { left: 15%; bottom: 22%; background: #9d90ff; box-shadow: 0 0 13px 5px rgba(109,87,255,.45); }.node-c { right: 14%; top: 30%; width: 9px; height: 9px; }
.float-status { position: absolute; z-index: 6; display: flex; align-items: center; gap: 11px; padding: 14px 18px; border: 1px solid #343b3b; border-radius: 999px; background: rgba(9,12,12,.87); backdrop-filter: blur(14px); font-size: 14px; font-weight: 700; box-shadow: 0 10px 34px rgba(0,0,0,.35), inset 0 0 18px rgba(54,216,234,.04); }
.status-ready { right: 1%; top: 26%; }.status-online { left: 3%; bottom: 18%; }
.story { padding: 100px 0 40px; border-top: 1px solid var(--line); }
.story-intro { min-height: 520px; display: flex; flex-direction: column; justify-content: center; }
.story h2, .section-title h2, .app-copy h2, .final-cta h2 { margin: 22px 0 0; font-size: clamp(60px, 6.8vw, 116px); line-height: .98; letter-spacing: -.06em; font-weight: 600; }
.story h2 span { color: #838785; }
.story-intro p { max-width: 620px; margin: 32px 0 0 auto; color: var(--muted); font-size: 19px; line-height: 1.7; }
.story-row { min-height: 760px; display: grid; grid-template-columns: 80px .8fr 1.15fr; gap: 62px; align-items: center; border-top: 1px solid var(--line); }
.story-number { align-self: start; padding-top: 66px; color: #5e6461; font-size: 13px; }
.story-text h3 { margin: 20px 0 28px; font-size: clamp(42px, 4vw, 68px); line-height: 1.03; letter-spacing: -.05em; }
.story-text p { max-width: 480px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.story-art { min-height: 510px; border: 1px solid #252b2b; border-radius: 36px; background: radial-gradient(circle at 50% 25%, #13282d, #090b0b 65%); position: relative; overflow: hidden; }
.tariff-art { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tariff-art > span { width: 72px; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #343a3a; border-radius: 18px; color: #777e7b; background: #0b0e0e; font-size: 22px; position: relative; z-index: 1; cursor: default; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s, box-shadow .3s; }
.tariff-art .selected { width: 72px; height: 112px; background: #0b0e0e; color: #777e7b; font-size: 22px; box-shadow: none; }
.tariff-art > span:hover { z-index: 5; animation-play-state: paused; transform: scale(1.38); background: #ecf1ed; color: #0a0c0c; border-color: #ecf1ed; box-shadow: 0 24px 65px rgba(54,216,234,.18); }
.tariff-art b { font-size: 22px; font-weight: 500; line-height: 1; transition: transform .28s ease; }
.tariff-art small { margin-top: 7px; font-size: 10px; line-height: 1; color: #666d6a; transition: transform .28s ease, color .25s; }
.tariff-art em { position: absolute; bottom: 13px; font-size: 11px; line-height: 1; font-style: normal; font-weight: 800; letter-spacing: .02em; color: #081011; opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .28s ease; }
.tariff-art > span:hover b, .tariff-art > span:hover small { transform: translateY(-13px); }
.tariff-art > span:hover small { color: #46504d; }
.tariff-art > span:hover em { opacity: 1; transform: translateY(0); }
.chat-art { padding: 54px; display: flex; flex-direction: column; justify-content: center; }
.chat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }.chat-head i { width: 9px; height: 9px; margin-left: auto; background: #5eeca3; border-radius: 50%; }
.bubble { max-width: 390px; padding: 21px; border-radius: 20px 20px 20px 5px; background: #1b2527; color: #cbd1cf; line-height: 1.55; }
.chat-button { margin-top: 12px; padding: 17px 20px; border-radius: 14px; display: flex; justify-content: space-between; background: var(--cyan); color: #071011; font-weight: 800; }
.connect-art { display: grid; place-items: center; }.radar { width: 310px; height: 310px; border: 1px solid #31545b; border-radius: 50%; display: grid; place-items: center; position: relative; box-shadow: 0 0 70px rgba(54,216,234,.11); }.radar span { position: absolute; inset: 14%; border: 1px solid rgba(54,216,234,.2); border-radius: 50%; }.radar span:nth-child(2) { inset: 28%; }.radar span:nth-child(3) { inset: 42%; }.radar b { z-index: 2; width: 100px; height: 100px; display: grid; place-items: center; border-radius: 50%; background: #eaf0ec; color: #071011; font-size: 42px; }.connect-state { position: absolute; bottom: 55px; padding: 12px 18px; border: 1px solid #34403d; border-radius: 99px; background: #0b1010; font-size: 12px; letter-spacing: .12em; }.connect-state i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #55e99e; box-shadow: 0 0 10px #55e99e; }
.tariffs { padding: 140px 0; background: #080a0a; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 65px; }
.section-title h2 { font-size: clamp(58px, 6vw, 96px); }
.section-title > p { max-width: 400px; color: var(--muted); line-height: 1.7; }
.custom-plan { min-height: 440px; margin-bottom: 54px; padding: 48px; display: grid; grid-template-columns: 1.05fr .9fr 1fr; gap: 48px; align-items: center; border: 1px solid #3d6d75; border-radius: 34px; background: radial-gradient(circle at 8% 20%, rgba(54,216,234,.16), transparent 34%), linear-gradient(135deg,#10272c 0%,#0b1011 46%,#090b0b 100%); position: relative; overflow: hidden; box-shadow: 0 36px 100px rgba(0,0,0,.28); }
.custom-plan::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0 45%, rgba(255,255,255,.035) 50%, transparent 55%); translate: -100% 0; animation: customSheen 8s ease-in-out infinite; pointer-events: none; }
.custom-decoration { position: absolute; width: 520px; height: 520px; left: -260px; top: -275px; border: 1px solid rgba(54,216,234,.16); border-radius: 50%; pointer-events: none; }
.custom-decoration i { position: absolute; inset: 15%; border: 1px solid rgba(54,216,234,.12); border-radius: 50%; }
.custom-decoration i:nth-child(2) { inset: 30%; }.custom-decoration i:nth-child(3) { inset: 45%; background: rgba(54,216,234,.06); }
.custom-copy,.custom-control,.custom-result { position: relative; z-index: 2; }
.custom-badge { width: max-content; margin-bottom: 24px; padding: 9px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid #396169; border-radius: 99px; color: #c7d0ce; background: rgba(7,12,13,.48); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.custom-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: nodePulse 2s ease-in-out infinite; }
.custom-copy h3 { margin: 15px 0 16px; font-size: clamp(36px,3.4vw,56px); line-height: 1.04; letter-spacing: -.05em; }
.custom-copy > p { max-width: 430px; margin: 0; color: #929a97; font-size: 15px; line-height: 1.65; }
.custom-rule { width: max-content; margin-top: 24px; padding: 11px 16px; display: flex; align-items: center; gap: 13px; border: 1px solid #3f4d4d; border-radius: 99px; background: #0a0e0f; }
.custom-rule b { font-size: 14px; }.custom-rule span { color: var(--cyan); }
.custom-control { padding: 28px; border: 1px solid #2d3b3c; border-radius: 24px; background: rgba(5,8,8,.5); }
.custom-control label { display: block; margin-bottom: 12px; color: #7e8784; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.amount-field { height: 76px; display: flex; align-items: center; border-bottom: 1px solid #425051; }
.amount-field input { width: 100%; border: 0; outline: 0; background: transparent; color: #f2f5f1; font: 600 52px/1 Manrope,Arial,sans-serif; letter-spacing: -.05em; appearance: textfield; }
.amount-field input::-webkit-inner-spin-button,.amount-field input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.amount-field span { color: #9aa3a0; font-size: 22px; }
.custom-range { width: 100%; height: 3px; margin: 30px 0 8px; appearance: none; border-radius: 99px; outline: 0; background: linear-gradient(90deg,var(--cyan) var(--range-progress,1%),#283334 var(--range-progress,1%)); cursor: pointer; }
.custom-range::-webkit-slider-thumb { width: 18px; height: 18px; appearance: none; border: 3px solid #eff5f2; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px rgba(54,216,234,.75); }
.custom-range::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #eff5f2; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px rgba(54,216,234,.75); }
.range-labels { display: flex; justify-content: space-between; color: #596360; font-size: 10px; }
.custom-result { min-height: 280px; padding: 30px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.78); border-radius: 26px; background: #edf2ee; color: #08100e; box-shadow: 0 24px 70px rgba(0,0,0,.25); }
.custom-result .plan-label { color: #58615e; }
.custom-total { margin: 38px 0 10px; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.custom-total b { font-size: clamp(25px,2vw,34px); letter-spacing: -.04em; }.custom-total i { color: #65706c; font-style: normal; }
.custom-result > p { margin: 0; color: #5d6763; font-size: 13px; }
.custom-result button { width: 100%; margin-top: auto; padding: 16px 18px; display: flex; justify-content: space-between; border: 1px solid #111817; border-radius: 99px; background: #0a0f0e; color: #f3f5f2; font-weight: 800; cursor: pointer; transition: transform .2s, background .2s; }
.custom-result button:hover { transform: translateY(-2px); background: #102d31; }
@keyframes customSheen { 0%,55% { translate: -100% 0; } 80%,100% { translate: 100% 0; } }
.price-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.price-card { min-height: 410px; padding: 26px; display: flex; flex-direction: column; border: 1px solid #282d2d; border-radius: 24px; background: #0c0f0f; position: relative; }
.price-card.featured { border-color: #49828c; background: linear-gradient(160deg, #143038, #0a0e0f 70%); box-shadow: 0 28px 80px rgba(27,134,151,.09); }
.plan-label { color: #6f7774; font-size: 10px; letter-spacing: .15em; }.price-card h3 { margin: 20px 0 0; font-size: 24px; }.price { margin: 65px 0 0; font-size: 20px; }.price b { font-size: 47px; letter-spacing: -.06em; }.price-card p { color: #818784; line-height: 1.5; font-size: 13px; }.price-card button { width: 100%; margin-top: auto; padding: 15px 17px; display: flex; justify-content: space-between; border: 1px solid #3b4241; border-radius: 99px; background: transparent; color: #eef0ed; cursor: pointer; }.price-card button:hover { background: #edf1ed; color: #080a09; }.best { position: absolute; top: -12px; right: 18px; border-radius: 99px; padding: 7px 10px; background: var(--cyan); color: #061011; font-size: 9px; font-weight: 800; letter-spacing: .1em; }.price-note { margin: 25px 0 0; text-align: center; color: #59615e; font-size: 12px; }
.app-section { min-height: 930px; display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }.app-visual { height: 700px; display: grid; place-items: center; position: relative; }.app-orbit { position: absolute; width: 620px; height: 620px; border: 1px solid rgba(54,216,234,.15); border-radius: 50%; background: radial-gradient(circle, rgba(54,216,234,.16), transparent 64%); box-shadow: inset 0 0 0 70px rgba(54,216,234,.015), inset 0 0 0 140px rgba(54,216,234,.015); }.phone { width: 294px; height: 590px; padding: 80px 28px; text-align: center; border: 7px solid #292d2d; border-radius: 50px; background: linear-gradient(160deg,#111718,#080a0a 70%); position: relative; box-shadow: 0 42px 90px #000; }.phone-island { position: absolute; top: 15px; left: 50%; translate: -50%; width: 83px; height: 23px; border-radius: 20px; background: #030404; }.phone-logo { width: 86px; height: 86px; margin: 0 auto 60px; color: var(--cyan); font-size: 28px; }.phone small { display: block; color: #65706c; letter-spacing: .14em; }.phone strong { display: block; margin-top: 8px; font-size: 22px; }.toggle { width: 94px; height: 50px; margin: 80px auto 18px; padding: 5px; border-radius: 99px; background: #164b4f; box-shadow: 0 0 30px rgba(54,216,234,.18); }.toggle i { display: block; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px rgba(54,216,234,.5); }.phone p { color: #8b9490; font-size: 13px; }.app-copy h2 { font-size: clamp(58px, 5.5vw, 92px); }.app-copy > p { max-width: 570px; color: var(--muted); font-size: 18px; line-height: 1.75; }.platforms { display: flex; gap: 8px; flex-wrap: wrap; margin: 30px 0; }
.faq { padding: 130px 0; border-top: 1px solid var(--line); }.faq-list { border-top: 1px solid var(--line); }details { border-bottom: 1px solid var(--line); }summary { list-style: none; padding: 30px 2px; display: flex; justify-content: space-between; cursor: pointer; font-size: 20px; }summary::-webkit-details-marker { display:none; }summary span { color: #747a77; font-size: 28px; transition: transform .2s; }details[open] summary span { transform: rotate(45deg); color: var(--cyan); }details p { max-width: 760px; margin: -8px 0 28px; color: var(--muted); line-height: 1.7; }
.final-cta { min-height: 760px; padding: 130px 24px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; position: relative; overflow: hidden; border-top: 1px solid var(--line); }.final-glow { position: absolute; bottom: -480px; width: 1000px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(54,216,234,.3), rgba(77,65,196,.08) 40%, transparent 68%); }.final-cta > *:not(.final-glow) { position: relative; z-index: 2; }.final-cta h2 { margin-bottom: 52px; }
.footer { min-height: 170px; display: flex; align-items: center; gap: 50px; color: #6e7471; font-size: 13px; }.footer p { margin-right: auto; }.footer > div { display: flex; gap: 24px; }.footer .brand { color: var(--text); font-size: 18px; }
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .2s; }.modal.open { opacity: 1; visibility: visible; }.modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.76); backdrop-filter: blur(10px); }.modal-card { width: min(470px, calc(100% - 32px)); padding: 40px; border: 1px solid #39403f; border-radius: 28px; background: #101414; position: relative; }.modal-card h2 { margin: 18px 0; font-size: 40px; }.modal-card p { color: var(--muted); line-height: 1.65; }.modal-plan { display: block; font-size: 20px; }.modal-close { position: absolute; right: 18px; top: 13px; border: 0; background: transparent; color: #8b918e; font-size: 31px; cursor: pointer; }.modal-ok { width: 100%; margin-top: 14px; }
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s ease; }.reveal.visible { opacity: 1; transform: none; }
@media (max-width: 1250px) { .custom-plan { grid-template-columns: 1fr 1fr; }.custom-copy { grid-column: 1 / -1; } }
@media (max-width: 900px) { .custom-plan { padding: 32px; grid-template-columns: 1fr; gap: 24px; }.custom-copy { grid-column: auto; }.custom-result { min-height: 250px; } }
@media (max-width: 560px) { .custom-plan { margin-bottom: 38px; padding: 22px; border-radius: 26px; }.custom-copy h3 { font-size: 39px; }.custom-control,.custom-result { padding: 22px; }.amount-field input { font-size: 44px; }.custom-total { margin-top: 28px; }.custom-total b { font-size: 25px; } }
@media (max-width: 1250px) { .hero-inner { grid-template-columns: 1.08fr .92fr; }.hero-signal { transform: scale(.82); transform-origin: center; }.price-grid { grid-template-columns: repeat(3,1fr); }.price-card:nth-child(4),.price-card:nth-child(5) { min-height: 360px; }.story-row { grid-template-columns: 50px 1fr 1fr; gap: 30px; } }
@media (max-width: 900px) { .site-header { padding: 12px 12px 0; }.header-shell { height: 70px; padding: 0 12px; }.mini-medal { width: 46px; height: 46px; }.nav,.header-cta { display: none; }.menu { display: block; margin-left: auto; }.header-shell.menu-open .nav { display: flex; position: absolute; top: 80px; left: 12px; right: 12px; padding: 26px; flex-direction: column; border: 1px solid var(--line); border-radius: 24px; background: #0a0c0c; }.hero { min-height: 1120px; padding-top: 50px; }.hero-inner { grid-template-columns: 1fr; align-items: start; }.hero h1 { font-size: clamp(68px,16vw,112px); }.hero-copy > p { font-size: 18px; }.hero-signal { height: 580px; margin-top: -20px; transform: scale(.78); }.story-intro { min-height: 430px; }.story-row { min-height: auto; padding: 80px 0; grid-template-columns: 1fr; }.story-number { padding: 0; }.story-art { min-height: 460px; }.price-grid { grid-template-columns: 1fr 1fr; }.app-section { grid-template-columns: 1fr; padding: 80px 0; gap: 20px; }.app-visual { order: 2; }.section-title { display: block; }.section-title > p { margin-top: 24px; }.footer { flex-wrap: wrap; padding: 40px 0; }.footer p { width: 100%; order: 3; }.footer > div { flex-wrap: wrap; }.section-width { width: min(var(--width), calc(100% - 32px)); } }
@media (max-width: 560px) { .brand { font-size: 18px; }.hero { min-height: 970px; }.hero-inner { width: calc(100% - 32px); }.hero h1 { font-size: 16.8vw; line-height: .94; margin-top: 30px; }.hero-copy > p { font-size: 16px; }.hero-actions { flex-direction: column; align-items: stretch; }.hero-tags { margin-top: 25px; }.hero-signal { height: 420px; margin-top: 0; transform: scale(.57); }.story h2,.section-title h2,.app-copy h2 { font-size: 48px; }.story-intro { min-height: 390px; }.story-art { min-height: 390px; border-radius: 24px; }.tariff-art { gap: 5px; }.tariff-art > span { width: 48px; height: 90px; }.tariff-art .selected { width: 48px; height: 90px; }.chat-art { padding: 25px; }.radar { width: 250px; height: 250px; }.price-grid { grid-template-columns: 1fr; }.price-card { min-height: 330px; }.tariffs,.faq { padding: 90px 0; }.app-visual { height: 570px; transform: scale(.82); }.platforms span { padding: 9px 12px; }.final-cta { min-height: 620px; }.final-cta h2 { font-size: 53px; }.footer > div { flex-direction: column; gap: 12px; } }
/* Motion layer */
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 60; width: 0; height: 2px; background: linear-gradient(90deg, var(--violet), var(--cyan), #fff); box-shadow: 0 0 12px var(--cyan); pointer-events: none; }
.cursor-glow { position: fixed; z-index: 0; width: 520px; height: 520px; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle, rgba(54,216,234,.055), transparent 66%); translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity .4s; will-change: transform; }
.cursor-glow.active { opacity: 1; }
.header-shell { animation: headerEnter .9s .05s cubic-bezier(.2,.8,.2,1) both; }
.hero-copy .pill-label { animation: fadeRise .75s .28s both; }
.hero h1 { animation: heroTitle 1.05s .36s cubic-bezier(.16,.82,.24,1) both; transform-origin: left bottom; }
.hero-copy > p { animation: fadeRise .85s .62s both; }
.hero-actions { animation: fadeRise .85s .76s both; }
.hero-tags { animation: fadeRise .85s .9s both; }
.hero-tags span { transition: transform .25s, border-color .25s, color .25s; }
.hero-tags span:hover { transform: translateY(-4px); border-color: #57605d; color: #d8ddda; }
.button, .header-cta, .price-card button { position: relative; overflow: hidden; }
.button::after, .header-cta::after, .price-card button::after { content: ""; position: absolute; inset: -60% auto -60% -60%; width: 36%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.48), transparent); transform: skewX(-18deg); transition: left .65s ease; }
.button:hover::after, .header-cta:hover::after, .price-card button:hover::after { left: 130%; }
.aura { animation: auraPulse 5s ease-in-out infinite; }
.orbit-1 { animation: spin 32s linear infinite; }
.orbit-2 { animation: spinReverse 25s linear infinite; }
.orbit-3 { animation: breathe 5s ease-in-out infinite; }
.ticks { animation: spin 45s linear infinite; }
.arc-cyan { animation: arcCyan 17s linear infinite; }
.arc-violet { animation: arcViolet 21s linear infinite reverse; }
.arc-white { animation: arcWhite 27s linear infinite; }
.hero-medal { animation: medalEnter 1.25s .35s cubic-bezier(.18,.8,.18,1) backwards, medalFloat 6s 1.7s ease-in-out infinite; }
.node { animation: nodePulse 2.3s ease-in-out infinite; }
.node-b { animation-delay: -.8s; }
.node-c { animation-delay: -1.4s; }
.status-ready { animation: statusIn .8s 1.2s both, statusFloat 4.5s 2s ease-in-out infinite; }
.status-online { animation: statusIn .8s 1.38s both, statusFloat 5.2s 2.3s ease-in-out infinite reverse; }
.story-art { translate: 0 var(--parallax, 0); transition: translate .15s linear, border-color .3s; }
.story-art:hover { border-color: #405052; }
.story-art::after { content: ""; position: absolute; inset: -50%; background: conic-gradient(from 90deg, transparent 0 36%, rgba(54,216,234,.05) 46%, transparent 55% 100%); animation: spin 18s linear infinite; pointer-events: none; }
.story-art > * { position: relative; z-index: 2; }
.tariff-art > span { animation: cardBob 4s ease-in-out infinite; }
.tariff-art > span:nth-child(2) { animation-delay: -.6s; }
.tariff-art > span:nth-child(3) { animation-delay: -1.2s; }
.tariff-art > span:nth-child(4) { animation-delay: -1.8s; }
.tariff-art > span:nth-child(5) { animation-delay: -2.4s; }
.bubble { animation: messageFloat 4s ease-in-out infinite; }
.chat-button { animation: messageFloat 4s .35s ease-in-out infinite; }
.radar { animation: radarPulse 4s ease-in-out infinite; }
.radar span:nth-child(1) { animation: ping 3s ease-out infinite; }
.radar span:nth-child(2) { animation: ping 3s 1s ease-out infinite; }
.radar span:nth-child(3) { animation: ping 3s 2s ease-out infinite; }
.connect-state i { animation: nodePulse 1.6s ease-in-out infinite; }
.price-card { transform-style: preserve-3d; transition: transform .18s ease-out, border-color .25s, box-shadow .25s; will-change: transform; }
.price-card:hover { border-color: #4c5653; box-shadow: 0 28px 65px rgba(0,0,0,.33); }
.price-card > * { position: relative; z-index: 2; }
.app-orbit { animation: breathe 5.5s ease-in-out infinite, spin 36s linear infinite; }
.phone { animation: phoneFloat 5s ease-in-out infinite; }
.toggle i { animation: toggleGlow 2s ease-in-out infinite; }
.final-glow { animation: finalGlow 5s ease-in-out infinite; }
.price-grid .reveal:nth-child(2) { transition-delay: .08s; }
.price-grid .reveal:nth-child(3) { transition-delay: .16s; }
.price-grid .reveal:nth-child(4) { transition-delay: .24s; }
.price-grid .reveal:nth-child(5) { transition-delay: .32s; }

@keyframes headerEnter { from { opacity: 0; transform: translateY(-24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fadeRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes heroTitle { from { opacity: 0; transform: translateY(55px) skewY(2deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes medalEnter { from { opacity: 0; transform: scale(.72) rotate(-18deg); filter: blur(12px) drop-shadow(0 40px 38px rgba(0,0,0,.72)); } to { opacity: 1; transform: none; } }
@keyframes medalFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -13px; } }
@keyframes statusIn { from { opacity: 0; transform: scale(.85) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes statusFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes spinReverse { to { rotate: -360deg; } }
@keyframes arcCyan { from { transform: rotate(19deg); } to { transform: rotate(379deg); } }
@keyframes arcViolet { from { transform: rotate(-24deg); } to { transform: rotate(336deg); } }
@keyframes arcWhite { from { transform: rotate(-22deg); } to { transform: rotate(338deg); } }
@keyframes auraPulse { 0%,100% { opacity: .72; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes breathe { 0%,100% { scale: 1; opacity: .7; } 50% { scale: 1.035; opacity: 1; } }
@keyframes nodePulse { 0%,100% { scale: .8; opacity: .7; } 50% { scale: 1.25; opacity: 1; } }
@keyframes cardBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes messageFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes radarPulse { 0%,100% { box-shadow: 0 0 50px rgba(54,216,234,.08); } 50% { box-shadow: 0 0 90px rgba(54,216,234,.22); } }
@keyframes ping { 0% { opacity: .9; scale: .7; } 85%,100% { opacity: 0; scale: 1.55; } }
@keyframes phoneFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
@keyframes toggleGlow { 0%,100% { box-shadow: 0 0 13px rgba(54,216,234,.35); } 50% { box-shadow: 0 0 28px rgba(54,216,234,.8); } }
@keyframes finalGlow { 0%,100% { opacity: .65; scale: .94; } 50% { opacity: 1; scale: 1.08; } }

.modal-legal { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.modal-legal a { padding: 8px 11px; border: 1px solid #343c3a; border-radius: 99px; color: #aab2af; font-size: 11px; }
.modal-legal a:hover { border-color: var(--cyan); color: var(--cyan); }
.modal-checkout { width: 100%; }
.modal-ok { padding: 10px; border: 0; background: transparent; color: #858d8a; cursor: pointer; }

.legal-body { min-height: 100vh; background: #060707; }
.legal-header { width: min(1120px,calc(100% - 32px)); margin: 18px auto 0; padding: 13px 17px; display: flex; align-items: center; gap: 24px; border: 1px solid var(--line); border-radius: 38px; background: rgba(8,10,10,.9); }
.legal-header .brand { margin-right: auto; }
.legal-header > a:not(.brand) { padding: 11px 16px; border: 1px solid #343a39; border-radius: 99px; color: #bbc0bd; font-size: 13px; }
.legal-main { width: min(980px,calc(100% - 32px)); margin: 80px auto 120px; }
.legal-lead { margin-bottom: 52px; }
.legal-lead h1 { margin: 18px 0 22px; font-size: clamp(48px,7vw,86px); line-height: .98; letter-spacing: -.055em; }
.legal-lead p { max-width: 720px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.legal-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.legal-meta span { padding: 9px 13px; border: 1px solid #303635; border-radius: 99px; color: #848b88; font-size: 11px; }
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 54px; align-items: start; }
.legal-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 8px; }
.legal-nav a { padding: 11px 13px; border-radius: 12px; color: #77807c; font-size: 12px; }
.legal-nav a:hover,.legal-nav a.active { background: #111515; color: #eef2ee; }
.legal-content { display: flex; flex-direction: column; gap: 14px; }
.legal-section { padding: 30px; border: 1px solid #262c2b; border-radius: 22px; background: #0b0e0e; }
.legal-section h2 { margin: 0 0 16px; font-size: 24px; letter-spacing: -.025em; }
.legal-section h3 { margin: 24px 0 10px; font-size: 17px; }
.legal-section p,.legal-section li { color: #9aa19e; line-height: 1.72; font-size: 14px; }
.legal-section ul,.legal-section ol { margin: 12px 0 0; padding-left: 20px; }
.legal-section a { color: var(--cyan); }
.required-data { display: inline-block; padding: 2px 7px; border: 1px solid #805d33; border-radius: 7px; background: #211a11; color: #ffc978; font-weight: 700; }
.legal-warning { padding: 18px 20px; border: 1px solid #6f542f; border-radius: 16px; background: #17130d; color: #e8be7c; line-height: 1.6; }
.legal-table { width: 100%; border-collapse: collapse; }
.legal-table th,.legal-table td { padding: 13px 0; border-bottom: 1px solid #252b2a; text-align: left; vertical-align: top; font-size: 14px; }
.legal-table th { width: 36%; color: #737b78; font-weight: 500; }.legal-table td { color: #b4bbb8; }
.legal-footer { width: min(1120px,calc(100% - 32px)); margin: auto; padding: 35px 0 50px; display: flex; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); color: #737a77; font-size: 12px; }
.legal-footer a:hover { color: var(--cyan); }
@media (max-width: 760px) { .legal-header { margin-top: 10px; }.legal-header > a:not(.brand) { padding: 9px 11px; }.legal-main { margin-top: 55px; }.legal-layout { grid-template-columns: 1fr; gap: 24px; }.legal-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 5px; }.legal-nav a { white-space: nowrap; }.legal-section { padding: 22px; }.legal-table th,.legal-table td { display: block; width: 100%; padding: 7px 0; }.legal-table th { border-bottom: 0; padding-top: 16px; } }

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

/* Polished phone layout */
@media (max-width: 600px) {
  .section-width,
  .hero-inner { width: calc(100% - 28px); }

  .site-header { padding: 10px 10px 0; }
  .header-shell { height: 66px; padding: 0 10px 0 9px; border-radius: 34px; }
  .brand { gap: 10px; font-size: 17px; }
  .mini-medal { width: 44px; height: 44px; }
  .menu { padding: 8px 4px; }
  .header-shell.menu-open .nav { top: 76px; left: 0; right: 0; gap: 8px; padding: 12px; border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.65); }
  .header-shell.menu-open .nav a { width: 100%; padding: 13px 15px; border-radius: 14px; background: #101313; }

  .hero { min-height: 1010px; padding-top: 42px; }
  .hero-inner { min-height: 0; display: flex; flex-direction: column; }
  .hero-copy { width: 100%; }
  .pill-label { padding: 9px 13px; font-size: 10px; letter-spacing: .14em; }
  .hero h1 { margin: 28px 0 20px; max-width: 100%; font-size: clamp(51px, 15.5vw, 68px); line-height: .91; letter-spacing: -.068em; overflow-wrap: normal; }
  .hero-copy > p { max-width: 100%; color: #afb4b1; font-size: 15px; line-height: 1.55; }
  .hero-actions { margin-top: 26px; gap: 9px; }
  .hero-actions .button { width: 100%; min-height: 56px; padding-inline: 20px; }
  .hero-tags { width: 100%; margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-tags span { min-width: 0; padding: 10px 8px; text-align: center; white-space: nowrap; font-size: 11px; }

  .hero-signal { align-self: center; width: 100%; height: 345px; margin-top: 24px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); transform: scale(.43); transform-origin: center center; overflow: visible; }
  .hero-medal { left: 0; }
  .hero-signal .float-status { font-size: 15px; white-space: nowrap; }
  .status-ready { right: 1%; top: 26%; }
  .status-online { left: 3%; bottom: 18%; }

  .story { padding-top: 70px; }
  .story-intro { min-height: 350px; }
  .story h2,
  .section-title h2,
  .app-copy h2 { font-size: clamp(42px, 13vw, 54px); }
  .story-intro p { margin-top: 24px; font-size: 16px; }
  .story-row { padding: 62px 0; gap: 25px; }
  .story-text h3 { font-size: 43px; }
  .story-text p { font-size: 15px; }
  .story-art { width: 100%; min-height: 350px; }
  .tariff-art { padding-inline: 12px; gap: 5px; }
  .tariff-art > span,
  .tariff-art .selected { width: clamp(48px, 15vw, 58px); height: 96px; }
  .tariff-art > span:hover { transform: scale(1.16); }

  .tariffs,
  .faq { padding: 76px 0; }
  .section-title { margin-bottom: 42px; }
  .custom-plan { padding: 20px; gap: 18px; }
  .custom-copy h3 { font-size: 36px; }
  .custom-control,
  .custom-result { padding: 19px; }
  .amount-field input { font-size: 40px; }
  .price-grid { gap: 12px; }
  .price-card { min-height: 305px; padding: 22px; }

  .app-section { width: calc(100% - 28px); padding: 72px 0; }
  .app-copy > p { font-size: 16px; }
  .app-visual { width: 100%; height: 520px; transform: none; overflow: hidden; }
  .app-orbit { width: 480px; height: 480px; }
  .phone { scale: .82; }

  summary { padding: 24px 2px; gap: 16px; font-size: 17px; }
  .final-cta { min-height: 560px; padding: 90px 14px; }
  .final-cta h2 { margin-bottom: 38px; font-size: clamp(44px, 13vw, 56px); }
  .footer { gap: 26px; }
  .footer > div { align-items: flex-start; }
  .modal-card { width: calc(100% - 24px); padding: 28px 22px; border-radius: 26px; }
}

@media (max-width: 380px) {
  .hero { min-height: 975px; }
  .hero h1 { font-size: 54px; }
  .hero-copy > p { font-size: 14px; }
  .hero-signal { height: 320px; }
  .hero-signal { transform: scale(.39); }
  .story h2,
  .section-title h2,
  .app-copy h2 { font-size: 42px; }
}