/* Omni-Science — On-Brand Flare (extracted from example-on-brand.html) */

/* Tokens used by flare components */
:root{
    --surface-2:#0f0f12; --glow:0 0 0 1px rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.55);
    --radius-2:26px; --pad:24px; --ease:cubic-bezier(.22,.61,.36,1);
}

/* Layered luxury backdrop */
body::before{
    content:""; position:fixed; inset:0; pointer-events:none;
    background:
      radial-gradient(1200px 600px at 50% -20%, color-mix(in sRGB, var(--accentB) 35%, transparent), transparent 60%),
      radial-gradient(1200px 700px at 110% -10%, color-mix(in sRGB, var(--accentA) 28%, transparent), transparent 55%),
      linear-gradient(transparent 49%, rgba(255,255,255,.03) 50%, transparent 51%) 0 0 / 120px 120px,
      linear-gradient(90deg, transparent 49%, rgba(255,255,255,.03) 50%, transparent 51%) 0 0 / 120px 120px;
    mix-blend-mode:screen; opacity:.8; z-index:0;
    -webkit-mask-image: radial-gradient(120% 120% at 50% 10%, black 40%, transparent 80%);
            mask-image: radial-gradient(120% 120% at 50% 10%, black 40%, transparent 80%);
}
body::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background: radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,.72), transparent 60%),
                radial-gradient(800px 600px at -10% 110%, rgba(0,0,0,.55), transparent 60%);
    background-blend-mode:multiply;
}

.container{ max-width: var(--container); margin:0 auto; padding:0 var(--pad); position:relative; z-index:1; }

/* Buttons — premium hover + variants */
.btn{ letter-spacing:.02em; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s; }
.btn.primary{ background:linear-gradient(90deg, var(--accentB), var(--accentA)); border-color:rgba(255,255,255,.16); }
.btn.ghost{ background:rgba(255,255,255,.02); color: var(--brand-color); }
.btn.hot{ border-color:var(--accentHot); background:linear-gradient(90deg, rgba(255,45,85,.24), rgba(255,45,85,.12)); }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 40px color-mix(in sRGB, var(--accentA) 22%, transparent), 0 10px 40px color-mix(in sRGB, var(--accentB) 22%, transparent); }

/* Utilities */
.grad{ background:linear-gradient(90deg, var(--accentB), var(--accentA)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.section-hd{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.rule{ height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); border:0; margin:26px 0; }
.pill{ display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:#e0e0e0; font-size:12px; letter-spacing:.26px; }

/* Cards / Panels */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; }
.card{ position:relative; overflow:hidden; border-radius:var(--radius-2); border:1px solid transparent; background:linear-gradient(180deg, rgba(18,18,24,.92), rgba(14,14,18,.92)) padding-box, linear-gradient(90deg, rgba(124,58,237,.38), rgba(34,211,238,.38)) border-box; box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02); padding:24px; display:flex; flex-direction:column; gap:12px; }
.card h3{ margin:6px 0; font-size:20px; letter-spacing:-.02em; }
.card p{ margin:0; color:#d4d4d4; }
.card .link{ display:inline-block; margin-top:12px; font-weight:800; background:linear-gradient(90deg, var(--accentB), var(--accentA)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.panel{ background:rgba(255,255,255,.02); border:1px solid var(--stroke); border-radius:var(--radius-2); padding:22px; position:relative; overflow:hidden; box-shadow:var(--glow); }
.panel.shimmer::before{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 0 30%, rgba(255,255,255,.04) 33%, transparent 36%); background-size:160% 100%; animation:sheen 6s linear infinite; }
@keyframes sheen{ from{background-position:200% 0;} to{background-position:-20% 0;} }

/* Metrics */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.metric{ background:rgba(255,255,255,.03); border:1px solid var(--stroke); border-radius:18px; padding:20px; text-align:center; }
.metric .num{ font-size:clamp(28px, 4.6vw, 42px); font-weight:900; letter-spacing:-.02em; }
.metric .label{ color:var(--muted); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:11px; }

/* Page header motifs */
header.page-header{ color:#fff; text-align:center; padding:66px 0 56px; position:relative; box-shadow:inset 0 -1px 0 rgba(255,255,255,.06); }
body.industries-page header.page-header{ background:radial-gradient(900px 380px at 100% 10%, rgba(235,240,255,.18), transparent 58%), radial-gradient(1000px 420px at 0% 0%, rgba(210,220,240,.14), transparent 60%), linear-gradient(#070708, #0a0a0c); }
body.industries-page header.page-header::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.06) 35%, transparent 40%); background-size:160% 100%; animation:sheen 7s linear infinite; opacity:.85; }

/* Media: accent swap + crosshair motif */
body.media-page{ --accentA: var(--media-accent-1); --accentB: var(--media-accent-2); }
body.media-page header.page-header{ background:radial-gradient(1000px 420px at 50% -10%, rgba(215,255,0,.18), transparent 60%), radial-gradient(820px 360px at 100% 10%, rgba(57,255,20,.16), transparent 58%), linear-gradient(#0b0b0e, #0a0a0c); }
body.media-page header.page-header::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(1px 1px at 50% 60%, rgba(215,255,0,.6), transparent 60%), radial-gradient(220px 220px at 50% 60%, rgba(215,255,0,.06), transparent 65%), linear-gradient(transparent 49.5%, rgba(215,255,0,.12) 50%, transparent 50.5%), linear-gradient(90deg, transparent 49.5%, rgba(215,255,0,.12) 50%, transparent 50.5%); mask:radial-gradient(60% 60% at 50% 60%, black, transparent); }

/* Records: iridescent mystique */
body.records-page header.page-header{ background:radial-gradient(1200px 500px at -10% -20%, rgba(34,211,238,.16), transparent 60%), radial-gradient(1000px 460px at 110% 0%, rgba(124,58,237,.20), transparent 60%), linear-gradient(#0b0b0f, #0a0a0c 40%, #09090b); }

/* Layout helpers */
.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:start; }
@media (max-width: 900px){ .two-col{ grid-template-columns:1fr; } }

/* CTA row spacing */
.cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }