/* ============================================================
   SMARTPED — BRAND SYSTEM
   Extraído da arte de referência. Reutilizar em todas as páginas.
   ============================================================ */

:root {
  /* ---------- Cor: backgrounds ---------- */
  --sp-bg-deep: #00081f;          /* mais profundo */
  --sp-bg: #001034;               /* azul-marinho principal */
  --sp-bg-2: #0a1e47;             /* card / surface */
  --sp-bg-3: #102a5c;             /* hover surface */
  --sp-line: rgba(120, 180, 255, 0.14); /* divisores finos */
  --sp-border: rgba(120, 180, 255, 0.22);
  --sp-border-strong: rgba(60, 200, 255, 0.45);

  /* ---------- Cor: marca ---------- */
  --sp-blue: #1fa8ff;             /* azul elétrico (marca) */
  --sp-blue-bright: #3cc8ff;      /* highlight / glow */
  --sp-blue-soft: #6fd3ff;
  --sp-cyan: #00e5ff;
  --sp-blue-deep: #0a6fdb;

  /* CTA WhatsApp */
  --sp-whats: #25d366;
  --sp-whats-hi: #2ee87a;

  /* ---------- Tipografia ---------- */
  --sp-fg: #ffffff;
  --sp-fg-mute: #b8c5e0;
  --sp-fg-dim: #7a8aae;
  --sp-fg-on-light: #001034;

  /* ---------- Glows ---------- */
  --sp-glow-blue: 0 0 0 1px rgba(60, 200, 255, 0.18),
                  0 8px 40px -8px rgba(31, 168, 255, 0.45),
                  0 0 80px -20px rgba(31, 168, 255, 0.6);
  --sp-glow-soft: 0 0 0 1px rgba(120, 180, 255, 0.12),
                  0 10px 30px -10px rgba(0, 16, 52, 0.6);

  /* ---------- Type ---------- */
  --sp-font-display: "Space Grotesk", system-ui, sans-serif;
  --sp-font-body: "Inter", system-ui, sans-serif;

  /* ---------- Radius ---------- */
  --sp-r-sm: 10px;
  --sp-r: 16px;
  --sp-r-lg: 22px;
  --sp-r-xl: 28px;
  --sp-r-pill: 999px;

  /* ---------- Spacing scale ---------- */
  --sp-s-1: 4px;
  --sp-s-2: 8px;
  --sp-s-3: 12px;
  --sp-s-4: 16px;
  --sp-s-5: 24px;
  --sp-s-6: 32px;
  --sp-s-7: 48px;
  --sp-s-8: 64px;
  --sp-s-9: 96px;

  /* ---------- Container ---------- */
  --sp-max: 1240px;
  --sp-pad: clamp(20px, 5vw, 40px);
}

/* ============================================================
   Reset enxuto
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sp-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--sp-fg);
  background: var(--sp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Tipografia
   ============================================================ */
.sp-eyebrow {
  font-family: var(--sp-font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-blue-bright);
  font-weight: 500;
}

.sp-h1 {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(36px, 7.6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.sp-h2 {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.sp-h3 {
  font-family: var(--sp-font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.sp-lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--sp-fg-mute);
  text-wrap: pretty;
}
.sp-body { color: var(--sp-fg-mute); }
.sp-accent { color: var(--sp-blue-bright); }
.sp-accent-soft { color: var(--sp-blue-soft); }

/* ============================================================
   Buttons
   ============================================================ */
.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--sp-r-pill);
  font-family: var(--sp-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
  white-space: nowrap;
}
.sp-btn:active { transform: translateY(1px); }

.sp-btn-whats {
  background: linear-gradient(180deg, var(--sp-whats-hi), var(--sp-whats));
  color: #052914;
  box-shadow: 0 10px 28px -12px rgba(37, 211, 102, .65),
              inset 0 1px 0 rgba(255,255,255,.4);
}
.sp-btn-whats:hover { box-shadow: 0 14px 34px -10px rgba(37, 211, 102, .8); transform: translateY(-1px); }

.sp-btn-primary {
  background: linear-gradient(180deg, var(--sp-blue-bright), var(--sp-blue));
  color: #001034;
  box-shadow: 0 10px 30px -10px rgba(31, 168, 255, .65),
              inset 0 1px 0 rgba(255,255,255,.4);
}
.sp-btn-primary:hover { transform: translateY(-1px); }

.sp-btn-ghost {
  color: var(--sp-fg);
  background: rgba(255,255,255,0.04);
  border-color: var(--sp-border);
  backdrop-filter: blur(8px);
}
.sp-btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--sp-border-strong); }

/* ============================================================
   Layout / Container
   ============================================================ */
.sp-container {
  max-width: var(--sp-max);
  margin: 0 auto;
  padding-inline: var(--sp-pad);
}
.sp-section { padding-block: clamp(56px, 9vw, 120px); position: relative; }

/* ============================================================
   Card surface (com glow azul)
   ============================================================ */
.sp-card {
  background: linear-gradient(180deg, rgba(15, 38, 89, 0.55), rgba(10, 30, 71, 0.35));
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-r-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.sp-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(60,200,255,0.18), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
}
.sp-card:hover::before { opacity: 1; }

/* ============================================================
   Background atmospheres
   ============================================================ */
.sp-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.sp-bg-glow::before, .sp-bg-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}
.sp-bg-glow::before {
  width: 60vw; height: 60vw; max-width: 700px; max-height: 700px;
  top: -20%; right: -15%;
  background: radial-gradient(circle, var(--sp-blue) 0%, transparent 60%);
}
.sp-bg-glow::after {
  width: 50vw; height: 50vw; max-width: 600px; max-height: 600px;
  bottom: -30%; left: -10%;
  background: radial-gradient(circle, var(--sp-blue-deep) 0%, transparent 60%);
  opacity: 0.35;
}

/* Circuit / grid linhas finas */
.sp-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 180, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 180, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ============================================================
   Animação suave de entrada (scroll reveal)
   ============================================================ */
.sp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.sp-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Utilities
   ============================================================ */
.sp-stack-2 > * + * { margin-top: 8px; }
.sp-stack-3 > * + * { margin-top: 12px; }
.sp-stack-4 > * + * { margin-top: 16px; }
.sp-stack-6 > * + * { margin-top: 24px; }
.sp-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sp-grid { display: grid; gap: 16px; }