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

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  color:#fff;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,113,14,.25), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(47,50,169,.30), transparent 30%),
    linear-gradient(135deg,#060606 0%,#101014 48%,#050506 100%);
}
.noise{position:fixed;inset:0;opacity:.08;pointer-events:none;z-index:3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.light{position:fixed;width:420px;height:420px;border-radius:50%;filter:blur(70px);opacity:.40;animation:pulse 5s ease-in-out infinite;pointer-events:none}
.light-one{left:-130px;top:80px;background:#ff6a00}.light-two{right:-140px;bottom:90px;background:#3033a6;animation-delay:1.4s}
.road-glow{position:fixed;left:0;right:0;bottom:0;height:36vh;background:linear-gradient(transparent,rgba(255,106,0,.12));pointer-events:none}

.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:70px 8vw 130px;position:relative;z-index:4}
.card{max-width:650px;padding:42px;border:1px solid rgba(255,255,255,.13);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03));box-shadow:0 30px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(18px);animation:floatCard 4.5s ease-in-out infinite}
.badge{display:inline-flex;padding:9px 15px;border:1px solid rgba(255,113,14,.42);border-radius:999px;background:rgba(255,113,14,.10);color:#ff9b42;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:22px}
.client-logo{width:min(390px,100%);display:block;margin:0 0 24px;filter:drop-shadow(0 16px 32px rgba(0,0,0,.65));animation:logoEntrance 1.2s cubic-bezier(.2,.8,.2,1) both}
h1{font-size:clamp(42px,6vw,86px);line-height:.92;font-weight:900;text-transform:uppercase;letter-spacing:-.06em;margin-bottom:20px;text-shadow:0 0 34px rgba(255,113,14,.25)}
.lead{font-size:clamp(17px,2vw,21px);line-height:1.6;color:rgba(255,255,255,.78);max-width:590px}
.progress-wrap{margin:34px 0}.progress-text{display:flex;justify-content:space-between;margin-bottom:10px;font-weight:800;color:rgba(255,255,255,.83)}
.progress-bar{height:12px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;box-shadow:inset 0 0 12px rgba(0,0,0,.55)}
#progress{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#ff6a00,#ffffff,#3033a6);box-shadow:0 0 26px rgba(255,106,0,.75);transition:width .25s ease}
.actions{display:flex;gap:14px;flex-wrap:wrap}.btn{padding:15px 21px;border-radius:16px;text-decoration:none;font-weight:900;transition:.25s ease}.primary{background:#ff6a00;color:#fff;box-shadow:0 14px 30px rgba(255,106,0,.35)}.primary:hover{transform:translateY(-4px);box-shadow:0 22px 42px rgba(255,106,0,.48)}.ghost{border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.05)}.ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-4px)}

.showcase{height:520px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:40px;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08)}
.sun{position:absolute;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,#ffb15c,#ff6a00 58%,transparent 60%);filter:blur(.4px);box-shadow:0 0 90px rgba(255,106,0,.4);animation:sunSpin 14s linear infinite}
.speed-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 80px,rgba(255,255,255,.16) 82px,transparent 86px);transform:skewX(-15deg);animation:lines 1.2s linear infinite;opacity:.28}
.car{width:410px;height:150px;position:relative;animation:carBounce .9s ease-in-out infinite alternate;z-index:2}.car-body{position:absolute;bottom:32px;left:20px;width:360px;height:78px;border-radius:55px 90px 32px 28px;background:linear-gradient(180deg,#fff,#cfcfcf 45%,#111 46%,#030303);box-shadow:0 20px 40px rgba(0,0,0,.55)}.car-top{position:absolute;bottom:88px;left:120px;width:175px;height:70px;background:linear-gradient(145deg,#fff,#191919 52%,#fff 54%);clip-path:polygon(12% 100%,34% 18%,72% 20%,96% 100%);border-radius:20px}.headlight{position:absolute;right:22px;bottom:70px;width:70px;height:18px;border-radius:999px;background:#ff6a00;box-shadow:0 0 35px #ff6a00,90px 0 80px rgba(255,106,0,.42)}.wheel{position:absolute;bottom:0;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle,#fff 0 10%,#111 11% 38%,#fff 39% 45%,#050505 46%);border:8px solid #050505;animation:wheel .35s linear infinite}.wheel-one{left:78px}.wheel-two{right:72px}.shadow{position:absolute;bottom:140px;width:390px;height:28px;border-radius:50%;background:rgba(0,0,0,.58);filter:blur(12px);animation:shadow .9s ease-in-out infinite alternate}

.features{position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:0 8vw 130px}.features article{padding:30px;border-radius:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);transition:.25s ease}.features article:hover{transform:translateY(-8px);background:rgba(255,255,255,.10)}.features span{color:#ff6a00;font-weight:900}.features h2{margin:12px 0;font-size:24px}.features p{color:rgba(255,255,255,.72);line-height:1.5}
.road{position:fixed;left:0;right:0;bottom:0;height:96px;background:linear-gradient(#151515,#050505);z-index:5;border-top:1px solid rgba(255,255,255,.10);overflow:hidden}.lane{position:absolute;top:44px;width:200%;height:5px;background:repeating-linear-gradient(90deg,#fff 0 80px,transparent 80px 145px);opacity:.75;animation:roadMove 1s linear infinite}.small-car{position:absolute;bottom:22px;width:82px;height:28px;border-radius:20px 30px 8px 8px;background:#ff6a00;box-shadow:0 0 22px rgba(255,106,0,.6);animation:drive 9s linear infinite}.small-car:before{content:"";position:absolute;left:20px;top:-16px;width:38px;height:20px;border-radius:14px 14px 0 0;background:#fff}.small-car:after{content:"";position:absolute;left:12px;bottom:-8px;width:14px;height:14px;border-radius:50%;background:#050505;box-shadow:44px 0 #050505}.small-two{animation-duration:12s;animation-delay:-5s;background:#3033a6}.small-three{animation-duration:7s;animation-delay:-2.2s;background:#fff}
footer{position:relative;z-index:6;padding:0 8vw 120px}.savalde-brand{display:inline-flex;align-items:center;gap:12px;color:rgba(255,255,255,.80)}.savalde-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#ff6a00,#0f172a);font-weight:900}.savalde-brand small{display:block;color:rgba(255,255,255,.55);margin-top:3px}

@keyframes pulse{50%{transform:scale(1.14);opacity:.58}}@keyframes floatCard{50%{transform:translateY(-12px)}}@keyframes logoEntrance{from{opacity:0;transform:scale(.88) translateY(20px);filter:blur(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes lines{to{background-position:-170px 0}}@keyframes sunSpin{to{transform:rotate(360deg)}}@keyframes carBounce{to{transform:translateY(-10px)}}@keyframes wheel{to{transform:rotate(360deg)}}@keyframes shadow{to{transform:scaleX(.88);opacity:.36}}@keyframes roadMove{to{transform:translateX(-145px)}}@keyframes drive{from{left:-120px}to{left:110vw}}
@media(max-width:920px){.hero{grid-template-columns:1fr;padding:45px 22px 130px}.card{padding:28px}.showcase{height:360px}.car{transform:scale(.72);animation:carBounce .9s ease-in-out infinite alternate}.features{grid-template-columns:1fr;padding:0 22px 120px}footer{padding:0 22px 120px}}


/* SAVALDE LOGO */
.savalde-brand{
display:flex;
align-items:center;
gap:14px;
}

.savalde-logo{
width:58px;
height:58px;
object-fit:contain;
filter:drop-shadow(0 0 18px rgba(255,152,0,.35));
animation:savaldeFloat 4s ease infinite;
}

@keyframes savaldeFloat{
0%{transform:translateY(0)}
50%{transform:translateY(-4px)}
100%{transform:translateY(0)}
}

.features{
padding:60px 20px !important;
display:flex;
justify-content:center;
}

.instagram-area{
text-align:center;
}

.insta-link{
text-decoration:none;
color:white;
padding:34px;
border-radius:24px;
background:rgba(255,255,255,.04);
backdrop-filter:blur(20px);
display:inline-block;
transition:.4s;
}

.insta-link:hover{
transform:translateY(-8px);
}

.insta-icon{
font-size:72px;
margin-bottom:14px;
}

.insta-link h2{
font-size:34px;
margin:0;
}

.insta-link p{
opacity:.8;
}


/* AJUSTE INSTAGRAM - BOTAO PEQUENO */
.instagram-area{
  padding:28px 20px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

.instagram-area article,
.instagram-area h2,
.instagram-area p,
.insta-link,
.insta-icon{
  display:none !important;
}

.insta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:auto;
  max-width:max-content;
  padding:13px 22px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg, rgba(255,122,0,.95), rgba(57,52,158,.95));
  box-shadow:0 10px 30px rgba(0,0,0,.28), 0 0 24px rgba(255,122,0,.22);
  transition:transform .25s ease, box-shadow .25s ease;
}

.insta-button:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(0,0,0,.34), 0 0 30px rgba(255,122,0,.32);
}

.insta-button-icon{
  font-size:20px;
  line-height:1;
}


/* FUNDO DEGRADE ANIMADO */

body{
background:
linear-gradient(
-45deg,
#091b33,
#12284a,
#ff8a00,
#071a2f,
#182848,
#ff6b00
)!important;

background-size:500% 500%;

animation:
bgMove 18s ease infinite;
}

@keyframes bgMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

.bg-video{
display:none!important;
}

body::after{

content:"";

position:fixed;

inset:0;

background:
radial-gradient(
circle at center,
rgba(255,138,0,.08),
rgba(0,0,0,.45)
);

pointer-events:none;

}

/* card menor */

.card{
max-width:560px!important;
padding:40px!important;
}

.client-logo{
max-width:330px!important;
margin:auto;
display:block;
}

.btn.ghost{
background:rgba(255,255,255,.08)!important;
backdrop-filter:blur(16px);

}

@media(max-width:768px){

.card{
max-width:92vw!important;
padding:26px!important;
}

.client-logo{
max-width:240px!important;
}

}