:root{
    --bg:#050505;
    --bg2:#0b1638;
    --card:#ffffff;
    --muted:#6b7280;
    --line:#dbe3ef;
    --green:#00ff88;
    --green2:#00d970;
    --text:#07132f;
    --white:#ffffff;
    --danger:#d93b2b;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:
        linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),
        url('assets/marketing/fundo-fitness.jpg') center/cover fixed no-repeat,
        #000;
}
img{max-width:100%;display:block}
a{text-decoration:none}

.site-wrap{
    min-height:100vh;
    backdrop-filter: blur(1px);
}

.topbar{
    position:sticky;
    top:0;
    z-index:30;
    background:#000;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .inner{
    max-width:1280px;
    margin:0 auto;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.brand{
    color:#fff;
    font-weight:900;
    letter-spacing:.5px;
    font-size:24px;
    line-height:1.1;
}
.brand span{
    color:var(--green);
    display:block;
    font-size:15px;
    margin-top:4px;
}
.nav-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 18px;
    border-radius:14px;
    font-weight:900;
    transition:.2s ease;
    border:1px solid transparent;
    cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
    background:var(--green);
    color:#031b0e;
}
.btn-dark{
    background:#111827;
    color:#fff;
    border-color:#222b3d;
}
.btn-outline{
    background:rgba(255,255,255,.03);
    color:#fff;
    border-color:rgba(255,255,255,.18);
}

.container{
    max-width:1280px;
    margin:0 auto;
    padding:24px 18px 50px;
}

.hero{
    background:
        linear-gradient(110deg, rgba(0,0,0,.93) 0%, rgba(4,17,58,.90) 60%, rgba(0,255,136,.08) 100%),
        url('assets/marketing/hero-fitness.jpg') center/cover no-repeat;
    border:1px solid rgba(255,255,255,.06);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.28);
}
.hero-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:20px;
    padding:34px;
    align-items:center;
}
.hero h1{
    color:#fff;
    font-size:56px;
    line-height:1;
    margin:0 0 10px;
    font-weight:900;
}
.hero h1 span{color:var(--green)}
.hero p{
    color:#d8e4ff;
    font-size:19px;
    line-height:1.6;
    margin:0 0 22px;
    max-width:720px;
}
.hero-badges{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 24px;
}
.hero-badge{
    color:#fff;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.03);
    border-radius:16px;
    padding:12px 15px;
    font-weight:900;
    white-space:nowrap;
}
.hero-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.hero-side{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}
.quick-card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    overflow:hidden;
    min-height:180px;
    position:relative;
}
.quick-card .pic{
    height:100%;
    min-height:180px;
    background-size:cover;
    background-position:center;
    position:relative;
}
.quick-card .pic::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.65), transparent 55%);
}
.quick-card .label{
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    color:#fff;
    font-weight:900;
    font-size:15px;
    z-index:2;
}

.section{
    margin-top:26px;
    background:#f8fbff;
    border-radius:24px;
    border:1px solid #d6dfec;
    box-shadow:0 14px 30px rgba(0,0,0,.10);
    overflow:hidden;
}
.section-header{
    padding:24px 24px 10px;
}
.section-header h2{
    margin:0;
    font-size:34px;
    color:#071a45;
}
.section-header p{
    margin:8px 0 0;
    color:#5c6a86;
    font-size:16px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    padding:0 24px 24px;
}
.goal-card,
.plan-card,
.info-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 18px rgba(9,22,54,.06);
}
.goal-thumb{
    height:210px;
    background-size:cover;
    background-position:center;
    position:relative;
}
.goal-thumb::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,.06));
}
.goal-body{padding:18px}
.goal-body h3{
    margin:0 0 8px;
    font-size:22px;
    color:#081a42;
}
.goal-body p{
    margin:0 0 15px;
    color:#5b6780;
    line-height:1.5;
}
.goal-tag{
    display:inline-block;
    background:#e9fff4;
    color:#037c42;
    border:1px solid #baf2d5;
    border-radius:999px;
    padding:7px 11px;
    font-size:13px;
    font-weight:900;
}

.plans{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    padding:0 24px 24px;
}
.plan-card{
    padding:20px;
    display:flex;
    flex-direction:column;
}
.plan-card h3{
    margin:0;
    font-size:24px;
    color:#071a45;
}
.plan-price{
    color:#00a85a;
    font-size:34px;
    font-weight:900;
    margin:10px 0 6px;
}
.plan-desc{
    color:#5c6880;
    margin:0 0 15px;
    min-height:52px;
}
.plan-list{
    padding-left:18px;
    margin:0 0 18px;
    color:#2d3a53;
    line-height:1.55;
}
.plan-highlight{
    margin-top:auto;
    padding:10px 12px;
    border-radius:14px;
    background:#f5f9ff;
    color:#3d4f74;
    font-size:13px;
    font-weight:700;
}

.split{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:18px;
    padding:0 24px 24px;
}
.info-card{padding:22px}
.info-card h3{
    margin:0 0 10px;
    font-size:24px;
    color:#071a45;
}
.info-card p{
    margin:0 0 12px;
    color:#55627c;
    line-height:1.65;
}
.info-list{
    padding-left:18px;
    margin:0;
    line-height:1.7;
    color:#26344d;
}
.cta{
    background:
        linear-gradient(135deg, #050505, #071a45 70%, #08334f);
    border-radius:24px;
    padding:28px;
    color:#fff;
}
.cta h3{
    margin:0 0 10px;
    font-size:32px;
}
.cta p{
    margin:0 0 18px;
    color:#d6e2ff;
    line-height:1.65;
}
.cta-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.footer{
    max-width:1280px;
    margin:18px auto 0;
    padding:0 18px 28px;
}
.footer-box{
    background:#000;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    color:#cfd8ef;
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}
.footer-box strong{color:#fff}
.footer-links{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.footer-links a{
    color:#fff;
    background:#111827;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:10px 14px;
    font-weight:800;
}

@media (max-width:1180px){
    .plans{grid-template-columns:repeat(3,1fr)}
    .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
    .hero-grid,
    .split{
        grid-template-columns:1fr;
    }
    .hero h1{font-size:44px}
    .hero-side{grid-template-columns:repeat(2,1fr)}
    .plans{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
    .brand{font-size:20px}
    .brand span{font-size:13px}
    .hero-grid{padding:22px}
    .hero h1{font-size:34px}
    .hero p{font-size:16px}
    .hero-side{grid-template-columns:1fr}
    .cards,
    .plans{
        grid-template-columns:1fr;
        padding:0 16px 16px;
    }
    .section-header{padding:18px 16px 8px}
    .section-header h2{font-size:28px}
    .split{padding:0 16px 16px}
    .container{padding:18px 12px 30px}
    .topbar .inner{padding:12px}
    .nav-actions{width:100%}
    .nav-actions .btn{flex:1}
}