/* ═══════════════════════════════════════════════════════════════════
   Daily Shot Solutions — Redesign Fase 2 · Sistema "tech/pro"
   Aditivo e isolado. Carregado DEPOIS de style.css (ganha na cascata).
   Funciona em light (default) e dark. Reutilizável secção a secção.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Profundidade e superfícies técnicas (light-first) */
  --rd-surface: rgba(255, 255, 255, .7);
  --rd-surface-2: #ffffff;
  --rd-hairline: rgba(26, 26, 46, .09);
  --rd-hairline-strong: rgba(26, 26, 46, .16);
  --rd-glow: rgba(251, 127, 41, .10);
  --rd-glow-soft: rgba(251, 127, 41, .05);
  --rd-lum-border: rgba(251, 127, 41, .35);
  --rd-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --rd-shadow-lum: 0 0 0 1px rgba(251, 127, 41, .12), 0 8px 40px rgba(251, 127, 41, .10);
  --rd-ok: #16a34a;
  --rd-ok-glow: rgba(22, 163, 74, .5);
  --rd-mono: 'Chakra Petch', var(--font-mono), monospace;
  --rd-title-soft: rgba(26, 26, 46, .5);
}

[data-theme="dark"] {
  /* Preto profundo estilo Coinlite + glow forte */
  --rd-surface: rgba(255, 255, 255, .025);
  --rd-surface-2: #0c0e13;
  --rd-hairline: rgba(255, 255, 255, .08);
  --rd-hairline-strong: rgba(255, 255, 255, .16);
  --rd-glow: rgba(251, 127, 41, .22);
  --rd-glow-soft: rgba(251, 127, 41, .08);
  --rd-lum-border: rgba(251, 127, 41, .45);
  --rd-shadow-card: 0 8px 32px rgba(0, 0, 0, .5);
  --rd-shadow-lum: inset 0 0 40px rgba(251, 127, 41, .05), 0 0 0 1px rgba(251, 127, 41, .25), 0 12px 48px rgba(251, 127, 41, .12);
  --rd-ok: #22c55e;
  --rd-ok-glow: rgba(34, 197, 94, .6);
  --rd-title-soft: rgba(255, 255, 255, .72);
}

/* ─── Eyebrow técnico (label mono com brackets em L) ──────────────── */
.rd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rd-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  position: relative;
  padding: 4px 2px;
}
.rd-eyebrow::before,
.rd-eyebrow::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  opacity: .7;
}
.rd-eyebrow::before {
  border-left: 1.5px solid var(--accent);
  border-top: 1.5px solid var(--accent);
}
.rd-eyebrow::after {
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
}

/* ─── Campo de glow direcional (fundo de secção) ──────────────────── */
.rd-glow-field {
  position: relative;
  isolation: isolate;
}
.rd-glow-field > .rd-glow-source {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.rd-glow-field > .rd-glow-source::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 720px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              var(--rd-glow) 0%,
              var(--rd-glow-soft) 45%,
              transparent 72%);
}

/* ─── Card luminoso (glow-border estilo Coinlite) ─────────────────── */
.rd-lumcard {
  position: relative;
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-hairline);
  border-radius: 16px;
  box-shadow: var(--rd-shadow-card);
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.rd-lumcard--lit {
  border-color: var(--rd-lum-border);
  box-shadow: var(--rd-shadow-lum);
}
.rd-lumcard:hover {
  transform: translateY(-3px);
  border-color: var(--rd-lum-border);
  box-shadow: var(--rd-shadow-lum);
}

/* ─── Título de hero com contraste de peso/cor ────────────────────── */
.rd-hero-title {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -1.8px;
  color: var(--text);
}
.rd-hero-title .rd-accent { color: var(--accent); }
.rd-hero-title .rd-soft   { color: var(--rd-title-soft); font-weight: 500; }
/* Contraste máximo no dark: o glow foi movido para baixo (painel),
   por isso o título fica sobre fundo limpo e a branco puro. */
[data-theme="dark"] .rd-hero-title { color: #ffffff; }

/* ─── CTA primário com glow (classe própria, sem colidir) ─────────── */
.rd-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  background: var(--accent);
  color: #0a0a0a;
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 rgba(251, 127, 41, 0);
  transition: box-shadow .3s ease, transform .2s ease, background .2s ease;
  text-decoration: none;
}
.rd-cta:hover {
  background: var(--accent-hover);
  box-shadow: 0 8px 30px rgba(251, 127, 41, .35);
  transform: translateY(-1px);
}
.rd-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: var(--rd-surface);
  border: 1px solid var(--rd-hairline-strong);
  transition: border-color .3s ease, background .3s ease;
  text-decoration: none;
}
.rd-cta-ghost:hover {
  border-color: var(--rd-lum-border);
  background: var(--rd-glow-soft);
}

/* ═══ ELEMENTO-ASSINATURA: painel de telemetria de operações ══════ */
.rd-telemetry {
  padding: 22px;
  font-family: var(--rd-mono);
  overflow: hidden;
  text-align: center;
}
.rd-telemetry-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rd-hairline);
  margin-bottom: 16px;
}
.rd-telemetry-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.rd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rd-ok);
  box-shadow: 0 0 0 0 var(--rd-ok-glow);
  animation: rd-pulse 2.2s infinite;
}
@keyframes rd-pulse {
  0%   { box-shadow: 0 0 0 0 var(--rd-ok-glow); }
  70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.rd-telemetry-tag {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-subtle);
}
.rd-telemetry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.rd-metric {
  background: var(--rd-surface);
  border: 1px solid var(--rd-hairline);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
.rd-metric-label {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 6px;
}
.rd-metric-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rd-metric-value .rd-unit { font-size: 14px; color: var(--accent); font-weight: 500; }

/* mini sparkline de atividade */
.rd-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  margin-bottom: 16px;
  padding: 0 2px;
}
.rd-spark span {
  flex: 1;
  background: linear-gradient(to top, var(--accent), rgba(251,127,41,.35));
  border-radius: 2px 2px 0 0;
  opacity: .85;
  animation: rd-bar 2.6s ease-in-out infinite;
}
@keyframes rd-bar {
  0%, 100% { transform: scaleY(.65); }
  50%      { transform: scaleY(1); }
}
.rd-spark span { transform-origin: bottom; }

/* linha de log a correr (tipo terminal) */
.rd-log {
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rd-hairline);
  white-space: nowrap;
  overflow: hidden;
}
.rd-log .rd-log-dot { color: var(--rd-ok); }
.rd-log code { color: var(--accent); font-family: var(--rd-mono); }

/* ─── Responsivo ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rd-glow-field > .rd-glow-source::before { width: 480px; height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-dot, .rd-spark span { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   CAMADA DE ELEVAÇÃO DA HOME · Fase 2
   Eleva classes existentes sem reescrever cada bloco. Centrado + tech/pro.
   ═══════════════════════════════════════════════════════════════════ */

/* Eyebrow centrado (inline-flex centra-se dentro de text-align:center) */
.rd-eyebrow { justify-content: center; }

/* ── Cards de capacidade (serviços) — glow-border no hover ────────── */
.svc-cap-card,
.svc-cap-card-lg {
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              border-color .35s ease, box-shadow .35s ease, background .35s ease !important;
}
.svc-cap-card:hover,
.svc-cap-card-lg:hover {
  transform: translateY(-4px);
  border-color: var(--rd-lum-border) !important;
  box-shadow: var(--rd-shadow-lum);
}

/* ── Cards "why us" — moldura luminosa no hover ───────────────────── */
.why-spec-card {
  border: 1px solid var(--rd-hairline);
  border-radius: 14px;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              border-color .35s ease, box-shadow .35s ease, background .2s ease !important;
}
.why-spec-card:hover {
  transform: translateY(-3px);
  border-color: var(--rd-lum-border);
  box-shadow: var(--rd-shadow-lum);
}

/* ── Cards explore — sombra luminosa no hover ─────────────────────── */
.home-explore-card:hover {
  box-shadow: 0 18px 60px rgba(251, 127, 41, .18), 0 0 0 1px rgba(251, 127, 41, .2);
}

/* ── Tabs de serviço — estado ativo com accent + glow ─────────────── */
.svc-tab {
  border-radius: 10px !important;
  transition: transform .3s ease, border-color .3s ease,
              box-shadow .3s ease, color .3s ease, background .3s ease !important;
}
.svc-tab.active {
  border-color: var(--rd-lum-border) !important;
  color: var(--accent) !important;
  background: var(--rd-glow-soft) !important;
  box-shadow: 0 0 24px rgba(251, 127, 41, .15) !important;
}

/* ── Secções com glow de fundo direcional ─────────────────────────── */
.rd-glow-field.rd-section > .rd-glow-source::before {
  bottom: auto;
  top: 8%;
}

/* ── Tratamento tech dos títulos de secção da home ────────────────── */
.rd-section-title {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.08;
}

/* ── Header da secção "explore" — eyebrow com brackets + accent ────── */
.home-explore-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--rd-mono);
  font-weight: 500;
  letter-spacing: 2.5px !important;
  color: var(--accent) !important;
}
.home-explore-label::before,
.home-explore-label::after {
  content: "";
  width: 12px;
  height: 12px;
  opacity: .7;
}
.home-explore-label::before { border-left: 1.5px solid var(--accent); border-top: 1.5px solid var(--accent); }
.home-explore-label::after  { border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); }
.home-explore-title { font-weight: 600; letter-spacing: -1.2px; }

/* Garantir que os headers das secções code-showcase e faq ficam centrados */
.code-showcase .rd-eyebrow,
.faq-section .rd-eyebrow { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════
   HEROS DE PÁGINAS INTERNAS (serviços, e reutilizável nas restantes)
   Eleva .hero-sec de forma global e consistente com o hero da home.
   ═══════════════════════════════════════════════════════════════════ */
.hero-sec { position: relative; isolation: isolate; }

/* Título com o mesmo tratamento tech do hero da home */
.hero-sec .hero-title {
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1.05;
}
.hero-sec .hero-title span { color: var(--rd-title-soft); font-weight: 500; }
[data-theme="dark"] .hero-sec .hero-title { color: #fff; }

/* Feature-pill dos heros — leve upgrade tech (borda + glow subtil) */
.hero-sec .feature-pill {
  border-radius: 100px;
  box-shadow: 0 0 20px rgba(251, 127, 41, .10);
}

/* Glow de fundo direcional (a iluminar a base do hero) */
.hero-sec::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22%;
  width: 720px;
  height: 500px;
  max-width: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              var(--rd-glow) 0%, var(--rd-glow-soft) 45%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero-sec::after { width: 460px; height: 380px; }
}

/* Back-link (subpáginas) — toque mono coerente */
.back-link:hover { color: var(--accent) !important; }

/* ═══════════════════════════════════════════════════════════════════
   PÁGINAS: portfólio, about, contacto, blog, legais
   Eleva as classes de label próprias para o estilo com corner-brackets.
   ═══════════════════════════════════════════════════════════════════ */

/* Labels do portfólio (Featured / All / Network) */
.pf-section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--rd-mono) !important;
  font-weight: 500;
  letter-spacing: 2.5px !important;
}
.pf-section-label::before,
.pf-section-label::after {
  content: "";
  width: 12px; height: 12px; opacity: .7;
}
.pf-section-label::before { border-left: 1.5px solid var(--accent); border-top: 1.5px solid var(--accent); }
.pf-section-label::after  { border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); }
.pf-section-title { font-weight: 600 !important; letter-spacing: -1.2px; }

/* Cards de projeto do portfólio — moldura luminosa no hover */
.pf-feat-card, .pf-card, .pf-net-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              border-color .35s ease, box-shadow .35s ease !important;
}
.pf-feat-card:hover, .pf-card:hover, .pf-net-card:hover {
  border-color: var(--rd-lum-border) !important;
  box-shadow: var(--rd-shadow-lum) !important;
}

/* Eyebrows dos cards "explore" (sobre fundo escuro) — accent coerente */
.home-explore-eyebrow,
.home-explore-wide-eyebrow {
  font-family: var(--rd-mono) !important;
  letter-spacing: 2px !important;
  color: var(--accent) !important;
}

/* Cards de artigo do blog — moldura luminosa no hover */
.blog-card:hover, .post-card:hover, article.blog-item:hover {
  border-color: var(--rd-lum-border) !important;
  box-shadow: var(--rd-shadow-lum) !important;
  transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════════════════════
   PÁGINA 24H DRAFT — harmonização com o sistema tech/pro
   A página já tem design próprio (draft-*); aqui só alinhamos os
   eyebrows (brackets + accent) e damos moldura luminosa aos cards.
   ═══════════════════════════════════════════════════════════════════ */

/* Eyebrows das secções (timeline / how-it-works / form / explore) */
.draft-section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--rd-mono) !important;
  font-weight: 500;
  letter-spacing: 2.5px !important;
  color: var(--accent) !important;
}
.draft-section-label::before,
.draft-section-label::after {
  content: "";
  width: 12px; height: 12px; opacity: .7;
}
.draft-section-label::before { border-left: 1.5px solid var(--accent); border-top: 1.5px solid var(--accent); }
.draft-section-label::after  { border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); }
.draft-section-title { font-weight: 600; letter-spacing: -1.2px; }

/* Cards "how it works" — moldura luminosa no hover */
.draft-hiw-card {
  border: 1px solid var(--rd-hairline);
  border-radius: 14px;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              border-color .35s ease, box-shadow .35s ease, background .2s ease !important;
}
.draft-hiw-card:hover {
  transform: translateY(-3px);
  border-color: var(--rd-lum-border);
  box-shadow: var(--rd-shadow-lum);
}

/* Cards "explore" (fundo desta página) — sombra luminosa no hover */
.draft-explore-card:hover {
  box-shadow: 0 18px 60px rgba(251, 127, 41, .18), 0 0 0 1px rgba(251, 127, 41, .2);
}

/* Passos da timeline — realçar o marcador ativo com o accent */
.draft-tl-step--highlight .draft-tl-dot {
  box-shadow: 0 0 0 4px rgba(251, 127, 41, .18), 0 0 16px rgba(251, 127, 41, .5);
}

/* Botão primário desta página — alinhar glow com o resto do site */
.draft-btn-primary:hover {
  box-shadow: 0 8px 30px rgba(251, 127, 41, .35);
}

/* ═══════════════════════════════════════════════════════════════════
   24H DRAFT · REFINAMENTO DO HERO
   Corrige: título gigante, botões pill, glow lavado, hierarquia da desc.
   ═══════════════════════════════════════════════════════════════════ */

.draft-hero { padding: 100px 0 76px; }

/* Glow de fundo mais limpo e contido (laranja da marca, não pêssego) */
.draft-hero-glow {
  width: 640px !important;
  height: 560px !important;
  top: 2% !important;
  background: radial-gradient(ellipse at center,
              rgba(251,127,41,.16) 0%, rgba(251,127,41,.06) 42%, transparent 68%) !important;
  filter: blur(48px) !important;
}

/* Título equilibrado — deixa de ser gigante */
.draft-hero-title {
  font-size: clamp(36px, 5.4vw, 62px) !important;
  line-height: 1.05 !important;
  letter-spacing: -1.8px !important;
  font-weight: 600 !important;
  max-width: 800px;
  margin: 0 auto 20px !important;
}

/* Accent sólido da marca (mais limpo que o gradiente) */
.draft-title-accent {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  background-clip: initial !important;
  color: var(--accent) !important;
}

/* Descrição — hierarquia mais suave */
.draft-hero-desc {
  font-size: clamp(15px,1.3vw,17px) !important;
  margin-bottom: 6px !important;
  color: var(--text-muted) !important;
}
.draft-hero-desc--strong {
  margin-bottom: 34px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

/* Botões alinhados ao sistema: radius 8px + accent sólido + glow */
.draft-btn-primary,
.draft-btn-secondary,
.draft-btn-back {
  border-radius: 8px !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
}
.draft-btn-primary {
  background: var(--accent) !important;
  color: #0a0a0a !important;
  box-shadow: none !important;
}
.draft-btn-primary:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 8px 30px rgba(251,127,41,.35) !important;
  filter: none !important;
  transform: translateY(-1px);
}
.draft-btn-secondary {
  border-radius: 8px !important;
  background: var(--rd-surface) !important;
  border: 1px solid var(--rd-hairline-strong) !important;
}
.draft-btn-secondary:hover {
  border-color: var(--rd-lum-border) !important;
  background: var(--rd-glow-soft) !important;
}

/* Espaçamento e caixa de stats refinada */
.draft-hero-ctas { margin-bottom: 48px !important; }
.draft-hero-stats {
  padding: 22px 44px !important;
  border-radius: 14px !important;
  gap: 44px !important;
  border: 1px solid var(--rd-hairline) !important;
  box-shadow: var(--rd-shadow-card) !important;
}
/* "h" / "d" no accent da marca, para leitura tech coerente */
.draft-stat-unit { color: var(--accent) !important; }
.draft-stat-label {
  font-family: var(--rd-mono) !important;
  letter-spacing: 1.5px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ACABAMENTOS TRANSVERSAIS · CTA primário, header, footer, 404
   ═══════════════════════════════════════════════════════════════════ */

/* ── CTA primário unificado: accent + glow em TODO o site ─────────── */
.cta-btn:not(.cta-btn-outline) {
  background: var(--accent) !important;
  background-image: none !important;
  color: #0a0a0a !important;
  border: 1px solid var(--accent) !important;
  border-radius: 8px !important;
  transition: background .2s ease, box-shadow .3s ease, transform .2s ease !important;
}
.cta-btn:not(.cta-btn-outline):hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #0a0a0a !important;
  box-shadow: 0 8px 30px rgba(251, 127, 41, .35) !important;
  transform: translateY(-1px) !important;
}
/* Outline mantém-se, mas alinha o radius */
.cta-btn.cta-btn-outline { border-radius: 8px !important; }
.cta-btn.cta-btn-outline:hover {
  border-color: var(--rd-lum-border) !important;
  color: var(--accent) !important;
}

/* ── Navbar — link ativo e 24H Draft coerentes ───────────────────── */
.nav-link.active { color: var(--accent) !important; }
.nav-link::after { background: var(--accent) !important; }
.nav-cta-24h:hover { border-color: var(--rd-lum-border) !important; }

/* ── Footer — títulos de coluna e glow subtil ────────────────────── */
footer { position: relative; }
footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 640px; max-width: 90%;
  height: 300px;
  background: radial-gradient(ellipse at top,
              var(--rd-glow-soft) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
footer > * { position: relative; z-index: 1; }
.footer-col-title {
  font-family: var(--rd-mono) !important;
  letter-spacing: 2px !important;
}
.footer-link { transition: color .2s ease; }
.footer-link:hover { color: var(--accent) !important; }

/* ── 404 — número e eyebrow coerentes ────────────────────────────── */
.err-404-num {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  background-clip: initial !important;
  color: var(--accent) !important;
  letter-spacing: -3px !important;
}