*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{overflow-x:hidden;}
:root{
  --white:#ffffff;
  --off:#f5f7ff;
  --soft:#eaedfa;
  --accent:#3b5bdb;
  --accent-l:#dde3ff;
  --accent-m:#91a7ff;
  --text:#0d1b4b;
  --muted:#5c6b9e;
  --border:#dde3f0;
  --ok:#0ca678;
  --ok-l:#d3f9ef;
  --tg:#229ed9;
}

body{font-family:'DM Sans',sans-serif;background:var(--off);color:var(--text);min-height:100vh;overflow-x:hidden;}

/* NAV */
nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:0 1.5rem;height:60px;
  background:rgba(245,247,255,0.88);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.nav-inner{max-width:1080px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.2rem;color:var(--text);letter-spacing:-0.02em;white-space:nowrap}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:.5rem;flex-shrink:0}
.nav-btn{
  font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500;
  padding:.4rem 1rem;border-radius:100px;
  text-decoration:none;cursor:pointer;border:none;
  transition:background .2s,color .2s,transform .2s;
  display:inline-flex;align-items:center;white-space:nowrap;
}
.nav-btn-out{background:transparent;color:var(--text);border:1px solid var(--border)}
.nav-btn-out:hover{border-color:var(--accent);color:var(--accent)}
.nav-btn-fill{background:var(--accent);color:#fff}
.nav-btn-fill:hover{background:#2d4ac7;transform:translateY(-1px)}

/* HERO */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:7rem 1.5rem 4rem;position:relative;
}
.blob{
  position:absolute;width:100%;max-width:800px;height:600px;
  background:radial-gradient(ellipse,#dde3ff 0%,transparent 68%);
  border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:0;
}
.hero>*{z-index:1}

.alive{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.8rem;font-weight:500;color:var(--ok);
  background:var(--ok-l);padding:.35rem .9rem;border-radius:100px;
  margin-bottom:1.75rem;animation:up .55s ease both;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

h1{
  font-family:'Syne',sans-serif;
  font-size:clamp(2.6rem,6vw,4.8rem);
  font-weight:800;line-height:1.05;letter-spacing:-.03em;
  margin-bottom:1.2rem;animation:up .55s .1s ease both;
}
h1 em{font-style:normal;color:var(--accent)}

.sub{
  font-size:1.05rem;font-weight:300;color:var(--muted);
  max-width:440px;line-height:1.7;margin-bottom:2.5rem;
  animation:up .55s .2s ease both;
}

.ctas{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;animation:up .55s .3s ease both}

.btn-dark{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--text);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:500;
  padding:.82rem 1.7rem;border-radius:100px;
  text-decoration:none;border:none;cursor:pointer;
  transition:transform .2s,background .2s;
}
.btn-dark:hover{background:var(--accent);transform:translateY(-2px)}

.btn-out{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--white);color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:500;
  padding:.82rem 1.7rem;border-radius:100px;
  text-decoration:none;border:1px solid var(--border);
  cursor:pointer;transition:transform .2s,border-color .2s;
}
.btn-out:hover{border-color:var(--accent);transform:translateY(-2px)}

/* PROXY BLOCK */
.proxy-wrap{display:block;width:100%;background:var(--white);padding:5rem 1.5rem;box-sizing:border-box}
.proxy-wrap>.label,.proxy-wrap>.sec-title,.proxy-wrap>.sec-sub,.proxy-wrap>.card{max-width:680px;margin-left:auto;margin-right:auto;display:block}

.label{
  font-family:'Syne',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin-bottom:.6rem;text-align:center;
}
.sec-title{
  font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:700;text-align:center;letter-spacing:-.02em;margin-bottom:.65rem;
}
.sec-sub{text-align:center;color:var(--muted);font-weight:300;margin-bottom:2.5rem;font-size:.98rem}

.card{
  background:var(--white);border:1px solid var(--border);
  border-radius:22px;padding:2rem;
  animation:up .5s ease both;
  transition:box-shadow .25s,transform .25s;
  box-sizing:border-box;width:100%;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(59,91,219,.09)}

.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:.5rem}
.card-name{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.badge-ok{font-size:.7rem;font-weight:500;padding:.25rem .65rem;border-radius:100px;background:var(--ok-l);color:var(--ok)}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.4rem}
.field{background:var(--soft);border-radius:13px;padding:.7rem 1rem}
.fl{font-size:.68rem;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.2rem}
.fv{font-size:.87rem;font-weight:500;color:var(--text);word-break:break-all}

.actions{display:flex;gap:.65rem;flex-wrap:wrap}

.copy{
  flex:1;min-width:130px;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--accent-l);color:var(--accent);
  font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500;
  padding:.68rem 1rem;border-radius:100px;border:none;cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.copy:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}

.tgbtn{
  flex:1;min-width:130px;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--tg);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500;
  padding:.68rem 1rem;border-radius:100px;border:none;cursor:pointer;
  text-decoration:none;transition:opacity .2s,transform .2s;
}
.tgbtn:hover{opacity:.82;transform:translateY(-1px)}

/* FEATURES */
.features{padding:5rem 1.5rem;background:var(--white)}
.features-in{max-width:860px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem;margin-top:2.5rem}
.fc{background:var(--off);border:1px solid var(--border);border-radius:16px;padding:1.4rem;transition:transform .2s}
.fc:hover{transform:translateY(-3px)}
.fi{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:.9rem}
.fi-b{background:var(--accent-l)}
.fi-g{background:var(--ok-l)}
.fi-t{background:#e0f4fc}
.fi-s{background:var(--soft)}
.ft{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;margin-bottom:.35rem}
.fd{font-size:.86rem;color:var(--muted);line-height:1.6;font-weight:300}

/* HOW TO */
.howto{padding:5rem 1.5rem;max-width:620px;margin:0 auto}
.steps{margin-top:2.5rem;display:flex;flex-direction:column}
.step{display:flex;gap:1.2rem;align-items:flex-start;padding-bottom:2rem;position:relative}
.step:not(:last-child)::after{content:'';position:absolute;left:18px;top:42px;bottom:0;width:1px;background:var(--border)}
.snum{width:38px;height:38px;min-width:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;z-index:1}
.stitle{font-family:'Syne',sans-serif;font-size:.98rem;font-weight:700;margin-bottom:.3rem;padding-top:.45rem}
.sdesc{font-size:.88rem;color:var(--muted);font-weight:300;line-height:1.65}

/* FOOTER */
footer{background:var(--text);color:#fff;text-align:center;padding:2.5rem 1.5rem}
footer .logo{color:#fff}
footer p{margin-top:.7rem;font-size:.83rem;color:rgba(255,255,255,.4);font-weight:300}

/* TOAST */
.toast{
  position:fixed;bottom:2rem;left:50%;
  transform:translateX(-50%) translateY(60px);
  background:var(--text);color:#fff;
  padding:.72rem 1.5rem;border-radius:100px;
  font-size:.875rem;font-weight:500;
  z-index:999;opacity:0;pointer-events:none;
  transition:transform .3s,opacity .3s;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* HAMBURGER */
.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;
  border-radius:8px;transition:background .2s;flex-shrink:0;
}
.burger:hover{background:var(--accent-l)}
.burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s,width .3s}
.burger span:nth-child(3){width:60%}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){width:100%;transform:translateY(-7px) rotate(-45deg)}

.dropdown{
  display:none;position:absolute;top:60px;left:0;right:0;
  background:rgba(245,247,255,0.97);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  flex-direction:column;padding:.75rem 1rem;gap:.5rem;
}
.dropdown.open{display:flex}
.dropdown .nav-btn{justify-content:center;border-radius:12px;padding:.65rem 1rem}

/* MOBILE */
@media(max-width:520px){
  nav{padding:0 1rem}
  .nav-inner{max-width:100%;gap:.5rem}
  .nav-links{display:none}
  .burger{display:flex}
  .proxy-wrap{padding:3rem 1rem}
  .card{padding:1.25rem}
  .fields{grid-template-columns:1fr}
  .fields .field[style*="span 2"]{grid-column:span 1}
  .actions{flex-direction:column}
  .vpn-promo{padding:2rem 1rem}
  .features{padding:3rem 1rem}
  .howto{padding:3rem 1rem}
}

/* VPN PROMO */
.vpn-promo{padding:4rem 1.5rem;background:var(--off)}
.vpn-wrap{max-width:680px;margin:0 auto}
.vpn-card{
  background:linear-gradient(135deg,#1e3a8a 0%,#3b5bdb 100%);
  border-radius:24px;padding:2.5rem 2rem;
  text-align:center;position:relative;overflow:hidden;
}
.vpn-orb{position:absolute;border-radius:50%;pointer-events:none}
.vpn-orb-1{width:300px;height:300px;background:rgba(255,255,255,.05);top:-80px;right:-80px}
.vpn-orb-2{width:200px;height:200px;background:rgba(255,255,255,.04);bottom:-60px;left:-40px}
.vpn-inner{position:relative;z-index:1}
.vpn-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.75rem;font-weight:500;
  background:rgba(255,255,255,.15);color:#fff;
  padding:.3rem .8rem;border-radius:100px;margin-bottom:1.2rem;
}
.vpn-title{
  font-family:'Syne',sans-serif;font-size:clamp(1.4rem,3vw,2rem);
  font-weight:800;color:#fff;letter-spacing:-.02em;
  margin-bottom:.75rem;line-height:1.15;
}
.vpn-desc{
  font-size:.95rem;color:rgba(255,255,255,.75);font-weight:300;
  line-height:1.65;max-width:420px;margin:0 auto 1.75rem;
}
.vpn-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;color:#1e3a8a;
  font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:500;
  padding:.82rem 1.8rem;border-radius:100px;
  text-decoration:none;transition:transform .2s,opacity .2s;
}
.vpn-btn:hover{transform:translateY(-2px);opacity:.9}

/* secret field full width */
.secret-field{grid-column:span 2}
@media(max-width:520px){
  .secret-field{grid-column:span 1}
}