:root{
    --bg:#040405;
    --bg2:#0a0707;
    --text:#f7f2ee;
    --muted: rgba(247,242,238,.72);
    --ember2:#ffb25b;
    --ember1:#ff4a1a;
    --card: rgba(255,255,255,.06);
    --outline: rgba(255,178,91,.14);
    --nav-offset: 92px;
  }

  html,body{ height:100%; margin:0; background:var(--bg); overflow:hidden; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; -webkit-text-size-adjust:100%; }
  *{ box-sizing:border-box; }
  img, svg{ max-width:100%; height:auto; }
  main [id]{ scroll-margin-top: var(--nav-offset); }
  .skipLink{
    position:absolute;
    left:16px;
    top:-48px;
    z-index:100;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(4,4,5,.95);
    color:var(--text);
    text-decoration:none;
    outline:1px solid rgba(255,178,91,.24);
    transition: top .2s ease;
  }
  .skipLink:focus-visible{ top:16px; }

  /* ======= INTRO STAGE ======= */
  .stage{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
    background:var(--bg);
    z-index:50;
  }
  .stage.hidden{ pointer-events:none; opacity:0; transition: opacity .8s ease; }
  .stage.backdrop{
    pointer-events:none;
    z-index:8;
    opacity:1;
    transition: opacity .8s ease;
  }
  .stage.backdrop .wrap,
  .stage.backdrop .bottomRight,
  .stage.backdrop .grain,
  .stage.backdrop .vignette{
    opacity:0;
    visibility:hidden;
  }
  .stage.backdrop #smokeGL,
  .stage.backdrop #smokeFallback{
    opacity:.88;
  }
  .stage.backdrop #embers2d{
    opacity:.68;
    mix-blend-mode:screen;
  }

  #smokeGL{ position:absolute; inset:0; width:100%; height:100%; display:block; background:var(--bg); }
  #smokeFallback{ position:absolute; inset:0; width:100%; height:100%; display:none; background:var(--bg); }
  #embers2d{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:lighter; opacity:1; }
  .stage.noWebGL #smokeGL{ display:none; }
  .stage.noWebGL #smokeFallback{ display:block; }

  .grain{
    position:absolute; inset:-20%;
    pointer-events:none;
    opacity:.14;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    animation: grainMove 2.4s steps(6) infinite;
    mix-blend-mode:overlay;
  }
  @keyframes grainMove{
    0%{transform:translate(0,0)}
    20%{transform:translate(-2%,1%)}
    40%{transform:translate(2%,-1%)}
    60%{transform:translate(-1%,-2%)}
    80%{transform:translate(1%,2%)}
    100%{transform:translate(0,0)}
  }
  .vignette{
    position:absolute; inset:0;
    pointer-events:none;
    background:radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,.92) 100%);
    mix-blend-mode:multiply;
  }

  .wrap{
    position:relative;
    text-align:center;
    padding:min(7vh,72px) min(7vw,72px);
    transform: translateZ(0) scale(.99);
    filter: drop-shadow(0 0 18px rgba(255,74,26,.24));
    animation: slowPush 14s ease-out forwards;
  }
  @keyframes slowPush{ 0%{ transform:scale(.975); } 100%{ transform:scale(1.03); } }

  .sigil{
    width:min(22vmin, 150px);
    height:min(22vmin, 150px);
    margin:0 auto 22px;
    position:relative;
    pointer-events:none;
    opacity:0;
    transform: translateY(18px) scale(.92);
    filter: blur(18px);
    animation: sigilIn 2.6s cubic-bezier(.2,.9,.2,1) forwards;
    animation-delay:.55s;
  }
  @keyframes sigilIn{
    0%{ opacity:0; }
    70%{ opacity:.86; }
    100%{ opacity:.96; transform:translateY(0) scale(1); filter: blur(0); }
  }
  .sigil::before{
    content:"";
    position:absolute; inset:0;
    border-radius:999px;
    background:
      radial-gradient(circle at 35% 30%, rgba(255,178,91,.95) 0%, rgba(255,74,26,.82) 40%, rgba(0,0,0,0) 68%),
      radial-gradient(circle at 72% 70%, rgba(255,74,26,.55) 0%, rgba(0,0,0,0) 62%);
    -webkit-mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%);
    mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%);
    box-shadow: 0 0 28px rgba(255,74,26,.36), 0 0 160px rgba(255,74,26,.18);
    animation: ringRotate 16.0s linear infinite;
  }
  .sigil::after{
    content:"";
    position:absolute; inset:-8%;
    border-radius:999px;
    background:
      radial-gradient(circle at 10% 55%, rgba(255,178,91,.18), transparent 55%),
      radial-gradient(circle at 85% 40%, rgba(255,74,26,.18), transparent 55%),
      radial-gradient(circle at 45% 92%, rgba(255,178,91,.12), transparent 58%),
      radial-gradient(circle at 60% 8%, rgba(255,74,26,.12), transparent 58%);
    filter: blur(9px);
    opacity:.62;
    animation: ringBreathe 4.8s ease-in-out infinite alternate;
  }
  .monoH{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-weight:950;
    font-size:clamp(54px, 7.2vmin, 92px);
    letter-spacing:.03em;
    color: rgba(247,242,238,.92);
    text-shadow: 0 0 12px rgba(255,178,91,.18), 0 0 28px rgba(255,74,26,.24), 0 0 100px rgba(255,74,26,.16);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.42));
    opacity:.98;
  }
  @keyframes ringRotate{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
  @keyframes ringBreathe{ from{transform:scale(.985)} to{transform:scale(1.05)} }

  .wordmark{ position:relative; display:inline-block; z-index:2; }
  .title{
    font-size:clamp(40px, 6.2vw, 98px);
    font-weight:900;
    letter-spacing:.22em;
    text-transform:uppercase;
    line-height:1.05;
    color:var(--text);
  }
  .title.companyName{
    letter-spacing:.10em;
  }
  .title .accent{
    color:var(--ember2);
    text-shadow: 0 0 18px rgba(255,178,91,.24), 0 0 90px rgba(255,74,26,.20);
  }
  .title.mirage{
    filter: blur(12px);
    transform: skewX(-12deg) translateY(10px);
    opacity:.64;
    text-shadow: 0 0 22px rgba(255,178,91,.12), 0 0 150px rgba(255,74,26,.20);
    animation: mirageDrift 2.8s ease-in-out infinite alternate;
  }
  @keyframes mirageDrift{
    from{ transform: skewX(-12deg) translateY(10px) translateX(-7px) scale(1.002); opacity:.58; filter: blur(13px); }
    to{   transform: skewX(-9deg)  translateY(9px)  translateX( 7px) scale(1.012); opacity:.70; filter: blur(10px); }
  }
  .title.crisp{
    position:absolute; left:0; top:0; width:100%;
    opacity:0; transform:scale(1.05); filter: blur(10px);
    animation: snapCrisp 3.2s cubic-bezier(.18,.92,.18,1) forwards;
    animation-delay: 2.65s;
  }
  @keyframes snapCrisp{
    0%{ opacity:0; transform:scale(1.06); filter: blur(24px); }
    30%{ opacity:1; transform:scale(1.02); filter: blur(9px); }
    65%{ opacity:1; transform:scale(0.999); filter: blur(2px); }
    100%{ opacity:1; transform:scale(1); filter: blur(0); }
  }
  .mirageFade{
    animation: mirageOut 3.0s ease-out forwards;
    animation-delay: 2.95s;
  }
  @keyframes mirageOut{
    0%{ opacity:.64; filter: blur(12px); transform: skewX(-11deg) translateY(10px); }
    100%{ opacity:0; filter: blur(26px); transform: skewX(-18deg) translateY(18px); }
  }
  .tagline{
    margin-top:14px;
    font-size:clamp(12px, 1.6vw, 18px);
    letter-spacing:.38em;
    color:rgba(247,242,238,.78);
    text-transform:uppercase;
    opacity:0;
    animation: tagIn 1.6s ease-out forwards;
    animation-delay: 4.35s;
  }
  @keyframes tagIn{ to{opacity:1} }

  .heatWave{
    position:absolute;
    left:50%;
    top:54%;
    transform:translate(-50%,-50%);
    width:min(96vw, 1120px);
    height:min(56vh, 420px);
    pointer-events:none;
    opacity:0;
    mix-blend-mode:screen;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.075) 0px, rgba(255,255,255,.010) 14px, rgba(255,255,255,.065) 26px);
    filter: blur(1px);
    mask: radial-gradient(circle at 50% 50%, #000 0 60%, transparent 82%);
    animation: heatOnce 3.8s ease-in-out forwards;
    animation-delay: 2.25s;
    z-index:3;
  }
  @keyframes heatOnce{
    0%{ opacity:0; transform:translate(-50%,-50%) skewX(-14deg) translateX(-26%); }
    18%{ opacity:.34; }
    60%{ opacity:.18; }
    100%{ opacity:0; transform:translate(-50%,-50%) skewX(-14deg) translateX(210%); }
  }

  /* ======= Intro Controls (mobile safe area) ======= */
  .bottomRight{
    position:absolute;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index:12;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .bottomRight{ right: calc(18px + env(safe-area-inset-right, 0px)); pointer-events:none; }

  .skipUI{ display:flex; align-items:center; gap:10px; opacity:.78; transition: opacity .25s ease; }
  .skipUI.show{ opacity:1; }
  .skipText{ color:rgba(247,242,238,.85); font-size:12px; letter-spacing:.24em; text-transform:uppercase; }
  .ring{
    width:34px; height:34px; border-radius:999px; position:relative;
    background:rgba(255,255,255,.06);
    outline:1px solid rgba(255,178,91,.12);
    box-shadow: 0 0 20px rgba(255,74,26,.10);
  }
  .ring svg{ position:absolute; inset:0; transform:rotate(-90deg); }
  .ring .bg{ stroke: rgba(255,255,255,.14); }
  .ring .fg{
    stroke: rgba(255,178,91,.95);
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(255,74,26,.25));
  }

  /* ======= LANDING PAGE ======= */
  .site{
    position:fixed;
    inset:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(circle at 50% 20%, rgba(255,74,26,.13), transparent 42%),
      radial-gradient(circle at 20% 40%, rgba(255,178,91,.10), transparent 45%),
      linear-gradient(180deg, rgba(4,4,5,.52) 0%, rgba(10,7,7,.62) 100%);
    opacity:0;
    pointer-events:none;
    transition: opacity .9s ease;
    z-index:10;
  }
  .site.show{ opacity:1; pointer-events:auto; }

  .siteInner{
    min-height:100%;
    display:flex;
    flex-direction:column;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .nav{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
    backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.10));
    border-bottom: 1px solid rgba(255,178,91,.10);
  }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    text-decoration:none;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:900;
    font-size:13px;
    min-width: 0;
  }
  .brandSigil{
    width:34px;
    height:34px;
    border-radius:999px;
    position:relative;
    flex:0 0 auto;
    isolation:isolate;
    filter: drop-shadow(0 0 10px rgba(255,74,26,.22));
  }
  .brandSigil::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    background:
      radial-gradient(circle at 35% 30%, rgba(255,178,91,.95) 0%, rgba(255,74,26,.82) 40%, rgba(0,0,0,0) 68%),
      radial-gradient(circle at 72% 70%, rgba(255,74,26,.54) 0%, rgba(0,0,0,0) 62%);
    -webkit-mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%);
    mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%);
    box-shadow: 0 0 12px rgba(255,74,26,.34), 0 0 42px rgba(255,74,26,.16);
  }
  .brandSigil::after{
    content:"";
    position:absolute;
    inset:-20%;
    border-radius:999px;
    background:
      radial-gradient(circle at 12% 55%, rgba(255,178,91,.20), transparent 58%),
      radial-gradient(circle at 86% 40%, rgba(255,74,26,.18), transparent 58%);
    filter:blur(4px);
    opacity:.56;
  }
  .brandSigil .monoH{
    font-size:18px;
    color: rgba(247,242,238,.95);
    text-shadow: 0 0 8px rgba(255,178,91,.18), 0 0 20px rgba(255,74,26,.26);
    filter:none;
  }
  .brandText{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .companyName{
    text-transform:none !important;
  }
  .brandText.companyName{
    letter-spacing:.02em;
  }

  .navLinks{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .navLinks a,
  .navLinks button{
    text-decoration:none;
    color:rgba(247,242,238,.82);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:9px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    outline:1px solid rgba(255,178,91,.10);
    transition: transform .12s ease, background .2s ease;
    white-space:nowrap;
    font-family:inherit;
    min-height:44px;
  }
  .navLinks button{
    border:none;
    cursor:pointer;
  }
  .navLinks button:disabled{
    opacity:.45;
    cursor:not-allowed;
  }
  .navLinks a:hover,
  .navLinks button:hover{ background:rgba(255,255,255,.07); }
  .navLinks a:active,
  .navLinks button:active{ transform:scale(.98); }

  .hero{
    position:relative;
    padding: clamp(42px, 7vw, 84px) 16px 26px;
    max-width: 1100px;
    width:100%;
    margin:0 auto;
  }

  .heroGrid{
    display:grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 14px;
    align-items:stretch;
  }
  @media (max-width: 860px){
    .heroGrid{ grid-template-columns: 1fr; }
  }

  .heroTitle{
    font-size: clamp(34px, 5.2vw, 64px);
    line-height: 1.06;
    letter-spacing: .02em;
    color: var(--text);
    font-weight: 950;
    margin:0 0 10px 0;
  }
  .heroPrimaryCard{
    position:relative;
    overflow:hidden;
    background:
      linear-gradient(140deg, rgba(255,178,91,.08), rgba(255,255,255,.03) 44%, rgba(255,74,26,.05)),
      var(--card);
  }
  .heroPrimaryCard::before{
    content:"";
    position:absolute;
    left:-8%;
    top:-22%;
    width:56%;
    aspect-ratio:1 / 1;
    border-radius:999px;
    pointer-events:none;
    background:radial-gradient(circle at 55% 52%, rgba(255,140,0,.20), rgba(255,74,26,.08) 36%, rgba(11,15,24,.26) 68%, transparent 100%);
    filter:blur(26px);
    opacity:.70;
    animation:ambientBreath 9s ease-in-out infinite alternate;
  }
  @keyframes ambientBreath{
    from{ transform:translate3d(0,0,0) scale(1); opacity:.62; }
    to{ transform:translate3d(2.5%,1.5%,0) scale(1.06); opacity:.78; }
  }
  .heroHeader{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:14px;
    margin-bottom:12px;
    position:relative;
    z-index:1;
  }
  .heroBrand{
    margin:0;
    display:flex;
    align-items:center;
  }
  .heroIdentity h3{
    margin:0 0 6px 0;
  }
  .heroEyebrow{
    margin:0;
    color:rgba(247,242,238,.66);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px;
    line-height:1.35;
  }
  .heroBrandAmbient{
    position:relative;
    right:auto;
    top:auto;
    width:clamp(96px, 14vw, 150px);
    margin:0;
    pointer-events:none;
    opacity:.92;
    z-index:1;
  }
  .heroSigil{
    width:100%;
    aspect-ratio:1 / 1;
    position:relative;
    pointer-events:none;
    filter: drop-shadow(0 0 14px rgba(255,74,26,.24));
  }
  .heroSigil::before{
    content:"";
    position:absolute; inset:6%;
    border-radius:999px;
    background:
      radial-gradient(circle at 35% 30%, rgba(255,178,91,.94) 0%, rgba(255,74,26,.82) 40%, rgba(0,0,0,0) 68%),
      radial-gradient(circle at 72% 70%, rgba(255,74,26,.52) 0%, rgba(0,0,0,0) 62%);
    -webkit-mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%);
    mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%);
    box-shadow: 0 0 20px rgba(255,74,26,.30), 0 0 80px rgba(255,74,26,.14);
    animation: ringRotate 18s linear infinite;
  }
  .heroSigil::after{
    content:"";
    position:absolute; inset:-14%;
    border-radius:999px;
    background:
      radial-gradient(circle at 10% 55%, rgba(255,178,91,.14), transparent 55%),
      radial-gradient(circle at 85% 40%, rgba(255,74,26,.14), transparent 55%),
      radial-gradient(circle at 45% 92%, rgba(255,178,91,.10), transparent 58%),
      radial-gradient(circle at 60% 8%, rgba(255,74,26,.10), transparent 58%);
    filter: blur(8px);
    opacity:.48;
    animation: ringBreathe 4.8s ease-in-out infinite alternate;
  }
  .heroSigil .monoH{
    font-size:clamp(36px, 5vw, 60px);
    text-shadow: 0 0 8px rgba(255,178,91,.16), 0 0 18px rgba(255,74,26,.18), 0 0 44px rgba(255,74,26,.14);
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.36));
  }
  .heroTitle,
  .heroSub,
  .heroPrimaryCard .ctaRow{
    position:relative;
    z-index:1;
  }
  .heroTitle .warm{
    color: var(--ember2);
    text-shadow: 0 0 18px rgba(255,178,91,.22), 0 0 80px rgba(255,74,26,.18);
  }
  .heroSub{
    margin:0 0 16px 0;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 60ch;
  }

  .ctaRow{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-top: 10px;
  }
  .cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border:none;
    cursor:pointer;
    border-radius:999px;
    padding: 12px 14px;
    font-size: 11.5px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color: rgba(247,242,238,.92);
    background: rgba(255,255,255,.06);
    outline: 1px solid rgba(255,178,91,.14);
    backdrop-filter: blur(10px);
    transition: transform .12s ease, background .2s ease;
    font-family:inherit;
    min-height:44px;
  }
  .cta:active{ transform:scale(.98); }
  .cta.primary{
    background: radial-gradient(circle at 35% 30%, rgba(255,178,91,.35), rgba(255,74,26,.22));
    outline: 1px solid rgba(255,178,91,.22);
    box-shadow: 0 0 28px rgba(255,74,26,.18);
  }

  .card{
    background: var(--card);
    outline: 1px solid rgba(255,178,91,.12);
    border-radius: 18px;
    padding: 16px;
    min-width:0;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
  }
  .card h3{
    margin:0 0 8px 0;
    color: var(--text);
    font-weight: 900;
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size: 12px;
  }
  .card h3.companyName{
    letter-spacing:.02em;
  }
  .card p{
    margin:0;
    color: rgba(247,242,238,.74);
    line-height: 1.55;
    font-size: 14px;
    overflow-wrap:anywhere;
  }
  .pillarsList{
    margin:10px 0 0 0;
    padding-left:18px;
    color:rgba(247,242,238,.80);
    line-height:1.65;
    overflow-wrap:anywhere;
  }
  .card a{
    color:var(--ember2);
  }
  .card a:hover{
    color:#ffd19a;
  }

  .grid3{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
  }
  .grid2{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top:12px;
  }
  .gameGrid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .gameCard{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .gameArt{
    width:100%;
    border-radius:12px;
    border:1px solid rgba(255,178,91,.16);
    background:rgba(255,255,255,.02);
    aspect-ratio:16 / 9;
    object-fit:cover;
  }
  .gameArtTop{
    object-position:center top;
  }
  .gameArtContain{
    object-fit:contain;
    object-position:center;
    background:linear-gradient(180deg, rgba(7,6,8,.92), rgba(16,10,9,.88));
  }
  .metaLine{
    margin-top:4px !important;
    color:rgba(247,242,238,.66) !important;
    font-size:12px !important;
    letter-spacing:.07em;
    text-transform:uppercase;
    line-height:1.5 !important;
  }
  .factsGrid{
    margin:10px 0 0 0;
    display:grid;
    grid-template-columns: max-content 1fr;
    gap:8px 12px;
  }
  .factsGrid dt{
    color:rgba(247,242,238,.62);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:11px;
  }
  .factsGrid dd{
    margin:0;
    color:rgba(247,242,238,.90);
    font-size:14px;
    overflow-wrap:anywhere;
  }
  .detailGrid{
    margin-top:14px;
  }
  .section{
    max-width:1100px;
    margin: 0 auto;
    padding: 16px 16px 40px;
  }
  .sectionTitle{
    margin:0 0 10px 0;
    font-size: 13px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color: rgba(247,242,238,.82);
  }
  .footer{
    margin-top:auto;
    padding: 20px 16px 26px;
    border-top: 1px solid rgba(255,178,91,.10);
    background: rgba(0,0,0,.22);
    color: rgba(247,242,238,.65);
    font-size: 11px;
    letter-spacing:.10em;
    text-transform:uppercase;
    text-align:center;
  }
  .footerBrand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
    color:rgba(247,242,238,.90);
    letter-spacing:.02em;
    text-transform:none;
    font-weight:800;
  }
  .footerSigil{
    width:30px;
    height:30px;
    filter: drop-shadow(0 0 8px rgba(255,74,26,.20));
  }
  .footerSigil .monoH{
    font-size:16px;
  }
  .footerCopy{
    color: rgba(247,242,238,.65);
  }
  @media (max-width: 860px){
    .grid3{ grid-template-columns: 1fr; }
    .grid2{ grid-template-columns: 1fr; }
    .gameGrid{ grid-template-columns: 1fr; }
  }

  @media (max-width: 700px){
    :root{
      --nav-offset: 138px;
    }
    .nav{
      align-items:flex-start;
      flex-direction:column;
      gap:8px;
      padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px;
    }
    .brand{
      min-height:44px;
      font-size:12px;
    }
    .navLinks{
      width:100%;
      justify-content:flex-start;
      gap:6px;
    }
    .navLinks a,
    .navLinks button{
      font-size:10px;
      letter-spacing:.11em;
      padding:10px 11px;
    }
    .hero{
      padding: clamp(30px, 8vw, 48px) 12px 18px;
    }
    .heroTitle{
      font-size:clamp(28px, 8.8vw, 42px);
      line-height:1.1;
    }
    .heroSub{
      font-size:14px;
      line-height:1.55;
    }
    .heroHeader{
      grid-template-columns:auto 1fr;
      margin-bottom:10px;
    }
    .heroBrandAmbient{
      width:102px;
      margin:0;
      opacity:.92;
    }
    .heroEyebrow{
      font-size:10px;
      letter-spacing:.10em;
    }
    .card{
      padding:14px;
      border-radius:14px;
    }
    .section{
      padding: 14px 12px 30px;
    }
    .sectionTitle{
      font-size:12px;
      letter-spacing:.16em;
    }
    .ctaRow{
      width:100%;
      gap:8px;
    }
    .ctaRow .cta{
      flex:1 1 100%;
      width:100%;
    }
    .factsGrid{
      grid-template-columns: 1fr;
      gap:4px;
    }
    .factsGrid dt{
      font-size:10px;
      letter-spacing:.07em;
    }
    .factsGrid dd{
      padding-bottom:8px;
      font-size:13px;
    }
    .metaLine{
      font-size:11px !important;
      letter-spacing:.03em;
      text-transform:none;
      line-height:1.45 !important;
    }
    .footer{
      padding: 18px 12px 24px;
      letter-spacing:.06em;
    }
    .footerBrand{
      margin-bottom:7px;
      gap:8px;
    }
    .title{
      letter-spacing:.14em;
      font-size:clamp(30px, 10.5vw, 54px);
    }
    .tagline{
      letter-spacing:.20em;
      font-size:12px;
    }
    .skipText{
      letter-spacing:.16em;
      font-size:11px;
    }
  }

  @media (max-width: 420px){
    :root{
      --nav-offset: 150px;
    }
    .heroHeader{
      grid-template-columns:auto 1fr;
      margin-bottom:8px;
    }
    .heroBrandAmbient{
      width:88px;
      margin:0;
    }
    .brandText{
      max-width: 54vw;
    }
    .navLinks a,
    .navLinks button{
      font-size:9.5px;
      letter-spacing:.09em;
      padding:9px 10px;
    }
  }

  @media (max-height: 620px){
    .skipText{ display:none; }
  }

  .brand:focus-visible,
  .cta:focus-visible,
  .navLinks a:focus-visible,
  .navLinks button:focus-visible{
    outline:2px solid rgba(255,178,91,.85);
    outline-offset:2px;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .title.mirage, .sigil, .heatWave{ animation:none !important; }
    .wrap{ animation:none !important; }
    .grain{ animation:none !important; }
    .heroPrimaryCard::before{ animation:none !important; }
  }