﻿*{
box-sizing:border-box
}

html{
scroll-behavior:smooth
}

body{
margin:0;
color:#10182b;
background:#fff;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif
}

a{
color:inherit;
text-decoration:none
}

button,
a{
-webkit-tap-highlight-color:transparent
}


/* ============================================================
   PAGE
   ============================================================ */

.landing-page{
min-height:100dvh;
overflow:hidden;
background:
radial-gradient(
circle at 95% 5%,
rgba(255,40,109,.08),
transparent 27%
),
#fff
}


/* ============================================================
   HEADER
   ============================================================ */

.landing-header{
width:min(1120px,calc(100% - 32px));
height:82px;
display:flex;
align-items:center;
justify-content:space-between;
margin:0 auto
}

.landing-brand{
display:flex;
align-items:center;
gap:4px
}

.landing-brand img,
.landing-logo-fallback{
width:38px;
height:38px;
flex:0 0 auto
}

.landing-brand img{
display:block;
object-fit:contain
}

.landing-logo-fallback{
display:grid;
place-items:center;
border-radius:14px;
color:#fff;
background:
linear-gradient(
135deg,
#ff286d,
#ff6578
);
font-size:18px
}

.landing-brand strong{
display:inline-flex;
align-items:center;
font-size:25px;
font-weight:900;
letter-spacing:-1.2px
}

.landing-brand strong span{
color:#10182b
}

.landing-brand strong b{
color:#ff286d
}

.landing-login-top{
height:41px;
display:flex;
align-items:center;
justify-content:center;
padding:0 17px;
border:1px solid #e7eaf0;
border-radius:13px;
color:#252e41;
background:#fff;
font-size:12px;
font-weight:800;
box-shadow:
0 5px 18px
rgba(15,25,45,.04)
}


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

.landing-hero{
width:min(1120px,calc(100% - 32px));
min-height:650px;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
margin:0 auto;
padding:45px 0 75px
}

.landing-eyebrow,
.landing-section-eyebrow{
display:block;
color:#ff286d;
font-size:10px;
font-weight:900;
letter-spacing:.13em
}

.landing-hero-content h1{
max-width:620px;
margin:13px 0 18px;
color:#10182b;
font-size:68px;
line-height:.98;
letter-spacing:-4.2px
}

.landing-hero-content h1 em{
color:#ff286d;
font-style:normal
}

.landing-hero-content>p{
max-width:510px;
margin:0;
color:#667083;
font-size:17px;
line-height:1.65
}

.landing-actions{
display:flex;
align-items:center;
gap:13px;
margin-top:29px
}

.landing-primary-button{
height:53px;
display:flex;
align-items:center;
justify-content:center;
gap:17px;
padding:0 21px;
border-radius:16px;
color:#fff;
background:
linear-gradient(
135deg,
#ff286d,
#ff5278
);
font-size:13px;
font-weight:900;
box-shadow:
0 12px 28px
rgba(255,40,109,.22)
}

.landing-primary-button span{
font-size:18px
}

.landing-secondary-button{
height:53px;
display:flex;
align-items:center;
justify-content:center;
padding:0 20px;
border:1px solid #e7eaf0;
border-radius:16px;
color:#354055;
font-size:12px;
font-weight:800;
background:#fff
}

.landing-mini-proof{
display:flex;
align-items:center;
gap:7px;
margin-top:20px;
color:#8a92a1;
font-size:10px;
font-weight:700
}

.landing-proof-dot{
width:7px;
height:7px;
border-radius:50%;
background:#21c978;
box-shadow:
0 0 0 4px
rgba(33,201,120,.10)
}


/* ============================================================
   HERO VISUAL
   ============================================================ */

.landing-visual{
position:relative;
height:560px
}

.landing-orbit{
position:absolute;
border:1px solid rgba(255,40,109,.12);
border-radius:50%
}

.orbit-one{
width:460px;
height:460px;
top:40px;
left:35px
}

.orbit-two{
width:340px;
height:340px;
top:100px;
left:95px
}

.landing-main-card{
position:absolute;
z-index:5;
top:29px;
left:50%;
width:325px;
overflow:hidden;
transform:
translateX(-50%)
rotate(2.4deg);
border-radius:30px;
background:#fff;
box-shadow:
0 28px 70px
rgba(20,29,49,.17)
}

.landing-main-photo{
position:relative;
height:390px;
overflow:hidden;
background:
linear-gradient(
145deg,
#f3afbd,
#923c60 58%,
#232639
)
}

.landing-photo-placeholder{
position:absolute;
inset:0;
display:grid;
place-items:center;
color:rgba(255,255,255,.70)
}

.landing-photo-placeholder svg{
width:160px;
height:160px
}

.landing-photo-shade{
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
transparent 35%,
rgba(9,13,24,.74) 100%
)
}

.landing-person-info{
position:absolute;
left:19px;
right:19px;
bottom:18px;
color:#fff
}

.landing-online{
width:max-content;
display:flex;
align-items:center;
gap:5px;
margin-bottom:8px;
padding:5px 8px;
border-radius:999px;
background:#21b967;
font-size:8px;
font-weight:800
}

.landing-online span{
width:5px;
height:5px;
border-radius:50%;
background:#fff
}

.landing-person-info h2{
margin:0 0 8px;
font-size:26px;
letter-spacing:-.7px
}

.landing-person-info p{
margin:4px 0 0;
font-size:9px;
font-weight:700
}

.landing-card-actions{
height:77px;
display:grid;
grid-template-columns:55px 1fr 55px;
gap:9px;
align-items:center;
padding:10px 14px
}

.landing-card-actions>span{
width:46px;
height:46px;
display:grid;
place-items:center;
border-radius:50%;
font-size:22px
}

.landing-pass{
color:#758093;
background:#f0f2f5
}

.landing-heart{
color:#fff;
background:
linear-gradient(
135deg,
#ff286d,
#ff5d7d
);
box-shadow:
0 7px 17px
rgba(255,40,109,.23)
}

.landing-card-actions div{
display:grid;
gap:2px;
text-align:center
}

.landing-card-actions small{
color:#969dab;
font-size:7px;
font-weight:900
}

.landing-card-actions strong{
font-size:10px
}


/* Floating cards */

.landing-floating-card{
position:absolute;
z-index:10;
display:grid;
grid-template-columns:38px 1fr;
gap:9px;
align-items:center;
padding:10px 13px;
border:1px solid rgba(230,233,239,.8);
border-radius:17px;
background:rgba(255,255,255,.94);
backdrop-filter:blur(13px);
box-shadow:
0 12px 30px
rgba(18,28,48,.10)
}

.landing-floating-card>span{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:13px;
color:#ff286d;
background:#fff0f5;
font-size:16px
}

.landing-floating-card div{
display:grid
}

.landing-floating-card small{
color:#9a9fac;
font-size:7px;
font-weight:900;
letter-spacing:.05em
}

.landing-floating-card strong{
margin-top:2px;
font-size:10px
}

.floating-left{
left:5px;
top:125px
}

.floating-right{
right:-5px;
bottom:105px
}


/* ============================================================
   PURPOSE
   ============================================================ */

.landing-purpose{
padding:85px max(16px,calc((100% - 1120px)/2));
background:#0e1628
}

.landing-purpose>div:first-child{
max-width:650px
}

.landing-purpose h2{
margin:10px 0 0;
color:#fff;
font-size:37px;
line-height:1.13;
letter-spacing:-1.6px
}

.landing-purpose-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:42px
}

.landing-purpose-grid article{
padding:24px;
border:1px solid rgba(255,255,255,.07);
border-radius:21px;
background:rgba(255,255,255,.035)
}

.landing-purpose-grid article>span{
color:#ff4b79;
font-size:9px;
font-weight:900
}

.landing-purpose-grid h3{
margin:19px 0 8px;
color:#fff;
font-size:18px
}

.landing-purpose-grid p{
margin:0;
color:#9da5b4;
font-size:11px;
line-height:1.65
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.landing-final-cta{
max-width:760px;
margin:0 auto;
padding:100px 25px;
text-align:center
}

.landing-final-cta>img,
.landing-final-cta>span{
width:68px;
height:68px;
display:grid;
place-items:center;
margin:0 auto 17px;
object-fit:contain;
font-size:28px;
color:#ff286d
}

.landing-final-cta h2{
margin:0;
font-size:37px;
line-height:1.12;
letter-spacing:-1.7px
}

.landing-final-cta p{
margin:11px 0 22px;
color:#798294;
font-size:13px
}

.landing-final-cta a{
height:50px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 23px;
border-radius:15px;
color:#fff;
background:#ff286d;
font-size:12px;
font-weight:900;
box-shadow:
0 10px 24px
rgba(255,40,109,.20)
}


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

.landing-footer{
width:min(1120px,calc(100% - 32px));
display:flex;
align-items:center;
justify-content:space-between;
margin:0 auto;
padding:25px 0 35px;
border-top:1px solid #eceef2
}

.landing-footer-brand{
display:grid;
gap:3px
}

.landing-footer-brand strong{
font-size:16px
}

.landing-footer-brand strong span{
color:#ff286d
}

.landing-footer-brand small{
color:#9aa1ae;
font-size:8px
}

.landing-footer>div:last-child{
display:flex;
gap:17px
}

.landing-footer a{
color:#667083;
font-size:9px;
font-weight:800
}


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

@media(max-width:760px){

.landing-header{
height:68px
}

.landing-brand img,
.landing-logo-fallback{
width:33px;
height:33px
}

.landing-brand strong{
font-size:22px
}

.landing-login-top{
height:37px;
padding:0 13px;
font-size:10px
}

.landing-hero{
min-height:auto;
grid-template-columns:1fr;
gap:22px;
padding:48px 0 55px
}

.landing-hero-content{
text-align:center
}

.landing-hero-content h1{
margin:
11px
auto
16px;
font-size:48px;
letter-spacing:-3px
}

.landing-hero-content>p{
max-width:390px;
margin:0 auto;
font-size:14px
}

.landing-actions{
flex-direction:column;
gap:8px
}

.landing-primary-button,
.landing-secondary-button{
width:100%;
max-width:390px
}

.landing-mini-proof{
justify-content:center
}

.landing-visual{
height:490px
}

.landing-main-card{
width:282px
}

.landing-main-photo{
height:338px
}

.orbit-one{
width:370px;
height:370px;
left:50%;
top:55px;
transform:translateX(-50%)
}

.orbit-two{
width:275px;
height:275px;
left:50%;
top:101px;
transform:translateX(-50%)
}

.floating-left{
left:0;
top:115px
}

.floating-right{
right:0;
bottom:58px
}

.landing-floating-card{
padding:8px 10px
}

.landing-floating-card>span{
width:33px;
height:33px
}

.landing-purpose{
padding-top:65px;
padding-bottom:65px
}

.landing-purpose h2{
font-size:29px
}

.landing-purpose-grid{
grid-template-columns:1fr;
gap:9px;
margin-top:28px
}

.landing-purpose-grid article{
padding:20px
}

.landing-purpose-grid h3{
margin-top:10px
}

.landing-final-cta{
padding-top:70px;
padding-bottom:70px
}

.landing-final-cta h2{
font-size:29px
}

}


@media(max-width:370px){

.landing-hero-content h1{
font-size:42px
}

.landing-main-card{
width:265px
}

.floating-left{
left:-15px
}

.floating-right{
right:-15px
}

}

/* ============================================================
   CRUSHRUNNER - NUMEROS DA SECAO
   ============================================================ */

.landing-purpose-grid article>span{
display:block;
margin-bottom:12px;
color:#ff286d;
font-size:46px!important;
font-weight:900;
line-height:.9;
letter-spacing:-2px;
opacity:.95
}

.landing-purpose-grid h3{
margin-top:6px!important
}


/* ============================================================
   CRUSHRUNNER - RODAPE PROFISSIONAL
   ============================================================ */

.landing-footer-rich{
width:min(1120px,calc(100% - 32px));
display:grid;
grid-template-columns:1fr auto;
gap:30px;
align-items:end;
margin:0 auto;
padding:36px 0 42px;
border-top:1px solid #e9ecf1
}

.landing-footer-left{
display:grid;
gap:9px
}

.landing-footer-logo{
display:flex;
align-items:center;
gap:5px;
width:max-content
}

.landing-footer-logo img,
.landing-footer-logo .landing-logo-fallback{
width:46px;
height:46px;
flex:0 0 auto
}

.landing-footer-logo img{
display:block;
object-fit:contain
}

.landing-footer-logo strong{
display:inline-flex;
align-items:center;
font-size:28px;
font-weight:900;
line-height:1;
letter-spacing:-1.3px
}

.landing-footer-logo strong span{
color:#10182b
}

.landing-footer-logo strong b{
color:#ff286d
}

.landing-footer-left>p{
margin:0;
color:#798293;
font-size:10px
}

.landing-footer-links{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:3px
}

.landing-footer-links a{
color:#596376;
font-size:9px;
font-weight:800;
transition:
color .18s ease
}

.landing-footer-links a:hover{
color:#ff286d
}


/* botoes com destaque real */

.landing-footer-actions{
display:flex;
align-items:center;
gap:10px
}

.landing-footer-login,
.landing-footer-signup{
min-width:118px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
padding:0 18px;
border-radius:15px;
font-size:11px;
font-weight:900;
transition:
transform .16s ease,
box-shadow .16s ease
}

.landing-footer-login{
color:#ff286d;
border:2px solid #ff286d;
background:#fff
}

.landing-footer-signup{
color:#fff;
background:
linear-gradient(
135deg,
#ff286d,
#ff5c7e
);
box-shadow:
0 10px 24px
rgba(255,40,109,.22)
}

.landing-footer-login:hover,
.landing-footer-signup:hover{
transform:translateY(-1px)
}

.landing-footer-signup:hover{
box-shadow:
0 13px 28px
rgba(255,40,109,.28)
}


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

@media(max-width:760px){

.landing-purpose-grid article>span{
font-size:40px!important
}

.landing-footer-rich{
grid-template-columns:1fr;
align-items:start;
gap:22px;
padding-top:28px;
padding-bottom:34px
}

.landing-footer-logo img,
.landing-footer-logo .landing-logo-fallback{
width:42px;
height:42px
}

.landing-footer-logo strong{
font-size:25px
}

.landing-footer-actions{
width:100%;
display:grid;
grid-template-columns:1fr 1fr
}

.landing-footer-login,
.landing-footer-signup{
width:100%;
min-width:0
}

}


@media(max-width:390px){

.landing-footer-actions{
grid-template-columns:1fr
}

.landing-footer-login,
.landing-footer-signup{
height:46px
}

}

/* ============================================================
   LANDING - FOTO REAL DA CAMPANHA
   ============================================================ */

.landing-campaign-photo{
position:absolute!important;
z-index:1;
inset:0;
width:100%!important;
height:100%!important;
display:block!important;
object-fit:cover!important;
object-position:center center!important
}

.landing-main-photo{
position:relative!important
}

.landing-main-photo .landing-photo-shade{
position:absolute!important;
z-index:2!important;
inset:0!important
}

.landing-main-photo .landing-person-info{
position:absolute!important;
z-index:3!important
}

.landing-campaign-photo-empty{
position:absolute;
z-index:1;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:30px;
color:#fff;
text-align:center;
background:
linear-gradient(
145deg,
#d98ba7,
#6c3457 58%,
#181426
)
}

.landing-campaign-photo-empty span{
max-width:180px;
font-size:11px;
font-weight:800;
line-height:1.4
}


/* ============================================================
   FOOTER - BOTOES LEGIVEIS
   ============================================================ */

.landing-footer-login{
color:#ff286d!important;
border:2px solid #ff286d!important;
background:#ffffff!important;
font-weight:900!important
}

.landing-footer-login:visited,
.landing-footer-login:hover,
.landing-footer-login:active{
color:#ff286d!important
}

.landing-footer-signup{
color:#ffffff!important;
border:2px solid #ff286d!important;
background:#ff286d!important;
font-weight:900!important
}

.landing-footer-signup:visited,
.landing-footer-signup:hover,
.landing-footer-signup:active{
color:#ffffff!important
}


/* ============================================================
   FOOTER MOBILE CENTRALIZADO
   ============================================================ */

@media(max-width:760px){

.landing-footer-rich{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:22px!important;
padding:32px 0 38px!important;
text-align:center!important
}

.landing-footer-left{
width:100%!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important
}

.landing-footer-logo{
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin:0 auto!important
}

.landing-footer-left>p{
max-width:280px!important;
margin:4px auto 0!important;
text-align:center!important
}

.landing-footer-links{
width:100%!important;
display:flex!important;
flex-wrap:wrap!important;
align-items:center!important;
justify-content:center!important;
gap:8px 15px!important;
margin-top:6px!important
}

.landing-footer-actions{
width:100%!important;
max-width:390px!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:10px!important;
margin:0 auto!important
}

.landing-footer-login,
.landing-footer-signup{
width:100%!important;
height:50px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:12px!important;
font-weight:900!important
}

}

@media(max-width:390px){

.landing-footer-actions{
grid-template-columns:1fr!important
}

}
