/* Tesla VPN public web visual layer */
.scene-grid{position:fixed;z-index:-2;inset:0;pointer-events:none;background-image:linear-gradient(rgba(87,205,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(87,205,255,.025) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 78%)}

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

.hero__visual{perspective:1100px;transform-style:preserve-3d;isolation:isolate}
.hero-depth{position:absolute;border-radius:50%;pointer-events:none;transform-style:preserve-3d}
.hero-depth--back{width:455px;height:455px;border:1px solid rgba(91,205,255,.075);background:radial-gradient(circle,rgba(37,139,224,.08),transparent 68%);transform:translateZ(-80px) rotateX(66deg);animation:depthFloat 9s ease-in-out infinite}
.hero-depth--mid{width:320px;height:320px;border:1px solid rgba(255,219,107,.07);transform:translateZ(-28px) rotateY(64deg);animation:depthFloat 7s ease-in-out infinite reverse}
.hero-core{animation:coreFloat 5.8s ease-in-out infinite;transform-style:preserve-3d;background:radial-gradient(circle at 34% 28%,rgba(138,226,255,.28),transparent 20%),radial-gradient(circle at 64% 70%,rgba(14,48,90,.34),transparent 48%),linear-gradient(150deg,#102e49,#071524 70%);box-shadow:inset 15px 15px 28px rgba(255,255,255,.035),inset -24px -26px 42px rgba(2,8,14,.72),0 30px 80px rgba(0,0,0,.42),0 0 80px rgba(36,160,255,.12)}
.hero-core:before{content:"";position:absolute;inset:16px;border-radius:50%;border:1px solid rgba(255,255,255,.055);box-shadow:inset 0 0 34px rgba(80,194,255,.055)}
.hero-core:after{content:"";position:absolute;width:58%;height:22%;top:9%;left:18%;border-radius:50%;background:radial-gradient(ellipse,rgba(214,247,255,.28),rgba(117,211,255,.07) 54%,transparent 72%);filter:blur(4px);transform:translateZ(24px) rotate(-12deg)}
.hero-core__bolt{transform:translateZ(38px)}.hero-core strong{transform:translateZ(28px)}.hero-core small{transform:translateZ(20px)}

.hero-orbit-3d{position:absolute;inset:50% auto auto 50%;width:330px;height:330px;margin:-165px 0 0 -165px;border-radius:50%;border:1px solid rgba(112,213,255,.10);transform-style:preserve-3d;pointer-events:none}
.hero-orbit-3d--a{transform:rotateX(68deg) rotateZ(18deg);animation:orbitPlaneA 13s linear infinite}
.hero-orbit-3d--b{width:390px;height:390px;margin:-195px 0 0 -195px;border-color:rgba(255,222,116,.08);transform:rotateY(69deg) rotateZ(-14deg);animation:orbitPlaneB 17s linear infinite reverse}
.hero-particle{position:absolute;z-index:7;left:50%;top:50%;border-radius:50%;pointer-events:none;transform-style:preserve-3d}
.hero-particle:before{content:"";position:absolute;inset:1px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),rgba(255,255,255,.12) 48%,transparent 64%)}
.hero-particle--blue{width:14px;height:14px;margin:-7px;background:radial-gradient(circle at 35% 30%,#d5f8ff 0,#64dcff 38%,#168cff 72%,#0a4a99 100%);box-shadow:0 0 16px #64dcff,0 0 34px rgba(43,159,255,.36);animation:electronBlue 8.5s linear infinite}
.hero-particle--yellow{width:12px;height:12px;margin:-6px;background:radial-gradient(circle at 35% 30%,#fff7c8 0,#ffe174 38%,#f6a92e 72%,#8e5711 100%);box-shadow:0 0 16px #ffe174,0 0 32px rgba(255,205,76,.30);animation:electronYellow 11s linear infinite}
.hero-particle--cyan{width:10px;height:10px;margin:-5px;background:radial-gradient(circle at 35% 30%,#ecfdff 0,#97eeff 38%,#39caff 72%,#0c627d 100%);box-shadow:0 0 14px #8cecff,0 0 27px rgba(66,199,255,.26);animation:electronCyan 6.8s linear infinite}

.tariff-grid{perspective:1200px;align-items:stretch}
.tariff-card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;min-height:370px;padding:28px;display:flex;flex-direction:column;align-items:flex-start;border-color:rgba(112,206,255,.25);background:radial-gradient(circle at var(--mx) var(--my),rgba(80,201,255,.105),transparent 34%),linear-gradient(155deg,rgba(20,48,73,.97),rgba(8,19,31,.99));box-shadow:0 28px 70px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.018) inset,0 1px 0 rgba(255,255,255,.07) inset;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);transform-style:preserve-3d;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;background .2s ease}
.tariff-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 26%,transparent 68%,rgba(73,190,255,.045));opacity:.85}
.tariff-card:after{content:"";position:absolute;left:14%;right:14%;bottom:-28px;height:54px;border-radius:50%;background:rgba(35,157,255,.19);filter:blur(24px);opacity:.45;pointer-events:none}
.tariff-card:hover{border-color:rgba(112,220,255,.45);box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 48px rgba(40,159,255,.09),inset 0 1px 0 rgba(255,255,255,.08)}
.tariff-card.is-featured{border-color:rgba(255,220,103,.48);background:radial-gradient(circle at var(--mx) var(--my),rgba(255,213,80,.10),transparent 34%),radial-gradient(circle at 82% 0,rgba(255,211,69,.10),transparent 31%),linear-gradient(155deg,rgba(20,48,73,.98),rgba(8,19,31,.99))}
.tariff-card h3,.tariff-price,.tariff-list,.tariff-badge,.tariff-card .btn{position:relative;z-index:2;transform:translateZ(18px)}
.tariff-card h3{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.tariff-price strong{font-size:48px;color:#fff}.tariff-price span{color:#a9bfd2}
.tariff-list{color:#b0c2d2;font-size:14px;line-height:1.4;margin-bottom:24px}
.tariff-list li:before{color:#67deff;text-shadow:0 0 10px rgba(79,211,255,.45)}
.tariff-card .btn{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%;margin-top:auto;align-self:stretch;min-height:50px;border-radius:15px;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.tariff-card .btn--secondary{color:#f3fbff;background:linear-gradient(180deg,rgba(18,48,72,.98),rgba(9,28,45,.98));border-color:rgba(103,205,255,.30)}
.tariff-card .btn--secondary:hover{background:linear-gradient(180deg,rgba(24,61,91,.98),rgba(11,35,55,.98));border-color:rgba(116,220,255,.48)}
.tariff-card .btn--primary{box-shadow:0 13px 34px rgba(53,184,255,.28)}

.step-card{border-color:rgba(111,190,240,.20);background:linear-gradient(155deg,rgba(15,34,52,.88),rgba(8,19,31,.92));box-shadow:0 18px 45px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.035);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.step-card:hover{transform:translateY(-5px);border-color:rgba(111,211,255,.35);box-shadow:0 26px 60px rgba(0,0,0,.25),0 0 28px rgba(55,176,255,.06)}
.step-card p{color:#9db0c2}
.trust-strip{border-color:rgba(99,195,255,.24);background:linear-gradient(180deg,rgba(14,34,51,.78),rgba(8,21,33,.80));box-shadow:0 24px 65px rgba(0,0,0,.28)}
.faq-list details{border-color:rgba(106,194,255,.20);background:linear-gradient(155deg,rgba(13,31,48,.82),rgba(8,20,32,.88))}
.faq-list p{color:#9aafc0}

/* Cabinet */
.cabinet-page{background:radial-gradient(circle at 72% 0,rgba(34,132,214,.18),transparent 30%),linear-gradient(180deg,#06101a 0,#07121d 44%,#050b12 100%)}
.cabinet-main{max-width:1180px;margin:0 auto;padding:56px 24px 96px}
.cabinet-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:30px;padding:28px 30px;border:1px solid rgba(108,199,255,.20);border-radius:28px;background:linear-gradient(145deg,rgba(17,43,66,.78),rgba(8,20,32,.86));box-shadow:0 26px 70px rgba(0,0,0,.26);overflow:hidden}
.cabinet-hero h1{font-size:clamp(36px,5vw,58px);letter-spacing:-.05em;margin:10px 0 8px}.cabinet-hero p{color:#92a9bb;margin:0}
.cabinet-state{position:relative;flex:0 0 112px;width:112px;height:112px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(62,187,255,.19),rgba(7,20,32,.95) 66%);border:1px solid rgba(99,205,255,.30);box-shadow:0 0 54px rgba(50,177,255,.14)}
.cabinet-state span{font-size:46px;color:#63ddff;text-shadow:0 0 22px rgba(72,205,255,.65)}
.cabinet-state__ring{position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(101,201,255,.16);animation:spin 12s linear infinite}.cabinet-state__ring:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#ffe177;box-shadow:0 0 13px #ffe177;top:12%;left:17%}
.cabinet-grid{perspective:1200px}
.panel--depth{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;overflow:hidden;border-color:rgba(105,196,255,.20);background:radial-gradient(circle at var(--mx) var(--my),rgba(72,190,255,.07),transparent 34%),linear-gradient(155deg,rgba(17,42,63,.94),rgba(8,20,32,.98));box-shadow:0 24px 60px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .17s ease,border-color .2s ease,box-shadow .2s ease}
.panel--depth:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 28%,transparent 72%,rgba(65,195,255,.035))}
.panel--depth:hover{border-color:rgba(111,213,255,.35);box-shadow:0 30px 78px rgba(0,0,0,.34),0 0 34px rgba(53,180,255,.06),inset 0 1px 0 rgba(255,255,255,.055)}
.panel--depth>*{position:relative;z-index:2;transform:translateZ(10px)}
.cabinet-grid .panel{min-height:230px}.cabinet-grid .panel--wide{min-height:0}.cabinet-grid .btn--full{margin-top:18px}
.settings-panel{min-height:0!important}
.motion-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.motion-option{min-height:44px;border-radius:13px;border:1px solid rgba(111,196,255,.14);background:rgba(8,22,35,.72);color:#8da6b9;font-weight:800;cursor:pointer;transition:.18s ease}
.motion-option:hover{border-color:rgba(111,215,255,.30);color:#edfaff}.motion-option.is-active{color:#07121c;background:linear-gradient(125deg,#69e5ff,#3db7ff 60%,#ffd861 170%);border-color:transparent;box-shadow:0 10px 25px rgba(42,171,255,.18)}
.offline-note{grid-column:1/-1;padding:14px 16px;border:1px solid rgba(255,209,92,.18);border-radius:15px;background:rgba(255,209,92,.055);color:#d8c382;text-align:center;font-size:13px}

/* Performance modes */
html[data-motion="low"] .scene-grid{opacity:.28}
html[data-motion="low"] .ambient{filter:blur(38px);opacity:.22}
html[data-motion="low"] .site-header{backdrop-filter:blur(10px)}
html[data-motion="low"] .hero-depth--mid,html[data-motion="low"] .hero-orbit-3d--b,html[data-motion="low"] .hero-particle--cyan{display:none}
html[data-motion="low"] .hero-core{animation-duration:11s;box-shadow:inset 0 0 24px rgba(80,194,255,.045),0 20px 55px rgba(0,0,0,.34)}
html[data-motion="low"] .hero-orbit-3d--a{animation-duration:24s}
html[data-motion="low"] .hero-particle--blue{animation-duration:15s;box-shadow:0 0 12px rgba(100,220,255,.55)}
html[data-motion="low"] .hero-particle--yellow{animation-duration:18s;box-shadow:0 0 12px rgba(255,225,116,.5)}
html[data-motion="low"] .tariff-card,html[data-motion="low"] .panel--depth{transform:none!important;box-shadow:0 18px 44px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04)}
html[data-motion="low"] .tariff-card:after{filter:blur(14px);opacity:.28}
html[data-motion="low"] .step-card:hover{transform:none}

html[data-motion="off"] *,html[data-motion="off"] *:before,html[data-motion="off"] *:after{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-motion="off"] .scene-grid{display:none}
html[data-motion="off"] .ambient{display:none}
html[data-motion="off"] .hero-depth,html[data-motion="off"] .hero-orbit-3d,html[data-motion="off"] .hero-particle{display:none!important}
html[data-motion="off"] .hero__visual,html[data-motion="off"] .hero-core,html[data-motion="off"] .tariff-card,html[data-motion="off"] .panel--depth{transform:none!important;perspective:none!important}
html[data-motion="off"] .hero-core{box-shadow:inset 0 0 22px rgba(80,194,255,.04),0 18px 48px rgba(0,0,0,.28)}
html[data-motion="off"] .tariff-card,html[data-motion="off"] .panel--depth{box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)}
html[data-motion="off"] [data-reveal]{opacity:1!important;transform:none!important}
html[data-motion="off"] .site-header{backdrop-filter:none;background:rgba(5,12,20,.98)}

@keyframes coreFloat{0%,100%{transform:translateY(0) rotateX(0deg) rotateY(0deg)}50%{transform:translateY(-10px) rotateX(2deg) rotateY(-3deg)}}
@keyframes depthFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes orbitPlaneA{to{transform:rotateX(68deg) rotateZ(378deg)}}
@keyframes orbitPlaneB{to{transform:rotateY(69deg) rotateZ(346deg)}}
@keyframes electronBlue{0%{transform:translate3d(152px,-94px,38px) scale(1)}25%{transform:translate3d(112px,118px,-8px) scale(.72)}50%{transform:translate3d(-148px,104px,32px) scale(1.12)}75%{transform:translate3d(-124px,-110px,-12px) scale(.76)}100%{transform:translate3d(152px,-94px,38px) scale(1)}}
@keyframes electronYellow{0%{transform:translate3d(-188px,22px,28px) scale(1)}25%{transform:translate3d(-28px,-172px,-10px) scale(.72)}50%{transform:translate3d(186px,-30px,46px) scale(1.12)}75%{transform:translate3d(38px,174px,-8px) scale(.74)}100%{transform:translate3d(-188px,22px,28px) scale(1)}}
@keyframes electronCyan{0%{transform:translate3d(0,-150px,44px) scale(1.05)}25%{transform:translate3d(156px,8px,-14px) scale(.72)}50%{transform:translate3d(0,150px,34px) scale(1.08)}75%{transform:translate3d(-156px,-8px,-12px) scale(.74)}100%{transform:translate3d(0,-150px,44px) scale(1.05)}}

@media(max-width:900px){
  [data-reveal]{opacity:1;transform:none}
  .hero-depth{display:block}
  .tariff-card,.panel--depth{transform:none!important}
  .tariff-card:hover{transform:none!important}
  .cabinet-main{padding-top:34px}.cabinet-hero{padding:24px}.cabinet-state{width:90px;height:90px;flex-basis:90px}.cabinet-state span{font-size:38px}
  .hero__visual{min-height:400px;max-width:470px;margin:0 auto}
  .hero-depth--back{width:390px;height:390px}.hero-depth--mid{width:280px;height:280px}
}

@media(max-width:620px){
  .site-header{padding:12px 14px;gap:10px}
  .site-header .logo{font-size:17px}.logo__mark{width:32px;height:32px}
  .header-actions{gap:7px}.header-actions .btn{min-height:38px;padding:0 12px;font-size:13px;border-radius:12px}.header-buy{display:inline-flex}
  .hero{padding:34px 16px 24px;gap:8px}.hero h1{font-size:42px;line-height:1.02}.hero__lead{font-size:15.5px;line-height:1.55}.hero__actions{display:grid;grid-template-columns:1fr;gap:9px}.hero__actions .btn{width:100%}.hero__facts{justify-content:flex-start;gap:9px 15px;font-size:12px}
  .hero__visual{min-height:300px;max-width:340px}.hero-core{width:170px;height:170px}.hero-core__bolt{font-size:64px}.tesla-orbit--one{width:245px;height:245px}.tesla-orbit--two{width:300px;height:300px}.hero-depth--back{width:310px;height:310px}.hero-depth--mid{width:226px;height:226px}.hero-orbit-3d{width:236px;height:236px;margin:-118px 0 0 -118px}.hero-orbit-3d--b{width:286px;height:286px;margin:-143px 0 0 -143px}.hero-particle--blue{width:11px;height:11px}.hero-particle--yellow{width:10px;height:10px}.hero-particle--cyan{width:8px;height:8px}
  .trust-strip{margin:0 10px;grid-template-columns:1fr 1fr}.trust-strip>div{padding:17px 14px}.trust-strip strong{font-size:18px}
  .section{padding:64px 16px}.section-heading{margin-bottom:28px}.section-heading h2{font-size:34px;line-height:1.08}
  .tariff-grid{gap:14px}.tariff-card{min-height:auto;padding:21px;border-radius:24px}.tariff-card h3{font-size:24px;margin:18px 0 3px}.tariff-price{margin:10px 0 18px}.tariff-price strong{font-size:40px}.tariff-list{font-size:13px;gap:8px;margin-bottom:18px}.tariff-card .btn{min-height:46px!important;margin-top:4px}
  .steps-grid{grid-template-columns:1fr}.step-card{min-height:auto;padding:21px 18px}.install-callout{align-items:flex-start;flex-direction:column;padding:18px}
  .cabinet-main{padding:24px 16px 70px}.cabinet-hero{align-items:flex-start}.cabinet-state{display:none}.dashboard-grid{grid-template-columns:1fr}.panel{padding:20px}.key-row{grid-template-columns:1fr}.key-value{white-space:normal;word-break:break-all}
  .motion-options{grid-template-columns:1fr}
}

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