:root{
  --cream:#f2debb; --cream-soft:#f7ebd2; --blue:#5b7fd4; --blue-dark:#4a6cc0;
  --ink:#2b2620; --grey:#5f5a52; --black:#141414;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--cream); color:var(--grey);
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--blue);}
.container{max-width:1080px; margin:0 auto; padding:0 1.5rem;}
.center{text-align:center;}

/* nav */
.topbar{padding:1.6rem 0 0;}
.home-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--blue); color:#fff; text-decoration:none;
  font-weight:700; padding:.55rem 1.05rem; border-radius:9px;
}
.home-btn:hover{background:var(--blue-dark);}
.topnav{display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap;}
.nav-link{color:var(--ink); font-weight:700; text-decoration:none; font-size:.95rem; display:inline-flex; align-items:center; gap:.3rem;}
.nav-link:hover{color:var(--blue);}
.nav-link .ext{width:12px; height:12px;}

/* logo */
.logo-wrap{text-align:center; padding:2.8rem 0;}
.logo-wrap img{width:250px; max-width:66%; margin:0 auto;}

/* two-column alternating rows */
.row{display:flex; align-items:center; gap:3rem; padding:3.5rem 0;}
.row.img-right{flex-direction:row-reverse;}
.col-img,.col-text{flex:1 1 0; min-width:0;}
.col-img img{width:min(420px,100%); margin:0 auto;}
.eyebrow{color:var(--blue); text-transform:uppercase; font-weight:700; letter-spacing:1.5px; font-size:.8rem; margin:0 0 .7rem;}
.col-text h2{color:var(--ink); font-weight:800; line-height:1.15; font-size:clamp(1.6rem,3.4vw,2.35rem); margin:0 0 1rem;}
.col-text p{font-size:1.05rem; margin:0 0 1.4rem;}
.col-text p.lead{font-size:1.2rem; color:var(--ink); font-style:italic;}

/* section heading */
.section-head{text-align:center; padding:2.5rem 0 .5rem;}
.section-head h2{color:var(--ink); font-weight:800; font-size:clamp(1.5rem,3.2vw,2.1rem); margin:.3rem 0 .6rem; line-height:1.15;}
.section-head p{max-width:640px; margin:0 auto; font-size:1.05rem;}

/* buttons */
.btns{display:flex; flex-wrap:wrap; gap:.8rem;}
.btns.center{justify-content:center;}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--blue); color:#fff; text-decoration:none;
  text-transform:uppercase; font-weight:700; font-size:.82rem; letter-spacing:.6px;
  padding:.85rem 1.4rem; border-radius:9px; border:2px solid var(--blue); cursor:pointer;
}
.btn:hover{background:var(--blue-dark); border-color:var(--blue-dark);}
.btn .ext{width:14px; height:14px;}
.btn-outline{background:transparent; color:#fff; border-color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-light{background:#fff; color:var(--blue); border-color:#fff;}
.btn-light:hover{background:#eef2fb;}

/* social row — icons are 80x61, constrain by height to keep aspect */
.social-row{display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(1rem,4vw,2.8rem); padding:1.5rem 0 3rem;}
.social-row a{display:flex; flex-direction:column; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); font-weight:600; font-size:.9rem;}
.social-row img{height:52px; width:auto;}
.social-row a:hover{color:var(--blue);}

/* promo / callout cards */
.promo{background:var(--black); border-radius:22px; max-width:880px; margin:3.5rem auto; padding:3rem 2rem; text-align:center;}
.promo.promo-blue{background:var(--blue);}
.promo img.promo-logo{width:250px; max-width:72%; margin:0 auto 1.2rem;}
.promo .eyebrow{color:#c9d4f0;}
.promo h2{color:#fff; font-weight:800; font-size:clamp(1.5rem,3.2vw,2.1rem); margin:.2rem 0 1rem; line-height:1.15;}
.promo p{color:#d7d7d7; max-width:580px; margin:0 auto 1.6rem;}
.promo.promo-blue p{color:#eef2fb;}
.promo .btns{justify-content:center;}

/* prominent full-width arcade band (home) */
.arcade-band{background:linear-gradient(160deg,#5b7fd4 0%,#4a6cc0 100%); color:#fff; padding:4.5rem 0; margin-top:1rem;}
.arcade-band .eyebrow{color:#d5def5;}
.arcade-band h2{color:#fff; font-weight:800; font-size:clamp(1.9rem,4vw,2.7rem); margin:.3rem 0 1rem; line-height:1.1;}
.arcade-band .intro{max-width:760px; margin:0 auto 2.4rem; font-size:1.14rem; color:#eef2fb;}
.arcade-features{display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; margin:0 auto 2.6rem; max-width:960px;}
.arcade-feature{flex:1 1 250px; max-width:300px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.28); border-radius:16px; padding:1.5rem; text-align:left;}
.arcade-feature h3{color:#fff; margin:.1rem 0 .5rem; font-size:1.12rem;}
.arcade-feature p{color:#eef2fb; font-size:.96rem; margin:0;}

/* steps (arcade page) */
.steps{display:flex; gap:1.5rem; flex-wrap:wrap; padding:1.5rem 0 1rem;}
.step{flex:1 1 260px; background:var(--cream-soft); border:1px solid rgba(91,127,212,.28); border-radius:16px; padding:1.7rem;}
.step .num{width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:.9rem;}
.step h3{color:var(--ink); margin:0 0 .4rem; font-size:1.18rem;}
.step p{margin:0; font-size:1rem;}

/* games showcase (arcade page) */
.games-grid{display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; padding:1rem 0 1.5rem;}
.game-card{flex:1 1 300px; max-width:380px; background:var(--cream-soft); border:1px solid rgba(91,127,212,.28); border-radius:16px; overflow:hidden; display:flex; flex-direction:column;}
.game-card .art-wrap{background:#e9f0fc; display:flex; align-items:center; justify-content:center;}
.game-card .art-wrap img{width:100%; height:auto;}
.game-card .body{padding:1.5rem;}
.game-card h3{color:var(--ink); margin:0 0 .3rem; font-size:1.22rem;}
.game-card .meta{color:var(--blue); text-transform:uppercase; font-weight:700; letter-spacing:.8px; font-size:.74rem; margin:0 0 .7rem;}
.game-card p{margin:0; font-size:1rem;}

/* flagship game treatment */
.flagship{display:flex; gap:2.5rem; align-items:center; background:var(--cream-soft); border:1px solid rgba(91,127,212,.32); border-radius:20px; padding:2rem; margin:1rem 0 1.5rem;}
.flagship .art-wrap{flex:1 1 0; min-width:0;}
.flagship .art-wrap img{width:min(360px,100%); margin:0 auto; border-radius:12px;}
.flagship .flag-text{flex:1 1 0; min-width:0;}
.flagship-badge{display:inline-block; background:var(--blue); color:#fff; text-transform:uppercase; font-weight:700; letter-spacing:1px; font-size:.72rem; padding:.3rem .7rem; border-radius:8px; margin-bottom:.7rem;}
.flagship h3{color:var(--ink); font-weight:800; font-size:1.5rem; margin:0 0 .7rem;}
.flagship p{margin:0 0 1rem; font-size:1.05rem;}

/* AI transparency two-column (arcade page) */
.honesty{display:flex; gap:1.5rem; flex-wrap:wrap; padding:1rem 0 1.5rem;}
.honesty .col{flex:1 1 300px; border-radius:16px; padding:1.7rem;}
.honesty .yes{background:#e9f0fc; border:1px solid rgba(91,127,212,.32);}
.honesty .no{background:var(--cream-soft); border:1px solid rgba(0,0,0,.12);}
.honesty h4{margin:0 0 .7rem; color:var(--ink); font-size:1.08rem;}
.honesty ul{margin:0; padding-left:1.15rem;}
.honesty li{margin:.4rem 0;}

/* trust chips (arcade page) */
.trust-row{display:flex; gap:1rem; flex-wrap:wrap; padding:.5rem 0 1.5rem;}
.trust-chip{flex:1 1 280px; background:var(--cream-soft); border:1px solid rgba(91,127,212,.28); border-radius:12px; padding:1rem 1.2rem; font-size:.95rem; color:var(--ink);}
.trust-chip a{color:var(--blue); font-weight:700;}

/* footer */
.site-footer{background:#333; border-top:5px solid var(--blue); color:#eaeaea; margin-top:3rem;}
.footer-inner{max-width:1080px; margin:0 auto; padding:2.6rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;}
.footer-left{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;}
.footer-left img{width:130px;}
.footer-copy{font-size:.8rem; color:#bdbdbd; max-width:360px; line-height:1.5;}
.footer-right{display:flex; align-items:center; gap:1.1rem;}
.footer-right img{width:92px; height:92px;}
.footer-discord{color:#9db4ec; font-weight:700; text-decoration:none; line-height:1.35;}
.footer-discord:hover{text-decoration:underline;}

@media (max-width:780px){
  .row,.row.img-right{flex-direction:column; text-align:center; padding:2.2rem 0; gap:1.5rem;}
  .col-text{text-align:center;}
  .btns{justify-content:center;}
  .arcade-feature{text-align:center;}
  .footer-inner{flex-direction:column; text-align:center;}
  .footer-left,.footer-right{flex-direction:column; text-align:center;}
}