/* 5ubet - CUBE CSS (Composition, Utility, Block, Exception) */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Roboto',sans-serif;line-height:1.6;color:#1a1a1a}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* Composition Layer */
.wrapper{max-width:1200px;margin:0 auto;padding:0 20px}
.stack>*+*{margin-top:1.5rem}
.cluster{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.sidebar{display:grid;gap:2rem}
@media(min-width:768px){.sidebar{grid-template-columns:250px 1fr}}

/* Utility Layer */
.flow>*+*{margin-top:var(--flow-space,1em)}
.region{padding-top:clamp(2rem,8vw,5rem);padding-bottom:clamp(2rem,8vw,5rem)}
.text-center{text-align:center}

/* Block Layer */
.site-head{background:linear-gradient(135deg,#00D9FF,#7B2FFF);color:#fff;padding:1.25rem 0;position:sticky;top:0;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.site-head__inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.site-head__brand{display:flex;align-items:center;gap:0.75rem;font-size:1.75rem;font-weight:900}
.site-head__brand img{height:50px}
.site-head__nav{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
.site-head__nav a{color:#fff;font-weight:600;transition:opacity 0.3s}
.site-head__nav a:hover{opacity:0.8}

.cta-button{background:linear-gradient(135deg,#00D9FF,#7B2FFF);color:#fff;padding:0.75rem 2rem;border-radius:50px;font-weight:700;transition:transform 0.3s,box-shadow 0.3s;display:inline-block;border:none;cursor:pointer}
.cta-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(123,47,255,0.4)}

.hero{background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('/images/hero-background.jpg') center/cover;color:#fff;padding:6rem 0;text-align:center}
.hero__title{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;margin-bottom:1.25rem;background:linear-gradient(135deg,#00D9FF,#7B2FFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:2px 2px 8px rgba(0,0,0,0.3)}
.hero__subtitle{font-size:clamp(1.125rem,2.5vw,1.5rem);margin-bottom:2rem}

.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;padding:3rem 0}
.game-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.1);transition:transform 0.3s,box-shadow 0.3s}
.game-card:hover{transform:translateY(-10px);box-shadow:0 12px 30px rgba(123,47,255,0.25)}
.game-card__image{width:100%;height:200px;object-fit:cover}
.game-card__body{padding:1.5rem}
.game-card__title{font-size:1.375rem;font-weight:700;background:linear-gradient(135deg,#00D9FF,#7B2FFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.75rem}
.game-card__text{color:#666;margin-bottom:1rem;line-height:1.7}

.faq-section{background:#f5f5f5;padding:4rem 0}
.faq-list{max-width:900px;margin:0 auto}
.faq-item{background:#fff;border-radius:12px;padding:1.5rem;margin-bottom:1rem;box-shadow:0 3px 10px rgba(0,0,0,0.08)}
.faq-item__q{font-size:1.125rem;font-weight:700;color:#7B2FFF;margin-bottom:0.75rem}
.faq-item__a{color:#555;line-height:1.8}

.review-section{padding:4rem 0}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.review-box{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 15px rgba(0,0,0,0.1);border-left:4px solid #7B2FFF}
.review-box__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.review-box__author{font-weight:700;color:#1a1a1a}
.review-box__rating{color:#FFD700;font-size:1.125rem}
.review-box__text{color:#666;line-height:1.7}

.site-foot{background:#1a1a1a;color:#fff;padding:4rem 0 1.5rem}
.site-foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.5rem;margin-bottom:2.5rem}
.site-foot__title{color:#00D9FF;font-size:1.125rem;font-weight:700;margin-bottom:1rem}
.site-foot__links{list-style:none}
.site-foot__links li{margin-bottom:0.5rem}
.site-foot__links a{color:#ccc;transition:color 0.3s}
.site-foot__links a:hover{color:#00D9FF}
.site-foot__bottom{text-align:center;padding-top:1.5rem;border-top:1px solid #333;color:#999}

/* Exception Layer */
.hero .cta-button{font-size:1.25rem;padding:1rem 3rem}
@media(max-width:768px){.site-head__nav{width:100%;justify-content:center}}