/* ═══════════════════════════════════════════════════
   XEONOMEISTER — Homepage Theme
   Base: glassmorphism dark + accent cyan/violet
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── TOKENS ─────────────────────────────────────── */
:root {
  --color-bg-card:        rgba(8, 14, 36, 0.60);
  --color-bg-card-hover:  rgba(10, 20, 52, 0.80);

  --color-border:         rgba(0, 200, 255, 0.14);
  --color-border-hover:   rgba(0, 200, 255, 0.40);

  --color-accent-cyan:    #00c8ff;
  --color-accent-violet:  #9b5de5;

  --color-text-primary:   #dff0ff;
  --color-text-secondary: #7eb8d8;   /* contraste mínimo 4.5:1 no fundo card */
  --color-text-muted:     #4a7a9b;

  --color-glow-cyan:   rgba(0, 200, 255, 0.18);
  --color-glow-violet: rgba(155, 93, 229, 0.12);

  --radius-card:    12px;
  --radius-block:   8px;

  --transition-base:   0.28s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── BASE ────────────────────────────────────────── */
* {
  font-family: 'Inter', sans-serif !important;
}

/* ── CARD ────────────────────────────────────────── */
.service-card {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition:
    transform       var(--transition-base),
    border-color    var(--transition-base),
    box-shadow      var(--transition-base),
    background      var(--transition-base) !important;
  will-change: transform, box-shadow !important;
}

.service-card:hover {
  background: var(--color-bg-card-hover) !important;
  border-color: var(--color-border-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 0 24px var(--color-glow-cyan),
    0 0 48px var(--color-glow-violet),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ── NOME DO SERVIÇO ─────────────────────────────── */
/* Orbitron só aqui — onde tem espaço para respirar  */
.service-name {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--color-text-primary) !important;
  line-height: 1.3 !important;
}

/* ── DESCRIÇÃO ───────────────────────────────────── */
.service-description {
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  color: var(--color-text-secondary) !important;  /* contraste adequado */
  line-height: 1.5 !important;
}

/* ── BLOCOS INTERNOS (Movies, Series, etc.) ──────── */
.service-block {
  background: rgba(0, 200, 255, 0.04) !important;
  border: 1px solid rgba(0, 200, 255, 0.10) !important;
  border-radius: var(--radius-block) !important;
  color: var(--color-text-secondary) !important;
  transition: background var(--transition-base) !important;
}

.service-card:hover .service-block {
  background: rgba(0, 200, 255, 0.07) !important;
}

/* ── ÍCONE ───────────────────────────────────────── */
.service-icon img {
  filter: drop-shadow(0 0 4px rgba(0, 200, 255, 0.20)) !important;
  transition: filter var(--transition-base) !important;
}

.service-card:hover .service-icon img {
  filter:
    drop-shadow(0 0 8px rgba(0, 200, 255, 0.50))
    drop-shadow(0 0 16px rgba(155, 93, 229, 0.20)) !important;
}

/* ── TÍTULO DO GRUPO ─────────────────────────────── */
/* Inter aqui — Orbitron em 0.57rem é ilegível       */
.text-theme-800 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
}

/* ── SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar        { width: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
  background: linear-gradient(
    to bottom,
    var(--color-accent-cyan),
    var(--color-accent-violet)
  );
  border-radius: 4px;
}

/* ── ACESSIBILIDADE — FOCUS ──────────────────────── */
.service-card:focus-visible {
  outline: 2px solid var(--color-accent-cyan) !important;
  outline-offset: 2px !important;
}

/* ── REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card:hover,
  .service-icon img {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}