/* ============================================================
   Tramalytic — landing.css  (tema Sasico)
   Hero lavanda, cards dark/lime/white, accordion, Unbounded headings.
   Nenhuma dependência de style.css ou dashboard.css.
   ============================================================ */

/* ── Reset mínimo para a landing ── */
.ag-body { margin:0; padding:0; font-family:"Poppins",system-ui,sans-serif; font-size:16px; color:#1b1e2c; background:#fff; -webkit-font-smoothing:antialiased; }
.ag-body *, .ag-body *::before, .ag-body *::after { box-sizing:border-box; }
.ag-body a { text-decoration:none; color:inherit; }
.ag-body img { max-width:100%; display:block; }
.ag-body button { font-family:inherit; cursor:pointer; border:none; background:none; }

/* ── Container ── */
.ag-container { width:100%; max-width:1160px; margin:0 auto; padding:0 28px; }

/* ── Tipografia ── */
.ag-display, .ag-h1, .ag-h2 { font-family:"Unbounded","Poppins",sans-serif; font-weight:700; line-height:1.15; letter-spacing:-0.02em; }
.ag-h1  { font-size:clamp(40px,5.5vw,64px); }
.ag-h2  { font-size:clamp(28px,3.5vw,44px); }
.ag-lead { font-size:clamp(15px,1.5vw,18px); line-height:1.75; color:#555b7d; font-weight:400; }
.ag-muted { color:#8b90a7; }

/* ── Badge-pílula de seção ── */
.ag-badge { display:inline-block; font-family:"Poppins",sans-serif; font-size:13px; font-weight:600; color:#6b5ce7; background:#f0edff; border-radius:999px; padding:6px 16px; margin-bottom:20px; }
.ag-badge--lime { color:#3d6b10; background:#e8ffc8; }
.ag-badge--dark { color:#c1ff72; background:rgba(193,255,114,.12); }

/* ── Botões ── */
.ag-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 26px; border-radius:10px; font-family:"Poppins",sans-serif; font-size:14.5px; font-weight:600; white-space:nowrap; transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease; }
.ag-btn:hover { transform:translateY(-2px); }
.ag-btn-dark { background:#1b1e2c; color:#fff; box-shadow:0 4px 20px rgba(27,30,44,.22); }
.ag-btn-dark:hover { box-shadow:0 8px 28px rgba(27,30,44,.32); }
.ag-btn-lime { background:#c1ff72; color:#1b1e2c; box-shadow:0 4px 20px rgba(193,255,114,.4); }
.ag-btn-lime:hover { box-shadow:0 8px 28px rgba(193,255,114,.55); }
.ag-btn-outline { background:transparent; color:#1b1e2c; border:1.5px solid #d4d6e6; }
.ag-btn-outline:hover { border-color:#1b1e2c; }
.ag-btn-outline--white { border-color:rgba(255,255,255,.3); color:#fff; }
.ag-btn-outline--white:hover { border-color:#fff; }
.ag-btn-lg { height:56px; padding:0 34px; font-size:15.5px; border-radius:12px; }
.ag-btn-sm { height:38px; padding:0 18px; font-size:13px; }

/* ══════════════════════════════════════════════
   1. NAVBAR
══════════════════════════════════════════════ */
.ag-nav {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(200,202,220,.35);
}
.ag-nav-inner {
  display:flex; align-items:center; gap:0;
  height:70px;
}
.ag-logo { display:flex; align-items:center; flex-shrink:0; }
.ag-logo img { height:32px; width:auto; }
.ag-logo-text { font-family:"Unbounded",sans-serif; font-weight:700; font-size:18px; color:#1b1e2c; letter-spacing:-0.03em; }
.ag-logo-text span { color:#79bd2c; }
.ag-nav-links { display:flex; align-items:center; gap:6px; margin:0 auto; }
.ag-nav-links a { font-size:14px; font-weight:500; color:#555b7d; padding:8px 14px; border-radius:8px; transition:color .15s, background .15s; }
.ag-nav-links a:hover { color:#1b1e2c; background:rgba(27,30,44,.05); }
.ag-nav-cta { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* ══════════════════════════════════════════════
   2. HERO
══════════════════════════════════════════════ */
.ag-hero {
  position:relative; overflow:hidden;
  background:linear-gradient(140deg, #eef0fb 0%, #f5f0ff 55%, #f0f5ff 100%);
  padding:96px 0 80px;
}

/* Formas decorativas */
.ag-hero-deco { position:absolute; pointer-events:none; }
.ag-hero-deco--tl { top:-60px; left:-80px; width:340px; height:340px; background:radial-gradient(circle, rgba(193,255,114,.18) 0%, transparent 70%); border-radius:50%; }
.ag-hero-deco--tr { top:20px; right:-40px; width:280px; height:280px; background:radial-gradient(circle, rgba(156,107,245,.14) 0%, transparent 68%); border-radius:50%; }
.ag-hero-deco--bl { bottom:-80px; left:10%; width:200px; height:200px; background:radial-gradient(circle, rgba(78,184,240,.12) 0%, transparent 70%); border-radius:50%; }
.ag-hero-deco-ring {
  position:absolute; top:50%; right:6%;
  transform:translateY(-50%);
  width:420px; height:420px;
  border-radius:50%;
  border:1.5px dashed rgba(156,107,245,.22);
}
.ag-hero-deco-ring::after {
  content:""; position:absolute; inset:40px;
  border-radius:50%; border:1.5px solid rgba(193,255,114,.28);
}

.ag-hero-inner { position:relative; text-align:center; max-width:800px; margin:0 auto; }
.ag-hero-inner .ag-h1 { color:#1b1e2c; margin-bottom:24px; }
.ag-hero-inner .ag-lead { max-width:620px; margin:0 auto 40px; }
.ag-hero-ctas { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:64px; }

/* Mock UI preview */
.ag-hero-preview {
  position:relative; max-width:860px; margin:0 auto;
  background:#fff; border-radius:20px;
  box-shadow:0 24px 80px rgba(27,30,44,.14), 0 4px 20px rgba(27,30,44,.06);
  overflow:hidden; border:1px solid rgba(200,202,220,.4);
}
.ag-preview-bar { height:40px; background:#f5f5f8; display:flex; align-items:center; gap:7px; padding:0 16px; border-bottom:1px solid #eaebf5; }
.ag-preview-dot { width:11px; height:11px; border-radius:50%; }
.ag-preview-dot:nth-child(1){ background:#f87171; }
.ag-preview-dot:nth-child(2){ background:#fbbf24; }
.ag-preview-dot:nth-child(3){ background:#4ade80; }
.ag-preview-body { display:grid; grid-template-columns:200px 1fr; min-height:260px; }
.ag-preview-sidebar { background:#1b1e2c; padding:20px 16px; display:flex; flex-direction:column; gap:10px; }
.ag-preview-sitem { height:10px; border-radius:5px; }
.ag-preview-sitem:nth-child(1){ background:rgba(193,255,114,.7); width:70%; }
.ag-preview-sitem:nth-child(2){ background:rgba(255,255,255,.18); width:55%; }
.ag-preview-sitem:nth-child(3){ background:rgba(255,255,255,.12); width:65%; }
.ag-preview-sitem:nth-child(4){ background:rgba(255,255,255,.10); width:48%; }
.ag-preview-content { padding:24px; display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto auto; gap:12px; }
.ag-preview-kpi { background:#f0f1fa; border-radius:10px; padding:14px 16px; }
.ag-preview-knum { font-family:"Unbounded",sans-serif; font-size:22px; font-weight:700; color:#1b1e2c; }
.ag-preview-klbl { font-size:10px; color:#8b90a7; margin-top:2px; }
.ag-preview-kpi:first-child .ag-preview-knum { color:#21c69e; }
.ag-preview-chart { grid-column:1/-1; background:#f0f1fa; border-radius:10px; padding:14px 16px; }
.ag-preview-chart-bars { display:flex; align-items:flex-end; gap:6px; height:60px; padding-top:8px; }
.ag-preview-bar-item { flex:1; border-radius:4px 4px 0 0; }

/* ══════════════════════════════════════════════
   3. STATS
══════════════════════════════════════════════ */
.ag-stats { padding:80px 0; background:#f7f8fe; }
.ag-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ag-stat-card { border-radius:18px; padding:36px 28px; }
.ag-stat-card--dark { background:#1b1e2c; }
.ag-stat-card--lime { background:#c1ff72; }
.ag-stat-card--white { background:#fff; border:1px solid #e8eaf5; }
.ag-stat-num { font-family:"Unbounded","Poppins",sans-serif; font-size:clamp(32px,4vw,48px); font-weight:700; letter-spacing:-0.03em; line-height:1; margin-bottom:10px; }
.ag-stat-card--dark .ag-stat-num { color:#c1ff72; }
.ag-stat-card--lime .ag-stat-num { color:#1b1e2c; }
.ag-stat-card--white .ag-stat-num { color:#1b1e2c; }
.ag-stat-lbl { font-size:14px; font-weight:500; line-height:1.5; }
.ag-stat-card--dark .ag-stat-lbl { color:rgba(255,255,255,.62); }
.ag-stat-card--lime .ag-stat-lbl { color:#3d6b10; }
.ag-stat-card--white .ag-stat-lbl { color:#8b90a7; }

/* ══════════════════════════════════════════════
   4. FUNCIONALIDADES
══════════════════════════════════════════════ */
.ag-features { padding:96px 0; background:#fff; }
.ag-features-head { text-align:center; max-width:640px; margin:0 auto 56px; }
.ag-features-head .ag-lead { margin-top:16px; }
.ag-features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ag-feat-card { border-radius:20px; padding:36px 30px; border:1px solid #e8eaf5; background:#fff; transition:box-shadow .2s, transform .2s; }
.ag-feat-card:hover { box-shadow:0 12px 36px rgba(27,30,44,.1); transform:translateY(-4px); }
.ag-feat-card--dark { background:#1b1e2c; border-color:#1b1e2c; color:#fff; }
.ag-feat-card--dark:hover { box-shadow:0 12px 36px rgba(27,30,44,.3); }
.ag-feat-ico { width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:14px; margin-bottom:22px; }
.ag-feat-ico--light { background:#f0f1fa; color:#6b5ce7; }
.ag-feat-ico--dark  { background:rgba(193,255,114,.15); color:#c1ff72; }
.ag-feat-ico svg { width:26px; height:26px; stroke-width:1.8; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.ag-feat-badge { display:inline-block; font-size:11px; font-weight:700; color:#1b1e2c; background:#c1ff72; border-radius:999px; padding:3px 11px; margin-bottom:14px; }
.ag-feat-title { font-family:"Unbounded","Poppins",sans-serif; font-size:16px; font-weight:700; margin-bottom:10px; line-height:1.3; }
.ag-feat-card--dark .ag-feat-title { color:#fff; }
.ag-feat-desc { font-size:13.5px; line-height:1.7; color:#8b90a7; }
.ag-feat-card--dark .ag-feat-desc { color:rgba(255,255,255,.55); }

/* ══════════════════════════════════════════════
   5. COMO FUNCIONA
══════════════════════════════════════════════ */
.ag-how { padding:96px 0; background:#f7f8fe; }
.ag-how-head { text-align:center; max-width:640px; margin:0 auto 56px; }
.ag-how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.ag-how-step { position:relative; }
.ag-how-step:not(:last-child)::after {
  content:""; position:absolute;
  top:32px; left:calc(100% + 10px);
  width:calc(100% - 60px); height:1.5px;
  background:linear-gradient(to right, #d4d6e6, transparent);
}
.ag-how-num { font-family:"Unbounded","Poppins",sans-serif; font-size:44px; font-weight:800; color:#c1ff72; line-height:1; margin-bottom:18px; }
.ag-how-title { font-family:"Unbounded","Poppins",sans-serif; font-size:16px; font-weight:700; color:#1b1e2c; margin-bottom:10px; }
.ag-how-desc { font-size:14px; line-height:1.7; color:#8b90a7; }

/* ══════════════════════════════════════════════
   6. ACCORDION "POR QUE O TRAMALYTIC"
══════════════════════════════════════════════ */
.ag-why { padding:96px 0; background:#fff; }
.ag-why-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.ag-why-left { position:sticky; top:100px; }
.ag-why-left .ag-lead { margin-top:16px; }
.ag-accordion { display:flex; flex-direction:column; gap:0; }
.ag-accordion-item { border-bottom:1px solid #e8eaf5; }
.ag-accordion-item:first-child { border-top:1px solid #e8eaf5; }
.ag-accordion-head {
  display:flex; align-items:center; gap:14px;
  padding:20px 0; cursor:pointer;
  width:100%; text-align:left;
  background:none; border:none;
  font-family:"Poppins",sans-serif;
  transition:color .15s;
}
.ag-accordion-head:hover { color:#6b5ce7; }
.ag-accordion-ico { width:34px; height:34px; border-radius:10px; background:#f0f1fa; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s; }
.ag-accordion-ico svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ag-accordion-item.ag-open .ag-accordion-ico { background:#1b1e2c; color:#c1ff72; }
.ag-accordion-label { font-size:15px; font-weight:600; color:#1b1e2c; flex:1; }
.ag-accordion-chevron { width:20px; height:20px; color:#8b90a7; transition:transform .25s ease; flex-shrink:0; }
.ag-accordion-chevron svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.ag-accordion-item.ag-open .ag-accordion-chevron { transform:rotate(180deg); color:#1b1e2c; }
.ag-accordion-body { display:none; padding:0 0 20px 48px; font-size:14px; line-height:1.75; color:#8b90a7; }
.ag-accordion-item.ag-open .ag-accordion-body { display:block; }

/* ══════════════════════════════════════════════
   7. CTA FINAL
══════════════════════════════════════════════ */
.ag-cta { padding:100px 0; background:#1b1e2c; text-align:center; }
.ag-cta-inner { max-width:660px; margin:0 auto; }
.ag-cta-title { font-family:"Unbounded","Poppins",sans-serif; font-size:clamp(26px,3.5vw,42px); font-weight:700; color:#fff; line-height:1.2; margin-bottom:20px; letter-spacing:-0.02em; }
.ag-cta-sub { font-size:16px; color:rgba(255,255,255,.58); margin-bottom:40px; line-height:1.7; }
.ag-cta-note { margin-top:18px; font-size:13px; color:rgba(255,255,255,.35); }
.ag-cta-note span { margin:0 8px; }

/* ══════════════════════════════════════════════
   8. FOOTER
══════════════════════════════════════════════ */
.ag-footer { background:#13151f; padding:64px 0 36px; color:rgba(255,255,255,.6); }
.ag-footer-inner { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; margin-bottom:56px; }
.ag-footer-brand .ag-footer-logo { margin-bottom:14px; }
.ag-footer-brand .ag-footer-logo img { height:28px; opacity:.85; }
.ag-footer-tagline { font-size:13.5px; line-height:1.65; max-width:240px; }
.ag-footer-col-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.35); margin-bottom:16px; }
.ag-footer-links { display:flex; flex-direction:column; gap:10px; }
.ag-footer-links a { font-size:14px; color:rgba(255,255,255,.55); transition:color .15s; }
.ag-footer-links a:hover { color:#fff; }
.ag-footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:28px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.ag-footer-copy { font-size:13px; }
.ag-footer-legal { display:flex; gap:22px; }
.ag-footer-legal a { font-size:13px; color:rgba(255,255,255,.4); transition:color .15s; }
.ag-footer-legal a:hover { color:rgba(255,255,255,.75); }

/* ══════════════════════════════════════════════
   RESPONSIVO — mobile-first (≤768px)
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ag-nav-links { display:none; }
  .ag-nav-cta .ag-btn:first-child { display:none; }

  .ag-hero { padding:64px 0 56px; }
  .ag-hero-deco-ring { display:none; }
  .ag-hero-ctas { flex-direction:column; align-items:center; }
  .ag-preview-body { grid-template-columns:1fr; }
  .ag-preview-sidebar { display:none; }

  .ag-stats-grid { grid-template-columns:1fr 1fr; }

  .ag-features-grid { grid-template-columns:1fr; }

  .ag-how-grid { grid-template-columns:1fr; gap:36px; }
  .ag-how-step::after { display:none; }

  .ag-why-inner { grid-template-columns:1fr; gap:40px; }
  .ag-why-left { position:static; }

  .ag-footer-inner { grid-template-columns:1fr 1fr; }
  .ag-footer-brand { grid-column:1/-1; }
  .ag-footer-bottom { flex-direction:column; text-align:center; }
}
@media (max-width: 480px) {
  .ag-stats-grid { grid-template-columns:1fr; }
  .ag-footer-inner { grid-template-columns:1fr; }
}