
:root{
--black:#040302;
--deep:#090604;
--brown:#15100b;
--gold:#d8a64b;
--gold2:#a86f28;
--cream:#fff7ea;
--muted:#c8b8a2;
--line:rgba(216,166,75,.26);
--glass:rgba(255,255,255,.055)}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
background:var(--black);
color:var(--cream);
font-family:Inter,Arial,sans-serif;
overflow-x:hidden}
a{
color:inherit;
text-decoration:none}
img{
max-width:100%;
display:block}
.wrap{
width:min(1200px,92vw);
margin:auto}
.eyebrow{
color:var(--gold);
font-size:11px;
text-transform:uppercase;
letter-spacing:.28em;
font-weight:800}
h1,h2,h3{
font-family:'Playfair Display',serif;
margin:0;
line-height:.98;
letter-spacing:-.045em}
h1{
font-size:clamp(54px,7.5vw,112px);
max-width:760px}
h2{
font-size:clamp(38px,5vw,74px)}
h3{
font-size:clamp(28px,3vw,44px)}
p{
color:var(--muted);
line-height:1.75}
.script{
display:block;
font-family:'Playfair Display',serif;
color:var(--gold);
font-style:italic;
font-weight:500}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
border:0;
cursor:pointer;
background:linear-gradient(135deg,#efbd65,#aa6e25);
color:#120a02;
padding:16px 24px;
border-radius:999px;
font-weight:900;
font-size:12px;
letter-spacing:.1em;
text-transform:uppercase;
box-shadow:0 22px 60px rgba(216,166,75,.24)}
.btn.out{
background:rgba(255,255,255,.04);
color:var(--gold);
border:1px solid var(--line);
box-shadow:none}
.line{
height:1px;
background:linear-gradient(90deg,transparent,var(--line),transparent)}

header{
position:fixed;
top:0;
left:0;
right:0;
z-index:50;
background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.28));
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(216,166,75,.13)}
nav{
height:78px;
display:flex;
align-items:center;
justify-content:space-between}
.logo{
font-family:'Playfair Display',serif;
font-size:28px;
letter-spacing:-.045em}
.logo small{
display:block;
font-family:Inter;
font-size:10px;
color:var(--gold);
letter-spacing:.1em;
margin-top:3px}
.menu{
display:flex;
gap:26px;
font-size:11px;
text-transform:uppercase;
letter-spacing:.12em;
color:#eadfce}
.menu a:hover{
color:var(--gold)}

.hero{
min-height:100vh;
padding:128px 0 54px;
position:relative;
background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.8) 42%,rgba(0,0,0,.2)),url('assets/images/image-01.jpg') center/cover no-repeat}
.hero:after{
content:"";
position:absolute;
inset:auto 0 0;
height:180px;
background:linear-gradient(0deg,var(--black),transparent);
pointer-events:none}
.hero-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.08fr .92fr;
gap:42px;
align-items:center}
.hero-copy{
font-size:18px;
max-width:580px;
margin:26px 0 28px;
color:#eee2d2}
.actions{
display:flex;
gap:14px;
flex-wrap:wrap}
.leadbox{
background:linear-gradient(180deg,rgba(14,10,7,.88),rgba(4,3,2,.92));
border:1px solid var(--line);
border-radius:30px;
padding:28px;
box-shadow:0 30px 100px rgba(0,0,0,.55)}
.leadbox h2{
font-size:34px;
letter-spacing:-.02em}
.leadbox p{
margin:10px 0 18px}
form{
display:grid;
gap:12px}
input,select,textarea{
width:100%;
background:#0c0907;
border:1px solid rgba(216,166,75,.24);
border-radius:14px;
color:var(--cream);
padding:15px 15px;
font:inherit;
outline:none}
textarea{
min-height:98px;
resize:vertical}
input::placeholder,textarea::placeholder{
color:#8f8170}
select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 12px) 21px;
background-size:6px 6px,6px 6px;
background-repeat:no-repeat}
.form-two{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px}
.lead-honeypot{
position:absolute;
left:-9999px;
width:1px;
height:1px;
opacity:0;
pointer-events:none}
.form-note{
font-size:11px;
color:#9d8d79;
line-height:1.5;
margin:0}

.stats{
position:relative;
z-index:3;
margin-top:34px;
display:grid;
grid-template-columns:repeat(4,1fr);
border:1px solid var(--line);
border-radius:22px;
background:rgba(9,6,4,.76);
backdrop-filter:blur(10px);
overflow:hidden}
.stat{
padding:22px;
text-align:center;
border-right:1px solid var(--line)}
.stat:last-child{
border-right:0}
.stat b{
display:block;
font-family:'Playfair Display',serif;
color:var(--gold);
font-size:42px;
font-weight:500;
line-height:1}
.stat span{
display:block;
margin-top:8px;
font-size:11px;
text-transform:uppercase;
letter-spacing:.12em;
color:#e7d6bf}

section{
padding:88px 0;
position:relative}
.split{
display:grid;
grid-template-columns:.86fr 1.14fr;
gap:54px;
align-items:center}
.panel{
border:1px solid var(--line);
border-radius:30px;
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
padding:36px}
.pill-imgs{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px}
.pill-imgs img{
height:430px;
width:100%;
object-fit:cover;
border-radius:999px;
border:1px solid var(--line);
filter:saturate(1.03) contrast(1.04)}
.gold-card{
border:1px solid var(--line);
border-radius:26px;
padding:28px;
background:radial-gradient(circle at 20% 0,rgba(216,166,75,.16),transparent 36%),rgba(255,255,255,.035)}
.gold-card h4{
font-family:'Playfair Display',serif;
font-size:26px;
margin:12px 0 6px}
.gold-card p{
margin:0;
font-size:14px}
.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:34px}
.service{
min-height:238px;
position:relative;
overflow:hidden;
border:1px solid var(--line);
border-radius:26px;
background:#0b0806}
.service img{
height:100%;
width:100%;
object-fit:cover;
position:absolute;
inset:0;
opacity:.57;
transition:.4s}
.service:hover img{
transform:scale(1.05);
opacity:.72}
.service div{
position:absolute;
inset:auto 0 0;
padding:22px;
background:linear-gradient(0deg,rgba(0,0,0,.92),transparent)}
.service h4{
font-family:'Playfair Display',serif;
font-size:25px;
margin:0 0 7px}
.service span{
color:var(--gold);
font-size:11px;
text-transform:uppercase;
letter-spacing:.16em;
font-weight:800}

.dark-band{
background:radial-gradient(circle at 15% 20%,rgba(216,166,75,.13),transparent 32%),#070504;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.sectors{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:32px}
.sector{
padding:28px;
border:1px solid var(--line);
border-radius:24px;
background:rgba(255,255,255,.035)}
.sector b{
color:var(--gold);
font-size:13px;
text-transform:uppercase;
letter-spacing:.14em}
.sector h4{
font-family:'Playfair Display',serif;
font-size:28px;
margin:12px 0}
.process{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-top:34px}
.step{
border-left:1px solid var(--line);
padding:0 22px}
.step strong{
font-family:'Playfair Display',serif;
font-size:44px;
color:var(--gold);
font-weight:400}
.step h4{
font-size:20px;
margin:10px 0 8px}
.step p{
font-size:14px;
margin:0}

.showcase{
display:grid;
grid-template-columns:1.2fr .8fr .8fr;
gap:18px;
margin-top:34px}
.showcase img{
height:310px;
width:100%;
object-fit:cover;
border-radius:28px;
border:1px solid var(--line)}
.showcase img:first-child{
height:640px;
grid-row:span 2}
.why{
background:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.66),rgba(0,0,0,.18)),url('assets/images/image-02.jpg') center/cover no-repeat;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.checks{
display:grid;
gap:14px;
margin-top:24px;
max-width:620px}
.checks div{
padding:14px 0;
border-bottom:1px solid rgba(216,166,75,.15);
color:#efe5d6}
.checks b{
color:var(--gold);
margin-right:12px}
.quote{
margin-top:34px;
max-width:600px;
border:1px solid var(--line);
border-radius:28px;
padding:28px;
background:rgba(0,0,0,.5)}
.quote p{
font-family:'Playfair Display',serif;
font-size:28px;
line-height:1.25;
color:#fff;
margin:0}
.final{
text-align:center;
background:radial-gradient(circle at 50% 0,rgba(216,166,75,.18),transparent 38%),#080604}
.final p{
max-width:700px;
margin:16px auto 28px}
.contact-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:32px;
text-align:left}
.contact-card{
border:1px solid var(--line);
border-radius:24px;
padding:24px;
background:rgba(255,255,255,.035)}
.contact-card b{
display:block;
color:var(--gold);
margin-bottom:7px}
footer{
padding:30px 0;
color:var(--muted);
border-top:1px solid var(--line)}
.foot{
display:flex;
justify-content:space-between;
gap:20px;
align-items:center}
.sticky{
display:none}
#lead{
scroll-margin-top:86px}
.whatsapp-float{
position:fixed;
right:22px;
bottom:22px;
z-index:70;
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#25d366;
color:#fff;
box-shadow:0 8px 28px rgba(37,211,102,.45),0 4px 12px rgba(0,0,0,.35);
transition:transform .2s ease,box-shadow .2s ease}
.whatsapp-float::before{
content:"";
position:absolute;
inset:-4px;
border-radius:50%;
border:2px solid rgba(37,211,102,.45);
animation:whatsapp-pulse 2.4s ease-out infinite}
.whatsapp-float svg{
width:30px;
height:30px;
fill:currentColor;
position:relative;
z-index:1}
.whatsapp-float:hover,
.whatsapp-float:focus-visible{
transform:scale(1.08);
box-shadow:0 12px 36px rgba(37,211,102,.55),0 6px 16px rgba(0,0,0,.4);
outline:none}
@keyframes whatsapp-pulse{
0%{
transform:scale(1);
opacity:.7}
70%{
transform:scale(1.18);
opacity:0}
100%{
transform:scale(1.18);
opacity:0}}

@media(max-width:960px){
.menu,header .btn{
display:none}
nav{
height:66px}
.logo{
font-size:24px}
.hero{
min-height:auto;
padding:96px 0 36px;
background-position:center top}
.hero-grid,.split{
grid-template-columns:1fr}
.leadbox{
padding:22px;
border-radius:24px}
.form-two{
grid-template-columns:1fr}
.stats{
grid-template-columns:repeat(2,1fr)}
.stat{
border-bottom:1px solid var(--line)}
section{
padding:58px 0}
.pill-imgs{
grid-template-columns:repeat(2,1fr)}
.pill-imgs img{
height:300px}
.cards,.sectors,.process,.contact-grid{
grid-template-columns:1fr 1fr}
.showcase{
grid-template-columns:1fr 1fr}
.showcase img:first-child{
height:310px;
grid-row:auto}
.foot{
display:block;
text-align:center}
.sticky{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:60;
display:grid;
grid-template-columns:1fr 1fr;
background:#050403;
border-top:1px solid var(--line)}
.sticky a{
padding:15px;
text-align:center;
font-weight:900;
font-size:12px;
text-transform:uppercase;
letter-spacing:.06em}
#lead{
scroll-margin-top:76px}
body{
padding-bottom:50px}
.whatsapp-float{
right:16px;
bottom:68px}
}

@media(max-width:560px){
h1{
font-size:48px}
.hero-copy{
font-size:15px}
.actions .btn{
width:100%}
.stats,.cards,.sectors,.process,.showcase,.contact-grid{
grid-template-columns:1fr}
.pill-imgs img{
height:245px}
.stat{
border-right:0}
.quote p{
font-size:24px}
}

