/* Eclipse Sector Productions — Studio Site + Game Page
   Vibrant, premium sci‑fi (violet/blue/teal). Static site.
*/
:root{
  /* Eclipse Sector palette (dark, corporate sci‑fi) */
  --void:#000000;
  --eclipse:#1B1E24;
  --bg-0:#05070E;
  --bg-1:#070A12;
  --bg-2:#0B1020;
  --panel:#0D1326;
  --panel-2:#101A33;
  --stroke:rgba(255,255,255,.08);
  --stroke-2:rgba(255,255,255,.12);

  --text:#C9D2E6;
  --text-strong:#E4EBFF;
  --muted:#8C97B5;
  --muted-2:#6C7694;

  --violet:#7A3EFF;
  --blue:#2494FF;
  --xeno:#3AFFA3;

  /* legacy aliases */
  --accent: var(--blue);
  --accent2: var(--violet);
  --green: var(--xeno);

  --grad-accent:linear-gradient(135deg, rgba(36,148,255,.95), rgba(122,62,255,.95), rgba(58,255,163,.65));
  --grad-hero:radial-gradient(1200px 700px at 18% 15%, rgba(36,148,255,.22), transparent 60%),
              radial-gradient(900px 520px at 62% 40%, rgba(122,62,255,.18), transparent 62%),
              radial-gradient(1100px 700px at 50% 110%, rgba(58,255,163,.10), transparent 55%),
              linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 35%, var(--void) 100%);
  --shadow:0 18px 55px rgba(0,0,0,.65);

  --radius:20px;
  --radius-sm:14px;
  --max:1180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--grad-hero);
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

/* Starfield */
body:before{
  content:"";
  position:fixed;
  inset:-30%;
  pointer-events:none;
  opacity:.22;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.55) 40%, transparent 45%),
    radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,.45) 40%, transparent 45%),
    radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,.35) 40%, transparent 45%),
    radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,.25) 40%, transparent 45%),
    radial-gradient(2px 2px at 75% 85%, rgba(255,255,255,.35) 40%, transparent 45%);
  background-size: 380px 380px, 420px 420px, 520px 520px, 600px 600px, 700px 700px;
  animation: drift 28s linear infinite;
  filter: blur(.2px);
}
@keyframes drift{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-120px,80px,0)} }

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(6,8,14,.62);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo{
  width:38px; height:38px; border-radius:12px;
  background: linear-gradient(135deg, rgba(36,148,255,.95), rgba(122,62,255,.85));
  box-shadow: 0 14px 44px rgba(36,148,255,.18), 0 18px 60px rgba(122,62,255,.14);
  position:relative;
}
.logo:after{
  content:"";
  position:absolute; inset:2px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  opacity:.55;
}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text strong{font-size:14px; letter-spacing:.6px}
.brand-text span{font-size:12px; color:var(--muted)}

.nav-links{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end}
.nav-links a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  border:1px solid transparent;
}
.nav-links a:hover{
  color:var(--text);
  border-color: rgba(108,168,255,.20);
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 0 6px rgba(108,168,255,.06);
}
.nav-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
}
@media (max-width: 980px){
  .nav-toggle{display:inline-flex; align-items:center; gap:10px}
  .nav-links{display:none; width:100%; justify-content:flex-start}
  .nav-links.open{display:flex}
}

/* Components */
.card{
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(108,168,255,.12), transparent 60%),
    radial-gradient(900px 260px at 90% 20%, rgba(180,108,255,.10), transparent 62%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card.soft{background: linear-gradient(180deg, rgba(12,18,32,.55), rgba(10,14,26,.42));}

.hero{padding:64px 0 34px; position:relative}
.hero:after{
  content:"";
  position:absolute;
  inset:auto -20% -130px -20%;
  height:240px;
  background: radial-gradient(700px 240px at 40% 40%, rgba(55,243,200,.10), transparent 60%);
  filter: blur(18px);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:26px;
  align-items:stretch;
}
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} }

.hero-card{padding:28px; position:relative; overflow:hidden}
.hero-card:before{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(135deg, rgba(108,168,255,.18), rgba(180,108,255,.14), rgba(55,243,200,.10));
  opacity:.8;
  mask: linear-gradient(#000, transparent 55%);
  pointer-events:none;
}

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  background: rgba(255,255,255,.04);
  font-size:12px;
  letter-spacing:.3px;
}

h1{margin:14px 0 10px; font-size:44px; line-height:1.06; letter-spacing:-.02em}
@media (max-width: 980px){h1{font-size:36px}}
.lead{color:var(--muted); font-size:16px; line-height:1.75; margin:0 0 18px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 0 0 7px rgba(108,168,255,.08)}
.btn.primary{
  background: linear-gradient(135deg, rgba(108,168,255,.98), rgba(180,108,255,.82) 55%, rgba(55,243,200,.85));
  border: none;
  color: #061016;
  font-weight: 800;
  box-shadow: 0 16px 46px rgba(108,168,255,.20);
}
.btn.primary:hover{box-shadow: 0 18px 60px rgba(108,168,255,.25)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}

.panel{padding:22px}
.panel h2{margin:0 0 8px; font-size:18px}
.panel p{margin:0; color:var(--muted); line-height:1.6}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px}
.stat{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding:14px;
  position:relative;
}
.stat:before{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(108,168,255,.08);
}
.stat b{display:block; font-size:16px}
.stat span{display:block; font-size:12px; color:var(--muted); margin-top:4px}

/* Sections */
.section{padding:30px 0}
.section h2{font-size:24px; margin:0 0 10px}
.section p{color:var(--muted); line-height:1.75}
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 980px){.grid{grid-template-columns:1fr}}
.tile{padding:18px; position:relative; overflow:hidden}
.tile:after{
  content:"";
  position:absolute; inset:auto -40% -60% -40%;
  height:120px;
  background: radial-gradient(420px 120px at 40% 40%, rgba(180,108,255,.12), transparent 60%);
  filter: blur(14px);
  pointer-events:none;
}
.tile h3{margin:0 0 8px; font-size:16px}
.tile p{margin:0; color:var(--muted); line-height:1.65; font-size:14px}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--muted); font-size:12px;
}

/* Page heads */
.page-head{padding:40px 0 16px}
.breadcrumb{color:var(--muted); font-size:12px; margin-bottom:8px}
.page-title{font-size:34px; margin:0 0 10px}
.page-sub{color:var(--muted); margin:0; line-height:1.75}
.content{padding:18px 0 44px}
.content .card{padding:22px}
.content h3{margin:0 0 10px}
.list{margin:0; padding-left:18px; color:var(--muted); line-height:1.85}
hr.sep{border:0; border-top:1px solid rgba(255,255,255,.10); margin:18px 0}

/* Game card */
.game-card{display:flex; gap:16px; align-items:flex-start; padding:18px}
.game-mark{
  width:64px; height:64px; border-radius:18px;
  background: linear-gradient(135deg, rgba(108,168,255,.95), rgba(180,108,255,.85));
  box-shadow: 0 18px 60px rgba(108,168,255,.20);
  flex:0 0 auto;
  position:relative;
}
.game-mark:after{
  content:"";
  position:absolute; inset:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  opacity:.5;
}
.game-meta h3{margin:0 0 8px}
.game-meta p{margin:0; color:var(--muted)}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.badge{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

/* FAQ */
.faq details{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background: rgba(255,255,255,.04);
  padding:14px 16px;
  margin:10px 0;
}
.faq summary{cursor:pointer; font-weight:700}
.faq p{margin:10px 0 0}

/* Media gallery */
.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
@media (max-width: 980px){.gallery{grid-template-columns:1fr}}
.shot{
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 160px at 20% 20%, rgba(108,168,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  border-radius:16px;
  padding:14px;
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.shot b{font-size:14px}
.shot span{color:var(--muted); font-size:12px}

/* Newsletter */
.form-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
input[type="email"]{
  flex:1; min-width: 220px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
}
input[type="email"]:focus{
  outline:none;
  border-color: rgba(108,168,255,.55);
  box-shadow: 0 0 0 7px rgba(108,168,255,.10);
}
small{color:var(--muted)}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:18px 0;
  color:var(--muted);
  font-size:12px;
  background: rgba(0,0,0,.12);
}
.footer a{color:var(--muted)}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 2px 6px;
  border-radius: 8px;
}


/* --- V2 Enhancements --- */
h1, .page-title{
  background: linear-gradient(90deg, rgba(108,168,255,.98), rgba(180,108,255,.92), rgba(55,243,200,.90));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}
h2{
  letter-spacing:-.01em;
}
/* Section divider */
.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(108,168,255,.30), rgba(180,108,255,.22), rgba(55,243,200,.18), transparent);
  margin: 18px 0;
}
/* Icon chips */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size:13px;
}
.chip svg{width:16px; height:16px; opacity:.9}
/* Feature list */
.feature-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px}
@media (max-width:980px){.feature-list{grid-template-columns:1fr}}
.feature{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding:14px 16px;
}
.feature b{display:block; margin-bottom:6px}
.feature span{color:var(--muted); font-size:13px; line-height:1.65}
/* Timeline */
.timeline{margin-top:14px; display:grid; gap:12px}
.milestone{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding:14px 16px;
}
.dot{
  width:12px; height:12px; border-radius:999px; margin-top:4px;
  background: linear-gradient(135deg, rgba(108,168,255,.95), rgba(180,108,255,.85));
  box-shadow: 0 0 0 6px rgba(108,168,255,.10);
  flex:0 0 auto;
}
.milestone b{display:block}
.milestone p{margin:6px 0 0; color:var(--muted); line-height:1.65; font-size:13px}
/* Contact cards */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}}
.contact{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding:16px;
}
.contact b{display:block; margin-bottom:6px}
.contact a{color:var(--text); text-decoration:none}
.contact a:hover{text-decoration:underline}
/* Inline callout */
.callout{
  border:1px solid rgba(108,168,255,.22);
  background: radial-gradient(650px 240px at 20% 10%, rgba(108,168,255,.14), transparent 60%),
              rgba(255,255,255,.03);
  border-radius: 18px;
  padding:16px 18px;
}
/* Smooth fade-in */
@media (prefers-reduced-motion: no-preference){
  .card, .tile, .stat, .shot, .feature, .milestone, .contact{animation: fadeUp .35s ease both}
  @keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
}

/* --- V4 Dark Mode + Deluxe polish --- */
/* Background vignette + grain */
body:after{
  content:"";
  position:fixed;
  inset:-30%;
  pointer-events:none;
  background:
    radial-gradient(1200px 800px at 50% 20%, rgba(0,0,0,0), rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 90%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity:.28;
}
/* Make starfield subtler */
body:before{ opacity:.14; }

/* Softer card shadows */
.card{ box-shadow: 0 18px 70px rgba(0,0,0,.65); }

/* Glassier nav */
.nav{ background: rgba(2,3,6,.62); }

/* Reduce “white” surfaces */
.stat, .feature, .milestone, .contact, .shot, .faq details, .badge, .chip{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Better focus ring */
a:focus, button:focus, input:focus{
  outline: none;
  box-shadow: 0 0 0 7px rgba(36,148,255,.12);
}

/* Fancy section headers */
.section-title{
  display:flex; align-items:center; gap:12px;
  margin:0 0 10px;
}
.section-title .pip{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: 0 0 0 7px rgba(122,62,255,.10);
}

/* Hover lift */
@media (prefers-reduced-motion: no-preference){
  .tile:hover, .feature:hover, .milestone:hover, .shot:hover, .contact:hover, .game-card:hover{
    transform: translateY(-2px);
    transition: transform .14s ease;
  }
}

/* Hero “scanner line” */
.hero-card{
  background-image:
    radial-gradient(900px 260px at 20% 0%, rgba(36,148,255,.14), transparent 60%),
    radial-gradient(900px 260px at 90% 20%, rgba(122,62,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(10,12,18,.92), rgba(8,10,16,.82));
}
.hero-card:after{
  content:"";
  position:absolute;
  left:-20%;
  top:0;
  width:140%;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(58,255,163,.55), transparent);
  opacity:.18;
  animation: scan 5.5s linear infinite;
}
@keyframes scan{
  from{ transform: translateY(10px); }
  to{ transform: translateY(340px); }
}

/* --- V5: Corporate Sci‑Fi + Gritty Invaded Earth (darker, less white) --- */
:root{
  --void:#000000;
  --eclipse:#1B1E24;
  --violet:#7A3EFF;
  --blue:#2494FF;
  --xeno:#3AFFA3;
  --card: rgba(6,8,14,.78);
  --card2: rgba(5,7,12,.66);
}

/* Animated background layers */
body{
  background:
    radial-gradient(1200px 900px at 18% 10%, rgba(36,148,255,.12), transparent 60%),
    radial-gradient(1100px 800px at 85% 18%, rgba(122,62,255,.10), transparent 62%),
    radial-gradient(900px 700px at 60% 86%, rgba(58,255,163,.07), transparent 58%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 42%, var(--bg-2) 100%);
}

body:before{
  opacity:.10; /* stars */
}

body:after{
  opacity:.36; /* vignette + grain */
}

/* Moving “nebula” + grid overlay */
.bg-anim{
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(36,148,255,.10), transparent 60%),
    radial-gradient(780px 460px at 70% 50%, rgba(122,62,255,.10), transparent 62%),
    radial-gradient(680px 420px at 40% 75%, rgba(58,255,163,.06), transparent 60%);
  filter: blur(10px);
  animation: nebulaDrift 18s ease-in-out infinite alternate;
  opacity:.85;
}
@keyframes nebulaDrift{
  from{ transform: translate3d(-20px, 10px, 0) scale(1.02); }
  to{ transform: translate3d(30px, -18px, 0) scale(1.08); }
}

.bg-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(36,148,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,148,255,.028) 1px, transparent 1px);
  background-size: 90px 90px, 90px 90px;
  mask-image: radial-gradient(900px 520px at 50% 18%, rgba(0,0,0,.85), transparent 70%);
  opacity:.35;
  animation: gridShift 22s linear infinite;
}
@keyframes gridShift{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 160px 90px, 160px 90px; }
}

/* “Grit” speckle */
.bg-dust{
  position:fixed;
  inset:-10%;
  pointer-events:none;
  z-index:-1;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.10) 40%, transparent 45%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.08) 40%, transparent 45%),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,.07) 40%, transparent 45%),
    radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,.06) 40%, transparent 45%),
    radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,.06) 40%, transparent 45%);
  background-size: 380px 380px, 420px 420px, 520px 520px, 610px 610px, 700px 700px;
  opacity:.25;
  animation: dustDrift 30s linear infinite;
}
@keyframes dustDrift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-120px, 80px,0); }
}

/* Kill “white card” look */
.stat, .feature, .milestone, .contact, .shot, .faq details, .badge, .chip{
  background: rgba(8,10,16,.60) !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* Headings: keep gradient but reduce brightness */
h1, .page-title{
  background: linear-gradient(90deg, rgba(36,148,255,.92), rgba(122,62,255,.88), rgba(58,255,163,.82));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Corporate hero: cleaner panel + subtle “secure comms” stripe */
.hero-card{
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(1000px 320px at 18% 0%, rgba(36,148,255,.12), transparent 60%),
    radial-gradient(900px 300px at 90% 20%, rgba(122,62,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(5,7,12,.90), rgba(4,6,10,.78));
}
.hero-card:after{ opacity:.14; } /* scan line dimmer */

/* Concept art frames */
.frame{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background: rgba(8,10,16,.55);
  overflow:hidden;
}
.frame img{width:100%; height:auto; display:block}
.frame .cap{padding:12px 14px; color:var(--muted); font-size:13px}

/* Download cards */
.downloads{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:980px){.downloads{grid-template-columns:1fr}}
.dl{
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background: rgba(8,10,16,.55);
  padding:16px;
}
.dl b{display:block; margin-bottom:8px}
.dl p{margin:0; color:var(--muted); font-size:13px; line-height:1.65}
.dl a.btn{margin-top:12px}

/* =========================
   AAA-style public homepage
   ========================= */

.home-hero{
  position:relative;
  min-height:72vh;
  padding: 48px 0 18px;
  overflow:hidden;
}
.home-hero__bg{
  position:absolute; inset:-80px;
  background:
    radial-gradient(900px 520px at 10% 20%, rgba(36,148,255,.18), transparent 60%),
    radial-gradient(800px 520px at 80% 40%, rgba(122,62,255,.16), transparent 62%),
    radial-gradient(700px 520px at 30% 85%, rgba(58,255,163,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.88));
  filter:saturate(1.1);
}
.home-hero__bg:before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 20px);
  opacity:.08;
  transform: translate3d(0,0,0);
  animation: gridDrift 18s linear infinite;
}
@keyframes gridDrift{ from{transform:translateX(-60px)} to{transform:translateX(60px)} }

.home-hero__grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:stretch}
@media (max-width:980px){.home-hero__grid{grid-template-columns:1fr}}

.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(10,12,18,.45);
  color: var(--muted);
  font-size:12px;
}
.hero-kicker b{color:rgba(255,255,255,.88); font-weight:600}
.hero-kicker .dot{width:8px;height:8px;border-radius:99px;background:linear-gradient(90deg, rgba(36,148,255,.9), rgba(122,62,255,.9)); box-shadow:0 0 22px rgba(122,62,255,.35)}

.home-hero h1{font-size: clamp(40px, 5vw, 64px); line-height: 1.05; margin:14px 0 12px}
.home-hero p.lead{color: rgba(255,255,255,.78); font-size: 16px; line-height:1.7; max-width: 64ch}

.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}

.panel{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:
    radial-gradient(650px 220px at 15% 0%, rgba(36,148,255,.12), transparent 60%),
    radial-gradient(650px 220px at 85% 10%, rgba(122,62,255,.10), transparent 62%),
    rgba(8,10,16,.58);
  padding:16px;
}
.panel .label{color:var(--muted); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.panel h3{margin:10px 0 8px; font-size:18px}
.panel p{margin:0; color:rgba(255,255,255,.74); line-height:1.65; font-size:14px}
.panel .meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.74);
  font-size:12px;
}
.chip .sig{width:10px; height:10px; border-radius:99px; background: rgba(58,255,163,.8); box-shadow:0 0 18px rgba(58,255,163,.25)}

.section{
  padding: 34px 0;
}
.section-title{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:14px}
.section-title h2{margin:0; font-size:20px}
.section-title p{margin:0; color:var(--muted); font-size:13px}

/* Featured game block */
.featured{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:stretch;
}
@media (max-width:980px){.featured{grid-template-columns:1fr}}
.featured .cover{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85)),
    url('../placeholders/shot-01.svg');
  background-size:cover;
  background-position:center;
  min-height: 320px;
}
.featured .cover:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 320px at 18% 22%, rgba(36,148,255,.20), transparent 60%),
    radial-gradient(700px 320px at 82% 42%, rgba(122,62,255,.18), transparent 62%);
  opacity:.85;
}
.featured .cover .inner{position:absolute; left:18px; right:18px; bottom:18px}
.featured .cover .tag{display:inline-flex; gap:8px; align-items:center; font-size:12px; color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.35); padding:8px 10px; border-radius:999px}
.featured .cover .tag i{width:8px; height:8px; border-radius:99px; background:rgba(36,148,255,.95); box-shadow:0 0 18px rgba(36,148,255,.35)}
.featured .cover h2{margin:10px 0 8px; font-size:30px}
.featured .cover p{margin:0; color:rgba(255,255,255,.78); line-height:1.6}

/* News carousel */
.carousel{position:relative}
.carousel .track{display:grid; grid-auto-flow:column; grid-auto-columns: minmax(280px, 1fr); gap:14px; overflow:hidden}
.carousel .news-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background: rgba(8,10,16,.58);
  padding:14px;
}
.carousel .news-card .top{display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px}
.carousel .news-card h3{margin:10px 0 8px; font-size:16px}
.carousel .news-card p{margin:0; color:rgba(255,255,255,.72); line-height:1.65; font-size:13px}
.carousel .controls{display:flex; align-items:center; gap:10px; margin-top:12px}
.carousel .btn-ico{
  width:40px; height:40px; border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  display:grid; place-items:center;
  color: rgba(255,255,255,.80);
}
.carousel .dots{display:flex; gap:8px; align-items:center}
.carousel .dots button{
  width:8px; height:8px; border-radius:99px; border:none;
  background: rgba(255,255,255,.22);
}
.carousel .dots button[aria-current="true"]{
  width:18px;
  background: linear-gradient(90deg, rgba(36,148,255,.95), rgba(122,62,255,.95));
  box-shadow:0 0 18px rgba(122,62,255,.25);
}

/* Studio highlights grid */
.highlights{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width:980px){.highlights{grid-template-columns:1fr}}
.highlight{
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background: rgba(8,10,16,.58);
  padding:16px;
  overflow:hidden;
}
.highlight:before{
  content:"";
  position:absolute; inset:-60px;
  background: radial-gradient(520px 200px at 20% 20%, rgba(36,148,255,.12), transparent 60%),
              radial-gradient(520px 200px at 80% 45%, rgba(122,62,255,.10), transparent 62%);
  opacity:.55;
}
.highlight > *{position:relative}
.highlight h3{margin:6px 0 8px; font-size:16px}
.highlight p{margin:0; color:rgba(255,255,255,.72); line-height:1.65; font-size:13px}
.highlight .cta{margin-top:12px}

/* Make large SVG watermarks smaller across the site */
.feature svg{
  width: 54px;
  height: 54px;
  opacity: .18;
}
@media (max-width:980px){
  .feature svg{width:44px; height:44px}
}

/* Improve padding inside feature cards so text doesn't hug edges */
.feature{padding:18px}