:root{
--bg:#071725;
--bg2:#0a2235;
--card:rgba(255,255,255,.08);
--line:rgba(255,255,255,.12);
--text:#eff8ff;
--muted:#a9bed0;
--green:#09d16c;
--teal:#10c6b5;
--blue:#082239;
--dark:#04111c;
--shadow:0 20px 60px rgba(0,0,0,.35)
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:radial-gradient(circle at top left,#123b59 0,#071725 34%,#04111c 100%);
color:var(--text);
overflow-x:hidden
}

.container{width:min(1180px,calc(100% - 40px));margin:0 auto}

.bg-glow{
position:fixed;
border-radius:999px;
filter:blur(90px);
opacity:.35;
z-index:-1
}

.bg-glow-1{
width:360px;
height:360px;
background:var(--green);
top:80px;
right:-90px
}

.bg-glow-2{
width:320px;
height:320px;
background:var(--teal);
bottom:80px;
left:-120px
}

/* HEADER CLARO */
.header{
position:sticky;
top:0;
z-index:20;
background:rgba(248,250,252,.96);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(15,23,42,.08);
box-shadow:0 8px 30px rgba(15,23,42,.06)
}

.nav{
min-height:92px;
display:flex;
align-items:center;
justify-content:space-between;
padding:8px 0
}

.brand{
display:flex;
align-items:center;
text-decoration:none;
width:320px;
height:auto;
overflow:visible;
}

.brand img{
width:100%;
height:auto;
object-fit:contain;
transform:none;
display:block;
}

.menu{
display:flex;
align-items:center;
gap:26px
}

.menu a{
color:#0f172a;
text-decoration:none;
font-weight:800;
transition:.3s
}

.menu a:hover{
color:var(--green)
}

.menu-toggle{
display:none;
background:none;
border:0;
color:#0f172a;
font-size:28px
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:15px 22px;
border-radius:999px;
background:linear-gradient(135deg,var(--green),var(--teal));
color:#04111c;
text-decoration:none;
font-weight:900;
box-shadow:0 12px 30px rgba(9,209,108,.24);
border:0;
transition:.3s
}

.btn:hover{
transform:translateY(-2px)
}

.btn-outline{
background:rgba(255,255,255,.06);
color:#fff;
border:1px solid var(--line);
box-shadow:none
}

.btn-small{
padding:12px 18px;
background:linear-gradient(135deg,#09d16c,#10c6b5);
color:#fff!important;
font-weight:800;
box-shadow:0 8px 25px rgba(9,209,108,.35)
}

.section{padding:90px 0}
.hero{padding:90px 0 40px}

.hero-grid{
display:grid;
grid-template-columns:1.08fr .92fr;
align-items:center;
gap:50px
}

.eyebrow{
display:inline-flex;
color:#7ef8bc;
background:rgba(9,209,108,.1);
border:1px solid rgba(9,209,108,.25);
padding:9px 13px;
border-radius:999px;
font-weight:800;
font-size:13px;
text-transform:uppercase;
letter-spacing:.08em
}

h1,h2,h3,p{margin-top:0}

h1{
font-size:clamp(42px,6vw,76px);
line-height:.96;
margin:22px 0;
letter-spacing:-.06em
}

h2{
font-size:clamp(30px,4vw,50px);
line-height:1.05;
letter-spacing:-.045em;
margin:14px 0 18px
}

.lead{
font-size:20px;
line-height:1.7;
color:var(--muted);
max-width:720px
}

.hero-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin:32px 0
}

.trust-row{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-top:28px
}

.trust-row div{
padding:16px 18px;
border:1px solid var(--line);
border-radius:18px;
background:rgba(255,255,255,.045)
}

.trust-row strong{
display:block;
font-size:20px
}

.trust-row span{
display:block;
color:var(--muted);
font-size:13px
}

.phone-wrap{
position:relative;
display:grid;
place-items:center
}

.phone{
width:min(360px,100%);
height:680px;
border:10px solid #0b1d2d;
border-radius:46px;
background:#eef6f1;
box-shadow:var(--shadow);
overflow:hidden;
color:#102030
}

.phone-top{
width:120px;
height:24px;
background:#0b1d2d;
border-radius:0 0 18px 18px;
margin:0 auto
}

.chat-head{
display:flex;
gap:12px;
align-items:center;
padding:18px;
background:#075e54;
color:#fff
}

.chat-head span{
display:block;
font-size:12px;
color:#d7fff1
}

.avatar{
width:44px;
height:44px;
border-radius:50%;
background:#fff;
display:grid;
place-items:center
}

.chat-body{
padding:18px;
display:flex;
flex-direction:column;
gap:13px;
background:linear-gradient(180deg,#e9f5ec,#dff0e5);
min-height:610px
}

.bubble{
max-width:86%;
padding:13px 14px;
border-radius:17px;
line-height:1.35;
box-shadow:0 4px 12px rgba(0,0,0,.08)
}

.bot{
background:#fff;
border-top-left-radius:4px
}

.user{
align-self:flex-end;
background:#dcf8c6;
border-top-right-radius:4px
}

.success{
color:#087b48;
font-weight:800
}

.pix-box{
font-family:monospace;
background:#102030;
color:#7ef8bc;
border-radius:14px;
padding:14px;
font-size:12px;
word-break:break-all
}

.floating-card{
position:absolute;
background:rgba(255,255,255,.1);
backdrop-filter:blur(15px);
border:1px solid var(--line);
border-radius:22px;
padding:16px 20px;
box-shadow:var(--shadow)
}

.floating-card span{
display:block;
color:var(--muted);
font-size:13px
}

.floating-card strong{
font-size:23px
}

.card-1{top:80px;left:0}
.card-2{bottom:100px;right:0}

.strip{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
background:rgba(255,255,255,.055);
border:1px solid var(--line);
padding:24px;
border-radius:28px;
color:var(--muted)
}

.strip strong{color:#fff}

.section-title{
text-align:center;
max-width:840px;
margin:0 auto 44px
}

.steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px
}

.step,.audience,.dashboard-card,.benefit-grid{
background:var(--card);
border:1px solid var(--line);
border-radius:28px;
box-shadow:var(--shadow)
}

.step{padding:28px}

.step b{
display:inline-grid;
place-items:center;
width:42px;
height:42px;
border-radius:14px;
background:rgba(9,209,108,.14);
color:#7ef8bc;
margin-bottom:26px
}

.step p,.benefits p,.cta p{
color:var(--muted);
line-height:1.7
}

.two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center
}

.benefit-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
padding:24px
}

.benefit-grid div{
background:rgba(255,255,255,.06);
border-radius:18px;
padding:18px;
font-weight:800
}

.dashboard-card{
padding:28px;
background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.05))
}

.dash-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:22px
}

.dash-top span{color:#7ef8bc}

.metrics{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px
}

.metrics div{
background:rgba(4,17,28,.58);
border:1px solid var(--line);
border-radius:20px;
padding:20px
}

.metrics span,.metrics small{
display:block;
color:var(--muted)
}

.metrics strong{
display:block;
font-size:28px;
margin:10px 0
}

.fake-chart{
height:230px;
margin-top:20px;
display:flex;
align-items:end;
gap:14px;
padding:22px;
background:rgba(4,17,28,.48);
border-radius:22px
}

.fake-chart i{
flex:1;
border-radius:12px 12px 0 0;
background:linear-gradient(180deg,var(--green),var(--teal));
box-shadow:0 0 28px rgba(9,209,108,.22)
}

.audience-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}

.audience{
padding:24px;
display:flex;
flex-direction:column;
gap:10px
}

.audience strong{font-size:21px}
.audience span{color:var(--muted)}

.cta .container{
text-align:center;
padding:60px 30px;
border-radius:34px;
background:linear-gradient(135deg,rgba(9,209,108,.18),rgba(16,198,181,.08));
border:1px solid rgba(126,248,188,.25)
}

/* FOOTER CLARO */
.footer{
padding:60px 0;
background:#f8fafc;
border-top:1px solid #e2e8f0;
color:#0f172a
}

.footer-grid{
display:flex;
justify-content:space-between;
gap:30px;
align-items:flex-start
}

.footer img{
width:320px;
height:auto;
object-fit:contain;
transform:none;
display:block;
}

.footer p{
color:#475569;
line-height:1.7;
max-width:420px;
margin-top:10px
}

.footer strong{
color:#0f172a;
display:block;
margin-bottom:10px
}

.footer a{
display:block;
color:#475569;
text-decoration:none;
margin-top:10px;
font-weight:600
}

.footer a:hover{
color:var(--green)
}

/* BOTﾃグ WHATSAPP */
.whatsapp-float{
position:fixed;
right:22px;
bottom:22px;
width:66px;
height:66px;
border-radius:50%;
display:grid;
place-items:center;
background:#25D366;
color:#fff;
text-decoration:none;
font-size:0;
box-shadow:0 15px 40px rgba(37,211,102,.45);
z-index:30;
transition:.3s
}

.whatsapp-float::before{
content:"";
width:34px;
height:34px;
display:block;
background:#fff;
mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.02 3C8.85 3 3.03 8.73 3.03 15.78c0 2.25.6 4.44 1.74 6.38L3 29l7.02-1.82a13.2 13.2 0 0 0 6 1.5c7.17 0 13-5.73 13-12.78C29.02 8.73 23.19 3 16.02 3Zm0 23.49c-1.9 0-3.76-.5-5.39-1.45l-.39-.23-4.17 1.08 1.11-4.01-.26-.41a10.52 10.52 0 0 1-1.66-5.69c0-5.85 4.83-10.61 10.76-10.61 5.94 0 10.77 4.76 10.77 10.61 0 5.86-4.83 10.61-10.77 10.61Zm5.9-7.94c-.32-.16-1.91-.93-2.21-1.04-.3-.11-.51-.16-.73.16-.21.32-.84 1.04-1.03 1.25-.19.22-.38.24-.7.08-.32-.16-1.36-.49-2.58-1.56-.95-.84-1.6-1.88-1.78-2.2-.19-.32-.02-.49.14-.65.14-.14.32-.38.49-.57.16-.19.21-.32.32-.54.11-.22.05-.41-.03-.57-.08-.16-.73-1.73-1-2.37-.26-.62-.53-.54-.73-.55h-.62c-.22 0-.57.08-.87.41-.3.32-1.14 1.1-1.14 2.68s1.17 3.11 1.33 3.32c.16.22 2.3 3.46 5.57 4.85.78.33 1.39.53 1.86.68.78.24 1.49.21 2.05.13.63-.09 1.91-.77 2.18-1.52.27-.75.27-1.39.19-1.52-.08-.13-.3-.21-.62-.38Z'/%3E%3C/svg%3E") center/contain no-repeat
}

.whatsapp-float:hover{
transform:scale(1.08);
background:#1EBE5D
}

.reveal{
opacity:0;
transform:translateY(28px);
transition:.75s ease
}

.reveal.active{
opacity:1;
transform:none
}

.delay{transition-delay:.16s}

@media(max-width:930px){
.nav{
min-height:82px
}

.brand{
width:260px;
height:auto;
}

.brand img{
width:100%;
height:auto;
transform:none;
}

.menu{
display:none;
position:absolute;
top:82px;
left:20px;
right:20px;
flex-direction:column;
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:22px;
padding:24px;
box-shadow:0 20px 50px rgba(15,23,42,.16)
}

.menu.open{display:flex}
.menu-toggle{display:block}

.hero-grid,.two-col{
grid-template-columns:1fr
}

.phone{height:620px}
.steps,.metrics,.audience-grid{grid-template-columns:1fr 1fr}
.card-1{left:8px}
.card-2{right:8px}
}

@media(max-width:620px){
.container{width:min(100% - 26px,1180px)}
.section{padding:62px 0}
.hero{padding-top:52px}

h1{font-size:42px}
.lead{font-size:17px}
.hero-actions .btn{width:100%}

.steps,.metrics,.audience-grid,.benefit-grid{
grid-template-columns:1fr
}

.phone{
height:600px;
border-width:8px
}

.floating-card{display:none}

.footer-grid{
flex-direction:column;
align-items:flex-start
}

.footer img{
height:58px;
max-width:240px
}

.brand{
width:210px;
height:auto;
}

.brand img{
width:100%;
height:auto;
transform:none;
}

.nav{
min-height:76px
}

.menu{
top:76px
}

.whatsapp-float{
width:60px;
height:60px;
right:16px;
bottom:16px
}

.whatsapp-float::before{
width:31px;
height:31px
}
}