:root{--bg:#04140f;--bg2:#071c15;--g:#19d989;--g2:#0fb873;--fg:#f2fff9;--fg2:rgba(220,255,240,.68);--line:rgba(160,255,215,.12);--wrap:1200px}
body{background:#020b08;color:var(--fg);font-family:"Outfit",system-ui,sans-serif;font-size:16px;line-height:1.6}
.frame{max-width:1500px;margin:auto;background:var(--bg);min-height:100vh;overflow:hidden}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.g{font-style:normal;color:var(--g)}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-size:2rem;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.logo svg{width:2rem;height:2rem}
.logo--sm{font-size:1.4rem}.logo--sm svg{width:1.4rem;height:1.4rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:44px;padding:0 1.6rem;border-radius:999px;font-weight:600;font-size:.82rem;letter-spacing:.04em;transition:box-shadow .3s,transform .2s,background .3s;white-space:nowrap}
.btn b{font-size:1.4rem;line-height:1;transition:transform .3s}
.btn:hover b{transform:translateX(4px)}
.btn--g{background:linear-gradient(180deg,#38f2a0,#13c97b);color:#04140f;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 30px -10px rgba(25,217,137,.8)}
.btn--g:hover{box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 14px 40px -8px rgba(25,217,137,1)}
.btn--lg{height:50px;padding:0 1.8rem;font-size:1rem;letter-spacing:0;border:1px solid rgba(255,255,255,.35)}
.btn--line{border:1px solid var(--line);color:var(--fg)}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:999px;border:1px solid var(--line);background:rgba(25,217,137,.06);font-size:.92rem;font-weight:500}
.badge i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--g);color:#04140f;font-style:normal;font-size:.7rem}

.hd{position:relative;z-index:40;width:min(1110px,100% - 40px);margin:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding:20px 0 26px;border-bottom:1px solid var(--line)}
.hd__nav{display:flex;flex-wrap:wrap;column-gap:1.7rem;row-gap:2.6rem;max-width:400px;margin-inline:auto;font-size:.82rem;text-transform:uppercase;font-weight:500}
.hd__nav a{transition:color .3s}.hd__nav a.is-on,.hd__nav a:hover{color:var(--g)}
.hd__cta{height:42px}
.hd__burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.hd__burger span{width:20px;height:2px;background:#fff}
.kit-drawer__panel{background:#061a13;color:#fff}
.drawer-x{align-self:flex-end;font-size:2rem;width:44px;height:44px}

.hero{position:relative;padding:30px 0 0;background:radial-gradient(70% 50% at 50% 100%,rgba(25,217,137,.28),transparent 70%)}
.waves{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.waves path{fill:none;stroke:rgba(150,255,210,.16);stroke-width:1}
.hero__in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:1rem}
.hero__h{margin-top:1.4rem;font-weight:500;font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.2;letter-spacing:-.03em}
.hero__p{margin-top:1.7rem;max-width:58ch;color:var(--fg2);font-weight:300;font-size:1rem;line-height:1.75}
.hero__ctas{display:flex;gap:1rem;margin-top:2rem}
.cursor{position:absolute;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.cursor svg{width:18px;height:18px}
.cursor b{margin:2px 0 0 12px;padding:.35rem 1rem;border-radius:999px;font-size:.9rem;font-weight:500;color:#04140f}
.cur-a{left:20%;top:62%}.cur-a svg{transform:scaleX(-1);align-self:flex-end}.cur-a b{background:var(--g);margin:0 12px 0 0;order:2}
.cur-b{right:19%;top:68%}.cur-b b{background:#ffb08a}
.beam{position:relative;height:120px;margin-top:-20px;background:radial-gradient(30% 100% at 50% 100%,rgba(220,255,240,.95),rgba(25,217,137,.6) 35%,transparent 70%);filter:blur(6px)}
.app-wrap{position:relative;width:min(1150px,100% - 40px);margin:-28px auto 0;perspective:1800px}
.app{position:relative;display:grid;grid-template-columns:200px 1fr;border-radius:28px 28px 0 0;background:#0a1f18;border:1px solid rgba(160,255,215,.18);overflow:hidden;transform-origin:center top}
.app__glowbar{position:absolute;left:9%;right:6%;top:-17px;height:18px;border-radius:14px 14px 0 0;background:var(--g);opacity:.9}
.app__side{padding:24px;border-right:1px solid var(--line);background:#081a14}
.app__logo{display:flex;align-items:center;gap:.6rem;font-size:1.9rem;font-weight:600}
.app__logo svg{width:34px;height:34px}
.app__side ul{margin-top:28px;display:grid;gap:4px;color:var(--fg2);font-size:.92rem}
.app__side li{padding:.6rem .8rem;border-radius:10px}
.app__side li.on{background:rgba(25,217,137,.12);color:var(--g)}
.app__main{padding:18px 26px 26px;min-width:0}
.app__top{display:flex;align-items:center;gap:1.2rem;justify-content:flex-end}
.search{margin-right:auto;margin-left:auto;display:flex;align-items:center;width:min(260px,40%);height:40px;padding:0 14px;border-radius:8px;background:#0f2a21;border:1px solid var(--line)}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:.85rem;color:#fff}
.bell{position:relative}.bell i{position:absolute;top:0;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--g)}
.me{padding:.35rem .7rem;border-radius:999px;background:#fff;color:#04140f;font-size:.75rem;font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.kpi{padding:14px;border-radius:14px;border:1px solid var(--line);background:#0c241c}
.kpi small{color:var(--fg2);font-size:.75rem}
.kpi b{display:block;font-size:1.7rem;font-weight:600;line-height:1.2}
.kpi em{font-style:normal;font-size:.75rem;color:var(--g)}
.kpi--g{background:linear-gradient(160deg,#1de592,#0fa865);color:#04140f;border-color:transparent}
.kpi--g small,.kpi--g em{color:#063322}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;min-height:240px}
.col{padding:10px;border-radius:14px;background:rgba(255,255,255,.025);border:1px dashed rgba(160,255,215,.1);display:flex;flex-direction:column;gap:8px}
.col h4{display:flex;justify-content:space-between;font-size:.78rem;font-weight:500;color:var(--fg2);margin-bottom:2px}
.col h4 span{background:rgba(25,217,137,.15);color:var(--g);border-radius:999px;padding:0 .5rem}
.tk{padding:10px 12px;border-radius:10px;background:#11302a;border:1px solid var(--line);font-size:.78rem;line-height:1.35}
.tk b{display:block;font-weight:500;color:#fff}
.tk span{display:inline-block;margin-top:6px;padding:.1rem .45rem;border-radius:5px;font-size:.66rem;background:rgba(255,176,138,.15);color:#ffb08a}
.tk span.t2{background:rgba(25,217,137,.15);color:var(--g)}
.tk span.t3{background:rgba(140,160,255,.15);color:#9eb0ff}

section{position:relative}
.head{max-width:740px;margin-bottom:3.4rem}
.head--c{margin-inline:auto;text-align:center}
.head h2{margin-top:1.1rem;font-weight:500;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.12;letter-spacing:-.025em}
.feat{padding:130px 0 110px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.f{padding:34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .4s}
.f:nth-child(3n){border-right:0}.f:nth-child(n+4){border-bottom:0}
.f:hover{background:rgba(25,217,137,.06)}
.f__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:rgba(25,217,137,.12);color:var(--g);font-size:1.3rem}
.f h3{margin-top:1.4rem;font-size:1.25rem;font-weight:500}
.f p{margin-top:.4rem;color:var(--fg2);font-weight:300}

.como{padding:110px 0;background:var(--bg2)}
.como__grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.como__pin{position:sticky;top:60px;align-self:start;height:max-content}
.como__vis{position:relative;width:min(340px,80%);aspect-ratio:1;margin-top:2.6rem;display:grid;place-items:center}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(25,217,137,.35);animation:spin 16s linear infinite}
.r1{border-style:dashed}.r2{inset:14%;animation-duration:10s;animation-direction:reverse;border-color:rgba(25,217,137,.6)}.r3{inset:30%;background:radial-gradient(circle,rgba(25,217,137,.35),transparent 70%);border:0}
@keyframes spin{to{transform:rotate(360deg)}}
.como__vis b{position:relative;font-size:4.4rem;font-weight:600;color:var(--g);letter-spacing:-.04em}
.como__steps{display:grid;gap:22vh;padding:8vh 0 20vh}
.cs{padding:30px;border-radius:22px;border:1px solid var(--line);background:#0b2219;opacity:.35;transition:opacity .5s,border-color .5s}
.cs.is-on{opacity:1;border-color:rgba(25,217,137,.5)}
.cs h3{font-size:1.5rem;font-weight:500}
.cs p{margin-top:.5rem;color:var(--fg2);font-weight:300}

.bene{padding:120px 0}
.bene__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto auto;gap:16px}
.bene__card{padding:30px;border-radius:24px;border:1px solid var(--line);background:#0a1f18}
.bene__card b{display:block;font-size:clamp(2.6rem,5vw,4rem);font-weight:600;letter-spacing:-.04em;color:var(--g)}
.bene__card p{color:var(--fg2)}
.bene__card--big{grid-row:span 2;display:flex;flex-direction:column}
.bene__card--big svg{margin-top:auto;width:100%}
.spark{stroke-dasharray:500;stroke-dashoffset:500}
.bene__card--int{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.orbit{position:relative;width:170px;height:170px;flex:none}
.orbit span{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px;border-radius:12px;display:grid;place-items:center;background:#11302a;border:1px solid var(--line);font-weight:700;color:#fff;animation:orb 12s linear infinite}
.orbit span:nth-child(2){animation-delay:-2.4s}.orbit span:nth-child(3){animation-delay:-4.8s}.orbit span:nth-child(4){animation-delay:-7.2s}.orbit span:nth-child(5){animation-delay:-9.6s}
@keyframes orb{from{transform:rotate(0) translateX(70px) rotate(0)}to{transform:rotate(360deg) translateX(70px) rotate(-360deg)}}
.orbit i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:#04140f;font-style:normal;box-shadow:0 0 40px rgba(25,217,137,.7)}

.depo{padding:110px 0}
.q{flex:0 0 380px;margin:0 10px;padding:28px;border-radius:22px;border:1px solid var(--line);background:#0a1f18;display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem}
.q blockquote{font-size:1.12rem;font-weight:300}
.q figcaption{display:flex;gap:.8rem;align-items:center}
.q b{display:block;font-weight:500}.q small{color:var(--fg2)}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;color:#04140f;background:linear-gradient(135deg,hsl(var(--h) 70% 65%),hsl(calc(var(--h) + 40) 70% 45%))}

.planos{padding:110px 0;background:var(--bg2)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.plan{position:relative;display:flex;flex-direction:column;padding:32px;border-radius:24px;border:1px solid var(--line);background:#0a1f18}
.plan--hot{border-color:rgba(25,217,137,.6);box-shadow:0 0 0 1px rgba(25,217,137,.3),0 40px 80px -40px rgba(25,217,137,.6)}
.tagx{position:absolute;top:-12px;right:24px;padding:.25rem .8rem;border-radius:999px;background:var(--g);color:#04140f;font-size:.75rem;font-weight:600}
.plan h3{font-size:1.2rem;font-weight:500}
.pp{margin-top:1rem;font-size:2.4rem;font-weight:600;letter-spacing:-.03em}
.pp small{font-size:.9rem;font-weight:400;color:var(--fg2)}
.pd{color:var(--fg2)}
.plan ul{display:grid;gap:.6rem;margin:1.5rem 0 2rem}
.plan li::before{content:"✦ ";color:var(--g)}
.faq{padding:110px 0}
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem}
.acc summary{font-size:1.15rem;font-weight:500}
.acc__icon{border:1px solid var(--line);color:var(--g);font-size:1.2rem}
.cta{padding:40px 0 110px}
.cta__box{padding:100px 2rem;border-radius:32px;text-align:center;border:1px solid rgba(25,217,137,.3);background:radial-gradient(60% 90% at 50% 120%,rgba(25,217,137,.5),transparent),#071c15}
.cta h2{font-weight:500;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.03em;margin-bottom:2rem}
.ft{padding:30px 0 40px;border-top:1px solid var(--line)}
.ft__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--fg2);font-size:.9rem}
.ft nav{display:flex;gap:1.5rem}

@media (max-width:1024px){
  .hd{grid-template-columns:auto auto}.hd__nav,.hd__cta{display:none}.hd__burger{display:flex;justify-self:end}
  .app{grid-template-columns:1fr}.app__side{display:none}
  .fgrid{grid-template-columns:1fr 1fr}.f:nth-child(n){border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .como__grid,.faq__grid{grid-template-columns:1fr}.como__pin{position:static}.como__steps{gap:1rem;padding:0}.cs{opacity:1}
  .bene__grid{grid-template-columns:1fr 1fr}.bene__card--big{grid-row:auto;grid-column:span 2}
  .plans{grid-template-columns:1fr}
  .cursor{display:none}
}
@media (max-width:640px){
  .hero__ctas{flex-direction:column;width:100%}.hero__ctas .btn{width:100%}
  .kpis{grid-template-columns:1fr 1fr}.board{grid-template-columns:1fr 1fr}
  .fgrid,.bene__grid{grid-template-columns:1fr}.bene__card--big,.bene__card--int{grid-column:auto}
  .bene__card--int{flex-direction:column}
  .app__main{padding:14px}
}
