/* Base */
:root{
	--bg:#1b1b1b;
	--ink:#222;
	--ink-2:#6b6b6b;
	--card:#2b2b2b;
	--card-2:#3a3a3a;
	--accent:#F1C40F; 
	--radius:18px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
	margin:0;
	color:var(--ink);
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	background:#333; 
	isolation:isolate; 
  }
  .brand-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
  }
  .bg-layer {
	position: fixed;
	inset: 0;           
	z-index: -1;
	pointer-events: none;
  }
  
  .bg-layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;    
	object-position: center bottom; 
	display: block;
  }
  
  /* Top bar */
  .topbar{
	background:#333;
	border-bottom:4px solid var(--accent);
	position: sticky;   
	top: 0;
	z-index: 1000;
	padding-top: env(safe-area-inset-top);
	padding-top: constant(safe-area-inset-top); 
	box-sizing: border-box;
  }
  .topbar::before{
	content:"";
	position:absolute;
	left:0; right:0;
	top: calc(env(safe-area-inset-top) * -1);
	top: calc(constant(safe-area-inset-top) * -1); 
	height: env(safe-area-inset-top);
	height: constant(safe-area-inset-top);         
	background:#333;
	pointer-events:none;
	z-index:-1; 
  }
  .topbar-inner{
	max-width:1200px;
	margin:0 auto;
	padding:12px 16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
  }
  .brand{display:flex;align-items:center;gap:16px}
  .brand-logo{height:36px; width:auto}
  .powered{font-size:12px;color:#bdbdbd;letter-spacing:.08em}
  
  .btn-contact{
	background:var(--accent);
	color:#111;
	font-weight:500;
	font-size: 12px;
	text-decoration:none;
	padding:10px 18px;
	border-radius:999px;
	box-shadow:0 2px 0 #F1C40F inset;
	transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }
  .btn-contact:hover{transform:translateY(-1px); filter:brightness(1.05)}

  .powered {
	font-size: 12px;
	color: #bdbdbd;
	letter-spacing: .08em;
	text-decoration: none;
	transition: color 0.2s ease;
	cursor: pointer;
  }
  .powered:hover,
  .powered:focus {
	color: #c09f12; 
  }
  
  /* Container */
  .container{
	max-width:1200px;
	margin:0 auto;
	padding:24px 16px 40px;
	position:relative;
	z-index:1; 
  }
  
  /* Banner */
  .banner-box{
	height:320px;
	background:#3a3a3a;
	border-radius:28px;
	display:grid;
	place-items:center;
	color:#fff;
	font-size:56px;
	font-weight:800;
	
  }
  .banner{
	margin:16px 0 24px;
	margin-top: calc(4px - env(safe-area-inset-top));
}
  
  /* Filters row */
  .filters{
	margin:20px 0 10px;
	display:grid;
	grid-template-columns:1fr 460px;
	gap:16px;
  }
  @media (max-width:980px){
	.filters{grid-template-columns:1fr}
  }
  
  /* Tabs */
  .tabs{
	display:flex;
	gap:10px;
	background:#f2f2f2;
	border-radius:14px;
	padding:6px;
  }
  .tab{
	position:relative;
	flex:0 0 auto;
	background:#f2f2f2;
	border:none;
	border-radius:12px;
	padding:12px 18px;
	font-weight:700;
	color:#444;
	cursor:pointer;
	transition:background .2s ease;
  }
  .tab:hover{background:#e9e9e9}
  .tab.is-active{color:#111}
  .tab-underline{
	position:absolute;
	left:18px; right:18px; bottom:6px;
	height:6px; background:var(--accent);
	border-radius:6px; transform:scaleX(0);
	transform-origin:left; transition:transform .22s ease;
  }
  .tab.is-active .tab-underline, .tab:hover .tab-underline{transform:scaleX(1)}
  
  /* Search */
  .search{
	position:relative;
	display:flex;
	align-items:center;
	background:#333;
	border-radius:12px;
	padding:0 128px 0 44px;
	height:54px;
	outline:2px solid #333;
  }
  .search-icon{
	position:absolute; left:14px; width:22px; height:22px; opacity:.7
  }
  .search input{
	flex:1; height:100%; background:transparent; border:none; color:#eee;
	font-size:15px; outline:none;
  }
  .search-btn{
	position:absolute; right:6px; top:6px; bottom:6px;
	padding:0 16px; border:none; border-radius:10px; font-weight:700;
	background:#4a4a4a; color:#fff; cursor:pointer; transition:filter .15s, transform .15s;
  }
  .search-btn:hover{filter:brightness(1.1); transform:translateY(-1px)}
  
  /* Grid: 4 desktop, 3, then 2 @ ≤768, then 1 small */
  .grid{
	margin-top:18px;
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:24px;
  }
  @media (max-width:1024px){
	.grid{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width:768px){
	.grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:520px){
	.grid{grid-template-columns:1fr}
  }
  
  /* Card */
  .card{
	background:transparent;
	border-radius:12px;
	overflow:hidden;
	position:relative;
  }
  .card-media img{
	display:block; width:100%; height:auto; object-fit:contain;
	border-top-left-radius:18px; border-top-right-radius:18px;
  }
  .card-body{
	background:#2c2c2c; color:#fff; padding:18px 18px 16px;
	border-bottom-left-radius:18px; border-bottom-right-radius:18px;
	position:relative; box-shadow:0 3px 0 var(--accent);
  }
  .card-titleline{display:flex; align-items:center; gap:12px}
  .bullet{width:8px; height:30px; background:var(--accent); border-radius:6px}
  .title{margin:0; font-size:18px; line-height:1.1; font-weight:800}
  .subtitle{margin:8px 0 14px; font-size:14px; color:#ddd}
  .accent{color:var(--accent); font-weight:800}
  
  .metrics{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .metric{background:#444; border-radius:12px; padding:10px 14px; text-align:left}
  .metric-val{font-size:20px; font-weight:800; color:#fff}
  .metric-label{margin-top:4px; font-size:12px; color:#cfcfcf; opacity:.85}
  
  .divider{margin:16px 0 12px; border:0; height:1px; background:#5a5a5a}
  
  .card-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .cert{height:28px; width:auto;}
  .flags{display:flex; gap:10px}
  .flags img{width:24px; height:24px; border-radius:50%; display:block}
  
  /* CTA slide (yellow panel) */
  .card-cta{
	position:absolute; left:12px; right:12px; bottom:8px; height:52px;
	background:var(--accent); color:#111; font-weight:900; border-radius:16px;
	display:grid; place-items:center; text-decoration:none;
	transform:translateY(72px); transition:transform .28s ease;
	box-shadow:0 -3px 0 #F1C40F inset;
  }
  .card:hover .card-cta{transform:translateY(0)}
  .card:hover .card-bottom{opacity:0}
  
  /* Contact anchor space */
  .contact-spacer{height:80px}
  
  /* Footer */
  .site-footer{
	background:#2d2d2d; color:#e6e6e6; font-size:14px; line-height:1.4;
	position:relative; z-index:1;
  }
  .footer-inner{
	max-width:1200px; margin:0 auto; padding:18px 16px 26px;
	display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .footer-left{display:flex; align-items:center; gap:28px}
  .footer-logo{height:28px; width:auto; filter:brightness(0) invert(1); opacity:.95}
  .footer-right{white-space:nowrap; color:#d9d9d9}
  .brand-accent{color:#F1C40F; font-weight:800}
  
  @media (max-width:768px){
	.banner-box{height:240px; font-size:40px}
	.title{font-size:20px}
	.metric-val{font-size:18px}
	.cert{height:24px}
	.flags img{width:22px; height:22px}
	.footer-inner{flex-direction:column; align-items:flex-start; gap:12px}
	.footer-right{white-space:normal}
  }
  
  /* Focus */
  .tab:focus-visible, .search-btn:focus-visible, .btn-contact:focus-visible, .card-cta:focus-visible{
	outline:3px solid var(--accent); outline-offset:2px; border-radius:12px;
  }

  /* === Scoped styles for Open9 banner (only inside .banner) === */
.banner .action__body{
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	background: #f1c40f;
	border: 1px solid #2a2b31;
	padding: clamp(20px, 4vw, 48px);
	min-height: 340px;
  }
  .banner .action__body > h2{
	position: relative; z-index:10; margin:0 0 14px 0;
	font-weight:800; font-size:clamp(28px, 4vw, 44px); line-height:1.1;
  }
  .banner .flat-button.flex{ position:relative; z-index:10; display:flex; flex-wrap:wrap; gap:10px; }
  .banner .tf-button{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:0 18px; height:50px; border-radius:12px; text-decoration:none;
	border:1px solid #2a2b31; background:#1d1c19; color:#f2f2f2;
  }
  .banner .tf-button:hover{ border-color: var(--accent); box-shadow:0 6px 20px rgba(241,196,15,.25); }
  .banner .bg-home7{
	position:absolute; right:max(24px,4%); top:50%; transform:translateY(-50%) rotate(0deg);
	display:grid; grid-auto-flow:column; gap:14px; z-index:1; pointer-events:none;
  }
  .banner .bg-home7 .swiper-container{ width:120px; height:400px; }
  .banner .bg-home7 img{ display:block; width:100%; height:auto; border-radius:14px; border:1px solid #2a2b31; }
  .banner .action__body p {
	max-width: 480px;    
	margin: 0 0 16px 0;   
	color: #121212;     
	font-size: 16px;
	line-height: 1.5;
  }
  @media (max-width: 900px){
	.banner .bg-home7{ right:10px; transform:translateY(-50%) rotate(6deg); }
	.banner .bg-home7 .swiper-container{ width:110px; height:240px; }
  }
  @media (max-width: 768px){ .banner .bg-home7{ display:none; } }

  @media (max-width: 768px) {
	.banner .action__body {
	  min-height: 260px; 
	  padding: 16px;     
	}
	.banner .action__body p {
	font-size: 14px;
	}
	
	.tabs {
		gap: 6px; 
		flex-wrap: wrap; 
	  }
	  .tab {
		font-size: 12px;     
		padding: 10px 14px;  
	  }
	  .tab span {
		white-space: nowrap;  
	  }
	  .btn-contact {
		font-size: 14px;     
		padding: 8px 14px;    
		border-radius: 20px;  
	  }
	  .grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	  }
	  .card {
		padding: 0px;
	  }
	  .card-body {
		padding-left: 8px;
	}
	.card-titleline h3.title {
		font-size: 16px; 
		font-weight: 700;
	  }
	  .tab-underline {
		bottom: 2px; 
		height: 4px; 
	  }
  }
  @media (max-width: 414px) {
	.banner .action__body {
	  min-height: 260px; 
	  padding: 16px;     
	}
	.banner .action__body p {
	font-size: 13px;
	}
	.tabs {
		gap: 2px; 
		flex-wrap: wrap; 
	  }
	  .tab {
		font-size: 12px;     
		padding: 10px 14px;  
	  }
	  .tab span {
		white-space: nowrap;  
	  }
	  .btn-contact {
		font-size: 12px;     
		padding: 8px 14px;    
		border-radius: 20px;  
	  }
	  .card-titleline h3.title {
		font-size: 16px; 
		font-weight: 700;
	  }
	  .tab-underline {
		bottom: 2px; 
		height: 4px; 
	  }
	  .grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	  }
	  .card {
		padding: 0px;
	  }
	  .card-body {
		padding-left: 6px;
	}
	.metric {
		padding: 6px 10px;
		border-radius: 10px;
		min-height: 38px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	  }
	  .metric-val { font-size: 16px; line-height: 1.2; }
	  .metric-label { font-size: 11px; line-height: 1.2; }
	
	
	  .search {
		height: 44px;            
		padding: 0 100px 0 38px; 
	  }
}

  @media (max-width: 393px) {
	.banner .action__body {
	  min-height: 260px; 
	  padding: 16px;     
	}
	.banner .action__body p {
	font-size: 12px;
	}
	.metric {
		padding: 6px 10px;
		border-radius: 10px;
		min-height: 38px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	  }
	  .metric-val { font-size: 16px; line-height: 1.2; }
	  .metric-label { font-size: 11px; line-height: 1.2; }
	
	
	  .search {
		height: 44px;            
		padding: 0 100px 0 38px; 
	  }
	  .search input {
		font-size: 14px;         
	  }
	  .search-icon {
		width: 18px; height: 18px;
		left: 10px;
	  }
	
	.tabs {
		gap: 6px; 
		flex-wrap: wrap; 
	  }
	  .tab {
		font-size: 10px;     
		padding: 10px 14px;  
	  }
	  .tab span {
		white-space: nowrap;  
	  }
	  .btn-contact {
		font-size: 12px;     
		padding: 7px 18px;    
		border-radius: 15px;  
	  }
	  .grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	  }
	  .card {
		padding: 0px;
	  }
	  .card-body {
		padding-left: 8px;
	}
	.card-titleline h3.title {
		font-size: 14px; 
		font-weight: 700;
	  }
	  .tab-underline {
		bottom: 2px; 
		height: 3px; 
	  }
	  .btn-contact {
		background: var(--accent);
		color: #111;
		font-weight: 700;
		text-decoration: none;
		padding: 10px 18px;
		border-radius: 999px;
		box-shadow: 0 2px 0 #c09f12 inset;
		transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
	  
		
		display: inline-flex;
		align-items: center;      
		justify-content: center;
		white-space: nowrap;      
		line-height: 1;           
	  }
  }

.banner .bg-home7 { 
	gap: 12px;                         
	transform: translateY(-50%) rotate(0deg); 
  }
  

  .banner .bg-home7 .swiper-container {
	height: 380px;                    
	aspect-ratio: 9 / 19.5;            
	width: auto;                       
	overflow: hidden;                 
  }
  

  .banner .bg-home7 .swiper-wrapper { align-items: stretch; }
  .banner .bg-home7 .swiper-slide { height: 100% !important; }
  

  .banner .bg-home7 img {
	width: 100%;
	height: 100%;
	object-fit: cover;                
	border-radius: 14px;
	border: 1px solid #2a2b31;
  }


/* === ABOUT US PAGE STYLES (Glass / Blur Version) === */
.about-card {
	background: rgba(255, 255, 255, 0.75); /* semi-transparent white */
	backdrop-filter: blur(12px);           /* frosted glass effect */
	-webkit-backdrop-filter: blur(12px);   /* Safari support */
	border-radius: 24px;
	padding: clamp(18px, 3.2vw, 28px);
	margin: calc(8px - env(safe-area-inset-top)) auto 24px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); /* soft shadow instead of border */
  }
  
  .about-card h1 {
	margin: 0 0 8px 0;
	font-size: clamp(28px, 5vw, 40px);
	line-height: 1.15;
  }
  
  .about-card p {
	margin: 10px 0 14px;
	color: #222;
	font-size: 14px;
	line-height: 1.55;
  }
  
  .about-list {
	margin: 8px 0 16px 18px;
	color: #333;
  }
  
  .about-list li {
	margin: 6px 0;
  }
  
  .about-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, 1fr);
  }
  
  .about-item {
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 14px;
	padding: 12px 14px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  }
  
  .about-item h3 {
	margin: 0 0 4px 0;
	font-size: 19px;
  }
  
  .about-note {
	color: #444;
	font-size: 14px;
  }
  
  /* Responsive tweaks */
  @media (max-width: 900px) {
	.about-grid {
	  grid-template-columns: repeat(2, 1fr);
	}
  }
  @media (max-width: 600px) {
	.about-grid {
	  grid-template-columns: 1fr;
	}
  }
/* === FOOTER PIN + SAFE AREA FIX === */
html, body {
	height: 100%;
  }
  
  body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
  }
  
  main.container {
	flex: 1 0 auto;
  }
  
  .site-footer {
	margin-top: auto;
	width: 100%;
	background: #2d2d2d;
	padding-bottom: calc(26px + env(safe-area-inset-bottom));
	padding-bottom: calc(26px + constant(safe-area-inset-bottom)); /* fallback for older iOS */
  }
  
  body::after {
	content: "";
	display: block;
	height: max(0px, env(safe-area-inset-bottom));
	background: #2d2d2d;
  }

  /* === Age Gate Modal === */
.agegate[hidden]{display:none}
.agegate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center}
.agegate-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.agegate-panel{
  position:relative;
  width:min(560px, 92vw);
  background:#333;
  color:#f7f7f7;
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  padding:clamp(18px,3.5vw,32px);
  text-align:center;
}
.agegate-icon img{display:block;margin:4px auto 10px}
.agegate h2{margin:8px 0 6px;font-size:35px;font-weight:800}
.agegate p{margin:0 0 18px;color:#cfcfcf;font-size:14px;}
.agegate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 18px;border-radius:12px;font-weight:800;cursor:pointer;text-decoration:none}
.btn-primary{background:#F1C40F;color:#111;border:1px solid #F1C40F;box-shadow:0 2px 0 #c09f12 inset}
.btn-outline{background:transparent;color:#F1C40F;border:2px solid #F1C40F}
body.is-agegate-locked{overflow:hidden}