:root {
--bg:#f5f8f5;
--surface:#ffffff;
--text:#14251e;
--muted:#68776f;
--line:#e2eae4;
--green:#124f3a;
--green2:#1e7652;
--lime:#d9ec58;
--shadow:0 16px 42px rgba(17,66,47,.08);
}

* {
box-sizing:border-box;
}

html {
scroll-behavior:smooth;
}

body {
margin:0;
background:var(--bg);
color:var(--text);
font-family:Arial,Helvetica,sans-serif;
line-height:1.6;
}

a {
text-decoration:none;
color:inherit;
}

.container {
width:min(1120px,calc(100% - 40px));
margin:auto;
}

/* HEADER */

.header {
height:76px;
background:rgba(255,255,255,.95);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:100;
}

.nav {
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
}

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

.logo-icon {
width:42px;
height:42px;
border-radius:14px;
background:linear-gradient(145deg,#1b7652,#0d3e2d);
color:#e9f6a1;
display:grid;
place-items:center;
font-size:22px;
font-weight:900;
}

.logo strong,
.logo small {
display:block;
line-height:1.2;
}

.logo strong {
font-size:13px;
letter-spacing:1px;
}

.logo small {
font-size:9px;
color:var(--muted);
letter-spacing:2px;
margin-top:5px;
}

nav {
display:flex;
align-items:center;
gap:27px;
font-size:13px;
font-weight:700;
}

nav a {
color:#52645a;
}

nav a:hover {
color:var(--green2);
}

.theme-toggle,
.menu-toggle {
border:1px solid var(--line);
background:var(--surface);
color:var(--text);
border-radius:10px;
padding:9px 13px;
cursor:pointer;
}

.menu-toggle {
display:none;
}

/* HERO */

.hero {
position:relative;
overflow:hidden;
background:radial-gradient(
circle at 80% 20%,
#286b4d 0,
#124f3a 35%,
#0b3024 100%
);
color:white;
padding:92px 0 88px;
}

.hero-content {
position:relative;
z-index:2;
}

.eyebrow {
font-size:10px;
font-weight:800;
letter-spacing:3px;
color:#4f8e6d;
}

.hero .eyebrow {
color:#d9ec58;
}

.pulse {
display:inline-block;
width:7px;
height:7px;
border-radius:50%;
background:#d9ec58;
margin-right:8px;
}

.hero h1 {
font-size:clamp(42px,7vw,76px);
line-height:1;
letter-spacing:-3px;
margin:25px 0 20px;
}

.hero h1 span {
display:block;
color:#d9ec58;
}

.hero p {
max-width:560px;
color:#d2e2d8;
font-size:17px;
}

.hero-buttons {
display:flex;
gap:12px;
margin-top:30px;
flex-wrap:wrap;
}

.btn {
display:inline-flex;
align-items:center;
gap:15px;
padding:13px 19px;
border-radius:12px;
font-size:13px;
font-weight:750;
}

.primary {
background:#d9ec58;
color:#183624;
}

.secondary {
border:1px solid #ffffff55;
color:white;
}

.hero-note {
font-size:11px;
color:#b4cbbd;
margin-top:35px;
}

.hero-circle {
position:absolute;
border:1px solid #ffffff20;
border-radius:50%;
}

.circle-one {
width:440px;
height:440px;
right:7%;
top:-90px;
}

.circle-two {
width:300px;
height:300px;
right:13%;
top:-20px;
}

/* TRUST */

.trust-section {
background:var(--surface);
border-bottom:1px solid var(--line);
}

.trust-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
padding:22px 0;
}

.trust-grid div {
display:flex;
align-items:center;
gap:13px;
justify-content:center;
border-right:1px solid var(--line);
}

.trust-grid div:last-child {
border:0;
}

.trust-grid strong {
color:#4c956d;
font-size:12px;
}

.trust-grid span {
font-size:12px;
color:var(--muted);
font-weight:650;
}

/* SECTIONS */

.section {
padding-top:78px;
padding-bottom:78px;
}

.section-heading {
display:flex;
align-items:end;
justify-content:space-between;
gap:20px;
margin-bottom:27px;
}

.section-heading h2,
.feature-content h2,
.about-content h2 {
font-size:clamp(27px,4vw,38px);
line-height:1.15;
letter-spacing:-1px;
margin:8px 0;
}

.section-heading p,
.feature-content p,
.about-content p {
color:var(--muted);
font-size:14px;
margin:8px 0 0;
}

/* SEARCH */

.toolbar {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:22px;
flex-wrap:wrap;
}

.search-box {
display:flex;
align-items:center;
gap:10px;
background:var(--surface);
border:1px solid var(--line);
border-radius:12px;
padding:0 14px;
min-width:300px;
height:46px;
color:#6b7c72;
}

.search-box input {
border:0;
outline:0;
background:transparent;
color:var(--text);
width:100%;
font-size:13px;
}

.filters {
display:flex;
gap:7px;
flex-wrap:wrap;
}

.filter {
border:1px solid var(--line);
background:var(--surface);
color:var(--muted);
padding:9px 13px;
border-radius:10px;
font-size:11px;
font-weight:700;
cursor:pointer;
}

.filter.active {
background:var(--green);
border-color:var(--green);
color:white;
}

/* GAME GRID */

.game-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}

.empty-state {
grid-column:1/-1;
text-align:center;
padding:54px 20px;
border:1px dashed #bfd0c3;
border-radius:18px;
background:var(--surface);
}

.empty-icon {
width:48px;
height:48px;
margin:0 auto 13px;
border-radius:16px;
background:#eaf3e9;
color:#367b52;
display:grid;
place-items:center;
font-size:22px;
}

.empty-state h3 {
margin:0 0 7px;
font-size:17px;
}

.empty-state p {
margin:0 auto;
max-width:460px;
color:var(--muted);
font-size:13px;
}

.game-card {
background:var(--surface);
border:1px solid var(--line);
border-radius:16px;
padding:18px;
box-shadow:var(--shadow);
}

.game-card h3 {
margin:0;
font-size:16px;
}

.game-card p {
color:var(--muted);
font-size:12px;
}

.small-note {
font-size:11px;
color:var(--muted);
margin-top:18px;
}

/* GUIDES */

.feature-section {
background:#e9f1e9;
padding:54px 0;
}

.feature-content {
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}

.feature-content > div {
max-width:620px;
}

.light-btn {
background:var(--green);
color:white;
white-space:nowrap;
}

/* SAFETY */

.safety-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.info-card {
background:var(--surface);
border:1px solid var(--line);
padding:23px;
border-radius:16px;
}

.info-icon {
width:34px;
height:34px;
border-radius:11px;
background:#edf5e9;
color:#32764d;
display:grid;
place-items:center;
font-weight:800;
}

.info-card h3 {
font-size:15px;
margin:16px 0 6px;
}

.info-card p {
font-size:12px;
color:var(--muted);
margin:0;
}

.notice {
margin-top:18px;
background:#fff8e8;
border:1px solid #f0dfb7;
border-radius:14px;
padding:18px 20px;
color:#5d4b25;
}

.notice strong {
font-size:13px;
}

.notice p {
font-size:12px;
margin:5px 0 0;
}

/* FAQ */

.faq-section {
padding-top:25px;
}

.faq-section details {
background:var(--surface);
border:1px solid var(--line);
border-radius:12px;
padding:16px 18px;
margin:9px 0;
}

.faq-section summary {
font-size:13px;
font-weight:750;
cursor:pointer;
}

.faq-section details p {
font-size:12px;
color:var(--muted);
margin:10px 0 0;
}

/* ABOUT */

.about-section {
background:#e8f0e9;
padding:48px 0;
}

.about-content {
display:flex;
align-items:center;
gap:23px;
}

.logo-icon.large {
width:66px;
height:66px;
font-size:32px;
flex:none;
}

/* FOOTER */

.footer {
background:#0d2d22;
color:#e5eee8;
padding:42px 0 18px;
}

.footer-grid {
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:30px;
padding-bottom:35px;
}

.footer-logo strong {
color:white;
}

.footer-logo small {
color:#9eb9a9;
}

.footer-grid p {
font-size:12px;
color:#a9c0b2;
max-width:330px;
margin-top:17px;
}

.footer-links {
display:flex;
flex-direction:column;
gap:9px;
font-size:12px;
color:#b8cbbf;
}

.footer-links strong {
color:white;
margin-bottom:4px;
}

.footer-bottom {
border-top:1px solid #ffffff20;
padding-top:16px;
display:flex;
justify-content:space-between;
color:#9eb5a7;
font-size:10px;
}

/* DARK MODE */

body.dark {
--bg:#101a15;
--surface:#17251d;
--text:#e7f0e9;
--muted:#a5b5aa;
--line:#2b3d32;
--shadow:0 16px 42px rgba(0,0,0,.15);
}

body.dark .header {
background:#14231c;
}

body.dark .trust-section {
background:var(--surface);
}

body.dark .feature-section,
body.dark .about-section {
background:#1c3025;
}

body.dark .notice {
background:#332b19;
border-color:#66552d;
color:#ead9a7;
}

/* MOBILE */

@media(max-width:760px) {

.container {
width:calc(100% - 30px);
}

.header {
height:68px;
}

.menu-toggle {
display:block;
}

nav {
display:none;
position:absolute;
top:67px;
left:0;
right:0;
background:var(--surface);
padding:18px 22px;
align-items:stretch;
gap:15px;
flex-direction:column;
}

nav.open {
display:flex;
}

.hero {
padding:72px 0;
}

.hero-circle {
opacity:.5;
right:-200px;
}

.trust-grid {
padding:16px 0;
}

.trust-grid div {
gap:6px;
flex-direction:column;
text-align:center;
}

.section {
padding-top:55px;
padding-bottom:55px;
}

.section-heading {
align-items:start;
flex-direction:column;
}

.toolbar {
align-items:stretch;
}

.search-box {
width:100%;
min-width:0;
}

.game-grid,
.safety-grid {
grid-template-columns:1fr;
}

.feature-content {
align-items:flex-start;
flex-direction:column;
}

.footer-grid {
grid-template-columns:1fr 1fr;
}

.footer-grid > div:first-child {
grid-column:1/-1;
}

.about-content {
align-items:flex-start;
}

.footer-bottom {
gap:8px;
flex-direction:column;
}

}