/* QuantVPN style.css – only styles used by index.html and servers.html.
   Sections are labelled with "=== NAME ===" comments. The file is layered: later blocks refine earlier ones,
   so a section name can appear more than once (e.g. HERO base styles first, hero tweaks later).
   Order: base & navbar → hero → jurisdiction → how/features/privacy → compare table
          → pricing/FAQ/support → servers page → footer → hover/glow effects. */

/* ================= BASE & SHARED ELEMENTS ================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --orange: #ff800a;
  --orange-dark: #e66f00;
  --navy: #09284b;
  --text: #55708d;
  --light: #fff8ef;
  --border: #dce5ed;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", Arial, sans-serif;
  color: var(--navy);
  background: #fff;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ================= NAVBAR ================= */

.navbar {
  height: 68px;
  padding: 0 6.8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 8px rgba(8, 40, 75, .05);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
}

.brand-logo {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--orange);
  border-radius: 8px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(255, 128, 10, .2);
}

.nav-links {
  display: flex;
  gap: 30px;
  margin-left: auto;
  margin-right: 35px;
}

.nav-links a {
  color: #526a84;
  font-size: 14px;
  font-weight: 500;
  padding: 23px 0 19px;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-cta,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #ff791f, #ff5f0a);
  color: #fff;
  font-weight: 700;
  border-radius: 28px;
  box-shadow: 0 8px 18px rgba(255, 107, 22, .18);
  transition: .2s ease;
}

.nav-cta {
  padding: 11px 20px;
  font-size: 13px;
}

/* ================= BUTTONS ================= */

.primary-btn {
  padding: 13px 25px;
  border: none;
  font-size: 14px;
}

.primary-btn:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 22px rgba(255, 107, 22, .27);
}

/* ================= NAVBAR ================= */

.menu-btn {
  display: none;
  background: none;
  border: 0;
  font-size: 25px;
  color: var(--navy);
}

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */

.hero {
  width: calc(100% - 30px);
  max-width: 1300px;
  min-height: 455px;
  margin: 0 auto;
  padding: 48px 5.2%;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(circle at 78% 50%, #fff1df 0, #fff8ef 34%, #fffaf5 75%);
  display: flex;
  align-items: center;
  position: relative;
}

.hero-content {
  width: 52%;
  position: relative;
  z-index: 3;
}

/* ================= BASE & SHARED ELEMENTS ================= */

h1 {
  font-size: clamp(42px, 4.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -2.3px;
  margin-bottom: 12px;
}

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */

.refund {
  width: 325px;
  background: #fff0dd;
  border: 1px solid #f6c996;
  border-radius: 25px;
  padding: 7px 18px;
  margin-bottom: 14px;
  color: var(--navy);
}

.hero-art {
  width: 48%;
  height: 410px;
  position: relative;
}

.phone {
  width: 175px;
  height: 330px;
  position: absolute;
  left: 18%;
  top: 43px;
  border: 8px solid #182b3d;
  border-radius: 30px;
  padding: 19px 12px 10px;
  background: linear-gradient(#ff711b 0 37%, #fff 37%);
  color: var(--navy);
  transform: rotate(-8deg);
  box-shadow: 0 22px 35px rgba(20, 54, 82, .28);
  z-index: 4;
}

.phone h3 {
  color: #fff;
  text-align: center;
  font-size: 15px;
  margin-bottom: 14px;
}

.connected,
.country {
  background: #fff;
  border-radius: 9px;
  padding: 8px;
  font-size: 8px;
  margin-bottom: 7px;
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
}

.connected {
  display: flex;
  justify-content: space-between;
  color: #15975c;
}

.connected b {
  color: #1dbb75;
}

.country {
  display: flex;
  justify-content: space-between;
}

.speed {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  padding: 6px;
}

.speed b {
  font-size: 8px;
}

.comparison {
  padding: 38px 3%;
  background: #fff;
}

/* ================= BASE & SHARED ELEMENTS ================= */

.section-heading {
  text-align: center;
  margin-bottom: 27px;
}

.section-heading h2,
.servers h2,
.support h2 {
  font-size: 32px;
  letter-spacing: -.9px;
}

.section-heading p,
.servers p,
.support p {
  color: #7690a8;
  font-size: 15px;
}

/* ================= COMPARISON TABLE ================= */

.table-wrap {
  max-width: 1230px;
  margin: auto;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 13px;
}

/* ================= BASE & SHARED ELEMENTS ================= */

table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 12px;
}

th, td {
  padding: 11px 13px;
  text-align: center;
  border-bottom: 1px solid #e4ebf0;
  color: #688198;
}

th:first-child,
td:first-child {
  text-align: left;
  color: #526b84;
}

th {
  height: 61px;
  background: #f7fafc;
  color: #526b84;
}

.servers {
  max-width: 1170px;
  min-height: 260px;
  margin: 0 auto 40px;
  padding: 30px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ================= BUTTONS ================= */

.outline-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 21px;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  border-radius: 25px;
  font-weight: 700;
  font-size: 13px;
}

/* ================= SUPPORT & SERVERS BANNER ================= */

.support {
  padding: 70px 20px;
  text-align: center;
  background: #fff8ef;
}

.support p {
  margin: 7px 0 20px;
}

footer {
  padding: 25px 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e4ebf0;
}

footer .brand {
  font-size: 20px;
}

footer .brand-logo {
  width: 30px;
  height: 30px;
}

footer p {
  color: #7990a6;
  font-size: 12px;
}

@media (max-width: 1000px) {
  .nav-links {
    gap: 16px;
    margin-right: 10px;
  }

  .hero {
    padding-left: 4%;
  }

  .hero-art {
    transform: scale(.88);
    transform-origin: center right;
  }
}

@media (max-width: 760px) {
  .navbar {
    padding: 0 20px;
  }

  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    padding: 15px 25px;
    background: #fff;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
  }

  .nav-links.show {
    display: flex;
  }

  .nav-links a {
    padding: 13px 0;
  }

  .nav-cta {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .brand {
    font-size: 23px;
  }

  .hero {
    width: 100%;
    border-radius: 0;
    padding: 35px 25px;
    display: block;
    min-height: auto;
  }

  .hero-content {
    width: 100%;
  }

  h1 {
    font-size: 43px;
  }

  .hero-art {
    width: 100%;
    height: 300px;
    transform: none;
  }

  .phone {
    left: 27%;
    top: 18px;
    transform: rotate(-8deg) scale(.84);
  }

  .comparison {
    padding: 35px 15px;
  }

  .servers {
    padding: 25px;
    display: block;
    text-align: center;
  }

  footer {
    display: block;
    text-align: center;
  }

  footer p {
    margin-top: 12px;
  }
}


/* Generated QuantVPN hero image */

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.hero-image-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}
@media (max-width: 900px) {
  .hero-image-art { min-height: auto; margin-top: 24px; }
}

/* Proton-inspired information architecture for QuantVPN (original design, no copied branding) */

/* ================= BASE & SHARED ELEMENTS ================= */
.eyebrow {
  color: var(--orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

/* ================= FEATURES & PRIVACY SECTIONS ================= */

.features-section,
.pricing-section,
.faq-section {
  padding: 76px 5%;
}

.features-section { background: #f8fbfd; }

.feature-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.feature-card {
  background: #fff;
  border: 1px solid #e0e8ee;
  border-radius: 18px;
  padding: 25px;
  min-height: 225px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(9,40,75,.08); border-color: #ffc48e; }
.feature-card.featured { border-top: 3px solid var(--orange); }
.feature-icon { font-size: 29px; margin-bottom: 17px; }
.feature-card h3 { font-size: 18px; margin-bottom: 8px; }
.feature-card p { color: #71889e; font-size: 13px; line-height: 1.7; }
.feature-tag { display: inline-block; margin-top: 16px; padding: 5px 10px; border-radius: 20px; background: #fff1e4; color: var(--orange); font-size: 10px; font-weight: 800; }

.security-panel {
  max-width: 1180px;
  margin: 26px auto 0;
  padding: 32px 38px;
  border-radius: 20px;
  background: linear-gradient(135deg, #09284b, #123f69);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.security-panel h3 { font-size: 27px; margin-bottom: 8px; }
.security-panel p { color: #c9d8e5; max-width: 650px; font-size: 13px; }
.security-panel .eyebrow { color: #ffb067; }
.security-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 25px; color: #fff; font-size: 12px; white-space: nowrap; }

/* ================= DOWNLOAD / APP STORE BUTTONS ================= */

.platforms {
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
.platform-copy { flex: 1; }
.platforms h2 { font-size: 36px; letter-spacing: -1px; margin-bottom: 10px; }
.platform-copy > p { color: #70879d; max-width: 600px; font-size: 14px; }
.platform-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; max-width: 470px; }
.platform-btn { border: 1px solid #dbe4eb; border-radius: 12px; padding: 13px 16px; background: #fff; transition: .2s ease; }
.platform-btn:hover { border-color: var(--orange); transform: translateY(-2px); }
.platform-btn strong, .platform-btn small { display: block; }
.platform-btn strong { font-size: 13px; }
.platform-btn small { color: #8a9bac; margin-top: 2px; font-size: 10px; }

/* ================= PRICING ================= */

.pricing-section { background: #fff; }
.pricing-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plan-card { position: relative; border: 1px solid #dfe7ed; border-radius: 18px; padding: 30px; background: #fff; }
.plan-card.popular { border: 2px solid var(--orange); box-shadow: 0 18px 45px rgba(255,128,10,.13); transform: translateY(-7px); }
.popular-label { position: absolute; right: 20px; top: 18px; color: var(--orange); font-size: 9px; font-weight: 800; }
.plan-card h3 { font-size: 22px; }
.plan-sub { color: #8093a5; font-size: 12px; margin-top: 3px; }
.plan-price { font-size: 30px; font-weight: 800; margin: 25px 0; }
.plan-price small { color: #8799aa; font-size: 11px; font-weight: 500; }
.plan-card ul { list-style: none; margin-bottom: 25px; }
.plan-card li { color: #5f768c; font-size: 12px; padding: 8px 0; border-bottom: 1px solid #edf1f4; }
.plan-card .outline-btn, .plan-card .primary-btn { width: 100%; text-align: center; }

/* ================= FAQ ================= */

.faq-section { background: #f8fbfd; }
.faq-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq-grid details { background: #fff; border: 1px solid #dfe7ed; border-radius: 13px; padding: 17px 20px; }
.faq-grid summary { cursor: pointer; font-weight: 700; font-size: 13px; list-style: none; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: '+'; float: right; color: var(--orange); font-size: 18px; }
.faq-grid details[open] summary::after { content: '−'; }
.faq-grid details p { color: #71879b; font-size: 12px; line-height: 1.7; padding-top: 12px; }

@media (max-width: 900px) {
  .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #fff; padding: 10px 7%; flex-direction: column; gap: 0; margin: 0; box-shadow: 0 10px 20px rgba(9,40,75,.08); }
  .nav-links.show { display: flex; }
  .nav-links a { padding: 13px 0; }
  .menu-btn { display: block; }
  .feature-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .security-panel, .platforms { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .hero { width: calc(100% - 16px); padding: 35px 7%; min-height: auto; }
  .hero-content { width: 100%; }
  .hero-art { display: none; }
   .feature-grid, .pricing-grid, .faq-grid { grid-template-columns: 1fr; }
   .refund { width: 100%; }
  .security-panel { padding: 25px; }
  .security-points { grid-template-columns: 1fr; white-space: normal; }
  .platforms { padding: 60px 6%; }
  .platform-buttons { grid-template-columns: 1fr; }
}

/* ---- Added sections ---- */

/* ================= HOW IT WORKS & INFO CARDS ================= */
.how-section,.privacy-section,.stream-section,.compare-section{padding:72px 6.8%}

/* ================= FEATURES & PRIVACY SECTIONS ================= */
.privacy-section,.compare-section{background:var(--light)}

/* ================= HOW IT WORKS & INFO CARDS ================= */
.steps-grid,.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.step,.info-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px}
.step h3,.info-card h3{margin-bottom:8px}
.step p,.info-card p{color:var(--text)}
.info-card em{color:var(--orange-dark);font-style:normal;font-size:.9em}
.step-num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;font-weight:700;margin-bottom:14px}

/* ================= STREAMING CHIPS ================= */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.chips span{padding:10px 20px;border:1px solid var(--border);border-radius:999px;font-weight:600;background:#fff}

/* ================= COMPARISON TABLE ================= */
.table-wrap{overflow-x:auto;margin-top:28px}
.compare-table{width:100%;max-width:820px;margin:0 auto;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}
.compare-table th,.compare-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border)}
.compare-table .hl{background:#fff1e0;font-weight:700;color:var(--orange-dark)}

/* ================= HOW IT WORKS & INFO CARDS ================= */
.info-card small{color:var(--text)}

/* ================= FOOTER ================= */
.site-footer{background:var(--navy);color:#cfdbe8;padding:56px 6.8% 24px;display:block;text-align:left}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px}
.site-footer h4{color:#fff;margin-bottom:12px}
.site-footer a{display:block;margin-bottom:8px;color:#cfdbe8}
.site-footer a:hover{color:var(--orange)}
.site-footer .brand span{color:#fff}
.copyright{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);font-size:.9rem}
@media(max-width:860px){.steps-grid,.three-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}

/* ---- Hero animation ---- */

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.hero-visual{position:relative;width:100%;max-width:480px;aspect-ratio:1;margin:0 auto}
.hv-svg{position:absolute;inset:0;width:100%;height:100%}
.ring{fill:none;stroke:#ff800a;stroke-width:2;opacity:0;transform-origin:200px 200px;animation:pulse 3.6s ease-out infinite}
.r2{animation-delay:1.8s}
@keyframes pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.3);opacity:0}}
.orbit-path{fill:none;stroke:#dce5ed;stroke-width:1.5;stroke-dasharray:4 8}
.orbit{transform-origin:200px 200px;animation:spin 14s linear infinite}
.orbit.slow{animation-duration:22s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hv-phone{position:absolute;left:50%;top:50%;width:37%;padding:5px;background:#0d0d0d;border-radius:26px;box-shadow:0 24px 44px rgba(9,40,75,.35),0 0 0 2px #2a2a2a;transform:translate(-50%,-50%) rotate(-5deg);animation:phone 5s ease-in-out infinite}
.hv-phone img{display:block;width:100%;height:auto;border-radius:21px}
@keyframes phone{50%{transform:translate(-50%,calc(-50% - 10px)) rotate(-5deg)}}
.hv-badge{position:absolute;right:3%;top:40%;width:58px;height:58px;display:grid;place-items:center;background:#fff;border-radius:16px;box-shadow:0 12px 26px rgba(9,40,75,.18);animation:bob 4.5s ease-in-out infinite}
.hv-chip{position:absolute;background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-size:.85rem;font-weight:700;box-shadow:0 10px 24px rgba(9,40,75,.12);animation:bob 5s ease-in-out infinite}
.c1{top:10%;left:0;color:#1a9d5c}.c2{top:20%;right:0;animation-delay:1s}.c3{bottom:12%;left:4%;animation-delay:2s}
@keyframes bob{50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.ring,.orbit,.hv-phone,.hv-badge,.hv-chip{animation:none}.ring{opacity:.2}}
/* ---- Comparison table ---- */

/* ================= COMPARISON TABLE ================= */
.compare-table{max-width:1100px;min-width:780px;font-size:.93rem}
.compare-table thead th{background:var(--navy);color:#fff;white-space:nowrap}
.compare-table thead th.hl{background:var(--orange)}
.compare-table tbody th{font-weight:600;white-space:nowrap}
.compare-table td.hl{background:#fff1e0}
.compare-table .no{color:#8a9bb0}

/* ---- Professional polish ---- */

/* ================= BASE & SHARED ELEMENTS ================= */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{letter-spacing:-.02em}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip-link:focus{left:8px}
.ico{width:22px;height:22px;flex:none}

/* ================= NAVBAR ================= */
.navbar{border-bottom:1px solid var(--border);box-shadow:none}

/* ================= FEATURES & PRIVACY SECTIONS ================= */
.feature-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#fff1e0;color:var(--orange-dark);font-size:0}
.feature-card.featured .feature-icon{background:var(--orange);color:#fff}
.feature-card,.plan-card,.info-card,.step,.platform-btn{border:1px solid var(--border);box-shadow:0 1px 2px rgba(9,40,75,.04);transition:transform .2s,box-shadow .2s,border-color .2s}
.feature-card:hover,.plan-card:hover,.info-card:hover,.step:hover,.platform-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(9,40,75,.09);border-color:#f3c79a}

/* ================= BUTTONS ================= */
.primary-btn,.outline-btn,.nav-cta{transition:transform .15s,box-shadow .15s,background .15s}
.primary-btn:hover,.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(230,111,0,.28)}

/* ================= BASE & SHARED ELEMENTS ================= */
.section-heading h2{font-weight:800}
.section-heading p{max-width:640px;margin-left:auto;margin-right:auto}

/* ================= COMPARISON TABLE ================= */
.compare-table{box-shadow:0 1px 2px rgba(9,40,75,.06);border:1px solid var(--border)}
.compare-table tbody tr:nth-child(even) th,.compare-table tbody tr:nth-child(even) td:not(.hl){background:#fafcfe}

/* ================= FAQ ================= */
.faq-grid details{transition:border-color .2s}
.faq-grid details[open]{border-color:#f3c79a}

/* ================= FOOTER ================= */
.site-footer a{font-size:.95rem}

/* ---- Logo ---- */

/* ================= NAVBAR ================= */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{width:36px;height:36px;flex:none;border-radius:9px;box-shadow:0 4px 10px rgba(255,138,20,.3)}

/* ================= FOOTER ================= */
.site-footer .brand-logo{width:32px;height:32px}

/* ---- Server hero ---- */

/* ================= SUPPORT & SERVERS BANNER ================= */
.server-hero{position:relative;overflow:hidden;background:#14181b;color:#fff;text-align:center;padding:64px 6.8%}
.sh-rings{position:absolute;inset:0;width:100%;height:100%;opacity:.35;animation:rings 8s ease-in-out infinite}
@keyframes rings{50%{opacity:.6}}
.sh-content{position:relative;max-width:820px;margin:0 auto}
.server-hero h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;color:#fff;line-height:1.15;margin-bottom:12px}
.server-hero p{color:#e3e8ec;font-size:.98rem;max-width:560px;margin:0 auto 24px}

/* ================= BUTTONS ================= */
.sh-actions .primary-btn{padding:11px 22px;font-size:.95rem}
.sh-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ghost-btn{display:inline-flex;align-items:center;padding:11px 22px;border:1px solid rgba(255,255,255,.8);border-radius:10px;font-size:.95rem;color:#fff;font-weight:700;transition:background .15s}
.ghost-btn:hover{background:rgba(255,255,255,.1)}
@media(prefers-reduced-motion:reduce){.sh-rings{animation:none}}

/* ---- Server hero: brand orange ---- */

/* ================= SUPPORT & SERVERS BANNER ================= */
.server-hero{background:#ff800a}
.sh-rings{opacity:.45}
.server-hero p{color:#fff}

/* ================= BUTTONS ================= */
.sh-actions .primary-btn{background:#fff;color:#09284b;box-shadow:none}
.sh-actions .primary-btn:hover{background:#fff1e0;box-shadow:0 8px 18px rgba(9,40,75,.2)}
.ghost-btn{border-color:#fff}
.ghost-btn:hover{background:rgba(255,255,255,.18)}

/* ---- Download showcase: Windows + mobile ---- */

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.dsc{position:relative;width:100%;max-width:580px;margin:0 auto;container-type:inline-size;aspect-ratio:1.45}
.win{position:absolute;left:0;top:4cqw;width:80cqw;background:#14110e;border:1px solid #2e2822;border-radius:1.6cqw;box-shadow:0 3cqw 6cqw rgba(9,40,75,.28);overflow:hidden;color:#fff;font-size:1.9cqw;line-height:1.35}
.win-bar{display:flex;align-items:center;gap:1.2cqw;height:5.2cqw;padding:0 1.6cqw;background:#1d1915;font-weight:600;font-size:1.8cqw}
.win-bar img{width:2.8cqw;height:2.8cqw;border-radius:.6cqw}
.win-ctl{margin-left:auto;display:flex;gap:2.4cqw;color:#a79b8e}
.wc{width:1.5cqw;height:1.5cqw}
.sc-phone{position:absolute;right:0;bottom:0;width:27cqw;padding:.9cqw;background:#0d0d0d;border-radius:4.2cqw;box-shadow:0 3cqw 5cqw rgba(9,40,75,.35),0 0 0 1px #2a2a2a;transform:rotate(4deg);animation:scp 5s ease-in-out infinite}
.sc-phone img{display:block;width:100%;height:auto;border-radius:3.4cqw}
@keyframes scp{50%{transform:translateY(-1.6cqw) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.sc-phone{animation:none}}

/* ---- Windows browser showing the website ---- */
.win{background:#fff;border-color:#c9d5e0;color:var(--navy)}
.win-bar{background:#e4ebf2;color:var(--navy);height:5.4cqw;padding:0 0 0 1.6cqw}
.win-bar .tab{display:flex;align-items:center;gap:1cqw;background:#fff;border-radius:1.2cqw 1.2cqw 0 0;padding:1cqw 2cqw;margin-top:.8cqw;font-size:1.6cqw;font-weight:600}
.win-bar .tab img{width:2.2cqw;height:2.2cqw}
.win-ctl{color:#55708d;padding-right:2cqw}
.addr{display:flex;align-items:center;gap:1cqw;margin:1.2cqw 1.6cqw;padding:.9cqw 1.6cqw;background:#eef2f6;border-radius:99px;color:#55708d;font-size:1.7cqw}
.mini{padding:0 0 0}
.mini-nav{display:flex;align-items:center;gap:2.4cqw;padding:1.2cqw 2.4cqw;border-bottom:1px solid var(--border);font-size:1.6cqw;color:#55708d;font-weight:600}
.mini-nav img{width:2.6cqw;height:2.6cqw;margin-right:-1.2cqw}
.mini-nav b{color:var(--navy);font-size:1.9cqw;margin-right:auto}
.mbtn{font-style:normal;background:#ff800a;color:#fff;border-radius:1cqw;padding:.9cqw 1.8cqw;font-weight:700;display:inline-block}
.mini-hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:2cqw;padding:4cqw 3cqw;background:#fff8ef}
.mh-copy em{font-style:normal;font-size:1.3cqw;font-weight:700;color:#e66f00;background:#ffe9d0;border-radius:99px;padding:.5cqw 1.4cqw;display:inline-block;margin-bottom:1.4cqw}
.mh-copy h4{font-size:3.6cqw;line-height:1.1;letter-spacing:-.02em;margin-bottom:1.2cqw}
.mh-copy p{font-size:1.6cqw;color:#55708d;margin-bottom:2cqw}
.mh-art{display:grid;place-items:center}
.mh-circle{width:19cqw;height:19cqw;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#ffa24d,#ff800a 60%,#e66f00);box-shadow:0 0 0 1.6cqw rgba(255,128,10,.14)}
.mh-circle svg{width:9cqw;height:9cqw}
.mini-strip{display:flex;justify-content:space-around;padding:1.8cqw 2cqw;font-size:1.5cqw;font-weight:700;color:var(--navy);border-top:1px solid var(--border)}

/* ---- Windows browser: black theme ---- */
.win{background:#0b0b0c;border-color:#2a2a2d;color:#fff;box-shadow:0 3cqw 6cqw rgba(0,0,0,.45)}
.win-bar{background:#1a1a1c;color:#fff}
.win-bar .tab{background:#0b0b0c;color:#fff}
.win-ctl{color:#a8a8ad}
.addr{background:#1a1a1c;color:#a8a8ad}
.mini-nav{border-bottom:1px solid #26262a;color:#a8a8ad}
.mini-nav b{color:#fff}
.mini-hero{background:radial-gradient(circle at 80% 40%,rgba(255,128,10,.22),transparent 55%),#0b0b0c}
.mh-copy em{background:rgba(255,128,10,.16);color:#ff9a3c}
.mh-copy h4{color:#fff}
.mh-copy p{color:#b4b4ba}
.mh-circle{box-shadow:0 0 0 1.6cqw rgba(255,128,10,.16),0 0 5cqw rgba(255,128,10,.4)}
.mini-strip{border-top:1px solid #26262a;color:#e6e6ea;background:#111113}

/* ---- Phone wrapper ---- */
.hv-held{position:absolute;left:50%;top:50%;width:37%;transform:translate(-50%,-50%) rotate(-5deg);animation:phone 5s ease-in-out infinite}
.hv-held .hv-phone{position:relative;left:auto;top:auto;width:100%;transform:none;animation:none}
@media(prefers-reduced-motion:reduce){.hv-held{animation:none}}

/* ---- Animated app screen (connect loop) ---- */
.hv-phone,.sc-phone{container-type:inline-size}
.as{aspect-ratio:739/1600;background:#0c0a08;border-radius:12cqw;overflow:hidden;padding:4cqw 5cqw;display:flex;flex-direction:column;gap:3.4cqw;color:#fff;font-size:4.2cqw;line-height:1.25;text-align:left}
.as small{display:block;color:#9c9086;font-size:3.5cqw;font-weight:500}
.as-top{display:flex;justify-content:space-between;align-items:center;font-size:3.6cqw;font-weight:700;padding:0 2cqw}
.as-bat{width:6cqw;height:3cqw;border-radius:1cqw;background:#4ade80}
.as-head{display:flex;align-items:center;gap:2.4cqw;font-size:6cqw}
.as-head img{width:8cqw;height:8cqw;border-radius:2cqw}
.as-head svg{width:6cqw;height:6cqw;margin-left:auto}
.as-pw{position:relative;width:36cqw;height:36cqw;margin:2cqw auto 1cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a3431,#27221f);border:1px solid #3a342f;display:grid;place-items:center;flex:none}
.as-pw .glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a3c,#ff800a 60%,#d96a00);box-shadow:0 0 0 3cqw rgba(255,128,10,.14),0 0 10cqw rgba(255,128,10,.5);opacity:0;animation:st-on 9s infinite}
.as-spin{position:absolute;inset:-2.2cqw;border-radius:50%;border:1cqw solid transparent;border-top-color:#ff9a3c;opacity:0;animation:st-con 9s infinite,spin 1s linear infinite}
.as-pw svg{position:relative;width:14cqw;height:14cqw}
.as-cap,.as-ip>div:first-child,.as-chip{display:grid}
.as-cap{text-align:center;color:#a79b8e;min-height:11cqw;font-size:4cqw}
.as-cap>span,.as-ip>div>*:not(small),.as-chip>em{grid-area:1/1}
.as-ip{display:flex;justify-content:space-between;align-items:center;background:#17130f;border:1px solid #2e2822;border-radius:4cqw;padding:3.2cqw 4cqw}
.as-ip b{font-family:ui-monospace,Menlo,monospace;font-size:5cqw}
.as-chip em{font-style:normal;font-weight:600;font-size:3.6cqw;padding:1.6cqw 3cqw;border-radius:2.4cqw;align-self:center;justify-self:end}
.as-chip .s-off{background:#2e2819;color:#ffc857}
.as-chip .s-on{background:#16341f;color:#4ade80}
.as-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.as-tiles div{background:#17130f;border:1px solid #2e2822;border-radius:3.6cqw;padding:3cqw;font-weight:700;font-size:3.7cqw}
.as-tiles i{display:block;width:2cqw;height:2cqw;border-radius:50%;background:#ff800a;margin:0 0 3cqw auto}
.as-banner{background:#17130f;border:1px solid #2e2822;border-radius:4cqw;padding:3.4cqw 4cqw;font-size:4.6cqw}
.as-nav{margin-top:auto;display:flex;justify-content:space-around;background:#17130f;border:1px solid #2e2822;border-radius:8cqw;padding:2.4cqw;font-size:3.6cqw;font-weight:600;color:#c9c0b6}
.as-nav .on{background:#3a342f;color:#ff9a3c;border-radius:6cqw;padding:2cqw 4.5cqw}
.as-nav span{padding:2cqw 2cqw}
.s-off{opacity:1;animation:st-off 9s infinite}
.s-con{opacity:0;animation:st-con 9s infinite}
.s-on{opacity:0;animation:st-on 9s infinite}
@keyframes st-off{0%,26%{opacity:1}30%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes st-con{0%,26%{opacity:0}30%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes st-on{0%,40%{opacity:0}46%,90%{opacity:1}94%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.s-off,.s-con,.s-on,.glow,.as-spin{animation:none}}
.as-ip>div:first-child>small{grid-area:1/1}
.as-ip>div:first-child>b{grid-area:2/1}

/* ---- Servers page ---- */

/* ================= SERVERS PAGE (location list, search, filters) ================= */
.sv-hero{background:#ff800a;color:#fff;text-align:center;padding:48px 6.8% 64px}
.sv-crumb{font-size:.85rem;margin-bottom:26px;opacity:.95}
.sv-crumb a{text-decoration:underline}
.sv-hero h1{font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:800;line-height:1.12;letter-spacing:-.02em;max-width:760px;margin:0 auto 28px}
.sv-hero .primary-btn{background:#fff;color:#09284b;box-shadow:none}
.sv-hero .primary-btn:hover{background:#fff1e0}
.sv-tabs{position:sticky;top:68px;z-index:5;display:flex;gap:28px;justify-content:center;overflow-x:auto;background:#fff;border-bottom:1px solid var(--border);padding:0 6.8%}
.sv-tabs a{white-space:nowrap;padding:16px 0;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);border-bottom:3px solid transparent}
.sv-tabs a:hover{color:var(--orange-dark);border-color:var(--orange)}
.sv-list,.sv-info{padding:64px 6.8%;scroll-margin-top:120px}
.sv-list{background:#fffaf4}
.sv-list h2{text-align:center;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:22px}
.sv-info{scroll-margin-top:120px}.sv-info.alt{background:var(--light)}
.sv-legend{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text);margin-bottom:26px}
.sv-legend span{display:inline-flex;align-items:center;gap:6px}
.sv-tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;max-width:1000px;margin:0 auto 10px}
.sv-tools input{flex:1 1 240px;max-width:340px;padding:11px 16px;border:1px solid var(--border);border-radius:99px;font:inherit;background:#fff}
.sv-tools input:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px rgba(255,128,10,.18)}

/* ================= STREAMING CHIPS ================= */
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--border);background:#fff;border-radius:99px;padding:8px 16px;font:inherit;font-size:.85rem;font-weight:600;color:var(--navy);cursor:pointer;transition:background .15s}
.chip:hover{border-color:var(--orange)}.chip.on{background:var(--orange);border-color:var(--orange);color:#fff}

/* ================= SERVERS PAGE (location list, search, filters) ================= */
.sv-region{max-width:1000px;margin:34px auto 0}
.sv-region[hidden],.sv-table tr[hidden]{display:none}
.sv-region h3{text-align:center;font-size:1.5rem;margin-bottom:14px}
.sv-table{width:100%;min-width:640px;border-collapse:collapse}
.sv-table thead th{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);padding:12px 10px;border-bottom:1px solid #e6d9cb;text-align:center}
.sv-table thead th:first-child{text-align:left}
.sv-table td,.sv-table tbody th{padding:14px 10px;border-bottom:1px solid #eee3d6;text-align:center}
.sv-table tbody th{text-align:left;font-weight:600;white-space:nowrap}
.sv-table tbody tr:hover{background:#fff1e0}
.cc{display:inline-grid;place-items:center;width:30px;height:22px;margin-right:12px;border-radius:5px;background:var(--navy);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.04em}
.st{width:20px;height:20px;vertical-align:middle}
.st.ok{color:var(--orange-dark)}.st.no{color:#c0cad4}
.sv-empty{text-align:center;color:var(--text);margin-top:30px}
.sv-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1000px;margin:30px auto 0;color:var(--text);font-size:1.02rem}
@media(max-width:860px){.sv-cols{grid-template-columns:1fr}.sv-tabs{justify-content:flex-start}}


/* ---- Hero: price under phone + USP cards ---- */

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.hero-art.hero-image-art{height:auto;min-height:0;flex-direction:column;justify-content:flex-start;gap:6px}
.hero-price{position:relative;z-index:2;text-align:center}
.hp-flag{display:inline-block;background:var(--orange);color:#fff;font-size:11px;font-weight:800;letter-spacing:.4px;padding:4px 14px;border-radius:20px}
.hp-amount{margin-top:8px;font-size:clamp(40px,4.6vw,58px);font-weight:900;line-height:1;letter-spacing:-2px;color:var(--navy)}
.hp-amount small{font-size:.3em;letter-spacing:0;font-weight:700;color:var(--text)}
.hp-note{margin-top:8px;font-size:13px;color:var(--text)}
.hp-note b{color:var(--orange-dark)}

.usp-list{display:grid;gap:12px;margin-top:22px;width:100%;max-width:600px}
.usp{display:flex;flex-direction:column;min-width:0;padding:14px 18px;background:rgba(255,255,255,.55);border:1px solid #f5b983;border-left:4px solid var(--orange);border-radius:17px;color:var(--navy)}
.usp-k{font-size:11px;letter-spacing:1px;font-weight:800;color:var(--orange)}
.usp h3{margin:4px 0;font-size:18px;line-height:1.2;color:var(--navy)}
.usp p{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--text)}
.usp a{color:var(--orange-dark);font-size:12.5px;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.usp a:hover{text-decoration:underline}
.usp-code{margin-top:8px;padding:8px 10px;border:1px solid #f5b983;border-radius:10px;background:#fff1df;font:11px/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--navy)}
.usp-vs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.usp-vs div{padding:8px;border-radius:10px;background:#fff1df;text-align:center;font-size:11.5px;color:var(--text)}
.usp-vs div.us{background:#fff;border:1px solid var(--orange);color:var(--navy);font-weight:700}
.usp-vs i{display:block;font-style:normal;font-size:18px}
.usp-t{width:100%;border-collapse:collapse;font-size:12px;color:var(--navy)}
.usp-t th{padding:0 6px 4px 0;text-align:left;font-weight:700;color:var(--text)}
.usp-t td{padding:5px 6px 5px 0;border-top:1px solid #f1d6bb;vertical-align:top}
.usp-t td:first-child{color:var(--text)}
.usp-t .np{color:var(--orange-dark);font-weight:700}
@media(max-width:620px){.usp-list{max-width:none}.usp{padding:14px}}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp-btn{margin-top:14px}
.usp-list{max-width:none}
@media(max-width:620px){.hero-art.hero-image-art{display:flex;margin-top:24px}.hero-art .hero-visual{display:none}}

/* ---- Jurisdiction section ---- */

/* ================= JURISDICTION SECTION (map, cards, 14 Eyes) ================= */
.jx-section{padding:72px 6.8%}
.jx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:960px;margin:32px auto 0}
.jx-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px}
.jx-us{background:var(--light);border:2px solid var(--orange)}
.jx-badge{position:absolute;top:-12px;left:22px;background:var(--orange);color:#fff;font-size:11px;font-weight:800;letter-spacing:.4px;padding:4px 14px;border-radius:20px}
.jx-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.jx-head h3{margin:0;font-size:22px;color:var(--navy)}
.jx-list{list-style:none;margin:0;padding:0}
.jx-list li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--border);color:var(--navy);font-size:15px;line-height:1.4}
.jx-us .jx-list li{border-top-color:#f1d6bb}
.jx-list li span{flex:0 0 22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:800}
.jx-list .ok span{background:var(--orange);color:#fff}
.jx-list .no span{background:#eef1f5;color:#55708d}
.jx-loc{margin-top:14px;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid #f5b983;font-size:13px;color:var(--text)}
.jx-eyes{max-width:960px;margin:28px auto 0;padding:24px;background:#fff;border:1px solid var(--border);border-radius:16px}
.jx-eyes h3{margin:0 0 6px;color:var(--navy)}
.jx-eyes p{margin:0 0 14px;color:var(--text);font-size:14px;line-height:1.55}
.jx-chips{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jx-chips li{padding:5px 12px;border:1px solid var(--border);border-radius:999px;background:#f6f9fc;color:var(--navy);font-size:13px}
.jx-src{margin:0!important;font-size:12px!important}
.jx-src a{color:var(--orange-dark);font-weight:700;text-decoration:none}
.jx-src a:hover{text-decoration:underline}
@media(max-width:760px){.jx-section{padding:56px 5%}.jx-grid{grid-template-columns:1fr}.jx-us{order:-1;margin-top:8px}}

/* ---- Fix: USP table was inheriting the global table rules (min-width 900px, tall centered headers) ---- */

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.usp-t{min-width:0;width:100%;table-layout:fixed}
.usp-t th,.usp-t td{height:auto;background:none;text-align:left;border-bottom:0;padding:6px 8px 6px 0;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.usp-t th{font-weight:700;color:var(--text)}
.usp-t th:first-child,.usp-t td:first-child{width:32%;text-align:left}
.usp-t td{border-top:1px solid #f1d6bb}

/* ---- Jurisdiction background: orange map + network ---- */

/* ================= JURISDICTION SECTION (map, cards, 14 Eyes) ================= */
.jx-section{position:relative;overflow:hidden;isolation:isolate;background:#fffaf5}
.jx-map{position:absolute;inset:0;z-index:-2;background:url(assets/india-map-orange.png) center 30% / auto 118% no-repeat;opacity:.3}
.jx-net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.jx-net line{stroke:var(--orange);stroke-width:1.2;opacity:.28}
.jx-net circle{fill:var(--orange);opacity:.55}
.jx-net .hub{opacity:.9}
.jx-net .pulse{fill:none;stroke:var(--orange);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:jxpulse 3.6s ease-out infinite}
@keyframes jxpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.jx-net .pulse{animation:none;opacity:0}}
.jx-card{background:rgba(255,255,255,.94)}
.jx-us{background:rgba(255,248,239,.96)}
.jx-eyes{background:rgba(255,255,255,.94)}
.jx-code{display:inline-grid;place-items:center;min-width:38px;height:30px;padding:0 8px;border-radius:8px;background:var(--navy);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em}
.jx-us .jx-code{background:var(--orange)}

/* ---- Jurisdiction animation ---- */
.jx-map{animation:jxdrift 24s ease-in-out infinite alternate}
@keyframes jxdrift{0%{transform:translateX(-1.5%) scale(1.02);opacity:.22}100%{transform:translateX(1.5%) scale(1.06);opacity:.34}}
.jx-scan{position:absolute;top:0;bottom:0;left:0;width:28%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,128,10,0),rgba(255,128,10,.13),rgba(255,128,10,0));animation:jxscan 9s linear infinite}
@keyframes jxscan{0%{transform:translateX(-100%)}100%{transform:translateX(460%)}}
.jx-net .pkt{stroke:var(--orange);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:3 37;opacity:.95;animation:jxflow 3s linear infinite}
@keyframes jxflow{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
.jx-net circle.n{animation:jxtwinkle 3.2s ease-in-out infinite}
@keyframes jxtwinkle{0%,100%{opacity:.3}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.jx-map,.jx-scan,.jx-net .pkt,.jx-net circle.n{animation:none}.jx-map{opacity:.28}.jx-scan,.jx-net .pkt{display:none}}

.fx-js .jx-section:not(.fx-on) :is(.jx-map,.jx-scan,.jx-net,.jx-net *){animation-play-state:paused}

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */

.usp-link{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--orange);text-decoration:none}
.usp-link:hover{text-decoration:underline}
.usp-t4 th:first-child,.usp-t4 td:first-child{width:28%}
.as-tiles{grid-template-columns:repeat(6,1fr)}
.as-tiles div{grid-column:span 2}
.as-tiles div.wide{grid-column:span 3}

/* ---- Mobile + desktop polish ---- */

/* ================= COMPARISON TABLE ================= */
.compare-table thead th.hl{color:#fff}

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.usp-t4 th{overflow-wrap:normal;word-break:normal}
@media(max-width:620px){
  .usp-t4 th,.usp-t4 td{font-size:11px;padding-right:5px}
  .usp-t4 th:first-child,.usp-t4 td:first-child{width:25%}
  .menu-btn{min-width:44px;min-height:44px}
}
@media(min-width:1600px){
  .jx-grid{max-width:1040px}
}

/* ---- Glow effects: 3 USP cards + Get QuantVPN buttons ---- */
.usp{position:relative;animation:uspglow 3.6s ease-in-out infinite;box-shadow:0 0 0 rgba(255,128,10,0)}
.usp:nth-child(2){animation-delay:1.2s}
.usp:nth-child(3){animation-delay:2.4s}
.usp::before{content:"";position:absolute;left:-4px;top:12%;bottom:12%;width:4px;border-radius:4px;background:var(--orange);filter:blur(7px);opacity:.75;pointer-events:none;animation:uspedge 3.6s ease-in-out infinite;animation-delay:inherit}
@keyframes uspglow{
  0%,100%{box-shadow:0 0 6px rgba(255,128,10,.14),0 4px 14px rgba(255,128,10,.08);border-color:#f5b983}
  50%{box-shadow:0 0 22px rgba(255,128,10,.38),0 6px 26px rgba(255,128,10,.2);border-color:#ff9a3d}
}
@keyframes uspedge{0%,100%{opacity:.35}50%{opacity:.95}}
.usp:hover{box-shadow:0 0 26px rgba(255,128,10,.45),0 8px 28px rgba(255,128,10,.24)}

/* ================= NAVBAR ================= */

.nav-cta,.primary-btn:not(.sh-actions .primary-btn):not(.sv-hero .primary-btn){position:relative;animation:btnglow 2.4s ease-in-out infinite}
@keyframes btnglow{
  0%,100%{box-shadow:0 0 8px rgba(255,128,10,.35),0 4px 12px rgba(230,111,0,.22)}
  50%{box-shadow:0 0 24px rgba(255,138,20,.75),0 6px 22px rgba(230,111,0,.4)}
}
.nav-cta:hover,.primary-btn:not(.sh-actions .primary-btn):not(.sv-hero .primary-btn):hover{animation-play-state:paused;box-shadow:0 0 28px rgba(255,138,20,.85),0 8px 22px rgba(230,111,0,.4)}

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.hp-btn{box-shadow:0 0 14px rgba(255,128,10,.5)}
@media(prefers-reduced-motion:reduce){
  .usp,.usp::before,.nav-cta,.primary-btn{animation:none}
  .usp{box-shadow:0 0 16px rgba(255,128,10,.25)}
  .nav-cta,.primary-btn:not(.sh-actions .primary-btn):not(.sv-hero .primary-btn){box-shadow:0 0 16px rgba(255,128,10,.5)}
}

/* ---- Scroll effects ---- */

/* ================= JURISDICTION SECTION (map, cards, 14 Eyes) ================= */
.rv{transition:opacity .6s ease var(--rv-d,0ms),transform .6s ease var(--rv-d,0ms),box-shadow .3s ease,border-color .3s ease}
.rv-js .rv:not(.rv-in){opacity:0;transform:translateY(26px)}
.rv.rv-in{opacity:1}
.hot{transform:translateY(-4px)!important;box-shadow:0 16px 36px rgba(9,40,75,.10),0 0 22px rgba(255,128,10,.28)!important;border-color:#ffb066!important}

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.usp.hot{animation:none;box-shadow:0 0 28px rgba(255,128,10,.5),0 10px 30px rgba(255,128,10,.26)!important}

/* ================= JURISDICTION SECTION (map, cards, 14 Eyes) ================= */
.jx-us.hot,.plan-card.popular.hot{border-color:var(--orange)!important}
@media(prefers-reduced-motion:reduce){.hot{transform:none!important}.rv{transition:none}}

/* ---- Unified cream theme: no white gaps, map fits, white cards -> cream ---- */

/* ================= BASE & SHARED ELEMENTS ================= */
:root{--cream:#fff6ea;--cream-border:#f5c99a}
html,body{background:#fffaf5}

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.hero{width:100%;max-width:none;border-radius:0;margin:0;padding-left:max(5.2%,calc((100% - 1200px)/2));padding-right:max(5.2%,calc((100% - 1200px)/2));background:radial-gradient(circle at 78% 50%,#fff1df 0,#fff8ef 34%,#fffaf5 75%)}
.hero-art{max-width:100%}

/* ================= JURISDICTION SECTION (map, cards, 14 Eyes) ================= */
.jx-section{background:#fffaf5}
.jx-map{background:url(assets/india-map-orange.png) center center / contain no-repeat;opacity:.32}

/* ================= PRICING ================= */
.pricing-section{background:#fffaf5}

/* ================= JURISDICTION SECTION (map, cards, 14 Eyes) ================= */
.jx-card,.jx-eyes,.step,.info-card,.plan-card,.faq-grid details,.platform-btn,.compare-table,.jx-loc,.usp-vs div.us,.chips span,.jx-chips li,.hv-chip,.hv-badge{background:var(--cream)!important;border-color:var(--cream-border)}
.jx-us{background:var(--cream)!important}

/* ================= COMPARISON TABLE ================= */
.compare-table th,.compare-table td{background:transparent}

/* ================= SERVERS PAGE (location list, search, filters) ================= */
.sv-tabs,.chip,.sv-tools input{background:var(--cream)}
@media(max-width:620px){.hero{width:100%;padding:35px 7%}}

/* ================= PRICING ================= */
.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
@media(max-width:620px){.pricing-grid{grid-template-columns:1fr}}

/* ---- All page backgrounds white (orange/navy feature blocks unchanged) ---- */

/* ================= BASE & SHARED ELEMENTS ================= */
html,body,.hero,.jx-section,.how-section,.features-section,.privacy-section,.stream-section,.compare-section,.platforms,.pricing-section,.faq-section,.support{background:#fff!important}

/* ================= FEATURES & PRIVACY SECTIONS ================= */
.feature-card{background:var(--cream)!important;border-color:var(--cream-border)}

/* ================= COMPARISON TABLE ================= */
.compare-table .tk{color:#1a9d5c;font-weight:800;font-size:1.15em}
.compare-table .xx{color:#d64545;font-weight:800;font-size:1.1em}
.compare-table .part{color:#c9971b;font-weight:700}
.compare-table td small{font-weight:600;color:var(--text);font-size:.78em}
.compare-table td.hl .tk{color:#1a9d5c}
.compare-table td.hl small{color:var(--orange-dark)}

/* ================= SERVERS PAGE (location list, search, filters) ================= */
.sv-list,.sv-info.alt{background:#fff!important}
.sv-region .table-wrap{background:#fff}
.sv-table{table-layout:fixed}
.sv-table thead th:first-child,.sv-table tbody th{width:34%}
.sv-table tbody tr:hover{background:#fff6ea}
.sv-table th,.sv-table thead th,.sv-table tbody th{background:#fff!important}

/* ================= COMPARISON TABLE ================= */
.compare-table .uniq{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;background:var(--orange);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.compare-table tr.u-row th,.compare-table tr.u-row td{background:#fff1df!important;font-weight:700}
.compare-table tr.u-row td.hl{background:#ffe3c2!important}
.compare-table td small{font-size:.74em}

/* ---- Comparison table: glow + hover ---- */
#compare .table-wrap{padding:44px 28px;margin:-16px -28px 0}
.compare-table{animation:tblglow 3.2s ease-in-out infinite}
@keyframes tblglow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,128,10,.30),0 8px 28px rgba(255,128,10,.18),0 0 60px rgba(255,128,10,.10)}
  50%{box-shadow:0 0 0 1px rgba(255,128,10,.60),0 14px 52px rgba(255,128,10,.36),0 0 90px rgba(255,128,10,.22)}
}
.compare-table thead th.hl{animation:colglow 2.4s ease-in-out infinite;position:relative}
@keyframes colglow{0%,100%{box-shadow:0 0 10px rgba(255,160,60,.55)}50%{box-shadow:0 0 26px rgba(255,160,60,.95)}}
.compare-table td.hl{box-shadow:inset 0 0 22px rgba(255,128,10,.16)}
.compare-table tbody th,.compare-table tbody td{transition:background .18s ease,box-shadow .18s ease,color .18s ease}
.compare-table tbody tr:hover th,.compare-table tbody tr:hover td{background:#ffe8cc!important}
.compare-table tbody tr:hover td.hl{background:#ffd6a0!important;box-shadow:inset 0 0 28px rgba(255,128,10,.38)}
.compare-table tbody tr:hover th{color:var(--orange-dark);box-shadow:inset 4px 0 0 var(--orange)}
.compare-table .tk,.compare-table .xx{display:inline-block;transition:transform .18s ease,text-shadow .18s ease}
.compare-table tbody td:hover .tk{transform:scale(1.5);text-shadow:0 0 12px rgba(26,157,92,.7)}
.compare-table tbody td:hover .xx{transform:scale(1.5);text-shadow:0 0 12px rgba(214,69,69,.6)}
.compare-table thead th{transition:background .18s ease}
.compare-table thead th:not(.hl):hover{background:#12386a}
@media(prefers-reduced-motion:reduce){.compare-table,.compare-table thead th.hl{animation:none}}
@media(max-width:700px){#compare .table-wrap{padding:30px 12px;margin:0 -12px}}

/* ================= FAQ ================= */
.faq-grid details a{color:var(--orange-dark);font-weight:700;text-decoration:underline}

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.as-bw{background:#17130f;border:1px solid #2e2822;border-radius:4cqw;padding:3cqw 4cqw;font-size:3.6cqw}
.as-bw-top{display:flex;align-items:center;gap:2cqw}
.as-bw-top b{font-size:4.2cqw}
.as-bw-top em{margin-left:auto;font-style:normal;font-weight:700;font-size:3.4cqw;color:#ff9a3c;background:#3a2410;padding:1.2cqw 3cqw;border-radius:3cqw}
.as-bars{display:inline-flex;align-items:flex-end;gap:.7cqw;height:4cqw}
.as-bars i{display:block;width:1.2cqw;background:#ff800a;border-radius:.4cqw}
.as-bars i:nth-child(1){height:2cqw}.as-bars i:nth-child(2){height:3cqw}.as-bars i:nth-child(3){height:4cqw}
.as-bar{height:1.6cqw;border-radius:1cqw;background:#2a241f;margin:2.4cqw 0 1.6cqw}
.as-bar i{display:block;width:2%;height:100%;border-radius:1cqw;background:#ff800a}
.as-bw-n{display:flex;justify-content:space-between;color:#a79b8e;font-size:3.2cqw}
.as-tu{margin:2cqw 0 0;padding-top:2cqw;border-top:1px solid #2e2822;color:#ffb066;font-size:3.1cqw;line-height:1.35}
.as-pw{width:30cqw;height:30cqw;margin:1cqw auto 0}
.as-pw svg{width:12cqw;height:12cqw}
.as-cap{min-height:8cqw;font-size:3.6cqw}
.as-banner{padding:2.4cqw 4cqw;font-size:4.2cqw}
.as-tiles div{padding:2.2cqw 3cqw}
.as-tiles i{margin-bottom:1.6cqw}
.hp-topup{display:inline-block;margin:10px auto 2px;padding:6px 14px;border-radius:99px;background:#fff1df;border:1px solid #ffc48e;color:var(--navy);font-size:12.5px;font-weight:600}
.hp-topup b{color:var(--orange-dark)}
.hp-topup{display:table;margin:10px auto 14px}

/* ---- Footer (company info, policies, partners, payments, social) ---- */

/* ================= FOOTER ================= */
.site-footer .footer-grid.ft4{grid-template-columns:1.1fr 1fr 1fr 1.1fr;gap:34px}
.ft-col h4{font-size:1.05rem;line-height:1.3;margin:0 0 14px}
.ft-col p{margin:0 0 9px;font-size:.95rem;color:#cfdbe8}
.site-footer .ft-col a{margin-bottom:10px}
.site-footer .ft-col .brand{margin-bottom:16px}
.ft-pay{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.pay{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:7px;background:#fff;color:#1a1f71;font-weight:800;font-size:.8rem;letter-spacing:.02em}
.pay.visa{font-style:italic;font-size:.95rem;letter-spacing:.04em}
.pay.mc{color:#222;font-size:.72rem}
.pay.mc i{display:block;width:13px;height:13px;border-radius:50%;background:#eb001b}
.pay.mc i+i{background:#f79e1b;margin-left:-8px;opacity:.9}
.pay.wc{background:#22b04b;color:#fff;font-size:.78rem}
.pay.nb{color:#ff800a;font-size:.85rem}.pay.nb small{font-size:.7rem;color:#09284b;font-weight:700}
.ft-find{margin-top:4px}
.ft-socials{display:flex;flex-wrap:wrap;gap:12px}
.site-footer a.ft-soc{display:grid;place-items:center;width:42px;height:42px;margin:0;border-radius:50%;background:#fff;color:#09284b;transition:transform .18s,background .18s,color .18s}
.ft-soc svg{width:20px;height:20px}
.site-footer a.ft-soc:hover{transform:translateY(-3px);background:var(--orange);color:#fff}
@media(max-width:900px){.site-footer .footer-grid.ft4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-footer .footer-grid.ft4{grid-template-columns:1fr}}
.pay{white-space:nowrap;flex:none}
.site-footer a.ft-soc svg{width:22px!important;height:22px!important;display:block}
.ft-pay .pay{width:max-content;min-width:max-content;box-sizing:border-box}

/* ---- Footer look: blue bg, skyline, colored socials, centered copyright ---- */
.site-footer{background:#2a4571!important;position:relative;overflow:hidden;padding-bottom:170px!important}
.site-footer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201600%20150%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22%23fff%22%3E%0A%3Cg%3E%3Crect%20x%3D%2260%22%20y%3D%22122%22%20width%3D%22240%22%20height%3D%2228%22/%3E%3Crect%20x%3D%22140%22%20y%3D%2288%22%20width%3D%2280%22%20height%3D%2234%22/%3E%3Cpath%20d%3D%22M148%2088Q180%2028%20212%2088Z%22/%3E%3Crect%20x%3D%22179%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%2222%22/%3E%3Cpath%20d%3D%22M122%20104Q136%2082%20150%20104Z%22/%3E%3Cpath%20d%3D%22M210%20104Q224%2082%20238%20104Z%22/%3E%0A%3Crect%20x%3D%2272%22%20y%3D%2272%22%20width%3D%2210%22%20height%3D%2250%22/%3E%3Cpath%20d%3D%22M70%2072Q77%2058%2084%2072Z%22/%3E%3Crect%20x%3D%22108%22%20y%3D%2282%22%20width%3D%229%22%20height%3D%2240%22/%3E%3Cpath%20d%3D%22M106%2082Q112.500%2069%20119%2082Z%22/%3E%3Crect%20x%3D%22243%22%20y%3D%2282%22%20width%3D%229%22%20height%3D%2240%22/%3E%3Cpath%20d%3D%22M241%2082Q247.500%2069%20254%2082Z%22/%3E%3Crect%20x%3D%22278%22%20y%3D%2272%22%20width%3D%2210%22%20height%3D%2250%22/%3E%3Cpath%20d%3D%22M276%2072Q283%2058%20290%2072Z%22/%3E%3C/g%3E%0A%3Cg%3E%3Crect%20x%3D%22340%22%20y%3D%22132%22%20width%3D%22140%22%20height%3D%2218%22/%3E%3Crect%20x%3D%22355%22%20y%3D%22118%22%20width%3D%22110%22%20height%3D%2214%22/%3E%3Cpath%20d%3D%22M365%20118Q410%2038%20455%20118Z%22/%3E%3Crect%20x%3D%22394%22%20y%3D%2236%22%20width%3D%2232%22%20height%3D%2214%22/%3E%3Crect%20x%3D%22406%22%20y%3D%228%22%20width%3D%228%22%20height%3D%2230%22/%3E%3Crect%20x%3D%22400%22%20y%3D%2226%22%20width%3D%2220%22%20height%3D%224%22/%3E%3Crect%20x%3D%22402%22%20y%3D%2218%22%20width%3D%2216%22%20height%3D%223%22/%3E%3C/g%3E%0A%3Cg%3E%3Cpolygon%20points%3D%22520%2C124%20640%2C124%20624%2C110%20536%2C110%22/%3E%3Crect%20x%3D%22548%22%20y%3D%22124%22%20width%3D%2264%22%20height%3D%2226%22/%3E%3Cpolygon%20points%3D%22536%2C104%20624%2C104%20610%2C90%20550%2C90%22/%3E%3Crect%20x%3D%22562%22%20y%3D%22104%22%20width%3D%2236%22%20height%3D%226%22/%3E%3Cpolygon%20points%3D%22550%2C84%20610%2C84%20598%2C70%20562%2C70%22/%3E%3Crect%20x%3D%22570%22%20y%3D%2284%22%20width%3D%2220%22%20height%3D%226%22/%3E%3Cpolygon%20points%3D%22566%2C64%20594%2C64%20588%2C52%20572%2C52%22/%3E%3Crect%20x%3D%22577%22%20y%3D%2230%22%20width%3D%226%22%20height%3D%2224%22/%3E%3C/g%3E%0A%3Cg%3E%3Crect%20x%3D%221010%22%20y%3D%22126%22%20width%3D%2262%22%20height%3D%2224%22/%3E%3Crect%20x%3D%221022%22%20y%3D%22104%22%20width%3D%2238%22%20height%3D%2222%22/%3E%3Cpolygon%20points%3D%221030%2C104%201052%2C104%201048%2C58%201034%2C58%22/%3E%3Ccircle%20cx%3D%221041%22%20cy%3D%2250%22%20r%3D%228%22/%3E%3Cpolygon%20points%3D%221033%2C46%201029%2C38%201036%2C43%201038%2C34%201041%2C42%201044%2C34%201046%2C43%201053%2C38%201049%2C46%22/%3E%3Cpolygon%20points%3D%221048%2C64%201056%2C62%201070%2C26%201063%2C24%22/%3E%3Crect%20x%3D%221060%22%20y%3D%2212%22%20width%3D%229%22%20height%3D%2213%22/%3E%3Cpath%20d%3D%22M1061%2012Q1064.500%202%201068%2012Z%22/%3E%3C/g%3E%0A%3Cg%3E%3Cpolygon%20points%3D%221150%2C150%201186%2C92%201214%2C92%201250%2C150%201236%2C150%201218%2C114%201182%2C114%201164%2C150%22/%3E%3Crect%20x%3D%221180%22%20y%3D%22108%22%20width%3D%2240%22%20height%3D%225%22/%3E%3Cpolygon%20points%3D%221190%2C92%201210%2C92%201204%2C50%201196%2C50%22/%3E%3Crect%20x%3D%221186%22%20y%3D%2288%22%20width%3D%2228%22%20height%3D%224%22/%3E%3Cpolygon%20points%3D%221196%2C50%201204%2C50%201202%2C26%201198%2C26%22/%3E%3Crect%20x%3D%221199%22%20y%3D%226%22%20width%3D%222%22%20height%3D%2222%22/%3E%3C/g%3E%0A%3Cg%3E%3Cpolygon%20points%3D%221330%2C150%201450%2C150%201436%2C134%201344%2C134%22/%3E%3Crect%20x%3D%221356%22%20y%3D%22112%22%20width%3D%2270%22%20height%3D%2222%22/%3E%3Cpolygon%20points%3D%221338%2C112%201444%2C112%201428%2C96%201354%2C96%22/%3E%3Crect%20x%3D%221372%22%20y%3D%2282%22%20width%3D%2238%22%20height%3D%2214%22/%3E%3Cpolygon%20points%3D%221362%2C82%201420%2C82%201406%2C66%201376%2C66%22/%3E%3Crect%20x%3D%221388%22%20y%3D%2240%22%20width%3D%225%22%20height%3D%2226%22/%3E%3C/g%3E%0A%3Cg%3E%3Crect%20x%3D%221450%22%20y%3D%22116%22%20width%3D%22150%22%20height%3D%2234%22/%3E%3Cpath%20d%3D%22M1450%20116V106h12v10zM1474%20116V106h12v10zM1498%20116V106h12v10zM1546%20116V106h12v10zM1570%20116V106h12v10zM1594%20116V106h6v10z%22/%3E%3Crect%20x%3D%221508%22%20y%3D%2284%22%20width%3D%2228%22%20height%3D%2242%22/%3E%3Cpolygon%20points%3D%221502%2C84%201542%2C84%201534%2C68%201510%2C68%22/%3E%3C/g%3E%0A%3C/svg%3E") center bottom/100% 150px no-repeat;opacity:.08;pointer-events:none}
.site-footer>*{position:relative;z-index:1}
.site-footer .copyright{position:absolute;left:0;right:0;bottom:22px;margin:0;padding:0;border:0;text-align:center;color:#fff;font-size:1rem}
.site-footer a.ft-soc:nth-child(1){color:#1877f2}
.site-footer a.ft-soc:nth-child(2){color:#1da1f2}
.site-footer a.ft-soc:nth-child(3){color:#d6249f}
.site-footer a.ft-soc:nth-child(4){color:#0a66c2}
.site-footer a.ft-soc:hover{color:#fff}
@media(max-width:560px){.site-footer{padding-bottom:130px!important}.site-footer::before{height:100px;background-size:100% 100px}}
.site-footer .footer-grid.ft4{grid-template-columns:1.2fr 1.2fr 1.2fr}
@media(max-width:900px){.site-footer .footer-grid.ft4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-footer .footer-grid.ft4{grid-template-columns:1fr}}
/* single centered comparison table: no outer box */

/* ================= COMPARISON TABLE ================= */
#compare .table-wrap{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;display:flex;justify-content:center}
#compare .compare-table{margin:0 auto;flex:none;width:100%;max-width:1100px}
#compare .table-wrap{margin:-16px auto 0!important;width:calc(100% + 56px);max-width:1230px}
@media(max-width:700px){#compare .table-wrap{width:calc(100% + 24px);margin:0 -12px!important}}

/* ---- Hero layout: phone/app on the LEFT, USP cards on the RIGHT (desktop); phone on top, then USPs (mobile) ---- */

/* ================= HERO, USP CARDS & APP / BROWSER MOCKUPS ================= */
.hero{
  flex-direction:row-reverse;           /* .hero-art (phone + price) moves to the left */
  align-items:center;
  gap:clamp(24px,4vw,56px);
}
.hero-content{width:auto;flex:1.15 1 0;min-width:0}
.hero-art,
.hero-art.hero-image-art{width:auto;flex:1 1 0;min-width:0;transform:none}
.usp-list{margin-top:0}
.hero-visual{max-width:440px}

/* Tablet: stack – phone block first, USP cards below, both centred in a readable column */
@media(max-width:900px){
  .hero{display:flex;flex-direction:column-reverse;align-items:stretch;gap:28px;padding-top:32px;padding-bottom:40px}
  .hero-content,.hero-art,.hero-art.hero-image-art{width:100%;flex:none}
  .hero-art.hero-image-art{display:flex;align-items:center;margin-top:0}
  .hero-content{max-width:680px;margin:0 auto}
  .hero-visual{max-width:380px}
}

/* Phones: keep the phone visible (it was hidden before) and size it for small screens */
@media(max-width:620px){
  .hero{padding:24px 16px 36px;gap:22px}
  .hero-art .hero-visual{display:block;max-width:300px}
  .hv-held{width:46%}
  .hv-chip{font-size:.72rem;padding:6px 10px}
  .hv-badge{width:46px;height:46px;border-radius:13px}
  .hv-badge svg{width:24px;height:24px}
  .hero-price{width:100%}
  .hp-amount{font-size:44px}
  .hp-btn{width:100%;max-width:340px}
  .usp{padding:14px}
}

/* ---- Download section: real store links with icons ---- */

/* ================= DOWNLOAD / APP STORE BUTTONS ================= */
.platform-buttons{max-width:520px}
.platform-btn{display:flex;align-items:center;gap:12px;min-width:0}
.pb-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#fff1df;color:var(--orange-dark)}
.pb-ic svg{width:20px;height:20px}
.pb-tx{min-width:0}
.platform-btn.pb-main{border-color:#ffc48e}
.platform-btn.pb-main .pb-ic{background:var(--orange);color:#fff}
.platform-btn strong{font-size:14px}
.platform-btn small{font-size:11px;overflow-wrap:anywhere}
@media(max-width:620px){.platform-buttons{max-width:none}}

/* ---- Footer: smaller gap above the copyright line ---- */
.site-footer{padding-top:44px!important;padding-bottom:84px!important}
.site-footer::before{height:120px;background-size:100% 120px}
.site-footer .copyright{bottom:20px}
.site-footer .footer-grid.ft4{gap:28px}
@media(max-width:560px){.site-footer{padding-bottom:80px!important}.site-footer::before{height:90px;background-size:100% 90px}}

/* ---- Mobile comparison: "Compare with [competitor]" 2-column card ---- */

/* ================= COMPARISON TABLE ================= */
.cmp{display:none}
@media(max-width:700px){
  #compare .table-wrap{display:none!important}
  .cmp{display:block;max-width:440px;margin:22px auto 0;padding:18px 14px 20px;background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:0 10px 30px rgba(9,40,75,.08)}
  .cmp-pick{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
  .cmp-pick label{font-size:15px;color:var(--navy);font-weight:500}
  .cmp-sel{position:relative}
  .cmp-sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translateY(-70%) rotate(45deg);pointer-events:none}
  .cmp-sel select{appearance:none;-webkit-appearance:none;font:inherit;font-size:16px;font-weight:700;color:var(--navy);background:#fdeede;border:1px solid #f5c99a;border-radius:99px;padding:10px 40px 10px 20px;cursor:pointer}
  .cmp-sel select:focus{outline:2px solid var(--orange);outline-offset:2px}
  .cmp-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr)}
  .cmp-c{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding:14px 6px;min-height:58px;font-size:14px;color:var(--navy);border-bottom:0;min-width:0;overflow-wrap:break-word}
  .cmp-lab{align-items:flex-start;text-align:left;padding-left:4px;padding-right:8px;font-weight:700;font-size:14.5px;line-height:1.3;color:#3d566f}
  .cmp-lab em{font-style:normal;font-weight:500;font-size:11.5px;color:var(--text)}
  .cmp-uniq{display:inline-block;margin-top:4px;padding:1px 7px;border-radius:99px;background:var(--orange);color:#fff;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  .cmp-us{background:#fff1df;box-shadow:inset 0 0 0 0 transparent}
  .cmp-top{border-radius:18px 18px 0 0;padding-top:18px}
  .cmp-bot{border-radius:0 0 18px 18px;padding:14px 6px 18px}
  .cmp-head{font-weight:800;font-size:13.5px;gap:6px;min-height:78px}
  .cmp-head img{border-radius:8px}
  .cmp-rival{color:#4b647d}
  .cmp small{display:block;font-size:12px;font-weight:500;color:var(--text)}
  .cmp-us small{color:var(--orange-dark);font-weight:600}
  .cmp .part{color:#c9971b;font-weight:700;font-size:13px}
  .cmp-ic{width:24px;height:24px;flex:none}
  .cmp-ic.ok{color:#1a9d5c}
  .cmp-ic.no{color:#d64545}
  .cmp-cta{padding:11px 14px;font-size:13px;white-space:nowrap;animation:none!important}
}

@media(max-width:700px){
  .cmp-note{margin:14px 6px 0;font-size:12px;line-height:1.5;color:var(--text);text-align:left}
  .cmp-rival small{font-size:13px;font-weight:500;color:#4b647d}
}
#compare .compare-table td:nth-child(3) small{white-space:nowrap}

/* Footer payment partner images (from nimbuzz.com) */
.ft-pay{align-items:center}
.ft-pay{gap:18px;align-items:center;margin-bottom:26px}
.ft-pay img{height:48px;width:auto;max-width:100%;object-fit:contain;display:block}
.site-footer .footer-grid.ft4{align-items:start;max-width:1100px;margin-left:auto;margin-right:auto}
.site-footer .ft-col .ft-find{margin-top:0}

/* Payment logos: always on one line */
.ft-pay{flex-wrap:nowrap!important;gap:clamp(8px,1.6vw,18px)}
.ft-pay img{flex:0 1 auto;min-width:0;height:48px;width:auto;max-width:32%;object-fit:contain}