/* ============================================================
EXECUTIVE HUNTER — GLOBAL DESIGN TOKENS
============================================================ */

:root{

--eh-dark:#0b1320;
--eh-blue:#0f1c2e;
--eh-gold:#c9a84c;
--eh-gold-light:#e4c97a;
--eh-text:#ffffff;

}


/* ============================================================
GLOBAL BASE
============================================================ */

body{

margin:0;
font-family:"DM Sans", sans-serif;

background:var(--eh-dark);
color:var(--eh-text);

line-height:1.6;

}


/* ============================================================
IMAGES
============================================================ */

img{

max-width:100%;
height:auto;
display:block;

}


/* ============================================================
HERO SECTION
============================================================ */

.hero{

min-height:100vh;

display:flex;
align-items:center;

position:relative;
overflow:hidden;

padding:80px 0;

/* base background blu EH */

background:radial-gradient(
circle at top,
#1b2a44,
#0b1320
);

}


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

.hero-video{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

opacity:.35;   /* rende il video più soft */

z-index:0;

}


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

.hero-bg{

position:absolute;
inset:0;

background:
linear-gradient(
rgba(11,19,32,.85),
rgba(11,19,32,.95)
),
radial-gradient(
circle at top,
rgba(15,28,46,.85),
rgba(11,19,32,.95)
);

z-index:1;

}


/* ============================================================
HERO LAYOUT
============================================================ */

.hero-container{

width:100%;
max-width:1200px;

margin:auto;
padding:0 24px;

display:grid;
grid-template-columns:1fr 1fr;
gap:80px;

align-items:center;

position:relative;
z-index:2;

}


/* ============================================================
HERO TITLE
============================================================ */

.hero h1{

font-family:"Cormorant Garamond", serif;

font-size:56px;
line-height:1.1;

margin-bottom:24px;

color:#ffffff;

}


/* ============================================================
HERO TAGLINE (sotto il nome brand)
============================================================ */

.hero-tagline{

display:block;

font-size:48px;
font-weight:400;

color:var(--eh-gold);

margin-top:8px;

}

@media (max-width:640px){
.hero-tagline{ font-size:32px; }
}


/* ============================================================
HERO SUBTITLE
============================================================ */

.hero-subtitle{

font-size:20px;
color:rgba(255,255,255,.85);

max-width:480px;
margin-bottom:40px;

}


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

.hero-buttons{
display:flex;
gap:18px;
align-items:center;
}

.hero-buttons a{

display:inline-flex;
align-items:center;
justify-content:center;

height:52px;
padding:0 30px;

border-radius:8px;

text-decoration:none;
font-weight:600;

white-space:nowrap;

}


/* ============================================================
BUTTON BASE
============================================================ */

.btn-primary,
.btn-secondary{

display:inline-flex;
align-items:center;
justify-content:center;

height:52px;
padding:0 28px;

border-radius:8px;

text-decoration:none;
font-weight:600;

border:1px solid transparent;

transition:all .25s ease;

}


/* ============================================================
PRIMARY BUTTON
============================================================ */

.btn-primary{

background:var(--eh-gold);
color:#000;

border-color:var(--eh-gold);

}

.btn-primary:hover{

background:var(--eh-gold-light);
border-color:var(--eh-gold-light);

}


/* ============================================================
SECONDARY BUTTON
============================================================ */

.btn-secondary{

background:transparent;
color:#fff;

border-color:var(--eh-gold);

}

.btn-secondary:hover{

background:rgba(201,168,76,.12);

}


/* ============================================================
HERO IMAGE
============================================================ */

.hero-image{
position:relative;
}

.hero-image img{

width:100%;

border-radius:14px;

box-shadow:0 40px 100px rgba(0,0,0,.6);

position:relative;
z-index:2;

}


/* ============================================================
HERO GLOW EFFECT
============================================================ */

.hero-glow{

position:absolute;

width:420px;
height:420px;

background:radial-gradient(
circle,
rgba(201,168,76,.35),
transparent 70%
);

filter:blur(80px);

top:50%;
left:50%;

transform:translate(-50%,-50%);

z-index:0;

}


/* ============================================================
RESPONSIVE — TABLET
============================================================ */

@media (max-width:1024px){

.hero-container{

grid-template-columns:1fr;

gap:60px;

text-align:center;

}

.hero-subtitle{
margin:auto;
}

.hero-buttons{
justify-content:center;
}

}


/* ============================================================
RESPONSIVE — MOBILE
============================================================ */

@media (max-width:640px){

.hero h1{
font-size:38px;
}

.hero-subtitle{
font-size:18px;
}

}

/* ============================================================
SEO CONTENT
============================================================ */

.seo-content{
padding:120px 0;
background:#ffffff;
}

.seo-content .container{
max-width:900px;
margin:auto;
padding:0 24px;
}

.seo-content h2{
font-family:"Cormorant Garamond", serif;
font-size:36px;
margin-bottom:24px;
text-align:center;
color:#0b1320;
}

.seo-content p{
font-size:17px;
line-height:1.7;
margin-bottom:18px;
color:#333;
text-align:center;
}
/* Hero tagline emphasis words (Engine, Wins) */
.hero-word-white { color: #ffffff; }