/* Sleek MX — site-wide hexagon video backdrop and dark frosted-glass layer.
   Loads after site.css and apps.css on every page. The footage is very light,
   so a black veil sits over it and copy-bearing surfaces are dark glass. */

:root{
  color-scheme:dark;
  --mx-black:#000;
  --mx-red:#e50914;           /* fills carrying white text (4.8:1) */
  --mx-white:#fff;
  --bg:#000;
  --surface-1:rgba(8,8,8,.74);
  --surface-2:rgba(12,12,12,.68);
  --surface-3:rgba(30,30,30,.82);
  --line-1:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.24);
  --fg:#f6f6f6;
  --fg-muted:#c4c4c4;
  --accent:#ff6b6b;           /* red as text/edges on dark surfaces */
  --accent-soft:rgba(255,60,60,.12);
  --accent-glow:rgba(255,0,0,.24);
  --focus-ring:3px solid #ff6b6b;
  --shadow-card:0 24px 70px rgba(0,0,0,.48);
  --glass-blur:blur(16px) saturate(1.1);
}

/* Backdrop */
.site-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#000}
.site-backdrop-poster,.site-backdrop-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;
}
.site-backdrop-video{opacity:0;transition:opacity .8s ease}
.site-backdrop-video.is-playing{opacity:1}
.site-backdrop-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.22) 100%),
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.82) 40%,rgba(0,0,0,.6) 68%,rgba(0,0,0,.46) 100%);
}
@media(max-width:768px){
  .site-backdrop-poster,.site-backdrop-video{object-position:68% center}
  .site-backdrop-veil{background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.84) 100%)}
}
@media(prefers-reduced-motion:reduce){
  .site-backdrop-video{display:none}
}

/* Page surfaces become transparent so the backdrop shows through */
body{background:#000}
main,.hero-hub,.page-hero,.hero-focus,.home-evidence,.home-apps,.home-invitation{background:transparent}

/* Copy that sits directly on the video */
.hero-hub,.page-hero{text-shadow:0 1px 18px rgba(0,0,0,.55)}
.hero-hub .btn,.page-hero .btn{text-shadow:none}

/* Sections below the hero get a light scrim; the hexagons stay visible behind it */
main > .section,.home-apps,.home-evidence,.home-invitation{background:rgba(0,0,0,.55)}
.section{border-top-color:var(--line-1)}

/* Header */
.mx-header{
  background:rgba(0,0,0,.62);border-bottom-color:var(--line-1);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.mx-nav a:hover{background:rgba(255,255,255,.08)}
.mx-nav a[aria-current="page"]{background:rgba(255,255,255,.14);color:var(--fg)}
@media(max-width:860px){
  .mx-nav{background:rgba(0,0,0,.94);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
}

/* Buttons: red fills keep the deeper brand red under white text */
.skip-link{background:var(--mx-red);color:#fff}
.btn-primary{background:var(--mx-red);border-color:var(--mx-red);color:#fff}
.btn-primary:hover{background:#bc0710;border-color:#bc0710;color:#fff}
.btn-ghost{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.4);color:var(--fg)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.mx-nav .nav-cta:hover,.mx-nav .nav-cta[aria-current="page"],.mx-nav button.nav-cta:hover{background:var(--mx-red);border-color:var(--mx-red);color:#fff}
.filter-chip{background:rgba(0,0,0,.45)}
.filter-chip[aria-pressed="true"]{background:var(--mx-red);border-color:var(--mx-red);color:#fff}

/* Homepage hero: copy sits directly over the video */
.hero-hub{min-height:clamp(560px,52vw,700px);display:flex;align-items:center}
.hero-hub .wrap{width:min(var(--container),calc(100% - 2 * var(--gutter)))}
.hero-hub .btn-ghost{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.5);color:#fff}
.hero-hub .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.home-page .hero-hub{min-height:clamp(520px,46vw,640px)}

/* Stack the Selected work eyebrow over its heading, matching Featured apps */
.home-evidence .home-section-head{display:grid;gap:10px;justify-content:start}

/* Frosted dark glass panels */
.hero-meta{background:var(--line-1);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.hero-meta a{background:rgba(6,6,6,.74)}
.hero-meta a:hover{background:rgba(24,24,24,.82)}
.card,.initiative,.evidence,.note,.table-wrap,.cta-band{
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.card{background:var(--surface-2)}
a.card:hover{background:rgba(40,8,8,.74)}
.initiative,.evidence{background:var(--surface-1)}
.note{background:var(--surface-2)}
.table-wrap{background:var(--surface-1)}
th{background:rgba(20,20,20,.9)}
.cta-band{
  border-color:rgba(255,60,60,.45);
  background:linear-gradient(135deg,rgba(70,6,10,.72),rgba(8,8,8,.74) 60%);
}
.app-mark,.coming-soon{background:rgba(0,0,0,.55)}
.stage{background:rgba(0,0,0,.45)}
.stage-concept{color:#bdbdbd}
.home-evidence-grid img,.evidence-media{background:#111}
.btn:disabled,.btn:disabled:hover{background:rgba(30,30,30,.8);color:var(--fg-muted)}

/* Footer: dark glass with the red brand edge */
/* design-system.css styles bare footer as a centred flex row; the site footer is full width */
.mx-footer{
  display:block;max-width:none;margin:0;
  border-top:2px solid var(--mx-red);color:#d6d6d6;background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.mx-footer h2,.mx-footer a,.mx-footer .footer-brand p,.home-page .home-footer h2,.home-page .home-footer button.text-link{color:#fff}
.mx-footer a:hover,.mx-footer button.text-link:hover{color:var(--accent)}
.mx-footer .legal{border-top-color:var(--line-1)}

@media(max-width:700px){
  .hero-hub{min-height:0;padding:56px 0 44px}
  .hero-hub .lede{text-shadow:0 1px 14px rgba(0,0,0,.7)}
  .home-page .hero-hub{min-height:460px}
  .hero-focus{background:transparent}
  .home-page .hero-meta a{border-color:var(--line-1)}
}

/* No glass blur where it is unsupported: fall back to denser surfaces */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--surface-1:rgba(8,8,8,.92);--surface-2:rgba(12,12,12,.9)}
  .mx-header{background:rgba(0,0,0,.9)}
}