/* =========================================================
   SEO.CSS – Services Page (Theme-matched to HOME.CSS)
   Version: 2.2 (fixed selectors, hero, slider, ROI)
   ========================================================= */

/* -----------------------------
   HERO (match homepage styling)
   ----------------------------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, #009933 0%, #003300 100%);
  color: #FFFFFF;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset-inline-end: -120px;
  inset-block-start: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.12);
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-18deg);
}
.hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -40px;
  inset-block-end: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 30px solid rgba(255, 255, 255, 0.1);
  border-right-color: transparent;
  border-top-color: transparent;
  transform: rotate(24deg);
}
.hero-inner { position: relative; padding-block: 96px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

.hero-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background-color: rgba(15, 23, 42, 0.65);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  opacity: 0.9;
}

/* trust layer */
.hero-trust-layer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.85rem;
}
.trust-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.icon-check { color: #0AA86A; font-weight: 700; }

.hero-subtitle { font-size: 1.1rem; margin-top: .25rem; opacity: .95; }

/* gradient word inside H1 */
.text-gradient{
  background: linear-gradient(135deg, #fff 0%, #c7ffda 40%, #a7ffd2 60%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* hero meta + actions (reuse global spacing) */
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1.5rem 0 1.25rem; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.8rem; opacity:.9; }
.hero-meta-item{ display:inline-flex; align-items:center; gap:.3rem;}

/* right-side illustration card */
.hero-illustration { position: relative; }
.hero-illustration-card {
  background-color: #FFFFFF;
  border-radius: 28px;
  padding: 1.4rem;
  box-shadow: var(--shadow-soft);
  color: var(--color-text-main);
}
.hero-illustration-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.hero-illustration-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem; margin-top:1.1rem;
}
.metric-pill{
  padding:.7rem .9rem;
  border-radius:12px;
  background-color:#F5F7FA;
  font-size:.78rem;
}
.metric-pill strong{ display:block; font-size:1rem; color:#006600; }

/* -----------------------------
   TRUST BAR row (spacing only)
   ----------------------------- */
.trust-bar { margin-top: -28px; }
.trust-bar-card {
  background:#fff; border-radius:18px; box-shadow:var(--shadow-soft);
  padding:1.2rem 1.5rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.trust-label{ font-size:.9rem; color:var(--color-text-muted); font-weight:500; }
.trust-logos{ display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; font-size:.8rem; color:var(--color-text-muted); }
.badge-pill{
  border-radius:999px; padding:.25rem .6rem; font-size:.7rem;
  background:rgba(0,102,0,.06); color:#003B3B; font-weight:600;
}

/* -----------------------------
   SERVICE CARDS (uses global)
   ----------------------------- */
.features-grid{
  display:grid; gap:1.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items:stretch;
}
.service-card{ display:flex; flex-direction:column; height:100%; }
.service-features{ list-style:none; margin:1rem 0; padding:0; flex-grow:1;}
.service-features li{
  padding:.35rem 0; font-size:.85rem; color:var(--color-text-muted);
  display:flex; align-items:center; gap:.5rem;
}
.card-pricing{
  margin:1.25rem 0 .75rem; padding-top:1rem;
  border-top:1px solid var(--color-border-soft);
}
.price-main{ font-size:1.75rem; font-weight:700; color:var(--color-primary); line-height:1; }
.price-unit{ font-size:.75rem; font-weight:500; color:var(--color-text-muted); margin-left:.25rem; }
.price-alt{ font-size:.85rem; color:var(--color-text-muted); }
.card-footer{ margin-top:auto; }

/* banner */
.guarantee-banner{
  display:flex; align-items:center; gap:1rem;
  background:rgba(0,102,0,.06);
  border:1px solid rgba(0,102,0,.15);
  border-radius:18px; padding:1.25rem; margin-top:2.5rem;
}
.guarantee-icon{ font-size:2rem; }

/* -----------------------------
   CASE STUDIES (metrics band)
   ----------------------------- */
.case-study-card{ position:relative; overflow:hidden; height:100%; display:flex; flex-direction:column; }
.case-study-metrics{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:.75rem; margin:1.25rem 0; padding:1rem 0;
  border-top:1px solid var(--color-border-soft);
  border-bottom:1px solid var(--color-border-soft);
}
.case-study-metrics .metric strong{ display:block; font-size:1.25rem; color:#006600; }
.case-study-metrics .metric span{ font-size:.75rem; color:var(--color-text-muted); }

/* -----------------------------
   TESTIMONIAL SLIDER spacing
   ----------------------------- */
.section .testimonial-slider{ margin-top: .5rem; }
.section .slider-dots{ margin-top: 1.25rem; }

/* -----------------------------
   ROI CALCULATOR (page piece)
   ----------------------------- */
.card--calculator .calculator-inputs{ margin: 1rem 0 1.25rem; }
.card--calculator .result-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .9rem; border:1px solid var(--color-border-soft);
  border-radius:12px; background:var(--color-bg); margin:.5rem 0;
}
.card--calculator .price-main{ font-size:1.25rem; }

/* -----------------------------
   TRUST BADGES (3 cols)
   ----------------------------- */
.trust-badges-row{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2rem; align-items:center; }
.press-badge{
  font-size:.85rem; padding:.35rem .75rem; border-radius:999px;
  background:#F5F7FA; color:var(--color-text-muted); font-weight:600;
}
.payment-text{ font-size:.75rem; color:var(--color-text-muted); }

/* -----------------------------
   PRICING feature card
   ----------------------------- */
.pricing-card.featured{
  border:2px solid #006600;
  transform:scale(1.05);
  z-index:2;
  background: linear-gradient(135deg, rgba(0,102,0,.03) 0%, rgba(10,168,106,.03) 100%);
}
.pricing-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:#FF7A3C; color:#fff; padding:.25rem 1rem; border-radius:999px;
  font-size:.75rem; font-weight:700;
}

/* -----------------------------
   RESPONSIVE
   ----------------------------- */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); gap: 2.5rem; }
  .features-grid,
  .grid-3,
  .stats-grid,
  .trust-badges-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .hero-inner{ padding-block: 72px; }
  .hero-grid{ grid-template-columns: minmax(0, 1fr); }
  .hero-illustration{ order:-1; margin-bottom:2rem; }
  .features-grid,
  .grid-4,
  .stats-grid,
  .trust-badges-row{ grid-template-columns: minmax(0,1fr); }
  .case-study-metrics{ grid-template-columns:1fr; }
}
@media (max-width: 480px){
  .hero-badge-row{ flex-direction:column; align-items:flex-start; }
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }
  .trust-bar-card{ padding:1rem; flex-direction:column; align-items:flex-start; }
  .metric-pill{ padding:.5rem .6rem; font-size:.7rem; }
  .price-main{ font-size:1.5rem; }
}