/* ================================================
   SECRET DUO — Lilás · Micro-agulhamento Robótico
   Load AFTER styles.css
   ================================================ */

:root {
  --bg:           #09060f;
  --bg-2:         #100d1a;
  --bg-3:         #181424;
  --bg-4:         #201a30;
  --ink:          #f0edfb;
  --ink-dim:      #b8aee0;
  --ink-soft:     #7a6aaa;
  --ink-muted:    #4a3a7a;

  /* primary accent — lilás */
  --red:          #b48aff;
  --red-deep:     #7c4dff;
  --amber:        #e0baff;
  --amber-soft:   #f0e0ff;

  --rule:         rgba(180,138,255,.10);
  --rule-strong:  rgba(180,138,255,.22);
}

/* ── Hero ──────────────────────────────────────── */
.hero { background: #09060f; }
.hero-glow-1 {
  background: radial-gradient(circle at 30% 30%,
    #7c4dff 0%, #b48aff 30%, #3d1a8a 55%, transparent 75%);
  opacity: .35;
}
.hero-glow-2 {
  background: radial-gradient(circle, #1a0d40 0%, transparent 70%);
  opacity: .5;
}
.ht-em {
  background: linear-gradient(105deg, #b48aff 0%, #e0baff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Hero device video ────────────────────────── */
.hero-device-video {
  mix-blend-mode: normal;
  border-radius: 10px;
  border: 1px solid rgba(180,138,255,.22);
  box-shadow: 0 0 60px rgba(180,138,255,.15), 0 40px 80px rgba(0,0,0,.65);
  object-fit: cover;
  max-height: 80vh;
  aspect-ratio: 9/16;
  height: auto; width: auto;
}

/* ── Watermark cover — topo do vídeo ──────────── */
.hero-device-video-wrap { position: relative; }
.hero-device::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(9,6,15,1) 0%, rgba(9,6,15,0) 100%);
  z-index: 4;
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}
.hud-gemini-cover {
  position: absolute; bottom: 3%; right: 2%; z-index: 6; pointer-events: none;
}
.hud-gemini-cover .hud-card { background: rgba(9,6,15,.82); }

/* ── Espaçamento ──────────────────────────────── */
.problem, .promise, .tecnologia, .modules, .instructor,
.fit, .includes, .quotes, .invest, .faq, .finalcta,
.needle-depth, .protocol-builder, .vs-section {
  padding-top: 80px; padding-bottom: 80px;
}

/* ── Cursor glow ──────────────────────────────── */
.cursor-glow {
  background: radial-gradient(
    circle, rgba(180,138,255,.12) 0%, rgba(124,77,255,.04) 40%, transparent 70%
  ) !important;
}

/* ── CTA price panel ──────────────────────────── */
.invest-card-price {
  background: linear-gradient(160deg, #b48aff 0%, #7c4dff 100%);
}

/* ── Promise glow ─────────────────────────────── */
.promise::before {
  background: radial-gradient(circle, rgba(180,138,255,.12) 0%, transparent 60%);
}

/* ── Cinema grade ─────────────────────────────── */
.cinema-video-grade {
  background: linear-gradient(
    to right,
    rgba(9,6,15,.92) 0%,
    rgba(9,6,15,.6) 40%,
    transparent 70%
  );
}

/* ══════════════════════════════════════════════
   PROFUNDIDADE DE AGULHA — diagrama interativo
   ══════════════════════════════════════════════ */
.needle-depth { background: var(--bg-2); }
.nd-inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--pad); }
.nd-layout {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 64px; align-items: stretch; margin-top: 48px;
}
@media (max-width: 860px) { .nd-layout { grid-template-columns: 1fr; gap: 36px; } }

/* SVG skin layers */
.nd-svg { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }

/* Agulha animada */
.nd-needle { transition: transform .5s cubic-bezier(.22,1,.36,1); transform-origin: top center; }
.nd-needle-tip { animation: needlePulse 2s ease-in-out infinite; }
@keyframes needlePulse { 0%,100%{opacity:.7} 50%{opacity:1} }
.nd-zone-glow { transition: opacity .4s ease; }

/* Slider de profundidade */
.nd-controls { margin-top: 20px; }
.nd-slider-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.nd-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red) var(--pct,50%), rgba(180,138,255,.2) var(--pct,50%));
  outline: none; cursor: pointer;
}
.nd-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--red); border: 2px solid rgba(255,255,255,.3);
  box-shadow: 0 0 12px rgba(180,138,255,.6); cursor: pointer;
}
.nd-depth-val {
  font-family: var(--f-mono); font-size: 22px; font-weight: 700;
  color: var(--red); white-space: nowrap; min-width: 60px; text-align: right;
}
.nd-depth-lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }

/* Info panel */
.nd-info { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.nd-zone-card {
  background: var(--bg-3); border: 1px solid var(--rule);
  border-radius: 12px; padding: 20px 18px;
  transition: border-color .3s, background .3s;
}
.nd-zone-card.nd-active {
  border-color: rgba(180,138,255,.4);
  background: rgba(180,138,255,.06);
}
.nd-zone-title { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.nd-zone-name { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.nd-zone-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.nd-zone-indic { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nd-tag {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(180,138,255,.25); color: var(--ink-dim);
}

/* ══════════════════════════════════════════════
   ROBÓTICO vs MANUAL — comparativo
   ══════════════════════════════════════════════ */
.vs-section { background: var(--bg); }
.vs-inner { max-width: 1000px; margin: 0 auto; padding: 0 var(--pad); }
.vs-table-wrap {
  margin-top: 40px; border: 1px solid var(--rule);
  border-radius: 14px; overflow: hidden;
}
.vs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vs-table thead tr { background: var(--bg-3); }
.vs-table th {
  padding: 16px 20px; text-align: left;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--rule);
}
.vs-table th.vs-winner { color: var(--red); }
.vs-table td { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--ink-dim); vertical-align: middle; }
.vs-table tr:last-child td { border-bottom: none; }
.vs-table tbody tr { transition: background .2s; }
.vs-table tbody tr:hover { background: rgba(180,138,255,.04); }
.vs-table td:first-child { font-weight: 600; color: var(--ink); }
.vs-check { color: var(--red); font-size: 15px; }
.vs-x { color: rgba(255,255,255,.2); font-size: 15px; }
.vs-partial { color: rgba(255,200,80,.7); font-size: 13px; }

/* ══════════════════════════════════════════════
   PROTOCOL BUILDER — seletor de protocolo
   ══════════════════════════════════════════════ */
.protocol-builder { background: var(--bg-2); }
.pb-inner { max-width: 900px; margin: 0 auto; padding: 0 var(--pad); }
.pb-tool { margin-top: 40px; background: var(--bg-3); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.pb-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 32px; border-bottom: 1px solid var(--rule); }
@media (max-width: 600px) { .pb-selectors { grid-template-columns: 1fr; gap: 20px; } }
.pb-group { display: flex; flex-direction: column; gap: 12px; }
.pb-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-chip {
  padding: 8px 16px; background: var(--bg-4); border: 1px solid var(--rule);
  border-radius: 999px; font-size: 13px; font-family: var(--f-sans, sans-serif);
  color: var(--ink-dim); cursor: pointer; transition: all .2s;
}
.pb-chip:hover { background: var(--bg); color: var(--ink); }
.pb-chip.pb-act { background: rgba(180,138,255,.12); border-color: rgba(180,138,255,.45); color: var(--red); }
.pb-result { padding: 28px 32px; }
.pb-res-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 600px) { .pb-res-row { grid-template-columns: 1fr 1fr; } }
.pb-res-card { background: var(--bg-4); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; }
.pb-res-lbl { font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.pb-res-val { font-size: 16px; font-weight: 700; color: var(--red); transition: opacity .25s, transform .25s; }
.pb-res-val.pb-fade { opacity: 0; transform: translateY(5px); }
.pb-disclaimer { font-size: 11px; color: var(--ink-muted); line-height: 1.5; margin: 0; border-top: 1px solid var(--rule); padding-top: 14px; }