/* Option 1 — Geometric Bold (matches business card) */
.theme-geometric {
  --bg: #0d0f12;
  --bg-art:
    radial-gradient(ellipse at 80% 0%, rgba(0, 191, 166, .18), transparent 45%),
    radial-gradient(ellipse at 10% 90%, rgba(233, 30, 140, .14), transparent 40%),
    linear-gradient(160deg, #0d0f12 0%, #151920 45%, #0d0f12 100%);
  --text: #f4f6f8;
  --text-soft: #c7cdd8;
  --muted: #8b93a0;
  --line: rgba(255,255,255,.1);
  --panel: rgba(22, 26, 33, .92);
  --panel-soft: rgba(255,255,255,.04);
  --panel-shadow: 0 24px 60px rgba(0,0,0,.45);
  --header-bg: rgba(13,15,18,.78);
  --footer-bg: #0a0c0f;
  --input-bg: #12161d;
  --magenta: #e91e8c;
  --teal: #00bfa6;
  --yellow: #ffe600;
  --accent: var(--teal);
  --btn-bg: linear-gradient(120deg, #00bfa6, #0090c8);
  --btn-text: #041a18;
  --cta-bg: #11161d;
  --cta-text: #fff;
}

.theme-geometric .hero::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 18%;
  width: 48vw;
  height: 70%;
  background: linear-gradient(135deg, #00bfa6 0%, #0077a8 55%, #ffe600 56%, #ffe600 100%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 42% 48%);
  opacity: .55;
  z-index: -1;
  animation: geoSweep 12s var(--ease) infinite alternate;
}

.theme-geometric .service-card:nth-child(odd) {
  background: linear-gradient(160deg, rgba(0,191,166,.12), rgba(22,26,33,.95));
}
.theme-geometric .service-card:nth-child(even) {
  background: linear-gradient(160deg, rgba(233,30,140,.1), rgba(22,26,33,.95));
}

@keyframes geoSweep {
  from { transform: translateX(0) skewX(0deg); }
  to { transform: translateX(-3%) skewX(-2deg); }
}