/* ==========================================================================
   Homepage
   ========================================================================== */

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(120% 90% at 80% -10%, var(--teal-700) 0%, var(--teal-900) 55%, #04282d 100%);
  color: #eafafb; padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(3.5rem,2rem+5vw,6rem); }
.hero .wrap { position: relative; z-index: 2; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) { .hero .wrap { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }
.hero__eyebrow { color: var(--teal-300); }
.hero h1 { color: #fff; margin-top: 1rem; }
.hero h1 .flare { color: var(--accent); }
.hero p.lede { color: #bfe0e3; margin-top: 1.2rem; }
.hero__cta { margin-top: 2rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.hero__trust { margin-top: 2rem; display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; color: #9fc6c9; font-size: var(--step--1); font-family: var(--font-display); }
.hero__trust b { color: #fff; }

/* Orbit signature — the page's memorable element */
.orbit { position: relative; aspect-ratio: 1; max-width: 460px; margin-inline: auto; width: 100%; }
.orbit__ring { position: absolute; inset: 0; border: 1px solid rgba(111,183,191,.25); border-radius: 50%; }
.orbit__ring:nth-child(2){ inset: 14%; border-color: rgba(111,183,191,.18); }
.orbit__ring:nth-child(3){ inset: 28%; border-color: rgba(111,183,191,.12); }
.orbit__planet { position: absolute; inset: 30%; border-radius: 50%; box-shadow: 0 20px 60px rgba(0,0,0,.4);
  background: radial-gradient(circle at 35% 30%, var(--teal-500), var(--teal-700)); display: grid; place-items: center; overflow: hidden; }
.orbit__planet img { width: 72%; height: auto; opacity: 1; }
.orbit__sat { position: absolute; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-lg);
  display: grid; place-items: center; font-size: 1.5rem; top: 50%; left: 50%; margin: -27px; }
.orbit__spin { position: absolute; inset: 0; animation: spin 26s linear infinite; }
.orbit__spin--rev { animation-duration: 38s; animation-direction: reverse; }
.orbit__sat--1 { transform: translate(195px,0); }
.orbit__sat--2 { transform: translate(-150px,90px); }
.orbit__sat--3 { transform: translate(40px,-180px); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 939px){ .orbit { max-width: 340px; } .orbit__sat{width:44px;height:44px;margin:-22px;font-size:1.2rem;} .orbit__sat--1{transform:translate(150px,0);} .orbit__sat--2{transform:translate(-115px,70px);} .orbit__sat--3{transform:translate(30px,-140px);} }

/* ---- Trust strip ---- */
.logos-strip { background: var(--mist); border-bottom: 1px solid var(--line); }
.logos-strip .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; justify-content: center; padding-block: 1.5rem; color: var(--slate); font-family: var(--font-display); font-size: var(--step--1); font-weight: 500; }
.logos-strip span { display: inline-flex; align-items: center; gap: .5em; }
.logos-strip .dot { width: 7px; height: 7px; background: var(--teal-500); border-radius: 50%; }

/* ---- Section headers ---- */
.sec-head { max-width: 62ch; margin-bottom: 2.5rem; }
.sec-head.center { margin-inline: auto; }

/* ---- Service cards ---- */
.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal-300); }
.card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--teal-50); color: var(--teal-600);
  display: grid; place-items: center; margin-bottom: 1.1rem; }
.card__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.card h3 { font-size: var(--step-1); }
.card p { color: var(--slate); font-size: .96rem; margin-top: .5rem; flex: 1; }
.card__link { margin-top: 1.1rem; font-family: var(--font-display); font-weight: 600; color: var(--teal-600); display: inline-flex; align-items: center; gap: .4em; }
.card:hover .card__link { gap: .7em; }

/* ---- Before/After ---- */
.ba { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px){ .ba { grid-template-columns: 1fr 1fr; } }
.ba__item { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.ba__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.ba__tag { position: absolute; top: 1rem; left: 1rem; background: rgba(6,52,58,.85); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding: .4rem .8rem; border-radius: 999px; backdrop-filter: blur(4px); }
.ba__tag--after { background: var(--accent); color: var(--teal-900); }

/* ---- Steps ---- */
.steps { counter-reset: step; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.step { position: relative; padding-top: 1rem; }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-display); font-weight: 700;
  font-size: 2.4rem; color: var(--teal-100); line-height: 1; display: block; margin-bottom: .6rem; }
.step h3 { font-size: var(--step-1); }
.step p { color: var(--slate); font-size: .95rem; margin-top: .4rem; }

/* ---- Stats ---- */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); color: #fff; line-height: 1; }
.stat__label { color: #9fc6c9; font-size: var(--step--1); margin-top: .5rem; }

/* ---- Areas ---- */
.areas { display: flex; flex-wrap: wrap; gap: .7rem; }
.area-chip { border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.1rem; font-family: var(--font-display);
  font-weight: 500; font-size: .92rem; color: var(--ink); background: #fff; transition: .15s; }
.area-chip:hover { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }

/* ---- Reviews ---- */
.reviews { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem; }
.review__stars { color: var(--accent); letter-spacing: 2px; }
.review p { margin-top: .8rem; color: var(--ink); }
.review__who { margin-top: 1rem; font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--slate); }

/* scroll reveal — only hides when JS is present (.js hook on <html>), so
   content stays visible for no-JS users and crawlers. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Video section (click-to-play facade — keeps page fast)
   ========================================================================== */
.video-sec { background: var(--teal-900); }
.video-sec .sec-head h2, .video-sec .sec-head .lede { color:#fff; }
.video-sec .sec-head .lede { color:#bfe0e3; }
.lite-yt {
  position: relative; width: 100%; max-width: 920px; margin: 2rem auto 0;
  aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; box-shadow: var(--shadow-lg); background:#04282d;
  background-size: cover; background-position: center;
}
.lite-yt::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,52,58,.1), rgba(6,52,58,.55));
}
.lite-yt__play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:50%; background:var(--accent);
  display:grid; place-items:center; transition:.2s; box-shadow:0 8px 30px rgba(0,0,0,.4); z-index:2;
}
.lite-yt:hover .lite-yt__play { transform:translate(-50%,-50%) scale(1.08); }
.lite-yt__play svg { width:34px; height:34px; fill:var(--teal-900); margin-left:5px; }
.lite-yt__label {
  position:absolute; bottom:1.2rem; left:1.4rem; z-index:2; color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:var(--step-1);
  text-shadow:0 2px 12px rgba(0,0,0,.5); max-width:70%;
}
.lite-yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }