/* ==========================================================
   CENTURION
   SECTIONS
   ========================================================== */

section{

    scroll-margin-top:var(--navbar-height);

}

.section__header{

    max-width:820px;

    margin-inline:auto;

    margin-bottom:var(--space-3xl);

    text-align:center;

}

.section__header p{

    margin-top:var(--space-lg);

    margin-inline:auto;

}

.section__title{

    font-size:clamp(2rem,4vw,3rem);

    letter-spacing:.06em;

    text-transform:uppercase;

    font-weight:var(--fw-medium);

}

.section__title .gold{

    color:var(--color-gold);

}

/* ==========================================================
   PLATFORM — "Não é um robô. É uma plataforma."
   ========================================================== */

.platform{

    padding:var(--space-4xl) 0;

    background:var(--color-bg);

    border-top:1px solid var(--color-border);

}

.platform .grid-2{

    grid-template-columns:.8fr 1.2fr;

}

.platform__title{

    font-size:clamp(1.8rem,3.2vw,2.6rem);

    letter-spacing:.06em;

    text-transform:uppercase;

    font-weight:var(--fw-medium);

    margin-bottom:var(--space-lg);

}

.platform__text{

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

}

/* --- MetaTrader 5 badge ---------------------------------- */

.mt5-badge{

    display:flex;

    align-items:center;

    gap:14px;

    width:max-content;

    margin:var(--space-3xl) auto 0;

    padding:14px 28px;

    background:rgba(200,164,90,.05);

    border:1px solid rgba(200,164,90,.35);

    border-radius:var(--radius-lg);

}

.mt5-badge__icon{

    display:flex;

    color:var(--color-gold);

}

.mt5-badge__icon svg{

    width:26px;

    height:26px;

}

.mt5-badge__text{

    display:flex;

    flex-direction:column;

    gap:2px;

}

.mt5-badge__name{

    font-family:var(--font-heading);

    font-size:1.05rem;

    font-weight:var(--fw-semibold);

    line-height:1;

    color:var(--color-text);

}

.mt5-badge__sub{

    font-size:.58rem;

    letter-spacing:.32em;

    text-transform:uppercase;

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

}

/* ==========================================================
   HOW IT WORKS — "Da ideia ao mercado."
   ========================================================== */

.how{

    padding:var(--space-4xl) 0;

    background:var(--color-bg-secondary);

    border-top:1px solid var(--color-border);

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

}

.steps{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:var(--space-md);

}

.step{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:var(--space-md);

    min-width:120px;

    text-align:center;

}

.step__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    border-radius:var(--radius-lg);

    background:var(--color-bg-card);

    border:1px solid var(--color-border);

    color:var(--color-gold);

    transition:var(--transition);

}

.step:hover .step__icon{

    border-color:rgba(200,164,90,.45);

    box-shadow:var(--shadow-gold);

}

.step__icon svg{

    width:32px;

    height:32px;

}

.step__icon--brand{

    border-color:rgba(200,164,90,.4);

}

.step__label{

    font-family:var(--font-heading);

    font-size:.8rem;

    font-weight:var(--fw-semibold);

    letter-spacing:.14em;

    text-transform:uppercase;

    color:var(--color-text-secondary);

}

.step__caption{

    font-size:.75rem;

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

}

.step__mt5{

    font-family:var(--font-heading);

    font-size:1.3rem;

    font-weight:var(--fw-bold);

    letter-spacing:.04em;

    color:var(--color-gold);

}

.steps__arrow{

    align-self:center;

    margin-top:-28px;

    color:var(--color-gold);

    opacity:.7;

}

/* ==========================================================
   BUILDER SHOWCASE
   ========================================================== */

.builder{

    padding:var(--space-4xl) 0;

    background:var(--color-bg);

}

.builder .grid-2{

    grid-template-columns:.85fr 1.15fr;

}

.builder__list{

    display:flex;

    flex-direction:column;

    gap:var(--space-md);

    margin:var(--space-xl) 0 var(--space-2xl);

}

.builder__item{

    display:flex;

    align-items:center;

    gap:var(--space-md);

    font-size:.98rem;

    color:var(--color-text-secondary);

}

.builder__check{

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

    width:24px;

    height:24px;

    border-radius:50%;

    border:1px solid rgba(200,164,90,.45);

    color:var(--color-gold);

}

.builder__check svg{

    width:12px;

    height:12px;

}

/* --- App window mock ------------------------------------ */

.app-window{

    background:#0E0E0E;

    border:1px solid var(--color-border-light);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg),var(--shadow-gold);

    overflow:hidden;

    font-size:.78rem;

}

.app-window__titlebar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px 16px;

    background:#141414;

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

}

.app-window__title{

    display:flex;

    align-items:center;

    gap:10px;

    font-family:var(--font-heading);

    font-size:.75rem;

    font-weight:var(--fw-semibold);

    letter-spacing:.18em;

    color:var(--color-text);

}

.app-window__title img{

    width:16px;

    height:20px;

    object-fit:contain;

}

.app-window__controls{

    display:flex;

    gap:8px;

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

    font-size:.7rem;

    letter-spacing:.2em;

}

.app-window__tabs{

    display:flex;

    align-items:center;

    gap:4px;

    padding:8px 16px;

    background:#101010;

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

}

.app-window__tab{

    padding:6px 14px;

    border-radius:var(--radius-sm);

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

}

.app-window__tab--active{

    background:rgba(200,164,90,.12);

    color:var(--color-gold);

}

.app-window__body{

    display:grid;

    grid-template-columns:132px 1fr;

}

.app-window__sidebar{

    padding:16px 0;

    background:#101010;

    border-right:1px solid var(--color-border);

}

.app-window__sidebar-title{

    padding:0 16px 10px;

    font-family:var(--font-heading);

    font-size:.65rem;

    font-weight:var(--fw-semibold);

    letter-spacing:.2em;

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

    text-transform:uppercase;

}

.app-window__sidebar-item{

    padding:7px 16px;

    color:var(--color-text-secondary);

}

.app-window__sidebar-item--active{

    color:var(--color-gold);

    background:rgba(200,164,90,.07);

    border-left:2px solid var(--color-gold);

}

.app-window__canvas{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    padding:16px;

    background:
        radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:18px 18px;

}

.app-block{

    padding:12px 14px;

    background:#141414;

    border:1px solid var(--color-border);

    border-radius:var(--radius-md);

}

.app-block__head{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:8px;

    font-family:var(--font-heading);

    font-size:.68rem;

    font-weight:var(--fw-semibold);

    letter-spacing:.14em;

}

.app-block__dot{

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--color-gold);

}

.app-block--signal{ border-color:rgba(200,164,90,.4); }

.app-block--signal .app-block__head{ color:var(--color-gold); }

.app-block__row{

    display:flex;

    justify-content:space-between;

    gap:8px;

    padding:3px 0;

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

}

.app-block__row span:last-child{

    color:var(--color-text-secondary);

}

.app-window__footer{

    display:grid;

    grid-template-columns:1fr 1fr 1fr 1fr 1.4fr;

    gap:12px;

    align-items:center;

    padding:14px 16px;

    background:#101010;

    border-top:1px solid var(--color-border);

}

.app-stat__label{

    display:block;

    margin-bottom:2px;

    font-size:.62rem;

    letter-spacing:.08em;

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

    text-transform:uppercase;

}

.app-stat__value{

    font-family:var(--font-heading);

    font-size:.85rem;

    font-weight:var(--fw-semibold);

    color:var(--color-text);

}

.app-stat__value--gold{ color:var(--color-gold); }

.app-window__chart{

    height:44px;

}

.app-window__chart svg{

    width:100%;

    height:100%;

}

/* ==========================================================
   PHILOSOPHY — manifesto
   ========================================================== */

.philosophy{

    position:relative;

    padding:var(--space-4xl) 0;

    background:var(--gradient-dark);

    border-top:1px solid var(--color-border);

    overflow:hidden;

}

.philosophy .grid-2{

    grid-template-columns:.9fr 1.1fr;

}

.philosophy__visual{

    position:relative;

    display:flex;

    justify-content:center;

}

.philosophy__helmet{

    width:min(400px,85%);

    opacity:.92;

    filter:drop-shadow(0 0 60px rgba(200,164,90,.08)) brightness(.95) contrast(1.05);

    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,#000 55%,transparent 100%);

    mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,#000 55%,transparent 100%);

}

.philosophy__lines{

    display:flex;

    flex-direction:column;

    gap:var(--space-xs);

    margin-top:var(--space-lg);

    font-size:1.1rem;

    color:var(--color-text-secondary);

}

.philosophy__lines strong{

    color:var(--color-text);

    font-weight:var(--fw-medium);

}

.philosophy__highlight{

    margin:var(--space-lg) 0;

    font-family:var(--font-heading);

    font-size:1.15rem;

    line-height:1.6;

    color:var(--color-gold);

}

.philosophy__pillars{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:var(--space-lg);

    margin-top:var(--space-2xl);

}

.pillar{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.pillar__icon{

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border-radius:50%;

    border:1px solid rgba(200,164,90,.3);

    color:var(--color-gold);

}

.pillar__icon svg{

    width:20px;

    height:20px;

}

.pillar strong{

    display:block;

    margin-bottom:4px;

    font-family:var(--font-heading);

    font-size:.85rem;

    letter-spacing:.1em;

    text-transform:uppercase;

    color:var(--color-gold);

}

.pillar p{

    font-size:.82rem;

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

    line-height:1.5;

}

/* ==========================================================
   FAQ
   ========================================================== */

.faq{

    padding:var(--space-4xl) 0;

    background:var(--color-bg);

    border-top:1px solid var(--color-border);

}

.faq__list{

    max-width:820px;

    margin-inline:auto;

    display:flex;

    flex-direction:column;

    gap:var(--space-md);

}

.faq__item{

    background:var(--color-bg-card);

    border:1px solid var(--color-border);

    border-radius:var(--radius-lg);

    transition:var(--transition-fast);

}

.faq__item[open]{

    border-color:rgba(200,164,90,.35);

}

.faq__question{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-md);

    padding:var(--space-lg) var(--space-xl);

    cursor:pointer;

    list-style:none;

    font-family:var(--font-heading);

    font-size:1rem;

    font-weight:var(--fw-medium);

    color:var(--color-text);

}

.faq__question::-webkit-details-marker{

    display:none;

}

.faq__question:focus-visible{

    outline:2px solid var(--color-gold);

    outline-offset:2px;

    border-radius:var(--radius-lg);

}

.faq__chevron{

    flex:none;

    color:var(--color-gold);

    transition:transform var(--transition-fast);

}

.faq__item[open] .faq__chevron{

    transform:rotate(180deg);

}

.faq__answer{

    padding:0 var(--space-xl) var(--space-lg);

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

    font-size:.95rem;

}

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

.cta{

    position:relative;

    padding:var(--space-4xl) 0;

    text-align:center;

    background:var(--color-bg-secondary);

    border-top:1px solid var(--color-border);

    overflow:hidden;

}

.cta__glow{

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

}

.cta__brand{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:var(--space-lg);

    margin:var(--space-2xl) 0;

}

.cta__helmet{

    width:58px;

    height:76px;

    object-fit:contain;

}

.cta__wordmark{

    text-align:left;

}

.cta__name{

    font-family:var(--font-heading);

    font-size:2rem;

    font-weight:var(--fw-medium);

    letter-spacing:.3em;

    color:var(--color-gold);

    line-height:1;

}

.cta__by{

    margin-top:6px;

    font-size:.7rem;

    letter-spacing:.4em;

    text-transform:uppercase;

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

}

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

.footer{

    padding:var(--space-2xl) 0;

    background:var(--color-bg);

    border-top:1px solid var(--color-border);

}

.footer__inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-lg);

    flex-wrap:wrap;

}

.footer__social{

    display:flex;

    gap:var(--space-md);

}

.footer__social a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:var(--radius-md);

    border:1px solid var(--color-border);

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

    transition:var(--transition-fast);

}

.footer__social a:hover{

    color:var(--color-gold);

    border-color:rgba(200,164,90,.4);

}

.footer__social svg{

    width:16px;

    height:16px;

}

.footer__copy{

    font-size:.85rem;

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

}

.footer__links{

    display:flex;

    gap:var(--space-lg);

    font-size:.85rem;

}

.footer__links a{

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

    transition:var(--transition-fast);

}

.footer__links a:hover{

    color:var(--color-gold);

}