/* Styles specific to each page section, in page order: shared section headings,
   hero, pricing, faq helpers, final CTA, footer. */

/* ===== Section rhythm ===== */
.section-pad{padding:96px 0;}

.section-head{margin-bottom:56px;}
.section-head.center{text-align:center; max-width:780px; margin-left:auto; margin-right:auto;}

.eyebrow-sm{
  display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-xs); font-weight:700; color:var(--blue-strong);
  letter-spacing:0.2px; margin-bottom:var(--space-4); padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill);
}
.eyebrow-sm::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--grad-gold); animation:pulse-gold 3s ease-in-out infinite;}

.section-title{
  font-size:clamp(29px, 3.4vw, 44px); font-weight:700; color:var(--navy); line-height:1.38; margin-bottom:var(--space-4);
}
.section-sub{font-size:var(--fs-lg); color:var(--slate); max-width:660px; line-height:1.9;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding:92px 0 112px;
  background: var(--grad-navy);
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(850px 520px at 88% -10%, rgba(16,185,129,0.11), transparent 62%),
    radial-gradient(920px 660px at -8% 36%, rgba(96,165,250,0.22), transparent 60%);
  pointer-events:none;
}
/* Fine technical grid — the "product/technology" layer shared with the final CTA */
.hero::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to left, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(720px 480px at 72% 8%, #000 0%, transparent 74%);
  mask-image:radial-gradient(720px 480px at 72% 8%, #000 0%, transparent 74%);
  pointer-events:none;
}
/* Named areas: the disclaimer lives in its own row under the copy, while the
   product panel spans both rows — copy and mockup read as one composition. */
.hero-grid{
  display:grid; grid-template-columns:1.04fr 0.96fr;
  grid-template-areas:"copy visual" "note visual";
  column-gap:64px; row-gap:var(--space-7); align-items:start;
  position:relative; z-index:2;
}
.hero-copy{grid-area:copy;}
.hero-note{grid-area:note;}
.hero-visual{grid-area:visual; align-self:center;}

/* --- Hero copy --- */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2); background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:500; color:var(--gold-1);
  box-shadow:0 4px 18px -8px rgba(16,185,129,0.25);
}
.eyebrow .ic{width:15px; height:15px;}
.hero h1{
  font-size:clamp(35px, 4.5vw, 58px); line-height:1.3; margin:var(--space-5) 0 var(--space-4); color:#fff;
  max-width:580px;
}
.hero h2.sub{
  font-size:clamp(17px, 1.95vw, 21.5px); font-weight:500; margin-bottom:var(--space-4);
  color:rgba(255,255,255,0.92); line-height:1.75;
}
.hero .desc{
  font-size:var(--fs-base); color:rgba(255,255,255,0.75); max-width:520px; margin-bottom:var(--space-9); line-height:1.95;
}
.hero-ctas{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;}

/* --- Disclaimer (own row, reassures without competing with the CTA) --- */
.hero-note{
  display:flex; gap:var(--space-2); align-items:flex-start;
  padding:var(--space-3) var(--space-4);
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:var(--radius-sm);
  font-size:var(--fs-xs); line-height:1.8; color:rgba(255,255,255,0.62);
}
.note-ico{color:var(--gold-1); display:flex; margin-top:var(--space-1);}
.note-ico .ic{width:15px; height:15px;}

/* --- Hero visual : real interface capture (assets/wpl.png) --- */
.hero-visual{
  position:relative; z-index:2; min-height:480px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero-visual::before{
  content:'';
  position:absolute; inset:-10% -14%;
  background:
    radial-gradient(420px 320px at 68% 24%, rgba(16,185,129,0.10), transparent 66%),
    radial-gradient(500px 360px at 24% 78%, rgba(96,165,250,0.22), transparent 64%);
  filter:blur(8px);
  pointer-events:none;
}

/* --- Hero visual : image principale (capture réelle de l'interface) --- */
.hero-image{
  position:relative; z-index:2; width:100%; max-width:480px; height:auto;
  border-radius:var(--radius-lg);
}

/* ============================================================
   PRICING — countries sub-block container
   ============================================================ */
.pricing-section{position:relative;}

/* ============================================================
   COUNTRIES — grid of 31 country cards (inside the pricing section)
   ============================================================ */
.countries{margin-top:var(--space-10);}
.countries-head{text-align:center; max-width:680px; margin:0 auto var(--space-8);}
.countries-head .section-title{margin-bottom:var(--space-3);}
.countries-head .section-sub{font-size:var(--fs-md); color:var(--slate); margin:0 auto; line-height:1.9;}

.countries-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
}

.country-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-xs);
  position:relative;
  transition:transform .35s var(--ease-entrance), box-shadow .3s ease, border-color .3s ease;
}
.country-card:hover{transform:translateY(-4px); border-color:var(--line-blue); box-shadow:var(--shadow-sm);}

/* Flag zone — sits on top of the card; the flag symbol is centered on a soft gradient */
.country-media{
  height:118px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(150px 150px at 78% 0%, rgba(16,185,129,0.10), transparent 64%),
    radial-gradient(160px 160px at 14% 110%, rgba(96,165,250,0.16), transparent 62%),
    var(--bg2);
}
.country-flag{
  height:84px; width:auto;
  border-radius:5px; overflow:hidden;
  box-shadow:0 8px 20px -10px rgba(10,23,48,0.4), 0 0 0 1px rgba(10,23,48,0.10);
}
.country-card:hover .country-media{filter:brightness(1.02);}

.country-body{
  display:flex; flex-direction:column; flex:1; text-align:center;
  padding:44px var(--space-6) var(--space-6);
}

/* Icon badge — absolutely positioned, straddling the media/body boundary (50/50) */
.country-ico{
  position:absolute; top:90px; left:50%; transform:translateX(-50%);
  width:56px; height:56px; border-radius:16px;
  background:rgb(11 47 91); color:rgb(255 255 255); border:1px solid var(--line-blue);
  display:flex; align-items:center; justify-content:center;
  z-index:1; box-shadow:0 0 0 3px var(--paper);
}
.country-ico .ic{width:26px; height:26px; stroke-width:2;}

/* Title reserves a consistent zone so descriptions start level across cards */
.country-card h3{font-size:var(--fs-md); font-weight:700; color:var(--navy); line-height:1.5; min-height:2.5em; margin-bottom:var(--space-3);}
.country-card p{font-size:var(--fs-sm); color:var(--slate); line-height:1.9; margin-bottom:var(--space-5);}

.country-card .country-cta{margin-top:auto; width:100%;}

/* ============================================================
   FINAL CTA
   ============================================================ */
/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink); color:rgba(255,255,255,0.75); padding:68px 0 30px;}
.footer-top{
  display:grid; grid-template-columns:1fr 1.2fr auto; gap:48px; align-items:start;
  padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo-img{height:54px; width:auto; display:block;}
.footer-brand p{margin-top:var(--space-4); font-size:var(--fs-sm); color:rgba(255,255,255,0.58); max-width:300px; line-height:1.9;}
.footer-cta{ /* no card frame — content sits directly in the footer */ }
.footer-cta h4{font-size:20px; font-weight:700; color:#fff; margin-bottom:var(--space-3); line-height:1.5;}
.footer-cta p{font-size:var(--fs-sm); color:rgba(255,255,255,0.66); line-height:1.9; margin-bottom:var(--space-5);}
.footer-cta .btn{width:100%;}
.footer-links{display:flex; gap:72px; flex-wrap:wrap;}
.footer-col h5{font-size:var(--fs-xs); font-weight:700; color:#fff; margin-bottom:var(--space-4); letter-spacing:0.3px;}
.footer-col li{margin-bottom:var(--space-3); font-size:var(--fs-sm);}
.footer-col a{transition:color .2s ease; display:inline-flex; align-items:center; gap:var(--space-2);}
.footer-col a:hover{color:var(--gold-1);}
.footer-col a .ic{width:15px; height:15px; opacity:0.85;}
.footer-disclaimer{
  font-size:var(--fs-xs); color:rgba(255,255,255,0.52); line-height:2;
  max-width:880px; margin:34px auto 0; text-align:center;
}
.footer-bottom{
  display:flex; justify-content:center; align-items:center; gap:var(--space-3); margin-top:var(--space-7); padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,0.08); font-size:var(--fs-xs); color:rgba(255,255,255,0.5);
}
.footer-sep{opacity:0.35;}
.footer-legal-link{
  color:rgba(255,255,255,0.6); transition:color .2s ease;
}
.footer-legal-link:hover{color:var(--gold-1);}