/* Readable navigation over the crystal artwork. Keep footer content in flow. */
.site .footer{height:auto;min-height:calc(320 * var(--u));padding-top:calc(14 * var(--u))}
.site .footer .footer-bottom{position:relative;inset:auto;transform:none;bottom:auto;left:auto;width:100%;margin-top:calc(32 * var(--u));padding:14px max(24px,calc(78 * var(--u)));display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 20px;background:#020914f7;border-top:1px solid #174a7299;font-size:clamp(12px,.95vw,14px);text-shadow:0 1px 2px #000}
.site .footer-bottom nav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:2px 14px;align-items:center}
.site .footer-bottom nav a,.site .footer-bottom nav button,.site .footer-bot{display:inline-flex;align-items:center;min-height:44px;padding:10px 2px;color:#eef7ff;font-size:inherit;font-weight:500;line-height:1.5}
.site .footer-bottom nav button{border:0;background:none}
.site .footer-bot{gap:9px;color:#bdeaff;white-space:nowrap}
.site .footer-bottom nav a:hover,.site .footer-bottom nav button:hover,.site .footer-bot:hover{color:#7ee6ff}
.site .legal-footer-links{position:relative;inset:auto;left:auto;bottom:auto;transform:none;width:100%;padding:12px max(24px,calc(78 * var(--u))) 23px;background:#020914fa;text-shadow:0 1px 2px #000}
.site .legal-footer-links nav{display:flex;flex-wrap:wrap;justify-content:flex-start;max-width:1180px;margin-inline:auto;gap:2px 17px}
.site .legal-footer-links nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 2px;font-size:clamp(12px,.95vw,14px);font-weight:500;line-height:1.5;color:#e8f3ff}
.site .legal-footer-links nav a:hover{color:#7ee6ff}
.site .legal-footer-links p{max-width:1180px;margin:10px auto 0;text-align:left;font-size:12px;line-height:1.7;color:#bed0e0}
.site .legal-footer-links p a{color:#e8f3ff;padding-block:8px;display:inline-block}
.site .footer-bottom a:focus-visible,.site .footer-bottom button:focus-visible,.site .legal-footer-links a:focus-visible{outline:2px solid #8be5ff;outline-offset:3px}

/* Dedicated portrait-tablet layout; do not shrink the entire desktop design. */
@media(min-width:701px) and (max-width:1023px){
 .site{--u:1px;min-height:0}
 .container{width:calc(100% - 64px)}
 .header{height:76px;gap:20px}
 .brand{font-size:16px;gap:5px}
 .brand-mark{width:33px;height:40px}
 .nav{font-size:12px;gap:19px;margin-left:0}
 .nav a,.nav button{padding-block:13px}
 .button-small{font-size:11px;min-height:36px;padding:8px 11px}
 .button-small svg{width:15px;height:15px}
 .hero{height:454px;padding-top:42px}
 .hero-copy{width:410px;padding-left:0}
 .hero-subtitle{font-size:14px}
 .hero-price{font-size:15px}
 .features{width:calc(100% - 64px);height:110px;gap:12px;padding-top:14px}
 .feature{height:72px;gap:10px;font-size:12px}
 .feature svg{width:29px;height:33px}
 .feature .infinity-icon{width:34px}
 h2{font-size:26px}
 .section-intro{font-size:14px}
 .servers{height:430px;padding-top:35px}
 .server-copy{width:220px}
 .country-list{width:211px}
 .country{height:42px;font-size:11px;gap:7px}
 .country-code{font-size:9px}
 .country-count{font-size:8px}
 .locations-button{font-size:12px;min-height:40px;width:145px}
 .server-map{width:calc(100% - 220px);height:350px;margin-left:0;margin-top:8px}
 .servers:before{left:220px;right:-10px;top:35px}
 .map-label{font-size:10px;padding:7px 9px;min-height:32px;gap:5px}
 .map-label .flag{width:17px;height:12px}
 .map-fi{left:53%;top:11%}
 .map-ee{left:63%;top:35%}
 .map-stat{width:143px;right:8px}
 .pricing{height:auto;padding-top:32px;padding-bottom:34px}
 .pricing h2{font-size:26px}
 .pricing .section-intro{font-size:14px;margin-top:12px}
 .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px;margin-top:31px;max-width:760px;margin-inline:auto}
 .plan,.plan-popular{height:320px;padding:27px}
 .plan h3{font-size:20px}
 .price,.plan-popular .price{margin-top:9px}
 .price strong{font-size:44px}
 .price>span{font-size:23px}
 .plan-period{font-size:12px;margin-top:5px}
 .plan-benefits,.plan-popular .plan-benefits{font-size:13px;line-height:1.8;margin-top:14px;padding-top:12px}
 .plan .plan-benefits{margin-bottom:17px}
 .plan-benefits svg{width:14px;height:14px}
 .plan-button,.plan-popular .plan-button{font-size:14px;min-height:44px}
 .popular-badge{font-size:10px;min-width:108px;padding:5px 13px;top:-9px}
 .how-to{height:auto;padding-top:24px;padding-bottom:35px}
 .how-to h2{font-size:23px}
 .how-to .section-intro{font-size:14px;margin-top:9px}
 .steps{gap:17px;margin-top:23px}
 .step{height:151px;padding:16px 12px;gap:12px}
 .step-number{font-size:25px}
 .step-content>svg{width:29px;height:29px;margin-bottom:12px}
 .step h3{font-size:11px;white-space:normal}
 .step p{font-size:10px;line-height:1.65;margin-top:7px}
 .step:not(:last-child) .step-content:after{right:-14px;top:51px;font-size:25px}
 .site .footer{padding-top:20px}
 .footer-wordmark{font-size:26px}
 .footer-cta>p{font-size:13px}
 .footer-connect{width:174px;min-height:44px;font-size:12px;margin-top:16px}
}

@media(max-width:700px){
 .menu-toggle,.header-telegram{min-width:44px;min-height:44px}
 .header-telegram svg{width:21px;height:21px}
 .header{gap:10px}
 .feature{height:82px;font-size:14px}
 .map-label{font-size:11px;min-height:36px;padding:8px 9px}
 .map-label .flag{width:19px;height:13px}
 .map-ee{left:61%}
 .site .footer{min-height:0;margin-top:40px;padding-top:28px}
 .site .footer .footer-bottom{justify-content:center;margin-top:26px;padding:14px 20px 5px;gap:3px 18px}
 .site .footer-bottom nav{justify-content:center;gap:2px 17px}
 .site .footer-bottom nav a,.site .footer-bottom nav button,.site .footer-bot{font-size:13px;min-height:44px}
 .site .legal-footer-links{padding:5px 20px 24px}
 .site .legal-footer-links nav{justify-content:center;gap:2px 16px}
 .site .legal-footer-links nav a{font-size:12px;min-height:44px;padding:10px 2px}
 .site .legal-footer-links p{font-size:12px;text-align:center;margin-top:12px}
 .site .legal-footer-links p a{color:#edf8ff}
 .legal-document-nav>a{min-height:44px}
 .legal-header nav a{min-height:40px;display:inline-flex;align-items:center}
 .legal-header nav>a:first-child{display:none}
 .legal-page-footer a{min-height:40px;display:inline-flex;align-items:center}
}
@media(max-width:360px){
 .document-heading h1{font-size:20px;line-height:1.3;overflow-wrap:normal}
 .brand{font-size:13px;gap:3px}
 .brand-mark{width:29px;height:35px}
 .feature{font-size:12px;gap:8px}
 .feature svg{width:28px}
 .map-label{font-size:10px;gap:5px}
 .map-ee{left:61%}
 .site .footer-bottom nav{gap:2px 14px}
 .legal-header nav>a:not(.legal-back){display:none}
}

/* Full-bleed artwork on large monitors; the central illustration keeps its ratio. */
@media(min-width:1441px){
 .site{width:100%;max-width:none;margin-inline:0}
 .scene{background:radial-gradient(ellipse at 50% 10%,#020b1b,#010207 65%)}
 .scene:before,.scene:after{content:'';position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-position:center top,center bottom}
 .scene:before{background-image:url('assets/footer-hd.png'),url('assets/footer-hd.png');background-size:100% calc(530 * var(--u)),100% calc(300 * var(--u));opacity:.8}
 .scene:after{background-image:url('assets/hero-hd.png'),url('assets/footer-hd.png');background-size:auto calc(530 * var(--u)),auto calc(300 * var(--u));mask-image:linear-gradient(90deg,transparent calc(50% - 720px),#000 calc(50% - 620px),#000 calc(50% + 620px),transparent calc(50% + 720px))}
 .site .footer .footer-bottom{padding-inline:max(24px,calc((100% - 1180px)/2))}
}