/* Base variables & tokens */
:root {
	--color-bg: #071411;
	--color-card-bg: #0f241e;
	--color-text: #eafff8;
	--color-text-secondary: #b7e2d2;
	--color-accent: #28e1a5;
	--color-highlight: #ffe08a;
	--color-button: #28e1a5;
	/* derived tokens */
	--color-accent-15a: rgba(40,225,165,0.15);
	--color-accent-60a: rgba(40,225,165,0.6);
	--color-accent-80a: rgba(40,225,165,0.8);
	--color-button-text: #04121f;
	--radius: 12px;
	--container: 1200px;
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
	--space-9: 56px;
	--space-10: 72px;
}

/* Global styles */
html, body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }

/* Header */
header.site-header { position: sticky; top: 0; z-index: 100; background: rgba(11, 26, 10, 0.9); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav { display: flex; align-items: center; justify-content: center; padding: var(--space-4) 24px; position: relative; }
.logo { display: inline-flex; align-items: center; gap: var(--space-3); }
.logo img { width: 180px; height: 40px; object-fit: contain; }
.nav-toggle, .nav-toggle-label, .nav-links { display: none !important; }
.cta:hover { filter: brightness(1.08); }

/* Hero */
.hero { background: radial-gradient(1200px 500px at 50% -10%, var(--color-accent) 0%, transparent 60%), linear-gradient(180deg, var(--color-card-bg) 0%, var(--color-bg) 100%); padding: var(--space-9) 0 var(--space-8); position: relative; }
.hero .headline { font-size: clamp(22px, 4vw, 40px); font-weight: 800; line-height: 1.1; margin: 0 0 var(--space-4); color: var(--color-text); }
.hero .subheadline { color: var(--color-text-secondary); font-size: clamp(14px, 2.2vw, 18px); max-width: 800px; }
.hero-divider { height: 2px; background: linear-gradient(90deg, transparent, var(--color-accent-80a), transparent); box-shadow: 0 0 16px var(--color-accent-60a); }

/* Cards grid */
.cards { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-7); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card { background: var(--color-card-bg); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); min-height: auto; position: relative; }
.card .label { position: absolute; top: var(--space-6); right: var(--space-6); padding: 6px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .3px; background: var(--color-accent-15a); color: var(--color-accent); font-weight: 700; text-transform: uppercase; }
.card .brand { display: flex; align-items: center; gap: var(--space-4); }
.card .brand img { width: 120px; height: 72px; object-fit: contain; }
.card .offer .offer-title { font-size: 20px; font-weight: 800; }
.card .offer .offer-sub { font-size: 14px; font-weight: 400; }
.rating { display: flex; align-items: center; gap: 10px; color: var(--color-text-secondary); }
.rating .score { font-size: 22px; font-weight: 800; color: var(--color-text); }
.rating .stars { color: var(--color-highlight); }
.card .card-cta { text-align: center; padding: 12px; border-radius: 10px; background: var(--color-button); color: var(--color-button-text); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }

/* Sections */
section { padding: var(--space-9) 0; }
section h2 { font-size: clamp(20px, 3vw, 28px); margin: 0 0 var(--space-5); }
section p.lead { color: var(--color-text-secondary); max-width: 900px; }

/* How we choose */
.criteria { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-7); }
@media (min-width: 768px) { .criteria { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .criteria { grid-template-columns: repeat(4, 1fr); } }
.criterion { background: var(--color-card-bg); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.criterion i { color: var(--color-accent); font-size: 22px; }
.criterion .title { font-weight: 700; }
.criterion .desc { color: var(--color-text-secondary); }

/* Reviews */
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review { background: var(--color-card-bg); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.review .quote { color: var(--color-text-secondary); }
.review .author { display: flex; align-items: center; justify-content: space-between; }
.review .highlight { background: var(--color-highlight); color: #111; font-weight: 800; border-radius: 8px; padding: 8px 12px; }

/* Footer */
footer.site-footer { background: var(--color-bg); border-top: 1px solid rgba(255,255,255,0.08); padding: 24px 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); margin-top: var(--space-5); }
.footer-links a { color: var(--color-text-secondary); }
.footer-legal { color: var(--color-text-secondary); font-size: 13px; line-height: 1.6; }
.legal-logos { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-5); opacity: .85; }
.legal-logos img { height: 22px; }

/* Trust row (legal logos refined) */
.trust-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-5); opacity: .9; }
.trust-row__item { display: inline-flex; align-items: center; transition: opacity .2s ease, filter .2s ease; filter: grayscale(10%); }
.trust-row__item:hover { opacity: 1; filter: none; }
.trust-row img { height: 40px; }

/* Footer center modifier (home only) */
.center-footer { text-align: center; }
.center-footer .trust-row { justify-content: center; }
.center-footer .footer-links { justify-content: center; }
.center-footer .footer-legal { max-width: 900px; margin: 0 auto; }

/* Age gate modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: var(--color-card-bg); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; width: min(92vw, 520px); padding: var(--space-7); box-shadow: 0 10px 50px rgba(0,0,0,0.5); }
.modal h3 { margin: 0 0 var(--space-4); font-size: 22px; }
.modal p { color: var(--color-text-secondary); margin: 0 0 var(--space-5); }
.modal .actions { display: flex; gap: var(--space-4); justify-content: flex-end; }
.btn { padding: 10px 14px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 700; }
.btn-primary { background: var(--color-button); color: var(--color-button-text); }
.btn-secondary { background: var(--color-card-bg); color: var(--color-text); }
.modal-backdrop.show { display: flex; }

/* Utilities */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }