/* ==================================================
   02 - HERO SECTION
   Prefixo isolado: ce-hero
================================================== */

.ce-hero{

/* VARIÁVEIS DO HERO */

--hero-bg:#0A0A0F;
--hero-text:#FFFFFF;
--hero-text-soft:rgba(255,255,255,0.75);
--hero-text-muted:rgba(255,255,255,0.55);

--hero-green:#00F5A0;
--hero-cyan:#22D3EE;

--hero-border:rgba(255,255,255,0.05);

--hero-font:'Inter',system-ui,-apple-system,sans-serif;


/* LAYOUT */

position:relative;

/* ALTURA CORRIGIDA */
min-height:100svh;

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

padding:120px 20px 110px;

background:var(--hero-bg);

border-bottom:1px solid var(--hero-border);

overflow:hidden;
isolation:isolate;

font-family:var(--hero-font);
color:var(--hero-text);

}


/* BACKGROUND GRADIENT */

.ce-hero-bg{

position:absolute;
inset:0;

background:
radial-gradient(circle at 30% 30%, rgba(0,245,160,0.04) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(34,211,238,0.04) 0%, transparent 50%);

animation:ceHeroGradient 16s ease infinite;

z-index:0;
}

@keyframes ceHeroGradient{
0%,100%{opacity:.5}
50%{opacity:1}
}


/* ORBS */

.ce-hero-orb{

position:absolute;
border-radius:50%;
filter:blur(90px);
z-index:0;

}

.ce-hero-orb-1{
width:320px;
height:320px;
background:rgba(0,245,160,0.15);

top:-120px;
right:-120px;

animation:ceHeroFloat 20s ease-in-out infinite;
}

.ce-hero-orb-2{
width:420px;
height:420px;
background:rgba(34,211,238,0.1);

bottom:-180px;
left:-180px;

animation:ceHeroFloat 26s ease-in-out infinite reverse;
}

@keyframes ceHeroFloat{

0%,100%{
transform:translate(0,0) scale(1);
}

50%{
transform:translate(30px,-30px) scale(1.1);
}

}


/* CONTAINER */

.ce-hero-container{

position:relative;

max-width:1000px;
margin:auto;

text-align:center;

z-index:2;

}


/* BADGE */

.ce-hero-badge{

display:inline-flex;
align-items:center;
gap:8px;

padding:8px 18px;

border-radius:100px;

background:rgba(255,255,255,0.03);
border:1px solid rgba(0,245,160,0.2);

color:var(--hero-green);

font-size:14px;
letter-spacing:1px;
text-transform:uppercase;

margin-bottom:28px;

}


/* TITLE */

.ce-hero-title{

font-size:clamp(34px,5vw,64px);
font-weight:800;

line-height:1.1;

margin-bottom:22px;

color:var(--hero-text);

}


/* HIGHLIGHT */

.ce-hero-highlight{

background:linear-gradient(
135deg,
var(--hero-green),
var(--hero-cyan)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}


/* DESCRIPTION */

.ce-hero-description{

max-width:720px;
margin:0 auto 40px;

font-size:clamp(16px,1.6vw,20px);

color:var(--hero-text-soft);

line-height:1.7;

}


/* CTA */

.ce-hero-button{

position:relative;

display:inline-block;

padding:18px 42px;

border-radius:14px;

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

letter-spacing:1px;

text-decoration:none;

color:#0A0A0F;

background:linear-gradient(
135deg,
var(--hero-green),
#00c9a7
);

overflow:hidden;

box-shadow:0 10px 35px rgba(0,245,160,0.3);

transition:.3s;

}

.ce-hero-button:hover{
transform:translateY(-3px);
box-shadow:0 16px 45px rgba(0,245,160,0.4);
}


/* BUTTON GLOW */

.ce-hero-button-glow{

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transition:.5s;

}

.ce-hero-button:hover .ce-hero-button-glow{
left:100%;
}


/* TRUST ITEMS */

.ce-hero-trust{

display:flex;
justify-content:center;

gap:30px;

margin-top:32px;

}

.ce-hero-trust-item{

display:flex;
align-items:center;

gap:6px;

font-size:14px;

color:var(--hero-text-muted);

}

.ce-hero-trust-icon{

color:var(--hero-green);
font-weight:bold;

}


/* =====================================
   RESPONSIVIDADE
===================================== */

@media (max-width:768px){

.ce-hero{
padding:110px 22px 90px;
min-height:100svh;
}

.ce-hero-title{
font-size:clamp(28px,7vw,42px);
}

.ce-hero-description{
font-size:16px;
}

.ce-hero-button{
width:100%;
max-width:320px;
padding:16px 28px;
font-size:15px;
}

.ce-hero-trust{
flex-direction:column;
gap:10px;
align-items:center;
}

}


/* MOBILE PEQUENO */

@media (max-width:480px){

.ce-hero-title{
font-size:26px;
}

.ce-hero-description{
font-size:15px;
}

}