:root {
  color-scheme: dark;
  --bg: #05080e;
  --bg-soft: #07101b;
  --surface: #0a1421;
  --surface-2: #0d1929;
  --surface-3: #111f32;
  --line: rgba(165, 197, 226, 0.12);
  --line-strong: rgba(91, 213, 244, 0.26);
  --text: #f5f8fc;
  --muted: #9aa9bb;
  --muted-2: #68788d;
  --cyan: #39d7f2;
  --blue: #2678ff;
  --green: #52e39d;
  --purple: #8b67ff;
  --danger: #ff7694;
  --gold: #f5bd55;
  --shell: 1220px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 30px 100px rgba(0, 0, 0, 0.36);
  font-family: "Inter Variable", "Onest", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body.menu-open, body.dialog-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 10px 14px; transform: translateY(-150%); border-radius: 8px; background: var(--text); color: var(--bg); font-weight: 750; }
.skip-link:focus { transform: none; }
.eyebrow { margin: 0 0 14px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.full-width { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--cyan); font-size: 14px; font-weight: 750; }
.text-link svg { width: 17px; transition: transform .18s ease; }
.text-link:hover svg { transform: translateX(4px); }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 0 19px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-size: 14px; font-weight: 760; letter-spacing: -.01em; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: none; }
.button:focus-visible, .header-signin:focus-visible, .menu-toggle:focus-visible, .auth-tabs button:focus-visible, .period-switch button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.button-primary { background: linear-gradient(120deg, #42dcf5 0%, #2e9bff 48%, #3978ff 100%); color: #031019; box-shadow: 0 12px 36px rgba(46, 151, 255, .24), inset 0 1px 0 rgba(255,255,255,.38); }
.button-primary:hover { box-shadow: 0 18px 45px rgba(46, 151, 255, .34), inset 0 1px 0 rgba(255,255,255,.38); }
.button-secondary { border-color: var(--line); background: rgba(13, 25, 42, .72); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.button-secondary:hover { border-color: rgba(91, 213, 244, .3); background: rgba(18, 34, 55, .9); }
.button-large { min-height: 56px; padding-inline: 23px; border-radius: 13px; }
.button-small { min-height: 42px; padding-inline: 16px; }
.button.loading span { opacity: .55; }
.button-loader { display: none; width: 17px; height: 17px; border: 2px solid rgba(0, 20, 30, .25); border-top-color: #031019; border-radius: 50%; animation: spin .65s linear infinite; }
.button.loading .button-loader { display: block; }

.site-header { position: fixed; top: 0; right: 0; left: 0; z-index: 40; border-bottom: 1px solid transparent; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.site-header.scrolled { border-color: var(--line); background: rgba(5, 10, 17, .8); box-shadow: 0 12px 40px rgba(0,0,0,.18); backdrop-filter: blur(18px) saturate(140%); }
.header-inner { display: flex; min-height: 76px; align-items: center; gap: 28px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.035em; }
.brand img { width: 38px; height: 38px; border: 1px solid rgba(93, 218, 246, .36); border-radius: 10px; box-shadow: 0 0 24px rgba(57, 215, 242, .13); }
.brand b { color: var(--cyan); font-weight: inherit; }
.site-nav { display: flex; align-items: center; gap: 27px; margin: auto; }
.site-nav > a { position: relative; color: #a9b5c4; font-size: 13px; font-weight: 650; transition: color .18s ease; }
.site-nav > a::after { content: ""; position: absolute; right: 0; bottom: -10px; left: 0; height: 1px; transform: scaleX(0); background: var(--cyan); transition: transform .18s ease; }
.site-nav > a:hover { color: var(--text); }
.site-nav > a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-signin { border: 0; background: transparent; color: #bdc7d4; cursor: pointer; font-size: 13px; font-weight: 700; }
.header-signin:hover { color: var(--text); }
.menu-toggle { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(12, 23, 39, .82); cursor: pointer; }
.menu-toggle svg { width: 22px; height: 22px; }
.mobile-nav-actions { display: none; }

.hero { position: relative; min-height: 940px; overflow: hidden; padding: 150px 0 108px; background: radial-gradient(circle at 50% -15%, rgba(38, 120, 255, .16), transparent 39rem), linear-gradient(180deg, #07101c 0%, var(--bg) 78%); }
.hero::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 220px; pointer-events: none; background: linear-gradient(transparent, var(--bg)); }
.hero-grid { position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(100, 151, 191, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 151, 191, .045) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, #000 0%, transparent 78%); }
.ambient { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.ambient-one { top: 60px; right: 4%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(72, 65, 214, .16), transparent 68%); }
.ambient-two { top: 160px; left: -160px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(57, 215, 242, .09), transparent 68%); }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(410px, .84fr) minmax(600px, 1.2fr); align-items: center; gap: 70px; }
.hero-copy { position: relative; z-index: 3; padding-bottom: 18px; }
.product-chip { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 27px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(11, 24, 40, .64); color: #b8c7d7; font-size: 11px; font-weight: 760; letter-spacing: .04em; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.product-chip span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.hero h1 { max-width: 690px; margin: 0; font-size: clamp(53px, 5.15vw, 78px); line-height: .98; letter-spacing: -.065em; text-wrap: balance; }
.hero h1 em { color: transparent; background: linear-gradient(100deg, #64e7f7 0%, #44bfff 48%, #8c7cff 100%); background-clip: text; font-style: normal; }
.hero-lead { max-width: 625px; margin: 27px 0 0; color: #aab8c8; font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 34px; }
.hero-actions svg, .final-actions svg { width: 18px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 23px; color: #7f8fa2; font-size: 11px; font-weight: 620; }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof svg { width: 14px; height: 14px; color: var(--green); stroke-width: 2.3; }

.product-stage { position: relative; min-height: 655px; }
.stage-light { position: absolute; top: 4%; left: 18%; width: 72%; height: 72%; border-radius: 50%; background: radial-gradient(circle, rgba(38, 120, 255, .22), rgba(139, 103, 255, .07) 38%, transparent 70%); filter: blur(24px); }
.dashboard-mock { position: absolute; top: 40px; right: -74px; left: 0; display: grid; grid-template-columns: 155px 1fr; min-height: 510px; overflow: hidden; border: 1px solid rgba(132, 184, 226, .18); border-radius: 24px; background: rgba(8, 17, 29, .92); box-shadow: 0 38px 110px rgba(0, 0, 0, .52), 0 0 80px rgba(38,120,255,.08), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(18px); transform: perspective(1300px) rotateY(-2deg) rotateX(1deg); }
.dashboard-mock::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.035), transparent 26%); }
.mock-sidebar { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 21px 14px 16px; border-right: 1px solid var(--line); background: rgba(6, 13, 23, .78); }
.mock-brand { display: flex; align-items: center; gap: 8px; padding: 0 5px 20px; font-size: 11px; }
.mock-mark { display: inline-block; flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid rgba(91,213,244,.35); border-radius: 7px; background: #07132a url("./assets/lumo-cloud-logo.jpg") center / cover no-repeat; box-shadow: 0 0 16px rgba(57,215,242,.16); }
.mock-user { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(13, 27, 44, .72); }
.mock-user > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: linear-gradient(135deg, rgba(57,215,242,.2), rgba(38,120,255,.3)); color: var(--cyan); font-size: 9px; font-weight: 800; }
.mock-user div { display: grid; gap: 2px; min-width: 0; }
.mock-user strong { font-size: 9px; }
.mock-user small { color: var(--muted-2); font-size: 7px; }
.mock-nav { display: grid; gap: 4px; margin-top: 18px; }
.mock-nav span { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; color: #6f8094; font-size: 8px; font-weight: 650; }
.mock-nav span.active { background: rgba(57, 215, 242, .09); color: var(--cyan); }
.mock-nav svg { width: 13px; height: 13px; }
.sidebar-help { display: grid; gap: 4px; margin-top: auto; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(13, 25, 42, .55); }
.sidebar-help small { color: var(--muted-2); font-size: 7px; }
.sidebar-help strong { color: #a9bbc9; font-size: 7px; }
.mock-content { position: relative; z-index: 1; padding: 26px; }
.mock-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mock-heading > div { display: grid; gap: 5px; }
.mock-heading small { color: var(--muted-2); font-size: 8px; }
.mock-heading strong { font-size: 17px; letter-spacing: -.035em; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(82,227,157,.16); border-radius: 999px; background: rgba(82,227,157,.07); color: var(--green); font-size: 7px; font-weight: 760; }
.live-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.mock-main-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 11px; margin-top: 22px; }
.connection-panel, .identity-panel, .mock-stat { border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(17,33,53,.82), rgba(9,19,32,.74)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.connection-panel { min-height: 220px; padding: 20px; }
.connection-core { display: flex; align-items: center; gap: 16px; }
.shield-pulse { position: relative; display: grid; flex: 0 0 auto; width: 76px; height: 76px; place-items: center; border: 1px solid rgba(57,215,242,.16); border-radius: 50%; background: radial-gradient(circle, rgba(57,215,242,.15), transparent 68%); color: var(--cyan); }
.shield-pulse::before, .shield-pulse::after { content: ""; position: absolute; border: 1px solid rgba(57,215,242,.09); border-radius: 50%; }
.shield-pulse::before { inset: -9px; }.shield-pulse::after { inset: 9px; }
.shield-pulse svg { width: 29px; height: 29px; stroke-width: 1.7; }
.connection-core > div { display: grid; gap: 5px; }
.connection-core small { color: var(--green); font-size: 7px; font-weight: 700; }
.connection-core strong { font-size: 21px; letter-spacing: -.04em; }
.connection-core span { color: var(--muted-2); font-size: 8px; }
.usage-line { margin-top: 32px; }
.usage-line > span { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(109,143,174,.13); }
.usage-line b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--blue)); box-shadow: 0 0 14px rgba(57,215,242,.3); }
.usage-line b.usage-forty-two { width: 42%; }
.usage-line small { display: block; margin-top: 8px; color: var(--muted-2); font-size: 7px; text-align: right; }
.identity-panel { padding: 17px; }
.panel-label { margin-bottom: 10px; color: var(--muted-2); font-size: 7px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.identity-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 11px 0; border-top: 1px solid var(--line); }
.identity-row:nth-child(2) { border-top: 0; }
.identity-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; }
.identity-icon svg { width: 14px; height: 14px; }
.identity-icon.mail { background: rgba(38,120,255,.12); color: #70a8ff; }
.identity-icon.telegram { background: rgba(57,215,242,.1); color: var(--cyan); }
.identity-row div { display: grid; gap: 3px; min-width: 0; }
.identity-row strong { font-size: 8px; }
.identity-row small { overflow: hidden; color: var(--muted-2); font-size: 7px; text-overflow: ellipsis; }
.identity-row > i { color: var(--green); font-size: 6px; font-style: normal; }
.mock-stat { min-height: 105px; padding: 16px; }
.mock-stat > small { color: var(--muted-2); font-size: 7px; }
.mock-stat > strong { display: block; margin-top: 8px; font-size: 22px; letter-spacing: -.05em; }
.mock-stat > strong span { color: var(--muted-2); font-size: 10px; }
.device-icons { display: flex; gap: 5px; margin-top: 13px; }
.device-icons i { width: 21px; height: 14px; border: 1px solid rgba(57,215,242,.28); border-radius: 4px; background: rgba(57,215,242,.1); }
.device-icons i.empty { border-color: var(--line); background: transparent; }
.link-stat > span { display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; color: var(--cyan); font-size: 7px; font-weight: 700; }
.link-stat svg { width: 10px; height: 10px; }
.phone-mock { position: absolute; z-index: 4; right: -32px; bottom: 7px; width: 190px; height: 355px; overflow: hidden; padding: 13px 12px 14px; border: 5px solid #111b28; border-radius: 29px; background: linear-gradient(180deg, #091423, #050a12); box-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07); transform: rotate(4deg); }
.phone-mock::before { content: ""; position: absolute; top: 7px; left: 50%; width: 48px; height: 5px; transform: translateX(-50%); border-radius: 999px; background: #02050a; }
.phone-top { display: flex; align-items: center; gap: 6px; margin: 7px 0 23px; font-size: 7px; }
.phone-top .mock-mark { width: 19px; height: 19px; border-radius: 5px; }
.phone-top i { width: 19px; height: 19px; margin-left: auto; border: 1px solid var(--line); border-radius: 6px; }
.phone-kicker { color: var(--green); font-size: 5px; font-weight: 800; letter-spacing: .08em; }
.phone-title { display: block; margin: 5px 0 13px; font-size: 15px; letter-spacing: -.05em; }
.phone-card { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(14,27,44,.82); }
.phone-card > div:first-child { display: flex; align-items: end; justify-content: space-between; }
.phone-card small { color: var(--muted-2); font-size: 6px; }
.phone-card strong { font-size: 13px; }
.phone-meter { display: block; height: 4px; margin: 9px 0 13px; border-radius: 99px; background: rgba(100,139,174,.13); }
.phone-meter i { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.phone-split { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.phone-split span { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(6,14,24,.55); }
.phone-split b { font-size: 8px; }
.phone-tabs { position: absolute; right: 9px; bottom: 10px; left: 9px; display: flex; justify-content: space-around; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8,17,29,.94); }
.phone-tabs i { width: 10px; height: 10px; border: 1px solid #526276; border-radius: 3px; }
.phone-tabs i.active { border-color: var(--cyan); background: rgba(57,215,242,.15); }
.sync-badge { position: absolute; z-index: 5; right: 102px; bottom: 2px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(82,227,157,.17); border-radius: 12px; background: rgba(7,18,27,.9); box-shadow: 0 16px 50px rgba(0,0,0,.4); backdrop-filter: blur(15px); }
.sync-badge > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: rgba(82,227,157,.1); color: var(--green); }
.sync-badge svg { width: 15px; }
.sync-badge div { display: grid; gap: 3px; }
.sync-badge small { color: var(--muted-2); font-size: 7px; }.sync-badge strong { font-size: 9px; }

.benefit-band { position: relative; z-index: 4; margin-top: -48px; padding: 0 0 28px; }
.benefit-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; border: 1px solid rgba(126,180,221,.16); border-radius: 22px; background: rgba(7,16,27,.86); box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(18px); }
.benefit-rail article { display: grid; min-width: 0; min-height: 92px; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; padding: 15px; border: 1px solid transparent; border-radius: 15px; background: linear-gradient(145deg, rgba(15,29,47,.66), rgba(8,17,29,.54)); transition: border-color .2s ease, transform .2s ease; }
.benefit-rail article:hover { transform: translateY(-2px); border-color: rgba(91,213,244,.16); }
.benefit-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; }
.benefit-icon svg { width: 19px; height: 19px; }
.benefit-icon.trial { background: rgba(245,189,85,.1); color: var(--gold); }.benefit-icon.account { background: rgba(38,120,255,.12); color: #70a8ff; }.benefit-icon.devices { background: rgba(82,227,157,.09); color: var(--green); }.benefit-icon.telegram { background: rgba(57,215,242,.1); color: var(--cyan); }
.benefit-rail article > div { display: grid; min-width: 0; gap: 5px; }.benefit-rail strong { font-size: 11px; letter-spacing: -.01em; }.benefit-rail small { color: var(--muted-2); font-size: 8px; line-height: 1.35; }

.section { position: relative; padding: 130px 0; }
.section-title { max-width: 780px; margin-bottom: 60px; }
.section-title.centered { margin-inline: auto; text-align: center; }
.section-title h2, .account-copy h2, .privacy-copy h2, .faq-copy h2 { margin: 0; font-size: clamp(42px, 5vw, 64px); line-height: 1.02; letter-spacing: -.06em; text-wrap: balance; }
.section-title h2 span, .account-copy h2 span, .privacy-copy h2 span { color: #7e8da1; }
.section-title > p:last-child, .account-copy > p, .privacy-copy > p, .faq-copy > p { max-width: 630px; margin: 21px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

.product-section { background: linear-gradient(180deg, var(--bg), #060c15 50%, var(--bg)); }
.bento-grid { display: grid; grid-template-columns: 1.14fr .86fr; grid-template-rows: minmax(390px, auto) minmax(300px, auto); gap: 16px; }
.bento { position: relative; display: flex; min-height: 300px; overflow: hidden; flex-direction: column; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(13,26,43,.88), rgba(7,15,26,.86)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.bento::before { content: ""; position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(57,215,242,.09), transparent 67%); }
.bento-primary { grid-row: span 2; min-height: 706px; padding: 42px; }
.bento-primary::before { right: -80px; bottom: -110px; width: 450px; height: 450px; }
.bento-devices::before { top: -130px; right: -100px; width: 330px; height: 330px; }
.bento h3 { max-width: 540px; margin: 0; font-size: 27px; line-height: 1.12; letter-spacing: -.045em; }
.bento p:not(.eyebrow) { max-width: 540px; margin: 15px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.icon-box { display: grid; width: 44px; height: 44px; margin-bottom: 30px; place-items: center; border: 1px solid rgba(57,215,242,.16); border-radius: 12px; background: rgba(57,215,242,.08); color: var(--cyan); }
.icon-box svg { width: 20px; height: 20px; }
.connection-showcase { position: relative; z-index: 1; display: grid; flex: 1; align-content: center; gap: 15px; margin-top: 48px; padding: 19px; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(145deg, rgba(5,13,23,.82), rgba(8,20,33,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.connection-status { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.connection-status > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: rgba(82,227,157,.09); color: var(--green); }.connection-status > span svg { width: 19px; }.connection-status > div { display: grid; gap: 4px; }.connection-status small { color: var(--muted-2); font-size: 8px; }.connection-status strong { font-size: 14px; }.connection-status > i { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 999px; background: rgba(82,227,157,.07); color: var(--green); font-size: 8px; font-style: normal; font-weight: 750; }.connection-status > i b { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.connection-path { display: grid; grid-template-columns: minmax(130px,1fr) minmax(90px,.75fr) minmax(145px,1fr); align-items: center; gap: 10px; }
.path-node { position: relative; display: grid; min-width: 0; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(12,26,43,.78); }.path-node > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: rgba(57,215,242,.08); color: var(--cyan); }.path-node > span svg { width: 18px; }.path-node > div { display: grid; min-width: 0; gap: 3px; }.path-node small { color: var(--muted-2); font-size: 7px; }.path-node strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.cloud-node > span { background: rgba(82,227,157,.08); color: var(--green); }.cloud-node > i { position: absolute; top: 8px; right: 8px; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: rgba(82,227,157,.1); color: var(--green); }.cloud-node > i svg { width: 10px; stroke-width: 2.4; }
.path-tunnel { display: grid; min-width: 0; gap: 8px; text-align: center; }.path-tunnel > span { position: relative; display: block; height: 1px; background: linear-gradient(90deg, rgba(57,215,242,.18), var(--cyan), rgba(82,227,157,.2)); }.path-tunnel > span b { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: route 2.7s linear infinite; }.path-tunnel > span b:last-child { animation-delay: -1.35s; }.path-tunnel small { color: #526477; font-size: 6px; letter-spacing: .06em; text-transform: uppercase; }
.connection-meta { display: flex; flex-wrap: wrap; gap: 7px; }.connection-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(11,24,40,.72); color: #8798aa; font-size: 7px; font-weight: 700; }.connection-meta svg { width: 12px; color: var(--cyan); }
.bento-devices { min-height: 390px; }
.device-showcase { position: relative; z-index: 1; display: flex; min-height: 116px; align-items: end; justify-content: center; gap: 12px; margin-top: auto; padding-top: 22px; }
.device-unit { display: grid; gap: 7px; justify-items: center; }.device-unit > small { color: var(--muted-2); font-size: 7px; }.device-frame { position: relative; overflow: hidden; border: 2px solid #31465d; background: radial-gradient(circle at 80% 10%, rgba(38,120,255,.22), transparent 60%), linear-gradient(155deg, #14263b, #07111d); box-shadow: 0 15px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05); }.phone-unit .device-frame { width: 53px; height: 88px; border-radius: 11px; }.laptop-unit .device-frame { width: 135px; height: 84px; border-radius: 8px 8px 5px 5px; }.laptop-unit .device-frame::after { content: ""; position: absolute; right: -7px; bottom: -5px; left: -7px; height: 5px; border-radius: 0 0 6px 6px; background: #31465d; }.tablet-unit .device-frame { width: 68px; height: 96px; border-radius: 10px; }
.device-frame > span { position: absolute; top: 10px; left: 9px; display: inline-flex; align-items: center; gap: 4px; color: #9cb1c5; font-size: 5px; font-weight: 700; }.device-frame > span i { width: 4px; height: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }.device-frame > b { position: absolute; right: 9px; bottom: 23px; left: 9px; height: 4px; border-radius: 999px; background: rgba(130,165,196,.13); }.device-frame > b::after { content: ""; display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--blue)); }.device-frame > em { position: absolute; right: 9px; bottom: 12px; left: 9px; height: 5px; border-radius: 4px; background: rgba(118,151,181,.12); }
.bento-start { min-height: 300px; }
.copy-line { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(4,10,18,.65); }
.copy-line span { overflow: hidden; color: #697b8f; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.copy-line button { display: grid; flex: 0 0 auto; width: 33px; height: 33px; margin-left: auto; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: rgba(57,215,242,.08); color: var(--cyan); }
.copy-line svg { width: 14px; }
.bento-support { display: flex; min-height: 220px; align-items: end; justify-content: space-between; flex-direction: row; gap: 30px; grid-column: span 2; padding: 38px 44px; }
.bento-support .icon-box { margin-bottom: 20px; }
.bento-support .text-link { flex: 0 0 auto; margin-bottom: 8px; }

.account-section { overflow: hidden; background: radial-gradient(circle at 78% 38%, rgba(38,120,255,.13), transparent 32rem), linear-gradient(180deg, #07101b, #050b13); }
.account-section::before { content: ""; position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(81,126,164,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(81,126,164,.04) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, transparent, #000 55%, transparent); }
.account-layout { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 90px; }
.account-copy h2 { max-width: 560px; }
.account-copy > p { max-width: 540px; }
.account-copy .button { margin-top: 30px; }
.identity-flow { position: relative; padding: 55px; border: 1px solid var(--line); border-radius: 30px; background: rgba(8,18,31,.72); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.03); backdrop-filter: blur(16px); }
.identity-flow::before { content: ""; position: absolute; inset: 15% 20%; border-radius: 50%; background: rgba(38,120,255,.08); filter: blur(35px); }
.flow-card { position: relative; z-index: 1; display: grid; grid-template-columns: 48px 1fr 25px; align-items: center; gap: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(13,27,45,.88); }
.flow-card > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; }
.flow-card > span svg { width: 21px; height: 21px; }
.flow-email > span { background: rgba(38,120,255,.14); color: #69a4ff; }
.flow-telegram > span { background: rgba(57,215,242,.1); color: var(--cyan); }
.flow-card > div { display: grid; gap: 5px; }.flow-card small { color: var(--muted-2); font-size: 9px; }.flow-card strong { font-size: 14px; }
.flow-card > i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgba(82,227,157,.1); color: var(--green); }
.flow-card > i svg { width: 13px; height: 13px; stroke-width: 2.4; }
.flow-line { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; height: 50px; }
.flow-line span { height: 1px; background: linear-gradient(90deg, transparent, rgba(57,215,242,.34)); }.flow-line span:last-child { transform: rotate(180deg); }
.flow-line b { color: var(--muted-2); font-size: 7px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.flow-result { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; margin-top: 34px; padding: 23px; border: 1px solid rgba(82,227,157,.17); border-radius: 17px; background: linear-gradient(135deg, rgba(82,227,157,.07), rgba(38,120,255,.09)); }
.result-orbit { position: relative; display: grid; width: 66px; height: 66px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(57,215,242,.18); border-radius: 50%; }
.result-orbit::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(57,215,242,.1); border-radius: 50%; }
.result-orbit .mock-mark { width: 32px; height: 32px; }
.flow-result > div:last-child { display: grid; gap: 5px; }.flow-result small { color: var(--green); font-size: 8px; font-weight: 700; }.flow-result strong { font-size: 16px; }.flow-result p { margin: 0; color: var(--muted-2); font-size: 9px; }
.linking-journey { position: relative; margin-top: 80px; padding: 28px; border: 1px solid var(--line); border-radius: 25px; background: rgba(6,15,26,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.journey-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; padding: 2px 3px 24px; }.journey-heading h3 { margin: 0; font-size: 25px; letter-spacing: -.045em; }.journey-heading > p { max-width: 540px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.journey-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.journey-steps article { position: relative; display: grid; min-height: 155px; grid-template-columns: 42px 1fr; align-content: center; gap: 9px 13px; padding: 20px; border: 1px solid rgba(146,190,224,.1); border-radius: 17px; background: linear-gradient(145deg, rgba(15,30,48,.75), rgba(8,18,30,.72)); }.journey-steps article:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: 50%; right: -17px; width: 22px; height: 22px; transform: translateY(-50%) rotate(-45deg); border-right: 1px solid rgba(57,215,242,.42); border-bottom: 1px solid rgba(57,215,242,.42); border-radius: 3px; background: #091422; }
.journey-steps article > span { position: absolute; top: 14px; right: 15px; color: #354a60; font-size: 9px; font-weight: 850; letter-spacing: .08em; }.journey-steps article > i { display: grid; width: 42px; height: 42px; grid-row: span 2; place-items: center; border-radius: 12px; background: rgba(57,215,242,.08); color: var(--cyan); font-style: normal; }.journey-steps article:last-child > i { background: rgba(82,227,157,.09); color: var(--green); }.journey-steps article > i svg { width: 19px; }.journey-steps article > div { display: grid; align-self: center; gap: 6px; }.journey-steps strong { font-size: 12px; }.journey-steps p { margin: 0; color: var(--muted-2); font-size: 9px; line-height: 1.5; }

.privacy-section { background: linear-gradient(180deg, var(--bg), #060c14); }
.privacy-layout { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 95px; }
.privacy-visual { position: relative; min-height: 560px; border: 1px solid var(--line); border-radius: 32px; background: radial-gradient(circle at 50% 42%, rgba(57,215,242,.1), transparent 17rem), rgba(7,15,25,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.privacy-core { position: absolute; top: 50%; left: 50%; display: grid; width: 142px; height: 142px; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(57,215,242,.2); border-radius: 50%; color: var(--cyan); }
.privacy-core::before, .privacy-core::after { content: ""; position: absolute; border: 1px solid rgba(57,215,242,.08); border-radius: 50%; }.privacy-core::before { inset: -33px; }.privacy-core::after { inset: -72px; }
.privacy-core svg { width: 48px; height: 48px; }
.privacy-core span { position: absolute; inset: -105px; border: 1px dashed rgba(91,125,156,.12); border-radius: 50%; animation: rotate 30s linear infinite; }
.privacy-tag { position: absolute; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,22,36,.9); box-shadow: 0 18px 40px rgba(0,0,0,.24); color: #8494a7; font-size: 9px; }
.privacy-tag svg { width: 17px; height: 17px; color: var(--cyan); }
.privacy-tag b { color: var(--green); font-weight: 700; }
.tag-one { top: 65px; left: 48px; }.tag-two { right: 38px; bottom: 73px; }.tag-three { bottom: 65px; left: 36px; }
.privacy-copy > p { max-width: 600px; }
.clean-list { display: grid; gap: 20px; margin: 31px 0; padding: 0; list-style: none; }
.clean-list li { display: grid; grid-template-columns: 27px 1fr; gap: 13px; }
.clean-list li > svg { width: 23px; height: 23px; padding: 5px; border-radius: 50%; background: rgba(82,227,157,.09); color: var(--green); stroke-width: 2.5; }
.clean-list span { display: grid; gap: 6px; }.clean-list strong { font-size: 13px; }.clean-list small { color: var(--muted-2); font-size: 11px; line-height: 1.55; }

.rules-section { overflow: hidden; border-top: 1px solid rgba(127,171,207,.08); background: radial-gradient(circle at 20% 10%, rgba(38,120,255,.11), transparent 30rem), #060c15; }
.rules-section::before { content: ""; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(91,145,184,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(91,145,184,.04) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, #000, transparent 75%); }
.rules-title { position: relative; margin-bottom: 43px; }.rules-title h2 { font-size: clamp(42px, 4.6vw, 60px); }
.rules-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rule-card { position: relative; display: flex; min-height: 290px; overflow: hidden; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(150deg, rgba(15,30,49,.88), rgba(7,16,27,.9)); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.rule-card::before { content: ""; position: absolute; top: -85px; right: -85px; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, rgba(57,215,242,.1), transparent 68%); }.rule-card:hover { transform: translateY(-4px); border-color: rgba(91,213,244,.25); box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.rule-icon { position: relative; display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(57,215,242,.15); border-radius: 13px; background: rgba(57,215,242,.07); color: var(--cyan); }.rule-icon svg { width: 20px; }.rule-card > small { position: absolute; top: 30px; right: 29px; color: #344a60; font-size: 9px; font-weight: 850; letter-spacing: .08em; }.rule-card h3 { max-width: 290px; margin: 28px 0 0; font-size: 21px; line-height: 1.16; letter-spacing: -.035em; }.rule-card p { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }.rule-card > i { display: grid; width: 36px; height: 36px; margin-top: auto; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(57,215,242,.06); color: var(--cyan); font-style: normal; }.rule-card > i svg { width: 16px; transition: transform .18s ease; }.rule-card:hover > i svg { transform: translateX(3px); }

.pricing-section { background: #060b12; }
.pricing-title { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 40px; }
.pricing-title h2 { font-size: clamp(42px, 4.3vw, 59px); }
.pricing-title > div:first-child > p:last-child { max-width: 600px; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.period-switch { display: flex; flex: 0 0 auto; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgba(9,19,31,.8); }
.period-switch button { display: grid; min-width: 82px; min-height: 53px; align-content: center; gap: 3px; padding: 5px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted-2); cursor: pointer; font-size: 10px; font-weight: 750; }
.period-switch button span { color: inherit; }.period-switch button small { color: #4f6074; font-size: 7px; font-weight: 650; white-space: nowrap; }.period-switch button.active small { color: var(--green); }
.period-switch button.active { background: linear-gradient(135deg, rgba(57,215,242,.18), rgba(38,120,255,.2)); color: var(--text); box-shadow: inset 0 0 0 1px rgba(57,215,242,.18); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.price-card { position: relative; display: flex; min-height: 540px; flex-direction: column; padding: 31px; border: 1px solid var(--line); border-radius: 23px; background: linear-gradient(150deg, rgba(14,27,44,.86), rgba(7,15,25,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: border-color .2s ease, transform .2s ease; }
.price-card:hover { transform: translateY(-5px); border-color: rgba(91,213,244,.23); }
.price-card.featured { border-color: rgba(57,215,242,.34); background: radial-gradient(circle at 70% 0%, rgba(38,120,255,.17), transparent 16rem), linear-gradient(150deg, rgba(15,32,51,.96), rgba(7,17,29,.95)); box-shadow: 0 24px 70px rgba(28,101,200,.12), inset 0 1px 0 rgba(255,255,255,.04); }
.popular-label { position: absolute; top: 18px; right: 18px; padding: 6px 8px; border-radius: 999px; background: var(--cyan); color: #031016; font-size: 7px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.plan-top { display: flex; align-items: center; gap: 13px; }
.plan-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 12px; }
.plan-icon svg { width: 19px; }.plan-icon.spark { background: rgba(245,189,85,.08); color: var(--gold); }.plan-icon.flow { background: rgba(57,215,242,.08); color: var(--cyan); }.plan-icon.storm { background: rgba(139,103,255,.08); color: #a38cff; }
.plan-top div { display: grid; gap: 4px; }.plan-top small { color: var(--muted-2); font-size: 8px; }.plan-top h3 { margin: 0; font-size: 22px; letter-spacing: -.04em; }
.price-line { display: flex; align-items: end; gap: 8px; margin-top: 35px; }
.price-line > strong { font-size: 52px; line-height: .85; letter-spacing: -.06em; }
.price-line > span { display: grid; gap: 2px; color: var(--muted); font-size: 14px; font-weight: 700; }
.price-line small { color: var(--muted-2); font-size: 8px; font-weight: 600; }
.price-economy { min-height: 28px; margin-top: 14px; color: var(--green); font-size: 9px; font-weight: 700; }
.price-card ul { display: grid; gap: 14px; margin: 25px 0 30px; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; color: #94a3b5; font-size: 11px; }
.price-card li { display: flex; align-items: center; gap: 10px; }.price-card li b { color: var(--text); }.price-card li svg { width: 16px; height: 16px; color: var(--green); stroke-width: 2.4; }
.price-card .button { margin-top: auto; }
.pricing-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 27px 0 0; color: var(--muted-2); font-size: 10px; text-align: center; }
.pricing-note svg { width: 15px; color: var(--cyan); }

.faq-section { background: var(--bg); }
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; }
.faq-copy { position: sticky; top: 120px; align-self: start; }
.faq-copy h2 { font-size: 50px; }
.faq-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 29px; }.faq-actions .button { min-height: 45px; padding-inline: 15px; font-size: 11px; }
.accordion { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > button { display: grid; width: 100%; grid-template-columns: 1fr 22px; align-items: center; gap: 20px; padding: 26px 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.faq-item > button span { font-size: 14px; font-weight: 720; }
.faq-item > button i { position: relative; width: 18px; height: 18px; }
.faq-item > button i::before, .faq-item > button i::after { content: ""; position: absolute; top: 8px; left: 3px; width: 12px; height: 1px; background: var(--cyan); transition: transform .2s ease; }
.faq-item > button i::after { transform: rotate(90deg); }.faq-item.open > button i::after { transform: rotate(0); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }.faq-answer > p { min-height: 0; overflow: hidden; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer p { max-width: 700px; margin: 0; padding: 0 35px 25px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.final-cta { position: relative; overflow: hidden; padding: 76px 0; border-block: 1px solid rgba(91,213,244,.13); background: radial-gradient(circle at 80% 20%, rgba(65,71,202,.26), transparent 27rem), linear-gradient(115deg, #071824, #0b1730 60%, #11142d); }
.final-cta::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(91,213,244,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(91,213,244,.04) 1px, transparent 1px); background-size: 48px 48px; }
.final-cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.final-cta h2 { margin: 0; font-size: clamp(38px, 4.5vw, 57px); line-height: 1; letter-spacing: -.06em; }.final-cta p:last-child { margin: 15px 0 0; color: #9aa9bb; font-size: 13px; }
.final-actions { display: flex; flex: 0 0 auto; gap: 10px; }

.site-footer { padding: 64px 0 25px; background: #04070c; }
.footer-grid { display: grid; grid-template-columns: 1.65fr repeat(3, .7fr); gap: 60px; }
.footer-brand p { max-width: 270px; margin: 18px 0 0; color: var(--muted-2); font-size: 10px; line-height: 1.6; }
.footer-grid > div:not(:first-child) { display: grid; align-content: start; gap: 12px; }
.footer-grid strong { margin-bottom: 5px; color: #dce4ee; font-size: 10px; }.footer-grid a:not(.brand) { color: var(--muted-2); font-size: 9px; }.footer-grid a:not(.brand):hover { color: var(--cyan); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--line); color: #445366; font-size: 8px; }

.auth-dialog { width: min(calc(100% - 28px), 480px); max-height: min(92vh, 760px); padding: 0; overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(120,184,224,.2); border-radius: 24px; background: #08121f; color: var(--text); box-shadow: 0 40px 130px rgba(0,0,0,.68); }
.auth-dialog::backdrop { background: rgba(1,5,10,.78); backdrop-filter: blur(10px); }
.auth-dialog[open] { animation: dialog-in .24s ease both; }
.auth-shell { position: relative; padding: 36px; }
.auth-shell::before { content: ""; position: absolute; top: -90px; right: -70px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(38,120,255,.2), transparent 68%); pointer-events: none; }
.dialog-close { position: absolute; z-index: 2; top: 18px; right: 18px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(12,24,40,.82); color: var(--muted); cursor: pointer; }
.dialog-close svg { width: 17px; }
.auth-brand { position: relative; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; }.auth-brand b { color: var(--cyan); }
.auth-heading { position: relative; margin-top: 29px; }.auth-heading .eyebrow { margin-bottom: 10px; }.auth-heading h2 { margin: 0; font-size: 32px; letter-spacing: -.055em; }.auth-heading > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 26px 0 22px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(4,10,18,.55); }
.auth-tabs button { min-height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--muted-2); cursor: pointer; font-size: 11px; font-weight: 750; }.auth-tabs button.active { background: rgba(25,45,69,.8); color: var(--text); box-shadow: inset 0 0 0 1px rgba(100,157,201,.12); }
.auth-form { display: grid; gap: 17px; }.auth-form > label:not(.checkbox-field) { display: grid; gap: 8px; color: #b7c3d0; font-size: 10px; font-weight: 700; }
.auth-form input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: rgba(5,12,21,.76); color: var(--text); font-size: 13px; transition: border-color .18s ease, box-shadow .18s ease; }.auth-form input:focus { border-color: rgba(57,215,242,.48); box-shadow: 0 0 0 3px rgba(57,215,242,.08); }.auth-form input::placeholder { color: #526276; }
.password-field { position: relative; display: block; }.password-field input { padding-right: 82px; }.password-field button { position: absolute; top: 50%; right: 8px; padding: 6px; transform: translateY(-50%); border: 0; background: transparent; color: var(--cyan); cursor: pointer; font-size: 9px; font-weight: 700; }
.form-row { display: flex; justify-content: flex-end; margin-top: -6px; }.form-row a { color: var(--muted); font-size: 9px; }.form-row a:hover { color: var(--cyan); }
.checkbox-field { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--muted); font-size: 9px; line-height: 1.55; }.checkbox-field input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--cyan); }.checkbox-field a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.existing-note { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 12px; border: 1px solid rgba(57,215,242,.14); border-radius: 10px; background: rgba(57,215,242,.055); }.existing-note > svg { width: 33px; height: 33px; padding: 8px; border-radius: 9px; background: rgba(57,215,242,.08); color: var(--cyan); }.existing-note div { display: grid; gap: 4px; }.existing-note strong { font-size: 10px; }.existing-note span { color: var(--muted); font-size: 8px; line-height: 1.5; }
.form-message { margin-top: 15px; padding: 11px 12px; border: 1px solid rgba(255,118,148,.2); border-radius: 9px; background: rgba(255,118,148,.06); color: #ff9aaf; font-size: 9px; line-height: 1.5; }.form-message.success { border-color: rgba(82,227,157,.2); background: rgba(82,227,157,.06); color: var(--green); }
.auth-security { display: flex; gap: 8px; margin: 20px 0 0; color: #58697c; font-size: 8px; line-height: 1.5; }.auth-security svg { flex: 0 0 auto; width: 13px; height: 13px; color: #718397; }

.account-body { min-height: 100vh; background: radial-gradient(circle at 75% 10%, rgba(38,120,255,.14), transparent 34rem), radial-gradient(circle at 10% 80%, rgba(57,215,242,.06), transparent 30rem), #050a12; }
.account-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(93,137,175,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(93,137,175,.035) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.account-header-label { padding-left: 18px; border-left: 1px solid var(--line); color: var(--muted-2); font-size: 11px; font-weight: 700; }
.account-header-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }.account-header-actions a, .account-header-actions button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }.account-header-actions button { display: flex; align-items: center; gap: 7px; }.account-header-actions button:hover, .account-header-actions a:hover { color: var(--cyan); }.account-header-actions svg { width: 15px; }
.account-main { position: relative; z-index: 1; min-height: 100vh; padding: 126px 0 80px; }
.account-loading { display: grid; min-height: 60vh; place-items: center; align-content: center; text-align: center; }.account-loading h1 { margin: 25px 0 7px; font-size: 32px; letter-spacing: -.05em; }.account-loading p { margin: 0; color: var(--muted); font-size: 12px; }
.loading-orbit { position: relative; display: grid; width: 86px; height: 86px; place-items: center; border: 1px solid rgba(57,215,242,.19); border-radius: 50%; animation: pulse 1.8s ease-in-out infinite; }.loading-orbit::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(57,215,242,.1); border-radius: 50%; }.loading-orbit .mock-mark { width: 36px; height: 36px; }
.account-gateway { display: grid; min-height: calc(100vh - 205px); grid-template-columns: 1.05fr .75fr; align-items: center; gap: 100px; }
.gateway-copy h1 { max-width: 690px; margin: 0; font-size: clamp(52px, 6vw, 78px); line-height: .98; letter-spacing: -.065em; text-wrap: balance; }.gateway-copy > p:not(.eyebrow) { max-width: 650px; margin: 25px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.gateway-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 35px; }.gateway-proof > span { display: grid; grid-template-columns: 32px 1fr; gap: 2px 11px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(9,20,34,.6); }.gateway-proof svg { grid-row: span 2; width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: rgba(57,215,242,.08); color: var(--cyan); }.gateway-proof b { font-size: 10px; }.gateway-proof small { color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.gateway-card { padding: 31px; border: 1px solid rgba(128,181,221,.17); border-radius: 23px; background: rgba(8,18,31,.9); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.03); backdrop-filter: blur(16px); }.gateway-card .auth-tabs { margin-top: 0; }.gateway-heading { margin-bottom: 3px; }.gateway-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.05em; }.gateway-heading p { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.account-dashboard { display: block; }
.account-welcome { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }.account-welcome h1 { margin: 0; font-size: clamp(44px, 5vw, 66px); line-height: 1; letter-spacing: -.06em; }.account-welcome > div > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 13px; }.account-live { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 7px; padding: 8px 11px; border: 1px solid rgba(82,227,157,.15); border-radius: 999px; background: rgba(82,227,157,.06); color: var(--green); font-size: 9px; font-weight: 700; }.account-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.selected-plan-banner { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 13px; margin-bottom: 17px; padding: 14px 16px; border: 1px solid rgba(57,215,242,.15); border-radius: 13px; background: linear-gradient(120deg, rgba(57,215,242,.07), rgba(38,120,255,.08)); }.selected-plan-banner > svg { width: 37px; height: 37px; padding: 9px; border-radius: 10px; background: rgba(57,215,242,.08); color: var(--cyan); }.selected-plan-banner div { display: grid; gap: 4px; }.selected-plan-banner strong { font-size: 11px; }.selected-plan-banner span { color: var(--muted); font-size: 9px; }.selected-plan-banner a { color: var(--cyan); font-size: 9px; font-weight: 700; }
.dashboard-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 16px; }
.account-card { position: relative; min-height: 330px; padding: 27px; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(145deg, rgba(13,27,45,.9), rgba(7,16,27,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }.account-card-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 25px; }.account-card-head .eyebrow { margin-bottom: 7px; }.account-card h2 { margin: 0; font-size: 24px; letter-spacing: -.045em; }.card-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(57,215,242,.06); color: var(--cyan); }.card-icon svg { width: 19px; }.card-icon.telegram { background: rgba(57,215,242,.08); }
.account-identity { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); }.account-identity:nth-of-type(1) { border-top: 0; }.account-identity .identity-icon { width: 39px; height: 39px; }.account-identity div { display: grid; gap: 4px; min-width: 0; }.account-identity small { color: var(--muted-2); font-size: 8px; }.account-identity strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.account-identity > i { color: var(--green); font-size: 8px; font-style: normal; font-weight: 700; }.account-identity > i.waiting { color: var(--gold); }.card-note { margin: 16px 0 0; color: #596a7e; font-size: 8px; line-height: 1.55; }
.telegram-link-card > p, .access-card > p { margin: 0 0 24px; color: var(--muted); font-size: 11px; line-height: 1.65; }.telegram-link-card.linked { border-color: rgba(82,227,157,.18); }.telegram-link-card.linked .card-icon { background: rgba(82,227,157,.07); color: var(--green); }.link-ready { display: grid; gap: 10px; }.link-ready > span { color: var(--green); font-size: 8px; text-align: center; }.link-ready > button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; }.telegram-link-card .form-message { margin-top: 12px; }
.subscription-status { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5,12,21,.55); }.subscription-status span { color: var(--muted); font-size: 9px; }.subscription-status strong { font-size: 10px; }.account-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 13px 0 24px; }.account-metrics div { display: grid; gap: 7px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; }.account-metrics small { color: var(--muted-2); font-size: 8px; }.account-metrics strong { font-size: 19px; letter-spacing: -.04em; }
.account-access-value { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(4,10,18,.65); }.account-access-value span { overflow: hidden; color: var(--muted-2); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.account-access-value button { display: grid; flex: 0 0 auto; width: 36px; height: 36px; margin-left: auto; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(57,215,242,.07); color: var(--cyan); cursor: pointer; }.account-access-value button:disabled { opacity: .35; cursor: not-allowed; }.account-access-value svg { width: 15px; }.copy-status { min-height: 16px; margin-top: 9px; color: var(--green); font-size: 8px; }

.legal-body { min-height: 100vh; background: radial-gradient(circle at 20% 0%, rgba(38,120,255,.12), transparent 30rem), var(--bg); }
.legal-main { padding: 125px 20px 85px; }
.legal-document { width: min(100%, 850px); margin: 0 auto; padding: 52px; border: 1px solid var(--line); border-radius: 25px; background: rgba(8,18,31,.9); box-shadow: var(--shadow); }
.legal-document h1 { margin: 0; font-size: clamp(38px, 6vw, 58px); line-height: 1; letter-spacing: -.055em; }.legal-updated { color: var(--muted-2) !important; }.legal-warning { margin: 30px 0; padding: 16px 18px; border: 1px solid rgba(245,189,85,.22); border-radius: 11px; background: rgba(245,189,85,.06); color: #dfc891; font-size: 11px; line-height: 1.6; }.legal-document h2 { margin: 42px 0 14px; font-size: 21px; letter-spacing: -.025em; }.legal-document p, .legal-document li { color: #acb9c8; font-size: 13px; line-height: 1.75; }.legal-document a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }.legal-document mark { padding: 2px 5px; background: rgba(255,118,148,.1); color: #ff9aaf; }

.motion-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.motion-ready [data-reveal].visible { opacity: 1; transform: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes route { from { left: 0; } to { left: calc(100% - 7px); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { transform: scale(.97); opacity: .75; } 50% { transform: scale(1.03); opacity: 1; } }

@media (max-width: 1120px) {
  .site-nav { gap: 20px; }.header-actions .button { display: none; }
  .hero { min-height: auto; }.hero-layout { grid-template-columns: 1fr; gap: 35px; }.hero-copy { max-width: 790px; }.hero h1 { font-size: clamp(57px, 8vw, 80px); }.product-stage { width: min(100%, 820px); min-height: 640px; margin-inline: auto; }.dashboard-mock { right: 10px; }.account-layout { gap: 55px; }.privacy-layout { gap: 55px; }.bento-primary { min-height: 706px; }
}

@media (max-width: 900px) {
  .site-nav { gap: 14px; }.site-nav > a { font-size: 11px; }
  .benefit-rail { grid-template-columns: 1fr 1fr; }
  .bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }.bento-primary { grid-column: span 2; grid-row: auto; min-height: 650px; }.bento-support { grid-column: span 2; }
  .account-layout, .privacy-layout { grid-template-columns: 1fr; }.account-copy, .privacy-copy { max-width: 700px; }.identity-flow { width: min(100%, 680px); }.privacy-visual { width: min(100%, 680px); order: 2; }.privacy-copy { order: 1; }
  .journey-heading { align-items: start; flex-direction: column; gap: 12px; }.rules-grid { grid-template-columns: 1fr; }.rule-card { min-height: 230px; }
  .pricing-title { align-items: start; flex-direction: column; }.pricing-grid { grid-template-columns: 1fr; width: min(100%, 650px); margin-inline: auto; }.price-card { min-height: 500px; }
  .faq-layout { grid-template-columns: 1fr; gap: 55px; }.faq-copy { position: static; max-width: 650px; }
  .final-cta-inner { align-items: start; flex-direction: column; }.footer-grid { grid-template-columns: 1.4fr repeat(3, .7fr); gap: 30px; }
  .account-gateway { grid-template-columns: 1fr; gap: 55px; }.gateway-copy { max-width: 760px; }.gateway-card { width: min(100%, 560px); }.dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .shell { width: min(calc(100% - 28px), var(--shell)); }
  .header-inner { min-height: 68px; gap: 12px; }.brand img { width: 36px; height: 36px; }.header-actions { margin-left: auto; }.header-signin { display: inline-block; padding: 8px; }.menu-toggle { display: grid; }
  .site-nav { position: fixed; top: 68px; right: 0; bottom: 0; left: 0; display: flex; align-items: stretch; flex-direction: column; gap: 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); transform: translateX(100%); background: rgba(5,10,17,.98); backdrop-filter: blur(18px); transition: transform .2s ease; }.site-nav.open { transform: none; }.site-nav > a { padding: 18px 7px; border-bottom: 1px solid var(--line); font-size: 17px; }.site-nav > a::after { display: none; }.mobile-nav-actions { display: grid; gap: 9px; margin-top: auto; padding-top: 24px; }
  .hero { padding: 116px 0 75px; }.hero-layout { gap: 55px; }.product-chip { margin-bottom: 21px; }.hero h1 { font-size: clamp(45px, 13.2vw, 66px); }.hero-lead { font-size: 15px; }.hero-actions { display: grid; }.hero-actions .button { width: 100%; }.hero-proof { display: grid; gap: 10px; }
  .product-stage { min-height: 500px; }.dashboard-mock { top: 0; right: 0; grid-template-columns: 1fr; min-height: 450px; transform: none; }.mock-sidebar { display: none; }.mock-content { padding: 20px; }.mock-main-grid { grid-template-columns: 1fr; }.connection-panel { min-height: 185px; }.identity-panel { display: none; }.mock-stat { min-height: 91px; }.mock-main-grid .mock-stat { display: inline-block; width: calc(50% - 7px); }.mock-main-grid .link-stat { float: right; }.phone-mock { display: none; }.sync-badge { right: 18px; bottom: 4px; }
  .section { padding: 88px 0; }.section-title { margin-bottom: 40px; }.section-title h2, .account-copy h2, .privacy-copy h2 { font-size: 40px; }.section-title > p:last-child, .account-copy > p, .privacy-copy > p { font-size: 14px; }
  .benefit-band { margin-top: -30px; }.benefit-rail { gap: 8px; padding: 8px; }.benefit-rail article { min-height: 82px; padding: 12px; }
  .bento-grid { grid-template-columns: 1fr; }.bento, .bento-primary, .bento-support { grid-column: auto; min-height: auto; padding: 25px; }.bento-primary { min-height: 610px; }.bento-support { align-items: start; flex-direction: column; }.bento-start, .bento-devices { min-height: 340px; }.connection-showcase { margin-top: 38px; }.connection-path { grid-template-columns: minmax(110px,1fr) minmax(54px,.55fr) minmax(120px,1fr); }
  .identity-flow { padding: 22px; }.linking-journey { margin-top: 55px; padding: 20px; }.journey-steps { grid-template-columns: 1fr; }.journey-steps article { min-height: 125px; }.journey-steps article:not(:last-child)::after { display: none; }
  .privacy-visual { min-height: 470px; }.tag-one { top: 35px; left: 18px; }.tag-two { right: 16px; bottom: 37px; }.tag-three { bottom: 94px; left: 15px; }
  .rules-grid { grid-template-columns: 1fr; }.rule-card { min-height: 220px; }.period-switch { width: 100%; overflow-x: auto; }.period-switch button { flex: 1 0 auto; }.price-card { min-height: 490px; padding: 25px; }.pricing-note { align-items: start; text-align: left; }
  .faq-copy h2 { font-size: 40px; }.faq-actions { display: grid; grid-template-columns: 1fr; }.faq-actions .button { width: 100%; }.faq-item > button { padding: 22px 0; }.faq-item > button span { font-size: 13px; }
  .final-actions { width: 100%; flex-direction: column; }.final-actions .button { width: 100%; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: span 2; }.footer-bottom { align-items: start; flex-direction: column; }
  .auth-dialog { width: 100%; max-width: none; max-height: calc(100vh - 18px); margin: auto 0 0; border-radius: 24px 24px 0 0; }.auth-shell { padding: 30px 20px calc(26px + env(safe-area-inset-bottom)); }
  .legal-main { padding: 95px 10px 45px; }.legal-document { padding: 30px 20px; }.legal-document h1 { font-size: 38px; }
  .account-header-label { display: none; }.account-header-actions a { display: none; }.account-main { padding: 102px 0 45px; }.account-gateway { min-height: auto; gap: 40px; }.gateway-copy h1 { font-size: 45px; }.gateway-copy > p:not(.eyebrow) { font-size: 14px; }.gateway-proof { grid-template-columns: 1fr; }.gateway-card { padding: 21px; }.account-welcome { align-items: start; flex-direction: column; }.account-live { margin: 0; }.selected-plan-banner { grid-template-columns: 35px 1fr; }.selected-plan-banner a { grid-column: 2; }.account-card { min-height: auto; padding: 22px; }.account-identity { grid-template-columns: 36px 1fr; }.account-identity > i { grid-column: 2; }.account-loading { min-height: 65vh; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
  .header-signin { font-size: 12px; }.button-small { display: none; }.hero h1 { font-size: 43px; }.mock-heading strong { font-size: 15px; }.shield-pulse { width: 61px; height: 61px; }.connection-core strong { font-size: 18px; }.sync-badge { left: 18px; right: auto; }
  .benefit-rail { grid-template-columns: 1fr 1fr; }.benefit-rail article { min-height: 92px; grid-template-columns: 36px 1fr; gap: 8px; padding: 10px; }.benefit-icon { width: 36px; height: 36px; }.benefit-rail strong { font-size: 10px; }.benefit-rail small { font-size: 7px; }.bento-primary { min-height: auto; }.connection-path { grid-template-columns: 1fr; }.path-tunnel { min-height: 55px; place-content: center; }.path-tunnel > span { width: 1px; height: 34px; margin-inline: auto; background: linear-gradient(rgba(57,215,242,.2), var(--cyan), rgba(82,227,157,.2)); }.path-tunnel > span b { display: none; }.device-showcase { gap: 8px; transform: scale(.92); transform-origin: bottom center; }
  .identity-flow { padding: 15px; }.flow-card { grid-template-columns: 40px 1fr 21px; padding: 13px; }.flow-card > span { width: 40px; height: 40px; }.flow-result { padding: 16px; }.result-orbit { width: 53px; height: 53px; }.flow-result strong { font-size: 13px; }
  .privacy-tag { max-width: calc(100% - 30px); font-size: 8px; }.tag-two { bottom: 28px; }.tag-three { bottom: 84px; }.privacy-core { width: 110px; height: 110px; }.privacy-core::before { inset: -25px; }.privacy-core::after { inset: -52px; }
  .footer-grid { grid-template-columns: 1fr; }.footer-brand { grid-column: auto; }
}

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