/* Visibility / contrast patch for public-facing pages
   Keeps the premium dark hero, but restores readable marketing surfaces and text.
*/

:root{
  --surface-light-0: #ffffff;
  --surface-light-1: #f8fafc;
  --surface-light-2: #eff6ff;
  --surface-border-strong: #dbe4ee;
  --text-strong: #0f172a;
  --text-soft: #334155;
  --text-soft-2: #475569;
  --shadow-readable: 0 20px 54px rgba(15,23,42,.10);
}

body{
  color: var(--text-strong);
}

body:not(.page-home){
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(244,63,94,.08), transparent 56%),
    radial-gradient(1000px 640px at 100% 0%, rgba(56,189,248,.08), transparent 52%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

main, section, article{
  color: var(--text-strong);
}

.lead,
.page-hero .desc,
.breadcrumbs,
.article-meta,
.mockup-copy p,
.visual-sidekick-card .muted,
.eco-card p,
.spotlight-card p,
.card p,
.faq .a,
.step p,
.list li,
.callout .muted,
.small,
.hint{
  color: var(--text-soft);
}

.page-hero,
.section:not(.hero):not(.home-subnav){
  position: relative;
}

.card,
.callout,
.faq,
.step,
.visual-sidekick-card,
.mockup-card,
.eco-card,
.spotlight-card{
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
  border: 1px solid var(--surface-border-strong);
  box-shadow: var(--shadow-readable);
}

.card h4,
.step h4,
.faq summary,
.mockup-copy h4,
.eco-card h4,
.spotlight-card h3,
.spotlight-card h4,
.visual-sidekick-card h4,
.callout strong{
  color: var(--text-strong);
}

.section .pill,
.page-hero .pill,
.mockup-copy .pill,
.visual-sidekick-card .pill,
.article-meta .pill,
.card .pill{
  background: #f1f5f9;
  color: var(--text-strong);
  border-color: #d9e2ec;
}

.page-home .section .card,
.page-home .step,
.page-home .callout,
.page-home .cta,
.page-home .spotlight-card,
.page-home .visual-sidekick-card,
.page-home .mockup-card,
.page-home .eco-card{
  box-shadow: 0 20px 64px rgba(15,23,42,.10);
}

.page-home .section .card:hover,
.mockup-card:hover,
.spotlight-card:hover{
  box-shadow: 0 28px 84px rgba(15,23,42,.15);
}

.page-hero .btn-ghost,
.section:not(.hero) .btn-ghost{
  background: #ffffff;
  color: var(--text-strong);
  border-color: var(--surface-border-strong);
}
.page-hero .btn-ghost:hover,
.section:not(.hero) .btn-ghost:hover{
  background: #f8fafc;
  color: var(--text-strong);
}

.page-home .hero .btn-ghost,
.header .btn-ghost,
.mobile-panel .btn-ghost,
.search-modal .btn-ghost,
.cta .btn-ghost,
.quote .badge,
.footer .badge{
  color: inherit;
}

.page-home .hero .btn-ghost{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: #ffffff;
}

.badges .badge,
.quote .badge,
.hero .badge,
.footer .badge{
  background: rgba(255,255,255,.08);
  color: rgba(248,250,252,.92);
  border-color: rgba(255,255,255,.14);
}

.section .badge,
.page-hero .badge,
.callout .badge{
  background: #f8fafc;
  color: var(--text-strong);
  border-color: var(--surface-border-strong);
}

.kicker,
.hero p,
.brand-sub,
.metric .lbl,
.badge,
.status-chip,
.hero-signal{
  text-shadow: 0 1px 1px rgba(2,6,23,.16);
}

.search-body .d,
.search-item .d{
  color: rgba(226,232,240,.78);
}

.visual-sidekick-card,
.mockup-card,
.eco-card{
  backdrop-filter: saturate(1.02);
}

.eco-icon{
  box-shadow: inset 0 0 0 1px rgba(244,63,94,.16), 0 10px 26px rgba(244,63,94,.08);
}

.spotlight-link,
.card a.inline,
.mockup-card .inline{
  color: var(--accent2);
}

.page-home .home-subnav .chip{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.case-study-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.case-study-badges .pill{
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}

.case-grid-compact{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

.case-study-live{
  display:flex;
  flex-direction:column;
  height:100%;
}

.case-study-live .divider{
  margin-top:auto;
}

.case-study-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.case-link-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.case-link-row .btn{
  min-height: 44px;
}

html[data-theme="dark"] body:not(.page-home){
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(244,63,94,.14), transparent 56%),
    radial-gradient(1000px 640px at 100% 0%, rgba(56,189,248,.12), transparent 52%),
    linear-gradient(180deg, #09111f 0%, #0b1220 100%);
  color: rgba(248,250,252,.94);
}

html[data-theme="dark"] .lead,
html[data-theme="dark"] .page-hero .desc,
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .article-meta,
html[data-theme="dark"] .mockup-copy p,
html[data-theme="dark"] .visual-sidekick-card .muted,
html[data-theme="dark"] .eco-card p,
html[data-theme="dark"] .spotlight-card p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .faq .a,
html[data-theme="dark"] .step p,
html[data-theme="dark"] .list li,
html[data-theme="dark"] .callout .muted,
html[data-theme="dark"] .small,
html[data-theme="dark"] .hint{
  color: rgba(226,232,240,.82);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .callout,
html[data-theme="dark"] .faq,
html[data-theme="dark"] .step,
html[data-theme="dark"] .visual-sidekick-card,
html[data-theme="dark"] .mockup-card,
html[data-theme="dark"] .eco-card,
html[data-theme="dark"] .spotlight-card{
  background: linear-gradient(180deg, rgba(15,23,42,.94) 0%, rgba(17,27,52,.96) 100%);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 24px 70px rgba(2,6,23,.38);
}

html[data-theme="dark"] .card h4,
html[data-theme="dark"] .step h4,
html[data-theme="dark"] .faq summary,
html[data-theme="dark"] .mockup-copy h4,
html[data-theme="dark"] .eco-card h4,
html[data-theme="dark"] .spotlight-card h3,
html[data-theme="dark"] .spotlight-card h4,
html[data-theme="dark"] .visual-sidekick-card h4,
html[data-theme="dark"] .callout strong{
  color: #ffffff;
}

html[data-theme="dark"] .section .pill,
html[data-theme="dark"] .page-hero .pill,
html[data-theme="dark"] .mockup-copy .pill,
html[data-theme="dark"] .visual-sidekick-card .pill,
html[data-theme="dark"] .article-meta .pill,
html[data-theme="dark"] .card .pill,
html[data-theme="dark"] .section .badge,
html[data-theme="dark"] .page-hero .badge,
html[data-theme="dark"] .callout .badge{
  background: rgba(255,255,255,.07);
  color: rgba(248,250,252,.94);
  border-color: rgba(255,255,255,.14);
}

html[data-theme="dark"] .page-hero .btn-ghost,
html[data-theme="dark"] .section:not(.hero) .btn-ghost{
  background: rgba(255,255,255,.08);
  color: #ffffff;
  border-color: rgba(255,255,255,.14);
}
html[data-theme="dark"] .page-hero .btn-ghost:hover,
html[data-theme="dark"] .section:not(.hero) .btn-ghost:hover{
  background: rgba(255,255,255,.12);
}

@media (max-width: 980px){
  .case-grid-compact{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .case-link-row .btn{ width:100%; }
}