/* ============================================================
   Pede as Contas — Home (index.html)
   CSS específico da landing: hero, ticker, cards, steps,
   amostra do kit, seção "para quem", CTA final.
   Depende de assets/style.css (tokens + base) já carregado antes.
   ============================================================ */

/* hero */
.hero{position:relative; padding:196px 0 92px; overflow:hidden}
.hero::before{content:""; position:absolute; top:-18%; left:50%; width:940px; height:940px; margin-left:-470px;
  border-radius:50%; background:radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);
  pointer-events:none; animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(-50px,0) scale(1)}100%{transform:translate(60px,30px) scale(1.12)}}
.hero .wrap{position:relative}
.hero .eyebrow{display:inline-block; margin-bottom:28px}
.hero h1{font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(44px,9.6vw,116px); line-height:.9; letter-spacing:-.025em; max-width:16ch}
.hero h1 .line{display:block; overflow:hidden; padding-top:.16em; margin-top:-.16em; padding-bottom:.03em}
.hero h1 .line > span{display:block; transform:translateY(112%); animation:rise .9s var(--ease) forwards}
.hero h1 .line:nth-child(2) > span{animation-delay:.1s}
.hero h1 .line:nth-child(3) > span{animation-delay:.2s}
.hero h1 em{font-style:normal; color:var(--accent)}
@keyframes rise{to{transform:translateY(0)}}
.hero p.lead{font-size:clamp(16px,2vw,20px); color:var(--mut); max-width:56ch; line-height:1.6; margin:36px 0 0;
  opacity:0; animation:fade .9s var(--ease) .5s forwards}
.hero p.lead strong{color:var(--ink); font-weight:600}
@keyframes fade{to{opacity:1}}
.hero .cta-row{margin-top:44px; opacity:0; animation:fade .9s var(--ease) .66s forwards}
.micro{font-size:13px; color:var(--mut2); margin-top:20px; letter-spacing:.01em; opacity:0; animation:fade .9s var(--ease) .78s forwards}

/* ticker de verdades — marquee athletic uppercase */
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0; overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .track{display:inline-flex; animation:marquee 40s linear infinite; will-change:transform}
.ticker:hover .track{animation-play-state:paused}
.ticker span{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(16px,2.2vw,26px); letter-spacing:.005em; color:var(--ink); padding:0 30px}
.ticker span::after{content:"◆"; color:var(--accent); font-size:10px; vertical-align:middle; margin-left:30px; font-weight:400}
@keyframes marquee{to{transform:translateX(-50%)}}

/* cards */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px}
.card{border:1px solid var(--line); border-radius:16px; padding:34px 28px; background:linear-gradient(180deg,var(--bg2),transparent); transition:.35s var(--ease); position:relative; overflow:hidden}
.card::before{content:""; position:absolute; inset:0; background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%), var(--accent-soft), transparent 40%); opacity:0; transition:.4s}
.card:hover{border-color:#33333f; transform:translateY(-4px)}
.card:hover::before{opacity:1}
.card .n{font-family:var(--display); font-weight:900; font-size:32px; color:var(--accent); display:block; margin-bottom:16px; position:relative; letter-spacing:-.02em}
.card h3{font-size:18.5px; font-weight:700; margin-bottom:10px; letter-spacing:-.01em; position:relative}
.card p{color:var(--mut); font-size:14.5px; line-height:1.62; position:relative}

/* steps */

/* sample */
.sample{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.ring-card{border:1px solid var(--line); border-radius:18px; padding:32px; background:var(--bg2)}
.job{display:flex; align-items:center; gap:20px; padding:17px 0; border-bottom:1px solid var(--line)}
.job:last-child{border-bottom:none}
.ring{position:relative; width:56px; height:56px; flex:0 0 56px}
.ring svg{transform:rotate(-90deg)}
.ring .fg{stroke-dasharray:144.5; stroke-dashoffset:144.5; transition:stroke-dashoffset 1.3s var(--ease)}
.ring.draw .fg{stroke-dashoffset:var(--off)}
.ring .val{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums}
.job .co{font-size:12px; color:var(--mut2); letter-spacing:.04em; text-transform:uppercase}
.job .ti{font-size:15.5px; font-weight:600; margin-top:2px}
.tagline-soft{font-size:12.5px; color:var(--mut2); margin-top:20px; text-align:center; font-style:italic}

/* for-whom */
.who{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:50px}
.who .box{border:1px solid var(--line); border-radius:16px; padding:34px; transition:.35s var(--ease)}
.who .box.yes{border-color:#33333f}
.who .box.yes:hover{border-color:var(--accent); transform:translateY(-3px)}
.who h4{font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:20px; font-weight:700}
.who .box.yes h4{color:var(--accent)}
.who .box.no h4{color:var(--mut2)}
.who li{list-style:none; color:var(--mut); font-size:15px; padding:9px 0 9px 28px; position:relative}
.who .box.yes li::before{content:"↗"; position:absolute; left:0; color:var(--accent); font-weight:700}
.who .box.no li::before{content:"—"; position:absolute; left:0; color:var(--mut2)}

/* teaser "quem tá do outro lado" (link pra /sobre/) */
.founder-teaser{padding:64px 0; border-bottom:1px solid var(--line)}
.founder-teaser-link{display:flex; align-items:center; gap:24px; border:1px solid var(--line); border-radius:20px; padding:24px 28px; transition:.3s var(--ease)}
.founder-teaser-link:hover{border-color:var(--accent); transform:translateY(-2px)}
.founder-teaser-photo{width:64px; height:64px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--bg2); flex:0 0 64px}
.founder-teaser-photo img{width:100%; height:100%; object-fit:cover; display:block}
.founder-fallback-mini{display:none; width:100%; height:100%; align-items:center; justify-content:center; background:radial-gradient(circle, var(--accent-soft), transparent 70%)}
.founder-fallback-mini svg{width:22px; height:22px}
.founder-teaser-text{display:block}
.founder-teaser-text .eyebrow{display:block; margin-bottom:6px}
.founder-teaser-title{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(16px,2.2vw,21px); letter-spacing:-.01em; color:var(--ink)}
.founder-teaser-title em{font-style:normal; color:var(--accent)}
@media(max-width:600px){
  .founder-teaser-link{flex-direction:column; text-align:center}
}

/* final cta */
.final{text-align:center; padding:156px 0; position:relative; overflow:hidden}
.final::before{content:""; position:absolute; top:50%; left:50%; width:820px; height:820px; margin:-410px 0 0 -410px; border-radius:50%; background:radial-gradient(circle, var(--accent-soft), transparent 60%); pointer-events:none}
.final .wrap{position:relative}
.final h2{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(40px,8vw,92px); letter-spacing:-.03em; line-height:.94; margin-bottom:28px}
.final h2 em{font-style:normal; color:var(--accent)}
.final p{color:var(--mut); max-width:48ch; margin:0 auto 40px; font-size:17.5px}
.final .cta-row{justify-content:center}
.priv{font-size:12.5px; color:var(--mut2); margin-top:32px; max-width:54ch; margin-left:auto; margin-right:auto; line-height:1.6}

@media(max-width:820px){
  .grid3,.sample,.who{grid-template-columns:1fr}
  .sample{gap:36px}
}