/* =========================================
GOOGLE FONT IMPORT
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* =========================================
RESET
========================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

html,
body{
overflow-x:hidden;
}

/* =========================================
ROOT VARIABLES
========================================= */

:root{

/* COLORS */
--gold:#d4af37;
--gold-light:#f5c542;

/* NEW BORDEAUX COLORS */
--bordeaux:#6e0f1f;
--bordeaux-light:#8f1d32;
--bordeaux-dark:#3d0812;

--black:#050505;
--dark:#0b0b0b;
--soft-dark:#111111;
--card:#141414;

--white:#ffffff;
--gray:#bdbdbd;
--light-gray:#d9d9d9;

/* SHADOWS */
--shadow:
0 10px 40px rgba(0,0,0,0.35);

--gold-shadow:
0 10px 35px rgba(212,175,55,0.25);

--bordeaux-shadow:
0 10px 35px rgba(110,15,31,0.28);

/* BORDER */
--border:
1px solid rgba(255,255,255,0.06);

/* TRANSITIONS */
--transition:0.4s ease;

}

/* =========================================
BODY
========================================= */

body{

font-family:'Montserrat', sans-serif;

background:
linear-gradient(
180deg,
#050505 0%,
#080808 45%,
#12070a 100%
);

color:var(--white);

line-height:1.7;

position:relative;
}

/* =========================================
GLOBAL CONTAINER
========================================= */

.container{
width:90%;
max-width:1400px;
margin:auto;
}

/* =========================================
GLOBAL SECTION
========================================= */

section{
padding:140px 0;
position:relative;
}

/* =========================================
TYPOGRAPHY
========================================= */

h1,
h2,
h3,
h4{
font-weight:700;
line-height:1.1;
letter-spacing:-1px;
}

h1{
font-size:76px;
}

h2{
font-size:56px;
}

h3{
font-size:30px;
}

p{
font-size:17px;
color:var(--gray);
line-height:1.9;
}

/* =========================================
CANAL+ STYLE TITLES
========================================= */

.section-title{
max-width:800px;
margin-bottom:70px;
position:relative;
}

.section-title::before{

content:"";

position:absolute;

left:0;
top:-18px;

width:90px;
height:3px;

background:
linear-gradient(
90deg,
var(--gold),
var(--bordeaux-light)
);

border-radius:50px;
}

.section-title span{

display:inline-block;

margin-bottom:18px;

font-size:13px;

font-weight:600;

letter-spacing:4px;

text-transform:uppercase;

color:var(--gold);
}

.section-title h2{
margin-bottom:20px;
}

.section-title p{
max-width:650px;
}

/* =========================================
GLOBAL HERO
========================================= */

.page-hero,
.hero{

position:relative;

display:flex;

align-items:center;
justify-content:center;

text-align:center;

overflow:hidden;
}

.hero-content{
position:relative;
z-index:2;
max-width:950px;
padding:20px;
}

.hero-content h1,
.hero-content h2{
margin-bottom:25px;
}

.hero-content p{
max-width:800px;
margin:auto;
}

/* =========================================
VIDEO BACKGROUND
========================================= */

.hero-video{
position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:0;
}

.hero-overlay{
position:absolute;
inset:0;

background:
linear-gradient(
to bottom,
rgba(110,15,31,0.18),
rgba(0,0,0,0.88)
);

z-index:1;
}

/* =========================================
BUTTONS
========================================= */

.btn{

display:inline-flex;

align-items:center;
justify-content:center;

padding:16px 34px;

border-radius:5px;

font-size:14px;
font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

text-decoration:none;

cursor:pointer;

transition:var(--transition);

border:none;

position:relative;

overflow:hidden;
}

.primary{

background:
linear-gradient(
45deg,
var(--gold),
var(--gold-light)
);

color:black;

box-shadow:var(--gold-shadow);
}

.primary::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(110,15,31,0.22),
transparent
);

transition:0.7s;
}

.primary:hover::before{
left:120%;
}

.primary:hover{

transform:translateY(-4px);

box-shadow:
0 15px 40px rgba(212,175,55,0.35);
}

.secondary{

border:1px solid rgba(255,255,255,0.16);

background:
linear-gradient(
135deg,
rgba(110,15,31,0.15),
rgba(255,255,255,0.02)
);

color:white;

backdrop-filter:blur(10px);
}

.secondary:hover{

background:
linear-gradient(
135deg,
var(--bordeaux),
var(--bordeaux-light)
);

border-color:transparent;

color:white;

box-shadow:var(--bordeaux-shadow);

transform:translateY(-4px);
}

/* =========================================
BUTTON GROUP
========================================= */

.hero-buttons{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
margin-top:40px;
}

/* =========================================
GLOBAL CARD
========================================= */

.card{

background:
linear-gradient(
145deg,
rgba(20,20,20,0.95),
rgba(12,12,12,0.98)
);

border:1px solid rgba(255,255,255,0.06);

border-radius:18px;

overflow:hidden;

position:relative;

transition:0.5s ease;

backdrop-filter:blur(10px);
}

.card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:2px;

background:
linear-gradient(
90deg,
var(--gold),
var(--bordeaux-light)
);

opacity:0.9;
}

.card:hover{

transform:translateY(-10px);

border-color:rgba(212,175,55,0.2);

box-shadow:
0 15px 45px rgba(0,0,0,0.4),
0 0 0 1px rgba(110,15,31,0.18);
}

/* =========================================
OVERLAY
========================================= */

.overlay-dark{
position:absolute;
inset:0;

background:
linear-gradient(
to bottom,
rgba(110,15,31,0.08),
rgba(0,0,0,0.92)
);
}

/* =========================================
REVEAL ANIMATION
========================================= */

.reveal{

opacity:0;

transform:translateY(70px);

transition:
opacity 1s ease,
transform 1s ease;
}

.reveal.active{

opacity:1;

transform:translateY(0);
}

/* =========================================
NAVBAR
========================================= */

.navbar{

position:fixed;

top:0;
left:0;

width:100%;

z-index:9999;

display:flex;

align-items:center;
justify-content:space-between;

padding:20px 45px;

background:
linear-gradient(
90deg,
rgba(5,5,5,0.92),
rgba(45,8,18,0.88)
);

backdrop-filter:blur(14px);

border-bottom:
1px solid rgba(255,255,255,0.05);

transition:0.4s ease;

gap:30px;
}

/* LOGO */

.logo{

font-size:22px;

font-weight:800;

letter-spacing:1px;

color:var(--gold);

white-space:nowrap;

flex-shrink:0;

text-shadow:
0 0 15px rgba(212,175,55,0.18);
}

/* NAV LINKS */

.nav-links{

display:flex;

align-items:center;

justify-content:flex-end;

gap:18px;

list-style:none;

flex-wrap:nowrap;

margin-left:auto;
}

.nav-links li{
flex-shrink:1;
}

.nav-links li a{

color:white;

text-decoration:none;

font-size:12px;

font-weight:600;

text-transform:uppercase;

letter-spacing:0.5px;

transition:var(--transition);

white-space:nowrap;

position:relative;
}

.nav-links li a::after{

content:"";

position:absolute;

left:0;
bottom:-6px;

width:0%;
height:2px;

background:
linear-gradient(
90deg,
var(--gold),
var(--bordeaux-light)
);

transition:0.4s ease;
}

.nav-links li a:hover{
color:var(--gold);
}

.nav-links li a:hover::after{
width:100%;
}

/* MOBILE MENU */

.menu-toggle{

display:none;

font-size:34px;

cursor:pointer;

color:white;

z-index:10000;

transition:0.3s ease;
}

.menu-toggle:hover{
color:var(--gold);
}

/* =========================================
FOOTER
========================================= */

footer{

padding:30px 20px;

background:
linear-gradient(
180deg,
#050505,
#12070a
);

text-align:center;

border-top:
1px solid rgba(255,255,255,0.05);
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px){

/* TYPOGRAPHY */

h1{
font-size:60px;
}

h2{
font-size:46px;
}

/* SECTIONS */

section{
padding:110px 0;
}

/* NAVBAR */

.navbar{
padding:18px 30px;
}

.logo{
font-size:20px;
}

.nav-links{
gap:14px;
}

.nav-links li a{
font-size:11px;
}

}

/* =========================================
TABLET
========================================= */

@media(max-width:992px){

.navbar{
padding:18px 24px;
}

.logo{
font-size:18px;
}

.nav-links{
gap:12px;
}

.nav-links li a{
font-size:10px;
letter-spacing:0.3px;
}

}

/* =========================================
MOBILE
========================================= */

@media(max-width:768px){

/* NAVBAR */

.navbar{
padding:18px 20px;
}

.logo{
font-size:20px;
}

.menu-toggle{
display:block;
}

.nav-links{

position:absolute;

top:100%;
left:0;

width:100%;

background:
linear-gradient(
180deg,
#050505,
#220910
);

flex-direction:column;

align-items:center;

justify-content:center;

padding:35px 0;

gap:25px;

display:none;

border-top:
1px solid rgba(255,255,255,0.05);
}

.nav-links.active{
display:flex;
animation:menuFade 0.4s ease;
}

.nav-links li a{
font-size:14px;
}

/* TYPOGRAPHY */

h1{
font-size:42px;
}

h2{
font-size:34px;
}

p{
font-size:15px;
}

/* HERO */

.hero-content{
padding:20px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.btn{
width:100%;
max-width:320px;
}

/* SECTIONS */

section{
padding:90px 0;
}

.section-title h2{
font-size:36px;
}

}

/* =========================================
SMALL MOBILE
========================================= */

@media(max-width:480px){

h1{
font-size:34px;
}

h2{
font-size:28px;
}

h3{
font-size:24px;
}

.section-title h2{
font-size:30px;
}

p{
font-size:14px;
}

.logo{
font-size:18px;
}

}

/* =========================================
ANIMATIONS
========================================= */

@keyframes menuFade{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* =========================================
PREMIUM FOOTER
========================================= */

.footer{

background:#050505;

padding:90px 0 25px;

border-top:
1px solid rgba(255,255,255,0.06);
}

.footer-grid{

display:grid;

grid-template-columns:
2fr 1fr 1fr 1.3fr;

gap:60px;
}

.footer h3{

color:var(--gold);

margin-bottom:20px;
}

.footer h4{

margin-bottom:20px;

font-size:18px;

color:white;
}

.footer p{

font-size:15px;
}

.footer-links ul{

list-style:none;
}

.footer-links ul li{

margin-bottom:12px;
}

.footer-links a{

text-decoration:none;

color:var(--gray);

transition:0.3s;
}

.footer-links a:hover{

color:var(--gold);

padding-left:5px;
}

.footer-contact p{

display:flex;

align-items:center;

gap:10px;

margin-bottom:15px;
}

.footer-contact i{

color:var(--gold);
}

.footer-btn{

display:inline-block;

margin-top:15px;

padding:12px 24px;

background:var(--gold);

color:black;

font-weight:700;

text-decoration:none;

border-radius:6px;

transition:0.3s;
}

.footer-btn:hover{

transform:translateY(-3px);
}

.footer-socials{

display:flex;

gap:15px;

margin-top:30px;
}

.footer-socials a{

width:42px;
height:42px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

background:#111;

color:var(--gold);

text-decoration:none;

transition:0.3s;
}

.footer-socials a:hover{

background:var(--gold);

color:black;

transform:translateY(-4px);
}

.footer-bottom{

margin-top:60px;

padding-top:25px;

text-align:center;

border-top:
1px solid rgba(255,255,255,0.05);
}

.footer-bottom p{

font-size:14px;

color:#888;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:992px){

.footer-grid{

grid-template-columns:
1fr 1fr;

gap:40px;
}

}

@media(max-width:768px){

.footer{

padding:70px 0 25px;
}

.footer-grid{

grid-template-columns:1fr;

gap:35px;
}

.footer-socials{

justify-content:flex-start;
}

}