/* Base */
:root{
	--bg-900:#0f2227;
	--bg-800:#13292f;
	--bg-700:#0e1d22;
	--txt-100:#e8f7f2;
	--txt-200:#cfe9e1;
	--pri-500:#1bd2a4;
	--pri-600:#14b38c;
	--acc-500:#ffb000;
	--outline:#1c3a40;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	color:var(--txt-100);
	background:var(--bg-900);
}
.container{
	width:100%;
	max-width:1180px;
	margin:0 auto;
	padding:0 20px;
}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}

/* Header */
.site-header{
	position:sticky;top:0;z-index:50;
	backdrop-filter:saturate(140%) blur(6px);
	background:#0d1d23;
	border-bottom:1px solid var(--outline);
}
.header-inner{
	display:flex;align-items:center;gap:24px;
	height:72px;
}
.logo img{height:40px;display:block}
.main-nav ul{display:flex;gap:22px;align-items:center}
.main-nav{flex:1;display:flex;justify-content:center}
.main-nav ul{justify-content:center}
.main-nav a{
	display:inline-flex;align-items:center;gap:8px;
	font-weight:600;font-size:14px;color:var(--txt-200);
	padding:10px 0;transition:color .2s ease;
}
.main-nav a:hover{color:#fff}
.hidable{display:block}
.header-actions{margin-left:auto;display:flex;gap:12px;align-items:center}
.btn{
	display:inline-flex;align-items:center;justify-content:center;
	height:36px;padding:0 16px;border-radius:22px;font-weight:700;
	font-size:14px;border:1px solid transparent;transition:all .2s ease;
}
.btn-outline{border-color:#1d5a54;color:#d5f6ee;background:transparent}
.btn-outline:hover{border-color:var(--pri-500);color:#fff}
.btn-primary{background:var(--acc-500);color:#1a1a1a}
.btn-primary:hover{filter:brightness(1.05)}
.lang{
	display:inline-flex;align-items:center;justify-content:center;
	height:32px;width:32px;min-width:32px;border-radius:50%;
	background:#16524b;border:1px solid #1c6b62;color:#cfe9e1;
	font-weight:700;cursor:pointer;padding:0;
}
.menu-toggle{
	display:none;margin-left:4px;width:40px;height:36px;border:1px solid var(--outline);
	background:transparent;border-radius:8px;cursor:pointer;padding:8px;
}
.menu-toggle span{display:block;height:2px;background:#bfe0d7;margin:4px 0;border-radius:2px}

.mobile-login{display:none}

/* Main */
.site-main{padding:24px 0 48px;background:var(--bg-800)}
.content-hero{
	padding:28px;border:1px solid var(--outline);border-radius:12px;background:var(--bg-700);
}
.h-accent{
	position:relative;margin:0 0 12px 0;font-size:26px;line-height:1.25;
}
.h-accent::after{
	content:"";display:block;width:64px;height:3px;border-radius:2px;
	background:linear-gradient(90deg,var(--pri-500),#7ef2cf);
	margin-top:10px;
}
.content-hero p{margin:0 0 14px 0;color:var(--txt-200)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.content-section{margin-top:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{
	border:1px solid var(--outline);border-radius:12px;background:var(--bg-700);
	padding:18px;display:flex;flex-direction:column;gap:10px
}
.card h3{margin:0 0 4px 0}
.card p{margin:0;color:var(--txt-200)}
.subcard{margin-top:10px;padding:12px;border:1px dashed #295058;border-radius:10px;background:#0f262b}
.subcard h4{margin:0 0 6px 0}
.faq details{border:1px solid var(--outline);background:#0f262b;border-radius:10px;padding:10px 12px}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:700;color:#d9f1ea}
.faq p{margin:8px 0 0 0;color:var(--txt-200)}

@media (max-width: 980px){
	.grid-3{grid-template-columns:1fr 1fr}
	.grid-2{grid-template-columns:1fr}
}

/* Footer */
.site-footer{
	background:#0d1d23;border-top:1px solid var(--outline);
}
.footer-top{
	display:grid;grid-template-columns:1.1fr .6fr 1.6fr;gap:28px;padding:28px 0;
}
.footer-cols{
	display:grid;
	grid-template-columns:repeat(2,minmax(180px,1fr));
	gap:24px 40px;
	justify-items:start;
	align-items:start;
}
.footer-cols .col{display:grid;gap:12px}
.footer-cols a{
	color:var(--pri-500);
	font-weight:600;
	font-size:15px;
	line-height:1.4;
}
.footer-cols a:hover{color:#9ff2dc}
.footer-badges{display:flex;align-items:flex-start;justify-content:center}
.footer-badges img{width:140px;height:auto;opacity:.95;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.footer-legal{
	color:var(--txt-200);line-height:1.6;display:flex;flex-direction:column;gap:8px
}
.footer-legal a.brand{color:var(--pri-500);font-weight:700;text-decoration:none}
.footer-legal a.brand:hover{color:#9ff2dc;text-decoration:underline}
.footer-bottom{
	display:flex;justify-content:space-between;align-items:center;
	padding:16px 0;border-top:1px solid var(--outline);color:#a9cfc4;
}
.age{
	width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
	background:#102c30;border:1px solid #1a3b40;color:#c9e6de;font-weight:800;
}
.pill{
	display:inline-flex;align-items:center;gap:10px;background:#0b2529;border:1px solid #1a3b40;
	padding:8px 14px;border-radius:24px;color:#cfe9e1;
}
.pill .circle{
	width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
	background:#16524b;border:1px solid #1c6b62;font-weight:800;
}
.pill .chev{opacity:.8}

/* Responsive */
@media (max-width: 980px){
	.hidable{display:none}
}
@media (max-width: 860px){
	.main-nav{display:none;position:fixed;inset:64px 0 auto 0;background:#0d1d23;border-bottom:1px solid var(--outline)}
	/* shift for taller header */
	.main-nav{inset:72px 0 auto 0}
	.site-header.menu-open .main-nav{display:block}
	.main-nav ul{flex-direction:column;align-items:flex-start;padding:14px 20px;gap:10px}
	.header-actions{margin-left:auto}
	.menu-toggle{display:inline-block}
}
@media (max-width: 560px){
	.header-inner{gap:14px}
	.btn-outline{display:none}
	.lang{display:none}
	.mobile-login{display:inline-flex}
	.footer-top{grid-template-columns:1fr}
	.footer-badges{justify-content:center}
	.footer-cols{grid-template-columns:1fr 1fr}
}