@font-face {
  font-family: Manrope;
  src: url('./assets/manrope-cyrillic-variable.c268b459a932.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Manrope;
  src: url('./assets/manrope-latin-variable.a30ddcd34970.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root { color-scheme: dark; --bg:#060e14; --surface:#0d1b23; --text:#f3fbfc; --muted:#a8c0c7; --teal:#49edcc; --line:#29404a; --max:1220px; --section-title:clamp(1.9rem,3vw,2.65rem); --ease:cubic-bezier(.22,.61,.36,1); font-family:Manrope,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-color:#54747d var(--bg); scrollbar-width:thin; }
body { margin:0; color:var(--text); background:radial-gradient(ellipse at 80% 4%,#112e38 0,transparent 28%),var(--bg); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
::selection { color:var(--bg); background:var(--teal); }
a { color:inherit; text-decoration:none; text-underline-offset:.25em; }
a,button,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--teal); outline-offset:5px; }
section:focus,main:focus { outline:none; }
button { font:inherit; cursor:pointer; }
img { display:block; max-width:100%; }
svg { flex:0 0 auto; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { text-wrap:balance; }
h1 { font-size:clamp(3.2rem,5.9vw,5.2rem); line-height:1.06; letter-spacing:-.04em; font-weight:750; }
h2 { font-size:var(--section-title); line-height:1.16; letter-spacing:-.035em; font-weight:750; }
h3 { font-size:1.1rem; line-height:1.4; }
.site-header,main,.site-footer { width:calc(100% - 80px); max-width:var(--max); margin-inline:auto; }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:12px 18px; background:var(--teal); color:var(--bg); transform:translateY(-160%); border-radius:8px; }
.skip-link:focus { transform:none; }
.header-band { position:sticky; z-index:20; top:0; background:#060e14eb; border-bottom:1px solid #b0ecf016; backdrop-filter:blur(18px); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:26px; min-height:90px; position:relative; }
.brand { display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; }
.brand img { width:44px; height:49px; object-fit:contain; }
.brand strong { display:block; font-size:1.4rem; letter-spacing:-.04em; font-weight:800; }
.brand small { display:none; }
.main-nav { display:flex; align-items:center; gap:30px; font-size:.85rem; font-weight:600; color:var(--muted); }
.main-nav a { padding-block:14px; transition:color .2s; }
.main-nav a:hover,.footer-links a:hover { color:var(--text); }
.header-actions { display:flex; align-items:center; gap:10px; }
.button { position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:13px 22px; border:1px solid transparent; border-radius:12px; font-size:.9rem; font-weight:750; line-height:1.4; text-align:center; transition:background .4s,border-color .4s,transform .5s var(--ease),box-shadow .5s; }
.button::after { content:''; position:absolute; z-index:-1; inset:-70% -40%; background:linear-gradient(110deg,transparent 38%,#ffffff55 49%,transparent 60%); transform:translateX(-90%); pointer-events:none; }
.button-telegram::after,.button-ghost::after { background:linear-gradient(110deg,transparent 38%,#ffffff1f 49%,transparent 60%); }
.button:hover::after,.button:focus-visible::after { transform:translateX(90%); transition:transform 1.3s cubic-bezier(.4,0,.2,1); }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#042820; background:linear-gradient(125deg,#9ff7db,#35dfc6); box-shadow:0 9px 28px #19cfb21a; }
.button-primary:hover { box-shadow:0 12px 34px #19cfb237; }
.button-cabinet { color:#052e26; background:#39e1bd; border-color:#8cf5dc; font-weight:800; }
.button-cabinet:hover { background:#77efd2; border-color:#a5ffe7; }
.button-telegram { color:#e9faff; background:#12496a; border-color:#378db6; }
.button-telegram:hover { background:#19628a; }
.button-ghost { color:var(--text); background:#ffffff05; border-color:#476470; }
.button-ghost:hover { background:#1b3641; border-color:#8cbdc6; }
.button-small { min-height:46px; padding:11px 18px; font-size:.84rem; }
.button-large { min-height:56px; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.telegram-icon { width:20px; height:20px; fill:currentColor; }
.text-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.9rem; font-weight:650; color:#c5e8ed; }
.text-link:hover { color:var(--teal); }
.menu-toggle { display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid #476470; border-radius:10px; color:var(--text); background:transparent; }
.hero { position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:0; align-items:center; min-height:650px; padding-block:52px 58px; }
.hero-copy { position:relative; z-index:2; padding-block:32px; }
.hero h1 span { color:#82efd7; }
.hero-lead { max-width:34ch; margin-top:25px; color:#c0dce1; font-size:1.2rem; line-height:1.65; }
.hero-actions>.button { font-size:1rem; font-weight:800; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-note { margin-top:16px; color:#adc8cf; font-size:.78rem; max-width:54ch; }
.hero-plans-link { display:inline-flex; align-items:center; gap:7px; margin-top:28px; min-height:44px; color:#9ebbc4; font-size:.85rem; }
.hero-plans-link strong { color:var(--text); }
.hero-plans-link .icon { width:16px; margin-left:9px; color:var(--teal); transition:transform .2s; }
.hero-plans-link:hover .icon { transform:translateY(4px); }
.hero-art { position:relative; display:grid; place-items:center; min-width:0; min-height:560px; isolation:isolate; }
.hero-glow { position:absolute; z-index:-2; inset:8% -3%; background:radial-gradient(ellipse,#20b9a92c,transparent 65%); }
.veil-scene { position:absolute; inset:-28px -38px; overflow:hidden; pointer-events:none; z-index:-1; }
.veil-ribbon { position:absolute; width:74%; height:92%; left:16%; top:2%; border-radius:50%; transform:rotate(-32deg); background:linear-gradient(140deg,#4cfddc05 12%,#29eadb12 35%,#95fff24d 50%,#249cb70d 66%,transparent 78%); border:1px solid #8dfff032; box-shadow:inset 13px 0 24px #3ef9d71a,17px 0 40px #11889915; }
.veil-ribbon::before { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:2px; background:conic-gradient(from 0deg,transparent 0deg,#42dedd14 75deg,#acfff1 110deg,#37d8d91a 150deg,transparent 190deg); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:veil-light 20s linear infinite; }
.veil-ribbon-secondary { width:84%; height:65%; left:9%; top:17%; transform:rotate(31deg); background:linear-gradient(35deg,transparent,#4ae4ea0d,transparent); border-color:#61cbe529; box-shadow:none; }
.veil-ribbon-secondary::before { animation-duration:28s; animation-direction:reverse; background:conic-gradient(transparent 20deg,#5ee6ff 90deg,transparent 140deg); }
.veil-beam { position:absolute; width:110%; height:18%; top:48%; left:-5%; transform:rotate(-35deg); background:linear-gradient(180deg,transparent,#6effda0b,#60fce425,transparent); filter:blur(13px); animation:veil-breathe 12s ease-in-out infinite alternate; }
.mascot-stage { position:relative; width:min(100%,360px); animation:mascot-drift 9s ease-in-out infinite; }
.mascot-stage img { width:100%; height:auto; object-fit:contain; mix-blend-mode:screen; }
@keyframes veil-light { to { transform:rotate(360deg); } }
@keyframes veil-breathe { to { opacity:.45; transform:translateY(-32px) rotate(-31deg); } }
@keyframes mascot-drift { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-12px) rotate(1deg); } }
html:not(.js) .hero *,html:not(.js) .hero *::before { animation-play-state:paused; }
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after,.motion-offscreen *,.motion-offscreen *::before,.motion-offscreen *::after { animation-play-state:paused!important; }
.section { padding-block:76px; }
.section-heading { margin-bottom:28px; }
.section-heading>p { color:#b9d4dc; margin-top:14px; font-size:1.06rem; }
.connection-section { padding-block:36px 48px; border-top:1px solid var(--line); }
.connection-section .section-heading { margin-bottom:26px; }
.connection-section h2 { font-size:var(--section-title); }
.connection-section .section-heading>p { display:none; }
.steps-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; list-style:none; padding:0; margin:0; }
.connection-step { position:relative; display:grid; grid-template-columns:34px 1fr; column-gap:12px; align-content:start; padding-right:12px; }
.step-top { grid-column:1; grid-row:1 / 3; }
.step-number { display:grid; place-items:center; width:32px; height:32px; border:1px solid #41656b; border-radius:9px; color:#94e4d4; font-size:.76rem; font-weight:700; }
.step-icon { display:none; }
.connection-step h3 { padding-top:2px; font-size:1rem; }
.connection-step p { grid-column:2; max-width:32ch; margin-top:7px; color:var(--muted); font-size:.84rem; line-height:1.6; }
.connection-step:not(:last-child)::after { content:''; position:absolute; width:7px; height:7px; border-top:1px solid #4a7b82; border-right:1px solid #4a7b82; right:0; top:12px; transform:rotate(45deg); }
.devices-section { display:flex; flex-direction:column; align-items:center; gap:30px; padding:40px 0; border-top:1px solid #29404a80; border-bottom:1px solid #29404a80; }
.devices-section h2 { font-size:var(--section-title); letter-spacing:-.035em; font-weight:750; color:var(--text); text-align:center; }
.devices-section p { display:none; }
.device-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); width:min(100%,960px); list-style:none; padding:0; margin:0; font-size:.95rem; font-weight:700; }
.device-list li { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px 8px; color:#e6f9f8; text-align:center; }
.device-list li+li::before { content:''; position:absolute; left:0; top:28px; width:1px; height:48px; background:var(--line); opacity:.65; }
.device-list li>span { display:grid; place-content:center; min-height:40px; line-height:20px; }
.device-icon { display:block; width:44px; height:44px; color:#94efd8; flex:0 0 44px; }
.plans-section { padding-block:80px; }
.plans-section>.section-heading { text-align:center; margin-bottom:26px; }
.period-picker { padding:0; margin:0 0 32px; border:0; text-align:center; }
.period-picker[hidden] { display:none; }
.period-picker legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.period-options { display:inline-flex; gap:4px; padding:5px; border:1px solid #2f505c; border-radius:12px; background:#0c1a24; }
.period-options label { position:relative; cursor:pointer; }
.period-options input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.period-options span { display:block; padding:10px 22px; border-radius:8px; color:#afcbd3; font-size:.85rem; font-weight:650; white-space:nowrap; transition:background .2s,color .2s; }
.period-options input:checked+span { color:#082c29; background:#a1f2dd; }
.period-options input:focus-visible+span { outline:2px solid var(--teal); outline-offset:3px; }
.period-options label:hover span { background:#213f4a; color:#fff; }
.period-options label:hover input:checked+span { background:#a1f2dd; color:#082c29; }
.plans-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.plan-card { position:relative; display:flex; flex-direction:column; padding:30px; border:1px solid #2b4653; border-radius:16px; background:linear-gradient(155deg,#122630,#09151e 75%); transition:border-color .5s,transform .55s var(--ease); }
.plan-card:hover { transform:translateY(-3px); border-color:#72abae; }
.plan-card-featured { background:linear-gradient(145deg,#1d4b48,#0d272c 68%); border-color:#69ad9e; }
.plan-card-featured::before { content:''; height:2px; position:absolute; top:-1px; left:20%; right:20%; background:linear-gradient(90deg,transparent,#d9fff1,transparent); }
.plan-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.plan-card h3 { font-size:1.55rem; letter-spacing:-.03em; }
.plan-label { color:#b5d0d7; font-size:.75rem; font-weight:650; }
.plan-card-featured .plan-label { color:#073c31; background:#a1f2dd; border-radius:6px; padding:4px 7px; }
.plan-description { margin-top:8px; color:var(--muted); font-size:.83rem; }
.plan-price { margin-top:26px; padding-bottom:22px; border-bottom:1px solid #64909133; }
.plan-price>strong { display:block; font-size:clamp(2.9rem,4.2vw,3.8rem); line-height:1.12; letter-spacing:-.04em; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.plan-price>strong span { font-size:.88rem; letter-spacing:0; font-weight:500; }
.plan-price>strong .monthly-number { font:inherit; letter-spacing:inherit; }
.plan-total { margin-top:12px; color:#c1d9df; font-size:.83rem; font-variant-numeric:tabular-nums; }
.plan-savings { margin-top:5px; min-height:1.6em; font-size:.75rem; color:#94d0be; }
.plan-card ul { display:grid; gap:12px; list-style:none; margin:24px 0; padding:0; font-size:.87rem; }
.plan-card li { display:flex; align-items:baseline; gap:.3em; }
.plan-card li::before { content:''; width:10px; height:6px; flex:0 0 10px; margin-right:6px; align-self:center; border-bottom:1.5px solid #9cddc9; border-left:1.5px solid #9cddc9; transform:rotate(-45deg); }
.plan-card>.button { width:100%; margin-top:auto; }
.pricing-note { text-align:center; margin-top:22px; color:#a0bac4; font-size:.76rem; }
.faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; border-top:1px solid var(--line); }
.faq-section .section-heading { margin:0; }
.faq-section .text-link { margin-top:18px; }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:44px; padding:20px 0; list-style:none; cursor:pointer; font-size:.93rem; font-weight:650; }
.faq-list details:first-child summary { padding-top:0; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'+'; color:#81d9cb; font-size:1.35rem; font-weight:400; transition:transform .2s; }
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-list summary:hover { color:var(--teal); }
.faq-list details p { padding:0 25px 22px 0; color:var(--muted); font-size:.87rem; line-height:1.75; max-width:68ch; }
.cta-panel { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:40px; margin-bottom:65px; border:1px solid #365a60; border-radius:16px; background:linear-gradient(115deg,#173c40,#132532 80%); }
.cta-panel::before { content:''; position:absolute; z-index:-1; width:240px; height:500px; right:34%; top:-140px; border-radius:50%; border:35px solid #5ce4c812; transform:rotate(40deg); }
.cta-panel h2 { font-size:var(--section-title); }
.cta-panel p { margin-top:10px; color:#b2d5d7; font-size:.9rem; }
.cta-actions { display:flex; flex:0 0 auto; flex-direction:column; align-items:stretch; gap:10px; }
.cta-actions>.text-link { justify-content:center; }
.site-footer { display:flex; justify-content:space-between; gap:38px; padding-block:28px 40px; border-top:1px solid var(--line); }
.footer-brand p { margin-top:12px; color:var(--muted); font-size:.75rem; }
.footer-links { display:flex; align-content:start; justify-content:end; flex-wrap:wrap; gap:8px 24px; max-width:720px; color:var(--muted); font-size:.76rem; }
.footer-links a { display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:1100px) {
  .site-header,main,.site-footer { width:calc(100% - 56px); }
  .main-nav { gap:20px; }
  .hero { min-height:590px; grid-template-columns:1.1fr .9fr; }
  .hero h1 { font-size:3.7rem; }
  .hero-art { min-height:480px; }
  .veil-scene { inset-inline:-18px; }
  .mascot-stage { width:310px; }
  .hero-actions { gap:10px; }
  .hero-actions>.button { font-size:.95rem; padding-inline:16px; }
  .plan-card { padding:24px; }
}
@media(max-width:900px) {
  .main-nav { gap:16px; font-size:.78rem; }
  .brand strong { font-size:1.2rem; }
  .hero h1 { font-size:3.2rem; }
  .hero-lead { font-size:1rem; }
  .hero-art { min-height:430px; }
  .mascot-stage { width:280px; }
  .hero-actions { flex-direction:column; align-items:stretch; max-width:270px; }
  .steps-grid { gap:18px; }
  .connection-step { grid-template-columns:28px 1fr; column-gap:10px; }
  .step-number { width:28px; height:28px; }
  .connection-step h3 { font-size:.91rem; }
  .connection-step p { font-size:.8rem; }
  .device-list { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:600px; }
  .device-list li { padding-block:24px; }
  .device-list li:nth-child(3n+1)::before { content:none; }
  .device-list li:nth-child(-n+3) { border-bottom:1px solid #29404a80; }
  .plan-card { padding:23px 18px; }
  .plan-heading { flex-wrap:wrap; }
  .plan-card h3 { font-size:1.4rem; }
  .plan-price>strong { font-size:2.9rem; }
  .plan-card ul { font-size:.76rem; }
  .plan-card>.button { font-size:.78rem; padding-inline:10px; }
  .faq-section { gap:40px; }
}
@media(max-width:760px) {
  .site-header,main,.site-footer { width:calc(100% - 40px); }
  .site-header { min-height:74px; gap:12px; flex-wrap:wrap; }
  .brand { gap:5px; }
  .brand img { width:34px; height:40px; }
  .brand strong { font-size:1.15rem; }
  .header-actions { gap:8px; margin-left:auto; }
  .header-actions .button { font-size:.8125rem; padding:10px 12px; min-height:44px; }
  .header-actions .button>.icon { display:none; }
  .main-nav { order:3; justify-content:center; width:100%; padding-bottom:16px; }
  .js .site-header { flex-wrap:nowrap; }
  .js .menu-toggle { display:flex; }
  .js .main-nav { display:none; position:absolute; top:100%; left:-20px; right:-20px; width:auto; padding:16px 20px; background:#0c1d26; border-bottom:1px solid var(--line); }
  .js .main-nav.is-open { display:flex; flex-direction:column; align-items:stretch; }
  .js .main-nav a { padding:12px; font-size:1rem; }
  .hero { grid-template-columns:1fr; padding-block:34px 16px; gap:4px; }
  .hero-copy { padding-block:0; }
  .hero h1 { font-size:clamp(2.55rem,8vw,3.7rem); }
  .hero h1 span { display:block; }
  .hero-lead { margin-top:18px; max-width:none; font-size:.97rem; }
  .hero-actions { max-width:none; flex-direction:row; margin-top:24px; gap:10px; }
  .hero-actions>.button { flex:1 1 155px; padding-inline:12px; font-size:.95rem; min-height:52px; }
  .hero-note { font-size:.75rem; margin-top:12px; }
  .hero-plans-link { margin-top:12px; font-size:.8rem; }
  .hero-art { min-height:345px; max-width:420px; width:100%; justify-self:center; }
  .mascot-stage { width:220px; }
  .hero-glow { inset:0; }
  .veil-scene { inset:-8px -8px; }
  .section { padding-block:50px; }
  .connection-section { padding-block:30px 32px; }
  .connection-section h2 { font-size:var(--section-title); }
  .steps-grid { grid-template-columns:1fr; gap:24px; }
  .connection-step { grid-template-columns:34px 1fr; column-gap:14px; padding-right:0; }
  .step-number { width:34px; height:34px; }
  .connection-step h3 { font-size:1rem; }
  .connection-step p { font-size:.86rem; max-width:none; margin-top:4px; }
  .connection-step:not(:last-child)::after { width:1px; height:20px; background:#3a666a; border:0; left:17px; top:43px; transform:none; }
  .devices-section { gap:20px; padding-block:32px; }
  .device-list { font-size:clamp(.8rem,2.9vw,.95rem); }
  .device-list li { padding:20px 8px; }
  .plans-section { padding-block:54px; }
  .plans-section>.section-heading { text-align:left; }
  .period-picker { text-align:left; margin-bottom:24px; }
  .period-options { display:flex; }
  .period-options label { flex:1; text-align:center; }
  .period-options span { padding:11px 8px; font-size:.8rem; }
  .plans-grid { grid-template-columns:1fr; max-width:480px; margin-inline:auto; gap:18px; }
  .plan-card { padding:26px; }
  .plan-heading { flex-wrap:nowrap; }
  .plan-card h3 { font-size:1.55rem; }
  .plan-price>strong { font-size:3.4rem; }
  .plan-card ul { font-size:.87rem; }
  .plan-card>.button { font-size:.88rem; }
  .pricing-note { font-size:.75rem; text-align:left; }
  .faq-section { grid-template-columns:1fr; gap:28px; }
  .faq-list summary { font-size:.9rem; }
  .cta-panel { flex-direction:column; align-items:start; padding:28px; margin-bottom:45px; gap:24px; }
  .cta-actions { width:100%; }
  .site-footer { flex-direction:column; gap:22px; }
  .footer-links { justify-content:start; gap:6px 20px; }
}
@media(max-width:380px) {
  .site-header,main,.site-footer { width:calc(100% - 32px); }
  .site-header { gap:6px; }
  .brand strong { font-size:1rem; }
  .brand img { width:28px; height:34px; }
  .header-actions { gap:6px; }
  .header-actions .button { font-size:.8125rem; padding-inline:9px; }
  .hero h1 { font-size:2.65rem; }
  .hero-actions>.button { flex-basis:100%; }
  .hero-art { min-height:310px; }
  .mascot-stage { width:200px; }
  .period-options span { font-size:.75rem; padding-inline:6px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; }
  .button,.plan-card,.hero-plans-link .icon { transform:none!important; }
  .button::after { display:none; }
}
section[id],main[id] { scroll-margin-top:110px; }