/* Imersao OpenClaw — camada cyberpunk comercial isolada */
body {
  --oc-bg: #050509;
  --oc-surface: #0d0f17;
  --oc-raised: #151824;
  --oc-text: #f5f6fa;
  --oc-copy: #d4d7e2;
  --oc-muted: #aeb3c2;
  --oc-line: rgba(32, 231, 237, .25);
  --oc-cyan: #20e7ed;
  --oc-magenta: #ff59d6;
  --oc-yellow: #efff4a;
  --oc-danger: #ff758f;
  color: var(--oc-copy);
  background: var(--oc-bg);
}

body::before { opacity: .42; }

body section,
body .quote-section,
body .offer-section,
body .final-cta {
  color: var(--oc-copy);
  background-color: transparent;
  clip-path: none;
}

body section::before,
body section::after { pointer-events: none; }

body h1,
body h2,
body h3,
body h4,
body strong,
body b,
body summary,
body .include { color: var(--oc-text); }

body p,
body li,
body .hero-lead,
body .section-head p,
body .role-card p,
body .offer-copy p,
body .guarantee p,
body details p { color: var(--oc-copy); }

body a { text-underline-offset: 3px; }

body .topbar {
  top: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: 16px;
  border-bottom: 1px solid rgba(32, 231, 237, .22);
  background: rgba(5, 5, 9, .9);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}

body .topbar::before { display: none !important; }

body .topbar .nav {
  width: min(1180px, 100%);
  margin-inline: auto;
  border-color: rgba(32, 231, 237, .22);
  border-block: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body .brand-text strong { color: var(--oc-text) !important; }
body .brand-text span,
body .nav-links a { color: var(--oc-copy); }
body .nav-links a:hover { color: var(--oc-cyan); }

body .eyebrow,
body .module-label,
body .offer-top span,
body .outcome-number {
  color: var(--oc-cyan);
  background: rgba(32, 231, 237, .09);
  border-color: rgba(32, 231, 237, .3);
  box-shadow: none;
}

body .eyebrow::before {
  background: var(--oc-cyan);
  box-shadow: 0 0 14px rgba(32, 231, 237, .7);
}

body .hero {
  padding-top: clamp(70px, 9vw, 110px);
  background:
    radial-gradient(circle at 50% 15%, rgba(32, 231, 237, .12), transparent 34%),
    radial-gradient(circle at 80% 58%, rgba(255, 89, 214, .07), transparent 28%) !important;
}

/* Mantém o brilho acima da malha, mas sempre atrás da mensagem e dos CTAs. */
body .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(46vw, 640px);
  aspect-ratio: 1;
  top: 6%;
  left: 58%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 89, 214, .22) 0%, rgba(178, 70, 255, .11) 36%, transparent 70%);
  filter: blur(18px);
  animation: oc-hero-glow-drift 25s ease-in-out infinite alternate;
}

@keyframes oc-hero-glow-drift {
  0%   { transform: translate3d(-9%, -7%, 0) scale(.88); }
  23%  { transform: translate3d(18%, 13%, 0) scale(1.05); }
  51%  { transform: translate3d(-16%, 31%, 0) scale(.96); }
  76%  { transform: translate3d(24%, 41%, 0) scale(1.1); }
  100% { transform: translate3d(-3%, 59%, 0) scale(.91); }
}

body .hero h1 { text-shadow: 0 0 34px rgba(32, 231, 237, .12); }

/* O destaque principal precisa de leitura imediata — sem o contorno neon global. */
body .hero h1 em {
  color: var(--oc-yellow) !important;
  background: none !important;
  -webkit-text-fill-color: var(--oc-yellow) !important;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 24px rgba(239, 255, 74, .28);
}

body .price-mini {
  color: var(--oc-copy) !important;
  border-color: rgba(32, 231, 237, .42) !important;
  background: rgba(13, 15, 23, .96) !important;
  box-shadow: 0 0 24px rgba(32, 231, 237, .08);
}
body .price-mini span { color: var(--oc-copy) !important; }
body .price-mini strong { color: var(--oc-yellow) !important; }

body .pill,
body .proof-mini,
body .note-box {
  color: var(--oc-copy);
  border-color: var(--oc-line);
  background: rgba(13, 15, 23, .86);
}

body .proof-mini {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .pill strong,
body .proof-mini strong,
body .note-box strong { color: var(--oc-text); }

body .glass,
body .story-card,
body .role-card,
body .demo-step,
body .outcome,
body .compare-card,
body .module,
body .fit-card,
body .instructor-card-v2,
body details {
  color: var(--oc-copy);
  border-color: var(--oc-line);
  background: linear-gradient(145deg, rgba(21, 24, 36, .96), rgba(10, 12, 19, .96));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

body .loop-item,
body .lesson,
body .authority {
  color: var(--oc-copy);
  border-color: rgba(32, 231, 237, .18);
  background: rgba(255, 255, 255, .035);
}

body .loop-item span,
body .demo-step span,
body .lesson span,
body .authority span,
body .fit-card li,
body .compare-card li,
body .offer-top small { color: var(--oc-muted); }

body .loop-icon,
body .role-icon,
body .guarantee-icon {
  color: var(--oc-cyan);
  border-color: rgba(32, 231, 237, .28);
  background: rgba(32, 231, 237, .09);
}

body .quote-section {
  border-block: 1px solid rgba(255, 89, 214, .2);
  background:
    linear-gradient(90deg, rgba(255, 89, 214, .05), transparent 35%, rgba(32, 231, 237, .05)),
    #090a10;
}

body .quote-box {
  padding: clamp(48px, 6vw, 76px) clamp(24px, 6vw, 72px);
}
body .quote-box .eyebrow { color: var(--oc-magenta); border-color: rgba(255, 89, 214, .3); background: rgba(255, 89, 214, .08); }
body .quote-box h2,
body .final-cta h2 { color: var(--oc-text); }
body .quote-box p,
body .final-cta p { color: var(--oc-copy); }

body .demo-step::before { color: rgba(32, 231, 237, .15); }
body .outcome-number { margin-bottom: 28px; }

body .compare-card.before { border-color: rgba(255, 117, 143, .3); }
body .compare-card.after {
  border-color: rgba(32, 231, 237, .38);
  background: linear-gradient(145deg, rgba(13, 31, 37, .98), rgba(9, 12, 19, .98));
}
body .compare-card.after h3,
body .compare-card.after li { color: var(--oc-text); }
body .compare-card.before li::before,
body .fit-card.not li::before { color: var(--oc-danger); }
body .compare-card.after li::before,
body .fit-card:not(.not) li::before { color: var(--oc-cyan); }

body .lesson i {
  color: #031013;
  background: var(--oc-cyan);
}

body .instructor-section {
  background: linear-gradient(180deg, transparent, rgba(255, 89, 214, .045), transparent);
}
body .instructor-photo,
body .instructor-photo-placeholder {
  border-color: var(--oc-line) !important;
  background: var(--oc-surface) !important;
}
body .instructor-copy-v2 p { color: var(--oc-copy) !important; }
body .authority-row.clean .authority strong { color: var(--oc-cyan) !important; }
body .authority-row.clean .authority span { color: var(--oc-muted) !important; }

body .offer-section {
  border-block: 1px solid rgba(32, 231, 237, .16);
  background: radial-gradient(circle at 72% 45%, rgba(32, 231, 237, .08), transparent 30%);
}

body .offer-card {
  color: var(--oc-copy);
  border: 1px solid rgba(32, 231, 237, .4);
  background: linear-gradient(155deg, rgba(21, 24, 36, .98), rgba(8, 10, 16, .98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4), 0 0 34px rgba(32, 231, 237, .06);
}

body .include::before {
  color: #031013;
  border-color: var(--oc-cyan);
  background: var(--oc-cyan);
}

body .price-box {
  color: var(--oc-text);
  border-color: rgba(239, 255, 74, .38);
  background: #080a0e;
  box-shadow: inset 0 0 34px rgba(239, 255, 74, .035);
}
body .price-box .from,
body .price-caption { color: var(--oc-copy); }
body .price small { color: var(--oc-copy); }
body .price strong { color: var(--oc-yellow); text-shadow: 0 0 22px rgba(239, 255, 74, .15); }

body .guarantee {
  color: var(--oc-copy);
  border-color: rgba(32, 231, 237, .24);
  background: rgba(32, 231, 237, .055);
}

body details { overflow: visible; }
body summary { border-radius: 21px; }
body summary::after { color: var(--oc-cyan); }
body details[open] summary { color: var(--oc-cyan); }

body .final-cta {
  border-top: 1px solid rgba(255, 89, 214, .2);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 89, 214, .09), transparent 42%),
    #080910;
}

body .site-footer {
  color: var(--oc-muted);
  border-color: rgba(32, 231, 237, .18);
  background: #050509;
}
body .site-footer a { color: var(--oc-copy); }
body .site-footer a:hover { color: var(--oc-cyan); }

body .btn,
body .btn.light,
body .btn.secondary {
  color: #031013;
  border-color: var(--oc-cyan);
  background: var(--oc-cyan);
  box-shadow: 0 12px 34px rgba(32, 231, 237, .18);
}
body .btn.secondary {
  color: var(--oc-text);
  border-color: rgba(255, 89, 214, .65);
  background: rgba(255, 89, 214, .08);
  box-shadow: none;
}
body .offer-card .checkout-cta,
body .final-cta .checkout-cta {
  color: #111500;
  border-color: var(--oc-yellow);
  background: var(--oc-yellow);
  box-shadow: 0 14px 38px rgba(239, 255, 74, .16);
}

body .btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
body .btn:active { transform: translateY(0) scale(.985); }
body a:focus-visible,
body button:focus-visible,
body summary:focus-visible {
  outline: 3px solid var(--oc-yellow);
  outline-offset: 4px;
}

@media (max-width: 1060px) {
  body .demo-grid { grid-template-columns: repeat(3, 1fr); }
  body .demo-step { min-height: 150px; }
}

@media (max-width: 820px) {
  body .topbar { padding-inline: 10px; }
  body .topbar .nav { min-height: 68px; }
  body .brand-text span,
  body .nav-links { display: none; }
  body .story,
  body .mechanism,
  body .comparison,
  body .modules,
  body .fit-grid,
  body .offer-wrap { grid-template-columns: 1fr; }
  body .outcomes { grid-template-columns: 1fr 1fr; }
  body .instructor-card-v2 { grid-template-columns: minmax(210px, .7fr) 1.3fr; }
  body section { padding-block: 72px; }
}

@media (max-width: 600px) {
  body { overflow-x: hidden; }
  body .container { width: min(100% - 32px, 1180px); }
  body .hero { padding: 58px 0 48px; }
  body .hero::after { width: 90vw; left: 5%; top: 10%; }
  body .quote-box { padding: 42px 22px; }
  body .hero h1 { font-size: clamp(38px, 12vw, 58px); }
  body .hero-actions { align-items: stretch; }
  body .hero-actions .btn { width: 100%; white-space: normal; }
  body .demo-grid,
  body .outcomes { grid-template-columns: 1fr; }
  body .demo-step { min-height: 0; }
  body .story-card,
  body .compare-card,
  body .module,
  body .fit-card,
  body .offer-card { padding: 22px; border-radius: 24px; }
  body .instructor-card-v2 { grid-template-columns: 1fr; }
  body .instructor-photo-placeholder { min-height: 320px; }
  body .authority-row { grid-template-columns: 1fr; }
  body .offer-top { align-items: flex-start; flex-direction: column; }
  body .price strong { font-size: clamp(54px, 20vw, 72px); }
  body .guarantee { grid-template-columns: 52px 1fr; padding: 16px; }
  body .guarantee-icon { width: 52px; height: 52px; border-radius: 16px; }
  body .sticky-mobile {
    border-top: 1px solid rgba(32, 231, 237, .3);
    background: rgba(5, 5, 9, .94);
    backdrop-filter: blur(16px);
  }
  body .sticky-mobile .btn { color: #111500; border-color: var(--oc-yellow); background: var(--oc-yellow); }
  body .site-footer { padding-bottom: 102px; }
}

@media (max-width: 360px) {
  body .container { width: min(100% - 24px, 1180px); }
  body .brand-mark { width: 38px; height: 38px; }
  body .topbar .btn { min-height: 42px; padding-inline: 14px; font-size: 13px; }
  body .hero h1 { font-size: 37px; }
  body .price-box { padding: 18px; }
  body summary { padding: 18px; }
  body details p { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  body .reveal { opacity: 1; transform: none; }
}