/* Home page. Measured from the original at 1440px; sizes scale down with the viewport. */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: clamp(560px, 42.8vw, 616px);
  overflow: hidden;
  background:
    radial-gradient(circle at 45.83% 11.13%, #00a1a7 0%, 17.5%, rgba(0,161,167,0) 35%),
    radial-gradient(circle at 30.23% 49.69%, #60dbe0 0%, 17.5%, rgba(96,219,224,0) 35%),
    radial-gradient(circle at 73.30% 47.94%, #08b4ba 0%, 17.5%, rgba(8,180,186,0) 35%),
    radial-gradient(circle at 70.13% 7.43%, #007b80 0%, 17.5%, rgba(0,123,128,0) 35%),
    radial-gradient(circle at 94.35% 89.62%, #00a1a7 0%, 20%, rgba(0,161,167,0) 40%),
    radial-gradient(circle at 7.13% 90.29%, rgba(220,239,238,.99) 0%, 25%, rgba(220,239,238,0) 50%),
    radial-gradient(circle at 19.04% 5.53%, #60dbe0 0%, 42%, rgba(96,219,224,0) 70%),
    radial-gradient(circle at 93.69% 11.43%, #007b80 0%, 42%, rgba(0,123,128,0) 70%),
    radial-gradient(circle at 48.90% 49.52%, #fff 0%, 100%, rgba(255,255,255,0) 100%);
}
.hero__orbit { position: absolute; top: 0; left: 0; width: 520px; height: 440px; transform-origin: top left; transform: scale(var(--orbit-scale, 1)); }
.hero__ring { position: absolute; left: 67px; top: -24px; width: 343px; height: 343px; }
.bubble {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 3.98px 3.98px 11.38px rgba(0,0,0,.13);
  object-fit: cover;
  animation: float 6s ease-in-out infinite;
}
.bubble--p6 { left: 192px; top: 0;     width: 73px;  height: 72px; animation-delay: -1s; }
.bubble--p3 { left: 432px; top: -1px;  width: 85px;  height: 85px; animation-delay: -2s; }
.bubble--p4 { left: 384px; top: 123px; width: 70px;  height: 70px; animation-delay: -3s; }
.bubble--p2 { left: 43px;  top: 145px; width: 167px; height: 166px; animation-delay: -4s; }
.bubble--p5 { left: 1px;   top: 338px; width: 85px;  height: 85px; animation-delay: -5s; }
.bubble--p1 { left: 265px; top: 352px; width: 85px;  height: 85px; }
@keyframes float { 50% { transform: translateY(-6px); } }

.hero__content {
  position: absolute;
  top: 41px;
  right: clamp(20px, 7.2vw, 104px);
  width: min(723px, 60vw);
  color: var(--white);
}
.hero__logo { width: clamp(220px, 22.8vw, 328px); height: auto; margin: 0 0 0 auto; }
.hero__title {
  margin-top: clamp(4px, 1.6vw, 6px);
  font-family: var(--f-alt);
  font-size: clamp(32px, 3.48vw, 50.09px);
  line-height: 1;
}
.hero__text {
  margin-top: 7px;
  font-family: var(--f-text);
  font-size: clamp(17px, 1.5vw, 21.63px);
  line-height: 1.5;
}
.hero__cta { width: min(335px, 100%); margin-top: 25px; text-align: center; }
.hero__cta .btn { width: 100%; }
.hero__note { margin-top: 12px; font-family: var(--f-text); font-size: 14.8px; line-height: 1.5; letter-spacing: .02em; }

/* ---------- Stats ---------- */
.stats {
  display: flex; justify-content: center; align-items: flex-start;
  height: 134px; padding-top: 25px;
  background: var(--teal); color: var(--white); text-align: center;
}
.stat { flex: 0 1 433px; }
.stats__divider { flex: none; width: 2px; height: 69px; margin: 0 7px; background: var(--yellow); }
.stat__num { font-family: var(--f-display); font-size: clamp(38px, 3.8vw, 54.64px); line-height: 1; }
.stat__label { margin-top: 4px; font-family: var(--f-text); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.4; }

/* ---------- Clients ---------- */
.home-clients { height: 169px; padding-top: 46px; }

/* ---------- Mission ---------- */
.mission { padding: 74px 20px 62px; text-align: center; }
.mission .section-title { margin-top: 7px; }
.mission__text { margin-top: 26px; font-family: var(--f-alt); font-size: 16px; line-height: 1.4; }
.mission__video {
  width: min(564px, 100%);
  aspect-ratio: 564 / 311;
  margin: 41px auto 0;
  background: #000;
  object-fit: cover;
}
.mission__caption { margin-top: 7px; font-family: var(--f-button); font-size: 27.32px; line-height: 1.4; color: var(--teal); }

/* ---------- Values ---------- */
.values { padding: 86px 20px 78px; background: var(--soft); }
.values .section-title { margin-top: 6px; }
.values__cards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 2.5vw, 36px);
  max-width: 1204px; margin: clamp(40px, 5.6vw, 62px) auto 0;
}
.value-card {
  flex: 1 1 300px; max-width: 377px; min-height: 210px;
  padding: 26px 53px 24px 24px;
  background: var(--white);
  border-radius: 8px;
  border-right: 3px solid var(--teal);
  box-shadow: 0 1px 7px 1px rgba(0,0,0,.09);
}
.value-card img { width: 40px; height: 40px; }
.value-card h3 { margin-top: 6px; font-family: var(--f-display); font-size: 22px; line-height: 1.4; }
.value-card p { max-width: 267px; margin-top: 4px; font-family: var(--f-body); font-size: 14px; line-height: 1.4; }

/* ---------- Services ---------- */
.services { position: relative; overflow: hidden; background: var(--teal); color: var(--white); text-align: center; }
.services__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .12; }
.services__inner { position: relative; padding: 65px 20px 119px; }
.services .section-title { margin-top: 10px; }
.services__lead { margin-top: 12px; font-family: var(--f-title); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; color: var(--yellow); }
.services__text { max-width: 537px; margin: 25px auto 0; font-family: var(--f-body); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.4; }
.services__text + .services__text { margin-top: 25px; }
.service-grid { display: grid; justify-content: center; gap: 9px; margin: 0 auto; }
.service-grid li { display: flex; flex-direction: column; align-items: center; padding: 26px 7px 0; min-height: 180px; }
.service-grid span { margin-top: 18px; font-family: var(--f-title); font-size: clamp(17px, 1.44vw, 20.71px); line-height: 1; }
.service-grid--main { grid-template-columns: repeat(3, minmax(0, 261px)); margin-top: 42px; }
.service-grid--main img { width: 68px; height: 68px; }
.service-grid--extra { grid-template-columns: repeat(4, minmax(0, 229px)); margin-top: 45px; }
.service-grid--extra img { width: 60px; height: 60px; }
.service-grid--extra span { margin-top: 26px; max-width: 200px; line-height: 1; }
.services__accent2 { margin-top: 99px; }
.services__btn { margin-top: 48px; }

/* ---------- Split cards (About / FAQ) ---------- */
.about, .faq { padding: 77px var(--page-pad) 78px; background: var(--soft); }
.split-card {
  display: flex;
  max-width: 1286px; margin: 0 auto;
  min-height: 446px;
  border-radius: 18.21px;
  overflow: hidden;
  background: var(--white);
}
.split-card__panel { flex: 0 0 33%; padding: 63px 42px 40px 30px; }
.split-card__img { flex: 1 1 auto; width: 0; min-height: 100%; object-fit: cover; }
.about__panel .section-title { margin-top: 8px; margin-bottom: 26px; }
.about__panel p { max-width: 337px; font-family: var(--f-alt); font-size: 16px; line-height: 1.4; }
.about__panel strong { font-family: var(--f-title); font-weight: 400; }

.split-card--tall { min-height: 738px; }
.faq__panel { flex-basis: 57.3%; padding: 54px 78px 40px 32px; }
.faq__panel .section-title { margin-top: 7px; }
.faq__list { margin-top: 34px; }
.faq details { border-bottom: 1px solid transparent; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 80px; padding: 0 26px 0 6px;
  font-family: var(--f-text); font-size: 20px; line-height: 1.4; color: var(--teal);
  list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-left: 6px;
  border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 26px 12px 6px; font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--ink); }
.faq details p:last-child { padding-bottom: 22px; }
.faq details a { color: var(--teal); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .hero__orbit { --orbit-scale: .75; }
  .split-card__panel { flex-basis: 45%; }
  .faq__panel { flex-basis: 60%; padding-left: 24px; padding-right: 40px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 750px) {
  .hero { height: auto; min-height: 560px; padding: 150px 16px 56px; }
  .hero__orbit { --orbit-scale: .55; left: -20px; top: 10px; }
  .hero__content { position: relative; top: auto; right: auto; width: auto; margin-right: 0; }
  .hero__logo { width: 190px; }
  .hero__title { font-size: 30px; }
  .hero__text br, .services__text br { display: none; }
  .hero__text { font-size: 18px; max-width: 280px; margin-right: 0; margin-left: auto; }
  .hero__cta { margin-right: 0; }

  .stats { height: auto; padding: 24px 12px; }
  .stats__divider { margin: 0 8px; }
  .stat__num { font-size: 40px; }

  .home-clients { height: 130px; padding-top: 30px; }

  .mission { padding: 50px 16px; }
  .mission__text br { display: none; }

  .values { padding: 56px 16px; }
  .value-card { flex-basis: 100%; }

  .services__inner { padding: 56px 16px 64px; }
  .service-grid--main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid--extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid li { min-height: 150px; }
  .services__accent2 { margin-top: 48px; }

  .about, .faq { padding: 40px 16px; }
  .split-card { flex-direction: column; min-height: 0; }
  .split-card__img { width: 100%; height: 260px; min-height: 0; flex: none; }
  .split-card__panel, .faq__panel { flex: none; padding: 36px 20px 28px; }
  .faq summary { font-size: 17px; min-height: 64px; padding: 0 0 0 4px; }
  .faq details p { padding: 0 0 12px 4px; }

}