/* ==========================================================================
   HyperVPN — css/index.css
   Home page only: hero, download, bento, plans teaser, locations,
   partner split, blog teaser, reviews, FAQ 2-col, closing CTA (§6.1)
   ========================================================================== */

.nb{white-space:nowrap}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero{min-height:min(calc(100svh - var(--header-h)),860px);padding-top:48px;padding-bottom:72px;display:flex;flex-direction:column;justify-content:center}
.hero__grid{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.hero__copy{display:grid;gap:22px;justify-items:start;min-width:0}
.hero__copy .eyebrow{margin:0}
.hero__copy h1{max-width:16ch}
.hero__copy .lead{margin:0;max-width:52ch}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero__note{margin:-10px 0 0;font-size:14px;color:var(--text-3)}
.hero__chips{margin-top:2px}
.hero__stats{margin-top:18px;width:100%}
.hero__visual{display:flex;justify-content:center;min-width:0}
.hero-card .mascot{max-height:100%}
@media (max-width:1023px){
  .hero{min-height:0;padding-top:32px;padding-bottom:56px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .hero__copy h1{max-width:none}
  .hero__copy .lead{max-width:none}
  .hero__visual{justify-content:stretch}
  .hero-card{width:100%}
}
@media (max-width:640px){
  .hero__copy{gap:18px}
  .hero__actions{width:100%}
  .hero__actions .btn{flex:1 1 auto}
  .hero__chips .chip{height:34px;font-size:13.5px}
}

/* --------------------------------------------------------------------------
   2. Download
   -------------------------------------------------------------------------- */
.download .section-head{margin-bottom:32px}
.download__note{margin:20px 0 0;text-align:center;font-size:14px;color:var(--text-3)}
.pdetail__swap{will-change:opacity,transform}
.pdetail__aside .btn--primary.btn--store{box-shadow:var(--border-inner)}
.pdetail__aside .btn--primary.btn--store:hover{box-shadow:0 12px 32px -12px var(--accent-glow),var(--border-inner)}
.pdetail__aside .btn--primary.btn--store:focus-visible{box-shadow:var(--shadow-focus),var(--border-inner)}
.pdetail__glyph{display:flex;justify-content:center;margin-top:12px}
.pdetail__glyph .devglyph{margin-top:0}
@media (min-width:900px){
  .pdetail__glyph{justify-content:flex-start}
}

/* --------------------------------------------------------------------------
   3. Features — bento (components live in style.css; page spacing only)
   -------------------------------------------------------------------------- */
.features .section-head{max-width:720px}
.ftile--promo h3{font-size:clamp(22px,2.2vw,28px);max-width:18ch}
.ftile--promo p{max-width:48ch}

/* --------------------------------------------------------------------------
   4. Plans teaser
   -------------------------------------------------------------------------- */
.plans-teaser__seg{display:grid;justify-items:center;margin:-8px 0 32px}
.plans-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan-mini{display:grid;gap:10px;align-content:start;color:var(--text-2)}
.plan-mini--hot{border-color:rgba(255,142,110,.4);box-shadow:var(--border-inner),var(--shadow-accent),var(--shadow-1)}
.plan-mini--hot:hover{border-color:rgba(255,142,110,.55)}
.plan-mini__head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
.plan-mini .plan__priceline{margin-top:4px}
.plan-mini .plan__price{font-size:clamp(32px,3vw,40px)}
.plan-mini__sub{margin:0;font-size:15px;color:var(--text-2)}
.plan-mini__total{margin:0;font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.plan-mini .card__link{margin-top:10px}
.plan-mini__cta{cursor:pointer;min-height:44px;margin-top:6px;align-self:start;border-radius:var(--r-xs);padding:0 2px}
.plan-mini__cta:hover .btn__arrow{width:24px}
.plan-mini__head h3{font:600 18px/1.2 var(--font-display);margin:0}
.plans-teaser__line{margin:28px 0 0;text-align:center;font-size:14px;color:var(--text-3)}
.plans-teaser__cta{display:flex;justify-content:center;margin-top:20px}
@media (max-width:899px){
  .plans-mini{grid-template-columns:minmax(0,1fr);max-width:480px;margin-inline:auto}
}

/* --------------------------------------------------------------------------
   5. Locations
   -------------------------------------------------------------------------- */
.locations .marquee{margin:0 0 32px}
/* rows: number · name (takes the slack) · flags · footer — the flag rows and «из Москвы» lines line up across
   all five cards even when «Ближний Восток и Африка» wraps to two lines */
.cluster{grid-template-rows:auto 1fr auto auto;align-content:stretch}
.cluster h3{align-self:start}
.cluster__flags{align-self:end}
.locations__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.locations__note{margin:0;font-size:14px;color:var(--text-3)}
.btn__arrow--down{transform:rotate(90deg);transition:transform var(--dur-3) var(--ease-out),width var(--dur-2) var(--ease-out)}
#countries-toggle:hover .btn__arrow--down{width:18px}
#countries-toggle[aria-expanded="true"] .btn__arrow--down{transform:rotate(-90deg)}
.country-grid__inner{visibility:hidden;transition:visibility 0s linear var(--dur-3)}
.country-grid.is-open .country-grid__inner{visibility:visible;transition-delay:0s}
.country-group:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   6. Partners + switch-over
   -------------------------------------------------------------------------- */
.partner-card{display:flex;flex-direction:column;align-items:flex-start}
/* the figure sits bottom-right, the heading top-left: let the h2 use the full width (2 lines at 1440) */
@media (min-width:900px){.partner-card{padding-right:var(--card-pad)}}
.partner-card h2{font-size:clamp(24px,2.4vw,32px);max-width:22ch;margin-bottom:12px}
.partner-card__text{font-size:16px;color:var(--text-2);max-width:40ch;margin:0}
.partner-card .btn{margin-top:auto;position:relative;z-index:1}
.partner-card__figure img{width:100%;height:100%;object-fit:contain;object-position:bottom}
.switch-card{gap:14px}
.switch-card__text{font-size:15px;color:var(--text-2);margin:0}
.switch-card__actions{margin-top:4px}
.switch-card__note{font-size:13px;color:var(--text-3);margin:0}
@media (max-width:899px){
  .partner-card h2{max-width:none}
  .partner-card .btn{margin-top:20px}
}
/* tablet: the figure overlaps the bottom-right corner and the text flows beside it (no 200px band under the button) */
@media (min-width:641px) and (max-width:899px){
  .partner-card{padding-right:240px;padding-bottom:var(--card-pad);min-height:300px}
  .partner-card__figure{width:220px;height:260px;right:-12px;bottom:0}
}
@media (max-width:640px){
  .partner-card__stats{gap:20px 24px}
  .partner-card__stats .stat{font-size:32px}
}

/* --------------------------------------------------------------------------
   7. Blog teaser
   -------------------------------------------------------------------------- */
.section-head.blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.blog-head>div{display:grid;gap:14px;justify-items:start}
.blog-head .lead{margin:0}
.post-card__read{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:600 14px var(--font-display);color:var(--accent-bright);white-space:nowrap}
html[data-theme="light"] .post-card__read{color:var(--accent)}
.post-card__meta .post-card__read .btn__arrow{margin-left:0;width:16px}
.post-card:hover .post-card__read .btn__arrow{width:24px}
@media (min-width:641px) and (max-width:1023px){
  .blog-teaser .post-grid>.post-card:nth-child(3){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:24px;row-gap:10px;align-items:start;align-content:start}
  .blog-teaser .post-grid>.post-card:nth-child(3) .post-card__cover{grid-row:1/4;height:auto;min-height:160px;align-self:stretch}
  .blog-teaser .post-grid>.post-card:nth-child(3) .post-card__meta{align-self:end;margin-top:6px}
}
@media (max-width:640px){
  .section-head.blog-head .btn{width:100%}
}

/* --------------------------------------------------------------------------
   8. Reviews
   -------------------------------------------------------------------------- */
.reviews{position:relative}
.reviews-summary{margin-bottom:28px}
.review__sub .icon{color:var(--text-3)}
@media (max-width:640px){
  .reviews>.review{min-height:0}
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq-section .section-head{margin-bottom:24px}
.faq-more{margin:24px 0 0;font-size:15px}
.faq-more a{font:600 15px var(--font-display);text-decoration:none}
.faq-more a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   10. Closing CTA
   -------------------------------------------------------------------------- */
.closing-section{padding-top:0}
.closing{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center;padding:clamp(28px,4vw,48px)}
.closing__body{display:grid;gap:16px;justify-items:start;min-width:0}
.closing__cta-short{display:none}
.closing__body .eyebrow{margin:0}
.closing h2{max-width:16ch}
.closing__text{font-size:16px;color:var(--text-2);margin:0;max-width:40ch}
.closing__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* chip stack on a vertical dashed lane (same motif as the hero stat strip separators) */
.closing__aside{position:relative;display:grid;gap:10px;justify-items:start;align-content:center;justify-self:end;padding-left:28px}
.closing__aside::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:repeating-linear-gradient(180deg,var(--lane) 0 10px,transparent 10px 16px)}
@media (max-width:1023px){
  .closing{grid-template-columns:minmax(0,1fr);gap:24px}
  .closing__aside{display:flex;flex-wrap:wrap;justify-self:start;padding-left:0}
  .closing__aside::before{display:none}
}
@media (max-width:640px){
  .closing__actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr)}
  .closing__actions .btn{width:100%;min-width:0}
  .closing__cta-long{display:none}
  .closing__cta-short{display:inline}
}