/* =========================================================
   NEEDLE VPN — FINAL CLEANUP
   ========================================================= */

.login { display: none !important; }

.hero {
  min-height: 820px;
  padding-top: 82px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 46%, rgba(0,214,196,.12), transparent 29%),
    radial-gradient(circle at 17% 48%, rgba(34,241,190,.035), transparent 30%);
}

.hero-grid { min-height: 738px; grid-template-columns: 50% 50%; }
.hero-copy { position: relative; z-index: 10; padding-bottom: 25px; }
.hero h1 { max-width: 720px; margin-bottom: 22px; }
.hero .lead { max-width: 430px; margin-bottom: 0; font-size: 17px; line-height: 1.6; color: #8d9b9d; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 27px; }
.hero-actions .btn { min-width: 190px; }
.platforms { margin-top: 22px; }

.hero-art {
  height: 650px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.hero-art::before {
  content: "";
  position: absolute;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  background: rgba(0,218,199,.11);
  filter: blur(85px);
  opacity: .9;
  z-index: 0;
}

.hero-art::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 110px;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  background: rgba(0,218,199,.08);
  filter: blur(55px);
  z-index: 0;
}

.hero-ring {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(11,215,194,.16);
  box-shadow: 0 0 90px rgba(0,217,201,.07), inset 0 0 90px rgba(0,217,201,.035);
  z-index: 1;
}

.hero-photo {
  position: relative;
  z-index: 4;
  width: 390px;
  height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(18px) translateY(5px);
  filter: drop-shadow(0 35px 45px rgba(0,0,0,.58)) drop-shadow(0 0 35px rgba(0,215,195,.09));
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.hero-photo::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 2%;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(2,9,13,.72));
  filter: blur(18px);
  pointer-events: none;
  z-index: 5;
}

.hero-badge, .hero-server {
  z-index: 8;
  border: 1px solid rgba(18,218,199,.18);
  background: rgba(4,18,22,.82);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0,0,0,.28), 0 0 30px rgba(0,215,195,.04);
}

.hero-badge { right: 3%; top: 19%; padding: 12px 15px; }
.hero-server { left: 2%; bottom: 15%; padding: 10px 13px; }

.feature-strip { margin-top: 0; }
.feature-strip p { max-width: 190px; }

.about { padding-top: 120px; }
.about-copy > p { max-width: 480px; }
.mini-stats { grid-template-columns: repeat(2, minmax(0,150px)); }

.server-note {
  margin-top: 7px;
  padding: 15px 17px;
  color: #637779;
  font-size: 11px;
  line-height: 1.5;
  border-left: 2px solid #0ed4bd;
  background: rgba(7,18,22,.45);
}

.server-card { transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.server-card:hover { transform: translateX(2px); }

.pricing {
  background: linear-gradient(180deg, transparent, rgba(4,16,20,.65) 50%, transparent);
}

.premium-layout { grid-template-columns: .9fr 1.1fr; }
.premium-copy { padding: 38px; }
.premium-card { background: #111b21; }
.premium-row { padding: 20px 27px; }
.premium-card > p { margin-top: 18px; }
.premium-preview { display: none !important; }

.faq-item { transition: border-color .2s ease, background .2s ease; }
.faq-item:hover { border-color: rgba(18,218,199,.18); }

.cta {
  background:
    radial-gradient(circle at 78% 50%, rgba(7,215,196,.13), transparent 32%),
    linear-gradient(120deg, #07171b, #071014);
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 60px; padding-bottom: 0; }
  .hero-art { height: 560px; margin-top: -10px; }
  .hero-photo { transform: translateY(0); }
  .hero-badge { right: 8%; }
  .hero-server { left: 8%; }
  .premium-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero { min-height: 0; padding-top: 70px; }
  .hero-copy { padding-top: 50px; }
  .hero h1 { font-size: 42px; letter-spacing: -2px; }
  .hero .lead { font-size: 15px; max-width: 330px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-art { height: 485px; margin-top: 5px; }
  .hero-ring { width: 350px; height: 350px; }
  .hero-art::before { width: 300px; height: 300px; }
  .hero-photo { width: 290px; height: 475px; transform: translateY(0); }
  .hero-badge { right: 0; top: 14%; padding: 10px 12px; }
  .hero-server { left: 0; bottom: 9%; }
  .mini-stats { grid-template-columns: repeat(2,1fr); }
  .premium-copy { padding: 25px; }
}