/* Tema ORBIT: o observatório de localhost:7992.
   Escuro, espacial, técnico. IBM Plex Sans para ler, IBM Plex Mono para rótulos e ações.
   A cor das galáxias só identifica áreas; o laranja marca o que está ativo e a ação principal. */

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('../fonts/ibm-plex-sans-var-latin.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --void: #0A0B0E;
  --panel-solid: #0D0F14;
  --text: #E6E8EC;
  --muted: #A3A7B0;
  --quiet: #868A94;
  --line: rgb(255 255 255 / 10%);
  --line-strong: rgb(255 255 255 / 16%);
  --line-3: rgb(255 255 255 / 26%);
  --accent: #FF8A3D;
  --accent-text: #0A0B0E;
  --accent-line: rgb(255 138 61 / 62%);
  --accent-glow: rgb(255 138 61 / 14%);
  --in: #FF8A3D;
  --out: #63AEFF;
  --mark: #FF8A3D;
  --focus: #FF8A3D;
  --error: #FF8F80;
  --g-acessos: #33A7AB;
  --g-clientes: #3B8FFD;
  --g-skills: #A283C4;
  --g-marketing: #E0578A;
  --g-comercial: #7CBF2A;
  --g-nucleo: #C9CDD6;
  --radius: 3px;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-hover: 160ms;
  --t-press: 120ms;
  --t-detail: 200ms;
  --t-enter: 240ms;
  /* Céu: luz laranja do núcleo em cima à direita, azul das saídas em baixo, estrelas muito finas */
  --bg:
    radial-gradient(ellipse 55% 40% at 78% 8%, rgb(255 138 61 / 7%), transparent 70%),
    radial-gradient(ellipse 50% 40% at 12% 62%, rgb(99 174 255 / 5%), transparent 72%),
    radial-gradient(circle at 23px 41px, rgb(255 255 255 / 16%) 0.8px, transparent 1.3px) 0 0 / 211px 197px,
    radial-gradient(circle at 131px 87px, rgb(255 255 255 / 10%) 0.8px, transparent 1.3px) 0 0 / 293px 263px,
    #0A0B0E;
}

/* Rótulos e ações em mono, como no ORBIT */
.logo-name, .callout, .btn, .level-tag, .level h4, .stage-tab, .live, .instrument-link, .shield-pill, .build-num, .step-dot, .build-papel span, .result-label,
.cost-label, .cost-delta, .form-progress li, .review-bar, .schedule-intro span, .level-here, .opt, .day span, .plan-price span {
  font-family: var(--mono);
}

h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; }
.hero h1 { font-weight: 500; letter-spacing: -0.035em; }
.section-head h2, .engine-copy h2, .booking-copy h2 { letter-spacing: -0.03em; }
h3 { font-weight: 600; letter-spacing: -0.01em; }

/* Painéis: face escura, linha fina, cantos de instrumento */
.panel, .galaxy, .thief {
  background: linear-gradient(180deg, rgb(20 22 29 / 82%), rgb(13 15 20 / 82%));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

/* Botões: mono em maiúsculas; o principal é o laranja do ORBIT */
.btn {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: rgb(13 15 20 / 82%); color: var(--text);
  font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.btn:hover { border-color: var(--line-3); background: rgb(22 24 31 / 90%); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; box-shadow: 0 0 0 1px rgb(255 138 61 / 20%), 0 12px 36px -12px rgb(255 138 61 / 55%); }
.btn-primary:hover { background: #FF9A57; border-color: #FF9A57; box-shadow: 0 0 0 1px rgb(255 138 61 / 30%), 0 14px 40px -10px rgb(255 138 61 / 65%); }
.btn-secondary { border-color: var(--accent-line); }
.btn-secondary:hover { border-color: var(--accent); box-shadow: inset 0 0 14px var(--accent-glow); }
.btn-well { width: 28px; height: 28px; border-left: 1px solid rgb(10 11 14 / 25%); margin-left: 2px; padding-left: 6px; }
.btn-well svg { width: 18px; height: 18px; }
.btn-light { background: var(--text); color: var(--void); border-color: var(--text); gap: 10px; }
.link-btn:hover { background: rgb(255 255 255 / 6%); }
:focus-visible { outline-color: var(--focus); }
.btn-primary:focus-visible { outline-color: #FFFFFF; }

/* Topo */
.logo { color: var(--text); }
.logo-mark { width: 24px; height: 24px; color: var(--accent); }
.logo-name { font-size: 13px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; }
.logo-by { padding-left: 12px; border-left: 1px solid var(--line-strong); font-size: 13px; color: var(--muted); }
.callout { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.callout .dot { box-shadow: 0 0 0 4px var(--accent-glow); }
.hero-checks li { color: var(--muted); }
.hero-visual figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
.em-moldura .review-bar { display: none; }

/* Conversa */
.talk-line { font-weight: 500; letter-spacing: -0.025em; }
.talk-punch { font-weight: 500; letter-spacing: -0.015em; }
.talk-punch { padding-left: 20px; border-left: 2px solid var(--accent); }
.well { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgb(255 255 255 / 3%); color: var(--muted); }
.well-sm { width: 36px; height: 36px; }
.talk-list .well { color: var(--accent); border-color: var(--accent-line); background: var(--accent-glow); }

/* Tempo roubado: cada ladrão verte tempo para fora */
.thief-icon { border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--text); }
.thief-name { color: var(--text); }
.thief-flow { background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); opacity: .7; mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .thief-flow { animation: verter 1.2s linear infinite; background-size: 24px 2px; }
  .thief:nth-child(2) .thief-flow { animation-duration: 1.5s; }
  .thief:nth-child(3) .thief-flow { animation-duration: 1s; }
  .thief:nth-child(4) .thief-flow { animation-duration: 1.35s; }
  .thief:nth-child(5) .thief-flow { animation-duration: 1.1s; }
}
@keyframes verter { to { background-position: 24px 0; } }

/* Níveis: a figura da v1, no escuro do ORBIT (as cores servem também a figura do quiz) */
:root {
  --lv-link: rgb(255 255 255 / 24%); --lv-face: #14161D; --lv-face-on: #1B1F29; --lv-face-line: rgb(255 255 255 / 16%);
  --lv-icon: #6E727B; --lv-icon-on: #E6E8EC; --lv-label: #868A94; --lv-label-on: #E6E8EC;
  --lv-in: #FF8A3D; --lv-out: #63AEFF; --lv-out-ink: #63AEFF; --lv-window: #101218; --lv-ink: #C9CDD6; --lv-bubble: #3A3E48;
}
.stage-surface { background: linear-gradient(180deg, #14161D, #0E1015); }
.stage-tabs { border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgb(255 255 255 / 2%); }
.stage-tab { border-radius: 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.stage-tab[aria-pressed="true"] { color: var(--text); background: var(--accent-glow); box-shadow: inset 0 -2px var(--accent); }
.lv-center-label { font-weight: 600; }
.level-tag { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.level-meter span { height: 4px; border-radius: 1px; }
.level-meter .on { background: var(--muted); }
.level-orbit .level-meter .on { background: var(--accent); }
.level h3 { font-weight: 500; letter-spacing: -0.025em; }
.level h4 { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.level-orbit { border-color: var(--accent-line); box-shadow: inset 0 0 30px var(--accent-glow), inset 0 1px 0 rgb(255 255 255 / 4%); }
.level-here { border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.level-here .icon { width: 16px; height: 16px; color: var(--accent); }
.level-outcome { font-weight: 500; }

/* Demonstração */
.instrument { background: linear-gradient(180deg, #14161D, #0D0F14); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 30px 80px -40px rgb(0 0 0 / 80%), 0 0 0 1px rgb(0 0 0 / 40%); }
.instrument-view { border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); }
.live { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.live .dot { box-shadow: 0 0 0 3px var(--accent-glow); }
.instrument-link { border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.instrument-link:hover { border-color: var(--line-3); }
.shield-pill { border: 1px solid var(--accent); border-radius: var(--radius); background: rgb(10 11 14 / 88%); color: var(--text); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 0 0 4px var(--accent-glow), 0 10px 30px -10px rgb(0 0 0 / 70%); }
.shield-pill .icon { color: var(--accent); }
.step-dot { border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--accent); font-size: 13px; }

/* O que é: cada galáxia com a sua cor, como no mapa */
.galaxy-icon { border: 1px solid currentColor; border-radius: var(--radius); background: rgb(255 255 255 / 3%); }
.galaxy[data-galaxia="acessos"] .galaxy-icon { color: var(--g-acessos); }
.galaxy[data-galaxia="clientes"] .galaxy-icon { color: var(--g-clientes); }
.galaxy[data-galaxia="skills"] .galaxy-icon { color: var(--g-skills); }
.galaxy[data-galaxia="dominios"] .galaxy-icon { color: var(--g-marketing); }
.galaxy[data-galaxia="nucleo"] .galaxy-icon { color: var(--accent); }
.galaxy h3 { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.does-lead { font-weight: 500; letter-spacing: -0.02em; }
.does-list .well { color: var(--text); }
.does-note .icon { color: var(--accent); }

/* O que fazemos */
.offer { --pg-line: rgb(255 255 255 / 26%); --pg-core: #FF8A3D; --pg-fill: #0D0F14; --pg-novo: #FF8A3D; --guided: rgb(255 138 61 / 45%); }
.build-num { border: 1px solid var(--line-3); border-radius: var(--radius); background: var(--panel-solid); color: var(--text); font-size: 13px; }
.build-step.is-built .build-num { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.build-step.is-built:not(:last-child)::after { background: var(--accent-line); }
.build-glyph { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #121419, #0C0E12); box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%); }
.build-papel span { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.guided-copy .well { color: var(--accent); border-color: var(--accent-line); background: var(--accent-glow); }
.result { border-color: var(--accent-line); box-shadow: inset 0 2px 0 var(--accent), inset 0 0 40px var(--accent-glow); }
.result-label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.result-big { letter-spacing: -0.035em; }

/* Custo e preços */
.cost-compare { border-radius: 4px; }
.cost-side + .cost-side { border-left: 1px solid var(--line); }
.cost-label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cost-value { font-weight: 500; }
.cost-orbit { background: radial-gradient(ellipse at 100% 0%, rgb(255 138 61 / 12%), transparent 60%); }
.cost-orbit .cost-label { color: var(--accent); }
.cost-delta { border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--accent-glow); color: #FFB27F; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.plan-price strong { font-weight: 500; }
.plan-price span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.plan-entry { border-color: var(--accent-line); box-shadow: inset 0 2px 0 var(--accent), inset 0 0 30px var(--accent-glow); }

/* Perguntas */
.faq-item summary { font-weight: 500; }
.faq-icon { color: var(--accent); }

/* Marcação */
.booking { background: radial-gradient(ellipse 60% 50% at 80% 30%, rgb(255 138 61 / 6%), transparent 70%); }
.booking-list .well { color: var(--accent); }
.booking-form { background: linear-gradient(180deg, #14161D, #0E1015); border-color: var(--line-strong); }
.form-progress li { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.form-progress li span { border: 1px solid var(--line-3); border-radius: var(--radius); font-size: 11px; letter-spacing: 0; }
.form-progress .is-current { box-shadow: 0 2px var(--accent); }
.form-progress .is-current span { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.form-progress .is-done span { border-color: var(--accent-line); color: var(--accent); }
.field input, .field textarea { border: 1px solid var(--line-strong); border-radius: var(--radius); background: #090A0D; color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: #6E727B; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent-line); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.choice span { border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgb(255 255 255 / 3%); color: var(--text); }
.choice:hover span { border-color: var(--line-3); }
.choice input:checked + span { border-color: var(--accent); background: var(--accent-glow); box-shadow: inset 0 0 14px var(--accent-glow); }
.choice-group:has([aria-invalid="true"]) legend { color: var(--error); }
.choice-group:has([aria-invalid="true"]) .choice span { border-color: var(--error); }
.icon-btn { border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgb(255 255 255 / 3%); color: var(--text); }
.icon-btn:hover:not(:disabled) { border-color: var(--line-3); }
.day, .slot { border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgb(255 255 255 / 3%); color: var(--text); }
.day span { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.day:hover:not(:disabled), .slot:hover { border-color: var(--line-3); }
.day[aria-pressed="true"], .slot[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-glow); box-shadow: inset 0 -2px 0 var(--accent); }
.day[aria-pressed="true"] span { color: var(--accent); }
.form-done .well { color: var(--accent); border-color: var(--accent-line); }

/* Rodapé, revisão e CTA fixa */
.site-footer { border-top-color: var(--line); }
.footer-links a { color: var(--text); }
.logo-sm .logo-mark { width: 20px; height: 20px; }
.logo-sm .logo-name { font-size: 12px; }
.logo-sm .logo-by { font-size: 12px; }
.review-bar { background: #111318; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.review-bar a { color: var(--text); }
.sticky-cta { background: linear-gradient(180deg, rgb(10 11 14 / 0%), rgb(10 11 14 / 92%) 30%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

@media (max-width: 760px) {
  .btn { font-size: 12px; letter-spacing: .1em; }
  .callout { font-size: 11px; letter-spacing: .12em; line-height: 1.5; }
  .cost-side + .cost-side { border-left: 0; border-top: 1px solid var(--line); }
}

@media (forced-colors: active) {
  .panel, .galaxy, .thief, .btn, .choice span, .day, .slot { border: 1px solid CanvasText; }
}