:root { --button-radius: 11px; }
body { background: radial-gradient(circle at 28% 20%, rgba(168,85,247,.20), transparent 25%), radial-gradient(circle at 72% 62%, rgba(34,211,238,.14), transparent 27%), linear-gradient(180deg,#140E24,#25173D); color: #FCF8FF; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.46; background: linear-gradient(90deg, rgba(252,248,255,.055) 1px, transparent 1px), linear-gradient(rgba(252,248,255,.055) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(180deg, rgba(0,0,0,.70), transparent 82%); }
.site-shell,.site-header { position:relative; z-index:1; }
.site-header { background:rgba(20,14,36,.82); backdrop-filter: blur(18px); }
.site-nav a { border-color:rgba(34,211,238,.20); background:rgba(37,23,61,.58); color:#FCF8FF; }
.site-nav a:hover,.site-nav a:focus-visible { border-color:#A855F7; background:rgba(168,85,247,.12); }
.hero__grid { grid-template-columns:1fr; }
.hero__copy { text-align:center; max-width:860px; margin:0 auto; }
.hero__subtitle { margin-left:auto; margin-right:auto; }
.hero__actions { justify-content:center; }
.hero__insights { grid-template-columns:repeat(3,minmax(0,1fr)); }
.insight-card { background:rgba(37,23,61,0.66); border-left-color:#22D3EE; }
.section__point-card,.blog-card,.contact-card,.legal-card,.table-card { background:rgba(37,23,61,0.46); border-left-color:#A855F7; }
.button--primary { background: linear-gradient(135deg, #A855F7, #22D3EE); color:#07101A; }
.button--secondary { color:#FCF8FF; background:rgba(37,23,61,0.50); border-color:rgba(34,211,238,.20); }
.table-card table { color:#FCF8FF; }
.footer { background:linear-gradient(180deg, rgba(37,23,61,.20), rgba(20,14,36,.94)); }
@media (max-width:1024px){ .hero__grid,.hero__insights{grid-template-columns:1fr;} .hero__copy{text-align:left;margin:0;max-width:720px;} .hero__subtitle{margin-left:0;margin-right:0;} .hero__actions{justify-content:flex-start;} }
/* Hero contrast guard: text is over photography, so it must stay readable on every theme. */
.hero { color:#F8FAFC; }
.hero h1,
.hero__subtitle,
.hero__copy,
.hero__copy p { color:#F8FAFC; text-shadow:0 2px 18px rgba(0,0,0,.38); }
.hero__subtitle { color:rgba(248,250,252,.88); }
.hero__overlay { background:linear-gradient(135deg, rgba(6,10,18,.88), rgba(6,10,18,.38) 48%, rgba(6,10,18,.68)); }
.hero .button--secondary { color:#F8FAFC; background:rgba(8,13,24,.48); border-color:rgba(248,250,252,.24); }
.hero .button--secondary:hover,
.hero .button--secondary:focus-visible { background:rgba(248,250,252,.14); border-color:rgba(248,250,252,.42); }
.hero .insight-card { background:rgba(8,13,24,.62); color:#F8FAFC; backdrop-filter:blur(10px); }
.hero .insight-card strong { color:#FFFFFF; }
.hero .insight-card span { color:rgba(248,250,252,.84); }
/* Readability corrections for photo hero and dark KPI band. */
.hero .insight-card { background:rgba(8,13,24,.58); color:#F8FAFC; box-shadow:0 18px 46px rgba(0,0,0,.24); backdrop-filter:blur(10px); }
.hero .insight-card strong { color:#FFFFFF; text-shadow:none; }
.hero .insight-card span { color:rgba(248,250,252,.86); text-shadow:none; }
.kpi-band__grid { background:rgba(8,13,24,.94); }
.kpi-card { color:#F8FAFC; }
.kpi-card__value { color:#F8FAFC; }
.kpi-card__text { color:rgba(248,250,252,.86); }
.kpi-card__source { color:rgba(248,250,252,.66); }
/* Structural contrast: visible table lines and soft boundaries on dark themes. */
.table-card { background:rgba(8,13,24,.28); box-shadow:inset 0 0 0 1px rgba(248,250,252,.10); }
.table-wrap table { border-collapse:separate; border-spacing:0; }
.table-wrap thead th { border-bottom:1px solid rgba(248,250,252,.22); }
.table-wrap th,
.table-wrap td { border-bottom:1px solid rgba(248,250,252,.14); }
.table-wrap th + th,
.table-wrap td + td { border-left:1px solid rgba(248,250,252,.08); }
.table-wrap tbody tr:last-child td { border-bottom:0; }
.section__point-card,.blog-card,.contact-card,.legal-card { box-shadow:inset 0 0 0 1px rgba(248,250,252,.08); }
.faq-item { border-color:rgba(248,250,252,.15); }
/* Editorial links inside the hero paragraph. */
.hero__subtitle a { color:#FFFFFF; font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.hero__subtitle a:hover,.hero__subtitle a:focus-visible { color:var(--accent); }