/* ============================================================
   ezeeVPN page - Figma frame 6191:3059
   ("ezeeVPN — High Fidelity v1 (Desktop 1440)").
   Shared components (header, steps, brand panel, FAQ, CTA, footer)
   come from assets/css/ezee.css; only page layout lives here.
   ============================================================ */

/* ---------- 01 Hero (6191:3101) ---------- */
.vpn-hero{position:relative;overflow:hidden;background:var(--surface)}
/* Copy frame sits at y=133 in the 700px hero (438px tall) - raw Figma positions */
.vpn-hero__inner{position:relative;z-index:1;display:flex;align-items:center;min-height:700px;padding-block:133px 129px}
.vpn-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);width:554px;max-width:46vw}
.vpn-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);padding-top:var(--space-3)}
/* Right-hand art: photo + shield + "Secured internet" pill + white fade, exported as one image (6424:13346) */
.vpn-hero__art{position:absolute;top:0;right:0;width:min(766px,53.2%);height:100%}
.vpn-hero__art img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:left top}

/* ---------- Trust bar (6375:7661) ---------- */
.vpn-trust{border-block:1px solid var(--border);padding-block:var(--space-6);background:var(--surface)}
.vpn-trust__list{display:flex;align-items:center;justify-content:center;gap:40px} /* raw 40px gap in Figma */
.vpn-trust__item{position:relative;display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.vpn-trust__item img{flex:none}
/* 1x20 divider centred in the 40px gaps */
.vpn-trust__item + .vpn-trust__item{padding-left:41px}
.vpn-trust__item + .vpn-trust__item::before{content:"";position:absolute;left:0;top:4px;width:1px;height:20px;background:var(--border-strong)}

/* ---------- Feature cards (02 What it actually does 6191:42256, 05 VPN features 6266:2) ---------- */
.vpn-cards{display:grid;gap:var(--space-4)}
.vpn-cards--4{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--space-6)}
.vpn-cards--3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--space-7)}
.vpn-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-4);background:var(--white);border-radius:var(--radius-lg)}
.vpn-card__icon{display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;border-radius:var(--radius-lg);background:var(--gray-50)}
.vpn-card__icon img{width:auto;height:auto}

/* ---------- 07 Personal information (6274:2) ---------- */
.vpn-privacy__head{display:flex;flex-direction:column;gap:20px;max-width:547px;margin-inline:auto;text-align:center} /* raw 20px gap / 547px width */
.vpn-privacy__head p{color:var(--text-muted)}
.vpn-privacy{display:grid;grid-template-columns:minmax(0,603fr) minmax(0,573fr);gap:var(--space-5);align-items:start;margin-top:var(--space-7)}
.vpn-privacy__art img{width:603px;height:auto}
.vpn-points{display:flex;flex-direction:column;gap:var(--space-3)}
.vpn-point{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-5) var(--space-4);background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md)}
.vpn-point__icon{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px}
.vpn-point__icon img{width:auto;height:auto}
.vpn-point__text{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0} /* raw 6px gap */
.vpn-point__text p{color:var(--text-muted)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .vpn-hero__inner{min-height:0;padding-block:var(--space-8) var(--space-6)}
  .vpn-hero__copy{width:auto;max-width:640px}
  .vpn-hero__art{position:relative;width:100%;max-width:766px;height:auto;margin-left:auto}
  .vpn-hero__art img{height:auto;max-width:100%}

  .vpn-cards--4,.vpn-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}

  .vpn-privacy{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .vpn-privacy__art{justify-self:center;max-width:603px}
}

@media (max-width:900px){
  .vpn-trust__list{flex-wrap:wrap;column-gap:var(--space-6);row-gap:var(--space-3)}
  .vpn-trust__item + .vpn-trust__item{padding-left:0}
  .vpn-trust__item + .vpn-trust__item::before{display:none}
}

@media (max-width:640px){
  .vpn-hero__inner{padding-block:var(--space-7) var(--space-5)}
  .vpn-hero__actions .btn{flex:1}
  .vpn-cards--4,.vpn-cards--3{grid-template-columns:minmax(0,1fr)}
  .vpn-privacy__art img{width:100%}
}