/* ===== Index page only ===== */

/* Intro pill */
.pill{
  display:inline-block; font-weight:600; letter-spacing:.2px;
  background:rgba(106,208,227,.12); color:#cfeff6; border:1px solid rgba(106,208,227,.25);
  padding:.35rem .6rem; border-radius:999px; margin-bottom:1rem;
}

/* HERO layout */
.hero{
  display:grid; gap:2rem; align-items:center;
  grid-template-columns: 1.2fr 1fr;
}
@media (max-width: 992px){ .hero{ grid-template-columns: 1fr } }

.hero .hero-card{ padding:clamp(18px,3vw,28px); border-radius:var(--radius-lg) }

/* Desktop blob art */
.hero-blob{
  width:100%; aspect-ratio:1/1;
  border-radius:34% 66% 58% 42% / 43% 28% 72% 57%;
  background:
    radial-gradient(circle at 30% 25%, rgba(106,208,227,.55), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(0,179,199,.5), transparent 45%),
    #0a1428;
  filter: drop-shadow(0 40px 80px rgba(0,179,199,.16));
}

/* Mobile-only quick benefits under CTAs */
.mobile-benefits{ display:none; gap:.5rem; flex-wrap:wrap }
.mobile-benefits .benefit{
  display:flex; align-items:center; gap:.4rem;
  padding:.45rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:600; color:#e6f7fb;
}
.mobile-benefits .benefit span{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.2)) }

/* ----- Phone tweaks ----- */
@media (max-width: 576px){
  .hero .hero-card{ display:none; }    /* hide big blob */
  .mobile-benefits{ display:flex; }
  .h1-hero{ font-size: clamp(28px, 9vw, 40px); }
}

/* TRUST BAR */
.section-tight{ padding-top: 12px; padding-bottom: 12px }
.trustbar{ display:flex; align-items:center; gap:1rem; padding:14px 16px; }
.trust-title{ white-space:nowrap; color:#cfeff6; font-weight:600 }
.trust-logos{ display:grid; gap:.7rem; width:100%; grid-template-columns: repeat(5, 1fr); }
@media (max-width:768px){ .trust-logos{ grid-template-columns: repeat(3, 1fr) } }
.logo-placeholder{
  display:flex; align-items:center; justify-content:center;
  height:42px; border-radius:10px;
  border:1px dashed rgba(255,255,255,.18);
  color:#a8c9d4; font-weight:600; font-size:.9rem;
  background:rgba(255,255,255,.03);
}

/* SERVICES */
.icon-bubble{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; background:rgba(106,208,227,.18);
  margin-bottom:.6rem; font-size:20px
}

/* PROCESS */
.process .step-num{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#032229;
  font-weight:800; margin-bottom:.5rem
}

/* PRICING */
.price{ padding:1.2rem }
.price-head{
  font-weight:800; letter-spacing:.3px; margin-bottom:.5rem;
  background:linear-gradient(135deg, rgba(106,208,227,.2), rgba(0,179,199,.18));
  border:1px solid rgba(106,208,227,.35); padding:.4rem .7rem; border-radius:999px; display:inline-block
}
.price-num{ font-size: clamp(26px, 3.5vw, 36px); font-weight:800; margin:.4rem 0 1rem }
.price-list{ list-style:none; padding:0; margin:0 0 1rem 0 }
.price-list li{ padding-left:1.1rem; position:relative; margin:.35rem 0; color:#cfeff6 }
.price-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--brand)
}
.price.featured{ outline:2px solid rgba(106,208,227,.3); box-shadow:0 12px 40px rgba(0,179,199,.18) }

/* TESTIMONIALS */
.quote p{ color:#eaf7fb }
.quote-author{ color:#a8c9d4; font-weight:600; margin-top:.6rem }

/* ===== HOVERS ===== */
.hover-lift{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, outline-color .35s, outline-offset .35s;
  outline: 0px solid rgba(106,208,227,.0);
  will-change: transform;
}
.hover-lift:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,179,199,.22);
  outline: 1px solid rgba(106,208,227,.25);
  outline-offset: 2px;
}
.hover-pop{ transition: transform .25s, background .25s, border-color .25s }
.hover-pop:hover{ transform: translateY(-2px) scale(1.02); border-color: rgba(255,255,255,.28) }
.btn-float{ transition: transform .25s, box-shadow .25s }
.btn-float:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,179,199,.22) }

/* ===== SCROLL REVEAL (only when JS added .js to <html>) ===== */
@media (prefers-reduced-motion: no-preference){
  html.js [data-reveal]{
    --reveal-delay: 0ms;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--reveal-delay);
  }
  html.js [data-reveal].in-view{ opacity:1; transform:none }

  /* variants */
  html.js [data-reveal="fade-up"]{ transform: translateY(18px) }
  html.js [data-reveal="fade-down"]{ transform: translateY(-18px) }
  html.js [data-reveal="fade-left"]{ transform: translateX(24px) }
  html.js [data-reveal="fade-right"]{ transform: translateX(-24px) }
  html.js [data-reveal="scale-in"]{ transform: scale(.92); filter: blur(2px) }
  html.js [data-reveal="scale-in"].in-view{ transform: none; filter: none }
}


/* Solid white CTA variant */
.btn-cta.btn-white{
  background:#e8f6fb !important;  /* white-ish to fit the theme */
  color:#031016 !important;
  border:1px solid #e8f6fb;
  box-shadow:0 10px 26px rgba(232,246,251,.25);
}
.btn-cta.btn-white:hover{
  filter:brightness(1.02);
  box-shadow:0 14px 34px rgba(232,246,251,.35);
}
.btn-cta.btn-white:focus{
  outline:0;
  box-shadow:0 0 0 4px rgba(106,208,227,.25);
}