/* ==========================================================================
   Landing page blocks
   ========================================================================== */

/* ---- Hero: drifting 3D field --------------------------------------------
   The v2 hero background, ported to our palette: two drifting layers of dots
   at different sizes and speeds (which is what reads as depth), plus a slow
   breathing bloom behind them. Pure CSS — no canvas, no library, no per-frame
   JavaScript, and it costs nothing on mobile data.

   The video used to live here. It now has its own section below, where it can
   actually be watched instead of being a texture behind text.
   -------------------------------------------------------------------------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--s9) var(--s8);
  background:
    radial-gradient(120% 90% at 78% 4%, #123C74 0%, transparent 55%),
    radial-gradient(90% 80% at 8% 92%, #0E4E7A 0%, transparent 58%),
    var(--navy-deep);
  color: var(--white);
}

.hero__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

/* Far layer: small, dim, slow. */
.hero__bg::before,
.hero__bg::after {
  content: '';
  position: absolute; inset: -60% -20%;
  background-repeat: repeat;
  will-change: transform;
}
.hero__bg::before {
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px,  rgba(126,214,214,.55), transparent),
    radial-gradient(1px 1px   at 90px 40px,   rgba(255,255,255,.40), transparent),
    radial-gradient(1.5px 1.5px at 160px 120px, rgba(126,214,214,.38), transparent),
    radial-gradient(1px 1px   at 230px 80px,  rgba(255,255,255,.30), transparent),
    radial-gradient(1.5px 1.5px at 300px 150px, rgba(96,168,232,.45), transparent),
    radial-gradient(1px 1px   at 420px 60px,  rgba(255,255,255,.28), transparent);
  background-size: 480px 220px;
  animation: dotDriftFar 90s linear infinite;
}
/* Near layer: bigger, brighter, faster — the parallax between the two is the
   whole effect. */
.hero__bg::after {
  background-image:
    radial-gradient(2.5px 2.5px at 60px 90px,  rgba(23,183,183,.60), transparent),
    radial-gradient(2px 2px   at 210px 40px,  rgba(255,255,255,.45), transparent),
    radial-gradient(2.5px 2.5px at 350px 190px, rgba(96,168,232,.55), transparent),
    radial-gradient(2px 2px   at 520px 120px, rgba(23,183,183,.40), transparent);
  background-size: 620px 300px;
  animation: dotDriftNear 55s linear infinite;
}

@keyframes dotDriftFar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(120px, -220px, 0); }
}
@keyframes dotDriftNear {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-180px, -300px, 0); }
}

/* Slow bloom, so the field is not evenly lit. */
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 52% at 62% 42%,
    rgba(23,183,183,.20) 0%, rgba(11,99,176,.12) 42%, transparent 72%);
  animation: heroBloom 18s ease-in-out infinite;
}
@keyframes heroBloom {
  0%, 100% { opacity: .65; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg::before, .hero__bg::after, .hero__veil { animation: none; }
}

.hero h1 { color: var(--white); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero .lead { color: #DCE6F2; }
.hero .eyebrow { color: var(--teal); }

/* The film is 16:9, so it needs the wider half — a video column narrower than
   the text column reads as an afterthought. */
.hero__in {
  display: grid; gap: var(--s7); align-items: center;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
.hero__copy .lead { margin-bottom: var(--s5); }
.hero__note {
  margin-top: var(--s5); margin-bottom: 0;
  color: #B9C9DE; max-width: 52ch;
  padding-inline-start: var(--s3);
  border-inline-start: 3px solid var(--teal);
}

.btn--lg { padding: 16px var(--s6); font-size: 1.02rem; min-height: 54px; }
.btn--glass {
  background: rgba(255,255,255,.10); color: var(--white);
  border-color: rgba(255,255,255,.32); backdrop-filter: blur(6px);
}
.btn--glass:hover { background: rgba(255,255,255,.20); border-color: var(--white); }

/* ---- Group film carousel, inside the hero --------------------------------
   It used to sit in a tinted band of its own: a full-width white block wrapped
   around a 980 px video, which is what "quite white for nothing" meant. In the
   hero it is exactly as wide as its column and nothing frames it but the film.
   -------------------------------------------------------------------------- */

.gvid { position: relative; }
.gvid__stage {
  position: relative; margin-inline: auto; max-width: 980px;
  border-radius: var(--r-lg); overflow: hidden;
  background: #000; box-shadow: var(--e3, var(--shadow-lg));
  aspect-ratio: 16 / 9;
}

/* In the hero the caption sits on the dark background, so it needs the light
   treatment — and the whole block is capped by the column, not by 980 px. */
.hero__film .gvid__stage { max-width: none; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.hero__film .gvid__cap { max-width: none; }
.hero__film .gvid__title { color: var(--white); font-size: .95rem; }
.hero__film .gvid__dot { background: rgba(255,255,255,.32); }
.hero__film .gvid__dot.is-on { background: var(--teal); }
/* Every slide is stacked in the same box and faded in and out.
   `opacity: 0` alone hides a slide but leaves it ON TOP of the visible one and
   still clickable — so pressing play on film 1 actually hit film 2's controls:
   you heard film 2 and watched film 1 sit still. An invisible slide must also
   be untouchable, and `visibility: hidden` takes it out of the tab order too. */
.gvid__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s, visibility 0s linear .4s;
}
.gvid__slide.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .4s, visibility 0s;
}
.gvid__slide video,
.gvid__slide iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }

.gvid__cap {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4); flex-wrap: wrap;
  margin-inline: auto; max-width: 980px; margin-top: var(--s4);
}
.gvid__title { margin: 0; font-weight: 600; }
.gvid__nav { display: flex; gap: var(--s2); }
.gvid__btn {
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--grey-200); border-radius: var(--r-full);
  background: var(--white); color: var(--navy); font-size: 1.1rem;
  transition: transform .18s, box-shadow .18s;
}
.gvid__btn:hover { transform: scale(1.08); box-shadow: var(--e2, var(--shadow)); }
.gvid__dots { display: flex; gap: 6px; justify-content: center; margin-top: var(--s4); }
.gvid__dot {
  width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-full); background: var(--grey-200);
}
.gvid__dot.is-on { background: var(--blue); width: 22px; }

/* One film: the controls would be furniture with nothing to do. */
.gvid--single .gvid__nav, .gvid--single .gvid__dots { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gvid__slide, .gvid__btn { transition: none; }
}

/* ---- Why us -------------------------------------------------------------- */

.whyus {
  display: grid; gap: var(--s4); margin-top: var(--s7);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) { .whyus { grid-template-columns: 1fr; } }

.whyus .card { position: relative; padding-inline-start: var(--s7); }
.whyus h3 { margin: 0 0 var(--s2); font-size: 1.05rem; }
.whyus p { margin: 0; }
.whyus__n {
  position: absolute; inset-block-start: var(--s5); inset-inline-start: var(--s5);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--teal);
}

/* Verified figures under the promise */
.hero__stats {
  display: grid; gap: var(--s4); margin-top: var(--s8);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding-top: var(--s6); border-top: 1px solid rgba(255,255,255,.14);
}
.hero__stats .stat__n { color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.hero__stats .stat__l { color: #9FB4CE; }

@media (max-width: 900px) {
  .hero { padding-block: var(--s7) var(--s6); }
  .hero__in { grid-template-columns: 1fr; }
  /* Film first on a phone: it loads nothing until tapped, and it is the
     fastest way to see that this is a real hospital. */
  .hero__film { order: -1; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Steps --------------------------------------------------------------- */

/* Exactly 2x2 — four steps read as a square, not a ragged row.
   The rules moved to css/main.css: medipol/formations.html uses the same list
   and does not load this file, so it was showing the browser's list markers
   next to our own numbers. Nothing step-related belongs here any more. */

/* ---- "Why it's free" — answers the trust objection ----------------------- */

.free {
  border-inline-start: 4px solid var(--teal);
  background: var(--teal-soft); border-color: var(--teal-soft);
  box-shadow: none;
}
.free h2 { font-size: 1.4rem; }

/* .card--caveat moved to css/main.css — eleven places use it and not one of
   them is this page, so on every one of them it was rendering as a plain white
   card, including the medical disclaimer. */

/* ---- Stats --------------------------------------------------------------- */

.stats { margin-top: var(--s7); }
.stats .stat { padding-block: var(--s3); }

@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
}

/* ---- "You are already in Istanbul" ----------------------------------------
   A band, not a card in a grid: it addresses one specific reader and has to be
   recognisably not part of the funnel above it. Teal edge because it is the
   fast path — blue is the ordinary one.
   -------------------------------------------------------------------------- */

.urgentcard {
  display: grid; gap: var(--s5); align-items: center;
  background: var(--white); border: 1px solid var(--grey-200);
  border-inline-start: 4px solid var(--teal);
  border-radius: var(--r-lg); padding: var(--s6);
  box-shadow: var(--e2, var(--shadow));
}
@media (min-width: 860px) {
  .urgentcard { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s7); }
}
.urgentcard h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: var(--s2); }
.urgentcard .lead { margin: 0; }
.urgentcard .eyebrow { color: var(--teal); }
.urgentcard .btn { white-space: nowrap; }

/* The funding band under the four steps. Teal is the "there is another way"
   accent on this site (same as the Istanbul band); blue is the funnel itself.
   A different colour is how a reader knows this is not step five. */
.urgentcard--fund { border-inline-start-color: var(--teal); }
.urgentcard--fund h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); margin-bottom: var(--s2);
}