/* ═══════════════════════════════════════════════════════════════════
   ATEND ANALYTICS — atendanalytics.css
   Prefix: aa-   |  Accent: amber/gold #f59e0b
   ═══════════════════════════════════════════════════════════════════ */

/* ——— Accent tokens ——— */
:root {
  --aa-gold:     #f59e0b;
  --aa-gold-dim: rgba(245, 158, 11, .12);
  --aa-gold-mid: rgba(245, 158, 11, .25);
  --aa-amber:    #d97706;
  --aa-violet:   #a78bfa;
  --aa-violet-dim: rgba(167, 139, 250, .10);
}


/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
.aa-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 0 3rem;
  overflow: hidden;
}

.aa-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.aa-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .32;
  pointer-events: none;
}
.aa-hero__orb--1 { width: 600px; height: 600px; top: -160px; left: -120px; background: var(--aa-gold); }
.aa-hero__orb--2 { width: 500px; height: 500px; bottom: -100px; right: -80px; background: var(--aa-violet); }
.aa-hero__orb--3 { width: 350px; height: 350px; top: 40%; left: 55%; background: var(--aa-amber); opacity: .18; }

.aa-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
}

.aa-hero__center {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.aa-hero__title {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: var(--wf-text-1);
  margin-bottom: 1.4rem;
}

.aa-hero__desc {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--wf-text-2);
  max-width: 640px;
  margin: 0 auto 2.2rem;
}

.aa-hero__ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Badge — gold variant */
.aa-badge {
  background: var(--aa-gold-dim) !important;
  color: var(--aa-gold) !important;
  border-color: var(--aa-gold-mid) !important;
}


/* ═══════════════════════════════════════
   BROWSER FRAME — Shared Component
   ═══════════════════════════════════════ */
.aa-browser {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--wf-border);
  background: var(--wf-bg-card);
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(245,158,11,.08);
}

.aa-browser__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--wf-bg-elevated);
  border-bottom: 1px solid var(--wf-border);
}

.aa-browser__dots {
  display: flex;
  gap: 6px;
}

.aa-browser__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.aa-browser__dot--r { background: #ff5f57; }
.aa-browser__dot--y { background: #febc2e; }
.aa-browser__dot--g { background: #28c840; }

.aa-browser__url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 6px;
  font-size: 12px;
  color: var(--wf-text-3);
  font-family: monospace;
}

.aa-browser__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wf-text-3);
}

.aa-browser__viewport {
  position: relative;
  overflow: hidden;
  background: #0c0c0e;
}

.aa-browser__viewport img {
  width: 100%;
  height: auto;
  display: block;
}

.aa-browser--sm {
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(245,158,11,.06);
}

.aa-browser--sm .aa-browser__bar {
  padding: 8px 12px;
}

.aa-browser--sm .aa-browser__dot {
  width: 8px;
  height: 8px;
}

.aa-browser--sm .aa-browser__url {
  font-size: 11px;
  padding: 3px 10px;
}


/* ═══════════════════════════════════════
   HERO SHOWCASE
   ═══════════════════════════════════════ */
.aa-hero-showcase {
  position: relative;
  max-width: 960px;
  margin: 4rem auto 0;
  perspective: 1200px;
}

.aa-hero-showcase .aa-browser {
  transform: rotateX(2deg);
  transition: transform .6s var(--wf-ease);
  box-shadow:
    0 40px 100px rgba(0,0,0,.5),
    0 0 0 1px rgba(245,158,11,.1),
    0 0 80px rgba(245,158,11,.06);
}

.aa-hero-showcase:hover .aa-browser {
  transform: rotateX(0deg);
}

.aa-hero-showcase__glow {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 120px;
  background: radial-gradient(ellipse, rgba(245,158,11,.12), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}


/* ═══════════════════════════════════════
   PLATFORM SPLIT — Screenshot + Features
   ═══════════════════════════════════════ */
.aa-platform-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.aa-platform-split__visual {
  position: relative;
}

.aa-browser--tilt {
  transform: perspective(1000px) rotateY(3deg) rotateX(1deg);
  transition: transform .5s var(--wf-ease);
}

.aa-platform-split__visual:hover .aa-browser--tilt {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.aa-platform-split__badge-float {
  position: absolute;
  bottom: -14px;
  right: -10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--aa-gold), var(--aa-amber));
  color: #0a0a0a;
  font-size: .78rem;
  font-weight: 800;
  border-radius: 10px;
  letter-spacing: .3px;
  box-shadow: 0 8px 24px rgba(245,158,11,.3);
  animation: aa-badge-float 3s ease-in-out infinite;
  z-index: 3;
}

@keyframes aa-badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.aa-platform-split__content h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--wf-text-1);
  margin-bottom: 1rem;
  letter-spacing: -.3px;
}

.aa-platform-split__content > p {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--wf-text-2);
  margin-bottom: 1.5rem;
}

.aa-platform-split__list {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.aa-platform-split__list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--wf-text-2);
}

.aa-platform-split__list li i {
  color: var(--aa-gold);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.aa-platform-split__list li strong {
  color: var(--wf-text-1);
  font-weight: 700;
}

@media (max-width: 1024px) {
  .aa-platform-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .aa-browser--tilt {
    transform: none;
  }
  .aa-platform-split__badge-float {
    right: 10px;
    bottom: -12px;
  }
}


/* ═══════════════════════════════════════
   UX SHOWCASE — Perspective + Callouts
   ═══════════════════════════════════════ */
.aa-ux-showcase {
  max-width: 960px;
  margin: 0 auto;
}

.aa-ux-showcase__frame {
  position: relative;
  perspective: 1200px;
}

.aa-ux-showcase__frame .aa-browser {
  transform: perspective(1200px) rotateX(4deg) scale(.98);
  transition: transform .6s var(--wf-ease);
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(245,158,11,.08);
}

.aa-ux-showcase__frame:hover .aa-browser {
  transform: perspective(1200px) rotateX(0deg) scale(1);
}

.aa-callout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
  z-index: 4;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

.aa-callout i {
  font-size: .95rem;
}

.aa-callout--1 {
  top: 15%;
  right: -20px;
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.08));
  border: 1px solid rgba(245,158,11,.25);
  color: var(--aa-gold);
  animation: aa-callout-drift 4s ease-in-out infinite;
}

.aa-callout--2 {
  bottom: 25%;
  left: -16px;
  background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(16,185,129,.08));
  border: 1px solid rgba(16,185,129,.25);
  color: var(--wf-emerald-light);
  animation: aa-callout-drift 4s ease-in-out infinite 1s;
}

.aa-callout--3 {
  bottom: 8%;
  right: -10px;
  background: linear-gradient(135deg, rgba(167,139,250,.15), rgba(167,139,250,.08));
  border: 1px solid rgba(167,139,250,.25);
  color: #a78bfa;
  animation: aa-callout-drift 4s ease-in-out infinite 2s;
}

@keyframes aa-callout-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 768px) {
  .aa-callout { display: none; }
  .aa-ux-showcase__frame .aa-browser {
    transform: none;
  }
}


/* ═══════════════════════════════════════
   COMPARE — Side-by-side Screenshots
   ═══════════════════════════════════════ */
.aa-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.aa-compare__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aa-compare__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  background: var(--aa-gold-dim);
  color: var(--aa-gold);
  font-family: monospace;
}

.aa-compare__label i {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .aa-compare {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}


/* ═══════════════════════════════════════
   KPI STRIP
   ═══════════════════════════════════════ */
.aa-kpi-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}

.aa-kpi {
  text-align: center;
}

.aa-kpi__value {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--aa-gold);
  letter-spacing: -.5px;
}

.aa-kpi__label {
  font-size: .8rem;
  color: var(--wf-text-3);
  margin-top: .25rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-weight: 600;
}

.aa-kpi-strip__sep {
  width: 1px;
  height: 40px;
  background: var(--wf-border);
}

@media (max-width: 640px) {
  .aa-kpi-strip { gap: 1.2rem; }
  .aa-kpi-strip__sep { display: none; }
  .aa-kpi__value { font-size: 1.6rem; }
}


/* ═══════════════════════════════════════
   PAIN GRID
   ═══════════════════════════════════════ */
.aa-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.aa-pain {
  padding: 2rem;
  text-align: center;
  transition: transform .35s, border-color .35s;
}
.aa-pain:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, .2);
}

.aa-pain__icon {
  font-size: 2rem;
  color: var(--aa-gold);
  margin-bottom: 1rem;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--aa-gold-dim);
  border-radius: 14px;
}

.aa-pain h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wf-text-1);
  margin-bottom: .55rem;
}

.aa-pain p {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--wf-text-3);
}

@media (max-width: 1024px) {
  .aa-pain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .aa-pain-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════
   CULTURE CARD  (Coletar → Decidir)
   ═══════════════════════════════════════ */
.aa-section--gold {
  background: linear-gradient(180deg, transparent, rgba(245,158,11,.025), transparent);
  border-top: 1px solid rgba(245,158,11,.06);
  border-bottom: 1px solid rgba(245,158,11,.06);
}

.aa-culture-card {
  margin-top: 3rem;
}

.aa-culture-card__inner {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.aa-culture-pillar {
  flex: 1 1 200px;
  max-width: 240px;
  text-align: center;
  padding: 1.8rem 1.2rem;
  border-radius: 16px;
  background: rgba(245,158,11,.04);
  border: 1px solid rgba(245,158,11,.1);
  transition: border-color .35s;
}
.aa-culture-pillar:hover {
  border-color: rgba(245,158,11,.25);
}

.aa-culture-pillar__icon {
  font-size: 1.8rem;
  color: var(--aa-gold);
  margin-bottom: .8rem;
}

.aa-culture-pillar h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wf-text-1);
  margin-bottom: .5rem;
}

.aa-culture-pillar p {
  font-size: .84rem;
  line-height: 1.55;
  color: var(--wf-text-3);
}

.aa-culture-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--aa-gold);
  padding-top: 3rem;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .aa-culture-arrow { display: none; }
  .aa-culture-card__inner { gap: 1rem; }
  .aa-culture-pillar { max-width: none; flex: 1 1 42%; }
}
@media (max-width: 640px) {
  .aa-culture-pillar { flex: 1 1 100%; }
}


/* ═══════════════════════════════════════
   CONCEPTS GRID  (Datasets, Charts, Dashboards, SQL Lab)
   ═══════════════════════════════════════ */
.aa-concepts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.aa-concept {
  padding: 2rem 1.6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .35s, border-color .35s;
}
.aa-concept:hover {
  transform: translateY(-4px);
  border-color: rgba(245,158,11,.25);
}

.aa-concept__icon {
  font-size: 2.2rem;
  color: var(--aa-gold);
  margin-bottom: .6rem;
}

.aa-concept__badge {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: var(--aa-gold-dim);
  color: var(--aa-gold);
  margin-bottom: .8rem;
  font-family: monospace;
}

.aa-concept h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--wf-text-1);
  margin-bottom: .55rem;
}

.aa-concept p {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--wf-text-3);
}

@media (max-width: 1024px) {
  .aa-concepts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .aa-concepts-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════
   UX GRID  (Experiência do Gestor)
   ═══════════════════════════════════════ */
.aa-ux-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.aa-ux-card {
  padding: 2rem;
  border-radius: 16px;
  background: rgba(245,158,11,.03);
  border: 1px solid rgba(245,158,11,.08);
  transition: border-color .35s, transform .35s;
}
.aa-ux-card:hover {
  border-color: rgba(245,158,11,.2);
  transform: translateY(-2px);
}

.aa-ux-card__number {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  color: var(--aa-gold);
  background: var(--aa-gold-dim);
  border-radius: 8px;
  padding: .2rem .55rem;
  margin-bottom: .8rem;
  font-family: monospace;
}

.aa-ux-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wf-text-1);
  margin-bottom: .5rem;
}

.aa-ux-card p {
  font-size: .87rem;
  line-height: 1.6;
  color: var(--wf-text-3);
}

@media (max-width: 640px) {
  .aa-ux-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════
   ECOSYSTEM — Hub de Integração
   ═══════════════════════════════════════ */
.aa-ecosystem {
  margin-top: 3rem;
  position: relative;
}

.aa-eco-center {
  text-align: center;
  margin-bottom: 2rem;
}

.aa-eco-center__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aa-gold) 0%, var(--aa-amber) 100%);
  font-size: 2.2rem;
  color: #0a0a0a;
  margin-bottom: .6rem;
  box-shadow: 0 0 40px rgba(245,158,11,.25);
}

.aa-eco-center span {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--wf-text-1);
  letter-spacing: .2px;
}

.aa-eco-sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.aa-eco-source {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem;
}

.aa-eco-source > i {
  font-size: 1.6rem;
  color: var(--aa-gold);
  flex-shrink: 0;
  margin-top: .1rem;
}

.aa-eco-source h4 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--wf-text-1);
  margin-bottom: .3rem;
}

.aa-eco-source p {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--wf-text-3);
}

@media (max-width: 1024px) {
  .aa-eco-sources { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .aa-eco-sources { grid-template-columns: 1fr; }
}

.aa-eco-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.4rem 1.8rem;
  border-radius: 14px;
  background: rgba(245,158,11,.04);
  border: 1px solid rgba(245,158,11,.12);
}

.aa-eco-note__icon {
  font-size: 1.4rem;
  color: var(--aa-gold);
  flex-shrink: 0;
  margin-top: .15rem;
}

.aa-eco-note p {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--wf-text-2);
}


/* ═══════════════════════════════════════
   DIFERENCIAL GRID
   ═══════════════════════════════════════ */
.aa-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.aa-diff {
  padding: 2rem;
  border-radius: 16px;
  background: rgba(245,158,11,.025);
  border: 1px solid rgba(245,158,11,.08);
  transition: border-color .35s, transform .35s;
}
.aa-diff:hover {
  border-color: rgba(245,158,11,.2);
  transform: translateY(-3px);
}

.aa-diff__icon {
  font-size: 1.6rem;
  color: var(--aa-gold);
  margin-bottom: .9rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aa-gold-dim);
  border-radius: 12px;
}

.aa-diff h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--wf-text-1);
  margin-bottom: .45rem;
}

.aa-diff p {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--wf-text-3);
}

@media (max-width: 1024px) {
  .aa-diff-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .aa-diff-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════
   SCENARIOS
   ═══════════════════════════════════════ */
.aa-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.aa-scenario {
  padding: 2rem;
  text-align: left;
  transition: transform .35s, border-color .35s;
}
.aa-scenario:hover {
  transform: translateY(-3px);
  border-color: rgba(245,158,11,.2);
}

.aa-scenario__area {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--aa-gold-dim);
  color: var(--aa-gold);
  margin-bottom: .8rem;
  font-family: monospace;
}

.aa-scenario h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wf-text-1);
  margin-bottom: .55rem;
  font-style: italic;
}

.aa-scenario p {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--wf-text-3);
}

@media (max-width: 1024px) {
  .aa-scenarios { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .aa-scenarios { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════
   PRACTICES
   ═══════════════════════════════════════ */
.aa-practices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.aa-practice {
  text-align: center;
  padding: 1.8rem 1.2rem;
  border-radius: 16px;
  background: rgba(255,255,255,.015);
  border: 1px solid var(--wf-border);
  transition: border-color .35s, transform .35s;
}
.aa-practice:hover {
  border-color: rgba(245,158,11,.18);
  transform: translateY(-2px);
}

.aa-practice__icon {
  font-size: 1.6rem;
  color: var(--aa-gold);
  margin-bottom: .8rem;
}

.aa-practice h4 {
  font-size: .98rem;
  font-weight: 700;
  color: var(--wf-text-1);
  margin-bottom: .45rem;
}

.aa-practice p {
  font-size: .83rem;
  line-height: 1.55;
  color: var(--wf-text-3);
}

@media (max-width: 1024px) {
  .aa-practices-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .aa-practices-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════
   CASES
   ═══════════════════════════════════════ */
.aa-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.aa-case {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  transition: transform .35s, border-color .35s;
}
.aa-case:hover {
  transform: translateY(-3px);
  border-color: rgba(245,158,11,.22);
}

.aa-case__header {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.aa-case__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aa-gold), var(--aa-amber));
  color: #0a0a0a;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -.5px;
}

.aa-case__name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--wf-text-1);
  line-height: 1.2;
}

.aa-case__role {
  font-size: .78rem;
  color: var(--wf-text-3);
  margin-top: .1rem;
}

.aa-case__tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .22rem .7rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  background: var(--aa-gold-dim);
  color: var(--aa-gold);
  font-family: monospace;
  width: fit-content;
}
.aa-case__tag i {
  font-size: .85rem;
}

.aa-case__quote {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--wf-text-2);
  font-style: italic;
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid rgba(245,158,11,.2);
}

.aa-case__takeaway {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  background: rgba(245,158,11,.04);
  border: 1px solid rgba(245,158,11,.08);
  margin-top: auto;
}

.aa-case__takeaway i {
  color: var(--aa-gold);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.aa-case__takeaway span {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--wf-text-3);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .aa-cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .aa-cases-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════
   CTA
   ═══════════════════════════════════════ */
.aa-cta {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 5rem 3rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(245,158,11,.06), rgba(167,139,250,.04));
  border: 1px solid rgba(245,158,11,.12);
}

.aa-cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aa-cta__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .25;
}
.aa-cta__orb--1 { width: 400px; height: 400px; top: -100px; left: -80px; background: var(--aa-gold); }
.aa-cta__orb--2 { width: 350px; height: 350px; bottom: -80px; right: -60px; background: var(--aa-violet); }

.aa-cta__content {
  position: relative;
  z-index: 2;
}

.aa-cta__title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--wf-text-1);
  margin-bottom: 1.2rem;
  letter-spacing: -.5px;
}

.aa-cta__desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--wf-text-2);
  max-width: 580px;
  margin: 0 auto 2rem;
}

.aa-cta__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.aa-cta__note {
  margin-top: 1.2rem;
  font-size: .78rem;
  color: var(--wf-text-3);
  letter-spacing: .3px;
}

@media (max-width: 640px) {
  .aa-cta { padding: 3rem 1.5rem; }
}


/* ═══════════════════════════════════════
   CECI INTRO (reuse shared pattern)
   ═══════════════════════════════════════ */
.ceci-intro {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  max-width: 700px;
  margin: 2rem auto 0;
}

.ceci-intro__avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, .25);
  flex-shrink: 0;
  object-fit: cover;
}

.ceci-intro__bubble {
  background: rgba(167, 139, 250, .05);
  border: 1px solid rgba(167, 139, 250, .12);
  border-radius: 14px;
  padding: 1.2rem 1.5rem;
  position: relative;
}

.ceci-intro__bubble p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--wf-text-2);
}

@media (max-width: 640px) {
  .ceci-intro { flex-direction: column; align-items: center; text-align: center; }
}


/* ═══════════════════════════════════════
   TEXT-GRADIENT — ambar / gold
   ═══════════════════════════════════════ */
.tg {
  background: linear-gradient(135deg, var(--aa-gold), #fbbf24, var(--aa-amber));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ═══════════════════════════════════════
   ANIMATION OVERRIDES
   ═══════════════════════════════════════ */
@keyframes aa-pulse-gold {
  0%, 100% { opacity: .22; }
  50% { opacity: .38; }
}
.aa-hero__orb--1 { animation: aa-pulse-gold 7s ease-in-out infinite; }
.aa-hero__orb--2 { animation: aa-pulse-gold 9s ease-in-out infinite 1.5s; }
.aa-hero__orb--3 { animation: aa-pulse-gold 6s ease-in-out infinite .8s; }


/* ═══════════════════════════════════════
   DASHBOARD ILLUSTRATIONS (SVG/CSS)
   ═══════════════════════════════════════ */

/* --- Base illustration container --- */
.aa-illust {
  width: 100%;
  height: 100%;
  display: flex;
  background: #0c0c0f;
  color: rgba(255,255,255,.7);
  font-size: .65rem;
  line-height: 1.4;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
}

/* --- Shared sidebar --- */
.aa-illust__sidebar {
  width: 44px;
  min-width: 44px;
  background: rgba(255,255,255,.03);
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .6rem 0;
  gap: .55rem;
}
.aa-illust__logo {
  font-size: 1rem;
  color: var(--aa-gold, #f59e0b);
  margin-bottom: .3rem;
}
.aa-illust__nav-item {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: .85rem;
  color: rgba(255,255,255,.3);
  transition: all .2s;
}
.aa-illust__nav-item--active {
  background: rgba(245,158,11,.12);
  color: var(--aa-gold, #f59e0b);
}

/* --- Main content area --- */
.aa-illust__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* --- Top bar --- */
.aa-illust__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.aa-illust__breadcrumb {
  font-size: .55rem;
  color: rgba(255,255,255,.4);
}
.aa-illust__topbar-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.aa-illust__filter-pill {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .15rem .45rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  font-size: .5rem;
  color: rgba(255,255,255,.5);
}
.aa-illust__filter-pill--active {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.25);
  color: var(--aa-gold, #f59e0b);
}
.aa-illust__live-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  animation: aa-illust-pulse 2s ease-in-out infinite;
}
@keyframes aa-illust-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  50% { opacity: .7; box-shadow: 0 0 0 4px rgba(16,185,129,0); }
}

/* --- KPI row (dashboard) --- */
.aa-illust__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  padding: .6rem .7rem;
  flex-shrink: 0;
}
.aa-illust__kpi {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: .45rem .55rem;
}
.aa-illust__kpi-label {
  font-size: .45rem;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.aa-illust__kpi-value {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: .1rem 0;
}
.aa-illust__kpi-trend {
  font-size: .48rem;
  color: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  gap: .15rem;
}
.aa-illust__kpi-trend--up {
  color: #10b981;
}

/* --- Charts area --- */
.aa-illust__charts {
  display: flex;
  gap: .5rem;
  padding: 0 .7rem .5rem;
  flex: 1;
  min-height: 0;
}
.aa-illust__chart {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: .4rem .5rem;
  display: flex;
  flex-direction: column;
}
.aa-illust__chart--main { flex: 2; }
.aa-illust__chart--side { flex: 1; }
.aa-illust__chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .5rem;
  color: rgba(255,255,255,.5);
  margin-bottom: .35rem;
  flex-shrink: 0;
}
.aa-illust__chart-legend {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .42rem;
}
.aa-illust__legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: .1rem;
}
.aa-illust__legend-dot--gold { background: #f59e0b; }
.aa-illust__legend-dot--cyan { background: #06b6d4; }
.aa-illust__legend-dot--violet { background: #a78bfa; }
.aa-illust__legend-dot--green { background: #10b981; }

.aa-illust__line-chart {
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* Donut chart */
.aa-illust__donut-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
}
.aa-illust__donut { width: 60px; height: 60px; flex-shrink: 0; }
.aa-illust__donut-labels {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .44rem;
  color: rgba(255,255,255,.45);
}
.aa-illust__donut-labels span {
  display: flex;
  align-items: center;
  gap: .2rem;
}

/* --- Bottom row (events + alerts) --- */
.aa-illust__bottom-row {
  display: flex;
  gap: .5rem;
  padding: 0 .7rem .6rem;
  flex-shrink: 0;
}
.aa-illust__events,
.aa-illust__alerts {
  flex: 1;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: .4rem .5rem;
}
.aa-illust__event {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .46rem;
  color: rgba(255,255,255,.5);
  padding: .2rem 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.aa-illust__event-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.aa-illust__event-dot--gold { background: #f59e0b; }
.aa-illust__event-dot--cyan { background: #06b6d4; }
.aa-illust__event-dot--violet { background: #a78bfa; }
.aa-illust__event-dot--green { background: #10b981; }
.aa-illust__event-time {
  margin-left: auto;
  font-size: .4rem;
  color: rgba(255,255,255,.25);
}

.aa-illust__alert {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .46rem;
  padding: .22rem .35rem;
  border-radius: 5px;
  margin-bottom: .2rem;
}
.aa-illust__alert--ok {
  color: #10b981;
  background: rgba(16,185,129,.06);
}
.aa-illust__alert--warn {
  color: #f59e0b;
  background: rgba(245,158,11,.08);
}


/* ═══════════════════════════════════════
   EXPLORE ILLUSTRATION
   ═══════════════════════════════════════ */
.aa-illust__explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .6rem .7rem;
  flex: 1;
  min-height: 0;
}
.aa-illust__explore-card {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: .45rem .55rem;
  display: flex;
  flex-direction: column;
}
.aa-illust__explore-card--wide {
  grid-column: 1 / -1;
}

/* Heatmap */
.aa-illust__heatmap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.aa-illust__heatmap-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.aa-illust__heatmap-label {
  width: 48px;
  font-size: .4rem;
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
  text-align: right;
  padding-right: 4px;
}
.aa-illust__heatmap-cell {
  flex: 1;
  height: 16px;
  background: var(--aa-gold, #f59e0b);
  border-radius: 3px;
}

/* API flow */
.aa-illust__api-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: .5rem 0;
}
.aa-illust__api-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  font-size: .42rem;
  color: rgba(255,255,255,.5);
}
.aa-illust__api-node i {
  font-size: 1.1rem;
  padding: .35rem;
  border-radius: 8px;
}
.aa-illust__api-node--gold i { color: #f59e0b; background: rgba(245,158,11,.1); }
.aa-illust__api-node--cyan i { color: #06b6d4; background: rgba(6,182,212,.1); }
.aa-illust__api-node--violet i { color: #a78bfa; background: rgba(167,139,250,.1); }
.aa-illust__api-connector {
  width: 30px;
  flex-shrink: 0;
}
.aa-illust__api-connector svg { width: 100%; height: 2px; }
.aa-illust__api-stats {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: .44rem;
  color: rgba(255,255,255,.4);
  padding-top: .3rem;
  border-top: 1px solid rgba(255,255,255,.05);
  margin-top: auto;
}
.aa-illust__api-stats strong {
  color: rgba(255,255,255,.7);
}

/* Bar chart */
.aa-illust__bar-chart {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
  justify-content: center;
}
.aa-illust__bar-row {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.aa-illust__bar-label {
  width: 50px;
  font-size: .44rem;
  color: rgba(255,255,255,.4);
  text-align: right;
  flex-shrink: 0;
}
.aa-illust__bar-track {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,.04);
  border-radius: 5px;
  overflow: hidden;
}
.aa-illust__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(245,158,11,.6), #f59e0b);
  border-radius: 5px;
  transition: width .6s ease;
}
.aa-illust__bar-fill--cyan {
  background: linear-gradient(90deg, rgba(6,182,212,.5), #06b6d4);
}
.aa-illust__bar-fill--violet {
  background: linear-gradient(90deg, rgba(167,139,250,.5), #a78bfa);
}
.aa-illust__bar-val {
  font-size: .44rem;
  color: rgba(255,255,255,.5);
  width: 26px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════
   ALERTS / MONITORING ILLUSTRATION
   ═══════════════════════════════════════ */
.aa-illust__alerts-layout {
  display: flex;
  gap: .5rem;
  padding: .5rem .7rem;
  flex: 1;
  min-height: 0;
}
.aa-illust__alert-panel,
.aa-illust__events-panel {
  flex: 1;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: .45rem .55rem;
  display: flex;
  flex-direction: column;
}

/* Status grid */
.aa-illust__status-grid {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
}
.aa-illust__status {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .48rem;
  padding: .25rem .35rem;
  border-radius: 5px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
}
.aa-illust__status--ok i { color: #10b981; }
.aa-illust__status--warn i { color: #f59e0b; }
.aa-illust__status span:nth-child(2) {
  flex: 1;
  color: rgba(255,255,255,.55);
}
.aa-illust__status-badge {
  font-size: .4rem;
  padding: .1rem .35rem;
  border-radius: 10px;
  background: rgba(16,185,129,.1);
  color: #10b981;
}
.aa-illust__status-badge--warn {
  background: rgba(245,158,11,.1);
  color: #f59e0b;
}

/* Timeline */
.aa-illust__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  overflow: hidden;
}
.aa-illust__tl-item {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  position: relative;
}
.aa-illust__tl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .15rem;
}
.aa-illust__tl-dot--gold { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.3); }
.aa-illust__tl-dot--warn { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.3); }
.aa-illust__tl-dot--cyan { background: #06b6d4; box-shadow: 0 0 6px rgba(6,182,212,.3); }
.aa-illust__tl-dot--violet { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,.3); }
.aa-illust__tl-dot--green { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.3); }
.aa-illust__tl-content {
  flex: 1;
  font-size: .46rem;
  color: rgba(255,255,255,.5);
  min-width: 0;
}
.aa-illust__tl-content strong {
  color: rgba(255,255,255,.8);
}
.aa-illust__tl-content span {
  display: block;
  font-size: .4rem;
  color: rgba(255,255,255,.28);
  margin-top: .05rem;
}
.aa-illust__tl-time {
  font-size: .38rem;
  color: rgba(255,255,255,.22);
  flex-shrink: 0;
  margin-top: .15rem;
}


/* ═══════════════════════════════════════
   MINI ILLUSTRATIONS (Scenarios section)
   ═══════════════════════════════════════ */
.aa-illust--mini-dash,
.aa-illust--mini-explore {
  display: flex;
  flex-direction: column;
  background: #0c0c0f;
  padding: .6rem;
  gap: .5rem;
  width: 100%;
  height: 100%;
  min-height: 180px;
}

.aa-illust__mini-kpis {
  display: flex;
  gap: .5rem;
}
.aa-illust__mini-kpi {
  flex: 1;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  padding: .35rem .45rem;
  text-align: center;
}
.aa-illust__mini-kpi-val {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
}
.aa-illust__mini-kpi-lbl {
  display: block;
  font-size: .38rem;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
}

.aa-illust__mini-chart {
  width: 100%;
  height: 40px;
  flex-shrink: 0;
}

.aa-illust__mini-donut-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.aa-illust__mini-donut { width: 45px; height: 45px; flex-shrink: 0; }
.aa-illust__mini-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aa-illust__mini-bar {
  height: 7px;
  background: linear-gradient(90deg, rgba(245,158,11,.5), #f59e0b);
  border-radius: 4px;
}
.aa-illust__mini-bar--cyan {
  background: linear-gradient(90deg, rgba(6,182,212,.4), #06b6d4);
}
.aa-illust__mini-bar--violet {
  background: linear-gradient(90deg, rgba(167,139,250,.4), #a78bfa);
}

/* Mini explore */
.aa-illust__mini-filters {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}
.aa-illust__mini-pill {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .12rem .35rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  font-size: .42rem;
  color: rgba(255,255,255,.4);
}
.aa-illust__mini-pill--active {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.2);
  color: var(--aa-gold, #f59e0b);
}

.aa-illust__mini-heatmap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.aa-illust__mini-hm-row {
  display: flex;
  gap: 3px;
}
.aa-illust__mini-hm-cell {
  flex: 1;
  height: 20px;
  background: var(--aa-gold, #f59e0b);
  border-radius: 3px;
}

.aa-illust__mini-api-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding-top: .3rem;
}
.aa-illust__mini-api-node {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(245,158,11,.1);
  color: #f59e0b;
  font-size: .7rem;
}
.aa-illust__mini-api-node--cyan {
  background: rgba(6,182,212,.1);
  color: #06b6d4;
}
.aa-illust__mini-api-node--violet {
  background: rgba(167,139,250,.1);
  color: #a78bfa;
}
.aa-illust__mini-api-line {
  width: 20px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0, rgba(255,255,255,.15) 3px, transparent 3px, transparent 6px);
}


/* ═══════════════════════════════════════
   RESPONSIVE ILLUSTRATION ADJUSTMENTS
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .aa-illust__sidebar { display: none; }
  .aa-illust__kpis { grid-template-columns: repeat(2, 1fr); }
  .aa-illust__charts { flex-direction: column; }
  .aa-illust__bottom-row { flex-direction: column; }
  .aa-illust__explore-grid { grid-template-columns: 1fr; }
  .aa-illust__alerts-layout { flex-direction: column; }
  .aa-illust__kpi-value { font-size: .8rem; }
}