/* ===================================================================
   Core 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((1500px + var(--ek-off)) * var(--scale-d, 1));
}
.sw-d.has-ek{--ek-off:260px}
.frame-d{
  width:1440px;
  height:calc(1500px + 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((1115px + var(--ek-off)) * var(--scale-m, 1));
}
.sw-m.has-ek{--ek-off:200px}
.frame-m{
  width:402px;
  height:calc(1115px + 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:none}
.d-bg-top{
  left:0;top:0;width:1440px;height:900px;
  background:radial-gradient(ellipse 110% 80% at 50% 0%, rgba(180,130,20,.4) 0%, rgba(100,70,0,.18) 45%, transparent 80%);
}
.d-bg-mid{
  left:0;top:calc(800px + var(--ek-off));width:1440px;height:1300px;
  background:radial-gradient(ellipse 100% 50% at 50% 30%, rgba(160,115,15,.25) 0%, rgba(80,55,0,.1) 45%, transparent 75%);
}

.d-logo{position:absolute;left:520px;top:50px;width:400px;height:120px}

.d-text{
  position:absolute;top:230px;
  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:310px;width:365px;height:57px;
  border-radius:100px;border:none;
  background:linear-gradient(178deg,#7A5500 0%,#D4A529 100%);
  box-shadow:
    0 11.6px 23.2px rgba(43,43,43,.7),
    inset 0 5.9px 5.9px rgba(212,165,41,.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:410px;height:44px;
  border-radius:100px;background:#1A1200;
  box-shadow:
    inset 0 5.9px 5.9px rgba(212,165,41,.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(590px + 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(646px + 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(747px + var(--ek-off))}
.d-tier-prem{top:calc(1054px + 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(196,155,26,.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 #FFB800;
  background:linear-gradient(178deg,rgba(122,85,0,.55) 0%,rgba(212,165,41,.55) 100%);
  box-shadow:
    0 0 24px rgba(196,155,26,.55),
    0 4px 12px rgba(122,85,0,.45),
    inset 0 2px 4px rgba(212,165,41,.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(808px + var(--ek-off))}
.d-card-s2{left:449px;top:calc(808px + var(--ek-off))}
.d-card-s3{left:731px;top:calc(808px + var(--ek-off))}
.d-card-s4{left:1013px;top:calc(808px + var(--ek-off))}
.d-card-p1{left:167px;top:calc(1115px + var(--ek-off))}
.d-card-p2{left:449px;top:calc(1115px + var(--ek-off))}
.d-card-p3{left:731px;top:calc(1115px + var(--ek-off))}
.d-card-p4{left:1013px;top:calc(1115px + var(--ek-off))}


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

.m-bg{position:absolute;pointer-events:none;overflow:hidden}
.m-bg::after{content:none}
.m-bg-1{
  left:-101px;top:-11px;width:606.4px;height:300px;
  background:radial-gradient(ellipse 130% 100% at 50% 0%, rgba(180,130,20,.4) 0%, rgba(100,70,0,.18) 45%, transparent 80%);
}
.m-bg-2{
  left:-64px;top:250px;width:530px;height:455px;
  background:radial-gradient(ellipse 100% 50% at 50% 30%, rgba(160,115,15,.25) 0%, rgba(80,55,0,.1) 45%, transparent 75%);
}
.m-bg-3{
  left:-64px;top:calc(900px + var(--ek-off));width:530px;height:455px;
  background:radial-gradient(ellipse 100% 50% at 50% 30%, rgba(160,115,15,.25) 0%, rgba(80,55,0,.1) 45%, transparent 75%);
}

.m-logo{position:absolute;left:76px;top:30px;width:250px;height:75px}

.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:150px;width:380px}
.m-text-2{left:11px;top:275px;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,#7A5500 0%,#D4A529 100%);
  box-shadow:
    0 11.6px 23.2px rgba(43,43,43,.7),
    inset 0 5.9px 5.9px rgba(212,165,41,.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:200px}
.m-btn-2{top:325px}
.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(400px + 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(432px + 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(500px + var(--ek-off))}
.m-tier-prem{top:calc(792px + 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 #FFB800;
  background:linear-gradient(178deg,rgba(122,85,0,.55) 0%,rgba(212,165,41,.55) 100%);
  box-shadow:
    0 0 12px rgba(196,155,26,.55),
    0 2px 6px rgba(122,85,0,.45),
    inset 0 1px 2px rgba(212,165,41,.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(552px + var(--ek-off))}
.m-card-s2{left:206px;top:calc(552px + var(--ek-off))}
.m-card-s3{left:68px;top:calc(660px + var(--ek-off))}
.m-card-s4{left:206px;top:calc(660px + var(--ek-off))}
.m-card-p1{left:68px;top:calc(844px + var(--ek-off))}
.m-card-p2{left:206px;top:calc(844px + var(--ek-off))}
.m-card-p3{left:68px;top:calc(952px + var(--ek-off))}
.m-card-p4{left:206px;top:calc(952px + 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:388px;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:#D4A529;
  background:linear-gradient(178deg,rgba(122,85,0,.35),rgba(212,165,41,.25));
  border:1px solid rgba(196,155,26,.5);
  box-shadow:0 0 20px rgba(196,155,26,.35);
}
.ek__status--active::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:#C49B1A;box-shadow:0 0 8px #C49B1A;
  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:#D4A529;
  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,#7A5500,#D4A529);
  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;color:#D4A529}
.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}
}