/* ═══════════════════════════════════════════════
   THEME VARIABLES
═══════════════════════════════════════════════ */
:root {
  /* dark mode — padrão */
  --bg:       #060710;
  --bg2:      #09090f;
  --nav-bg:   rgba(255,255,255,0.08);
  --text:     #f1f5ff;
  --muted:    rgba(180,190,230,0.55);
  --muted2:   rgba(180,190,230,0.25);

  --brand:    #083DC6;
  --brand-h:  #1a52e0;
  --brand-lt: #5b84f7;

  --b03: rgba(8,61,198,0.03);
  --b06: rgba(8,61,198,0.06);
  --b08: rgba(8,61,198,0.08);
  --b10: rgba(8,61,198,0.10);
  --b12: rgba(8,61,198,0.12);
  --b20: rgba(8,61,198,0.20);
  --b22: rgba(8,61,198,0.22);
  --b30: rgba(8,61,198,0.30);
  --b50: rgba(8,61,198,0.50);

  --s02:  rgba(255,255,255,0.10);
  --s025: rgba(255,255,255,0.16);
  --s04:  rgba(255,255,255,0.20);
  --s05:  rgba(255,255,255,0.22);
  --s07:  rgba(255,255,255,0.14);

  --shadow-card: rgba(0,0,0,0.40);
}

html.light {
  --bg:       #f2f4ff;
  --bg2:      #e8ecfe;
  --nav-bg:   rgba(255,255,255,0.82);
  --text:     #08113a;
  --muted:    rgba(8,18,80,0.60);
  --muted2:   rgba(8,18,80,0.40);

  --brand-lt: #083DC6;

  --s02:  rgba(255,255,255,0.65);
  --s025: rgba(255,255,255,0.75);
  --s04:  rgba(255,255,255,0.80);
  --s05:  rgba(255,255,255,0.85);
  --s07:  rgba(8,61,198,0.15);

  --shadow-card: rgba(8,61,198,0.12);
}

/* ── Nav hexagonal flutuante ── */
nav {
  clip-path: polygon(
    48px 0%,
    calc(100% - 48px) 0%,
    100% 50%,
    calc(100% - 48px) 100%,
    48px 100%,
    0% 50%
  );
  box-shadow:
    0 0 0 1px var(--s07),
    0 8px 40px rgba(0, 0, 10, 0.45);
}

html.light nav {
  box-shadow:
    0 0 0 1px var(--s07),
    0 8px 40px rgba(8, 61, 198, 0.12);
}

@media (max-width: 900px) {
  nav {
    clip-path: polygon(
      28px 0%,
      calc(100% - 28px) 0%,
      100% 50%,
      calc(100% - 28px) 100%,
      28px 100%,
      0% 50%
    );
  }
}

/* ── Logo blend mode por tema ── */
.logo-blend { mix-blend-mode: screen; }
html.light .logo-blend { mix-blend-mode: multiply; }

/* ── Aurora blobs mais suaves no light ── */
html.light .aurora-blob { opacity: 0.07; }

/* ── text-shadow no título ── */
.hero-title-blue {
  text-shadow: 0 0 60px rgba(8, 61, 198, 0.45);
}

/* ── Grade do hero (pseudo-element + mask) ── */
#home::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--s07) 1px, transparent 1px),
    linear-gradient(90deg, var(--s07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
  pointer-events: none;
}


/* ── Overlay gradiente nos cards ── */
.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--b08), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.svc-card:hover::after { opacity: 1; }

/* ── Card hover shadow com CSS var (multi-value) ── */
.svc-card:hover {
  box-shadow: 0 16px 48px var(--shadow-card), 0 0 0 1px var(--b10);
}

/* ── Reveal on-scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.on {
  opacity: 1;
  transform: translateY(0);
}