/* Approved concepts: route B and setup A. Live controls over separate artwork. */
.steps-v2{background:radial-gradient(ellipse at 50% 48%,#39205735,transparent 70%),#09060f;padding:58px 22px 48px;isolation:isolate}
.steps-heading{text-align:center}.steps-heading .eyebrow{font-size:13px;letter-spacing:4px;margin:0 0 18px}.steps-heading h2{font-size:clamp(40px,5.9vw,90px);letter-spacing:-3px;line-height:1.08;font-weight:800;margin:0}
.setup-switch{display:flex;width:max-content;max-width:100%;margin:34px auto 43px;border:1px solid #684093;border-radius:32px;background:#140d22;box-shadow:0 0 15px #af72ff18;overflow:hidden}.setup-switch button{background:transparent;border:0;border-right:1px solid #51316d;color:#bfa7dc;font-size:16px;padding:13px 31px;min-width:116px}.setup-switch button:last-child{border-right:0}.setup-switch button[aria-selected=true]{border-radius:32px;background:var(--lime);color:#151a0c;font-weight:650;box-shadow:0 0 24px #ceff6844}.setup-switch button:focus-visible{outline-offset:-5px}
.setup-cards{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;isolation:isolate}.setup-step{position:relative;border:1.5px solid #ba8aff;border-radius:20px;background:linear-gradient(130deg,#25153839,#100a1e66);min-width:0;padding:25px 24px 29px;display:flex;flex-direction:column;box-shadow:inset 0 0 28px #56238213}.setup-step.dns-step{border-color:#d2ff68;box-shadow:0 0 30px #c6ff6812,inset 0 0 30px #b3ff6810;background:linear-gradient(145deg,#c1ff6808,#21113055)}
.step-number{position:absolute;top:0;left:22px;color:#6741a24d;font-size:clamp(95px,12vw,180px);font-weight:800;line-height:1.2;letter-spacing:-10px;z-index:-1;user-select:none}
.setup-object{position:relative;width:100%;aspect-ratio:1.18;margin:55px auto 0;background-image:url('assets/setup-objects.png');background-size:300% 100%;background-repeat:no-repeat;filter:drop-shadow(0 15px 12px #ad5fff18);flex-shrink:0}.setup-device{background-position:0 50%}.setup-dns{background-position:50% 50%}.setup-check{background-position:100% 50%}.setup-device[data-current-device=windows],.setup-device[data-current-device=router],.setup-device[data-current-device=phone]{background-image:url('assets/devices.png');background-size:400% 100%}.setup-device[data-current-device=windows]{background-position:33.333% 50%}.setup-device[data-current-device=router]{background-position:66.666% 50%}.setup-device[data-current-device=phone]{background-position:100% 50%}
.glass-address{position:absolute;left:7%;right:7%;top:32%;text-align:center;transform:rotate(-8deg);text-shadow:0 0 15px #b073ff6b;color:#f2e9ff}.glass-address>span{display:block;letter-spacing:7px;font-size:clamp(15px,1.6vw,25px);color:#bf9eef;margin-bottom:8px}.glass-address .ip{font:500 clamp(22px,2.7vw,42px)/1.3 'Golos Text',Arial,sans-serif;letter-spacing:1px;margin:0;white-space:nowrap}
.step-copy{position:relative;z-index:2;text-align:center;margin-top:3px}.step-copy h3{font-size:clamp(19px,2vw,30px);letter-spacing:-.6px;line-height:1.15;margin:0 0 16px;white-space:nowrap}.step-copy p{font-size:clamp(12px,1.4vw,20px);line-height:1.5;color:#b79dd3;margin:0}.step-copy .button{border-radius:36px;padding:15px 20px;font-size:clamp(14px,1.5vw,22px);width:100%;gap:18px;margin:0;box-shadow:0 0 24px #caff6830}
.step-chevron{position:absolute;right:-34px;top:39%;font-size:59px;font-weight:600;line-height:1;color:var(--lime);text-shadow:0 0 15px #caff684d;z-index:3}.steps-energy{position:absolute;left:-3%;top:30%;width:106%;height:26%;pointer-events:none;z-index:-1;overflow:visible}
.setup-details{margin:42px auto 0;max-width:1100px}.setup-details>summary{width:max-content;max-width:100%;margin:auto;cursor:pointer;list-style:none;font-size:18px;color:#bfa6dd;border-bottom:1px solid #7b568f;padding:5px 0 9px;display:flex;gap:20px}.setup-details>summary::-webkit-details-marker{display:none}.setup-details[open]>summary{color:var(--lime)}.setup-details-content{background:#100b18;border:1px solid #4c3263;border-radius:16px;margin-top:24px;padding-bottom:25px}.setup-details .notice{margin:10px 25px 0}.dns-explanation{font-size:12px;color:#aa99b9;line-height:1.7;margin:0 38px 20px}.setup-details #guide{padding-bottom:24px}
.route-v2{display:block;padding:0!important;background:#09060f}.route-canvas{position:relative;width:100%;aspect-ratio:1.5;isolation:isolate;overflow:hidden}.route-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-2}.route-paths{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.route-text{position:absolute;left:5%;top:12%;width:43%;}.route-text .eyebrow{font-size:clamp(9px,1vw,15px);letter-spacing:3px;margin-bottom:28px}.route-text h2{font-size:clamp(40px,6.4vw,98px);letter-spacing:-2.8px;line-height:.94;font-weight:800}.route-text>p:not(.eyebrow){color:#ac9abd;font-size:clamp(16px,2.15vw,32px);line-height:1.3;letter-spacing:-.3px;margin:28px 0 33px}.route-text .button{border-radius:40px;padding:18px 28px;font-size:clamp(15px,1.9vw,28px);gap:17px}
.scene-label{position:absolute;color:#b5a1ce;font-size:clamp(11px,1.4vw,21px);font-weight:500;transform:translateX(-50%);white-space:nowrap;text-shadow:0 2px 10px #09060f}.label-services{left:84%;top:9%}.label-device{left:30%;top:85%}.label-hub{left:58%;top:65%;color:#dac7f4}.label-direct{left:89%;top:70%;text-align:center}.label-direct>span{display:block;font-size:.7em;letter-spacing:2px;color:#8b739f;margin-top:3px}.route-disclaimer{position:absolute;bottom:4.5%;right:3.5%;font-size:clamp(9px,.95vw,14px);color:#9684a8;margin:0}
@media(min-width:1700px){.route-text h2{font-size:98px}.steps-heading h2{font-size:90px}.setup-object{max-width:400px}.step-copy h3{font-size:30px}}
@media(max-width:1100px) and (min-width:761px){.steps-v2{padding:43px 20px}.setup-cards{gap:20px}.setup-step{padding:20px 14px}.setup-object{margin-top:40px}.step-chevron{right:-22px;font-size:40px}.setup-switch{margin-bottom:32px}.setup-switch button{padding:11px 20px}.step-copy h3{font-size:18px;white-space:normal;min-height:42px}.step-copy p{font-size:13px}.route-text .eyebrow{margin-bottom:18px}.route-text>p:not(.eyebrow){margin:20px 0}.route-text .button{padding:14px 20px}.glass-address .ip{font-size:2.6vw}}
@media(max-width:760px){.steps-v2{padding:35px 14px!important}.steps-heading .eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:18px}.steps-heading h2{font-size:39px;line-height:1.08;letter-spacing:-1.5px}.setup-switch{width:100%;margin:25px auto 29px}.setup-switch button{min-width:0;flex:1;padding:11px 4px;font-size:11px}.setup-cards{grid-template-columns:1fr;gap:23px;max-width:430px;margin:auto}.setup-step{padding:15px 24px 28px;border-radius:17px}.step-number{font-size:125px;top:1px;left:20px}.setup-object{width:90%;aspect-ratio:1.25;margin-top:37px;max-width:300px}.step-copy{margin-top:0}.step-copy h3{font-size:22px;white-space:normal;margin-bottom:12px}.step-copy p{font-size:14px}.step-copy .button{font-size:16px;padding:14px 18px}.glass-address .ip{font-size:clamp(22px,6.9vw,32px)}.glass-address>span{font-size:17px;letter-spacing:5px;margin-bottom:5px}.step-chevron{top:auto;bottom:-31px;right:calc(50% - 15px);transform:rotate(90deg);font-size:45px}.steps-energy{display:none}.setup-details{margin-top:30px}.setup-details>summary{font-size:15px}.setup-details #guide{padding:24px 20px}.dns-explanation{margin:0 20px 18px}.setup-details .notice{margin:0 15px}.route-canvas{aspect-ratio:auto;height:810px;overflow:hidden}.route-text{position:relative;left:auto;top:auto;width:auto;padding:34px 22px 0}.route-text h2{font-size:49px;line-height:.97;letter-spacing:-1.9px}.route-text h2 br:first-child{display:none}.route-text h2 br:first-child:after{content:' '}.route-text .eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:20px}.route-text>p:not(.eyebrow){font-size:18px;margin:20px 0}.route-text .button{font-size:16px;padding:14px 23px}.route-scene,.route-paths{inset:auto auto 52px -35%;width:135%;height:auto;aspect-ratio:1.5}.scene-label{font-size:11px}.label-services{left:78%;top:auto;bottom:calc(52px + 72vw)}.label-device{left:8%;top:auto;bottom:calc(52px + 7vw);transform:none}.label-hub{left:43%;top:auto;bottom:calc(52px + 25vw)}.label-direct{left:84%;top:auto;bottom:calc(52px + 20vw);font-size:9px}.route-disclaimer{bottom:16px;left:20px;right:20px;font-size:10px;text-align:center;line-height:1.5}}
.step-number{z-index:0}.setup-object{z-index:1}@media(max-width:760px){.route-text h2 br:first-child{display:inline}.route-text h2 br:first-child:after{content:none}}
@media(max-width:760px){.route-scene,.route-paths{left:-25%;width:125%}.label-hub{left:48%}.label-device{left:10%}}
/* Isolate Windows from the neighbouring sprite; optically center DNS on the tilted plaque. */
.visual-windows,.setup-device[data-current-device=windows]{clip-path:inset(0 7% 0 7%)}
.glass-address{left:12%;right:2%}
/* Keep each sprite cell at its native proportions on every screen. */
.setup-object{aspect-ratio:1}
.setup-device[data-current-device=windows],.setup-device[data-current-device=router],.setup-device[data-current-device=phone]{background-image:none;clip-path:none}
.setup-device:not([data-current-device=xbox])::before{content:"";position:absolute;inset:0 12.5%;background-image:url('assets/devices.png');background-size:400% 100%;background-repeat:no-repeat}
.setup-device[data-current-device=windows]::before{background-position:33.333% 50%;clip-path:inset(0 7%)}
.setup-device[data-current-device=router]::before{background-position:66.666% 50%}
.setup-device[data-current-device=phone]::before{background-position:100% 50%}
footer .legal-links{display:flex;flex-wrap:wrap;gap:14px 28px;grid-column:1/-1;width:100%;font-size:12px;color:#baa5cf}footer .legal-links a:hover{color:var(--lime)}
.telegram-cta{display:flex;align-items:center;gap:26px;margin:38px auto 0;padding:30px 32px;max-width:1100px;border:1px solid #7953a2;border-radius:22px;background:radial-gradient(ellipse at 0 0,#7544a944,transparent 65%),linear-gradient(120deg,#22132f,#120d1d);box-shadow:inset 0 1px 0 #d4aaff20}.telegram-symbol{display:grid;place-items:center;flex:0 0 72px;height:72px;border-radius:22px;color:#ddc5ff;background:linear-gradient(145deg,#8e5fc85c,#211232);border:1px solid #ab7fe0;box-shadow:inset 0 2px 8px #eddaff24,0 12px 28px #09030e80;transform:rotate(-7deg)}.telegram-symbol svg{width:38px;height:38px}.telegram-copy{flex:1;min-width:0}.telegram-copy .eyebrow{font-size:10px;letter-spacing:2px;margin:0 0 12px}.telegram-copy h3{font-size:clamp(22px,2.3vw,32px);line-height:1.15;letter-spacing:-.7px;margin:0 0 10px}.telegram-copy>p:last-child{color:#baa5cf;font-size:14px;line-height:1.6;margin:0}.telegram-cta>.button{flex-shrink:0;white-space:nowrap;font-size:15px;padding:18px 24px;border-radius:32px}@media(max-width:900px){.telegram-cta{flex-wrap:wrap;gap:20px}.telegram-cta>.button{margin-left:92px}}@media(max-width:760px){.telegram-cta{padding:25px 20px;margin-top:30px;gap:18px}.telegram-symbol{flex-basis:52px;height:52px;border-radius:16px}.telegram-symbol svg{width:28px;height:28px}.telegram-copy h3{font-size:23px}.telegram-copy>p:last-child{font-size:13px}.telegram-copy .eyebrow{font-size:8px;letter-spacing:1.5px}.telegram-cta>.button{margin:3px 0 0;width:100%;justify-content:center;font-size:15px}}