/* ==========================================================================
   Hoaki Play — main stylesheet
   Visual language carried over from the reference site (static/): deep navy
   grounds, a single blue CTA color, Roboto type, rounded 50px game imagery,
   alternating white/navy/gray sections, small pill-shaped category tags.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&display=swap');

:root{
  --navy-deep:   #221c8a;
  --navy-nav:    #2922a3;
  --navy-heading:#2b23b6;
  --blue:        #4035ff;
  --blue-hover:  #655cff;
  --blue-light:  #cfccff;
  --gold:        #ffcf74;
  --ink:         #252525;
  --bg-gray:     #f3f3f3;
  --white:       #ffffff;
  --font: 'Roboto', Helvetica, Arial, sans-serif;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }

.container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

/* ---------- Navigation ---------- */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: var(--navy-nav);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  transition: transform .25s ease;
}
.nav__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 5%;
}
.nav__logo img{ height: 26px; width: auto; }
.nav__links{
  display: flex;
  align-items: center;
  column-gap: 40px;
}
.nav__links a{
  font: 600 16px/1.5 var(--font);
  color: var(--white);
  transition: color .2s, text-shadow .2s;
  white-space: nowrap;
}
.nav__links a:hover{
  color: var(--blue-light);
  text-shadow: 0 2px 8px rgba(207,204,255,.3);
}
.nav__toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px; height: 32px;
  position: relative;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after{
  content: '';
  position: absolute;
  left: 6px; right: 6px;
  height: 2px;
  background: var(--white);
  transition: transform .2s;
}
.nav__toggle span{ top: 15px; }
.nav__toggle span::before{ top: -8px; }
.nav__toggle span::after{ top: 8px; }

@media (max-width: 860px){
  .nav__toggle{ display: block; }
  .nav__links{
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 22px;
    background-color: rgba(15,17,38,.97);
    padding: 28px 8%;
    display: none;
  }
  .nav__links.is-open{ display: flex; }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 13px 26px;
  font: 600 16px/1.4 var(--font);
  color: var(--white);
  text-align: center;
  background-color: var(--blue);
  outline: 1px solid var(--white);
  outline-offset: 0;
  cursor: pointer;
  transition: all .2s;
}
.btn:hover{
  background-color: var(--blue-hover);
  box-shadow: 0 4px 16px rgba(64,53,255,.35);
}
.btn--ghost{ background-color: var(--navy-deep); }
.btn--ghost:hover{ background-color: #3029aa; }
.btn-row{ display: flex; flex-wrap: wrap; gap: 16px; }

.learn-more{
  display: inline-flex;
  align-items: center;
  column-gap: 8px;
  font: 600 16px/1.5 var(--font);
  color: var(--blue);
}
.learn-more svg{ width: 18px; height: 18px; }

/* ---------- Section helpers ---------- */
section{ position: relative; }
.tag{
  display: inline-flex;
  padding: 4px 20px;
  border-radius: 15px;
  background-color: var(--navy-deep);
  color: var(--white);
  font: 600 14px/1.5 var(--font);
  margin-bottom: 14px;
}
.eyebrow{ color: var(--blue-light); font: 600 15px/1.6 var(--font); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; }
h1, h2, h3, h4{ margin: 0; font-family: var(--font); }

.section-heading{
  font: 700 44px/1.2 var(--font);
  color: var(--navy-heading);
  max-width: 720px;
}
.section-heading--light{ color: var(--white); }
.section-copy{
  font: 18px/1.65 var(--font);
  color: var(--ink);
  max-width: 620px;
}
.section-copy--light{ color: rgba(255,255,255,.88); }

@media (max-width: 768px){
  .section-heading{ font-size: 32px; }
}

/* ---------- Hero carousel (ported directly from static5: presentation + content) ---------- */
.hero{ position: relative; margin-top: 54px; min-height: min(640px, 78vh); overflow: hidden; background-color: #221c8a; display:flex; flex-direction:column; }
.hero__slide{
  position:absolute; inset:0; opacity:0; transition: opacity .8s ease;
  background-size: cover; background-position: 66%;
}
.hero__slide.is-active{ opacity:1; }
.hero__slide::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(42deg, rgb(4 1 57 / 95%) 0%, rgb(7 1 108 / 88%) 32%, rgba(34, 28, 138, .5) 50%, rgba(34, 28, 138, .08) 68%),
              linear-gradient(0deg, rgba(20, 16, 82, .65) 0%, rgba(20, 16, 82, .05) 48%);
}
.hero__row{ position:relative; z-index:1; flex:1; display:flex; align-items:flex-end; padding: 96px 2% 44px 2%; }
.hero__content{ display:flex; flex-direction:column; max-width: 700px; }
.hero__eyebrow{ font: 700 13px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color: var(--blue-light); margin-bottom: 14px; }
.hero__title{ font: 800 clamp(30px,4.4vw,52px)/1.12 var(--font); color: #FFFFFF; margin: 0; }
.hero__desc{ margin-top: 16px; font: 500 16px/1.65 var(--font); color: rgba(255,255,255,.72); max-width: 560px; }
.hero__actions{ margin-top: 26px; display:flex; gap: 12px; flex-wrap: wrap; }
.btn-solid{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 20px; border-radius: 4px; background: #FFFFFF; color: #0a0a0a;
  font: 700 14px/1 var(--font); white-space: nowrap; transition: background .15s;
}
.btn-solid:hover{ background: #d7d7d7; }
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 9px 19px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); color: #FFFFFF;
  font: 600 14px/1 var(--font);
}
.btn-outline:hover{ border-color: #FFFFFF; }
.hero__dots{ position:absolute; bottom: 22px; z-index: 2; display:flex; gap:8px; }
.hero__dots button{ width: 28px; height: 3px; background: rgba(255,255,255,.3); border:none; cursor:pointer; padding:0; }
.hero__dots button.is-active{ background: #FFFFFF; }
@media (max-width: 700px){ .hero{ min-height: 560px; } }

/* ---------- Statement band ---------- */
.statement{
  background: var(--navy-deep) url('../assets/bg-b.jpg') repeat top left;
  padding: 90px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.statement__inner{
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.statement__title{
  font: 700 44px/1.25 var(--font);
  color: var(--white);
}
.statement__title span{ color: var(--blue-light); }
.statement__desc{
  margin-top: 20px;
  font: 18px/1.7 var(--font);
  color: rgba(255,255,255,.85);
  max-width: 720px;
}
@media (max-width: 768px){
  .statement{ padding: 60px 0; }
  .statement__title{ font-size: 32px; }
}

/* ---------- Category sections (image + text alternating) ---------- */
.category{ overflow: hidden; }
.category--white{ background: var(--white) url('../assets/bg-w.jpg') repeat top left; }
.category--gray{ background: var(--bg-gray); }
.category__row{
  display: flex;
  align-items: center;
  column-gap: 64px;
  padding: 96px 2% 2% 2%;
}
.category__row.reverse{ flex-direction: row-reverse; }
.category__media{
  flex: 0 0 46%;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 40px;
  box-shadow: 0 24px 48px rgba(34,28,138,.18);
  background-color: var(--navy-deep);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.category__body{ flex: 1; min-width: 0; }
.category__games{
  margin-top: 18px;
  font: 600 15px/1.6 var(--font);
  color: var(--navy-heading);
}
.category__features{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
}
.category__feature{ flex: 1 1 220px; }
.category__feature h4{
  font: 700 22px/1.4 var(--font);
  color: var(--navy-heading);
  margin-bottom: 6px;
}
.category__feature p{ font: 16px/1.6 var(--font); color: var(--ink); margin: 0; }

@media (max-width: 991px){
  .category__row, .category__row.reverse{ flex-direction: column; }
  .category__media{ width: 100%; }
  .category__row{ padding: 64px 1em; row-gap: 32px; }
  .statement{ background-size: 140%; }
  .hero__row { padding: 5% 5% 44px;}
}

/* image scroll-reveal (JS toggles .is-visible) */
.reveal{ opacity: 0; transform: translateX(-24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.reverse-dir{ transform: translateX(24px); }
.reveal.is-visible{ opacity: 1; transform: translateX(0); }

/* ---------- Games showcase ---------- */
.showcase{ background: var(--white); padding: 100px 0; }
.showcase__head{ margin-bottom: 56px; }
.game-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (max-width: 860px){
  .game-grid{ grid-template-columns: 1fr; }
}
.game-card{
  display: flex;
  flex-direction: column;
  background: var(--bg-gray);
  border-radius: 24px;
  overflow: hidden;
}
.game-card__gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--navy-deep);
}
.game-card__gallery img{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}
/* key-art promo graphics (logo/title baked in) must not be cropped — letterbox instead */
.game-card__gallery img.keyart{
  object-fit: contain;
  background: var(--navy-deep);
}
.game-card__body{ padding: 28px 30px 32px; }
.game-card__header{ display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.game-card__icon{ flex: 0 0 auto; width: 80px; height: 80px; border-radius: 14px; object-fit: cover; }
.game-card__headtext{ min-width: 0; }
.game-card__title{ font: 700 26px/1.3 var(--font); color: var(--navy-heading); }
.game-card__hook{ font: 700 15px/1.6 var(--font); color: var(--blue); margin: 4px 0 0; }
.game-card__desc{ font: 15.5px/1.7 var(--font); color: var(--ink); margin: 0 0 18px; }
.game-card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(34,28,138,.12);
}
.game-card__tags span{
  font: 500 13px/1.5 var(--font);
  color: var(--navy-heading);
  background: var(--white);
  border: 1px solid rgba(43,35,182,.2);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ---------- Partnership ---------- */
.partnership{
  background: linear-gradient(180deg,#221c8a 0%, #3c33cd 100%);
  padding: 110px 0;
}
.partnership__head{ max-width: 760px; margin: 0 auto 56px; text-align: left; }
.partnership__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 56px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 768px){
  .partnership__grid{ grid-template-columns: 1fr; }
}
.partnership__item{ display: flex; column-gap: 20px; }
.partnership__icon{
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}
.partnership__icon img{ width: 26px; height: 26px; filter: brightness(0) saturate(100%) invert(84%) sepia(28%) saturate(600%) hue-rotate(340deg) brightness(103%); }
.partnership__item h4{ font: 700 22px/1.4 var(--font); color: var(--gold); margin-bottom: 8px; }
.partnership__item p{ font: 16px/1.65 var(--font); color: rgba(255,255,255,.85); margin: 0; }
.partnership__note{
  max-width: 980px;
  margin: 48px auto 0;
  padding: 18px 22px;
  border: 1px dashed rgba(255,255,255,.35);
  border-radius: 12px;
  font: 14px/1.7 var(--font);
  color: rgba(255,255,255,.7);
}

/* ---------- CTA / Contact band ---------- */
.cta{
  background: var(--navy-deep);
  padding: 100px 0;
  text-align: left;
}
.cta__title{ font: 700 44px/1.25 var(--font); color: var(--white); max-width: 720px; }
.cta__desc{ margin-top: 18px; font: 18px/1.7 var(--font); color: rgba(255,255,255,.85); max-width: 660px; }
.cta__email{
  margin-top: 28px;
  font: 600 17px/1.6 var(--font);
  color: var(--blue-light);
}
.cta .btn-row{ margin-top: 32px; }

/* ---------- Footer ---------- */
.footer{
  background-image: linear-gradient(0deg,#000 0%, #524adc 100%);
  padding: 48px 0 30px;
}
.footer__top{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 18px;
  text-align: center;
}
.footer__logo img{ height: 22px; }
.footer__links{ display: flex; column-gap: 36px; flex-wrap: wrap; justify-content: center; }
.footer__links a{ font: 600 14px/1.5 var(--font); color: var(--white); }
.footer__links a:hover{ color: var(--blue-light); }
.footer__divider{ width: 100%; height: 1px; background: #524cb3; border: none; margin: 26px 0 18px; }
.footer__bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font: 14px/1.5 var(--font);
  color: var(--white);
}
.footer__legal{ display: flex; column-gap: 22px; }
.footer__legal a{ color: var(--white); text-decoration: underline; }
.footer__legal a:hover{ color: var(--blue-light); }
@media (max-width: 480px){
  .footer__bottom{ flex-direction: column; align-items: center; text-align: center; }
}

/* ---------- Simple sub-pages (privacy / terms) ---------- */
.legal{ padding: 170px 0 100px; background: var(--white); min-height: 60vh; }
.legal h1{ font: 700 40px/1.3 var(--font); color: var(--navy-heading); margin-bottom: 18px; }
.legal p{ font: 16px/1.75 var(--font); color: var(--ink); margin: 0 0 16px; }
.legal h2{ font: 700 22px/1.4 var(--font); color: var(--navy-heading); margin: 36px 0 12px; }
.legal .updated{ color: #8784b3; font-size: 14px; margin-bottom: 40px; }