/* Extraído de index.html para permitir CSP sem <style> inline. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; background: #fff; color: #0b2b42; overflow-x: hidden; }

@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-18px); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes blinkCursor {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes heroAfterType {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.robot-stage { width: 100%; max-width: 720px; margin-left: auto; position: relative; }
.robot-glow { position: absolute; inset: 4% 6% 12% 6%; border-radius: 50%; background: radial-gradient(circle at 50% 46%, rgba(255,214,120,0.30), rgba(243,130,32,0.10) 46%, transparent 70%); filter: blur(12px); pointer-events: none; }
.robot-canvas { position: relative; width: 100%; aspect-ratio: 1 / 1; display: block; background: transparent; filter: drop-shadow(0 24px 38px rgba(4,38,21,0.42)); }
.robot-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.typewriter-cursor {
  display: inline-block; width: 0.08em; height: 0.9em; margin-left: 0.08em;
  background: #ffc107; transform: translateY(0.08em);
  animation: blinkCursor 0.75s steps(1) infinite;
}
.hero-delayed { opacity: 0; transform: translateY(18px); }
.hero-typed .hero-delayed { animation: heroAfterType 0.7s ease forwards; }
.hero-typed .hero-subtitle { animation-delay: 0.1s; }
.hero-typed .hero-cta { animation-delay: 0.28s; }

@media (max-width: 768px) {
  #site-header > div { padding: 0 16px !important; gap: 10px !important; }
  #site-header img { height: 46px !important; }
  #site-header span { font-size: 1.45rem !important; }
  #site-header a { white-space: nowrap !important; }
  #site-header a.btn-login { font-size: 0.9rem !important; padding: 8px 10px !important; }
  #site-header a.btn-cadastro { font-size: 0.9rem !important; padding: 10px 14px !important; }
  .hero-grid { flex-direction: column !important; }
  .hero-text { max-width: 100% !important; text-align: center !important; }
  .hero-text h1 { font-size: 3.25rem !important; }
  .hero-text p { font-size: 1.12rem !important; }
  .hero-cta { justify-content: center !important; }
  .hero-video-wrap { display: none !important; }
  .nav-links { display: none !important; }
  .about-inner { flex-direction: column !important; text-align: center; }
  .about-bubble { width: 100% !important; position: relative !important; top: auto !important; left: auto !important; }
  .about-mascot { width: 100% !important; text-align: center !important; }
  .footer-inner { flex-direction: column; gap: 32px; text-align: center; }
}

/* ===== showcase tokens ===== */
:root{
  --green:#0D7A42; --green-app:#09814A; --orange:#f38220; --orange-app:#FB8500;
  --amber:#ffc107; --amber-app:#FFB703; --navy:#0b2b42; --red:#92140C; --purple:#6A00F4;
  --ink:#333333; --muted:#7C838A; --line:#e9e9ee; --bg-soft:#F7F7F8; --bg-chip:#F0F2F5;
}

@keyframes ringGrow{from{stroke-dashoffset:427}to{stroke-dashoffset:150}}

.app{font-family:'Inter',sans-serif}

.app-frame{
  display:flex; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:26px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(11,43,66,.22);
  transition:transform .35s ease, box-shadow .35s ease;
}
.app-frame:hover{transform:translateY(-6px); box-shadow:0 40px 80px -24px rgba(243,130,32,.28)}
.app-rail{
  width:56px; flex-shrink:0; background:var(--orange-app);
  display:flex; flex-direction:column; align-items:center; gap:18px; padding:16px 0;
}
.app-rail i{color:#fff; font-size:20px; opacity:.85}
.app-rail .on{background:#fff; color:var(--orange-app); width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; opacity:1}
.app-rail .on i{color:var(--orange-app); opacity:1}
.app-body{flex:1; min-width:0; padding:22px 24px; background:#fff}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-size:11px;font-weight:700;padding:4px 11px}
.btn-o{background:var(--orange-app);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:13px;padding:9px 16px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.btn-ghost{border:1.5px solid var(--orange-app);color:var(--orange-app);background:#fff;border-radius:12px;font-weight:700;font-size:13px;padding:9px 16px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}

.showcase-row{
  display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:center;
  max-width:1180px; margin:0 auto; padding:56px 0;
}
.showcase-row.flip .txt{order:2}
.showcase-row.flip .media{order:1}
.eyebrow{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--orange);opacity:.82}
.feat-title{font-size:2.1rem;font-weight:900;color:var(--navy);letter-spacing:-.5px;margin:12px 0 14px;line-height:1.1}
.feat-desc{color:#5b6b78;font-size:1.02rem;line-height:1.75;margin-bottom:22px;max-width:440px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.feat-list li{display:flex;align-items:center;gap:10px;color:#41525f;font-size:.95rem;font-weight:600}
.feat-list i{color:var(--green);font-size:1.05rem}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1180px;margin:0 auto;padding:24px 0 10px}

/* cabeçalho dos cards do trio (título + subtítulo no topo) */
.trio-head{font-weight:800;color:var(--green-app);font-size:1.05rem}
.trio-sub{font-size:.78rem;color:var(--muted);margin-top:2px;margin-bottom:16px;line-height:1.5}

/* ===== seção de vídeo ===== */
.video-band{background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);padding:96px 24px 104px;position:relative}
.video-head{text-align:center;max-width:720px;margin:0 auto 44px}
.video-head .feat-desc{margin:16px auto 0;max-width:600px}
.video-stage{max-width:960px;margin:0 auto;position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:0 34px 70px -22px rgba(11,43,66,.45);aspect-ratio:16/9;background:#0b2b42;cursor:pointer}
.video-facade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.video-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,43,66,.12),rgba(11,43,66,.55))}
.video-play{position:relative;z-index:2;width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#f38220,#fca311);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(243,130,32,.55);transition:transform .28s ease,box-shadow .28s ease}
.video-play i{color:#fff;font-size:2.4rem;margin-left:5px;line-height:1}
.video-stage:hover .video-play{transform:scale(1.08);box-shadow:0 16px 44px rgba(243,130,32,.7)}
.video-stage:focus-visible{outline:3px solid var(--amber);outline-offset:5px}
.video-badge{position:absolute;left:18px;top:16px;z-index:3;background:rgba(11,43,66,.72);color:#fff}
.video-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cta{text-align:center;margin-top:38px;display:flex;flex-direction:column;align-items:center;gap:12px}
.btn-cta{text-decoration:none;background:linear-gradient(135deg,#f38220,#fca311);color:#fff;font-weight:800;font-size:1rem;padding:16px 40px;border-radius:14px;box-shadow:0 6px 24px rgba(243,130,32,.45);transition:transform .25s,box-shadow .25s}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(243,130,32,.55)}
@media(max-width:600px){
  .video-band{padding:64px 18px 76px}
  .video-play{width:64px;height:64px}.video-play i{font-size:1.8rem}
  .video-head{margin-bottom:30px}
}

@media(max-width:980px){
  .showcase-row{grid-template-columns:1fr;gap:30px;padding:44px 0}
  .showcase-row.flip .txt{order:1}
  .showcase-row.flip .media{order:2}
  .feat-desc,.feat-title{max-width:100%}
  .trio{grid-template-columns:1fr;gap:22px}
}
@media(max-width:600px){
  .feat-title{font-size:1.7rem}
  .section-title{font-size:2rem!important}
  .app-body{padding:16px 15px}
}