/* ===================================================================
   Newer VPN — single-frame pixel-perfect layout
   Desktop: 1440 × 2087   Mobile: 402 × 1215
   EK card is an absolute overlay; when visible, tariffs shift via
   --ek-off CSS variable (applied through `.has-ek` on .sw wrapper).
   =================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:pan-x pan-y}
body{
  background:#000;color:#fff;
  font-family:'Montserrat',sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}

/* =========================================================
   SCALE WRAPPERS  (--scale-d/m set from inline script)
   ========================================================= */
.sw{position:relative;overflow:hidden;margin:0 auto;width:100%}
.frame{
  position:absolute;top:0;left:0;
  transform-origin:top left;
}

/* Desktop: 1440×2087 (+ --ek-off when key panel is visible) */
.sw-d{
  display:block;max-width:1440px;
  --ek-off:0px;
  height:calc((2087px + var(--ek-off)) * var(--scale-d, 1));
}
.sw-d.has-ek{--ek-off:260px}
.frame-d{
  width:1440px;
  height:calc(2087px + var(--ek-off));
  transform:scale(var(--scale-d, 1));
}

/* Mobile: 402×1215 (+ --ek-off) */
.sw-m{
  display:none;max-width:402px;
  --ek-off:0px;
  height:calc((1215px + var(--ek-off)) * var(--scale-m, 1));
}
.sw-m.has-ek{--ek-off:200px}
.frame-m{
  width:402px;
  height:calc(1215px + var(--ek-off));
  transform:scale(var(--scale-m, 1));
}

@media (max-width:899px){
  .sw-d{display:none}
  .sw-m{display:block}
}


/* =========================================================
   DESKTOP FRAME  (1440 × 2087)
   ========================================================= */

.d-bg{position:absolute;pointer-events:none;overflow:hidden}
.d-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 71%,#000 97%);
}
.d-bg-top{
  left:0;top:219px;width:1439px;height:598px;
  background:url('assets/figma/mobile_bg_top-6292a0.png') center/cover no-repeat;
}
.d-bg-mid{
  left:0;top:calc(1014px + var(--ek-off));width:1439px;height:1233px;
  background:url('assets/figma/mobile_bg_mid-741ff1.png') center/cover no-repeat;
}

.d-logo{position:absolute;left:652px;top:91px;width:136px;height:45px}

.d-title{
  position:absolute;left:389px;top:212px;width:662px;
  font-weight:400;font-size:36px;line-height:1.22;
  text-align:center;color:#fff;
}

.d-text{
  position:absolute;top:321px;
  font-weight:400;font-size:16px;line-height:1.3;
  text-align:center;color:#fff;
}
.d-text-1{left:365px;width:303px}
.d-text-2{left:794px;width:256px}
.d-text strong{font-weight:700}

.d-btn{
  position:absolute;top:395px;width:365px;height:57px;
  border-radius:100px;border:none;
  background:linear-gradient(178deg,#470094 0%,#C074D2 100%);
  box-shadow:
    0 11.6px 23.2px rgba(43,43,43,.7),
    inset 0 5.9px 5.9px rgba(169,138,255,.65),
    inset 0 -5.9px 5.9px rgba(126,126,126,.39);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:16px;color:#fff;
  cursor:pointer;text-decoration:none;
  transition:transform .2s,filter .2s;
}
.d-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.d-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;filter:none}
.d-btn-1{left:336px}
.d-btn-2{left:739px}
.d-btn-ico{width:26px;height:26px}

.d-pill{
  position:absolute;top:497px;height:44px;
  border-radius:100px;background:#0A0310;
  box-shadow:
    inset 0 5.9px 5.9px rgba(169,138,255,.65),
    inset 0 -5.9px 5.9px rgba(126,126,126,.39);
  display:flex;align-items:center;justify-content:center;
  font-weight:400;font-size:15px;color:#fff;
}
.d-pill-1{left:419px;width:89px}
.d-pill-2{left:517px;width:123px}
.d-pill-3{left:649px;width:137px}
.d-pill-4{left:795px;width:118px}
.d-pill-5{left:922px;width:99px}

/* Desktop tariffs — all tops shifted by --ek-off when key panel visible */
.d-tariffs{
  position:absolute;left:0;right:0;top:calc(683px + var(--ek-off));
  font-weight:700;font-size:32px;line-height:1.22;
  text-align:center;color:#fff;
}
.d-sub{
  position:absolute;left:0;right:0;top:calc(739px + var(--ek-off));
  font-weight:400;font-size:20px;line-height:1.22;
  text-align:center;color:#fff;
}
.d-tier{
  position:absolute;left:190px;
  font-weight:500;font-size:24px;line-height:1.16;color:#fff;
}
.d-tier span{opacity:.6}
.d-tier-std{top:calc(840px + var(--ek-off))}
.d-tier-prem{top:calc(1147px + var(--ek-off))}

.d-card{
  position:absolute;width:260px;height:196px;
  border-radius:20px;
  background:rgba(0,0,0,.28);
  border:3px solid rgba(255,255,255,.13);
  backdrop-filter:blur(117.9px);-webkit-backdrop-filter:blur(117.9px);
  color:#fff;text-decoration:none;
  transition:transform .3s,border-color .3s;
}
.d-card:hover{transform:translateY(-3px);border-color:rgba(157,103,205,.5)}
.d-card__p{
  position:absolute;left:0;right:0;top:37px;
  font-weight:400;font-size:18px;line-height:1.22;text-align:center;
}
.d-card__pr{
  position:absolute;left:0;right:0;top:65px;
  font-weight:800;font-size:36px;line-height:1.16;letter-spacing:-0.5px;
  text-align:center;
}
.d-card__pm{
  position:absolute;left:0;right:0;top:119px;
  font-weight:400;font-size:13px;line-height:1.22;
  text-align:center;opacity:.9;
}
.d-card__badge{
  position:absolute;left:50%;top:146px;
  transform:translateX(-50%);
  min-width:154px;height:24px;padding:0 18px;
  display:flex;align-items:center;justify-content:center;
  border-radius:100px;border:1px solid #FF00AA;
  background:linear-gradient(178deg,rgba(71,0,148,.55) 0%,rgba(192,116,210,.55) 100%);
  box-shadow:
    0 0 24px rgba(157,103,205,.55),
    0 4px 12px rgba(71,0,148,.45),
    inset 0 2px 4px rgba(169,138,255,.55),
    inset 0 -2px 4px rgba(126,126,126,.25);
  font-weight:600;font-size:10px;line-height:1;letter-spacing:.3px;
  color:#fff;white-space:nowrap;text-transform:uppercase;
}
.d-card--simple .d-card__p{top:63px}
.d-card--simple .d-card__pr{top:91px}

.d-card-s1{left:167px;top:calc(901px + var(--ek-off))}
.d-card-s2{left:449px;top:calc(901px + var(--ek-off))}
.d-card-s3{left:731px;top:calc(901px + var(--ek-off))}
.d-card-s4{left:1013px;top:calc(901px + var(--ek-off))}
.d-card-p1{left:167px;top:calc(1208px + var(--ek-off))}
.d-card-p2{left:449px;top:calc(1208px + var(--ek-off))}
.d-card-p3{left:731px;top:calc(1208px + var(--ek-off))}
.d-card-p4{left:1013px;top:calc(1208px + var(--ek-off))}


/* =========================================================
   MOBILE FRAME  (402 × 1215)
   ========================================================= */

.m-bg{position:absolute;pointer-events:none;overflow:hidden}
.m-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 71%,#000 97%);
}
.m-bg-1{
  left:-101px;top:-11px;width:606.4px;height:252px;
  background:url('assets/figma/mobile_bg_top-6292a0.png') center/cover no-repeat;
}
.m-bg-2{
  left:-64px;top:293px;width:530px;height:455px;
  background:url('assets/figma/mobile_bg_mid-741ff1.png') center/cover no-repeat;
}
.m-bg-3{
  left:-64px;top:calc(1100px + var(--ek-off));width:530px;height:455px;
  background:url('assets/figma/mobile_bg_mid-741ff1.png') center/cover no-repeat;
}

.m-logo{position:absolute;left:162px;top:101px;width:78px;height:26px}

.m-title{
  position:absolute;left:0;right:0;top:185px;
  font-weight:400;font-size:14px;line-height:1.22;
  text-align:center;color:#fff;
}

.m-text{
  position:absolute;
  font-weight:400;font-size:14px;line-height:1.3;
  text-align:center;color:#fff;
}
.m-text-1{left:11px;top:239px;width:380px}
.m-text-2{left:11px;top:372px;width:380px}
.m-text strong{font-weight:700}

.m-btn{
  position:absolute;left:75px;width:251px;height:39px;
  border-radius:100px;border:none;
  background:linear-gradient(178deg,#470094 0%,#C074D2 100%);
  box-shadow:
    0 11.6px 23.2px rgba(43,43,43,.7),
    inset 0 5.9px 5.9px rgba(169,138,255,.65),
    inset 0 -5.9px 5.9px rgba(126,126,126,.39);
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-weight:700;font-size:11px;color:#fff;
  cursor:pointer;text-decoration:none;
}
.m-btn:hover{filter:brightness(1.1)}
.m-btn:disabled{opacity:.6;cursor:not-allowed;filter:none}
.m-btn-1{top:292px}
.m-btn-2{top:425px}
.m-btn-ico{width:19px;height:19px}

/* Mobile tariffs — tops shifted by --ek-off when key panel visible */
.m-tariffs{
  position:absolute;left:0;right:0;top:calc(500px + var(--ek-off));
  font-weight:700;font-size:16px;line-height:1.22;
  text-align:center;color:#fff;
}
.m-sub{
  position:absolute;left:0;right:0;top:calc(532px + var(--ek-off));
  font-weight:400;font-size:13px;line-height:1.22;
  text-align:center;color:#fff;
}
.m-tier{
  position:absolute;left:71px;
  font-weight:500;font-size:13px;line-height:1.16;color:#fff;
}
.m-tier span{opacity:.6}
.m-tier-std{top:calc(600px + var(--ek-off))}
.m-tier-prem{top:calc(892px + var(--ek-off))}

.m-card{
  position:absolute;width:127px;height:96px;
  border-radius:10px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(117.9px);-webkit-backdrop-filter:blur(117.9px);
  color:#fff;text-decoration:none;
}
.m-card__p{
  position:absolute;left:0;right:0;top:12px;
  font-weight:400;font-size:10px;line-height:1.22;text-align:center;
}
.m-card__pr{
  position:absolute;left:0;right:0;top:35px;
  font-weight:800;font-size:16px;line-height:1.16;letter-spacing:-0.3px;
  text-align:center;
}
.m-card__pm{
  position:absolute;left:0;right:0;top:55px;
  font-weight:400;font-size:8px;line-height:1.22;
  text-align:center;opacity:.9;
}
.m-card__badge{
  position:absolute;left:50%;top:73px;
  transform:translateX(-50%);
  min-width:69px;height:13px;padding:0 8px;
  display:flex;align-items:center;justify-content:center;
  border-radius:100px;border:0.5px solid #FF00AA;
  background:linear-gradient(178deg,rgba(71,0,148,.55) 0%,rgba(192,116,210,.55) 100%);
  box-shadow:
    0 0 12px rgba(157,103,205,.55),
    0 2px 6px rgba(71,0,148,.45),
    inset 0 1px 2px rgba(169,138,255,.55),
    inset 0 -1px 2px rgba(126,126,126,.25);
  font-weight:600;font-size:6.5px;line-height:1;letter-spacing:.2px;
  color:#fff;white-space:nowrap;text-transform:uppercase;
}
.m-card--simple .m-card__p{top:24px}
.m-card--simple .m-card__pr{top:44px}

.m-card-s1{left:68px;top:calc(652px + var(--ek-off))}
.m-card-s2{left:206px;top:calc(652px + var(--ek-off))}
.m-card-s3{left:68px;top:calc(760px + var(--ek-off))}
.m-card-s4{left:206px;top:calc(760px + var(--ek-off))}
.m-card-p1{left:68px;top:calc(944px + var(--ek-off))}
.m-card-p2{left:206px;top:calc(944px + var(--ek-off))}
.m-card-p3{left:68px;top:calc(1052px + var(--ek-off))}
.m-card-p4{left:206px;top:calc(1052px + var(--ek-off))}


/* =========================================================
   EXTRA KEY RESULT (absolute overlay inside each frame)
   Each frame has its own .ek so positioning is per-breakpoint.
   ========================================================= */
.ek{
  display:none;
  position:absolute;left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  z-index:20;box-shadow:0 16px 40px rgba(0,0,0,.6);
}
.ek--show{display:block}
.ek-d{
  top:600px;width:560px;padding:22px 26px;
}
.ek-m{
  top:488px;width:360px;padding:16px 18px;
}

.ek__title{
  font-weight:700;color:#fff;text-align:center;
}
.ek-d .ek__title{font-size:18px;margin-bottom:14px}
.ek-m .ek__title{font-size:13px;margin-bottom:10px}

.ek__status{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;
  border-radius:12px;
}
.ek-d .ek__status{font-size:13px;padding:10px 14px;margin-bottom:14px}
.ek-m .ek__status{font-size:11px;padding:7px 10px;margin-bottom:10px;border-radius:8px}

.ek__status--active{
  color:#B489E0;
  background:linear-gradient(178deg,rgba(71,0,148,.35),rgba(192,116,210,.25));
  border:1px solid rgba(157,103,205,.5);
  box-shadow:0 0 20px rgba(157,103,205,.35);
}
.ek__status--active::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:#9D67CD;box-shadow:0 0 8px #9D67CD;
  animation:ek-pulse 1.5s ease-in-out infinite;
}
.ek-m .ek__status--active::before{width:6px;height:6px}
.ek__status--expired{
  color:#888;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.ek__status--expired::before{
  content:'';width:8px;height:8px;border-radius:50%;background:#555;
}
.ek-m .ek__status--expired::before{width:6px;height:6px}
@keyframes ek-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.85)}
}

.ek__box{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
}
.ek-d .ek__box{padding:10px 14px}
.ek-m .ek__box{padding:7px 10px;border-radius:8px;flex-direction:column;align-items:stretch}

.ek__box code{
  flex:1;color:#C074D2;
  word-break:break-all;text-align:left;font-family:monospace;
}
.ek-d .ek__box code{font-size:12px}
.ek-m .ek__box code{font-size:9px;text-align:center}
.ek--expired .ek__box code{color:#666;text-decoration:line-through}

.ek__copy{
  padding:8px 14px;border-radius:8px;
  background:linear-gradient(178deg,#470094,#C074D2);
  color:#fff;font-weight:700;white-space:nowrap;
  transition:transform .2s,filter .2s;
}
.ek-d .ek__copy{font-size:11px}
.ek-m .ek__copy{font-size:9px;padding:6px 10px;width:100%}
.ek__copy:hover{transform:translateY(-1px);filter:brightness(1.1)}
.ek--expired .ek__copy{
  background:rgba(255,255,255,.1);pointer-events:none;opacity:.5;
}


/* =========================================================
   MODAL
   ========================================================= */
.modal{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center}
.modal--on{display:flex}
.modal__bg{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(4px)}
.modal__bd{
  position:relative;z-index:1;background:#111;
  border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px;
  max-width:600px;width:calc(100% - 24px);max-height:80vh;overflow-y:auto;
  font-size:12px;line-height:1.7;color:#999;
}
.modal__bd h2{font-size:17px;font-weight:700;color:#fff;margin-bottom:14px}
.modal__bd h3{font-size:13px;font-weight:700;color:#fff;margin-top:12px;margin-bottom:4px}
.modal__bd p{margin-bottom:6px}
.modal__x{position:absolute;top:10px;right:14px;color:#999;font-size:26px;line-height:1}
.modal__x:hover{color:#fff}

/* =========================================================
   FOOTER
   ========================================================= */
.ft{border-top:1px solid rgba(255,255,255,.06);padding:28px 0;position:relative;z-index:10}
.ft__inner{
  max-width:1110px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
}
.ft__logo{font-size:15px;font-weight:900;letter-spacing:2px;font-style:italic}
.ft__copy{font-size:11px;color:#666;margin-top:3px}
.ft__links{display:flex;gap:18px}
.ft__links a{font-size:11px;color:#666;transition:color .2s}
.ft__links a:hover{color:#fff}

@media (max-width:600px){
  .ft__inner{flex-direction:column;align-items:flex-start}
  .ft__links{flex-direction:column;gap:6px}
}