/* ??? Design Tokens ??? */

:root{

  --header-h:90px;

  --hero-h-mobile:calc(100vh - var(--header-h));

  --hero-h-desktop:calc(100vh - var(--header-h));

  --hero-h-max:calc(100vh - var(--header-h));

  --hero-bg:#f7f9fc;

  --hero-surface:#ffffff;

  --hero-border:#e2e8f0;

  --hero-text:#0f172a;

  --hero-muted:#64748b;

  --hero-shadow:0 14px 36px rgba(15,23,42,0.10);

  --hero-shadow-soft:0 10px 24px rgba(15,23,42,0.08);

}



/* ?? Global ?? */

body,html{ overflow-x:hidden; }

.object-fit-cover{ object-fit:cover; }

.home-main{

  flex:1;

  display:flex;

  flex-direction:column;

  width:100%;

  min-width:0;

}

.hero,

.hero *{

  box-sizing:border-box;

}



/* ?? Hero Layout ?? */

.hero{

  background:linear-gradient(180deg,#f8fafc 0%,#eef2f8 100%);

  padding:clamp(28px,5vw,64px) 20px 40px;

  flex:1;

  display:flex;

  align-items:center;

}



.hero-inner{

  max-width:1200px;

  width:100%;

  margin:0 auto;

  display:grid;

  grid-template-columns:minmax(280px,1fr) minmax(280px,1.1fr);

  gap:32px;

  align-items:center;

  min-width:0;

}



.hero-content{

  display:flex;

  flex-direction:column;

  gap:18px;

  min-width:0;

}



.hero-tag{

  font-size:11px;

  letter-spacing:.24em;

  text-transform:uppercase;

  color:#94a3b8;

}



.hero-title{

  margin:0;

  font-size:clamp(1.8rem,2.8vw,2.6rem);

  font-weight:700;

  color:var(--hero-text);

  letter-spacing:-0.02em;

}



.hero-subtitle{

  margin:0;

  color:var(--hero-muted);

  font-size:1rem;

}



/* Hero Buttons */

.hero-actions{

  margin-top:10px;

  display:flex;

  flex-direction:column;

  gap:12px;

}



.action-group{

  border:1px solid var(--hero-border);

  border-radius:12px;

  padding:12px;

  background:var(--hero-surface);

  box-shadow:var(--hero-shadow-soft);

}



.action-group--primary{

  background:linear-gradient(180deg,rgba(37,99,235,0.08),rgba(37,99,235,0)) , var(--hero-surface);

  border-color:#cbd5e1;

}



.action-group--secondary{

  background:#f9fafb;

}



.group-label{
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#1f2937;
  margin:0 0 10px;
  font-weight:700;
}



.overlay-grid{

  display:grid;

  gap:12px;

  grid-template-columns:repeat(2,minmax(150px,1fr));

  width:100%;

  min-width:0;

}



.overlay-grid--secondary .hero-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #cfd8ea;
  background:var(--hero-surface);
  color:var(--hero-text);
  font-size:.98rem;
  font-weight:700;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}



.hero-btn{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:12px 14px;

  border-radius:10px;

  border:1px solid var(--hero-border);

  background:var(--hero-surface);

  color:var(--hero-text);

  font-size:.98rem;

  font-weight:600;

  text-decoration:none;

  transition:transform .18s ease, border-color .18s ease, background .18s ease;

  position:relative;
}



.hero-btn i{

  color:var(--btn-accent);

  font-size:1rem;

}

.hero-btn-version{

  position:absolute;

  right:10px;

  bottom:6px;

  font-size:11px;

  color:#4b5563;

  font-weight:700;

  pointer-events:none;

}



.hero-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(15,23,42,0.28);
  background:linear-gradient(180deg,#ffffff 0%,#f6f8ff 100%);
}



.hero-btn:active{

  transform:translateY(0);

}



.hero-btn--primary{ --btn-accent:#3b82f6; }

.hero-btn--green{ --btn-accent:#22c55e; }

.hero-btn--amber{ --btn-accent:#f59e0b; }
.hero-btn--cyan{ --btn-accent:#06b6d4; }
.hero-btn--rose{ --btn-accent:#f43f5e; }
.hero-btn--slate{ --btn-accent:#64748b; }
.hero-btn--violet{ --btn-accent:#8b5cf6; }
.hero-btn--teal{ --btn-accent:#0ea5e9; }


/* ?? Slider ?? */

.hero-media{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  min-width:0;
  position:relative;
  align-items:stretch;
}


#heroSlider{

  width:100%;

  max-width:100%;

  height:clamp(320px,50vw,520px);

  border-radius:18px;

  overflow:hidden;

  border:1px solid var(--hero-border);

  background:#fff;

  min-width:0;

}



#heroSlider .swiper-slide{

  height:100%;

}



#heroSlider img{

  filter:saturate(1.02);

  max-width:100%;

}



#heroSlider .swiper-wrapper{

  width:100%;

}

#heroSlider .swiper-slide{

  height:100%;

}



#heroSlider .swiper-button-prev,

#heroSlider .swiper-button-next{

  color:#fff;

  width:38px;

  height:38px;

  border-radius:999px;

  background:rgba(15,23,42,0.4);

  opacity:.7;

  transition:opacity .2s ease, transform .2s ease;

}



#heroSlider .swiper-button-prev:after,

#heroSlider .swiper-button-next:after{

  font-size:16px;

}



#heroSlider .swiper-button-prev:hover,

#heroSlider .swiper-button-next:hover{

  opacity:1;

  transform:translateY(-1px);

}



#heroSlider .swiper-pagination-bullet{

  background:#fff;

  opacity:.55;

}



#heroSlider .swiper-pagination-bullet-active{
  opacity:1;
}

.slide-game{

  display:flex;

  align-items:center;

  justify-content:center;

}

.slide-game .hero-game-card{

  max-width:720px;

  width:100%;

  margin:0 auto;

  height:100%;

  display:flex;

  flex-direction:column;

}

.slide-game .hero-game-frame{

  max-width:100%;

  flex:1;

  display:flex;

  align-items:center;

  justify-content:center;

}

.slide-game .hero-game-head{

  align-items:center;

}

.hero-game-card{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.16);
  background:linear-gradient(145deg, rgba(15,23,42,0.9), rgba(22,30,53,0.95));
  box-shadow:0 16px 40px rgba(15,23,42,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
  color:#e2e8f0;
  padding:14px;
  overflow:hidden;
}

.hero-game-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.hero-game-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  background:linear-gradient(120deg,#c7d2fe,#7dd3fc);
  color:#0b1224;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.1em;
  border-radius:999px;
  text-transform:uppercase;
  box-shadow:0 6px 18px rgba(125,211,252,0.35);
}

.hero-game-title{
  margin:6px 0 4px;
  font-size:1.1rem;
  font-weight:700;
  color:#e8f0ff;
}

.hero-game-subtitle{
  margin:0;
  color:rgba(226,232,240,0.82);
  font-size:.95rem;
}

.hero-game-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  color:#e0f2fe;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
  white-space:nowrap;
}

.hero-game-link:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.12);
}

.hero-game-frame{
  position:relative;
  width:100%;
  max-width:700px;
  margin:0 auto;
  padding:12px;
  border-radius:12px;
  background:radial-gradient(130% 130% at 50% 20%, rgba(125,211,252,0.18), rgba(59,130,246,0) 50%), #0b1224;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03), 0 20px 34px rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-game-frame canvas{
  display:block;
  width:100%;
  max-width:600px;
  aspect-ratio:5 / 4;
  height:auto;
  margin:0 auto;
  border-radius:10px;
  background:#03070f;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05), 0 14px 32px rgba(3,7,15,0.55);
  image-rendering:pixelated;
}

.hero-game-frame .game-embed{
  position:relative;
  width:100%;
  max-width:640px;
  margin:0 auto;
  border-radius:12px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05), 0 14px 32px rgba(3,7,15,0.55);
  border:1px solid rgba(255,255,255,0.08);
  background:#03070f;
  aspect-ratio:5.5 / 4;
  display:flex;
}

.hero-game-frame .game-embed iframe{
  width:100%;
  height:100%;
  border:0;
}

.hero-game-hint{
  margin-top:10px;
  color:rgba(226,232,240,0.82);
  font-size:.92rem;
}

.slide-visual{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:16px;
  background:#0b1224;
  isolation:isolate;
}

.slide-visual img,
.slide-visual video{
  transition:transform .9s ease, filter .9s ease;
  filter:saturate(1.05) contrast(1.02);
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.swiper-slide.is-active .slide-visual img,
.swiper-slide.is-active .slide-visual video{
  transform:scale(1.04);
  filter:saturate(1.12) contrast(1.05);
}

.holo-layer{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(59,130,246,0.38), transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(16,185,129,0.32), transparent 35%),
    conic-gradient(from 45deg at 50% 50%, rgba(255,255,255,0.16), transparent 45%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .6s ease;
  animation:holoPulse 7s ease-in-out infinite;
}

.grid-lines{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:14px 14px;
  opacity:0;
  mix-blend-mode:overlay;
  animation:gridShift 12s linear infinite;
}

.slide-visual::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s ease;
  mix-blend-mode:screen;
}

.swiper-slide.is-active .holo-layer,
.swiper-slide.is-active .grid-lines{
  opacity:1;
}

.swiper-slide.is-active .slide-visual::after{
  transform:translateX(0%);
}

.video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(12,18,35,0.25), rgba(12,18,35,0.6));
  pointer-events:none;
}

@keyframes holoPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.05) rotate(0.5deg); }
}

@keyframes gridShift{
  from{ background-position:0 0,0 0; }
  to{ background-position:28px 28px,28px 28px; }
}


/* ?? Responsive ?? */

@media (max-width: 992px){

  .hero-inner{

    grid-template-columns:1fr;

    gap:24px;

  }

  .hero-media{

    order:-1;

  }

  .overlay-grid{

    grid-template-columns:repeat(2,minmax(150px,1fr));

  }

}



@media (max-width: 768px){

  .hero-content{

    text-align:center;

    align-items:center;

  }

  .hero-actions{

    max-width:520px;

    margin:0 auto;

  }

  .hero-media{
    gap:12px;
  }

  #heroSlider{
    height:auto;
    min-height:0;
    aspect-ratio:16 / 10;
  }

  .slide-game{
    align-items:stretch;
  }

  .slide-game .hero-game-card{
    height:auto;
    padding:12px;
  }

  .slide-game .hero-game-frame{
    max-height:70vh;
  }

  .hero-game-frame .game-embed{
    max-width:100%;
  }

}



@media (max-width: 576px){

  .hero{

    padding:24px 16px 32px;

  }

  .hero-title{

    font-size:1.6rem;

  }

  .hero-subtitle{

    font-size:.95rem;

  }

  .overlay-grid{

    grid-template-columns:repeat(2,1fr);

    gap:10px;

  }

  .hero-btn{

    font-size:.9rem;

    padding:10px 12px;

  }

  #heroSlider{

    height:auto;

    aspect-ratio:4 / 3;

    max-height:360px;

    border-radius:14px;

  }

  #heroSlider .swiper-button-prev,

  #heroSlider .swiper-button-next{

    display:none;

  }

}



@media (max-width: 576px){

  .hero-game-card{

    padding:12px;

  }

  .hero-game-head{

    flex-direction:column;

    align-items:flex-start;

  }

  .hero-game-link{

    width:100%;

    justify-content:center;

  }

}


@media (max-width: 420px){

  .overlay-grid{

    grid-template-columns:1fr;

  }

  .hero-btn{

    justify-content:flex-start;

    padding:12px 14px;

  }

}