:root {
--bg: #0b1220;
--bg-soft: #121b2d;
--card: rgba(255, 255, 255, 0.08);
--card-solid: #ffffff;
--text: #f3f7fb;
--text-dark: #132033;
--muted: #c8d2df;
--line: rgba(255, 255, 255, 0.1);
--accent: #7df56f;
--accent-2: #39c8ff;
--shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
--radius: 22px;
--max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Inter', system-ui, sans-serif;
background:
radial-gradient(circle at top right, rgba(57, 200, 255, 0.12), transparent 25%),
radial-gradient(circle at left, rgba(125, 245, 111, 0.08), transparent 20%),
var(--bg);
color: var(--text);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.container {
width: min(calc(100% - 32px), var(--max));
margin: 0 auto;
}

.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(11, 18, 32, 0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}

.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 74px;
gap: 14px;
position: relative;
}

.logo {
font-weight: 800;
letter-spacing: 0.02em;
font-size: 1.1rem;
}
.logo span { color: var(--accent); }

.header-actions {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}

.lang-switch {
display: inline-flex;
background: rgba(255,255,255,0.08);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px;
}

.lang-btn {
border: none;
background: transparent;
color: var(--text);
border-radius: 999px;
padding: 8px 12px;
cursor: pointer;
}
.lang-btn.active {
background: var(--accent);
color: #0b1220;
font-weight: 700;
}

.menu-toggle {
width: 48px;
height: 48px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.06);
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
}
.menu-toggle span {
width: 20px;
height: 2px;
background: var(--text);
border-radius: 2px;
}

.main-nav {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
background: rgba(18, 27, 45, 0.98);
border: 1px solid var(--line);
border-radius: 18px;
padding: 14px;
display: none;
flex-direction: column;
gap: 8px;
box-shadow: var(--shadow);
}
.main-nav.open { display: flex; }
.main-nav a {
padding: 12px 14px;
border-radius: 12px;
}
.main-nav a:hover { background: rgba(255,255,255,0.06); }

.hero {
padding: 34px 0 22px;
}
.hero-grid {
display: grid;
gap: 18px;
}
.hero-text,
.hero-card,
.card,
.contact-card {
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.hero-text {
padding: 28px 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}
.hero-card {
padding: 22px;
background: linear-gradient(180deg, rgba(125,245,111,0.14), rgba(57,200,255,0.1));
}

.eyebrow {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.77rem;
color: var(--accent);
font-weight: 700;
margin-bottom: 12px;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
font-size: clamp(2rem, 7vw, 4rem);
line-height: 1;
margin-bottom: 14px;
}
h2 {
font-size: clamp(1.55rem, 5vw, 2.6rem);
margin-bottom: 10px;
}
h3 {
font-size: 1.15rem;
margin-bottom: 10px;
}
.hero-copy,
.section-head p,
.card p,
.contact-card p,
.hero-badge,
.footer-inner p {
color: var(--muted);
line-height: 1.6;
}

.hero-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 18px;
border-radius: 999px;
font-weight: 700;
}
.btn-primary {
background: var(--accent);
color: #08121d;
}
.btn-secondary {
background: rgba(255,255,255,0.08);
border: 1px solid var(--line);
}

.hero-badge {
display: inline-block;
background: rgba(11,18,32,0.35);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 999px;
padding: 8px 14px;
margin-bottom: 16px;
}

.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.stat-box {
background: rgba(11,18,32,0.38);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
padding: 14px 10px;
text-align: center;
}
.stat-box strong {
display: block;
font-size: 1.5rem;
margin-bottom: 6px;
}
.stat-box span {
display: block;
font-size: 0.82rem;
color: var(--text);
}

.section { padding: 34px 0; }
.section.alt { background: rgba(255,255,255,0.03); }
.section-head { margin-bottom: 18px; }

.cards {
display: grid;
gap: 16px;
}
.card {
background: var(--card-solid);
color: var(--text-dark);
padding: 22px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(0,0,0,0.16);
}
.card p { color: #4b5b72; }
.day, .event-date {
display: inline-block;
margin-bottom: 10px;
font-weight: 800;
color: #0d8f77;
}
.event-card {
display: flex;
flex-direction: column;
gap: 10px;
}

.gallery-grid {
display: grid;
gap: 14px;
}
.gallery-item {
min-height: 150px;
border: 1px solid var(--line);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(125,245,111,0.25), rgba(57,200,255,0.25)),
rgba(255,255,255,0.06);
color: white;
font-size: 1.05rem;
font-weight: 700;
padding: 20px;
text-align: left;
cursor: pointer;
transition: transform 0.25s ease;
}
.gallery-item:hover { transform: scale(1.02); }

.contact-grid {
display: grid;
gap: 18px;
}
.contact-card {
background: rgba(255,255,255,0.08);
padding: 22px;
}
.contact-card p { color: var(--text); }

.site-footer {
border-top: 1px solid var(--line);
padding: 20px 0 34px;
}
.footer-inner {
display: flex;
flex-direction: column;
gap: 6px;
}

#toTop {
position: fixed;
right: 18px;
bottom: 18px;
width: 48px;
height: 48px;
border: none;
border-radius: 50%;
background: var(--accent);
color: #08121d;
font-size: 1.2rem;
font-weight: 800;
cursor: pointer;
display: none;
box-shadow: var(--shadow);
}

.lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.92);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 200;
}
.lightbox.open { display: flex; }
.lightbox img {
max-width: min(100%, 980px);
max-height: 82vh;
border-radius: 18px;
}
.lightbox-close {
position: absolute;
top: 12px;
right: 12px;
width: 46px;
height: 46px;
border: none;
border-radius: 50%;
background: rgba(255,255,255,0.14);
color: white;
font-size: 2rem;
cursor: pointer;
}

.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}

@media (min-width: 760px) {
.menu-toggle { display: none; }
.main-nav {
position: static;
display: flex;
flex-direction: row;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
gap: 4px;
}
.header-actions {
order: 3;
margin-left: 0;
}
.hero-grid,
.contact-grid {
grid-template-columns: 1.15fr 0.85fr;
align-items: stretch;
}
.hero-buttons {
flex-direction: row;
flex-wrap: wrap;
}
.three-col,
.training-grid,
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
.event-list {
grid-template-columns: repeat(3, 1fr);
}
.footer-inner {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}