/* Master CSS (Casino Style 5: Deep Sea Blue Tech) - Do not modify */

/* CSS Variables */
:root {
  --color-primary: #0A4D68; /* deep blue */
  --color-secondary: #00D9FF; /* electric blue */
  --color-accent: #7FFFD4; /* aquamarine accent */
  --color-background: #001524; /* blue-black */
  --color-surface: rgba(255,255,255,0.06);
  --color-border: rgba(255,255,255,0.12);
  --color-text: #EAF2F8;
  --font-primary: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-secondary: 'Exo 2', 'Roboto', Arial, sans-serif;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-sm: 0 6px 20px rgba(0, 217, 255, 0.25);
}

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-primary);
  color: var(--color-text);
  background: radial-gradient(1200px 800px at 20% 0%, rgba(0,217,255,0.08), transparent 60%),
              radial-gradient(900px 600px at 80% 20%, rgba(10,77,104,0.25), transparent 60%),
              var(--color-background);
  line-height: 1.65;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-secondary); text-decoration: none; }
a:hover { color: #7AE8FF; }

/* Typography */
h1 { font-size: 2.4rem; font-family: var(--font-secondary); letter-spacing: 0.2px; }
h2 { font-size: 1.8rem; margin-bottom: var(--spacing-sm); }
h3 { font-size: 1.25rem; margin-bottom: var(--spacing-xs); }
p  { margin-bottom: 0.9rem; }

/* Utility */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius: var(--radius-md); border:1px solid transparent; cursor:pointer; font-weight:600; }
.btn-primary { background: linear-gradient(135deg, var(--color-secondary), #39E2FF); color:#001524; box-shadow: var(--shadow-sm); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary { background: rgba(255,255,255,0.06); color:#EAF2F8; border-color: var(--color-border); }

/* Header */
.site-header { position: sticky; top:0; z-index: 100; backdrop-filter: blur(12px); background: rgba(0,21,36,0.65); border-bottom:1px solid var(--color-border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap: var(--spacing-md); padding: .6rem 0; }
.main-nav > ul { list-style:none; display:flex; align-items:center; gap:.8rem; flex-wrap: wrap; }
.main-nav li { position: relative; }
.main-nav a { padding:.45rem .6rem; border-radius: var(--radius-sm); }
.main-nav a:hover { background: rgba(0,217,255,0.12); }
/* dropdown */
.main-nav .has-submenu > a::after { content:"▾"; font-size:.75em; margin-left:.3rem; opacity:.8; }
.main-nav .submenu { display:none; position:absolute; top:100%; left:0; min-width:220px; padding:.4rem 0; background: rgba(0,21,36,0.98); border:1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.main-nav .submenu li { display:block; }
.main-nav .submenu a { display:block; padding:.5rem .8rem; white-space:nowrap; }
.main-nav .has-submenu:hover > .submenu { display:block; }
.header-ctas { display:flex; align-items:center; gap:.6rem; }
.menu-toggle { display:none; background:none; border:1px solid var(--color-border); color:var(--color-text); padding:.4rem .6rem; border-radius: var(--radius-sm); }

/* Footer */
.site-footer { background: #041421; border-top: 1px solid var(--color-border); margin-top: var(--spacing-xl); padding: var(--spacing-xl) 0 var(--spacing-lg); }
.footer-grid { display:grid; grid-template-columns: 2.2fr 1.4fr 1.2fr 1.2fr; gap: var(--spacing-lg); }
.footer-links ul, .payment-icons { list-style:none; }
.payment-icons { display:flex; gap: .8rem; align-items:center; flex-wrap: wrap; }
.footer-bottom { border-top:1px solid var(--color-border); margin-top: var(--spacing-lg); padding-top: var(--spacing-sm); text-align:center; color:#C9D6E2; font-size:.92rem; }
.affiliate-note { font-size:.9rem; color:#C9D6E2; }
.rg-icons { display:flex; gap:.6rem; margin-top:.5rem; }

/* Hero */
.hero-section { background-size: cover; background-position: center; position: relative; }
.hero-section::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,21,36,.55), rgba(0,21,36,.85)); }
.hero-section .container { position:relative; z-index:1; padding: calc(var(--spacing-xl) + 1rem) 0 var(--spacing-xl); }
.hero-section h1 { color:#EFFFFF; text-shadow: 0 1px 0 #012, 0 10px 30px rgba(0,217,255,.25); }
.hero-intro { max-width: 820px; margin-top:.8rem; color:#DDEAF2; }

/* Content Blocks */
.content-block { padding: var(--spacing-xl) 0; border-bottom:1px solid var(--color-border); }
.content-block .container { display:grid; grid-template-columns: 1.2fr 1fr; gap: var(--spacing-lg); align-items:center; }
.content-block.horizontal .block-text { order:1; }
.content-block.horizontal .block-image { order:2; }
.content-block.vertical .container { grid-template-columns: 1fr; text-align:center; }
.block-text { font-size: 1rem; }
.block-image picture { display:block; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--color-border); box-shadow: 0 10px 40px rgba(0,0,0,.25); }

/* Content Grid */
.content-grid-section { padding: var(--spacing-xl) 0; }
.content-grid { display:grid; gap: var(--spacing-lg); }
.content-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.content-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-item { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.grid-item h3 { margin-top:.5rem; }

/* Buttons & Badges */
.badge { display:inline-block; padding:.2rem .5rem; border-radius:999px; background: rgba(0,217,255,.14); border:1px solid rgba(0,217,255,.35); color:#BAF3FF; font-size:.8rem; }

/* Responsive */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .content-block .container { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .main-nav { display:none; }
  .menu-toggle { display:inline-flex; }
  .footer-grid { grid-template-columns: 1fr; }
  .content-grid.cols-3 { grid-template-columns: 1fr; }
  .content-grid.cols-2 { grid-template-columns: 1fr; }
}