/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1780334226
Updated: 2026-06-01 17:17:06

*/


/* ── VARIABLES ── */
:root{
  --bg:#0a0a12;
  --bg2:#12101f;
  --panel:#181530;
  --ink:#f5f3ff;
  --muted:#a39fc4;
  --line:rgba(177,75,255,.18);
  --purple:#b14bff;
  --teal:#23e0d8;
  --pink:#ff5ca8;
  --yellow:#ffd23f;
  --lime:#7cff5a;
  --orange:#ff8a3d;
  --display:"Pixelify Sans", system-ui, sans-serif;
  --pixel:"Press Start 2P", monospace;
  --body:"Space Grotesk", system-ui, sans-serif;
  --mono:"Space Mono", monospace;
}

/* ── RESET ── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--purple);color:#fff;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ── AMBIENT BACKGROUND ── */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ambient .grid{
  position:absolute;inset:-20% -20% 0 -20%;height:140%;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;
  transform:perspective(600px) rotateX(62deg) translateY(8%);
  transform-origin:center bottom;
  opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 30%,transparent 75%);
}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;mix-blend-mode:screen;}
.blob.b1{width:560px;height:560px;background:var(--purple);top:-160px;left:-120px;animation:drift 22s ease-in-out infinite;}
.blob.b2{width:520px;height:520px;background:var(--teal);bottom:-180px;right:-120px;animation:drift 26s ease-in-out infinite reverse;}
.blob.b3{width:380px;height:380px;background:var(--pink);top:40%;right:30%;opacity:.32;animation:drift 30s ease-in-out infinite;}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(60px,-40px) scale(1.1);}
  66%{transform:translate(-40px,50px) scale(.95);}
}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}

/* ── NAV ── */
header.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent;}
header.nav.scrolled{background:rgba(10,10,18,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.5px;}
.logo .dot{width:16px;height:16px;background:var(--teal);box-shadow:3px 0 0 var(--purple),0 3px 0 var(--pink),3px 3px 0 var(--yellow);}
.logo b{color:var(--ink);}
.logo i{color:var(--teal);font-style:normal;}
nav.links{display:flex;gap:30px;align-items:center;}
nav.links a{font-size:15px;color:var(--muted);font-weight:500;letter-spacing:.3px;transition:color .2s;}
nav.links a:hover{color:var(--ink);}

/* ── BUTTONS ── */
.btn{font-family:var(--body);font-weight:700;border:none;cursor:pointer;border-radius:0;transition:transform .12s,box-shadow .2s,background .2s;}
.btn-primary{background:var(--purple);color:#fff;padding:12px 22px;font-size:15px;box-shadow:4px 4px 0 var(--teal);}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--teal);}
.btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--teal);}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line);padding:11px 20px;font-size:15px;}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);}

/* ── HERO 3D SCROLL ── */
.hero-scroll{position:relative;z-index:1;}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;}

.hero-intro{position:absolute;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;}
.hero-intro::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1100px,92vw);height:64vh;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(10,10,18,.82),rgba(10,10,18,.4) 55%,transparent 78%);z-index:-1;}
.hero-kicker{font-family:var(--mono);font-size:14px;letter-spacing:6px;text-transform:uppercase;color:var(--teal);margin-bottom:22px;}
.hero-title{font-family:var(--display);font-weight:700;font-size:clamp(64px,15vw,200px);line-height:.82;margin:0;letter-spacing:1px;text-shadow:6px 6px 0 var(--purple),12px 12px 0 rgba(35,224,216,.55);}
.hero-sub{margin-top:26px;font-size:clamp(16px,2.2vw,22px);color:var(--muted);max-width:520px;}

.scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:60;animation:bob 1.8s ease-in-out infinite;}
.scrollcue .arrow{width:20px;height:20px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);}
@keyframes bob{
  0%,100%{transform:translate(-50%,0);}
  50%{transform:translate(-50%,8px);}
}

/* ── SCENE / CABINET ── */
.stage{position:absolute;inset:0;}
.scene{
  position:absolute;top:50%;left:50%;width:760px;height:480px;margin:0;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  will-change:transform,opacity,filter;
}
.cabinet{
  position:relative;width:100%;height:100%;overflow:hidden;
  background:linear-gradient(180deg,#1b1838,#100d22);
  border:2px solid rgba(255,255,255,.1);
  border-radius:18px;
  box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 6px rgba(0,0,0,.3);
  padding:18px;
  display:flex;flex-direction:column;
}
.screen{
  position:relative;flex:1;min-height:0;
  border-radius:10px;overflow:hidden;
  border:2px solid rgba(0,0,0,.5);
}
.screen .art{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.screen .art::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.18) 2px,transparent 2px);background-size:100% 5px;mix-blend-mode:overlay;opacity:.5;}
.screen .glare{position:absolute;inset:0;}
.screen .emblem{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:120px;height:120px;}
.screen .sctitle{position:absolute;left:24px;bottom:20px;right:24px;font-weight:700;font-size:46px;line-height:.9;text-shadow:3px 3px 0 rgba(0,0,0,.5);}
.screen .genre{position:absolute;left:24px;top:20px;font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;background:rgba(0,0,0,.45);padding:6px 11px;border-radius:999px;backdrop-filter:blur(4px);}

.cab-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 6px 4px;}
.cab-foot .meta{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:1px;}
.cab-foot .knobs{display:flex;gap:10px;}
.cab-foot .knobs span{width:14px;height:14px;border-radius:50%;background:var(--purple);box-shadow:0 0 12px var(--purple);}
.cab-foot .knobs span:nth-child(2){background:var(--teal);box-shadow:0 0 12px var(--teal);}
.cab-foot .knobs span:nth-child(3){background:var(--yellow);box-shadow:0 0 12px var(--yellow);}

/* ── ART THEMES (with !important to override Elementor lazy-load) ── */
.art-neon{background-image:url('https://gamepoc.com/wp-content/uploads/2026/06/header.jpg') !important;background-size:cover;background-position:center;}
.art-hex{background-image:url('https://gamepoc.com/wp-content/uploads/2026/06/main-scaled-e1780460849253.jpg') !important;background-size:cover;background-position:center;}
.art-bloom{background-image:url('https://gamepoc.com/wp-content/uploads/2026/06/ss_7efa36de8d5afad055b597247db954266930f137.1920x1080-e1780461093935.jpg') !important;background-size:cover;background-position:center;}
.art-void{background-image:url('https://gamepoc.com/wp-content/uploads/2026/06/16-9-scaled.jpg') !important;background-size:cover;background-position:center;}
.art-glow{background-image:url('https://gamepoc.com/wp-content/uploads/2026/06/16-9-1-scaled.jpg') !important;background-size:cover;background-position:center;}

/* ── HUD PROGRESS RAIL ── */
.hud{position:absolute;right:34px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:16px;}
.hud .tick{display:flex;align-items:center;gap:12px;justify-content:flex-end;opacity:.45;transition:opacity .3s;}
.hud .tick.on{opacity:1;}
.hud .tick .nm{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--ink);text-transform:uppercase;}
.hud .tick .pip{width:10px;height:10px;background:var(--muted);transition:background .3s,box-shadow .3s,transform .3s;}
.hud .tick.on .pip{background:var(--teal);box-shadow:0 0 14px var(--teal);transform:scale(1.4) rotate(45deg);}

/* ── GENERIC SECTION ── */
section.block{position:relative;z-index:2;background:var(--bg);}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--teal);}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(40px,6vw,76px);line-height:.95;margin:14px 0 0;letter-spacing:.5px;}
.lead{color:var(--muted);font-size:20px;max-width:560px;margin-top:18px;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;}

/* ── CATALOG ── */
#catalog{padding:140px 0 120px;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.gcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .25s,border-color .25s;}
.gcard:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(0,0,0,.45);border-color:var(--teal);}
.gcard .thumb{height:200px;position:relative;background-size:cover;background-position:center;}
.gcard .thumb .emblem{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;}
.gcard .thumb .badge{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;background:rgba(0,0,0,.5);padding:5px 10px;border-radius:999px;}
.gcard .body{padding:20px 22px 24px;}
.gcard h3{font-family:var(--display);font-weight:700;font-size:30px;margin:0;}
.gcard p{color:var(--muted);font-size:15px;margin:8px 0 16px;min-height:44px;}
.gcard .row{display:flex;justify-content:space-between;align-items:center;}
.gcard .status{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--lime);}
.gcard .status.soon{color:var(--yellow);}
.gcard .plat{display:flex;gap:8px;color:var(--muted);font-size:12px;font-family:var(--mono);}

/* ── FEATURED SPOTLIGHT ── */
#featured{padding:120px 0;background:linear-gradient(180deg,var(--bg),var(--bg2));border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.spot{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.spot .art-wrap{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:2px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.5);}
.spot .art-wrap .emblem{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:140px;height:140px;}
.spot .art-wrap .tag{position:absolute;top:18px;left:18px;font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;background:rgba(0,0,0,.5);padding:7px 13px;border-radius:999px;}
.spot .flag{font-family:var(--pixel);font-size:12px;color:var(--yellow);letter-spacing:1px;}
.spot h3{font-family:var(--display);font-weight:700;font-size:clamp(44px,5vw,68px);line-height:.95;margin:14px 0 0;}
.spot p{color:var(--muted);font-size:18px;margin-top:18px;}
.spot .ctas{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap;}
.spot .stats{display:flex;gap:38px;margin-top:34px;flex-wrap:wrap;}
.spot .stats div b{display:block;font-family:var(--display);font-size:38px;color:var(--teal);line-height:1;}
.spot .stats div span{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}

/* ── STUDIO / ABOUT ── */
#studio{padding:130px 0;}
.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;}
.studio-grid p.big{font-size:22px;color:var(--ink);line-height:1.55;}
.studio-grid p{color:var(--muted);}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:8px;}
.stat{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--panel);}
.stat b{font-family:var(--display);font-size:52px;display:block;line-height:1;}
.stat .c1{color:var(--purple);}
.stat .c2{color:var(--teal);}
.stat .c3{color:var(--pink);}
.stat .c4{color:var(--yellow);}
.stat span{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}

/* ── NEWS / DEVLOG ── */
#news{padding:120px 0;background:var(--bg2);border-top:1px solid var(--line);}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.post{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);transition:transform .2s,border-color .25s;}
.post:hover{transform:translateY(-6px);border-color:var(--purple);}
.post .ph{height:160px;}
.post .pb{padding:22px;}
.post .date{font-family:var(--mono);font-size:12px;color:var(--teal);letter-spacing:1px;}
.post h4{font-family:var(--display);font-weight:600;font-size:24px;margin:10px 0 8px;}
.post p{color:var(--muted);font-size:15px;margin:0;}

/* ── JOIN / NEWSLETTER ── */
#join{padding:130px 0;position:relative;overflow:hidden;}
.join-card{position:relative;border:2px solid var(--line);border-radius:24px;padding:70px 60px;text-align:center;background:radial-gradient(120% 140% at 50% 0%,rgba(177,75,255,.22),transparent 60%),var(--panel);overflow:hidden;}
.join-card h2{font-family:var(--display);font-weight:700;font-size:clamp(40px,6vw,72px);margin:0;line-height:.95;}
.join-card p{color:var(--muted);font-size:19px;margin:18px auto 34px;max-width:520px;}
.signup{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.signup input{font-family:var(--body);font-size:16px;padding:15px 20px;width:340px;max-width:100%;background:var(--bg);border:2px solid var(--line);border-radius:0;color:var(--ink);}
.signup input:focus{outline:none;border-color:var(--teal);}
.join-card .fine{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:18px;letter-spacing:1px;}

/* ── FOOTER ── */
footer{background:var(--bg);border-top:1px solid var(--line);padding:70px 0 40px;position:relative;z-index:2;}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;}
.foot-col h5{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0 0 18px;}
.foot-col a{display:block;color:var(--ink);font-size:15px;margin-bottom:11px;opacity:.85;transition:color .2s,opacity .2s;}
.foot-col a:hover{color:var(--teal);opacity:1;}
.foot-blurb{color:var(--muted);font-size:15px;margin:16px 0 22px;max-width:280px;}
.socials{display:flex;gap:12px;}
.socials a{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:11px;color:var(--ink);transition:all .2s;}
.socials a:hover{background:var(--purple);border-color:var(--purple);transform:translateY(-3px);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:56px;padding-top:26px;border-top:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--muted);flex-wrap:wrap;gap:14px;}

/* ── RESPONSIVE ── */
@media(max-width:980px){
  .spot,.studio-grid{grid-template-columns:1fr;gap:40px;}
  .cards,.news-grid{grid-template-columns:1fr 1fr;}
  .foot-top{grid-template-columns:1fr 1fr;}
  nav.links{display:none;}
  .hud{display:none;}
  .scene{width:90vw;height:58vw;}
  .screen .sctitle{font-size:34px;}
}
@media(max-width:620px){
  .cards,.news-grid,.stat-row{grid-template-columns:1fr;}
  .foot-top{grid-template-columns:1fr;}
  .join-card{padding:48px 24px;}
}

/* ── ELEMENTOR OVERRIDES ── */
.elementor-section{background:transparent !important;}
.elementor-section-wrap,.elementor{background:#0a0a12 !important;}
.elementor-column-gap-no>.elementor-column>.elementor-element-populated{padding:0 !important;}
.elementor-widget-html{width:100%;}
body.elementor-page{background:#0a0a12 !important;margin:0;}
/* ── Elementor Form Styling ── */
.elementor-form .elementor-field-textual{
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 2px solid var(--line) !important;
  font-family: var(--body) !important;
  font-size: 16px !important;
  padding: 14px 18px !important;
  border-radius: 0 !important;
  transition: border-color .2s;
}
.elementor-form .elementor-field-textual:focus{
  border-color: var(--teal) !important;
  outline: none !important;
}
.elementor-form .elementor-field-textual::placeholder{
  color: var(--muted) !important;
  opacity: .6;
}
.elementor-form .elementor-field-label{
  color: var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
}

/* Select dropdown */
.elementor-form .elementor-select-wrapper select{
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 2px solid var(--line) !important;
  font-family: var(--body) !important;
  font-size: 16px !important;
  padding: 14px 18px !important;
  border-radius: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.elementor-form .elementor-select-wrapper select:focus{
  border-color: var(--teal) !important;
  outline: none !important;
}
.elementor-form .elementor-select-wrapper select option{
  background: var(--panel);
  color: var(--ink);
  padding: 10px;
}
.elementor-form .elementor-select-wrapper select option:checked{
  background: var(--purple);
  color: #fff;
}
.elementor-form .select-caret-down-wrapper svg{
  fill: var(--teal) !important;
  width: 12px !important;
}

/* Checkboxes */
.elementor-form .elementor-field-subgroup{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 24px !important;
}
.elementor-form .elementor-field-option{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.elementor-form .elementor-field-option label{
  color: var(--ink) !important;
  font-family: var(--body) !important;
  font-size: 15px !important;
  cursor: pointer;
}
.elementor-form .elementor-field-option input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--line) !important;
  background: var(--bg) !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color .2s, background .2s;
}
.elementor-form .elementor-field-option input[type="checkbox"]:hover{
  border-color: var(--teal) !important;
}
.elementor-form .elementor-field-option input[type="checkbox"]:checked{
  background: var(--purple) !important;
  border-color: var(--purple) !important;
}
.elementor-form .elementor-field-option input[type="checkbox"]:checked::after{
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* Submit button */
.elementor-form .elementor-button{
  background: var(--purple) !important;
  color: #fff !important;
  font-family: var(--body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 16px 32px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--teal) !important;
  cursor: pointer;
  transition: transform .12s, box-shadow .2s !important;
  width: 100%;
}
.elementor-form .elementor-button:hover{
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--teal) !important;
}
.elementor-form .elementor-button:active{
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--teal) !important;
}

/* Field spacing */
.elementor-form .elementor-field-group{
  margin-bottom: 20px !important;
}