/* Codex visual duplicate.
   This file intentionally changes only presentation for codex.html. */

:root {
  --brand: #5c63f1;
  --brand-dark: #272b9d;
  --brand-light: #eef1ff;
  --brand-glow: rgba(92, 99, 241, 0.16);
  --cta-green: #13a36b;
  --cta-green-dark: #0b7f52;
  --cta-green-light: #e7f8ef;
  --cta-green-shadow: rgba(19, 163, 107, 0.24);
  --brand-secondary: #aeb8ff;
  --brand-light-text: #3f4154;
  --accent: #0b0d12;
  --accent-dark: #05060a;
  --accent-light: #ffffff;
  --lilac: #d9ddff;
  --text-muted: #4f5365;
  --dark: #f5f7ff;
  --dark2: #eef2ff;
  --gray-900: #0b0d12;
  --gray-700: #272b35;
  --gray-600: #525767;
  --gray-500: #6f7584;
  --gray-400: #a5adbb;
  --gray-300: #d9dee8;
  --gray-200: #e9edf5;
  --gray-100: #f4f6fb;
  --gray-50: #f7f8fb;
  --white: rgba(255, 255, 255, 0.82);
  --easing: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  background: #f6f8ff;
}

body {
  color: var(--gray-900);
  background:
    radial-gradient(circle at 70% 8%, rgba(112, 111, 255, 0.28), transparent 28rem),
    linear-gradient(180deg, #f7f8ff 0%, #ffffff 42%, #f4f7ff 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 58% 18%, rgba(111, 103, 255, 0.34), transparent 20rem),
    radial-gradient(circle at 20% 22%, rgba(204, 224, 255, 0.78), transparent 28rem),
    radial-gradient(circle at 75% 75%, rgba(177, 186, 255, 0.54), transparent 34rem),
    url("assets/codex/section-1.webp") center top / cover no-repeat;
  filter: saturate(1.08) brightness(1.02);
  animation: codexFloralDrift 18s var(--easing) infinite alternate;
  transform: translate3d(0, 0, 0) scale(1.03);
  will-change: transform, opacity;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.34), rgba(255,255,255,0.46)),
    repeating-linear-gradient(0deg, rgba(11,13,18,0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: soft-light;
}

@keyframes codexFloralDrift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1.04); opacity: 0.94; }
  50% { transform: translate3d(1.5%, 1%, 0) scale(1.08); opacity: 1; }
  100% { transform: translate3d(2.5%, -1.5%, 0) scale(1.05); opacity: 0.96; }
}

.scroll-progress {
  background: linear-gradient(90deg, #2527a8, #6e75ff, #cfd6ff);
}

.sticky-bar {
  background: rgba(255, 255, 255, 0.74);
  border-bottom: 1px solid rgba(15, 17, 24, 0.08);
  box-shadow: 0 12px 32px rgba(60, 66, 102, 0.08);
  backdrop-filter: blur(22px) saturate(1.2);
}

.sticky-bar-inner {
  color: #12141b;
}

.sticky-bar-info .sticky-label,
.sticky-bar-info .sticky-price-new,
.sticky-bar-info .sticky-mobile strong {
  color: var(--cta-green);
}

.sticky-bar-info .sticky-divider {
  background: rgba(17, 20, 32, 0.16);
}

.sticky-bar-cta,
.btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cta-green) 0%, var(--cta-green-dark) 100%) !important;
  background-size: 180% 180% !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 18px 38px var(--cta-green-shadow) !important;
  animation: codexCtaBreath 2.8s var(--easing) infinite;
  will-change: transform, box-shadow, background-position;
}

.sticky-bar-cta:hover,
.btn-primary:hover {
  transform: translateY(-2px) scale(1.01);
  background-position: 100% 50% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 22px 48px rgba(19, 163, 107, 0.3) !important;
}

.sticky-bar-cta:active,
.btn-primary:active,
.btn-white:active {
  transform: translateY(0) scale(0.98);
}

.btn-white {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cta-green) 0%, var(--cta-green-dark) 100%) !important;
  background-size: 180% 180% !important;
  border: 1px solid rgba(255,255,255,0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 16px 40px var(--cta-green-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  animation: codexCtaBreath 2.8s var(--easing) infinite;
  will-change: transform, box-shadow, background-position;
}

.btn-white:hover {
  transform: translateY(-2px) scale(1.01) !important;
  background-position: 100% 50% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 22px 48px rgba(19, 163, 107, 0.3) !important;
}

.sticky-bar-cta::before,
.btn-primary::before,
.btn-white::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.28), transparent 42%);
  opacity: 0.72;
}

@keyframes codexCtaBreath {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 16px 34px rgba(19, 163, 107, 0.2);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 22px 46px rgba(19, 163, 107, 0.32);
  }
}

.hero {
  min-height: 100dvh;
  color: #0a0c12;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.58) 66%, rgba(247,248,251,0.96) 100%),
    radial-gradient(circle at 62% 23%, rgba(83, 90, 255, 0.34), transparent 20rem),
    radial-gradient(circle at 18% 16%, rgba(228, 239, 255, 0.92), transparent 31rem) !important;
  overflow: hidden;
}

.hero::before {
  inset: 0;
  background:
    url("assets/codex/section-1.webp") center top / cover no-repeat,
    linear-gradient(120deg, rgba(255,255,255,0.7), rgba(218,224,255,0.7));
  opacity: 0.84;
  animation: codexHeroMotion 16s var(--easing) infinite alternate;
  transform: translate3d(0,0,0) scale(1.06);
  will-change: transform;
}

.codex-bg-video {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  opacity: 0.52;
  filter: saturate(1.04) brightness(1.08);
  transform: translate3d(0, 0, 0) scale(1.02);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.3) 64%, #f7f8fb 100%);
}

@keyframes codexHeroMotion {
  0% { transform: translate3d(-2%, -1%, 0) scale(1.08); }
  100% { transform: translate3d(2%, 1.5%, 0) scale(1.12); }
}

.hero-inner,
.vsl-container,
.hero-cta-group {
  position: relative;
  z-index: 2;
}

.hero-mascot {
  width: 88px !important;
  height: 88px !important;
  filter: drop-shadow(0 22px 42px rgba(76, 82, 223, 0.24)) !important;
  animation: codexIconFloat 5.2s var(--easing) infinite !important;
}

@keyframes codexIconFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

.hero-badge,
.section-tag {
  color: #3439d9 !important;
  background: rgba(255,255,255,0.52) !important;
  border: 1px solid rgba(73, 78, 210, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 28px rgba(79, 86, 158, 0.08);
  backdrop-filter: blur(20px) saturate(1.12);
}

.hero-badge .dot {
  background: #4b56f0;
  box-shadow: 0 0 0 5px rgba(75,86,240,0.12);
}

.hero h1 {
  color: #090b10 !important;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero h1 .highlight {
  color: #0a0c12 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.hero-sub,
.btn-sub,
.final-cta .sub {
  color: #202431 !important;
}

.hero-checks li::before {
  color: #3b46e8 !important;
}

.vsl-container {
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow: 0 32px 80px rgba(58, 65, 111, 0.18), inset 0 1px 0 rgba(255,255,255,0.62);
  backdrop-filter: blur(20px);
}

vturb-smartplayer {
  background:
    radial-gradient(circle at 42% 24%, rgba(93,100,240,0.28), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(225,231,255,0.8)),
    url("assets/codex/codex-app.webp") center / cover no-repeat !important;
  box-shadow: none !important;
}

section[style*="background:var(--gray-50)"],
section[style*="background:var(--white)"],
.faq-section {
  background: rgba(255,255,255,0.74) !important;
}

section:nth-of-type(even) {
  background: rgba(247,248,251,0.82) !important;
}

.section-title,
h2,
h3 {
  color: #0b0d12 !important;
  letter-spacing: -0.035em;
}

p,
li,
.faq-answer,
.module-content p {
  color: #313746;
}

em,
.highlight-text,
.problem-card strong,
.module-badge {
  color: #3439d9 !important;
}

.codex-intro,
.story-box,
.use-case-card,
.problem-card,
.solution-card,
.transform-card,
.timeline-content,
.faq-item,
.offer-card {
  color: #10131c;
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(38, 45, 88, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 18px 48px rgba(62, 70, 116, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.08);
}

.use-case-card:hover,
.problem-card:hover,
.solution-card:hover,
.timeline-item:hover .timeline-content,
.faq-item:hover {
  border-color: rgba(73, 78, 210, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 28px 64px rgba(62, 70, 116, 0.13) !important;
}

.solution-pill--ai,
.stack-offer-check {
  color: #3439d9 !important;
  background: rgba(92,99,241,0.1) !important;
}

.timeline::before {
  background: linear-gradient(180deg, #5662ee, rgba(192,200,255,0.3)) !important;
}

.timeline-marker {
  background: #ffffff !important;
  border-color: #5662ee !important;
  box-shadow: 0 8px 24px rgba(86,98,238,0.18);
}

.timeline-item.active .timeline-marker {
  background: #5662ee !important;
}

.mid-cta,
.final-cta {
  color: #0b0d12;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(232,248,239,0.86)),
    radial-gradient(circle at 72% 22%, rgba(19,163,107,0.2), transparent 24rem) !important;
}

.mid-cta h2,
.mid-cta p,
.final-cta h2 {
  color: #0b0d12 !important;
}

.price-badge {
  background: var(--cta-green) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(19, 163, 107, 0.22);
}

.pricing-original {
  color: #7b8190 !important;
}

.pricing-current {
  color: var(--cta-green-dark) !important;
}

.pricing-current .currency,
.pricing-lifetime,
.stack-offer-title {
  color: var(--cta-green) !important;
}

.faq-question .arrow {
  color: #3439d9 !important;
}

.footer {
  color: #515767 !important;
  background: rgba(255,255,255,0.78) !important;
  border-top-color: rgba(15,17,24,0.08) !important;
}

.particle {
  background: rgba(91,99,241,0.22) !important;
  filter: blur(0.5px);
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
  }

  .hero-mascot {
    width: 68px !important;
    height: 68px !important;
  }

  .vsl-container {
    border-radius: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .hero::before,
  .hero-mascot,
  .sticky-bar-cta,
  .btn-primary,
  .btn-white {
    animation: none !important;
  }
}

/* Final readability pass for the light Codex theme. */
.offer-card,
.offer-card *:not(.price-badge):not(.btn-primary),
.stack-offer,
.stack-offer-item,
.stack-offer-item span,
.guarantee-badge,
.guarantee-badge span,
.guarantee-badge strong {
  color: #12141b !important;
}
.stack-offer-title,
.pricing-lifetime,
.pricing-current .currency {
  color: var(--cta-green) !important;
}
.stack-offer-item {
  border-bottom-color: rgba(17, 20, 32, 0.08) !important;
}
.stack-offer-check {
  color: var(--cta-green) !important;
  background: rgba(19, 163, 107, 0.12) !important;
}
.story-author-info p,
.story-block p,
.story-list li,
.story-footnote,
.metric-label,
.usecase-list,
.usecase-list li,
.material-card p,
.timeline-content p,
.faq-answer,
.footer p {
  color: #313746 !important;
}
.material-card h3,
.story-author-info h3,
.story-block h4,
.timeline-content h4,
.faq-question span:first-child {
  color: #0b0d12 !important;
}
.footer .brand-link {
  color: #3439d9 !important;
}

/* Responsive hardening pass. */
.hero-inner,
.section-inner,
.final-cta-inner,
.solution-card,
.transform-card,
.material-card,
.metric-card,
.offer-card,
.faq-item,
.timeline-content,
.sticky-bar-info {
  min-width: 0;
}

.hero h1,
.section-title,
.mid-cta h2,
.final-cta h2,
.hero-sub,
.section-subtitle,
.faq-question span:first-child,
.stack-offer-item span {
  overflow-wrap: anywhere;
}

.btn-primary,
.btn-white,
.sticky-bar-cta {
  max-width: 100%;
  min-height: 44px;
  text-align: center;
}

.price-badge {
  max-width: calc(100% - 2rem);
  text-align: center;
}

.feature-icon,
.material-icon {
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .sticky-bar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .sticky-bar-info {
    overflow: hidden;
  }

  .sticky-bar-info .sticky-mobile {
    display: block;
    max-width: 100%;
  }

  .vsl-horizontal {
    display: none !important;
  }

  .vsl-vertical {
    display: block !important;
  }

  .vsl-container {
    width: min(100%, 400px);
  }

  .vsl-vertical vturb-smartplayer {
    min-height: clamp(430px, 142vw, 620px);
  }
}

@media (max-width: 480px) {
  .sticky-bar {
    padding: 0 0.75rem !important;
  }

  .sticky-bar-inner {
    gap: 0.6rem !important;
  }

  .sticky-bar-cta {
    padding: 0.58rem 0.85rem !important;
    font-size: 0.75rem !important;
    line-height: 1.1;
  }

  .sticky-bar-info .sticky-mobile {
    font-size: 0.78rem !important;
  }

  .hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.2rem) !important;
  }

  .hero-sub {
    font-size: 0.96rem !important;
  }

  .metrics-grid {
    grid-template-columns: 1fr !important;
  }

  .pricing-current {
    font-size: clamp(2.65rem, 16vw, 3rem) !important;
  }

  .offer-card {
    border-radius: 18px !important;
  }
}