/* Unified cinematic hero */
.sao-hero,.sao-home-hero,.sao-page-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 28%,rgba(21,56,168,.72),transparent 60%),linear-gradient(180deg,var(--sa-navy-deep) 0%,var(--sa-bg) 100%)}.sao-hero:before,.sao-home-hero:before,.sao-page-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 16% 24%,rgba(143,224,61,.15),transparent 24rem),linear-gradient(90deg,rgba(10,30,92,.55),transparent);z-index:0}.sao-hero{padding:var(--sa-section-y-sm) 0}.sao-home-hero{padding:clamp(68px,8vw,110px) 0 var(--sa-section-y-sm)}.sao-page-hero{padding:var(--sa-section-y-sm) 0}.sao-hero>.sao-container,.sao-home-hero .sao-container,.sao-page-hero .sao-container{position:relative;z-index:1}.sao-hero-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sa-space-2);font-size:var(--sa-text-sm);color:var(--sa-text-muted);margin-bottom:var(--sa-space-7)}.sao-hero-breadcrumb a{color:var(--sa-text-muted)}.sao-hero-breadcrumb a:hover{color:var(--sa-plumbob)}.sao-hero-breadcrumb strong{color:var(--sa-text)}.sao-hero-grid,.sao-home-hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);gap:var(--sa-space-7);align-items:center}.sao-hero h1,.sao-hero-copy h1,.sao-page-hero h1{font-size:var(--sa-text-5xl);font-weight:950;line-height:.95;letter-spacing:-.055em;margin:0 0 var(--sa-space-5);max-width:950px;background:linear-gradient(180deg,var(--sa-text) 0%,rgba(232,234,242,.72) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.sao-hero-description,.sao-hero-copy p,.sao-page-hero p{font-size:var(--sa-text-lg);color:#c8d0ef;line-height:var(--sa-lh-relaxed);max-width:700px;margin:0}.sao-hero-visual{min-width:0}.sao-hero-mosaic{position:relative;aspect-ratio:1/1;min-height:390px}.sao-hero-mosaic-tile{position:absolute;border-radius:var(--sa-radius-lg);overflow:hidden;box-shadow:var(--sa-shadow-lg);border:1px solid rgba(255,255,255,.12);transition:transform var(--sa-duration-slow) var(--sa-ease),z-index var(--sa-duration-fast) var(--sa-ease)}.sao-hero-mosaic-tile img{width:100%;height:100%;object-fit:cover}.sao-hero-mosaic-tile--0{top:0;left:28%;width:38%;aspect-ratio:1;transform:rotate(-6deg);z-index:2}.sao-hero-mosaic-tile--1{top:4%;right:0;width:32%;aspect-ratio:4/3;transform:rotate(4deg);z-index:3}.sao-hero-mosaic-tile--2{top:32%;left:0;width:36%;aspect-ratio:3/4;transform:rotate(-3deg);z-index:1}.sao-hero-mosaic-tile--3{top:42%;right:4%;width:40%;aspect-ratio:4/3;transform:rotate(2deg);z-index:2}.sao-hero-mosaic-tile--4{top:70%;left:22%;width:34%;aspect-ratio:1;transform:rotate(-4deg);z-index:1}.sao-hero-mosaic-tile--5{top:72%;right:0;width:26%;aspect-ratio:1;transform:rotate(6deg);z-index:2}.sao-hero-mosaic-tile:hover{transform:scale(1.05) rotate(0deg);z-index:10}.sao-hero-plumbob-card{min-height:390px;display:grid;place-items:center;border:var(--sa-border);border-radius:var(--sa-radius-2xl);background:radial-gradient(circle,rgba(143,224,61,.24),rgba(10,30,92,.72));box-shadow:var(--sa-shadow-lg)}.sao-hero-plumbob-card img{width:min(220px,55%);filter:drop-shadow(0 0 38px rgba(143,224,61,.55))}.sao-hero-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sa-space-3);margin-top:var(--sa-space-7)}.sao-hero-stat{background:var(--sa-surface);border:var(--sa-border);border-radius:var(--sa-radius-lg);padding:var(--sa-space-4) var(--sa-space-5)}.sao-hero-stat span{display:block;color:var(--sa-text-muted);font-size:var(--sa-text-xs);font-weight:800;letter-spacing:var(--sa-tracking-eyebrow);text-transform:uppercase;margin-bottom:var(--sa-space-2)}.sao-hero-stat strong{font-size:var(--sa-text-base);line-height:1.2;color:var(--sa-text)}
/* Homepage feature */
.sao-featured-game{display:grid;min-height:520px;border-radius:var(--sa-radius-2xl);overflow:hidden;position:relative;background:#06102b;border:1px solid rgba(143,224,61,.38);box-shadow:var(--sa-shadow-lg)}.sao-featured-game:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,9,24,.96))}.sao-featured-game>img,.sao-featured-game .sao-placeholder{width:100%;height:100%;object-fit:cover;grid-area:1/1}.sao-featured-game .sao-placeholder{display:grid;place-items:center;background:radial-gradient(circle,rgba(143,224,61,.28),rgba(10,30,92,.8))}.sao-featured-game .sao-placeholder img{max-width:180px;filter:drop-shadow(0 0 30px rgba(143,224,61,.55))}.sao-featured-game span{position:absolute;left:var(--sa-space-6);right:var(--sa-space-6);bottom:var(--sa-space-6);z-index:1;display:grid;gap:var(--sa-space-2)}.sao-featured-game small{color:var(--sa-plumbob);font-weight:900;text-transform:uppercase;letter-spacing:var(--sa-tracking-eyebrow)}.sao-featured-game strong{font-size:clamp(1.55rem,3vw,2.5rem);line-height:1}.sao-featured-game em{font-style:normal;color:#dbe3ff}
.sao-hero-visual{position:relative;isolation:isolate}
.sao-hero-visual--with-cover{min-height:440px;display:grid;align-items:center}
.sao-hero-visual--with-cover .sao-hero-mosaic{width:min(100%,560px);justify-self:end;transform:translateX(3%)}
.sao-hero-cover-card{position:absolute;left:0;bottom:0;z-index:30;width:min(245px,42%);margin:0;padding:10px;border-radius:calc(var(--sa-radius-xl) + 6px);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.22);box-shadow:0 26px 60px rgba(0,0,0,.58),0 0 0 1px rgba(143,224,61,.18),var(--sa-glow-plumbob);backdrop-filter:blur(18px)}
.sao-hero-cover-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--sa-radius-lg);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.sao-hero-cover-card figcaption{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--sa-text);font-size:var(--sa-text-xs);font-weight:900;letter-spacing:var(--sa-tracking-eyebrow);text-transform:uppercase;opacity:.92}
.sao-hero-cover-card figcaption svg{width:12px;height:16px;color:var(--sa-plumbob);filter:drop-shadow(0 0 8px rgba(143,224,61,.5))}
.sao-hero-visual--cover-only{min-height:420px;display:grid;place-items:center}
.sao-hero-visual--cover-only .sao-hero-cover-card{position:relative;left:auto;bottom:auto;width:min(330px,72%)}
.sao-hero-visual--cover-only .sao-hero-plumbob-card{display:none}
.sao-game-tabs a[href="#features"]{color:var(--sa-plumbob)}
.sao-cinematic-features{margin:var(--sa-space-8) 0 var(--sa-space-7)}
.sao-cinematic-features>.sao-section-head{margin-bottom:var(--sa-space-5)}
.sao-cinematic-feature-list{display:grid;gap:var(--sa-space-6)}
.sao-cinematic-feature{position:relative;min-height:clamp(460px,58vw,760px);display:grid;align-items:center;overflow:hidden;border-radius:var(--sa-radius-2xl);border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,var(--sa-navy-deep),var(--sa-navy));box-shadow:var(--sa-shadow-lg)}
.sao-cinematic-feature::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 18% 22%,rgba(143,224,61,.24),transparent 28rem),linear-gradient(90deg,rgba(5,11,46,.92) 0%,rgba(5,11,46,.72) 34%,rgba(5,11,46,.22) 58%,rgba(5,11,46,.78) 100%)}
.sao-cinematic-feature::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(5,11,46,.92),transparent)}
.sao-cinematic-feature-media{position:absolute;inset:0;z-index:1}
.sao-cinematic-feature-media img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.04) contrast(1.06)}
.sao-cinematic-feature-media .sao-placeholder{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(143,224,61,.22),rgba(21,56,168,.34) 34%,rgba(5,11,46,.94) 76%)}
.sao-cinematic-feature-media .sao-placeholder img{width:min(220px,34vw);height:auto;object-fit:contain;filter:drop-shadow(0 0 44px rgba(143,224,61,.62))}
.sao-cinematic-feature-copy{position:relative;z-index:4;width:min(640px,calc(100% - 48px));margin:var(--sa-space-7);padding:var(--sa-space-6);border-radius:var(--sa-radius-xl);background:linear-gradient(180deg,rgba(10,30,92,.74),rgba(5,11,46,.48));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 42px rgba(0,0,0,.36);backdrop-filter:blur(14px)}
.sao-cinematic-feature-copy .sao-kicker{margin-bottom:var(--sa-space-4)}
.sao-cinematic-feature-copy h3{margin:0 0 var(--sa-space-4);font-size:clamp(2.1rem,4.8vw,5.6rem);line-height:.94;letter-spacing:-.055em;color:var(--sa-text);text-wrap:balance}
.sao-cinematic-feature-copy p:not(.sao-kicker){margin:0;color:#d7ddf7;font-size:clamp(1rem,1vw + .8rem,1.38rem);line-height:1.72;max-width:56ch}
.sao-cinematic-feature--right::before{background:radial-gradient(circle at 82% 22%,rgba(143,224,61,.22),transparent 28rem),linear-gradient(270deg,rgba(5,11,46,.92) 0%,rgba(5,11,46,.72) 34%,rgba(5,11,46,.20) 58%,rgba(5,11,46,.74) 100%)}
.sao-cinematic-feature--right .sao-cinematic-feature-copy{justify-self:end;text-align:left}
.sao-cinematic-feature--center::before{background:radial-gradient(circle at 50% 22%,rgba(143,224,61,.22),transparent 28rem),linear-gradient(180deg,rgba(5,11,46,.48),rgba(5,11,46,.78))}
.sao-cinematic-feature--center{place-items:center;text-align:center}
.sao-cinematic-feature--center .sao-cinematic-feature-copy{margin-inline:auto;text-align:center}
.sao-cinematic-feature--center .sao-cinematic-feature-copy p:not(.sao-kicker){margin-inline:auto}
.sao-cinematic-feature-number{font-family:var(--sa-font-mono);font-size:var(--sa-text-xs);letter-spacing:var(--sa-tracking-eyebrow);text-transform:uppercase;color:var(--sa-plumbob-bright)}
.sao-cinematic-features-empty{min-height:360px;display:grid;place-items:center;border:1px dashed rgba(143,224,61,.34);border-radius:var(--sa-radius-2xl);background:rgba(143,224,61,.05);text-align:center;padding:var(--sa-space-7)}
@media (max-width:1200px){.sao-hero-visual--with-cover{min-height:0}.sao-hero-visual--with-cover .sao-hero-mosaic{width:100%;justify-self:stretch;transform:none}.sao-hero-cover-card{width:min(225px,34%)}.sao-cinematic-feature{min-height:clamp(420px,72vw,640px)}}
@media (max-width:782px){.sao-hero-visual--with-cover{display:grid;gap:var(--sa-space-4)}.sao-hero-cover-card{position:relative;left:auto;bottom:auto;width:min(230px,70%);justify-self:center;order:-1}.sao-hero-visual--with-cover .sao-hero-mosaic{order:2}.sao-cinematic-feature{min-height:520px;border-radius:var(--sa-radius-xl)}.sao-cinematic-feature-copy{width:calc(100% - 32px);margin:var(--sa-space-4);padding:var(--sa-space-5)}.sao-cinematic-feature-copy h3{font-size:clamp(2rem,12vw,4.1rem)}}
@media (max-width:640px){.sao-hero-cover-card{width:min(220px,82%)}.sao-hero-cover-card img{aspect-ratio:4/5}.sao-cinematic-features{margin:var(--sa-space-6) 0}.sao-cinematic-feature{min-height:560px}.sao-cinematic-feature::before{background:linear-gradient(180deg,rgba(5,11,46,.42),rgba(5,11,46,.90) 72%)}.sao-cinematic-feature-copy{align-self:end;margin:var(--sa-space-3);width:calc(100% - 24px);padding:var(--sa-space-4)}.sao-cinematic-feature-copy p:not(.sao-kicker){font-size:var(--sa-text-base);line-height:1.6}.sao-game-tabs a[href="#features"]{display:inline-flex}}

.sao-hero-visual--with-cover{
  min-height:clamp(480px,42vw,640px);
}
.sao-hero-visual--with-cover .sao-hero-mosaic{
  width:min(100%,640px);
  justify-self:end;
  transform:none;
  min-height:clamp(480px,42vw,640px);
}
.sao-hero-mosaic--with-cover{
  aspect-ratio:1.12/1;
}
.sao-hero-mosaic--with-cover .sao-hero-mosaic-cover{
  top:4%;
  left:0;
  width:min(46%,280px);
  aspect-ratio:3/4;
  transform:rotate(-4deg);
  z-index:9;
  display:block;
  margin:0;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.045));
  border:1px solid rgba(143,224,61,.38);
  box-shadow:0 30px 70px rgba(0,0,0,.62),0 0 0 1px rgba(143,224,61,.22),var(--sa-glow-plumbob);
}
.sao-hero-mosaic--with-cover .sao-hero-mosaic-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.sao-hero-mosaic-cover figcaption{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:calc(100% - 24px);
  padding:8px 11px;
  border-radius:var(--sa-radius-pill);
  background:rgba(5,11,46,.78);
  border:1px solid rgba(143,224,61,.26);
  color:var(--sa-text);
  font-size:var(--sa-text-xs);
  font-weight:900;
  letter-spacing:var(--sa-tracking-eyebrow);
  text-transform:uppercase;
  backdrop-filter:blur(12px);
}
.sao-hero-mosaic-cover figcaption svg{
  width:12px;
  height:16px;
  color:var(--sa-plumbob);
  filter:drop-shadow(0 0 8px rgba(143,224,61,.6));
}
.sao-hero-mosaic--with-cover .sao-hero-mosaic-tile--0{top:0;left:42%;width:35%;aspect-ratio:4/3;transform:rotate(3deg);z-index:4}
.sao-hero-mosaic--with-cover .sao-hero-mosaic-tile--1{top:12%;right:0;width:30%;aspect-ratio:1;transform:rotate(-5deg);z-index:5}
.sao-hero-mosaic--with-cover .sao-hero-mosaic-tile--2{top:46%;left:33%;width:43%;aspect-ratio:16/10;transform:rotate(2deg);z-index:3}
.sao-hero-mosaic--with-cover .sao-hero-mosaic-tile--3{top:58%;right:2%;width:33%;aspect-ratio:3/4;transform:rotate(5deg);z-index:2}
.sao-hero-mosaic--with-cover .sao-hero-mosaic-tile--4{top:70%;left:6%;width:31%;aspect-ratio:1;transform:rotate(-6deg);z-index:1}
.sao-hero-mosaic--with-cover .sao-hero-mosaic-tile--5{display:none}
.sao-hero-mosaic--with-cover .sao-hero-mosaic-cover:hover{
  transform:scale(1.045) rotate(0deg);
  z-index:20;
}
.sao-hero-cover-card{display:none}
@media (max-width:1200px){
  .sao-hero-visual--with-cover .sao-hero-mosaic{width:100%;min-height:clamp(420px,64vw,560px)}
  .sao-hero-mosaic--with-cover .sao-hero-mosaic-cover{width:min(42%,250px)}
}
@media (max-width:782px){
  .sao-hero-visual--with-cover{min-height:0;display:block}
  .sao-hero-visual--with-cover .sao-hero-mosaic{min-height:0;width:100%}
  .sao-hero-mosaic--with-cover{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:var(--sa-space-3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--sa-space-3);aspect-ratio:auto}
  .sao-hero-mosaic--with-cover .sao-hero-mosaic-cover,
  .sao-hero-mosaic--with-cover .sao-hero-mosaic-tile{
    position:relative;
    top:auto;left:auto;right:auto;
    width:auto;
    aspect-ratio:16/10;
    transform:none;
    scroll-snap-align:start;
  }
  .sao-hero-mosaic--with-cover .sao-hero-mosaic-cover{aspect-ratio:3/4;min-height:420px}
  .sao-hero-mosaic--with-cover .sao-hero-mosaic-tile--5{display:block}
}
@media (max-width:640px){
  .sao-hero-mosaic--with-cover{grid-auto-columns:84%}
  .sao-hero-mosaic--with-cover .sao-hero-mosaic-cover{min-height:360px}
}