/* Index page — light theme */

html[data-theme="light"] .hero.hero-collage,
:root[data-theme="light"] .hero.hero-collage {
  background: #FFFFFF;
}

/* Top tint — gives header glass visible content to blur on wide screens */
html[data-theme="light"] .hero.hero-collage::before,
:root[data-theme="light"] .hero.hero-collage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 38% at 50% 0%, rgba(203, 229, 1, 0.22), transparent 70%),
    radial-gradient(ellipse 28% 24% at 18% 8%, rgba(0, 0, 0, 0.06), transparent 72%),
    radial-gradient(ellipse 28% 24% at 82% 8%, rgba(203, 229, 1, 0.12), transparent 72%);
}

html[data-theme="light"] .hcard img,
:root[data-theme="light"] .hcard img {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .hero-vignette,
:root[data-theme="light"] .hero-vignette {
  background: none;
}

html[data-theme="light"] .hero-title-collage .htc-en,
:root[data-theme="light"] .hero-title-collage .htc-en {
  color: #111111;
}

html[data-theme="light"] .hero-title-collage .htc-sub,
:root[data-theme="light"] .hero-title-collage .htc-sub {
  color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .hero-social-proof,
:root[data-theme="light"] .hero-social-proof {
  background: #F2F2F2;
  border-color: #CCCCCC;
  box-shadow: none;
}

html[data-theme="light"] .hsp-brand-wrap,
:root[data-theme="light"] .hsp-brand-wrap {
  background: #FFFFFF;
}

html[data-theme="light"] .hsp-brand,
:root[data-theme="light"] .hsp-brand {
  background: #CBE501;
  color: #111111;
}

html[data-theme="light"] .hsp-stats,
:root[data-theme="light"] .hsp-stats {
  color: #111111;
}

html[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .hero-center .btn-secondary {
  color: #111111;
}

/* Section backgrounds — white */
html[data-theme="light"] .pain-section,
html[data-theme="light"] .solution-section,
html[data-theme="light"] .bonus-section,
html[data-theme="light"] .faq-section,
:root[data-theme="light"] .pain-section,
:root[data-theme="light"] .solution-section,
:root[data-theme="light"] .bonus-section,
:root[data-theme="light"] .faq-section {
  background: var(--bg);
}

/* Gray band: zoom-reveal → nodes → portfolio → priziv panes */
html[data-theme="light"] .nodes-pin,
html[data-theme="light"] .zr-wrap,
html[data-theme="light"] .zr-sticky,
html[data-theme="light"] .zr-nodes-section,
html[data-theme="light"] .porto-section,
html[data-theme="light"] .priziv-wrap,
html[data-theme="light"] .priziv-sticky,
html[data-theme="light"] .priziv-pane,
:root[data-theme="light"] .nodes-pin,
:root[data-theme="light"] .zr-wrap,
:root[data-theme="light"] .zr-sticky,
:root[data-theme="light"] .zr-nodes-section,
:root[data-theme="light"] .porto-section,
:root[data-theme="light"] .priziv-wrap,
:root[data-theme="light"] .priziv-sticky,
:root[data-theme="light"] .priziv-pane {
  background: #E9E9E9;
}

/* Choose section — dark block in light theme */
html[data-theme="light"] .choose-section,
:root[data-theme="light"] .choose-section {
  background: var(--bg);
}

html[data-theme="light"] .choose-panel,
:root[data-theme="light"] .choose-panel {
  background: #0c0c0c;
}

html[data-theme="light"] .choose-title,
:root[data-theme="light"] .choose-title {
  color: var(--accent);
}

html[data-theme="light"] .choose-filter,
:root[data-theme="light"] .choose-filter {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.45);
}

html[data-theme="light"] .choose-filter.is-active,
:root[data-theme="light"] .choose-filter.is-active {
  background: transparent;
  color: #ffffff;
  border-color: var(--accent);
}

html[data-theme="light"] .choose-filter:hover:not(.is-active),
:root[data-theme="light"] .choose-filter:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Solution */
html[data-theme="light"] .solution-title,
:root[data-theme="light"] .solution-title {
  color: #111111;
}

html[data-theme="light"] .solution-card:not(.solution-card--active),
:root[data-theme="light"] .solution-card:not(.solution-card--active) {
  background: var(--bg);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .solution-card:not(.solution-card--active):hover,
:root[data-theme="light"] .solution-card:not(.solution-card--active):hover {
  border-color: rgba(0, 0, 0, 0.14);
}

html[data-theme="light"] .solution-card:not(.solution-card--active) .solution-card-head,
:root[data-theme="light"] .solution-card:not(.solution-card--active) .solution-card-head {
  color: #111111;
}

html[data-theme="light"] .solution-card:not(.solution-card--active) .solution-card-body,
:root[data-theme="light"] .solution-card:not(.solution-card--active) .solution-card-body {
  color: rgba(0, 0, 0, 0.62);
}

html[data-theme="light"] .solution-card:not(.solution-card--active) .solution-num,
:root[data-theme="light"] .solution-card:not(.solution-card--active) .solution-num {
  color: rgba(0, 0, 0, 0.48);
}

html[data-theme="light"] .solution-card:not(.solution-card--active)::before,
:root[data-theme="light"] .solution-card:not(.solution-card--active)::before {
  color: rgba(0, 0, 0, 0.07);
}

/* Zoom reveal — difference blend like dark theme (white text inverts on sparkles) */
html[data-theme="light"] .zr-deco,
:root[data-theme="light"] .zr-deco {
  filter: invert(1);
}

html[data-theme="light"] .zr-block,
:root[data-theme="light"] .zr-block {
  mix-blend-mode: difference;
}

html[data-theme="light"] .zr-eyebrow,
html[data-theme="light"] .zr-hl,
html[data-theme="light"] .zr-hl--green,
:root[data-theme="light"] .zr-eyebrow,
:root[data-theme="light"] .zr-hl,
:root[data-theme="light"] .zr-hl--green {
  color: #ffffff;
  background: none;
  padding: 0;
  border-radius: 0;
  box-decoration-break: initial;
  -webkit-box-decoration-break: initial;
}

/* Node graph canvas only — lighter than gray section band */
html[data-theme="light"] .zr-nodes,
:root[data-theme="light"] .zr-nodes {
  background:
    linear-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  box-shadow: var(--shadow-sm);
}

/* Priziv CTA backdrop — white block behind split reveal */
html[data-theme="light"] .priziv-backdrop,
:root[data-theme="light"] .priziv-backdrop {
  background: #FFFFFF;
}
html[data-theme="light"] .pc-cta-title,
:root[data-theme="light"] .pc-cta-title {
  color: #111111;
}

html[data-theme="light"] .pc-cta-sub,
:root[data-theme="light"] .pc-cta-sub {
  color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .priziv-eye,
:root[data-theme="light"] .priziv-eye {
  color: #111111;
}

/* Bonus */
html[data-theme="light"] .bonus-card,
:root[data-theme="light"] .bonus-card {
  background: var(--bg);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .bonus-eyebrow,
:root[data-theme="light"] .bonus-eyebrow {
  color: rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .bonus-title,
:root[data-theme="light"] .bonus-title {
  color: #111111;
}

html[data-theme="light"] .bonus-desc,
:root[data-theme="light"] .bonus-desc {
  color: rgba(0, 0, 0, 0.5);
}

/* FAQ */
html[data-theme="light"] .faq-title,
:root[data-theme="light"] .faq-title {
  color: #111111;
}

html[data-theme="light"] .faq-item,
:root[data-theme="light"] .faq-item {
  border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .faq-q,
:root[data-theme="light"] .faq-q {
  color: #111111;
}

html[data-theme="light"] .faq-a,
:root[data-theme="light"] .faq-a {
  color: rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] .faq-item:first-child,
:root[data-theme="light"] .faq-item:first-child {
  border-top-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .faq-q::after,
:root[data-theme="light"] .faq-q::after {
  color: rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .faq-item.is-open .faq-q::after,
:root[data-theme="light"] .faq-item.is-open .faq-q::after {
  color: var(--accent);
}

/* Green text on gray → white on dark chip */
html[data-theme="light"] .htc-label,
html[data-theme="light"] .bonus-link,
:root[data-theme="light"] .htc-label,
:root[data-theme="light"] .bonus-link {
  color: var(--sp-green-text);
  background-color: var(--sp-green-text-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

html[data-theme="light"] .htc-label,
:root[data-theme="light"] .htc-label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  opacity: 1;
}

html[data-theme="light"] .bonus-link,
:root[data-theme="light"] .bonus-link {
  padding: 0 0.25em;
  border-radius: 0.2em;
}

html[data-theme="light"] .solution-title em,
html[data-theme="light"] .pc-cta-title em,
:root[data-theme="light"] .solution-title em,
:root[data-theme="light"] .pc-cta-title em {
  color: var(--accent);
  background: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-decoration-break: initial;
  -webkit-box-decoration-break: initial;
}

html[data-theme="light"] .bonus-link,
:root[data-theme="light"] .bonus-link {
  text-decoration: none;
}