:root { --button-radius: 7px; }
body { background: radial-gradient(circle at 24% 18%, rgba(45,212,191,.18), transparent 25%), radial-gradient(circle at 72% 66%, rgba(244,208,111,.12), transparent 28%), linear-gradient(180deg,#101418,#1B2428); color: #F7FFFC; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.46; background: linear-gradient(90deg, rgba(247,255,252,.052) 1px, transparent 1px), linear-gradient(rgba(247,255,252,.052) 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(16,20,24,.82); backdrop-filter: blur(18px); }
.site-nav a { border-color:rgba(244,208,111,.18); background:rgba(27,36,40,.58); color:#F7FFFC; }
.site-nav a:hover,.site-nav a:focus-visible { border-color:#2DD4BF; background:rgba(45,212,191,.12); }
.hero__grid { grid-template-columns:minmax(0,1.04fr) minmax(320px,.86fr); }
.hero__copy { text-align:left; max-width:720px; margin:0; }
.hero__subtitle { margin-left:0; margin-right:0; }
.hero__actions { justify-content:flex-start; }
.hero__insights { grid-template-columns:1fr; }
.insight-card { background:rgba(27,36,40,0.66); border-left-color:#F4D06F; }
.section__point-card,.blog-card,.contact-card,.legal-card,.table-card { background:rgba(27,36,40,0.46); border-left-color:#2DD4BF; }
.button--primary { background: linear-gradient(135deg, #2DD4BF, #F4D06F); color:#07101A; }
.button--secondary { color:#F7FFFC; background:rgba(27,36,40,0.50); border-color:rgba(244,208,111,.18); }
.table-card table { color:#F7FFFC; }
.footer { background:linear-gradient(180deg, rgba(27,36,40,.20), rgba(16,20,24,.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); }