:root {
--red: #cc0000;
--red-dark: #990000;
--black: #0a0a0a;
--dark: #1a1a1a;
--gray: #f5f5f5;
--white: #ffffff;
--gold: #c9a96e;
--muted: #888;
--border: rgba(255, 255, 255, 0.08);
}

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Montserrat", sans-serif;
background: var(--black);
color: var(--white);
overflow-x: hidden;
line-height: 1.6;
}

::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-track {
background: var(--black);
}
::-webkit-scrollbar-thumb {
background: var(--red);
}

/* ─── NAV ─── */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
z-index: 1000;
transition:
    background 0.4s,
    box-shadow 0.4s;
}
nav.scrolled {
background: rgba(10, 10, 10, 0.97);
backdrop-filter: blur(16px);
box-shadow: 0 1px 0 rgba(204, 0, 0, 0.25);
}
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
flex-shrink: 0;
}
.nav-brand .logo-word {
height: 46px;
width: auto;
display: block;
}

.nav-links {
display: flex;
gap: 0;
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.nav-links a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 12px 18px;
transition: color 0.2s;
position: relative;
}
.nav-links a::after {
content: "";
position: absolute;
bottom: 6px;
left: 18px;
right: 18px;
height: 1.5px;
background: var(--red);
transform: scaleX(0);
transition: transform 0.25s;
}
.nav-links a:hover {
color: var(--white);
}
.nav-links a:hover::after {
transform: scaleX(1);
}

.nav-cta {
background: var(--red);
color: var(--white);
border: none;
padding: 11px 26px;
font-family: "Montserrat", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition:
    background 0.2s,
    transform 0.2s;
white-space: nowrap;
}
.nav-cta:hover {
background: var(--red-dark);
transform: translateY(-1px);
}

.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.hamburger span {
width: 22px;
height: 2px;
background: var(--white);
display: block;
transition: all 0.3s;
}

/* ─── HERO ─── */
#home,
#hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: var(--black);
padding-bottom: 0;
}
#home .hero-bg-pattern,
.hero-bg-pattern {
position: absolute;
inset: 0;
background-image:
    linear-gradient(rgba(204, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 0, 0, 0.04) 1px, transparent 1px);
background-size: 72px 72px;
}
.hero-accent-bar {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(
    to bottom,
    transparent,
    var(--red),
    transparent
);
}
.hero-accent-bar-r {
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: linear-gradient(
    to bottom,
    transparent,
    rgba(204, 0, 0, 0.3),
    transparent
);
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 960px;
padding: 120px 48px 60px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 0 auto;
}
.hero-logo-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 40px;
animation: fadeUp 0.9s ease-out both;
}
.hero-logo-icon {
height: 96px;
width: auto;
filter: drop-shadow(0 0 40px rgba(204, 0, 0, 0.55));
}
.hero-wordmark {
height: 80px;
width: auto;
/* filter: brightness(0) invert(1);
opacity: 0.95; */
}
.hero-location {
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--red);
display: block;
margin-top: -6px;
}
.hero-logo-icon {
height: 80px;
width: auto;
filter: drop-shadow(0 0 40px rgba(204, 0, 0, 0.45));
}
.hero-logo-divider {
width: 1px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
}
.hero-logo-text {
text-align: center;
}
.hero-logo-text .line1 {
font-family: "Bebas Neue", sans-serif;
font-size: 62px;
letter-spacing: 6px;
color: var(--white);
display: block;
}
.hero-logo-text .line2 {
font-size: 13px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--red);
display: block;
margin-top: 2px;
}

.hero-eyebrow {
font-family: "Rajdhani", sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--red);
margin-bottom: 20px;
animation: fadeUp 0.9s ease-out 0.2s both;
}
.hero-title {
font-family: "Bebas Neue", sans-serif;
font-size: clamp(52px, 8vw, 96px);
letter-spacing: 5px;
line-height: 0.95;
color: var(--white);
margin-bottom: 24px;
animation: fadeUp 0.9s ease-out 0.4s both;
}
.hero-title em {
color: var(--red);
font-style: normal;
}
.hero-subtitle {
font-size: 16px;
font-weight: 300;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.5px;
margin-bottom: 48px;
animation: fadeUp 0.9s ease-out 0.6s both;
}
.hero-btns {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
animation: fadeUp 0.9s ease-out 0.8s both;
}

@keyframes fadeUp {
from {
    opacity: 0;
    transform: translateY(28px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid rgba(255, 255, 255, 0.07);
animation: fadeUp 0.9s ease-out 1s both;
margin-top: 60px;
width: 100%;
}
.hero-stat {
padding: 28px 20px;
text-align: center;
border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.hero-stat:last-child {
border-right: none;
}
.hero-stat-num {
font-family: "Bebas Neue", sans-serif;
font-size: 40px;
letter-spacing: 2px;
color: var(--red);
display: block;
line-height: 1;
}
.hero-stat-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
margin-top: 6px;
display: block;
}

/* ─── BUTTONS ─── */
.btn {
padding: 14px 30px;
font-family: "Montserrat", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.25s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-red {
background: var(--red);
color: var(--white);
border-color: var(--red);
}
.btn-red:hover {
background: var(--red-dark);
border-color: var(--red-dark);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(204, 0, 0, 0.35);
}
.btn-outline {
background: transparent;
color: var(--white);
border-color: rgba(255, 255, 255, 0.4);
}
.btn-outline:hover {
border-color: var(--red);
color: var(--red);
transform: translateY(-2px);
}
.btn-outline-red {
background: transparent;
color: var(--red);
border-color: var(--red);
}
.btn-outline-red:hover {
background: var(--red);
color: var(--white);
transform: translateY(-2px);
}

/* ─── SECTION BASE ─── */
.section-wrap {
padding: 120px 0;
}
.container {
max-width: 1320px;
margin: 0 auto;
padding: 0 48px;
}

.section-label {
font-family: "Rajdhani", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--red);
display: block;
margin-bottom: 12px;
}
.section-title {
font-family: "Bebas Neue", sans-serif;
font-size: clamp(32px, 4vw, 52px);
letter-spacing: 2px;
line-height: 1;
}
.title-bar {
width: 48px;
height: 3px;
background: var(--red);
margin-top: 16px;
}
.title-bar-center {
margin: 16px auto 0;
}

/* ─── ABOUT ─── */
#about {
background: var(--white);
color: var(--black);
}
.about-grid {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 80px;
align-items: center;
}

.about-body {
font-size: 15px;
color: #444;
line-height: 1.85;
margin-bottom: 16px;
}
.about-body strong {
color: var(--black);
}

.trust-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 48px;
border-top: 1px solid #e0e0e0;
padding-top: 32px;
}
.trust-item {
padding: 0 20px 0 0;
border-right: 1px solid #e0e0e0;
}
.trust-item:last-child {
border-right: none;
}
.trust-num {
font-family: "Bebas Neue", sans-serif;
font-size: 34px;
color: var(--red);
letter-spacing: 1px;
display: block;
line-height: 1;
}
.trust-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #777;
margin-top: 4px;
display: block;
}

.about-visual {
position: relative;
height: 420px;
}
.av-block {
position: absolute;
border-radius: 4px;
background: var(--dark);
overflow: hidden;
}
.av-block-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Rajdhani", sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.25);
background: linear-gradient(135deg, #1c1c1c, #242424);
position: relative;
}
.av-block-inner::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(204, 0, 0, 0.12), transparent);
}
.av1 {
width: 62%;
height: 52%;
top: 0;
left: 0;
z-index: 3;
}
.av2 {
width: 48%;
height: 48%;
top: 28%;
right: 0;
z-index: 2;
}
.av3 {
width: 55%;
height: 38%;
bottom: 0;
left: 12%;
z-index: 1;
}

/* ─── SERVICES ─── */
#services {
background: var(--dark);
}
.services-intro {
text-align: center;
margin-bottom: 56px;
}
.services-intro .section-title {
color: var(--white);
}

.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(204, 0, 0, 0.12);
}
.srv-card {
background: #111;
padding: 40px 32px;
border-left: 3px solid transparent;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.srv-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(204, 0, 0, 0.06), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.srv-card:hover {
border-left-color: var(--red);
transform: translateY(-3px);
background: #151515;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.srv-card:hover::after {
opacity: 1;
}
.srv-icon {
width: 36px;
height: 3px;
background: var(--red);
margin-bottom: 24px;
}
.srv-title {
font-family: "Oswald", sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--white);
margin-bottom: 10px;
}
.srv-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.65;
margin-bottom: 20px;
}
.srv-link {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--red);
text-decoration: none;
transition: letter-spacing 0.2s;
}
.srv-link:hover {
letter-spacing: 3px;
}

/* ─── WHY WORK WITH US ─── */
#why {
background: #0d0d0d;
}
.why-intro {
text-align: center;
margin-bottom: 64px;
}
.why-intro .section-title {
color: var(--white);
}

.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.why-card {
padding: 40px 32px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: #111;
border-top: 3px solid var(--red);
transition: all 0.3s;
}
.why-card:hover {
background: #161616;
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
border-color: rgba(204, 0, 0, 0.5);
border-top-color: var(--red);
}
.why-num {
font-family: "Bebas Neue", sans-serif;
font-size: 48px;
color: rgba(204, 0, 0, 0.15);
line-height: 1;
margin-bottom: 16px;
letter-spacing: 2px;
}
.why-title {
font-family: "Oswald", sans-serif;
font-size: 17px;
font-weight: 600;
color: var(--white);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.why-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.7;
}

/* ─── PRODUCT CATEGORIES ─── */
#products {
background: var(--black);
}
.products-intro {
text-align: center;
margin-bottom: 48px;
}
.products-intro .section-title {
color: var(--white);
}

.cat-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 3px;
}
.cat-card {
position: relative;
height: 520px;
overflow: hidden;
cursor: pointer;
background: #111;
}
.cat-bg {
position: absolute;
inset: 0;
transition: transform 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
}
.cat-card:hover .cat-bg {
transform: scale(1.06);
}

/* Category color backgrounds */
.cat-bjj .cat-bg {
background-image: url("/cat-bjj.jpg");
background-size: cover;
background-position: center top;
}
.cat-team .cat-bg {
background:
    url("/cat-teamwear.png") center bottom / auto 92% no-repeat,
    linear-gradient(160deg, #060c14 0%, #0a1a2e 50%, #060c14 100%);
}
.cat-active .cat-bg {
background:
    url("/cat-activewear.png") center bottom / auto 95% no-repeat,
    linear-gradient(160deg, #080808 0%, #111118 50%, #080808 100%);
}
.cat-boxing .cat-bg {
background:
    url("/cat-boxing.png") center center / auto 92% no-repeat,
    linear-gradient(160deg, #0d0a08 0%, #1a1008 50%, #0d0a08 100%);
}
.cat-mma .cat-bg {
background-image: url("/cat-mma.png");
background-size: cover;
background-position: center top;
}

.cat-bg-text {
font-family: "Bebas Neue", sans-serif;
font-size: 140px;
letter-spacing: -4px;
color: rgba(255, 255, 255, 0.03);
user-select: none;
line-height: 1;
}

.cat-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.3) 60%,
    transparent 100%
);
transition: background 0.4s;
}
.cat-card:hover .cat-overlay {
background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.15) 100%
);
}

.cat-blur-overlay {
position: absolute;
inset: 0;
backdrop-filter: blur(0px);
transition: backdrop-filter 0.4s;
}
.cat-card:hover .cat-blur-overlay {
backdrop-filter: blur(2px);
}

.cat-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 32px 24px;
transition: padding 0.4s;
}
.cat-card:hover .cat-content {
padding-bottom: 40px;
}

.cat-label {
font-family: "Rajdhani", sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--red);
display: block;
margin-bottom: 8px;
opacity: 0;
transform: translateY(8px);
transition: all 0.35s;
}
.cat-card:hover .cat-label {
opacity: 1;
transform: translateY(0);
}

.cat-title {
font-family: "Bebas Neue", sans-serif;
font-size: 32px;
letter-spacing: 2px;
color: var(--white);
display: block;
margin-bottom: 8px;
transition: transform 0.4s;
}
.cat-card:hover .cat-title {
transform: translateY(-8px);
}

.cat-sub {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.5px;
display: block;
margin-bottom: 16px;
transition: transform 0.4s;
}
.cat-card:hover .cat-sub {
transform: translateY(-8px);
}

.cat-learn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--red);
text-decoration: none;
opacity: 0;
transform: translateY(12px);
transition:
    opacity 0.35s 0.05s,
    transform 0.35s 0.05s;
border-bottom: 1px solid var(--red);
padding-bottom: 2px;
}
.cat-card:hover .cat-learn {
opacity: 1;
transform: translateY(-8px);
}
.cat-learn-arrow {
transition: transform 0.2s;
}
.cat-learn:hover .cat-learn-arrow {
transform: translateX(4px);
}

/* Red accent line at top of card */
.cat-top-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--red);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s;
}
.cat-card:hover .cat-top-bar {
transform: scaleX(1);
}

/* ─── PRODUCTION PROCESS ─── */
#process {
background: #0d0d0d;
padding: 80px 0;
}
.process-intro {
text-align: center;
margin-bottom: 40px;
}
.process-intro .section-title {
color: var(--white);
}
.process-intro .section-label {
color: var(--red);
}

.process-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 3px;
}
.proc-card {
position: relative;
height: 280px;
overflow: hidden;
cursor: default;
background: #111;
border-top: 3px solid transparent;
transition: all 0.35s;
}
.proc-card:hover {
border-top-color: var(--red);
background: #161616;
}
.proc-bg-num {
position: absolute;
bottom: -10px;
right: 12px;
font-family: "Bebas Neue", sans-serif;
font-size: 80px;
letter-spacing: -2px;
color: rgba(255, 255, 255, 0.03);
line-height: 1;
user-select: none;
transition: color 0.35s;
}
.proc-card:hover .proc-bg-num {
color: rgba(204, 0, 0, 0.07);
}

.proc-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px 20px;
transition: padding 0.35s;
}
.proc-card:hover .proc-content {
padding-bottom: 30px;
}

.proc-icon-line {
width: 32px;
height: 2px;
background: var(--red);
margin-bottom: 16px;
transition: width 0.35s;
}
.proc-card:hover .proc-icon-line {
width: 48px;
}

.proc-title {
font-family: "Oswald", sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--white);
margin-bottom: 6px;
text-transform: uppercase;
transition: transform 0.35s;
}
.proc-card:hover .proc-title {
transform: translateY(-4px);
}

.proc-desc {
font-size: 11px;
color: var(--muted);
line-height: 1.5;
opacity: 0;
transform: translateY(8px);
transition:
    opacity 0.3s,
    transform 0.3s;
}
.proc-card:hover .proc-desc {
opacity: 1;
transform: translateY(-4px);
}

/* ─── CTA BANNER ─── */
#cta {
background-image: url(../images/btm-banner.jpg); background-position: center center; background-repeat: no-repeat;  background-size: cover; background-attachment: fixed; 
padding: 100px 48px;
text-align: center;
position: relative;
overflow: hidden;
}
#cta::before { background-color: rgba(13, 13, 13, 0.9); content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; }
.cta-bg-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Bebas Neue", sans-serif;
font-size: 200px;
letter-spacing: 10px;
color: rgba(0, 0, 0, 0.12);
white-space: nowrap;
user-select: none;
pointer-events: none;
}
.cta-content {
position: relative;
z-index: 2;
}
.cta-pre {
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 16px;
display: block;
}
.cta-title {
font-family: "Bebas Neue", sans-serif;
font-size: clamp(36px, 5vw, 64px);
letter-spacing: 3px;
color: var(--white);
line-height: 1;
margin-bottom: 12px;
}
.cta-sub {
font-size: 15px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40px;
font-weight: 300;
}
.cta-btn {
background: var(--white);
color: var(--red);
padding: 16px 40px;
font-family: "Montserrat", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.25s;
}
.cta-btn:hover {
background: var(--black);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ─── CONTACT ─── */
#contact {
background: var(--dark);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}

.form-lbl {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 8px;
}
.form-inp,
.form-sel,
.form-ta {
width: 100%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--white);
padding: 13px 16px;
font-family: "Montserrat", sans-serif;
font-size: 14px;
outline: none;
transition:
    border-color 0.2s,
    background 0.2s;
border-radius: 2px;
margin-bottom: 18px;
}
.form-sel option {
background: #1a1a1a;
}
.form-inp:focus,
.form-sel:focus,
.form-ta:focus {
border-color: var(--red);
background: rgba(204, 0, 0, 0.04);
}
.form-ta {
height: 140px;
resize: vertical;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}

.contact-details {
padding-top: 4px;
}
.cd-title {
font-family: "Bebas Neue", sans-serif;
font-size: 26px;
letter-spacing: 2px;
color: var(--white);
margin-bottom: 8px;
}
.cd-sub {
font-size: 13px;
color: var(--muted);
margin-bottom: 32px;
}

.cd-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
text-decoration: none;
transition: gap 0.2s;
}
.cd-item:hover {
gap: 20px;
}
.cd-dot {
width: 3px;
height: 3px;
background: var(--red);
border-radius: 50%;
margin-top: 8px;
flex-shrink: 0;
}
.cd-item-inner {
}
.cd-lbl {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
display: block;
margin-bottom: 3px;
}
.cd-val {
font-size: 14px;
color: var(--white);
font-weight: 500;
}

/* ─── FOOTER ─── */
footer {
background: #050505;
border-top: 1px solid rgba(204, 0, 0, 0.2);
padding: 72px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 56px;
}
.footer-brand img {
height: 44px;
margin-bottom: 16px;
}
.footer-about {
font-size: 13px;
color: rgba(255, 255, 255, 0.35);
line-height: 1.7;
margin-bottom: 16px;
}
.footer-address {
font-size: 12px;
color: rgba(255, 255, 255, 0.3);
line-height: 1.6;
}
.footer-address strong {
color: rgba(255, 255, 255, 0.5);
font-weight: 600;
}

.footer-col-title {
font-family: "Oswald", sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--red);
margin-bottom: 20px;
}
.footer-nav {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-nav a {
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
transition: color 0.2s;
display: block;
padding: 2px 0;
}
.footer-nav a:hover {
color: var(--white);
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding: 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-copy {
font-size: 12px;
color: rgba(255, 255, 255, 0.25);
letter-spacing: 0.5px;
}
.footer-social {
display: flex;
gap: 12px;
}
.social-btn {
width: 36px;
height: 36px;
border: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
border-radius: 4px;
transition: all 0.2s;
}
.social-btn:hover {
background: var(--red);
border-color: var(--red);
color: var(--white);
transform: translateY(-2px);
}
.footer-legal {
display: flex;
gap: 20px;
}
.footer-legal a {
font-size: 12px;
color: rgba(255, 255, 255, 0.25);
text-decoration: none;
transition: color 0.2s;
}
.footer-legal a:hover {
color: var(--white);
}

/* ─── WHATSAPP FLOAT ─── */
.wa-btn {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 999;
width: 52px;
height: 52px;
background: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
animation: waPulse 2.5s ease-in-out infinite;
}
.wa-btn:hover {
transform: scale(1.08);
}
.wa-btn svg {
width: 26px;
height: 26px;
fill: white;
}
@keyframes waPulse {
0%,
100% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}
50% {
    box-shadow:
    0 4px 32px rgba(37, 211, 102, 0.65),
    0 0 0 6px rgba(37, 211, 102, 0.1);
}
}

/* ─── MODAL ─── */
.modal-bg {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.88);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.modal-bg.open {
opacity: 1;
pointer-events: all;
}
.modal-box {
background: #111;
border: 1px solid rgba(204, 0, 0, 0.3);
max-width: 520px;
width: 100%;
padding: 52px 48px;
position: relative;
transform: translateY(16px);
transition: transform 0.3s;
}
.modal-bg.open .modal-box {
transform: translateY(0);
}
.modal-close {
position: absolute;
top: 18px;
right: 18px;
background: none;
border: none;
color: rgba(255, 255, 255, 0.4);
font-size: 20px;
cursor: pointer;
transition: color 0.2s;
line-height: 1;
}
.modal-close:hover {
color: var(--red);
}
.modal-title {
font-family: "Bebas Neue", sans-serif;
font-size: 32px;
letter-spacing: 2px;
color: var(--white);
margin-bottom: 6px;
}
.modal-sub {
font-size: 12px;
color: var(--muted);
margin-bottom: 28px;
letter-spacing: 0.5px;
}

/* ─── REVEAL ─── */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
.d1 {
transition-delay: 0.08s;
}
.d2 {
transition-delay: 0.16s;
}
.d3 {
transition-delay: 0.24s;
}
.d4 {
transition-delay: 0.32s;
}
.d5 {
transition-delay: 0.4s;
}
.d6 {
transition-delay: 0.48s;
}

/* ─── MOBILE NAV PANEL ─── */
.mobile-panel {
display: none;
position: fixed;
top: 80px;
left: 0;
right: 0;
background: rgba(8, 8, 8, 0.98);
backdrop-filter: blur(16px);
border-bottom: 2px solid rgba(204, 0, 0, 0.3);
z-index: 999;
padding: 24px 32px 32px;
flex-direction: column;
gap: 4px;
}
.mobile-panel.open {
display: flex;
}
.mobile-panel a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: color 0.2s;
}
.mobile-panel a:hover {
color: var(--red);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
.cat-row {
    grid-template-columns: repeat(3, 1fr);
}
.cat-card {
    height: 380px;
}
.process-row {
    grid-template-columns: repeat(3, 1fr);
}
.footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 900px) {
.nav-links {
    display: none;
}
.hamburger {
    display: flex;
}
.about-grid,
.contact-grid {
    grid-template-columns: 1fr;
}
.about-visual {
    height: 280px;
    margin-top: 40px;
}
.trust-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
}
.services-grid,
.why-grid {
    grid-template-columns: 1fr 1fr;
}
.hero-stats {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
nav {
    padding: 0 20px;
}
.container {
    padding: 0 20px;
}
.section-wrap {
    padding: 80px 0;
}
.cat-row {
    grid-template-columns: 1fr 1fr;
}
.cat-card {
    height: 320px;
}
.process-row {
    grid-template-columns: repeat(2, 1fr);
}
.services-grid,
.why-grid {
    grid-template-columns: 1fr;
}
.footer-grid {
    grid-template-columns: 1fr;
}
.footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
}
.hero-btns {
    flex-direction: column;
    align-items: center;
}
.btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
}
.form-row {
    grid-template-columns: 1fr;
}
.modal-box {
    padding: 32px 24px;
}
#cta {
    padding: 80px 24px;
}
}

/* ─── HERO VIDEO BG ─── */
.hero-video-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.hero-video-bg video {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.45;
pointer-events: none;
}
.hero-video-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.6) 0%,
    rgba(10, 10, 10, 0.3) 40%,
    rgba(10, 10, 10, 0.7) 100%
);
}
/* Animated dark bg fallback when no video is present */
.hero-dynamic-bg {
position: absolute;
inset: 0;
background:
    radial-gradient(
    ellipse 80% 60% at 50% 50%,
    rgba(204, 0, 0, 0.07) 0%,
    transparent 70%
    ),
    radial-gradient(
    ellipse 50% 70% at 15% 85%,
    rgba(204, 0, 0, 0.05) 0%,
    transparent 55%
    ),
    radial-gradient(
    ellipse 50% 70% at 85% 15%,
    rgba(204, 0, 0, 0.04) 0%,
    transparent 55%
    ),
    linear-gradient(180deg, #080808 0%, #111 50%, #080808 100%);
animation: bgPulse 10s ease-in-out infinite alternate;
}
@keyframes bgPulse {
0% {
    opacity: 0.85;
    transform: scale(1);
}
100% {
    opacity: 1;
    transform: scale(1.02);
}
}
/* Ensure hero bg-pattern & bars are above video */
.hero-bg-pattern {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.hero-accent-bar {
z-index: 2;
}
.hero-accent-bar-r {
z-index: 2;
}

/* ─── AV-BLOCK PHOTO UPGRADE ─── */
.av-block-inner.av-img {
background: none;
}
.av-block-inner.av-img::before {
display: none;
}
.av-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 14px;
background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    transparent 100%
);
font-family: "Rajdhani", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}

/* ─── PHOTO CATEGORY CARDS ─── */
.cat-bjj .cat-bg,
.cat-team .cat-bg,
.cat-active .cat-bg,
.cat-mma .cat-bg,
.cat-boxing .cat-bg {
background-repeat: no-repeat;
}
.cat-bjj:hover .cat-bg,
.cat-team:hover .cat-bg,
.cat-active:hover .cat-bg,
.cat-mma:hover .cat-bg,
.cat-boxing:hover .cat-bg {
transform: scale(1.04);
}

/* ─── PROCESS PHOTO OVERLAY ─── */
.proc-photo-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.3) 100%
);
z-index: 1;
}
.proc-bg-num {
z-index: 2;
}
.proc-content {
z-index: 2;
}

/* ─── FORCE HERO CENTER ─── */
#home {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 100vh !important;
}
.hero-content {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
.hero-logo-wrap {
justify-content: center !important;
width: 100% !important;
}
.hero-logo-text {
text-align: center !important;
width: 100% !important;
}
.hero-logo-text .line1 {
text-align: center !important;
display: block !important;
}
.hero-logo-text .line2 {
text-align: center !important;
display: block !important;
}
.hero-eyebrow {
text-align: center !important;
}
.hero-title {
text-align: center !important;
}
.hero-subtitle {
text-align: center !important;
}
.hero-btns {
justify-content: center !important;
}
.hero-stats {
text-align: center;
width: 100% !important;
}