/* ============================================================
   SERVICES SECTION — redesigned with personality per card.
   Layered on top of css/style.css. Loaded after tweaks.css.
   ============================================================ */

.section-services {
  position: relative;
  overflow: hidden;
}
.services-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.services-mesh {
  position: absolute; inset: -10% -10% -10% -10%;
  background:
    radial-gradient(40% 50% at 18% 20%,
      color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%),
    radial-gradient(45% 55% at 85% 80%,
      color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  filter: blur(40px);
  opacity: .55;
  animation: meshDrift 22s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0%   { transform: translate3d(-2%, -2%, 0) scale(1); }
  100% { transform: translate3d(3%,  4%, 0) scale(1.08); }
}
.section-services .container { position: relative; z-index: 1; }

/* Animated section header */
.section-services .section-header { position: relative; }
.section-services .section-tag {
  position: relative;
  animation: tagSlide .9s cubic-bezier(.2,.8,.2,1) both;
}
.section-services .section-tag::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary));
  vertical-align: middle;
  margin-right: 10px;
  transform-origin: left center;
  animation: tagBar 1s .15s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes tagSlide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tagBar   { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* Grid — keep existing layout but override gap & give each child a 3D anchor */
.services-grid-v2 {
  position: relative;
  perspective: 1200px;
}
.services-grid-v2 .service-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s cubic-bezier(.2,.8,.2,1),
              border-color .25s ease;
  will-change: transform;
  /* enter */
  opacity: 0;
  transform: translateY(28px) scale(.985);
}

/* Visual block at top of each card — equal min-height so titles align */
.services-grid-v2 .service-card > .design-mock,
.services-grid-v2 .service-card > .term-code,
.services-grid-v2 .service-card > .hosting-rack,
.services-grid-v2 .service-card > .care-monitor { flex: 0 0 auto; }

/* Push the feature list to the bottom so all cards align there */
.services-grid-v2 .service-card > .service-features { margin-top: auto; }

/* Align section above the features so h3 + p sit at the same baseline */
.services-grid-v2 .service-card > h3 { margin-top: 0; }
.services-grid-v2 .service-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1),
              transform .9s cubic-bezier(.2,.8,.2,1);
}
.services-grid-v2 .service-card:nth-child(1).is-visible { transition-delay: .00s; }
.services-grid-v2 .service-card:nth-child(2).is-visible { transition-delay: .08s; }
.services-grid-v2 .service-card:nth-child(3).is-visible { transition-delay: .16s; }
.services-grid-v2 .service-card:nth-child(4).is-visible { transition-delay: .24s; }

/* Big number watermark */
.sc-num {
  position: absolute;
  top: 12px; right: 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 18%, transparent),
    color-mix(in srgb, var(--accent) 14%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  z-index: 0;
}

/* Cursor-tracking spotlight (set --mx/--my via JS) */
.sc-spot {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--primary) 26%, transparent),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 1;
}
.services-grid-v2 .service-card:hover .sc-spot { opacity: 1; }

/* Lift on hover */
.services-grid-v2 .service-card:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.55),
    0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent),
    0 0 80px -20px var(--primary-glow) !important;
}

/* Lift content above spotlight + watermark */
.service-card > h3,
.service-card > p,
.service-card > ul,
.service-card > .term-head,
.service-card > .term-code,
.service-card > .design-mock,
.service-card > .hosting-rack,
.service-card > .care-monitor { position: relative; z-index: 2; }
.service-card > .service-badge { z-index: 3; }

/* ---------- Card 1: Webdesign — animated browser/grid mock ---------- */
.service-card-design {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-light) 80%, transparent),
      color-mix(in srgb, var(--bg-light) 50%, transparent)) !important;
}
.design-mock {
  position: relative;
  height: 130px;
  margin-top: 44px;     /* clear the 01 watermark (top:12 + font 64 ≈ 76) */
  margin-bottom: 18px;
  border-radius: 12px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-darker, #0d0d12) 75%, transparent),
      color-mix(in srgb, var(--bg-darker, #0d0d12) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  padding: 14px 14px 12px;
  overflow: hidden;
  isolation: isolate;
}
.design-mock::before {
  /* faint grid backdrop suggesting an artboard */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: radial-gradient(120% 80% at 50% 50%, #000 30%, transparent 75%);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}
.dm-art {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dm-hero {
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 80%, transparent),
    color-mix(in srgb, var(--accent) 70%, transparent));
  box-shadow: 0 6px 18px -8px var(--primary-glow);
  position: relative;
  overflow: hidden;
}
.dm-hero::after {
  /* slow shimmer */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,.22) 50%,
    transparent 70%);
  transform: translateX(-100%);
  animation: dmShimmer 3.4s ease-in-out infinite;
}
@keyframes dmShimmer {
  0%, 30%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
.dm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.dm-card {
  height: 30px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-muted, #a0a0b0) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  position: relative;
  overflow: hidden;
}
.dm-card::after {
  content: "";
  position: absolute; left: 8px; right: 30%; top: 9px; height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text, #fff) 35%, transparent);
}
.dm-card::before {
  content: "";
  position: absolute; left: 8px; right: 50%; top: 18px; height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-muted, #a0a0b0) 60%, transparent);
}
.dm-card.alt {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.dm-cta {
  height: 12px;
  width: 60%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 55%, transparent);
  align-self: flex-start;
}
.dm-swatches {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
.dm-swatches span {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--bg-darker, #0d0d12) 80%, transparent);
}
.dm-swatches span:nth-child(1) { background: var(--primary); }
.dm-swatches span:nth-child(2) { background: var(--accent); }
.dm-swatches span:nth-child(3) {
  background: color-mix(in srgb, var(--text, #fff) 90%, transparent);
}

/* Hover: lift + tilt the artboard slightly */
.service-card-design:hover .dm-art {
  transform: translateY(-2px);
}
.dm-art {
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

/* ---------- Card 3: Webhosting — server rack with live status ---------- */
.service-card-neon { overflow: hidden; }
.hosting-rack {
  position: relative;
  height: 130px;
  margin-top: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-darker, #0d0d12) 78%, transparent),
      color-mix(in srgb, var(--bg-darker, #0d0d12) 96%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 10px 12px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hosting-rack::before {
  /* faint scanline sweeping vertically */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent-light, var(--accent)) 80%, transparent),
    transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: hrScan 4.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes hrScan {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(120px); opacity: 0; }
}
.hr-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #cbd5e1;
}
.hr-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: hrPulseDot 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes hrPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.8); }
}
.hr-uptime {
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.hr-label { color: #64748b; }
.hr-region {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary-light);
  font-size: 10px;
  letter-spacing: .08em;
}
.hr-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hr-server {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}
.hr-led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  flex: 0 0 auto;
}
.hr-server:nth-child(1) .hr-led { animation: hrLed 2.0s ease-in-out infinite; }
.hr-server:nth-child(2) .hr-led { animation: hrLed 2.4s ease-in-out .35s infinite; }
.hr-server:nth-child(3) .hr-led { animation: hrLed 2.2s ease-in-out .8s infinite; }
@keyframes hrLed {
  0%, 92%, 100% { opacity: 1; box-shadow: 0 0 6px #22c55e; }
  96%           { opacity: .35; box-shadow: 0 0 2px #22c55e; }
}
.hr-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: #94a3b8;
  flex: 0 0 auto;
}
.hr-bars {
  display: flex;
  gap: 2px;
  flex: 1;
  margin-left: auto;
  align-items: flex-end;
  height: 12px;
}
.hr-bars i {
  flex: 1;
  height: 100%;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  opacity: .85;
  transform-origin: bottom;
}
.hr-server:nth-child(1) .hr-bars i:nth-child(1) { transform: scaleY(.6); }
.hr-server:nth-child(1) .hr-bars i:nth-child(2) { transform: scaleY(.85); }
.hr-server:nth-child(1) .hr-bars i:nth-child(3) { transform: scaleY(.45); }
.hr-server:nth-child(1) .hr-bars i:nth-child(4) { transform: scaleY(.7); }
.hr-server:nth-child(1) .hr-bars i:nth-child(5) { transform: scaleY(.5); }
.hr-server:nth-child(1) .hr-bars i:nth-child(6) { transform: scaleY(.9); }
.hr-server:nth-child(2) .hr-bars i:nth-child(1) { transform: scaleY(.4); }
.hr-server:nth-child(2) .hr-bars i:nth-child(2) { transform: scaleY(.7); }
.hr-server:nth-child(2) .hr-bars i:nth-child(3) { transform: scaleY(.55); }
.hr-server:nth-child(2) .hr-bars i:nth-child(4) { transform: scaleY(.8); }
.hr-server:nth-child(2) .hr-bars i:nth-child(5) { transform: scaleY(.95); }
.hr-server:nth-child(2) .hr-bars i:nth-child(6) { transform: scaleY(.6); }
.hr-server:nth-child(3) .hr-bars i:nth-child(1) { transform: scaleY(.5); }
.hr-server:nth-child(3) .hr-bars i:nth-child(2) { transform: scaleY(.6); }
.hr-server:nth-child(3) .hr-bars i:nth-child(3) { transform: scaleY(.85); }
.hr-server:nth-child(3) .hr-bars i:nth-child(4) { transform: scaleY(.45); }
.hr-server:nth-child(3) .hr-bars i:nth-child(5) { transform: scaleY(.75); }
.hr-server:nth-child(3) .hr-bars i:nth-child(6) { transform: scaleY(.55); }

.service-card-neon:hover .hr-bars i {
  animation: hrBarBreathe 1.8s ease-in-out infinite;
}
@keyframes hrBarBreathe {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

/* ---------- Card 4: Wartung & Support — monitoring panel ---------- */
.service-card-care {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-light) 80%, transparent),
      color-mix(in srgb, var(--bg-light) 50%, transparent)) !important;
}
.care-monitor {
  position: relative;
  height: 130px;
  margin-top: 44px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 50px;
  background: color-mix(in srgb, #22c55e 12%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #4ade80;
  letter-spacing: .02em;
  position: relative;
  z-index: 2;
}
.cm-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: hrPulseDot 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}
.care-shield {
  position: relative;
  width: 80px; height: 80px;
  color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.care-shield svg { display: block; overflow: visible; }
.care-shield-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--primary) 55%, transparent));
}
.care-shield-check {
  stroke: var(--accent-light);
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: careCheck 3.2s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes careCheck {
  0%, 30%   { stroke-dashoffset: 40; }
  55%, 90%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 0; }
}
.care-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--primary) 50%, transparent);
  animation: carePulse 2.8s ease-out infinite;
  pointer-events: none;
}
.care-pulse-2 { animation-delay: 1.4s; }
@keyframes carePulse {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Tweak existing terminal variant for the spotlight ---------- */
.service-card-terminal .term-code { margin-bottom: 14px; }

/* Equalize the visual block at the top so h3 lines up across cards */
.services-grid-v2 .service-card-design .design-mock,
.services-grid-v2 .service-card-terminal .term-code,
.services-grid-v2 .service-card-neon .hosting-rack,
.services-grid-v2 .service-card-care .care-monitor { min-height: 130px; }
.services-grid-v2 .service-card-terminal .term-head { margin-top: 28px; }

/* Override: keep "Beliebt" badge clear of the .sc-num watermark on card 02
   and inside the card (parent has overflow:hidden — top:-12 from base would clip). */
.service-card-terminal .service-badge {
  top: 16px;
  right: auto;
  left: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .services-grid-v2 .service-card,
  .dm-hero, .care-shield-check, .care-pulse, .services-mesh,
  .hosting-rack::before, .hr-pulse-dot, .hr-led, .cm-dot,
  .section-services .section-tag, .section-services .section-tag::before {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mobile: shrink the watermark, compact mocks */
@media (max-width: 640px) {
  .sc-num { font-size: 44px; top: 10px; right: 14px; }
  .design-mock,
  .hosting-rack,
  .care-monitor { height: 110px; }
  .services-grid-v2 .service-card-design .design-mock,
  .services-grid-v2 .service-card-terminal .term-code,
  .services-grid-v2 .service-card-neon .hosting-rack,
  .services-grid-v2 .service-card-care .care-monitor { min-height: 110px; }
  .care-shield,
  .care-shield svg { width: 64px !important; height: 64px !important; }
  .hr-server { padding: 2px 6px; }
}