/* Secure-VPN Homepage Polish v1
   Visual-only override. No benchmark/data logic changes.
*/

/* ---------- PAGE RHYTHM ---------- */

.seo-home{
  overflow:hidden;
}

.seo-home > section{
  position:relative;
}

/* ---------- HERO ---------- */

.seo-home-hero.home-v5-hero{
  position:relative;
  margin-top:18px;
  padding:clamp(20px,3vw,38px);
  border-radius:28px;
  overflow:hidden;

  background:
    radial-gradient(circle at 85% 20%,
      rgba(52,126,255,.22),
      transparent 34%),
    radial-gradient(circle at 15% 85%,
      rgba(20,184,166,.12),
      transparent 30%),
    linear-gradient(135deg,#07111f 0%,#0b1b31 55%,#102746 100%);

  border:1px solid rgba(148,163,184,.16);
  box-shadow:
    0 30px 80px rgba(2,8,23,.20),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* subtle background grid */
.seo-home-hero.home-v5-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.20;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}

.seo-home-hero.home-v5-hero > *{
  position:relative;
  z-index:1;
}

.seo-home-hero.home-v5-hero > .card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:clamp(10px,2vw,22px) !important;
}

.home-v5-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:auto;
  border-radius:999px !important;
  padding:8px 13px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  color:#bcd7ff !important;
  backdrop-filter:blur(10px);
}

.home-v5-hero h1,
.seo-home-hero h1{
  max-width:900px;
  color:#fff !important;
  letter-spacing:-.045em;
  line-height:1.02;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.18);
}

.home-v5-subheadline{
  max-width:720px;
  color:#cbd5e1 !important;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.65;
}

/* CTA */
.home-v5-primary{
  border-radius:12px !important;
  padding:13px 20px !important;
  font-weight:800 !important;
  box-shadow:0 12px 28px rgba(37,99,235,.23);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.home-v5-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(37,99,235,.30);
  filter:brightness(1.04);
}

/* ---------- EXPLAINER / TRUST ROW ---------- */

.home-widget-explainers{
  gap:12px !important;
  margin-top:24px !important;
}

.home-widget-explainer{
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  background:rgba(255,255,255,.055) !important;
  backdrop-filter:blur(10px);
}

.home-widget-explainer,
.home-widget-explainer strong,
.home-widget-explainer p{
  color:#e5edf8 !important;
}

.home-widget-explainer-icon{
  background:rgba(255,255,255,.10) !important;
  color:#93c5fd !important;
}

/* ---------- LIVE WIDGET SHOWCASE ---------- */

.home-widget-showcase{
  margin-top:30px !important;
  padding:clamp(18px,2.2vw,28px) !important;
  border-radius:22px !important;

  background:rgba(3,12,25,.40) !important;
  border:1px solid rgba(148,163,184,.14) !important;

  box-shadow:
    0 24px 60px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.home-widget-showcase-head strong{
  color:#fff !important;
}

.home-widget-showcase-kicker{
  color:#7dd3fc !important;
}

.home-widget-card{
  border-radius:18px !important;
  border:1px solid rgba(148,163,184,.18) !important;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.095),
      rgba(255,255,255,.045)) !important;

  box-shadow:0 14px 34px rgba(0,0,0,.13) !important;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.home-widget-card:hover{
  transform:translateY(-3px);
  border-color:rgba(96,165,250,.42) !important;
  box-shadow:0 20px 44px rgba(0,0,0,.20) !important;
}

/* ---------- DATA SNAPSHOT AS TRUST STRIP ---------- */

.seo-static-snapshot{
  margin-top:30px !important;
  padding:24px clamp(18px,3vw,34px) !important;

  border-radius:22px !important;
  border:1px solid rgba(15,23,42,.08) !important;

  background:
    linear-gradient(135deg,#f8fbff 0%,#edf5ff 100%) !important;

  box-shadow:0 18px 46px rgba(15,23,42,.07) !important;
}

.seo-snapshot-grid{
  gap:0 !important;
}

.seo-snapshot-grid > div{
  position:relative;
  padding:12px 24px !important;
}

.seo-snapshot-grid > div:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:15%;
  width:1px;
  height:70%;
  background:rgba(15,23,42,.10);
}

.seo-snapshot-grid strong{
  font-size:clamp(26px,3vw,38px) !important;
  letter-spacing:-.04em;
}

.seo-snapshot-grid span{
  opacity:.72;
}

/* ---------- STATIC DATA ---------- */

.seo-static-data{
  margin-top:34px !important;
  padding:clamp(22px,3vw,36px) !important;
  border-radius:24px !important;

  background:#fff !important;
  border:1px solid rgba(15,23,42,.08) !important;

  box-shadow:0 20px 50px rgba(15,23,42,.055) !important;
}

.seo-static-table-wrap{
  border-radius:16px;
  overflow:auto;
  border:1px solid rgba(15,23,42,.07);
}

/* ---------- PREDICTOR: VISUAL FEATURE SECTION ---------- */

.home-v5-predictor{
  position:relative;
  margin-top:48px !important;
  padding:clamp(28px,4vw,54px) !important;

  border-radius:28px !important;
  overflow:hidden;

  background:
    radial-gradient(circle at 88% 18%,
      rgba(59,130,246,.18),
      transparent 30%),
    linear-gradient(135deg,#071525,#0d223b) !important;

  border:1px solid rgba(148,163,184,.16) !important;

  box-shadow:0 30px 70px rgba(2,8,23,.15) !important;
}

.home-v5-predictor h2,
.home-v5-predictor h3,
.home-v5-predictor strong{
  color:#f8fafc !important;
}

.home-v5-predictor p,
.home-v5-predictor span,
.home-v5-predictor small{
  color:#b9c7d9 !important;
}

.home-v5-route{
  border-radius:20px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(12px);
}

.home-v5-route-row{
  border-color:rgba(255,255,255,.09) !important;
}

/* ---------- ANALYTICS AREA ---------- */

#visual-benchmark-analytics{
  margin-top:52px !important;
  padding-top:44px !important;
  padding-bottom:44px !important;
}

#visual-benchmark-analytics::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-28px -100vw;
  background:
    linear-gradient(180deg,#f6f9fd 0%,#eef4fa 100%);
  border-top:1px solid rgba(15,23,42,.05);
  border-bottom:1px solid rgba(15,23,42,.05);
}

/* ---------- METHOD SECTION ---------- */

.seo-method{
  margin-top:50px !important;
  padding:clamp(26px,3vw,42px) !important;

  border-radius:24px !important;

  background:
    linear-gradient(145deg,#fff,#f7faff) !important;

  border:1px solid rgba(15,23,42,.08) !important;

  box-shadow:0 22px 55px rgba(15,23,42,.06) !important;
}

.seo-method-grid > div{
  border-radius:16px !important;
  transition:transform .18s ease,box-shadow .18s ease;
}

.seo-method-grid > div:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(15,23,42,.07);
}

/* ---------- GENERAL HOME CARD REFINEMENT ---------- */

.seo-home .card{
  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

/* ---------- MOBILE ---------- */

@media (max-width:760px){

  .seo-home-hero.home-v5-hero{
    margin-top:10px;
    padding:14px;
    border-radius:20px;
  }

  .seo-home-hero.home-v5-hero > .card{
    padding:10px !important;
  }

  .home-widget-showcase{
    padding:15px !important;
    border-radius:18px !important;
  }

  .seo-static-snapshot,
  .seo-static-data,
  .home-v5-predictor,
  .seo-method{
    border-radius:19px !important;
  }

  .seo-snapshot-grid > div{
    padding:13px 10px !important;
  }

  .seo-snapshot-grid > div::after{
    display:none;
  }

  .home-v5-predictor{
    padding:24px 18px !important;
  }

}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .seo-home *,
  .seo-home *::before,
  .seo-home *::after{
    transition:none !important;
  }
}


/* =========================================================
   HOME POLISH v1.1
   contrast + stronger section rhythm
   ========================================================= */

/* FIX HERO HEADING FROM OLD GRADIENT/TEXT-FILL RULES */

html body .seo-home .seo-home-hero h1,
html body .seo-home .home-v5-hero h1{
  color:#f8fbff !important;
  -webkit-text-fill-color:#f8fbff !important;
  -webkit-text-stroke:0 !important;
  background:none !important;
  background-image:none !important;
  opacity:1 !important;
  text-shadow:0 8px 34px rgba(0,0,0,.24) !important;
}


/* Make hero kicker cleaner */

html body .seo-home .home-v5-hero .seo-kicker{
  color:#60a5fa !important;
  -webkit-text-fill-color:#60a5fa !important;
}


/* =========================================================
   PUBLISHED TABLE — LESS DOMINANT
   ========================================================= */

html body .seo-home .seo-static-data{
  padding:30px !important;
}

html body .seo-home .seo-static-data h2{
  font-size:clamp(23px,2vw,30px) !important;
}

html body .seo-home .seo-static-table{
  font-size:13px !important;
}

html body .seo-home .seo-static-table th{
  padding:10px 12px !important;
}

html body .seo-home .seo-static-table td{
  padding:9px 12px !important;
}


/* =========================================================
   PREDICTOR — DARK FEATURE BAND
   ========================================================= */

html body .seo-home .home-v5-predictor{
  position:relative !important;
  overflow:hidden !important;

  background:
    radial-gradient(circle at 82% 10%,
      rgba(59,130,246,.25),
      transparent 35%),
    radial-gradient(circle at 10% 100%,
      rgba(13,148,136,.12),
      transparent 30%),
    linear-gradient(135deg,#071526 0%,#0b2038 55%,#102b49 100%)
    !important;

  border:1px solid rgba(148,163,184,.15) !important;

  box-shadow:
    0 28px 70px rgba(2,8,23,.18),
    inset 0 1px 0 rgba(255,255,255,.05)
    !important;
}


/* subtle glow */

html body .seo-home .home-v5-predictor::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-180px;
  top:-220px;
  border-radius:50%;
  background:rgba(59,130,246,.13);
  filter:blur(8px);
  pointer-events:none;
}


/* predictor typography */

html body .seo-home .home-v5-predictor h2,
html body .seo-home .home-v5-predictor h3,
html body .seo-home .home-v5-predictor strong{
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}

html body .seo-home .home-v5-predictor p,
html body .seo-home .home-v5-predictor span,
html body .seo-home .home-v5-predictor small{
  color:#c1cede !important;
}

html body .seo-home .home-v5-predictor .seo-kicker{
  color:#60a5fa !important;
}


/* trust/info cards inside predictor */

html body .seo-home .home-v5-trust > *,
html body .seo-home .home-v5-predictor-copy .card{
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(255,255,255,.10) !important;
}


/* route diagram */

html body .seo-home .home-v5-route{
  position:relative !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.045)
    )
    !important;

  border:1px solid rgba(255,255,255,.11) !important;

  box-shadow:
    0 20px 45px rgba(0,0,0,.18)
    !important;
}

html body .seo-home .home-v5-route-title{
  color:#fff !important;
}

html body .seo-home .home-v5-route-row{
  border-color:rgba(255,255,255,.08) !important;
}


/* =========================================================
   EXPLORE SECTION — SOFT FULL WIDTH BAND
   ========================================================= */

html body .seo-home #visual-benchmark-analytics{
  position:relative !important;
  isolation:isolate;
  margin-top:70px !important;
  margin-bottom:70px !important;
  padding-top:54px !important;
  padding-bottom:54px !important;
}


/* full viewport visual band */

html body .seo-home #visual-benchmark-analytics::before{
  content:"";
  position:absolute;
  z-index:-1;

  top:0;
  bottom:0;

  left:50%;
  width:100vw;

  transform:translateX(-50%);

  background:
    radial-gradient(circle at 10% 20%,
      rgba(59,130,246,.06),
      transparent 25%),
    linear-gradient(
      180deg,
      #f3f7fc 0%,
      #eaf1f8 100%
    );

  border-top:1px solid rgba(15,23,42,.055);
  border-bottom:1px solid rgba(15,23,42,.055);
}


/* Explore cards */

html body .seo-home #visual-benchmark-analytics .card,
html body .seo-home #visual-benchmark-analytics a{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

html body .seo-home #visual-benchmark-analytics .card:hover{
  transform:translateY(-3px);
  border-color:rgba(37,99,235,.18) !important;
  box-shadow:0 18px 40px rgba(15,23,42,.08) !important;
}


/* =========================================================
   METHOD SECTION
   ========================================================= */

html body .seo-home .seo-method{
  margin-top:68px !important;
  margin-bottom:34px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  html body .seo-home .home-v5-predictor{
    padding:25px 18px !important;
  }

  html body .seo-home #visual-benchmark-analytics{
    margin-top:40px !important;
    margin-bottom:40px !important;
    padding-top:36px !important;
    padding-bottom:36px !important;
  }

  html body .seo-home .seo-static-data{
    padding:20px 15px !important;
  }

}


/* =========================================================
   HOME POLISH v1.5
   Keep original widget appearance.
   Fix predictor light cards only.
   ========================================================= */


/* Predictor's three informational cards are LIGHT,
   so their copy must be dark. */

html body .seo-home .home-v5-predictor .home-v5-trust > *{
  background:#f3f8fd !important;
  border:1px solid rgba(15,23,42,.10) !important;
  color:#17324d !important;
}


/* card headings */
html body .seo-home .home-v5-predictor .home-v5-trust strong,
html body .seo-home .home-v5-predictor .home-v5-trust h3,
html body .seo-home .home-v5-predictor .home-v5-trust b{
  color:#17324d !important;
  -webkit-text-fill-color:#17324d !important;
  opacity:1 !important;
}


/* card descriptions */
html body .seo-home .home-v5-predictor .home-v5-trust p,
html body .seo-home .home-v5-predictor .home-v5-trust span,
html body .seo-home .home-v5-predictor .home-v5-trust small{
  color:#64788d !important;
  -webkit-text-fill-color:#64788d !important;
  opacity:1 !important;
}


/* prevent dark predictor rule from recoloring these light cards */
html body .seo-home .home-v5-predictor .home-v5-trust > * *{
  opacity:1 !important;
}


/* subtle hover only */
html body .seo-home .home-v5-predictor .home-v5-trust > *{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

html body .seo-home .home-v5-predictor .home-v5-trust > *:hover{
  transform:translateY(-2px);
  border-color:rgba(37,99,235,.20) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}



/* =========================================================
   HOME POLISH v1.6
   Fix ONLY non-hover widget headings.
   Preserve original widget hover/color behavior.
   ========================================================= */


/* Showcase main heading */
html body .seo-home
.home-widget-showcase-head strong{
  color:#f7fbff !important;
  -webkit-text-fill-color:#f7fbff !important;
  opacity:1 !important;
}


/* Card titles:
   fix only when mouse is NOT over the card.
   Hover remains controlled by original widget CSS.
*/
html body .seo-home
a.home-widget-card:not(:hover) h2,

html body .seo-home
a.home-widget-card:not(:hover) h3,

html body .seo-home
a.home-widget-card:not(:hover) h4,

html body .seo-home
a.home-widget-card:not(:hover) .home-widget-title,

html body .seo-home
a.home-widget-card:not(:hover) .home-widget-card-title{
  color:#edf5ff !important;
  -webkit-text-fill-color:#edf5ff !important;
  opacity:1 !important;
}


/* Country widget title too */
html body .seo-home
#hw-country-card:not(:hover) h2,

html body .seo-home
#hw-country-card:not(:hover) h3,

html body .seo-home
#hw-country-card:not(:hover) h4{
  color:#edf5ff !important;
  -webkit-text-fill-color:#edf5ff !important;
  opacity:1 !important;
}


/* IMPORTANT:
   no :hover rules here.
   original widget color transition stays intact.
*/


/* =========================================================
   HOME POLISH v1.7
   Improve explainer readability only
   ========================================================= */

html body .seo-home .home-widget-explainer{
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.16) !important;
}

/* Titles */
html body .seo-home .home-widget-explainer strong,
html body .seo-home .home-widget-explainer b{
  color:#f3f8ff !important;
  -webkit-text-fill-color:#f3f8ff !important;
  opacity:1 !important;
  font-weight:700 !important;
}

/* Description text */
html body .seo-home .home-widget-explainer p,
html body .seo-home .home-widget-explainer span:not(.home-widget-explainer-icon){
  color:#b8c8da !important;
  -webkit-text-fill-color:#b8c8da !important;
  opacity:1 !important;
}

/* LIVE / 1:1 / </> icon */
html body .seo-home .home-widget-explainer-icon{
  color:#d9edff !important;
  -webkit-text-fill-color:#d9edff !important;

  background:rgba(96,165,250,.11) !important;
  border-color:rgba(191,219,254,.55) !important;

  opacity:1 !important;
}

/* Widget Builder link */
html body .seo-home .home-widget-explainer a,
html body .seo-home .home-widget-explainer a:visited{
  color:#3b9cff !important;
  -webkit-text-fill-color:#3b9cff !important;
  opacity:1 !important;
  font-weight:700 !important;
}

html body .seo-home .home-widget-explainer a:hover{
  color:#75baff !important;
  -webkit-text-fill-color:#75baff !important;
}