:root{
  --navy:#0F0E61; --navy-2:#0B0A4D;
  --blue:#1E1CCF; --blue-light:#8B8AFF; --blue-pale:#EAEAFB; --blue-mist:#C7C6FA;
  --pink:#FF1774;
  --gray:#657086; --bg-soft:#F5F5F7; --line:#E2E1F5;
  --green:#3DCB1E; --amber:#F2A900; --white:#FFFFFF;

}

@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ } }
html{scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  margin:0; font-family:'Inter',sans-serif;
  color:var(--navy); background:var(--white); 
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-0.02em;}
p{margin:0;}

/* ---------- HERO ---------- */
.hero{background:var(--blue); color:var(--white); padding:96px 0 88px; position:relative; overflow:hidden; min-height: 80vh;}
.hero::after{content:"";position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,23,168,.25), transparent 70%);}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; position:relative;}
.eyebrow{color:var(--amber); font-size:15px; font-weight:700; margin-bottom:18px; letter-spacing:.01em;}
.hero h1{font-size:44px; line-height:1.12; max-width:520px;}
.hero p.lead{margin-top:20px; font-size:18px; color:var(--blue-mist); max-width:460px;}
.btn{display:inline-block; text-decoration:none; font-weight:600; font-size:15px; padding:14px 28px; border-radius:999px; transition:transform .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--pink); color:var(--white);}
.btn-primary:hover{background:var(--pink);}
.deco-sq{position:absolute; z-index:1;}
.hero .btn{margin-top:32px;}
.hero-media{border-radius:16px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.35); max-width: 500px;}
.hero-media img{width:100%; height:100%; object-fit:cover;}

/* ---------- PROBLEM ---------- */
.problem{background:var(--white);}
.problem h2{font-size:32px; max-width:640px;}
.problem .lead{font-size:17px; color:var(--gray); max-width:600px; margin-top:16px;}
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
.pcard{background:var(--bg-soft); border-radius:14px; padding:28px;}
.pcard .num{font-size:14px; font-weight:700; color:var(--blue); margin-bottom:10px;}
.pcard:nth-child(2) .num{color:var(--pink);}
.pcard:nth-child(3) .num{color:var(--green);}
.pcard h3{font-size:18px; font-weight:600;}
.pcard p{font-size:14.5px; color:var(--gray); margin-top:8px;}

/* ---------- FEATURE ROWS ---------- */
.feature{border-top:1px solid var(--line);}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.frow.rev .fcol-text{order:2;} .frow.rev .fcol-visual{order:1;}
.fcol-text .tag{color:var(--pink); font-size:14px; font-weight:700; margin-bottom:12px;}
.fcol-text h3{font-size:28px; line-height:1.2;}
.fcol-text p.desc{margin-top:14px; font-size:16px; color:var(--gray); max-width:440px;}
.fcol-text .points{margin-top:24px; display:flex; flex-direction:column; gap:16px;}
.point{display:flex; gap:14px;}
.point .dot{flex:0 0 34px; height:34px; border-radius:9px; background:var(--blue-pale); color:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.point div h4{font-size:15.5px; font-weight:600; margin:0;}
.point div p{font-size:14px; color:var(--gray); margin-top:3px;}

/* device mockup */
.device-card{background:var(--navy); border-radius:20px; padding:34px; color:var(--white); position:relative;}
.device-screen{background:var(--navy-2); border-radius:14px; padding:26px; text-align:center;}
.face-frame{width:120px; height:120px; margin:0 auto 14px; border:2px solid var(--blue-light); border-radius:16px; position:relative; display:flex; align-items:center; justify-content:center;}
.face-frame svg{width:56px; height:56px;}
.status-pill{display:inline-flex; align-items:center; gap:6px; background:rgba(0,169,79,.15); color:#4ade80; font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px;}

/* table mockup */
.table-card{background:var(--bg-soft); border-radius:16px; padding:22px; border:1px solid var(--line);}
.table-card .thead{display:grid; grid-template-columns:1.4fr .8fr .8fr; font-size:12px; font-weight:600; color:var(--gray); padding:0 8px 10px; border-bottom:1px solid var(--line);}
.table-card .trow{display:grid; grid-template-columns:1.4fr .8fr .8fr; align-items:center; padding:12px 8px; font-size:13.5px; border-bottom:1px solid var(--line);}
.table-card .trow:last-child{border-bottom:none;}
.avatar{width:26px; height:26px; border-radius:50%; background:var(--blue-pale); color:var(--blue); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-right:8px;}
.badge{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;}
.badge.green{background:rgba(0,169,79,.12); color:var(--green);}
.badge.amber{background:rgba(245,158,11,.14); color:var(--amber);}

/* cards mockup (cadastro) */
.cards-mockup{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.mini-card{background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:16px;}
.mini-card .avatar-lg{width:44px; height:44px; border-radius:12px; background:var(--blue-mist); color:var(--navy); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.mini-card h4{font-size:13.5px; font-weight:600;}
.mini-card p{font-size:12px; color:var(--gray); margin-top:2px;}

/* ---------- AUDIENCES ---------- */
.audiences{background:var(--bg-soft);}
.audiences h2{font-size:32px; text-align:center; max-width:600px; margin:0 auto;}
.aud-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
.aud-card{background:var(--white); border-radius:16px; padding:28px; border:1px solid var(--line);}
.aud-card .aud-label{font-size:13px; font-weight:700; letter-spacing:.02em; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line);}
.aud-card.c1 .aud-label{color:var(--blue);}
.aud-card.c2 .aud-label{color:var(--pink);}
.aud-card.c3 .aud-label{color:var(--green);}
.aud-card ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.aud-card li{font-size:14.5px; color:var(--navy-2); padding-left:20px; position:relative;}
.aud-card li::before{content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--blue-mist);}
.result-line{text-align:center; margin-top:36px; font-size:15px; color:var(--gray);}

/* ---------- STEPS ---------- */
.steps h2{font-size:32px; max-width:560px;}
.steps-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:48px; counter-reset:step;}
.step{position:relative; padding-top:18px;}
.step .snum{width:36px; height:36px; border-radius:10px; background:var(--blue); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; margin-bottom:16px;}
.step:nth-child(2) .snum{background:var(--pink);}
.step:nth-child(3) .snum{background:var(--green); color:var(--navy);}
.step:nth-child(4) .snum{background:var(--amber); color:var(--navy);}
.step h4{font-size:16px; font-weight:600;}
.step p{font-size:13.5px; color:var(--gray); margin-top:6px;}
.eta{margin-top:44px; background:var(--bg-soft); border-radius:14px; padding:20px 26px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.eta strong{font-size:15px;}
.eta span{font-size:14.5px; color:var(--gray);}

/* ---------- PRICING ---------- */
.pricing{background:var(--navy-2); color:var(--white);}
.pricing-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:0; border-radius:20px; overflow:hidden; background:var(--navy);}
.plan-left{padding:44px; border-right:1px solid rgba(255,255,255,.08);}
.plan-tag{font-size:13px; font-weight:700; color:var(--amber); letter-spacing:.02em;}
.plan-name{font-size:24px; font-weight:700; margin-top:10px;}
.price-row{margin-top:26px;}
.price-big{font-size:38px; font-weight:800;}
.price-note{font-size:13px; color:var(--blue-mist); margin-top:4px;}
.price-month{margin-top:22px; font-size:26px; font-weight:800; color:var(--pink);}
.price-month span{font-size:14px; font-weight:500; color:var(--blue-mist);}
.plan-right{padding:44px; background:rgba(255,255,255,.03);}
.plan-right .inc-label{font-size:12.5px; font-weight:700; color:var(--blue-mist); letter-spacing:.03em; margin-bottom:16px;}
.inc-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;}
.inc-list li{font-size:14.5px; padding-left:22px; position:relative;}
.inc-list li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700;}
.tiers{margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); font-size:13.5px; color:var(--blue-mist);}
.pricing-fine{font-size:12.5px; color:rgba(255,255,255,.45); margin-top:20px; max-width:640px;}

/* ---------- FINAL CTA ---------- */
.final{color:var(--navy); text-align:center;}
.final h2{font-size:36px; max-width:700px; margin:0 auto;}
.final p{margin-top:16px; color:var(--amber); font-size:16px;}
.final .btn{margin-top:32px;}
.final .tagline{margin-top:40px; font-size:13.5px; color:rgba(255,255,255,.5);}

@media (max-width:860px){
  section{padding:64px 0;}
  .hero{padding:72px 0 56px;}
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero h1{font-size:33px;}
  .hero-media{order:-1;}
  .problem-grid{grid-template-columns:1fr;}
  .frow, .frow.rev{grid-template-columns:1fr;}
  .frow.rev .fcol-text, .frow.rev .fcol-visual{order:unset;}
  .aud-grid{grid-template-columns:1fr;}
  .steps-row{grid-template-columns:1fr 1fr; row-gap:32px;}
  .pricing-grid{grid-template-columns:1fr;}
  .plan-left{border-right:none; border-bottom:1px solid rgba(255,255,255,.08);}
  .inc-list{grid-template-columns:1fr;}
  .final h2{font-size:28px;}
}