/* ═══════════════════════════════════════════════════════════
   SERVICES PAGE — CATEGORY GRIDS

   Same visual DNA as the homepage's 3D ring (dark cards, a hue
   per position, red-family brand accents) but laid out flat.

   The ring is right for 24 items you browse; this page carries
   32 across four platforms and exists so a visitor can find the
   one thing they came for. A cylinder makes that scan slower,
   so the depth here is in the card treatment, not the layout.
   ═══════════════════════════════════════════════════════════ */

.svcg-section { padding: 92px 56px; }
.svcg-section.is-dark  { background: var(--b); }
.svcg-section.is-light { background: var(--off); border-top: 1.5px solid var(--border); }

.svcg-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.svcg-sub { margin-top: 14px; font-size: 14px; line-height: 1.75; }
.is-dark  .svcg-sub { color: rgba(255,255,255,.5); }
.is-light .svcg-sub { color: var(--muted); }

.svcg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.svcg-card {
  --hue: calc(var(--i) * 30);
  --accent: hsl(var(--hue) 72% 52%);
  --accent-soft: hsl(var(--hue) 80% 96%);
  --accent-ink: hsl(var(--hue) 65% 42%);

  position: relative;
  overflow: hidden;
  padding: 26px 24px 28px;
  border-radius: 14px;
  transition: border-color .3s var(--ease), transform .3s var(--ease-out),
              box-shadow .3s var(--ease);
}
.is-dark  .svcg-card { background: #101010; border: 1px solid #1e1e1e; }
.is-light .svcg-card { background: var(--w); border: 1.5px solid var(--border); }

.svcg-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), hsl(calc(var(--hue) + 34) 78% 58%));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.svcg-card.is-in::before { transform: scaleX(1); transition-delay: calc(var(--i) * .04s); }

.svcg-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 44px hsl(var(--hue) 60% 45% / .18);
}

.svcg-ico {
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 14px;
}
.is-dark  .svcg-ico { background: hsl(var(--hue) 60% 50% / .14); }
.is-light .svcg-ico { background: var(--accent-soft); }
.svcg-ico i { font-size: 20px; color: var(--accent-ink); }
.is-dark .svcg-ico i { color: var(--accent); }

.svcg-card h3 { font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; }
.is-dark  .svcg-card h3 { color: #fff; }
.is-light .svcg-card h3 { color: var(--b); }

.svcg-card p { margin-top: 8px; font-size: 13px; line-height: 1.75; }
.is-dark  .svcg-card p { color: rgba(255,255,255,.5); }
.is-light .svcg-card p { color: var(--muted); }

@media (max-width: 900px) {
  .svcg-section { padding: 72px 24px; }
  .svcg-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .svcg-card, .svcg-card::before { transition: none; }
  .svcg-card::before { transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════
   COMPARISON TABLE

   A row-by-row "us vs them". Rows reveal in sequence and the
   Tunex column stays lit, so the eye is led down our column
   rather than having to compare cell by cell.
   ═══════════════════════════════════════════════════════════ */

.cmp-section { background: var(--b); padding: 92px 56px; }
.cmp-head { text-align: center; max-width: 620px; margin: 0 auto 46px; }

.cmp-table { max-width: 980px; margin: 0 auto; }

.cmp-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.cmp-table.is-in .cmp-row { opacity: 1; transform: none; }
.cmp-table.is-in .cmp-row { transition-delay: calc(var(--i) * .07s); }

.cmp-row--head {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: rgba(255,255,255,.42);
  padding-bottom: 10px;
}
.cmp-row--body { background: #101010; border: 1px solid #1e1e1e; margin-bottom: 8px; }
.cmp-row--body:hover { border-color: rgba(196,30,58,.35); }

.cmp-cell { font-size: 13px; color: rgba(255,255,255,.55); }
.cmp-cell:first-child { font-weight: 700; color: #fff; }

/* the column that matters */
.cmp-cell--us {
  font-weight: 800; color: #fff;
  display: flex; align-items: center; gap: 7px;
}
.cmp-cell--us::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
}
.cmp-row--head .cmp-cell--us { color: var(--r); }
.cmp-row--head .cmp-cell--us::before { display: none; }

@media (max-width: 820px) {
  .cmp-section { padding: 72px 24px; }
  .cmp-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  /* the header row is meaningless once the columns stack */
  .cmp-row--head { display: none; }
  .cmp-cell:not(:first-child)::after {
    content: attr(data-col); display: block;
    font-size: 8.5px; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; color: rgba(255,255,255,.3); margin-top: 1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-row { transition: none; opacity: 1; transform: none; }
}