.scene-mobile{
    display:none;
}

.scene-desktop{
    display:flex;
}

/* =========================================================
   GT MOBILE MENU — fully self-contained, namespaced with
   the "gt-" prefix so no other stylesheet (about-team.css,
   about-team-responsive.css, etc.) can ever collide with or
   override it, regardless of load order. !important is used
   deliberately here as a safety net for that same reason.
========================================================= */

.gt-hamburger{
  display: none !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 26px !important;
  height: 18px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2001 !important;
}
.gt-hamburger span{
  display: block !important;
  height: 2px !important;
  width: 100% !important;
  background: #fff !important;
  border-radius: 2px !important;
  transition: transform .3s ease, opacity .3s ease !important;
}
.gt-hamburger.gt-active span:nth-child(1){ transform: translateY(8px) rotate(45deg) !important; }
.gt-hamburger.gt-active span:nth-child(2){ opacity: 0 !important; }
.gt-hamburger.gt-active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg) !important; }

.gt-mobile-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.6) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .3s ease, visibility .3s ease !important;
  z-index: 2998 !important;
}
.gt-mobile-overlay.gt-active{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.gt-mobile-nav{
  position: fixed !important;
  top: 0 !important;
  right: -100% !important;
  width: 80% !important;
  max-width: 340px !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(6,7,15,0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 24px 28px 32px !important;
  transition: right .35s cubic-bezier(.4,0,.2,1) !important;
  z-index: 2999 !important;
  overflow-y: auto !important;
  box-shadow: -10px 0 40px rgba(0,0,0,.4) !important;
}
.gt-mobile-nav.gt-open{ right: 0 !important; }

.gt-mobile-nav-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 20px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.gt-mobile-logo{
  height: 34px !important;
  width: auto !important;
  object-fit: contain !important;
}
.gt-mobile-close{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .3s ease !important;
}
.gt-mobile-close:hover{
  background: rgba(255,255,255,0.14) !important;
  transform: rotate(90deg) !important;
}

.gt-mobile-links{
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
}
.gt-mobile-links li{
  opacity: 0 !important;
  transform: translateX(20px) !important;
  transition: opacity .35s ease, transform .35s ease !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.gt-mobile-nav.gt-open .gt-mobile-links li{
  opacity: 1 !important;
  transform: translateX(0) !important;
}
.gt-mobile-nav.gt-open .gt-mobile-links li:nth-child(1){ transition-delay: .05s !important; }
.gt-mobile-nav.gt-open .gt-mobile-links li:nth-child(2){ transition-delay: .10s !important; }
.gt-mobile-nav.gt-open .gt-mobile-links li:nth-child(3){ transition-delay: .15s !important; }
.gt-mobile-nav.gt-open .gt-mobile-links li:nth-child(4){ transition-delay: .20s !important; }
.gt-mobile-nav.gt-open .gt-mobile-links li:nth-child(5){ transition-delay: .25s !important; }
.gt-mobile-links a{
  display: block !important;
  padding: 16px 4px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #f5f7ff !important;
  text-decoration: none !important;
}
.gt-mobile-links a:hover{ color: #3fd2ff !important; }

.gt-mobile-cta{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 20px !important;
  padding: 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg,#2f7cf6,#9b3ff0) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  opacity: 0 !important;
  transform: translateY(14px) !important;
  transition: opacity .35s ease .3s, transform .35s ease .3s !important;
}
.gt-mobile-nav.gt-open .gt-mobile-cta{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body.gt-menu-open{ overflow: hidden !important; }

@media (max-width: 768px){
  .gt-hamburger{ display: flex !important; }
  .nav-links{ display: none !important; }
}

/* =========================
   Tablet & Mobile — page layout
========================= */

@media (max-width:1024px){

.hero-body{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
}

.scene{
    margin:auto;
}

.copy{
    margin:auto;
}

}

@media (max-width:768px){

.hamburger{ display:none !important; }

.scene-desktop{
    display:none;
}

.scene-mobile{
    display:flex;
    position:relative;
    width:100%;
    height:360px;
    justify-content:center;
    align-items:center;
    margin:20px 0;
}

.hero-body{
    display:block;
    padding:20px;
}

.copy{
    width:100%;
    text-align:center;
}

.headline{
    font-size:38px;
}

.sub{
    font-size:15px;
    max-width:100%;
}

.cta-row{
    display:flex;
    flex-direction:column;
    gap:12px;
    justify-content:center;
    align-items:center;
}

.btn-primary,
.btn-outline,
.btn-ghost-green{
    width:100%;
    justify-content:center;
}

.social-proof{
    justify-content:center;
    margin-top:20px;
}

}

@media (max-width:430px){

.headline{
    font-size:32px;
}

.scene-mobile{
    height:300px;
}

.scene-globe{
    width:200px;
}

.scene-platform{
    width:250px;
}

}