/* ============================
   GLOBAL
   ============================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background-color: #151521;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 27px;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

a {
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}
a:hover {
  color: #00F0FF;
  text-decoration: none;
  text-shadow: 0 0 20px #00f0ff;
}
b, strong { font-weight: 700; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================
   NAVBAR
   ============================ */
#wrapper-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background 0.3s ease;
}
#wrapper-navbar.solid {
  background: rgba(21, 21, 33, 0.97);
}
/* Per-page navbar — change values here to control each page */
.page-home #wrapper-navbar.solid     { background: transparent; }
.page-projects #wrapper-navbar.solid { background: rgba(21, 21, 33, 0.0); }
.page-team #wrapper-navbar.solid     { background: rgba(21, 21, 33, 0.8); }
.page-company #wrapper-navbar.solid  { background: rgba(21, 21, 33, 0.8); }
.page-contact #wrapper-navbar.solid  { background: rgba(21, 21, 33, 0.0); }
.page-game #wrapper-navbar.solid     { background: rgba(21, 21, 33, 0.0); }
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 59px 20px;
}
.navbar-brand img { height: 50px; width: auto; }

.navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  list-style: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  gap: 0 !important;
  align-items: center !important;
}
.navbar-nav li {
  float: none !important;
  display: list-item !important;
}
.navbar-nav li a {
  display: inline-block !important;
  color: #fff !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 19px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  padding: 0 25px !important;
  background: none !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #00F0FF !important;
  text-shadow: 0 0 20px #00f0ff !important;
  background: none !important;
}

/* ============================
   MOBILE NAV TOGGLE
   ============================ */
.navbar-toggler {
  display: none;
  position: relative;
  width: 56px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}
.navbar-toggler .icon-bar {
  display: block;
  position: absolute;
  height: 2px;
  background: #fff;
  border-radius: 10px;
  left: 10px;
  transition: 0.15s ease-in-out;
}
.navbar-toggler .icon-bar:nth-child(1) { top: 6px; width: 35px; }
.navbar-toggler .icon-bar:nth-child(2) { top: 17px; width: 23px; left: 22px; }
.navbar-toggler .icon-bar:nth-child(3) { top: 28px; width: 35px; }

/* ============================
   MOBILE NAV OVERLAY
   ============================ */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: #151521;
  z-index: 999;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 0 60px;
}
.mobile-nav.open { display: flex; }
.mobile-nav .mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
.mobile-nav a {
  display: flex !important;
  align-items: center;
  gap: 20px;
  color: rgba(255,255,255,0.7) !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  line-height: 38px !important;
  text-transform: uppercase !important;
  transition: color 0.2s !important;
}
.mobile-nav a::before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: #00F0FF;
  transition: width 0.3s ease;
  flex-shrink: 0;
}
.mobile-nav a.active {
  color: #00F0FF !important;
}
.mobile-nav a.active::before { width: 80px; }
.mobile-nav a:hover { color: rgba(255,255,255,0.8) !important; }

.mobile-nav-social {
  display: flex;
  gap: 20px;
}
.mobile-nav-social a {
  font-size: 0 !important;
  color: rgba(255,255,255,0.45) !important;
}
.mobile-nav-social a svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.mobile-nav-social a:hover { color: rgba(255,255,255,0.8) !important; }
.mobile-nav-social a::before { display: none !important; }

.mobile-nav-close {
  position: absolute;
  top: 22px; right: 28px;
  background: none; border: none;
  color: rgba(255,255,255,0.7); font-size: 28px;
  cursor: pointer; line-height: 1;
  transition: color 0.2s;
}
.mobile-nav-close:hover { color: #fff; }

/* ============================
   FOOTER SOCIAL ICONS
   ============================ */
#footer-social {
  position: fixed;
  bottom: 44px; right: 59px;
  display: flex; flex-direction: column; gap: 24px;
  z-index: 100;
  list-style: none;
  margin: 0; padding: 0;
}
#footer-social a {
  display: inline-block;
  width: 19px; height: 19px;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s, transform 0.2s;
}
#footer-social a:hover { color: #fff; transform: translateY(-2px); text-shadow: none; }
#footer-social svg { width: 19px; height: 19px; fill: currentColor; display: block; }

/* ============================
   SCROLL REVEAL
   ============================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ============================
   HOME
   ============================ */
.video-wrap {
  position: relative;
  width: 100%; height: 100vh;
  overflow: hidden;
  background: #0a0a12;
}
.yt-bg-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh; height: 100vh;
  min-width: 100%; min-height: 56.25vw;
}
.yt-bg-wrap iframe {
  width: 100%; height: 100%;
  border: none; pointer-events: none;
  opacity: 0.4;
  transform: scale(1.25);
}
.video-overlay {
  position: absolute; inset: 0;
  background: rgba(8, 0, 96, 0.05);
}
.mobile-hero-gif { display: none; }

/* ============================
   PROJECTS LIST — Full-screen panels (matching WP original)
   ============================ */
.projects-page {
  padding-top: 0;
  min-height: 100vh;
  background: #151521 url('../images/img/Games.png') no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
/* Overlay for smooth game image crossfade */
.projects-bg-overlay {
  position: fixed;
  inset: 0;
  background-color: #151521;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}
.projects-bg-overlay.active {
  opacity: 1;
}
.games-panels {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.game-panel {
  flex: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.game-panel::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(270deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.03) 100%);
}

/* Circle + vertical line */
.game-panel .circle {
  width: 62px; height: 62px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  position: absolute;
  top: 230px; left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
  z-index: 1;
}
.game-panel .circle::before {
  content: "";
  width: 10px; height: 10px;
  background: #00F0FF;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto; border-radius: 50%;
  transition: all 0.3s ease;
}
.game-panel .circle::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  margin: -7px auto 0;
  top: 100%; width: 1px; height: 0;
  background: rgba(0, 240, 255, 0.5);
  transition: all 0.3s ease;
}

.game-panel .game-content {
  padding: 100px 30px;
  position: relative;
  z-index: 1;
}
.game-panel .entry-title {
  position: relative;
  top: 30px;
  transition: all 0.3s ease;
  margin-bottom: 26px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 30px; line-height: 37px;
  letter-spacing: 0.02em;
}
.game-panel .game-content-inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.game-panel .game-excerpt {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 14px; line-height: 24px;
  letter-spacing: 0.01em;
  max-width: 394px;
  margin: 0 auto;
  opacity: 0; visibility: hidden;
  transition: all 0.3s ease-in;
}
.game-panel .btn-game {
  display: inline-block;
  margin-top: 40px;
  margin-bottom: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 14px; line-height: 17px;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  color: #fff;
  border: 1px solid #00f0ff;
  box-shadow: 0 0 25px -15px #00f0ff, 0 0 25px -15px #00f0ff inset;
  background: transparent;
  transition: all 0.15s ease-in-out;
  opacity: 0; visibility: hidden;
  text-decoration: none;
}
.game-panel .btn-game:hover {
  color: #00f0ff;
  transform: scale(1.075);
  text-shadow: 0 0 20px #00f0ff;
}
.game-panel .game-platforms {
  position: absolute;
  bottom: 78px; left: 0; right: 0;
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: all 0.3s ease-in;
}
.game-panel .game-platforms img {
  margin: 0 10px;
  height: 18px; width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

/* Hover */
.game-panel:hover .circle { border-color: rgba(0, 240, 255, 0.5); }
.game-panel:hover .circle::before { box-shadow: 0 0 10px #00F0FF; }
.game-panel:hover .circle::after { height: 80px; }
.game-panel:hover .entry-title { top: 0; }
.game-panel:hover .game-content-inner { max-height: 400px; }
.game-panel:hover .game-excerpt,
.game-panel:hover .btn-game,
.game-panel:hover .game-platforms { opacity: 1; visibility: visible; }

/* Empty panel (3rd slot in row 2) */
.game-panel-empty { cursor: default; pointer-events: none; }
.game-panel-empty::before { display: none; }

/* ============================
   GAME SINGLE
   ============================ */
.game-single-page {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.game-single-overlay {
  min-height: 100vh;
  padding-top: 80px;
  background: linear-gradient(to right, rgba(21,21,33,0.95) 55%, rgba(21,21,33,0.4) 100%);
}
.game-single-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 30px;
}
.back-link:hover { color: #fff; }
.game-single-content h1 {
  font-size: 48px; font-weight: 800;
  color: #fff; margin: 0 0 30px; line-height: 1.1;
}
.game-single-content h1 span { color: #00F0FF; }

/* Tabs */
.tabs-list {
  display: inline-flex; list-style: none;
  margin: 0 0 20px; padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: relative;
}
.tab-item a {
  display: block;
  padding: 19px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px; font-weight: 300;
  line-height: 22px; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.4);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.2s;
}
.tab-item + .tab-item { margin-left: 78px; }
.tab-item.active a,
.tab-item a:hover { color: #fff; text-shadow: none; }
.tab-item.active a { border-bottom-color: #00f0ff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel-body {
  font-family: 'Raleway', sans-serif;
  color: #fff; font-weight: 300;
  font-size: 15px; line-height: 26px;
  letter-spacing: 0.02em;
  padding-top: 43px;
}
.tab-panel-body p { margin: 0 0 36px; }
.tab-panel-body b, .tab-panel-body strong { font-weight: 500; }
.tab-panel-body ul { padding-left: 0; list-style: none; }
.tab-panel-body ul li {
  position: relative;
  padding-left: 42px;
  margin-bottom: 30px;
}
.tab-panel-body ul li::before {
  content: "";
  position: absolute; top: 8px; left: 0;
  background: #00F0FF; opacity: 0.5;
  width: 8px; height: 8px;
  border-radius: 50%;
}

.store-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.store-link {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #00f0ff;
  box-shadow: 0 0 25px -15px #00f0ff, 0 0 25px -15px #00f0ff inset;
  color: #fff; padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 300;
  letter-spacing: 0.02em;
  transition: all 0.15s ease-in-out;
}
.store-link:hover {
  color: #00f0ff;
  transform: scale(1.075);
  text-shadow: 0 0 20px #00f0ff;
  text-decoration: none;
}
.store-link svg { width: 16px; height: 16px; fill: currentColor; }

.game-cover img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* ============================
   TEAM
   ============================ */
.team-page { min-height: 100vh; padding-top: 70px; }
.page-inner { padding: 70px 40px; }
.team-page h1 {
  font-size: 56px; font-weight: 800;
  line-height: 1.1;
  margin: 0 0 60px; text-align: center;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 50px 24px;
  max-width: 1440px;
  margin: 0 auto 50px;
}
.team-member { text-align: center; }
.team-member img {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  object-fit: cover;
  object-position: center 20%;
  margin-bottom: 16px;
  background: #1a1a2e;
}
/* Placeholder for missing photos */
.team-placeholder {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.team-placeholder::after {
  content: '';
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.team-member h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.team-member p { font-size: 12px; color: rgba(255,255,255,0.5); margin: 0; }

/* ============================
   COMPANY (Timeline)
   ============================ */
.company-page {
  min-height: 100vh;
}
.company-overlay {
  min-height: 100vh;
  padding-top: 70px;
}
.company-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 40px 120px;
}

/* Intro */
.company-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 100px;
}
.company-intro h1 {
  font-size: 56px;
  font-weight: 800;
  margin: 0 0 24px;
  line-height: 1.1;
}
.company-intro p {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

/* Timeline */
.timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 120px;
  padding: 0;
}
/* Central line */
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(0,240,255,0.3) 5%, rgba(0,240,255,0.3) 95%, transparent);
  transform: translateX(-50%);
}

/* Timeline item */
.timeline-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 60px;
  width: 50%;
}
.timeline-item[data-side="left"] {
  align-self: flex-start;
  padding-right: 60px;
  text-align: right;
  margin-left: 0;
}
.timeline-item[data-side="right"] {
  align-self: flex-end;
  padding-left: 60px;
  text-align: left;
  margin-left: 50%;
}

/* Dot on the line */
.timeline-item::before {
  content: '';
  position: absolute;
  top: 8px;
  width: 12px; height: 12px;
  background: #00F0FF;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0,240,255,0.5);
  z-index: 2;
  transition: all 0.3s ease;
}
.timeline-item[data-side="left"]::before {
  right: -6px;
}
.timeline-item[data-side="right"]::before {
  left: -6px;
}

/* Connector line from dot to card */
.timeline-item::after {
  content: '';
  position: absolute;
  top: 13px;
  height: 1px;
  width: 40px;
  background: rgba(0,240,255,0.2);
  transition: all 0.3s ease;
}
.timeline-item[data-side="left"]::after {
  right: 6px;
}
.timeline-item[data-side="right"]::after {
  left: 6px;
}

/* Hover: dot glows, line brightens, month lights up */
.timeline-item:hover::before {
  box-shadow: 0 0 20px rgba(0,240,255,0.8), 0 0 40px rgba(0,240,255,0.3);
}
.timeline-item:hover::after {
  background: rgba(0,240,255,0.6);
}
.timeline-item:hover .timeline-month {
  color: #fff;
  text-shadow: 0 0 12px rgba(0,240,255,0.5);
}

/* Date label */
.timeline-date {
  display: none;
}

/* Card */
.timeline-card {
  position: relative;
  width: 100%;
}
.timeline-month {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00F0FF;
  margin-bottom: 8px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.timeline-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 12px;
}
.timeline-card p {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* Year marker - big ghost year behind cards */
.timeline-item .timeline-date {
  display: block;
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 80px;
  line-height: 1;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  z-index: 0;
}
.timeline-item[data-side="left"] .timeline-date {
  right: 60px;
  top: -20px;
}
.timeline-item[data-side="right"] .timeline-date {
  left: 60px;
  top: -20px;
}

/* Origin marker (last item) */
.timeline-origin::before {
  width: 18px; height: 18px;
  box-shadow: 0 0 20px rgba(0,240,255,0.7), 0 0 40px rgba(0,240,255,0.3);
}
.timeline-origin[data-side="left"]::before {
  right: -9px;
}



/* Timeline responsive */
@media (max-width: 768px) {
  .timeline::before { left: 20px; }
  .timeline-item,
  .timeline-item[data-side="left"],
  .timeline-item[data-side="right"] {
    width: 100%;
    margin-left: 0;
    padding-left: 50px;
    padding-right: 0;
    text-align: left;
  }
  .timeline-item::before,
  .timeline-item[data-side="left"]::before,
  .timeline-item[data-side="right"]::before {
    left: 14px; right: auto;
  }
  .timeline-item::after,
  .timeline-item[data-side="left"]::after,
  .timeline-item[data-side="right"]::after {
    left: 26px; right: auto;
    width: 16px;
  }
  .timeline-item .timeline-date,
  .timeline-item[data-side="left"] .timeline-date,
  .timeline-item[data-side="right"] .timeline-date {
    left: 50px; right: auto;
    font-size: 50px;
  }
  .company-intro h1 { font-size: 36px; }
}

/* ============================
   CONTACT
   ============================ */
.contact-page { min-height: 100vh; padding-top: 100px; }
.contact-inner {
  max-width: 1440px;
  margin: 0 auto; padding: 80px 40px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 60px; align-items: start;
}
.contact-page h1 {
  font-size: 72px; font-weight: 700;
  line-height: 80px; margin: 0 0 21px;
}
.contact-lead {
  font-size: 18px; line-height: 27px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 40px;
}
.contact-info h5 {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  margin: 0 0 8px;
}
.contact-info p { color: rgba(255,255,255,0.55); font-size: 13px; margin: 0 0 20px; }
.contact-info a { color: rgba(255,255,255,0.55); }
.contact-info a:hover { color: #00F0FF; }

/* Social icons row for contact */
.social-icons {
  display: flex; gap: 18px; margin-top: 12px;
}
.social-icons a {
  display: inline-block;
  width: 19px; height: 19px;
  color: rgba(255,255,255,0.55);
}
.social-icons a:hover { color: #fff; text-shadow: none; }
.social-icons a svg { width: 19px; height: 19px; fill: currentColor; display: block; }

.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-link {
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  padding: 8px 16px;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  transition: all 0.2s;
}
.social-link:hover { border-color: #00F0FF; color: #00F0FF; }

/* Form — matching WP theme (bottom-border only) */
.form-field { display: block; width: 100%; margin-bottom: 25px; }
.form-field input,
.form-field textarea {
  display: block; width: 100%;
  -webkit-appearance: none;
  height: 58px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: rgba(255,255,255,0.1);
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  padding: 13px 0;
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 25px -15px #00f0ff, 0 0 25px -15px #00f0ff inset;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #fff; }
.form-field textarea { min-height: 125px; resize: none; height: auto; }
.btn-submit {
  background: transparent;
  border: 1px solid #00f0ff;
  box-shadow: 0 0 25px -15px #00f0ff, 0 0 25px -15px #00f0ff inset;
  color: #fff; padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 300;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  margin-top: 17px;
}
.btn-submit:hover {
  color: #00f0ff;
  transform: scale(1.075);
  text-shadow: 0 0 20px #00f0ff;
}
.form-success {
  display: none;
  color: #00F0FF;
  margin-top: 14px; font-size: 13px;
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 991px) {
  .navbar { padding: 16px 20px; }
  .navbar-nav { display: none !important; }
  .navbar-toggler { display: block; }

  .games-panels { flex-direction: column; }
  .game-panel {
    min-height: auto; display: block;
    text-align: center; padding-top: 124px;
    background: no-repeat center; background-size: cover;
  }
  .game-panel .circle { top: 40px; border-color: rgba(0,240,255,0.5); }
  .game-panel .circle::before { box-shadow: 0 0 10px #00F0FF; }
  .game-panel .circle::after { height: 51px; }
  .game-panel .entry-title { top: 0; font-size: 40px; line-height: 49px; }
  .game-panel .game-content-inner,
  .game-panel:hover .game-content-inner { max-height: none !important; }
  .game-panel .game-excerpt,
  .game-panel .btn-game,
  .game-panel .game-platforms { opacity: 1; visibility: visible; }
  .game-panel .game-platforms { position: static; margin-top: 99px; }
  .game-panel .game-content { padding: 64px 20px; }

  .game-single-content { grid-template-columns: 1fr; }

  .contact-inner { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }

  .video-wrap { display: none; }
  .mobile-hero-gif {
    display: block; height: 100vh;
    overflow: hidden; background: #0a0a12;
    position: relative;
  }
  .mobile-hero-gif::before {
    content: '';
    position: absolute; inset: 0;
    background: url('../images/BG_WWW/Filmik_Mobile.gif') no-repeat center top;
    background-size: cover; opacity: 0.4; transform: scale(1.15);
  }
}
@media (max-width: 767px) {
  h1, .team-page h1, .contact-page h1 { font-size: 40px; line-height: 49px; margin-bottom: 40px; }
  .tab-item + .tab-item { margin-left: 10px; }
  .tab-item a { font-size: 16px; line-height: 20px; }
}
@media (max-width: 600px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .game-single-content, .page-inner, .company-content, .contact-inner { padding: 40px 20px; }

  #footer-social { display: none; }
}

/* Desktop: backgrounds controlled by overlay opacity */

/* Game page video embed */
.game-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  margin-top: 65px;
}
.game-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* Platform logos on game single pages */
.game-single-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 40px;
}
.game-single-platforms img {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Timeline platform tags */
.timeline-platforms {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.5px;
  margin-left: 6px;
}
.timeline-platforms::before {
  content: '— ';
}
.team-since {
  display: none;
}

.team-since {
  display: none;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.5px;
}