:root{
  --bg:#07070a;
  --panel:#0c0c12;
  --text:#f5f3f7;
  --muted:#aaa5b2;
  --pink:#ff2f9d;
  --cyan:#29d9ff;
  --orange:#ff7a30;
  --line:rgba(255,255,255,.13);
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,sans-serif;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,47,157,.12),transparent 34%),
    radial-gradient(circle at 85% 30%,rgba(41,217,255,.08),transparent 28%);
}
.noise{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,47,157,.09),rgba(41,217,255,.04) 35%,transparent 70%);
  transition:opacity .2s;
}
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:78px;display:flex;align-items:center;justify-content:space-between;
  padding:0 max(24px,calc((100vw - var(--max))/2));
  backdrop-filter:blur(18px);
  background:linear-gradient(to bottom,rgba(7,7,10,.88),rgba(7,7,10,.28));
  border-bottom:1px solid rgba(255,255,255,.05);
}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-family:"Barlow Condensed";font-size:19px;letter-spacing:.08em;text-transform:uppercase}
.brand-mark{
  display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.22);
  border-radius:9px;font-weight:800;background:linear-gradient(135deg,var(--pink),var(--cyan));color:#050508;
}
nav{display:flex;align-items:center;gap:28px}
nav a{color:#dcd8e1;text-decoration:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
nav a:hover{color:#fff}
.nav-cta{border:1px solid rgba(255,255,255,.2);padding:10px 15px;border-radius:100px}
.menu-toggle{display:none;background:none;border:0;width:40px}
.menu-toggle span{display:block;height:1px;background:#fff;margin:7px 0}
.hero{
  min-height:100svh;position:relative;display:flex;align-items:center;isolation:isolate;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;background:
    linear-gradient(90deg,rgba(7,7,10,.98) 0%,rgba(7,7,10,.85) 42%,rgba(7,7,10,.28) 80%),
    linear-gradient(0deg,var(--bg) 0%,transparent 30%),
    url('assets/after-dark-group.png') 56% 30%/112% auto no-repeat;
  filter:saturate(.9) contrast(1.05);
  transform:translateX(3.5%) scale(1.03);
}
.hero-grid{
  position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to right,black,transparent 75%);
}
.hero-inner{
  position:relative;z-index:2;width:min(var(--max),calc(100% - 48px));margin:0 auto;padding-top:70px;
}
.hero-logo{width:min(520px,70vw);max-height:145px;object-fit:contain;object-position:left center;margin-bottom:24px;filter:drop-shadow(0 0 28px rgba(255,47,157,.18))}
.eyebrow,.section-kicker{
  font-family:"Barlow Condensed";font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#c3bdca;
}
.hero h1,.section h2,.game-copy h3{
  font-family:"Barlow Condensed";text-transform:uppercase;margin:0;line-height:.88;
}
.hero h1{font-size:clamp(64px,9vw,132px);max-width:820px;font-weight:800;letter-spacing:-.035em}
.hero h1 span{
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75);
  text-shadow:0 0 24px rgba(255,47,157,.32);
}
.hero-copy{max-width:650px;font-size:18px;line-height:1.7;color:#c4becb;margin:28px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:3px;
  text-decoration:none;text-transform:uppercase;letter-spacing:.11em;font-size:12px;font-weight:700;
  transition:.25s ease;position:relative;overflow:hidden;
}
.btn.primary{
  color:white;background:linear-gradient(90deg,#f51b88,#ff4b4b 58%,#ff7a30);
  box-shadow:0 0 30px rgba(255,47,157,.18);
}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 0 42px rgba(255,47,157,.34)}
.btn.ghost{border:1px solid rgba(255,255,255,.18);color:white;background:rgba(255,255,255,.03)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.scroll-note{
  position:absolute;right:4vw;bottom:35px;z-index:3;font-family:"Barlow Condensed";
  font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#9f99a8;writing-mode:vertical-rl;
}
.scroll-note span{color:var(--pink);font-size:20px;margin-top:12px}
.section{position:relative;z-index:2;width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:110px 0}
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start;margin-top:26px}
.section h2{font-size:clamp(54px,7vw,96px);font-weight:700;letter-spacing:-.03em}
.section h2 em{font-style:normal;color:var(--pink)}
.intro-grid p,.section-head p,.game-copy p,.contact p{
  color:var(--muted);line-height:1.75;font-size:16px;
}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:46px;border-top:1px solid var(--line)}
.stat-row div{padding:24px 12px 0 0}
.stat-row strong{display:block;font-family:"Barlow Condensed";font-size:42px;color:#fff}
.stat-row span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#88818f}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:42px}
.section-head p{max-width:420px;margin:0}
.game-card{
  display:grid;grid-template-columns:1.25fr .75fr;background:#0a0a0f;border:1px solid var(--line);
  min-height:610px;margin-bottom:28px;overflow:hidden;position:relative;
}
.game-card--rescue{grid-template-columns:.75fr 1.25fr}
.game-media{position:relative;min-height:610px;overflow:hidden}
.game-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.rescue-media img{object-position:62% 48%}
.shared-universe-image{object-position:50% 42%!important}
.game-card:hover .game-media img{transform:scale(1.03)}
.media-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),transparent 55%)}
.game-index{position:absolute;top:24px;left:24px;font-family:"Barlow Condensed";font-size:16px;letter-spacing:.16em}
.game-copy{padding:60px;display:flex;flex-direction:column;justify-content:center}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}
.tag-row span{
  border:1px solid rgba(255,255,255,.14);padding:7px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#bbb5c1
}
.game-copy h3{font-size:clamp(50px,5vw,82px);letter-spacing:-.02em}
.game-copy h3 strong{color:#ff493b;font-weight:inherit}
.game-tagline{font-family:"Barlow Condensed";font-size:18px!important;text-transform:uppercase;letter-spacing:.18em;color:#fff!important}
.text-link{
  margin-top:24px;color:#fff;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.13em
}
.text-link span{color:var(--pink);font-size:20px;margin-left:4px}
.world-grid{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:420px 420px;gap:18px}
.world-tile{margin:0;position:relative;overflow:hidden;background:#111}
.world-tile.tall{grid-row:1 / span 2}
.world-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.world-tile:hover img{transform:scale(1.035)}
.world-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent 55%)}
.world-tile figcaption{position:absolute;left:26px;bottom:24px;z-index:2}
.world-tile span{display:block;color:var(--pink);font-size:10px;text-transform:uppercase;letter-spacing:.18em;margin-bottom:8px}
.world-tile strong{font-family:"Barlow Condensed";font-size:32px;text-transform:uppercase;line-height:1}
.manifesto{width:100%;max-width:none;overflow:hidden;padding:75px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.manifesto-line{
  white-space:nowrap;font-family:"Barlow Condensed";font-size:clamp(38px,6vw,88px);font-weight:800;letter-spacing:-.02em;
  animation:marquee 22s linear infinite;
}
.manifesto-line span{color:var(--pink);margin:0 24px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-35%)}}
.manifesto-copy{width:min(var(--max),calc(100% - 48px));margin:30px auto 0;color:#aaa;font-size:16px}
.contact-panel{
  min-height:340px;border:1px solid var(--line);padding:55px;display:flex;align-items:end;justify-content:space-between;gap:24px;
  background:
    radial-gradient(circle at 85% 15%,rgba(41,217,255,.13),transparent 28%),
    radial-gradient(circle at 70% 80%,rgba(255,47,157,.15),transparent 30%),
    #0b0b10;
}
.contact h2{font-size:clamp(58px,8vw,105px)}
footer{
  width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:35px 0 55px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;color:#77717f;font-size:11px;text-transform:uppercase;letter-spacing:.12em
}
.footer-brand{font-family:"Barlow Condensed";font-size:24px;font-weight:700;color:#ddd}
.footer-brand span{color:var(--pink)}
footer a{color:#aaa;text-decoration:none}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:none}

@media(max-width:900px){
  nav{display:none}
  .menu-toggle{display:block}
  .hero-bg{
    background-position:55% 30%;
    background-size:auto 108%;
    transform:translateX(2%) scale(1.03);
  }
  .hero-inner{padding-top:100px}
  .hero-copy{font-size:16px;max-width:520px}
  .intro-grid,.game-card,.game-card--rescue{grid-template-columns:1fr;gap:35px}
  .game-card--rescue .game-copy{order:2}
  .game-media{min-height:520px}
  .game-copy{padding:40px}
  .world-grid{grid-template-columns:1fr;grid-template-rows:560px 360px 360px}
  .world-tile.tall{grid-row:auto}
  .shared-universe-image{object-position:50% 38%!important}
  .section-head{align-items:start;flex-direction:column}
  .contact-panel{align-items:start;flex-direction:column}
}
@media(max-width:600px){
  .site-header{height:68px;padding:0 18px}
  .brand span:last-child{display:none}
  .hero-inner,.section,footer,.manifesto-copy{width:calc(100% - 32px)}
  .hero-logo{width:95vw;margin-left:-8px}
  .hero h1{font-size:59px}
  .hero-copy{font-size:15px}
  .scroll-note{display:none}
  .section{padding:78px 0}
  .intro-grid{gap:32px}
  .stat-row{gap:8px}
  .stat-row strong{font-size:34px}
  .game-media{min-height:420px}
  .game-copy{padding:28px}
  .world-grid{grid-template-rows:500px 300px 300px}
  .contact-panel{padding:30px;min-height:300px}
  footer{flex-direction:column;align-items:flex-start}
}


/* V3.1 — enlarged Saturn8 hero banner */
@media (min-width: 901px) {
  .hero-logo {
    width: min(820px, 64vw);
    max-height: 240px;
    position: relative;
    top: -125px;
    margin-bottom: -71px;
    object-fit: contain;
    object-position: left center;
  }
}


/* V3.2 — legal / EULA */
.contact-actions{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.legal-link{color:#f4edf5;text-decoration:none;font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(255,45,145,.55);padding:0 0 7px;transition:.2s}
.legal-link:hover{color:var(--pink);border-color:var(--pink);text-shadow:0 0 16px rgba(255,45,145,.4)}
.legal-page{min-height:100vh;background:radial-gradient(circle at 85% 5%,rgba(255,45,145,.12),transparent 28%),radial-gradient(circle at 10% 25%,rgba(45,188,255,.08),transparent 26%),#08080c;color:#d8d2dc}
.legal-page .site-header{position:relative}
.legal-shell{width:min(980px,calc(100% - 48px));margin:0 auto;padding:92px 0 110px}
.legal-eyebrow{color:var(--pink);font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.legal-shell h1{margin:12px 0;color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:clamp(54px,8vw,104px);line-height:.86;text-transform:uppercase}
.legal-subtitle{margin:0 0 52px;color:#8f8795;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.legal-document{border-top:1px solid rgba(255,45,145,.55);background:rgba(14,14,20,.72);box-shadow:0 24px 80px rgba(0,0,0,.3);padding:clamp(28px,5vw,62px)}
.legal-document h2{margin:38px 0 12px;color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:27px;letter-spacing:.03em;text-transform:uppercase}
.legal-document h2:first-child{margin-top:0}
.legal-document p,.legal-document li{font-size:16px;line-height:1.78;color:#bbb4c0}
.legal-document a{color:#ff4da6}
.legal-back{display:inline-block;margin-top:34px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.legal-back:hover{color:var(--pink)}
@media(max-width:900px){.contact-actions{align-items:flex-start}}
@media(max-width:600px){.legal-shell{width:calc(100% - 32px);padding:62px 0 80px}.legal-document{padding:26px 22px}.legal-document p,.legal-document li{font-size:15px}}


/* V3.5 — mobile navigation and small-screen polish.
   Desktop layout remains unchanged: all visual overrides below are <= 900px. */
@media(max-width:900px){
  .cursor-glow{display:none}

  .site-header nav{
    display:flex;
    position:fixed;
    top:78px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:14px 24px 22px;
    background:rgba(7,7,10,.97);
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 22px 46px rgba(0,0,0,.42);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }
  .site-header nav a{
    display:flex;
    align-items:center;
    min-height:52px;
    padding:0 4px;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-family:"Barlow Condensed",sans-serif;
    font-size:18px;
    font-weight:600;
    letter-spacing:.12em;
  }
  .site-header nav a:last-child{border-bottom:0}
  .site-header nav .nav-cta{
    border:0;
    border-radius:0;
    padding:0 4px;
  }
  .site-header.menu-open{
    background:rgba(7,7,10,.97)!important;
  }
  .site-header.menu-open nav{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }
  .menu-toggle{
    position:relative;
    height:40px;
    padding:0 7px;
    cursor:pointer;
  }
  .menu-toggle span{
    transition:transform .2s ease,opacity .2s ease;
    transform-origin:center;
  }
  .site-header.menu-open .menu-toggle span:first-child{
    transform:translateY(4px) rotate(45deg);
  }
  .site-header.menu-open .menu-toggle span:last-child{
    transform:translateY(-4px) rotate(-45deg);
  }
  body.mobile-menu-open{overflow:hidden}

  .contact-actions{
    width:100%;
    max-width:100%;
  }
  .contact-actions .legal-link{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .contact-actions .btn{
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:center;
  }
}

@media(max-width:600px){
  .site-header nav{
    top:68px;
    padding-left:18px;
    padding-right:18px;
  }
  .hero h1{
    font-size:clamp(46px,15vw,59px);
    line-height:.9;
  }
  .contact-actions .legal-link{
    font-size:13px;
    letter-spacing:.13em;
  }
  .contact-actions .btn{
    width:100%;
    padding-left:14px;
    padding-right:14px;
    letter-spacing:.08em;
  }
}

@media(max-width:430px){
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1 1 100%}
}


/* V3.8 — After Dark: Rescue coming-soon treatment */
.coming-soon-stamp{
  align-self:flex-start;
  margin-top:28px;
  padding:13px 19px 11px;
  border:2px solid #ff493b;
  border-radius:2px;
  background:rgba(255,73,59,.045);
  box-shadow:
    inset 0 0 0 1px rgba(255,73,59,.18),
    0 0 22px rgba(255,73,59,.10);
  transform:rotate(-1.2deg);
  user-select:none;
}
.coming-soon-stamp span{
  display:block;
  font-family:"Barlow Condensed",sans-serif;
  color:#fff;
  font-size:clamp(24px,2.2vw,35px);
  font-weight:800;
  line-height:.9;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-shadow:0 0 14px rgba(255,73,59,.36);
}
@media(max-width:600px){
  .coming-soon-stamp{
    margin-top:22px;
    padding:11px 15px 10px;
  }
  .coming-soon-stamp span{
    font-size:26px;
  }
}


/* V3.10 — world tile image positioning on desktop and mobile */
/* Nightlife / "Higher standards. Better company."
   Show more of the upper part of the image so Luna's head remains visible. */
.world-grid .world-tile:nth-child(1) img{
  object-position:50% 30%;
}

/* Atmosphere / "Neon. Rain. Beautiful chaos."
   Show more of the upper part of the portrait so character heads are not clipped. */
.world-grid .world-tile:nth-child(3) img{
  object-position:50% 26%;
}