:root{
  --bg:#EAF3EE;
  --card:#F9FBFA;
  --ink:#0F172A;
  --muted:#5B6472;
  --pill:#0F172A;
  --accent1:#FF8A00;
  --accent2:#FFA3A3;
  --accent3:#FDBA74;
  --radius:20px;
  --shadow:0 18px 60px rgba(17,24,39,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--ink); line-height:1.55;}
a{color:var(--ink); text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1180px; margin:0 auto; padding:0 20px}
.header{position:sticky; top:0; z-index:50; background:rgba(234,243,238,.75); backdrop-filter:blur(8px); border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex; align-items:center; gap:20px; padding:14px 0}
.nav .logo{display:flex; align-items:center; gap:10px; font-weight:800}
.nav .spacer{flex:1}
.btn{background:var(--pill); color:#fff; border:none; padding:12px 18px; border-radius:999px; box-shadow:var(--shadow); cursor:pointer; font-weight:700}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn.gradient{background: linear-gradient(135deg, var(--accent1), var(--accent2));}
.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; padding:48px 0 24px; align-items:center}
.hero h1{font-size:48px; line-height:1.05; margin:0 0 14px}
.hero p{color:var(--muted); margin:0 0 18px}
.pills{display:flex; gap:12px; flex-wrap:wrap}
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:24px 0 8px}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.card h3{margin:0 0 10px; font-size:16px; color:var(--muted); font-weight:800; letter-spacing:.02em}
.card .value{font-size:20px; font-weight:900}
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 30px}
.tab{background:#fff; border-radius:999px; padding:10px 14px; border:1px solid rgba(0,0,0,.06)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.section{padding:28px 0}
.section h2{font-size:28px; margin:0 0 12px}
.list{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.footer{margin-top:36px; padding:36px 0 60px; border-top:1px solid rgba(0,0,0,.08)}
.footer .cols{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.footer small{color:var(--muted)}
.badge{display:inline-block; padding:8px 10px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.06)}

/* Age gate modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center}
.modal .panel{background:#fff; border-radius:16px; width:min(520px, 92vw); padding:24px; text-align:center; box-shadow:var(--shadow)}
.modal .panel h2{margin:0 0 10px}
.modal .panel p{color:var(--muted)}
.modal.show{display:flex}

/* Chart */
.chart{width:100%; height:220px; background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:12px}

/* responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr;}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .list, .grid-3{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
  .hero h1{font-size:36px}
}

/* All Pages hub */
.links-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.links-grid .btn{display:block; text-align:center}
@media (max-width:980px){ .links-grid{grid-template-columns:1fr} }
.header .nav a.active{font-weight:800; text-decoration:underline}

/* === Improved Nav === */
.header-inner{display:flex;align-items:center;gap:14px}
.logo{font-weight:800;display:flex;align-items:center;gap:6px}
.nav{display:flex;gap:14px;align-items:center}
.nav-group{position:relative}
.nav-group>summary{list-style:none;cursor:pointer;padding:8px 10px;border-radius:10px}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group .dropdown{position:absolute;top:110%;left:0;display:none;min-width:220px;padding:10px;background:rgba(255,255,255,.6);backdrop-filter:blur(10px);border:1px solid rgba(15,23,42,.08);border-radius:14px;box-shadow:0 10px 30px rgba(15,23,42,.15);z-index:30}
.nav-group[open] .dropdown{display:block}
.nav-group .dropdown a{display:block;padding:8px 10px;border-radius:10px}
.nav-group .dropdown a:hover{background:rgba(15,23,42,.06)}
.menu-toggle{display:none;border:1px solid rgba(15,23,42,.08);background:#fff;border-radius:12px;padding:8px 10px}
@media (max-width: 980px){
  .menu-toggle{display:block}
  .nav{position:fixed;inset:0 0 0 40%;background:rgba(255,255,255,.72);backdrop-filter:blur(16px);transform:translateX(100%);transition:transform .25s ease;flex-direction:column;align-items:stretch;padding:20px}
  .nav.open{transform:translateX(0)}
  .nav-group .dropdown{position:static;display:block;background:transparent;border:none;box-shadow:none;padding:0}
  .nav-group>summary{padding:12px 0;font-size:18px}
}
.footer-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media (max-width:980px){.footer-grid{grid-template-columns:repeat(2,1fr)}}


/* === Glassy site-wide header/footer refresh === */
:root{
  --mint:#EAF3EE;
  --ink:#0F172A;
  --glass:rgba(255,255,255,.65);
  --border:rgba(15,23,42,.08);
  --grad-from:#FF8A00;
  --grad-to:#FFA3A3;
  --radius:20px;
}

body{ background:var(--mint); }

.glass{
  background:var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
}

.header{
  position: sticky; top: 12px; z-index: 50;
}
.header-inner{
  display:flex; align-items:center; gap:14px;
  padding:10px 14px;
}
.header .logo{
  display:flex; gap:8px; align-items:center; font-weight:800; letter-spacing:.2px;
}
.header .logo span{ color:var(--ink); }
.header .logo .dot{
  width:14px; height:14px; border-radius:999px;
  background: linear-gradient(90deg,var(--grad-from),var(--grad-to));
  box-shadow:0 4px 10px rgba(255,138,0,.35);
}

.header .nav{ display:flex; gap:10px; margin-left:auto; align-items:center; flex-wrap:wrap; }

.nav-menu {
  display: flex;
  gap: 10px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.6);
  color: var(--ink);
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background: rgba(255,255,255,.8);
  transform: translateY(-1px);
}

.header .cta{
  background:linear-gradient(90deg,var(--grad-from),var(--grad-to));
  color:#111827; border:none; border-radius:999px; padding:10px 16px; font-weight:700;
  box-shadow:0 10px 24px rgba(255,138,0,.25);
}

.menu-toggle{
  display:none; border:1px solid var(--border); background:#fff; border-radius:12px; padding:8px 10px;
}
@media (max-width: 980px){
  .menu-toggle{ display:block; }
  .header .nav{
    position: fixed; inset: 0 0 0 32%;
    transform: translateX(100%); transition: transform .25s ease;
    background: rgba(255,255,255,.72); backdrop-filter: blur(18px);
    flex-direction: column; align-items:stretch; padding:20px; gap:14px;
  }
  .header .nav.open{ transform: translateX(0); }
  .header .nav summary{ font-size:18px; padding:12px 14px; }
  .header .dropdown{ position: static; display:block; background: transparent; border:none; box-shadow:none; padding:0; opacity: 1; visibility: visible; transform: none; }
}

.footer{
  margin: 24px 0 16px;
  padding: 16px;
}
.footer .footer-wrap{
  display:grid; gap:16px; grid-template-columns: repeat(6,1fr);
}
.footer h3{
  margin:0 0 6px; font-size:14px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--grad-from),var(--grad-to));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer a{ color:var(--ink); }
.footer .rg{
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);
  font-size:12px;
}
.footer .legal{ font-size:12px; opacity:.85; margin-top:8px; }

@media (max-width: 1200px){ .footer .footer-wrap{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px){ .footer .footer-wrap{ grid-template-columns: 1fr 1fr; } }


/* Ensure hero images scale correctly inside cards */
.hero picture, .hero img{display:block; max-width:100%;}
.hero img{width:100%; height:auto; border-radius: inherit;}


/* === Sleek header/footer refresh (mint + glass + orange→pink) === */
:root{
  --mint:#EAF3EE; --ink:#0F172A; --glass:rgba(255,255,255,.58); --border:rgba(15,23,42,.08);
  --grad-from:#FF8A00; --grad-to:#FFA3A3; --radius:20px;
}
body{ background:var(--mint); }
.glass{ background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 28px rgba(15,23,42,.12); }

.app-header{ position:sticky; top:12px; z-index:60; }
.app-header .header-row{ display:flex; align-items:center; gap:14px; padding:10px 14px; }
.logo{ display:flex; gap:10px; align-items:center; font-weight:900; letter-spacing:.2px; }
.logo .dot{ width:14px; height:14px; border-radius:50%;
  background:linear-gradient(90deg,var(--grad-from),var(--grad-to)); box-shadow:0 4px 10px rgba(255,138,0,.35); }
.logo span{ color:var(--ink); }

.nav-pills{ display:flex; gap:8px; align-items:center; margin-left:auto; }
.pill{ position:relative; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.62); cursor:pointer; }
.pill:hover{ background:rgba(255,255,255,.82); }
.pill > .label{ position:relative; }
.pill > .label:after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--grad-from),var(--grad-to)); opacity:0; transform:translateY(4px); transition:.2s; }
.pill:hover > .label:after{ opacity:1; transform:translateY(0); }

.mega{ position:absolute; top:115%; left:0; display:none; min-width:520px; padding:14px;
  background:var(--glass); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 14px 36px rgba(15,23,42,.16); }
.pill:hover .mega{ display:block; }
.mega .col{ min-width:200px; }
.mega .grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
.mega h4{ margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--grad-from),var(--grad-to));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.mega a{ display:block; padding:6px 8px; border-radius:10px; }
.mega a:hover{ background:rgba(15,23,42,.06); }

.btn.cta{ background:linear-gradient(90deg,var(--grad-from),var(--grad-to)); color:#111827; border:none;
  border-radius:999px; padding:10px 16px; font-weight:800; box-shadow:0 12px 28px rgba(255,138,0,.25); }

/* Mobile */
.menu-toggle{ display:none; border:1px solid var(--border); background:#fff; border-radius:12px; padding:8px 10px; }
@media (max-width: 980px){
  .menu-toggle{ display:block; }
  .nav-pills{ position:fixed; inset:0 0 0 30%; transform:translateX(100%); transition:transform .25s ease;
    background:rgba(255,255,255,.86); backdrop-filter:blur(20px); flex-direction:column; align-items:stretch; padding:20px; gap:12px; }
  .nav-pills.open{ transform:translateX(0); }
  .pill{ padding:12px 14px; }
  .pill .mega{ position:static; display:block; background:transparent; box-shadow:none; border:none; padding:6px 0; }
  .mega .grid{ grid-template-columns:1fr; gap:8px; }
}

/* Footer */
.app-footer{ margin:26px 0 16px; }
.app-footer .wrap{ padding:16px; }
.foot-grid{ display:grid; gap:18px; grid-template-columns:repeat(4,1fr); }
.foot h3{ margin:0 0 6px; font-size:14px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--grad-from),var(--grad-to)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.foot a{ color:var(--ink); }
.foot .rg{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--border); font-size:12px; }
.foot .legal{ font-size:12px; opacity:.85; margin-top:8px; }
@media (max-width: 1100px){ .foot-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 700px){ .foot-grid{ grid-template-columns:1fr; } }



/* === Usable header menu (glass, gradient, big tap targets) === */
.site-header{ position:sticky; top:12px; z-index:70; }
.header-bar{ display:flex; align-items:center; gap:12px; padding:10px 14px; }
.logo{ display:flex; gap:10px; align-items:center; font-weight:900; letter-spacing:.2px; }
.logo .dot{ width:14px; height:14px; border-radius:50%; background:linear-gradient(90deg,var(--grad-from),var(--grad-to)); box-shadow:0 4px 10px rgba(255,138,0,.35); }
.primary-nav{ margin-left:auto; }
.nav-root{ display:flex; gap:8px; align-items:center; }
.nav-item{ position:relative; }
.nav-link{ display:inline-flex; align-items:center; gap:6px; padding:10px 14px; min-height:44px;
  border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.62); }
.nav-link:hover{ background:rgba(255,255,255,.82); }
.nav-caret{ width:28px; height:28px; border-radius:999px; border:1px solid var(--border); background:linear-gradient(90deg,var(--grad-from),var(--grad-to));
  box-shadow:0 6px 18px rgba(255,138,0,.25); margin-left:6px; position:relative; }
.nav-caret::before{ content:""; position:absolute; inset:0; margin:auto; width:8px; height:8px; border-bottom:2px solid #111827; border-right:2px solid #111827; transform:rotate(45deg); }
.nav-panel{ display:none; position:absolute; top:110%; left:0; min-width:260px; padding:12px; border-radius:16px; background:var(--glass);
  border:1px solid var(--border); box-shadow:0 14px 36px rgba(15,23,42,.16); }
.nav-panel a{ display:block; padding:8px 10px; border-radius:10px; }
.nav-panel a:hover{ background:rgba(15,23,42,.06); }
.nav-item.open > .nav-panel{ display:block; }

.site-search input{ width:200px; padding:10px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; }
.btn.cta{ background:linear-gradient(90deg,var(--grad-from),var(--grad-to)); color:#111827; border:none; border-radius:999px; padding:10px 16px; font-weight:800; box-shadow:0 12px 28px rgba(255,138,0,.25); }

.menu-open{ display:none; border:1px solid var(--border); background:#fff; border-radius:12px; padding:8px 10px; }

@media (max-width: 1100px){
  .site-search{ display:none; }
}

@media (max-width: 980px){
  .primary-nav{ display:none; }
  .menu-open{ display:block; margin-left:auto; }
}

/* Drawer */
.nav-drawer{ position:fixed; inset:0; pointer-events:none; }
.nav-drawer.active{ pointer-events:auto; }
.drawer-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.25); opacity:0; transition:.2s; }
.nav-drawer.active .drawer-backdrop{ opacity:1; }
.drawer-inner{ position:absolute; top:0; right:0; width:min(420px,88vw); height:100%; padding:18px; transform:translateX(100%); transition:transform .25s ease; }
.nav-drawer.active .drawer-inner{ transform:translateX(0); }
.menu-close{ border:1px solid var(--border); background:#fff; border-radius:12px; padding:8px 10px; }
.drawer-groups{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.drawer-group>summary{ list-style:none; cursor:pointer; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.78); }
.drawer-links a{ display:block; padding:8px 10px; border-radius:10px; }
.drawer-links a:hover{ background:rgba(15,23,42,.06); }
.drawer-search input{ width:100%; margin-top:14px; padding:12px; border-radius:999px; border:1px solid var(--border); background:#fff; }
.drawer-cta{ display:block; text-align:center; margin-top:12px; }



/* === NEW HEADER & FOOTER STYLES === */
:root{
  --primary: #FF6B35;
  --secondary: #F7931E;
  --accent: #667eea;
  --accent-dark: #764ba2;
  --text: #0F172A;
  --text-light: #64748B;
  --bg: #F8FAFC;
  --bg-card: rgba(255,255,255,0.9);
  --border: rgba(15,23,42,0.1);
  --shadow: 0 4px 20px rgba(15,23,42,0.1);
  --shadow-hover: 0 8px 30px rgba(15,23,42,0.15);
  --radius: 16px;
  --radius-lg: 24px;
}

body{ 
  background: var(--bg); 
  color: var(--text); 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

.container{ 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 20px; 
}

/* === HEADER STYLES === */
.header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.header-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 24px;
}

/* Logo */
.logo{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.3s ease;
}

.logo:hover{
  transform: scale(1.05);
}

.logo-icon{
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 15px rgba(255,107,53,0.3);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.logo-text{
  display: flex;
  flex-direction: column;
}

.logo-title{
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.logo-subtitle{
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
  line-height: 1;
}

/* Navigation */
.nav{
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.nav-toggle:hover{
  background: var(--border);
}

.nav-toggle span{
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.nav-menu{
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
}

.nav-item{
  position: relative;
}

.nav-link{
  display: flex;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  border-radius: var(--radius);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.nav-link::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: var(--radius);
}

.nav-link:hover::before{
  opacity: 0.1;
}

.nav-link:hover{
  background: var(--bg-card);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Dropdown */
.nav-item .dropdown{
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 200px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-hover) !important;
  padding: 12px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(20px) !important;
  z-index: 1000 !important;
  display: block !important;
}

.nav-item:hover .dropdown{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.dropdown a{
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.dropdown a:hover{
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  transform: translateX(4px);
}

/* CTA Button */
.cta-button{
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255,107,53,0.3);
  position: relative;
  overflow: hidden;
}

.cta-button::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta-button:hover::before{
  opacity: 1;
}

.cta-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,107,53,0.4);
}

.cta-icon{
  font-size: 16px;
  position: relative;
  z-index: 1;
}

.cta-text{
  position: relative;
  z-index: 1;
}

/* Mobile Navigation */
@media (max-width: 980px){
  .nav-toggle{
    display: flex;
  }
  
  .nav-menu{
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 80px 24px 24px;
    gap: 8px;
    transition: right 0.3s ease;
    box-shadow: var(--shadow-hover);
  }
  
  .nav-menu.active{
    right: 0;
  }
  
  .nav-link{
    width: 100%;
    justify-content: flex-start;
  }
  
  .dropdown{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 8px 0 0 16px;
  }
  
  .cta-button{
    display: none;
  }
}

/* === FOOTER STYLES === */
.footer{
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  margin-top: 60px;
  position: relative;
}

.footer::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
}

.footer-content{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  padding: 48px 0 32px;
}

.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-logo{
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo-icon{
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.footer-logo-text{
  display: flex;
  flex-direction: column;
}

.footer-logo-title{
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-logo-subtitle{
  font-size: 11px;
  color: var(--text-light);
  font-weight: 500;
}

.footer-description{
  color: var(--text-light);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.footer-social{
  display: flex;
  gap: 12px;
}

.social-link{
  width: 36px;
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.3s ease;
}

.social-link:hover{
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.footer-links{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.footer-column{
  flex: 1;
}

.footer-column h3{
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-column ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li{
  margin-bottom: 8px;
}

.footer-column a{
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.footer-column a:hover{
  color: var(--primary);
  transform: translateX(4px);
}

/* DROPDOWN STYLES - WORKING VERSION */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  backdrop-filter: blur(20px);
  z-index: 1000;
  display: block;
}

.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 14px;
}

.dropdown a:hover {
  background: linear-gradient(135deg, var(--grad-from), var(--grad-to));
  color: white;
  transform: translateX(4px);
}

.footer-bottom{
  border-top: 1px solid var(--border);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.responsible-gambling{
  text-align: center;
}

.responsible-gambling strong{
  display: block;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 14px;
}

.rg-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.rg-links a{
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.rg-links a:hover{
  color: var(--secondary);
  text-decoration: underline;
}

.footer-legal{
  text-align: center;
}

.footer-legal p{
  margin: 0;
  color: var(--text-light);
  font-size: 12px;
}

/* Mobile Footer */
@media (max-width: 980px){
  .footer-content{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .footer-links{
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  .rg-links{
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 600px){
  .footer-links{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* === INTERACTIVE CALCULATOR STYLES === */
.calculator-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin:32px 0;
}

.calculator-card{
  background:var(--glass);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  transition:all 0.3s ease;
}

.calculator-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}

.calculator-card h3{
  margin:0 0 20px;
  font-size:18px;
  font-weight:800;
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-align:center;
}

.input-group{
  margin-bottom:16px;
}

.input-group label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  color:var(--ink);
  font-size:14px;
}

.input-group input,
.input-group select{
  width:100%;
  padding:12px 16px;
  border:2px solid var(--border);
  border-radius:12px;
  background:var(--glass-strong);
  color:var(--ink);
  font-size:16px;
  transition:all 0.3s ease;
  box-sizing:border-box;
}

.input-group input:focus,
.input-group select:focus{
  outline:none;
  border-color:var(--grad-from);
  box-shadow:0 0 0 3px rgba(255,107,53,.1);
  transform:scale(1.02);
}

.results{
  margin-top:20px;
  padding:16px;
  background:rgba(255,255,255,.8);
  border-radius:12px;
  border:1px solid var(--border);
}

.results.hidden{
  display:none;
}

.results h4{
  margin:0 0 12px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}

.result-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid rgba(15,23,42,.1);
}

.result-item:last-child{
  border-bottom:none;
}

.result-item .label{
  font-weight:500;
  color:var(--ink);
}

.result-item .value{
  font-weight:700;
  color:var(--grad-from);
  font-size:16px;
}

/* Mobile Calculator */
@media (max-width: 980px){
  .calculator-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .calculator-card{
    padding:20px;
  }
}

/* === STRATEGY TABS & CONTENT === */
.strategy-tabs{
  display:flex;
  gap:8px;
  margin-bottom:32px;
  flex-wrap:wrap;
}

.tab-btn{
  padding:12px 20px;
  border:2px solid var(--border);
  background:var(--glass-strong);
  border-radius:16px;
  cursor:pointer;
  font-weight:600;
  transition:all 0.3s ease;
  font-size:14px;
}

.tab-btn:hover{
  background:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(15,23,42,.15);
}

.tab-btn.active{
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to));
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 25px rgba(255,107,53,.3);
}

.tab-content{
  display:none;
}

.tab-content.active{
  display:block;
  animation:fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}

/* === STRATEGY CARDS === */
.strategy-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
  gap:24px;
  margin:24px 0;
}

.strategy-card{
  background:var(--glass);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  transition:all 0.3s ease;
}

.strategy-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}

.strategy-card h3{
  margin:0 0 16px;
  font-size:18px;
  font-weight:800;
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-align:center;
}

.strategy-details h4{
  margin:12px 0 4px;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}

.strategy-details p{
  margin:0 0 8px;
  font-weight:600;
  color:var(--grad-from);
}

.strategy-details ul{
  margin:8px 0;
  padding-left:20px;
}

.strategy-details li{
  margin:4px 0;
  font-size:14px;
  line-height:1.4;
}

.strategy-pros-cons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.pros, .cons{
  padding:12px;
  border-radius:12px;
}

.pros{
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.2);
}

.cons{
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.2);
}

.pros h5, .cons h5{
  margin:0 0 8px;
  font-size:14px;
  font-weight:700;
}

.pros h5{
  color:#22c55e;
}

.cons h5{
  color:#ef4444;
}

.pros ul, .cons ul{
  margin:0;
  padding-left:16px;
}

.pros li, .cons li{
  font-size:13px;
  line-height:1.3;
  margin:2px 0;
}

/* === STRATEGY SELECTOR === */
.strategy-selector{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
  margin-bottom:24px;
}

.strategy-result{
  margin-top:24px;
  padding:20px;
  background:rgba(255,255,255,.9);
  border-radius:16px;
  border:1px solid var(--border);
}

.strategy-result h3{
  margin:0 0 16px;
  font-size:20px;
  font-weight:800;
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Mobile Strategy */
@media (max-width: 980px){
  .strategy-tabs{
    flex-direction:column;
  }
  
  .strategy-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .strategy-pros-cons{
    grid-template-columns:1fr;
    gap:12px;
  }
  
  .strategy-selector{
    grid-template-columns:1fr;
  }
}

/* === STRATEGY RESULT STYLES === */
.strategy-result-content{
  display:grid;
  gap:20px;
}

.strategy-header{
  text-align:center;
  padding:16px;
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to));
  color:#fff;
  border-radius:16px;
}

.strategy-header h4{
  margin:0 0 8px;
  font-size:24px;
  font-weight:800;
}

.strategy-header p{
  margin:0;
  opacity:0.9;
  font-size:14px;
}

.strategy-details{
  display:grid;
  gap:12px;
}

.detail-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:rgba(255,255,255,.8);
  border-radius:12px;
  border:1px solid var(--border);
}

.detail-item .label{
  font-weight:600;
  color:var(--ink);
}

.detail-item .value{
  font-weight:700;
  color:var(--grad-from);
  font-size:16px;
}

.strategy-rules{
  padding:16px;
  background:rgba(255,255,255,.9);
  border-radius:12px;
  border:1px solid var(--border);
}

.strategy-rules h5{
  margin:0 0 12px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}

.strategy-rules ul{
  margin:0;
  padding-left:20px;
}

.strategy-rules li{
  margin:6px 0;
  font-size:14px;
  line-height:1.4;
  color:var(--ink);
}

.strategy-warning{
  padding:12px 16px;
  background:rgba(255,193,7,.1);
  border:1px solid rgba(255,193,7,.3);
  border-radius:12px;
  text-align:center;
}

.strategy-warning p{
  margin:0;
  font-size:13px;
  color:#856404;
  font-weight:500;
}

/* === REVIEWS STYLES === */
.review-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:24px 0;
}

.stat-card{
  text-align:center;
  padding:24px;
}

.stat-card h3{
  margin:0 0 16px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}

.rating-display{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.stars{
  font-size:24px;
  color:#fbbf24;
}

.rating-number{
  font-size:32px;
  font-weight:900;
  color:var(--grad-from);
}

.rating-count{
  font-size:14px;
  color:var(--muted);
}

.strategy-info, .session-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.strategy-name, .session-duration{
  font-size:18px;
  font-weight:700;
  color:var(--grad-from);
}

.strategy-percentage, .session-budget{
  font-size:14px;
  color:var(--muted);
}

/* Review Filters */
.review-filters{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.review-filters h3{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:var(--ink);
}

.filter-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.filter-btn{
  padding:8px 16px;
  border:2px solid var(--border);
  background:var(--glass-strong);
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  transition:all 0.3s ease;
  font-size:14px;
}

.filter-btn:hover{
  background:#fff;
  transform:translateY(-2px);
}

.filter-btn.active{
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to));
  color:#fff;
  border-color:transparent;
}

.sort-options{
  display:flex;
  align-items:center;
  gap:12px;
}

.sort-options label{
  font-weight:600;
  color:var(--ink);
}

.sort-options select{
  padding:8px 12px;
  border:2px solid var(--border);
  background:var(--glass-strong);
  border-radius:8px;
  font-weight:500;
}

/* Reviews Grid */
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
  gap:24px;
  margin:24px 0;
}

.review-card{
  padding:20px;
  transition:all 0.3s ease;
}

.review-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}

.review-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:16px;
}

.reviewer-info{
  display:flex;
  align-items:center;
  gap:12px;
}

.reviewer-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

.reviewer-details{
  display:flex;
  flex-direction:column;
}

.reviewer-name{
  font-weight:700;
  color:var(--ink);
  font-size:14px;
}

.review-date{
  font-size:12px;
  color:var(--muted);
}

.review-rating{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

.review-rating .stars{
  font-size:16px;
}

.rating-text{
  font-size:12px;
  font-weight:600;
  color:var(--grad-from);
}

.review-content h4{
  margin:0 0 12px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}

.review-content p{
  margin:0 0 16px;
  line-height:1.5;
  color:var(--ink);
  font-size:14px;
}

.review-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.tag{
  padding:4px 8px;
  background:rgba(255,107,53,.1);
  color:var(--grad-from);
  border-radius:6px;
  font-size:12px;
  font-weight:600;
}

.review-stats{
  display:flex;
  gap:16px;
  font-size:12px;
  color:var(--muted);
}

.helpful-count, .reply-count{
  display:flex;
  align-items:center;
  gap:4px;
}

/* Review Form */
.review-form{
  display:grid;
  gap:16px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.review-form textarea{
  width:100%;
  padding:12px 16px;
  border:2px solid var(--border);
  border-radius:12px;
  background:var(--glass-strong);
  color:var(--ink);
  font-size:14px;
  resize:vertical;
  min-height:100px;
  box-sizing:border-box;
  font-family:inherit;
}

.review-form textarea:focus{
  outline:none;
  border-color:var(--grad-from);
  box-shadow:0 0 0 3px rgba(255,107,53,.1);
}

/* Mobile Reviews */
@media (max-width: 980px){
  .review-stats{
    grid-template-columns:1fr;
    gap:16px;
  }
  
  .reviews-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .filter-buttons{
    flex-direction:column;
  }
  
  .form-row{
    grid-template-columns:1fr;
  }
  
  .review-header{
    flex-direction:column;
    gap:12px;
  }
  
  .review-rating{
    align-items:flex-start;
  }
}

/* === REVIEWS PREVIEW STYLES === */
.reviews-preview{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
  gap:20px;
  margin:20px 0;
}

.review-preview-card{
  padding:16px;
  transition:all 0.3s ease;
}

.review-preview-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}

.review-preview-card .review-content h4{
  font-size:14px;
  margin:0 0 8px;
}

.review-preview-card .review-content p{
  font-size:13px;
  line-height:1.4;
  margin:0 0 12px;
}

.review-preview-card .review-tags{
  margin-bottom:0;
}

.review-preview-card .tag{
  font-size:11px;
  padding:3px 6px;
}

@media (max-width: 980px){
  .reviews-preview{
    grid-template-columns:1fr;
    gap:16px;
  }
}