:root{

  /* ===============================
     SPACING SYSTEM (base = xs)
  =============================== */
  --space-xs: 8px;
  --space-sm: calc(var(--space-xs) * 2);   /* 16px */
  --space-md: calc(var(--space-xs) * 3);   /* 24px */
  --space-lg: calc(var(--space-xs) * 4);   /* 32px */
  --space-xl: calc(var(--space-xs) * 5);   /* 40px (tightened) */

  /* ===============================
     TYPOGRAPHY
  =============================== */
  --font-size-sm: 0.85rem;
  --font-size-base: 1rem;
  --font-size-lg: clamp(2rem, 3.5vw, 2.6rem);

  --line-tight: 1.1;
  --line-normal: 1.45;

  /* ===============================
     COLORS
  =============================== */
  --color-primary: #00ffb4;
  --color-text-muted: rgba(255,255,255,0.65);
  --color-border: rgba(0,255,180,0.18);

  /* ===============================
     EFFECTS
  =============================== */
  --radius-md: 14px;

  --glow-soft: 0 0 35px rgba(0,255,180,0.25);
  --glow-strong: 0 0 50px rgba(0,255,180,0.35);

  --transition-fast: 0.25s ease;
}


/* ===============================
   SECTION SYSTEM (FIXED ✅)
================================ */

.section{
  padding-block: var(--space-lg);   /* equal top & bottom spacing */
  margin-top: 0;
  margin-bottom: 0;
}

/* REMOVE stacked gaps */
.section + .section{
  margin-top: 0;
}


/* ===============================
   INNER LAYOUT (TIGHTENED ✅)
================================ */

.section-inner{

  display:flex;
  flex-direction:column;
  gap: var(--space-md); /* increased slightly for rhythm */

}


/* ===============================
   SECTION HEADING (CONTROLLED ✅)
================================ */

.section-heading{
  display:flex;
  flex-direction:column;
  gap: var(--space-xs);
}

.section-heading h2{
  margin:0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.section-heading p{
  margin:0;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  max-width: 55ch;
}


/* ===============================
   GRID SYSTEM
================================ */

.grid{
  display:grid;
  gap: var(--space-md);
}

.grid--services{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--process{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.grid--pricing{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


/* ===============================
   CARD COMPONENT
================================ */

.card{
  position:relative;
  display:flex;
  flex-direction:column;

  gap: var(--space-sm);
  padding: var(--space-md);

  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);

  background: rgba(5,20,18,0.7);
  backdrop-filter: blur(6px);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}


/* ===============================
   CARD EFFECTS
================================ */

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;

  background: radial-gradient(
    circle at 20% 0%,
    rgba(0,255,180,0.15),
    transparent 60%
  );

  opacity:0.6;
  pointer-events:none;
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0,255,180,0.05),
    transparent
  );

  opacity:0.4;
  pointer-events:none;
}


/* ===============================
   CARD STATES
================================ */

.card:hover{
  transform: translateY(-4px);
  border-color: rgba(0,255,180,0.4);
  box-shadow: var(--glow-soft);
}

.card--featured{
  border-color: rgba(0,255,180,0.5);

  box-shadow:
    var(--glow-strong),
    inset 0 0 30px rgba(0,255,180,0.1);
}


/* ===============================
   CARD CONTENT
================================ */

.card h3{
  display:flex;
  align-items:center;
  gap: var(--space-xs);

  margin:0;

  font-size: var(--font-size-base);
  font-weight:600;
  color: var(--color-primary);
}

.card p{
  margin:0;

  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
  color: var(--color-text-muted);

  max-width: 42ch;
}

.card i{
  color: var(--color-primary);
  flex-shrink:0;
}

.reviews-section .section-inner {
  gap: 0px
}


.reviews-section .container {
  max-width: 1200px; /* ✅ or match your card container */
}


.reviews-section {
  padding-bottom: var(--space-2xs);  /* ✅ restore proper section spacing */
  margin-top: 0px;          /* ✅ kill inherited spacing */
  padding-top: 0px;      /* ✅ bring heading closer */
    padding-bottom: 0px;
}