:root{
--bg:#050816;
--bg-soft:#0c1224;
--panel:#10182b;
--panel-hover:#141f36;
--border:rgba(255,255,255,.08);
--text:#f4f7fb;
--muted:#a7b0c2;
--red:#f44336;
--red-soft:rgba(244,67,54,.15);
--shadow:0 10px 35px rgba(0,0,0,.35);
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Inter,Segoe UI,Arial,sans-serif;
background:radial-gradient(circle at top left,#102042 0%,#070b17 45%,#03050c 100%);
color:var(--text);
min-height:100vh;
}

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

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

.topbar{
position:fixed;
top:0;
left:0;
right:0;
height:86px;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
padding:0 40px;
background:rgba(4,8,18,.92);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.06);
z-index:999;
}

.brand{
display:flex;
align-items:center;
gap:14px;
width:auto;
min-width:360px;
}

.brand img,
.logo{
width:58px;
height:58px;
border-radius:50%;
object-fit:cover;
border:2px solid rgba(255,255,255,.08);
}

.logo-mini{
width:44px;
height:44px;
border-radius:50%;
}

.brand strong{
display:block;
font-size:1.85rem;
font-weight:800;
line-height:1;
letter-spacing:-.03em;
color:#fff;
}

.brand strong span{
color:var(--red);
}

.brand small{
display:block;
margin-top:7px;
font-size:.9rem;
line-height:1.35;
color:#9ca7bd;
font-weight:500;
}

.topnav{
display:flex;
align-items:center;
justify-content:center;
gap:48px;
justify-self:center;
margin:0;
padding:0;
}

.topnav a{
position:relative;
display:flex;
align-items:center;
height:86px;
padding:0;
font-size:1rem;
font-weight:600;
color:#cdd5e3;
transition:.25s ease;
}

.topnav a:hover,
.topnav a.active{
color:#fff;
}

.topnav a.active::after{
content:"";
position:absolute;
left:50%;
bottom:0;
width:34px;
height:3px;
border-radius:999px;
background:var(--red);
transform:translateX(-50%);
}

.topnav a:hover::after{
content:"";
position:absolute;
left:50%;
bottom:0;
width:34px;
height:3px;
border-radius:999px;
background:rgba(244,67,54,.5);
transform:translateX(-50%);
}

.mobile-toggle{
display:none;
}

/* =========================================
BUTTONS
========================================= */

.header-cta,
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:15px 24px;
border-radius:16px;
border:1px solid rgba(244,67,54,.65);
background:rgba(12,16,28,.6);
color:#fff;
font-weight:700;
transition:.25s ease;
box-shadow:var(--shadow);
min-height:52px;
line-height:1;
white-space:nowrap;
}

.header-cta:hover,
.btn:hover{
background:var(--red);
border-color:var(--red);
}

.with-header{
padding-top:86px;
}

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

.hero{
min-height:100vh;
display:flex;
align-items:center;
}

.hero-grid{
width:100%;
display:grid;
grid-template-columns:1.05fr .95fr;
gap:50px;
align-items:center;
padding:70px 5vw;
}

.eyebrow{
color:#ff6a6a;
text-transform:uppercase;
font-size:.95rem;
letter-spacing:.12em;
font-weight:700;
margin-bottom:16px;
}

.hero h1{
font-size:clamp(3rem,5vw,5.3rem);
line-height:1.02;
margin:0 0 22px;
max-width:680px;
}

.lead{
max-width:620px;
font-size:1.18rem;
line-height:1.7;
color:var(--muted);
margin-bottom:28px;
}

/* =========================================
SECURITY NOTE
========================================= */

.security-note{
display:flex;
gap:12px;
align-items:flex-start;
margin-top:22px;
color:var(--muted);
max-width:540px;
line-height:1.6;
}

/* =========================================
CARDS
========================================= */

.hero-side{
display:grid;
gap:18px;
}

.info-card{
display:flex;
align-items:flex-start;
gap:18px;
padding:24px;
background:linear-gradient(180deg,rgba(15,24,42,.92),rgba(11,18,32,.92));
border:1px solid var(--border);
border-radius:24px;
box-shadow:var(--shadow);
transition:.25s ease;
}

.info-card:hover{
background:linear-gradient(180deg,rgba(18,29,50,.95),rgba(13,21,37,.95));
transform:translateY(-2px);
}

.info-card h3{
margin:0 0 10px;
font-size:1.35rem;
}

.info-card p{
margin:0;
color:var(--muted);
line-height:1.6;
}

/* =========================================
ICONS
========================================= */

.icon-wrap{
width:68px;
height:68px;
border-radius:50%;
display:grid;
place-items:center;
flex-shrink:0;
background:rgba(255,255,255,.02);
box-shadow:inset 0 0 22px rgba(255,255,255,.03);
}

.icon-wrap svg{
width:38px;
height:38px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}

.green{
background:rgba(22,163,74,.08);
color:#45e080;
border:2px solid rgba(34,197,94,.55);
}

.blue{
background:rgba(37,99,235,.08);
color:#53a6ff;
border:2px solid rgba(59,130,246,.55);
}

.yellow{
background:rgba(202,138,4,.08);
color:#ffc72c;
border:2px solid rgba(234,179,8,.55);
}

.purple{
background:rgba(126,34,206,.10);
color:#a970ff;
border:2px solid rgba(168,85,247,.55);
}

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

.section-block{
padding:0 5vw 40px;
}

.section-panel{
background:rgba(12,18,33,.82);
border:1px solid var(--border);
border-radius:28px;
padding:36px;
box-shadow:var(--shadow);
}

.section-panel h2{
margin-top:0;
font-size:2rem;
}

.section-panel p{
color:var(--muted);
line-height:1.8;
max-width:900px;
}

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

footer{
display:flex;
justify-content:space-between;
gap:20px;
padding:28px 5vw 34px;
color:var(--muted);
border-top:1px solid var(--border);
margin-top:40px;
flex-wrap:wrap;
}

.footer-group{
display:flex;
gap:24px;
flex-wrap:wrap;
}

/* =========================================
SVG
========================================= */

.svg-icon,
.security-icon,
.icon-wrap svg{
display:inline-grid;
place-items:center;
flex:0 0 auto;
}

.svg-icon svg{
width:20px;
height:20px;
display:block;
fill:currentColor;
}

.security-icon{
width:22px;
height:22px;
color:#a7b0c2;
margin-top:2px;
}

.security-icon svg{
width:22px;
height:22px;
display:block;
fill:currentColor;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1180px){

.topbar{
padding:0 24px;
}

.topnav{
gap:28px;
}

.hero-grid{
gap:34px;
}

}

@media(max-width:960px){

body{
background:radial-gradient(circle at top,#102042 0%,#070b17 48%,#03050c 100%);
}

.topbar{
height:76px;
display:flex;
justify-content:space-between;
padding:0 18px;
}

.with-header{
padding-top:76px;
}

.brand{
gap:10px;
min-width:0;
}

.brand img,
.logo{
width:48px;
height:48px;
}

.brand strong{
font-size:1.2rem;
}

.brand small{
font-size:.76rem;
line-height:1.3;
max-width:180px;
}

.mobile-toggle{
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:12px;
border:1px solid var(--border);
background:none;
color:#fff;
font-size:1.6rem;
cursor:pointer;
}

.topnav{
position:fixed;
top:76px;
left:0;
right:0;
background:#08101f;
padding:18px;
flex-direction:column;
align-items:flex-start;
display:none;
border-bottom:1px solid var(--border);
gap:0;
}

.topnav.open{
display:flex;
}

.topnav a{
width:100%;
height:auto;
padding:16px 0;
border-bottom:1px solid rgba(255,255,255,.06);
}

.topnav a.active::after,
.topnav a:hover::after{
left:0;
transform:none;
}

.hero-grid{
grid-template-columns:1fr;
padding:36px 18px 28px;
gap:30px;
}

.hero{
min-height:auto;
}

.hero h1{
font-size:clamp(2.5rem,12vw,4rem);
}

.lead{
font-size:1rem;
line-height:1.65;
}

.btn{
width:100%;
max-width:300px;
}

.info-card{
padding:18px;
border-radius:20px;
gap:14px;
}

.icon-wrap{
width:54px;
height:54px;
}

.icon-wrap svg{
width:30px;
height:30px;
}

.info-card h3{
font-size:1.08rem;
}

.info-card p{
font-size:.92rem;
}

.section-block{
padding:0 18px 24px;
}

.section-panel{
padding:24px;
border-radius:22px;
}

footer{
padding:24px 18px;
flex-direction:column;
align-items:flex-start;
}

}

@media(max-width:520px){

.hero h1{
font-size:clamp(2.25rem,13vw,3.35rem);
}

.eyebrow{
font-size:.78rem;
}

.footer-group{
flex-direction:column;
gap:10px;
}

}
/* =========================================
RESPONSIVE TEXT FIX - SEÇÕES INFORMATIVAS
========================================= */

html,
body{
width:100%;
overflow-x:hidden;
}

.topnav a{
white-space:nowrap;
}

.section-block{
width:100%;
scroll-margin-top:110px;
}

.section-panel{
width:100%;
max-width:1180px;
margin:0 auto;
min-width:0;
overflow:hidden;
}

.section-panel h2,
.section-panel h3,
.section-panel p,
.section-panel li,
.tutorial-card,
.tutorial-finish{
min-width:0;
word-break:normal;
overflow-wrap:break-word;
hyphens:auto;
}

.section-panel h2{
line-height:1.2;
margin-bottom:18px;
}

.section-panel p,
.section-panel li{
max-width:980px;
font-size:clamp(.95rem,.25vw + .9rem,1.05rem);
line-height:1.75;
letter-spacing:0;
text-wrap:pretty;
}

#como-funciona .section-panel > p,
#tutorial-deriv .section-panel > p{
max-width:980px;
margin-right:auto;
}

.tutorial-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
gap:18px;
margin-top:24px;
width:100%;
}

.tutorial-card{
background:rgba(255,255,255,.025);
border:1px solid var(--border);
border-radius:20px;
padding:22px;
}

.tutorial-card h3,
.tutorial-finish h3{
margin:0 0 12px;
line-height:1.3;
}

.tutorial-card p{
margin:0 0 12px;
}

.tutorial-card p:last-child{
margin-bottom:0;
}

.tutorial-card ul{
margin:10px 0 0;
padding-left:20px;
color:var(--muted);
}

.tutorial-finish{
margin-top:24px;
padding:24px;
border-radius:22px;
background:rgba(244,67,54,.08);
border:1px solid rgba(244,67,54,.18);
}

.tutorial-finish p{
margin-bottom:18px;
}

@media(max-width:960px){

.topnav a{
white-space:normal;
line-height:1.35;
}

.section-block{
padding:0 18px 24px;
scroll-margin-top:92px;
}

.section-panel{
padding:24px;
border-radius:22px;
}

.section-panel h2{
font-size:clamp(1.45rem,6vw,1.8rem);
}

.section-panel p,
.section-panel li{
max-width:100%;
font-size:.98rem;
line-height:1.72;
}

.tutorial-grid{
grid-template-columns:1fr;
gap:14px;
}

.tutorial-card,
.tutorial-finish{
padding:18px;
border-radius:18px;
}

}

@media(max-width:520px){

.section-block{
padding-left:14px;
padding-right:14px;
}

.section-panel{
padding:20px 16px;
}

.section-panel p,
.section-panel li{
font-size:.95rem;
line-height:1.68;
}

.btn{
max-width:100%;
white-space:normal;
line-height:1.25;
text-align:center;
}

}