/* =================================================================
   SandVPN — Embeddable promo (iframe, no-scroll)
   Layer 1: description page  |  Layer 2: full-iframe popup
   ================================================================= */

:root {
    --bg-deep:#07101f; --bg:#0a1626; --surface:#0f2138; --surface-2:#122a47;
    --line:rgba(126,232,216,0.14);
    --teal:#6ee7d4; --teal-bright:#8ffae8; --teal-deep:#2fb9a6;
    --danger:#ff5b6e; --danger-soft:#ff8a96; --amber:#ffb443;
    --text:#eaf3ff; --muted:#8ea4c2; --muted-2:#5f7596;
    --font-display:"Sora",system-ui,sans-serif;
    --font-body:"DM Sans",system-ui,sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,monospace;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
    font-family:var(--font-body); color:var(--text); overflow:hidden; line-height:1.5;
    -webkit-font-smoothing:antialiased;
    background:
        radial-gradient(900px 500px at 85% -20%, #10325a 0%, transparent 55%),
        radial-gradient(800px 500px at -5% 110%, #0c2240 0%, transparent 50%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
a { color:inherit; text-decoration:none; }

/* Atmosphere */
.bg-grid { position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(rgba(126,232,216,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(126,232,216,.05) 1px,transparent 1px);
    background-size:46px 46px; mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 78%); }
.bg-glow { position:fixed; z-index:0; pointer-events:none; width:420px; height:420px; border-radius:50%; filter:blur(110px); opacity:.4; }
.bg-glow--teal { top:-120px; right:-90px; background:var(--teal-deep); }
.bg-glow--blue { bottom:-150px; left:-120px; background:#1f5fbf; opacity:.3; }

.grad-text { background:linear-gradient(120deg,var(--teal-bright),var(--teal-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.danger-text { background:linear-gradient(120deg,var(--danger-soft),var(--danger)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* CTA (shared) */
.cta {
    display:block; width:100%; font-family:var(--font-display); font-weight:700;
    font-size:clamp(.95rem,2.8vw,1.06rem); color:#062018; padding:clamp(.8rem,2.4vw,1rem);
    border-radius:999px; text-align:center;
    background:linear-gradient(135deg,var(--teal-bright),var(--teal) 55%,var(--teal-deep));
    box-shadow:0 12px 30px -8px rgba(110,231,212,.6); transition:transform .15s,box-shadow .2s;
}
.cta:hover { transform:translateY(-2px); box-shadow:0 18px 40px -8px rgba(110,231,212,.78); }

/* =================================================================
   LAYER 1 — Description page
   ================================================================= */
.page {
    position:relative; z-index:2; height:100%; width:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(10px,2.4vw,18px); text-align:center;
    padding:clamp(18px,4vw,34px); max-width:680px; margin:0 auto;
}
.page__top {
    position:absolute; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:clamp(12px,3vw,18px) clamp(16px,4vw,28px);
}
.brand { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-weight:600; font-size:clamp(.95rem,2.6vw,1.1rem); }
.brand strong { font-weight:800; } .brand__logo { color:var(--teal); }
.brand__img { height:clamp(20px,5vw,26px); width:auto; display:block; }
.flag {
    display:inline-flex; align-items:center; gap:.45rem;
    font-family:var(--font-display); font-weight:700; font-size:clamp(.6rem,1.7vw,.7rem); letter-spacing:.06em;
    color:var(--teal-bright); background:rgba(110,231,212,.12); border:1px solid var(--line);
    padding:.35rem .7rem; border-radius:999px;
}
.flag__dot { width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 2s infinite; }

.pill {
    display:inline-block; font-size:clamp(.72rem,2vw,.82rem); color:var(--teal-bright);
    background:rgba(110,231,212,.08); border:1px solid var(--line);
    padding:.4rem .85rem; border-radius:999px; margin-bottom:clamp(4px,1.5vw,10px);
}
.page__title { font-family:var(--font-display); font-weight:800; letter-spacing:-.02em;
    font-size:clamp(1.6rem,6vw,2.6rem); line-height:1.08; }
.page__sub { color:var(--muted); font-size:clamp(.88rem,2.6vw,1.05rem); max-width:42ch; margin:.4rem auto 0; }

.chips { display:flex; flex-wrap:wrap; gap:.5rem .6rem; justify-content:center; list-style:none; }
.chips li {
    display:inline-flex; align-items:center; gap:.4rem;
    background:linear-gradient(160deg,var(--surface),rgba(15,33,56,.5)); border:1px solid var(--line);
    border-radius:999px; padding:.45rem .8rem; font-size:clamp(.76rem,2.2vw,.88rem); font-weight:500; color:var(--text);
}
.chips li span { font-size:1.05em; }

.cta--lg { width:auto; min-width:min(320px,80%); padding:clamp(.9rem,2.6vw,1.1rem) clamp(1.6rem,5vw,2.4rem); }

/* Platform logos — uniform size for any webp/svg/png */
.platforms { display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.platforms__label { font-family:var(--font-display); font-weight:700; font-size:clamp(.6rem,1.8vw,.68rem);
    letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.platforms__icons { display:flex; align-items:center; gap:clamp(.9rem,3.5vw,1.5rem); }
.platforms__icon { display:inline-flex; align-items:center; justify-content:center;
    height:clamp(22px,5.5vw,28px); transition:transform .2s, opacity .2s; cursor:default; }
.platforms__icon:hover { transform:translateY(-2px); }
/* Same height for every logo; width adapts, capped so wide marks stay tidy */
.platforms__icon img,
.platforms__icon svg {
    height:100%; width:auto; max-width:46px; object-fit:contain; display:block;
}

/* =================================================================
   LAYER 2 — Full-iframe popup
   ================================================================= */
.overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:clamp(14px,4vw,28px); }
.overlay[hidden] { display:none; }
.overlay__backdrop { position:absolute; inset:0; background:rgba(4,10,20,.72); backdrop-filter:blur(5px); }

.popup {
    position:relative; width:min(460px,100%); max-height:100%;
    background:linear-gradient(165deg,#112a47 0%,#0a1828 100%);
    border:1px solid rgba(255,91,110,.24); border-radius:22px;
    padding:clamp(20px,4vw,30px) clamp(18px,4vw,30px) clamp(14px,3vw,20px);
    text-align:center; overflow:auto;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Open / close animation states (driven by JS) */
.overlay.is-in .overlay__backdrop  { animation:fade-in .3s ease both; }
.overlay.is-in .popup              { animation:pop-in .42s cubic-bezier(.18,.9,.32,1.4) both; }
.overlay.is-out .overlay__backdrop { animation:fade-out .3s ease both; }
.overlay.is-out .popup             { animation:pop-out .3s ease-in both; }

.popup__close { position:absolute; top:12px; right:14px; background:none; border:none;
    color:var(--muted); font-size:1.3rem; line-height:1; cursor:pointer; transition:color .2s; }
.popup__close:hover { color:var(--text); }

.warn { width:clamp(46px,11vw,56px); height:clamp(46px,11vw,56px); margin:0 auto clamp(8px,2vw,12px);
    border-radius:50%; background:radial-gradient(circle at 50% 35%,#3a3326,#241f17);
    border:1px solid rgba(255,180,67,.4); display:grid; place-items:center;
    box-shadow:0 0 0 0 rgba(255,180,67,.45); animation:pulse-amber 2s infinite; }
.warn__ico { color:var(--amber); font-weight:800; font-size:clamp(1.3rem,4vw,1.6rem); font-family:var(--font-display); }

.popup__title { font-family:var(--font-display); font-weight:800; letter-spacing:-.01em;
    font-size:clamp(1.25rem,4.4vw,1.6rem); line-height:1.14; margin-bottom:clamp(10px,2.4vw,14px); }

.ip-tag { display:inline-flex; align-items:center; gap:.5rem; max-width:100%;
    background:rgba(255,91,110,.1); border:1px solid rgba(255,91,110,.32); border-radius:12px;
    padding:.5rem .8rem; margin-bottom:clamp(10px,2.2vw,14px); animation:ip-glow 2.6s ease-in-out infinite; }
.ip-tag__label { font-family:var(--font-display); font-weight:700; font-size:.68rem; letter-spacing:.05em;
    color:var(--danger-soft); background:rgba(255,91,110,.2); padding:.15rem .45rem; border-radius:6px; }
.ip-tag__value { font-family:var(--font-mono); font-weight:700; font-size:clamp(.85rem,2.6vw,1rem);
    color:var(--danger); letter-spacing:.4px; word-break:break-all; }
.ip-tag__state { font-family:var(--font-display); font-weight:700; font-size:.6rem; letter-spacing:.05em;
    color:var(--danger-soft); border-left:1px solid rgba(255,91,110,.3); padding-left:.5rem; text-transform:uppercase; }

/* Location tag (only rendered when country is detected) */
.geo-tag { display:inline-flex; align-items:center; gap:.5rem; max-width:100%;
    background:rgba(110,231,212,.08); border:1px solid var(--line); border-radius:12px;
    padding:.4rem .75rem; margin:0 0 clamp(10px,2.2vw,14px); }
.geo-tag__flag { font-size:1.05rem; line-height:1; }
.geo-tag__name { font-family:var(--font-display); font-weight:700; font-size:clamp(.8rem,2.4vw,.92rem); color:var(--text); }
.geo-tag__state { font-family:var(--font-display); font-weight:700; font-size:.6rem; letter-spacing:.05em;
    color:var(--muted); border-left:1px solid var(--line); padding-left:.5rem; text-transform:uppercase; }

.popup__text { color:var(--muted); font-size:clamp(.82rem,2.4vw,.92rem); max-width:36ch; margin:0 auto clamp(12px,2.6vw,16px); }

/* Limited-time label (replaces the countdown) */
.limited { display:inline-flex; align-items:center; gap:.4rem;
    font-family:var(--font-display); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    font-size:clamp(.66rem,2vw,.76rem); color:var(--amber);
    background:rgba(255,180,67,.1); border:1px solid rgba(255,180,67,.3);
    padding:.4rem .85rem; border-radius:999px; margin-bottom:clamp(12px,2.6vw,16px); }

.popup__decline { background:none; border:none; cursor:pointer; color:var(--muted-2);
    font-size:.84rem; margin-top:.85rem; font-family:var(--font-body); transition:color .2s; }
.popup__decline:hover { color:var(--muted); }

/* =================================================================
   ANIMATIONS
   ================================================================= */
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(110,231,212,.5);} 70%{box-shadow:0 0 0 7px rgba(110,231,212,0);} 100%{box-shadow:0 0 0 0 rgba(110,231,212,0);} }
@keyframes pulse-amber { 0%{box-shadow:0 0 0 0 rgba(255,180,67,.4);} 70%{box-shadow:0 0 0 12px rgba(255,180,67,0);} 100%{box-shadow:0 0 0 0 rgba(255,180,67,0);} }
@keyframes ip-glow { 0%,100%{box-shadow:0 0 0 0 rgba(255,91,110,0);} 50%{box-shadow:0 0 22px -4px rgba(255,91,110,.5);} }
@keyframes fade-in { from{opacity:0;} to{opacity:1;} }
@keyframes fade-out { from{opacity:1;} to{opacity:0;} }
@keyframes pop-in { 0%{opacity:0; transform:translateY(20px) scale(.93);} 100%{opacity:1; transform:translateY(0) scale(1);} }
@keyframes pop-out { 0%{opacity:1; transform:translateY(0) scale(1);} 100%{opacity:0; transform:translateY(14px) scale(.95);} }

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

/* Tighten on short embeds */
@media (max-height: 520px) {
    .page__top { position:static; }
    .pill, .popup__text, .geo-tag, .platforms__label { display:none; }
    .warn { width:42px; height:42px; }
}