html { scroll-behavior: smooth; }

:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  --bmas-navy: #061530;
  --bmas-teal: #0b3f5d;
  --bmas-amber: #f59e0b;
  --bmas-sand: #fff7e8;
  --bmas-mist: #eef6fb;
}

body {
  background-image:
    radial-gradient(900px 650px at 12% 35%, rgba(245,158,11,0.10), rgba(245,158,11,0) 60%),
    radial-gradient(850px 600px at 88% 62%, rgba(56,189,248,0.09), rgba(56,189,248,0) 58%),
    radial-gradient(1000px 750px at 55% 120%, rgba(99,102,241,0.07), rgba(99,102,241,0) 62%);
  background-repeat: no-repeat;
  background-size: 1100px 800px, 1050px 760px, 1200px 900px;
  background-position: -260px 180px, calc(100% + 220px) 520px, 55% 100%;
}

body.inner-brand-bg {
  position: relative;
}

body.inner-brand-bg::before,
body.inner-brand-bg::after {
  content: "";
  position: fixed;
  inset: auto;
  width: min(40vw, 500px);
  aspect-ratio: 1;
  background-image: url('../bmas.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.085;
  pointer-events: none;
  z-index: 0;
  filter: grayscale(1) saturate(0) contrast(1.08);
}

body.inner-brand-bg::before {
  top: 116px;
  right: -56px;
  transform: rotate(-14deg);
}

body.inner-brand-bg::after {
  bottom: 36px;
  left: -72px;
  width: min(32vw, 380px);
  opacity: 0.06;
  transform: rotate(12deg);
}

body.inner-brand-bg > header,
body.inner-brand-bg > main,
body.inner-brand-bg > footer {
  position: relative;
  z-index: 1;
}

.hero-bg {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(90deg, rgba(6,21,48,0.78) 0%, rgba(11,63,93,0.70) 60%),
    var(--noise),
    url('https://images.unsplash.com/photo-1721792421861-2fdea5107633?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=80&w=2000');
  background-position: center, center, center;
  background-size: cover, 420px 420px, cover;
  background-repeat: no-repeat, repeat, no-repeat;
  background-blend-mode: multiply, overlay, normal;
}

.hero-bg > * { position: relative; z-index: 1; }

.modal-backdrop { background: rgba(2,6,23,0.6); }

.photo-wrap { position: relative; overflow: hidden; }
.photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 380px 380px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.18;
  pointer-events: none;
}

.photo-img {
  filter: saturate(1.12) contrast(1.06);
  transform: scale(1.02);
  transition: transform 700ms ease, filter 700ms ease;
}

.group:hover .photo-img {
  filter: saturate(1.18) contrast(1.08);
  transform: scale(1.06);
}

.section-divider {
  position: relative;
}
.section-divider:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(245,158,11,0) 0%, rgba(245,158,11,0.45) 50%, rgba(245,158,11,0) 100%);
}

.quiz-brand-hero {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(135deg, rgba(6,21,48,0.98) 0%, rgba(11,63,93,0.94) 62%, rgba(6,21,48,0.96) 100%),
    radial-gradient(500px 280px at 14% 18%, rgba(245,158,11,0.24), rgba(245,158,11,0) 70%),
    radial-gradient(420px 260px at 88% 82%, rgba(125,211,252,0.16), rgba(125,211,252,0) 72%),
    var(--noise);
  background-size: auto, auto, auto, 380px 380px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

.quiz-brand-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  pointer-events: none;
}

.quiz-brand-card {
  background: linear-gradient(180deg, rgba(255,247,232,0.82), rgba(255,255,255,0.98));
  border: 1px solid rgba(148,163,184,0.22);
  box-shadow: 0 18px 40px rgba(6,21,48,0.08);
}

.quiz-brand-card-dark {
  background:
    linear-gradient(180deg, rgba(6,21,48,0.98), rgba(11,63,93,0.96)),
    var(--noise);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 46px rgba(6,21,48,0.18);
}

.quiz-brand-chip {
  background: rgba(245,158,11,0.12);
  color: var(--bmas-teal);
}