/* Protótipo da home (ref. firecrawl.dev): mais respiro, menos texto, ilustração e micro-animação. hify-ui. */
.hp { --cream: #FCF7F0; --peach: #FFD2BF; --or: #FF4000; }
.hp-sec { padding: clamp(96px, 12vw, 160px) var(--pad-x); border-top: 1px solid var(--line); }
.hp-tint { background: var(--cream); }
.hp-head { max-width: 720px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center; display: grid; gap: 16px; justify-items: center; }
.hp-head p:not(.hp-eyebrow) { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--ink-2, #555); max-width: 34em; }
.hp-eyebrow { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--or); }
.hp-h2 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; }
.hp-h2 span, .hp-h1 span { color: var(--or); display: block; }

/* hero: centrado, grade de fundo com cruzes, tags mono e pixels piscando */
.hp-hero { position: relative; padding: clamp(72px, 9vw, 120px) var(--pad-x) 0; text-align: center; overflow: hidden; }
.hp-grid { position: absolute; inset: 0 0 auto; height: 620px; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center -1px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 75%); }
.hp-px { position: absolute; left: var(--x); top: var(--y); width: 36px; height: 36px; background:
  conic-gradient(from 90deg at 33% 33%, var(--or) 0 25%, transparent 0) 0 0 / 24px 24px; opacity: .0; animation: hp-twinkle 4.8s steps(4) var(--d, 0s) infinite; }
.hp-tag { position: absolute; left: var(--x); top: var(--y); font-size: 11px; color: var(--line-3); letter-spacing: .04em; }
.hp-cross { position: absolute; left: var(--x); top: var(--y); width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.hp-cross::before, .hp-cross::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--or); transform: translate(-50%, -50%); }
.hp-cross::after { transform: translate(-50%, -50%) rotate(90deg); }
.hp-cross { animation: hp-spin 9s linear infinite; }
.hp-hero-copy { position: relative; max-width: 860px; margin: 0 auto; display: grid; justify-items: center; gap: 22px; }
.hp-pill { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.hp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--or); animation: hp-ping 1.8s ease-out infinite; }
.hp-h1 { margin: 0; font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1; letter-spacing: -.045em; font-weight: 700; text-wrap: balance; }
.hp-lead { margin: 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--ink-2, #555); max-width: 32em; }
.hp-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.hp-assure { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13px; color: var(--ink-3, #777); }
.hp-assure li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--or); margin-right: 8px; vertical-align: 2px; }
.hp-hero-app { position: relative; max-width: 1080px; margin: clamp(48px, 6vw, 72px) auto 0; text-align: left; animation: hp-rise 1s cubic-bezier(.2,.8,.2,1) .15s both; }
.hp-hero-app .hero-app { margin: 0; box-shadow: 0 30px 80px -30px rgba(17,17,17,.25); }
.hp-hero-app::before { content: ""; position: absolute; inset: -40px -60px auto; height: 70%; z-index: -1; background: radial-gradient(closest-side, rgba(255,64,0,.14), transparent); }

/* como funciona: 3 cartões ilustrados */
.hp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1160px; margin: 0 auto; }
.hp-step { display: grid; gap: 10px; align-content: start; padding: 16px 16px 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: transform .3s, box-shadow .3s; }
.hp-step:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(17,17,17,.25); }
.hp-step img { width: 100%; height: auto; border-radius: 10px; background: var(--cream); }
.hp-step span { font-size: 12px; color: var(--or); margin-top: 8px; }
.hp-step h3 { margin: 0; font-size: 1.375rem; letter-spacing: -.02em; }
.hp-step p { margin: 0; color: var(--ink-2, #555); line-height: 1.5; }

/* demo animada: log do agente + trilha */
.hp-demo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; max-width: 1080px; margin: 0 auto; align-items: center; }
.hp-term { background: #111; color: #eee; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(17,17,17,.5); }
.hp-term-top { display: flex; gap: 6px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #2a2a2a; }
.hp-term-top i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; }
.hp-term-top span { margin-left: 8px; font-size: 12px; color: #999; }
.hp-log { list-style: none; margin: 0; padding: 18px 18px 22px; display: grid; gap: 10px; font-size: 13px; line-height: 1.45; min-height: 300px; }
.hp-log li { opacity: .18; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.hp-log b { display: inline-block; min-width: 76px; font-weight: 400; }
.hp-log u { text-decoration: none; background: rgba(255,64,0,.25); padding: 0 3px; border-radius: 3px; }
.t-ok { color: #9a9a9a; } .t-run { color: #FFD2BF; } .t-hit, .t-done { color: var(--or); }
.hp-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; border-left: 2px solid var(--line); }
.hp-track li { padding: 12px 0 12px 20px; position: relative; color: var(--ink-3, #777); transition: color .4s; }
.hp-track li::before { content: ""; position: absolute; left: -7px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); transition: background .4s, border-color .4s; }
.hp-track span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.is-play .hp-log li { animation: hp-line .45s ease forwards; animation-delay: calc(.35s + var(--i) * .7s); }
.is-play .hp-track li { animation: hp-step .4s ease forwards; animation-delay: calc(.35s + var(--i) * .7s); }
.is-play .hp-track li::before { animation: hp-node .4s ease forwards; animation-delay: calc(.35s + var(--i) * .7s); }
.is-done .hp-log li { opacity: 1; transform: none; } .is-done .hp-track li { color: var(--ink); } .is-done .hp-track li::before { background: var(--or); border-color: var(--or); }

/* comparativo enxuto */
.hp-cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.hp-cmp article { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.hp-cmp .is-hify { border-color: var(--or); box-shadow: 0 0 0 3px rgba(255,64,0,.1); }
.hp-cmp h3 { margin: 0 0 16px; font-size: 1.25rem; letter-spacing: -.02em; }
.hp-cmp ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hp-cmp li { padding-left: 26px; position: relative; line-height: 1.4; color: var(--ink-2, #555); }
.hp-cmp li::before { position: absolute; left: 0; top: 0; font-family: var(--mono); }
.hp-cmp li.y::before { content: "✓"; color: var(--or); } .hp-cmp li.n::before { content: "–"; color: var(--line-3); }
.hp-integr { max-width: 1080px; margin: 40px auto 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.hp-integr span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3, #777); margin-right: 8px; }
.hp-integr b { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 400; font-size: 14px; }

/* time e FAQ herdam o layout atual, só com mais respiro */
.hp .team { padding-block: clamp(96px, 12vw, 160px); }
.hp .team .section-head { text-align: center; justify-items: center; display: grid; gap: 16px; max-width: 720px; margin: 0 auto 56px; }
.hp-faq { max-width: 760px; margin: 0 auto; }

/* revelação ao rolar (o script.js atual marca [data-reveal]) */
.js .hp [data-reveal] { transition-delay: var(--rd, 0s); }

@keyframes hp-twinkle { 0%, 100% { opacity: 0; } 25%, 50% { opacity: .55; } }
@keyframes hp-spin { to { rotate: 360deg; } }
@keyframes hp-ping { 0% { box-shadow: 0 0 0 0 rgba(255,64,0,.5); } 100% { box-shadow: 0 0 0 9px rgba(255,64,0,0); } }
@keyframes hp-rise { from { opacity: 0; transform: translateY(32px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hp-line { to { opacity: 1; transform: none; } }
@keyframes hp-step { to { color: var(--ink); } }
@keyframes hp-node { to { background: var(--or); border-color: var(--or); } }

@media (max-width: 900px) {
  .hp-steps, .hp-cmp { grid-template-columns: 1fr; max-width: 520px; }
  .hp-demo { grid-template-columns: 1fr; gap: 28px; }
  .hp-tag, .hp-cross, .hp-px { display: none; }
  .hp-sec { padding-block: 80px; }
  .hp-log { font-size: 12px; min-height: 0; }
  .hp-hero-app { margin-inline: calc(var(--pad-x) * -.5); }
}
@media (prefers-reduced-motion: reduce) {
  .hp *, .hp *::before, .hp *::after { animation: none !important; transition: none !important; }
  .hp-px { display: none; }
  .hp-log li { opacity: 1; transform: none; }
}
.hp-h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); max-width: 18ch; }
.hp-hero-copy { max-width: 980px; }
.hp .team .section-head { display: grid !important; grid-template-columns: 1fr !important; text-align: center; }
.hp .team .section-head > * { grid-column: 1 !important; margin-inline: auto; }
.hp .faq.hp-sec { display: block; }
.hp .faq .hp-head { grid-column: 1 / -1; }
.hp-h1 { font-size: clamp(2.375rem, 4.6vw, 3.75rem) !important; max-width: 24ch !important; }