/* MegaBiteGames | Studio polish update — 20 October 2026
   Purpose: refine the existing V13 aesthetic without changing the site's structure. */
:root {
  --cyan: #55e7d5;
  --green: #69edce;
  --white: #f2f8f8;
  --muted: #b9cdd0;
}

/* A calmer, more deliberate studio identity. */
.site-header {
  background: rgba(4, 18, 24, .96);
  border-bottom: 1px solid rgba(80, 209, 207, .28);
  box-shadow: 0 10px 35px rgba(0, 5, 12, .20);
}
.header-row { min-height: 84px; gap: clamp(20px, 2.1vw, 34px); }
.wordmark-logo { gap: 13px; isolation: isolate; }
.brandmark-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 77px;
  min-width: 77px;
  height: 45px;
  padding: 0 4px 3px 0;
  font-family: 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  font-size: 32px;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.095em;
  line-height: 1;
  background: linear-gradient(155deg,#91fff1 0%,#35e4d3 51%,#11aa95 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.brandmark-divider {
  height: 34px;
  width: 1px;
  background: linear-gradient(180deg,transparent 0%,#5aeadd 35%,#5aeadd 65%,transparent 100%);
  opacity: .66;
}
.brandmark-word {
  font-family: 'Segoe UI', Inter, system-ui, sans-serif;
  font-size: clamp(19px, 1.68vw, 26px);
  font-weight: 850;
  letter-spacing: -.053em;
  line-height: 1.15;
}
.brandmark-word .brandmark-mega { color: #f2f7f8; }
.brandmark-word .brandmark-games { color: #49e5d3; }
.logo:hover .brandmark-games, .footer-logo:hover .brandmark-games { color: #92fff1; }
.nav { gap: clamp(19px, 2.2vw, 33px); }
.nav a {
  color: #b7c9ce;
  font-size: .84rem;
  font-weight: 780;
  letter-spacing: .025em;
  transition: color .2s ease;
}
.nav a:hover, .nav a[aria-current=page] { color:#f5ffff; }
.nav a[aria-current=page]::after { bottom: 21px; height: 2px; background: #53e9d6; }
.header-cta {
  padding: 12px 18px;
  border-radius: 7px;
  background: rgba(26,78,81,.19);
  border: 1px solid rgba(88,220,212,.55);
  color: #d6fcf5;
  box-shadow: none;
  letter-spacing: .07em;
  transition: background .2s ease,border-color .2s ease,transform .2s ease;
}
.header-cta:hover { background:rgba(47,146,142,.22);border-color:#74f8e7;transform:translateY(-1px); }

/* Keep the two original hero images; improve headline hierarchy and breathing room. */
.hero-v12 {
  margin-top: 24px;
  border-radius: 15px;
  border-color: rgba(65,187,190,.40);
  box-shadow: 0 19px 60px rgba(0,0,0,.30);
}
.hero-v12 .hero-content { padding: clamp(29px, 3vw, 45px); }
.hero-v12 .hero-brand::after {
  background: linear-gradient(90deg,rgba(3,15,22,.94) 0%,rgba(4,17,25,.81) 36%,rgba(4,17,25,.36) 100%),
              linear-gradient(0deg,rgba(3,15,22,.65),transparent 65%);
}
.hero-v12 .hero-brand .eyebrow {
  display:flex;
  align-items:center;
  gap:11px;
  color:#a9e7e0;
  font-size:.71rem;
  letter-spacing:.18em;
  font-weight:800;
}
.hero-v12 .hero-brand .eyebrow::before {
  content:'';display:block;flex:0 0 20px;height:2px;background:#4bebd9;border-radius:9px;
}
.hero-v12 .hero-brand h1 {
  font-family: 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(3.2rem, 4.65vw, 5.35rem);
  font-weight: 900;
  font-style: normal;
  letter-spacing: -.062em;
  line-height: 1.02;
  margin: 23px 0 19px;
  text-shadow: 0 5px 20px rgba(0,0,0,.32);
}
.hero-v12 .hero-brand h1 span { color:#f7f9fa; }
.hero-v12 .hero-brand h1 strong {
  margin-top: 3px;
  color:#66ead8 !important;
  -webkit-text-fill-color:#66ead8 !important;
  background:none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: 0 5px 22px rgba(0,0,0,.25);
}
.hero-v12 .hero-intro {
  max-width: 385px;
  color: #d7e7e9;
  font-size: .96rem;
  line-height: 1.69;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hero-v12 .hero-cta { gap: 11px; margin-top: 18px; }
.button {
  background:linear-gradient(112deg,#88f2e0,#48d8c5);
  border-color:#8cf4e4;
  color:#052321;
  border-radius:7px;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.button:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(43,207,183,.20);filter:brightness(1.045); }
.button.outline { background:rgba(5,23,31,.66);border-color:rgba(166,204,211,.54);color:#e5f2f2; }
.button.outline:hover { background:rgba(27,63,68,.84); }
.hero-v12 .hero-feature .game-name { text-shadow:0 3px 18px rgba(0,0,0,.48); }
.hero-v12 .hero-feature .strap { color:#f4eee2; }

/* Slightly more sophisticated surfaces and interactions throughout. */
.feature-game, .feature-game-v12 {
  border-color:rgba(73,164,175,.40);
  box-shadow:0 16px 40px rgba(0,0,0,.20);
}
.feature-game-image img { transition:transform .5s ease; }
.feature-game-image:hover img { transform:scale(1.025); }
.section-heading h2 { letter-spacing:-.045em; }
.concept-card { border-color:rgba(62,134,146,.45);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.concept-card:hover { transform:translateY(-3px);border-color:rgba(84,224,208,.78);box-shadow:0 12px 26px rgba(0,0,0,.20); }
.concept-card:focus-visible { outline-offset:4px; }
.contact-band { border-color:rgba(76,164,177,.38); }
.footer { border-top-color:rgba(82,164,174,.30); }
.footer-word { font-size:1.06rem; }
.brandmark-monogram.small { width:auto;min-width:0;height:28px;font-size:23px;padding:0 2px 2px 0; }
.brandmark-divider.small { height:25px; }

/* Desktop split-panel typography must fit within its actual column. */
@media (min-width:781px) and (max-width:1180px) {
  .hero-v12 .hero-brand h1 { font-size:clamp(2.65rem,4.6vw,4rem); }
  .hero-v12 .hero-content { padding:30px 27px; }
  .hero-v12 .hero-brand .eyebrow { font-size:.67rem;letter-spacing:.13em; }
}
@media (max-width:1120px) {
  .brandmark-word { font-size:20px; }
  .brandmark-monogram { width:69px;min-width:69px;font-size:29px; }
}
@media (max-width:780px) {
  .header-row { min-height:74px; }
  .brandmark-word { font-size:19px; }
  .brandmark-monogram { width:67px;min-width:67px;font-size:28px; }
  .brandmark-divider { height:29px; }
  .wordmark-logo { gap:10px; }
  .menu-btn { color:#edfdfa;border:1px solid rgba(92,197,200,.42);background:#09222b; }
  .hero-v12 { margin-top:17px; }
  .hero-v12 .hero-content { padding:31px 27px; }
  .hero-v12 .hero-brand h1 { font-size:clamp(3.1rem,8vw,4.7rem); }
  .hero-v12 .hero-panel+.hero-panel { border-left:0;border-top:1px solid rgba(67,184,190,.4); }
}
@media (max-width:550px) {
  .header-row { min-height:68px; }
  .brandmark-word { font-size:clamp(14.5px,4vw,18px);letter-spacing:-.045em; }
  .brandmark-monogram { width:54px;min-width:54px;height:33px;font-size:24px; }
  .brandmark-divider { height:25px; }
  .wordmark-logo { gap:8px; }
  .hero-v12 .hero-content { padding:29px 24px; }
  .hero-v12 .hero-brand h1 { font-size:clamp(2.8rem,10vw,3.85rem);letter-spacing:-.065em; }
  .hero-v12 .hero-brand .eyebrow { font-size:.65rem;letter-spacing:.12em; }
  .hero-v12 .hero-intro { font-size:.94rem; }
  .hero-cta .button { width:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .feature-game-image img,.concept-card,.button,.header-cta { transition:none!important; }
}


/* MegaBiteGames V19 — approved enlarged studio logo. */
.logo.wordmark-logo{display:inline-flex;flex:0 1 auto;align-items:center;min-width:0;line-height:0;gap:0;}
.logo.wordmark-logo .brand-logo-image{display:block;width:clamp(385px,42vw,580px);max-width:100%;height:auto;object-fit:contain;filter:none;}
.footer-logo.text-footer-logo{display:inline-flex;min-width:0;align-items:center;line-height:0;}
.footer-logo.text-footer-logo .footer-brand-image{display:block;width:280px;max-width:min(78vw,280px);height:auto;object-fit:contain;filter:none;}
.header-row{gap:clamp(14px,1.5vw,25px);}
.nav{gap:clamp(14px,1.45vw,28px);}
@media(max-width:1300px){
 .logo.wordmark-logo .brand-logo-image{width:clamp(340px,40vw,515px);}
 .nav a{font-size:.84rem;}
 .header-cta{padding:10px 14px;}
}
@media(max-width:1120px){
 .logo.wordmark-logo .brand-logo-image{width:clamp(305px,42vw,450px);}
}
@media(max-width:780px){
 .header-row{gap:12px;}
 .logo.wordmark-logo .brand-logo-image{width:min(73vw,440px);}
}
@media(max-width:550px){
 .logo.wordmark-logo .brand-logo-image{width:min(77vw,330px);}
 .footer-logo.text-footer-logo .footer-brand-image{width:min(75vw,260px);max-width:100%;}
}
@media(max-width:360px){
 .logo.wordmark-logo .brand-logo-image{width:min(72vw,278px);}
}