/* Amante marketing site — matches the app's dark theme */
:root{
  --bg:#0d0b12; --bg-2:#141019; --card:#1b1622; --line:#2a2233;
  --ink:#f3eef8; --muted:#9d93ad; --brand:#ff3d7f; --brand-2:#ff7a3d; --ok:#28c76f;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(1200px 600px at 50% -10%, #241631 0%, var(--bg) 60%);
  color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--brand); text-decoration:none}
.wrap{max-width:980px; margin:0 auto; padding:0 20px}

/* nav */
.nav{position:sticky; top:0; z-index:10; background:rgba(13,11,18,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:22px; height:62px}
.logo{font-size:21px; font-weight:900; letter-spacing:.3px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.nav a.nl{color:var(--muted); font-size:14px; font-weight:600}
.nav a.nl:hover,.nav a.nl.on{color:var(--ink)}
.nav .spacer{flex:1}
.btn{display:inline-block; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;
  font-weight:800; border-radius:999px; padding:11px 22px; font-size:14.5px; border:0; cursor:pointer}
.btn.big{padding:15px 34px; font-size:16px}
.btn.ghost{background:none; border:1px solid var(--line); color:var(--ink)}
.langsw{display:flex; gap:2px; margin-right:6px}
.langsw a{color:var(--muted); font-size:11.5px; font-weight:700; padding:5px 7px; border-radius:8px}
.langsw a.on{color:var(--ink); background:var(--card); border:1px solid var(--line)}

/* hero */
.hero{padding:74px 0 40px; text-align:center}
.hero h1{font-size:clamp(30px,5.4vw,46px); line-height:1.15; margin:0 0 14px}
.hero h1 b{background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{color:var(--muted); font-size:17px; max-width:560px; margin:0 auto 26px}
.agebadge{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 13px; margin-top:18px}
.agebadge b{color:var(--brand)}

/* persona cards */
.people{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:44px 0}
.pcard{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 14px; text-align:center}
.pav{width:74px; height:74px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center;
  font-size:30px; font-weight:800; color:#fff; position:relative}
.pav i{position:absolute; right:2px; bottom:2px; width:14px; height:14px; border-radius:50%;
  background:var(--ok); border:3px solid var(--card)}
.av-rafa{background:linear-gradient(135deg,#ff3d7f,#ff7a3d)} .av-alex{background:linear-gradient(135deg,#3d9bff,#3dfff0)}
.av-bruno{background:linear-gradient(135deg,#5a6478,#2e3542)} .av-leo{background:linear-gradient(135deg,#28c76f,#3dd6ff)}
.av-thiago{background:linear-gradient(135deg,#8a3dff,#ff3d55)}
.pcard b{display:block; font-size:15.5px} .pcard span{color:var(--muted); font-size:12.5px}

/* sections */
section{padding:44px 0}
h2{font-size:26px; margin:0 0 22px; text-align:center}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.col{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px}
.col .n{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; margin-bottom:12px}
.col h3{margin:0 0 8px; font-size:16.5px}
.col p{margin:0; color:var(--muted); font-size:14px}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; align-items:stretch}
.plan{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 22px; text-align:center; position:relative}
.plan.best{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), 0 0 24px rgba(255,61,127,.22)}
.plan .tag{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--brand);
  color:#fff; font-size:10.5px; font-weight:800; padding:3px 12px; border-radius:999px}
.plan .qty{font-size:30px; font-weight:900} .plan .qty small{font-size:13px; color:var(--muted); font-weight:600}
.plan .price{color:var(--brand); font-size:21px; font-weight:800; margin:8px 0 4px}
.plan .per{color:var(--muted); font-size:12px; margin-bottom:16px}

/* trust + faq */
.trustbox{background:var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:26px; text-align:center}
.trustbox p{color:var(--muted); max-width:640px; margin:8px auto 0; font-size:14.5px}
.faq{max-width:680px; margin:0 auto}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:10px}
.faq summary{font-weight:700; cursor:pointer; font-size:15px}
.faq p{color:var(--muted); font-size:14px; margin:10px 0 0}

/* content pages */
.page{max-width:680px; margin:0 auto; padding:50px 0 30px}
.page h1{font-size:30px} .page h2{text-align:left; font-size:19px; margin-top:32px; color:var(--brand)}
.page p,.page li{color:#c9bfd8; font-size:15px}

/* footer */
footer{border-top:1px solid var(--line); margin-top:50px; padding:34px 0 44px}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center}
footer a{color:var(--muted); font-size:13px}
footer a:hover{color:var(--ink)}
footer .cop{flex-basis:100%; color:#5c5370; font-size:12px; margin-top:14px}
.cta-final{text-align:center; padding:60px 0}
@media (max-width:640px){ .nav a.nl{display:none} }