/* ======================================
   DASHBOARD CORE BANNER
====================================== */
@font-face {
  font-family: 'Rosnoc';
  src: url('/assets/fonts/Rosnoc.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* CORE CEO ACCESS */
.core-ceo-access {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: transparent;
  overflow: hidden;
}

/* BACKGROUND LIVING SYSTEM */
.core-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(0, 201, 204, 0.358), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(0, 201, 204, 0.250), transparent 55%);
  animation: bgPulse 14s ease-in-out infinite;
}

@keyframes bgPulse {
  0% {
    opacity: .6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: .6;
  }
}

/* GRID */
.core-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 60px;
}

/* CONTENT */
.core-content {
  max-width: 600px;
  animation: fadeUp 1.2s ease-out forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* BADGE */
.core-badge {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 40px;
  font-family: 'Rosnoc', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: #00cacc;
  border: 1px solid rgba(111, 178, 255, 0.35);
  margin-bottom: 25px;
  position: relative;
  overflow: hidden;
}

.core-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-120%);
  animation: badgeScan 4s infinite;
}

@keyframes badgeScan {
  60% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

/* TITLE */
.core-title {
  font-family: 'Rosnoc', sans-serif;
  font-size: 56px;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 25px;
}

.core-title span {
  display: block;
  color: #00cacc;
  font-size: 48px;
}

/* TEXT */
.core-description {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 40px;
}

/* ACTIONS */
.core-actions {
  display: flex;
  align-items: center;
  gap: 25px;
}

/* ── CORE BTN ── */
.core-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: #04fbff;
  color: #060c18;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  line-height: normal;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.core-btn.ai-focus {
  transform: scale(1.06);
  box-shadow: 0 0 25px rgba(0, 202, 204, 0.4),
    0 0 60px rgba(0, 202, 204, 0.2);
}

.core-btn::after {
  content: '→';
  display: inline-block;
  transition: transform 0.25s ease;
}

.core-btn:hover {
  background: #ffffff;
  color: #060c18;
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0, 255, 224, 0.35);
}

.core-btn:hover::after {
  transform: translateX(4px);
}

.core-note {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* 🔥 camada AI ocupa tudo */
.core-ai-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* canvas ocupa toda secção */
#aiCoreCanvas {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
}

/* conteúdo acima do AI */
.auto-container {
  position: relative;
  z-index: 2;
}

/* ripple layer */
#ai-ripple-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* label */
#ai-state-label {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(0, 210, 230, 0.28);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .core-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .core-actions {
    justify-content: center;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .core-title {
    font-size: 40px;
  }

  .core-title span {
    font-size: 34px;
  }

  .core-description {
    font-size: 16px;
  }
}

.ai-dark-card {
  background: radial-gradient(circle at top, #111827, #020617);
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 0 40px rgba(64, 188, 173, 0.475);
  border: 1px solid rgba(85, 207, 193, 0.323);
  color: white;
  max-width: 540px;
  position: relative;
  overflow: hidden;
}

.ai-dark-card::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #00ffe17e, transparent 70%);
  top: -80px;
  right: -80px;
  opacity: .25;
}

.ai-dark-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #c7d2fe;
  margin-bottom: 25px;
  letter-spacing: .5px;
}

.ai-orb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00cacc;
  box-shadow: 0 0 15px #00cacc;
  animation: pulseOrb 2s infinite;
}

@keyframes pulseOrb {
  0% {
    transform: scale(.8);
    opacity: .6;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(.8);
    opacity: .6;
  }
}


.core-dashboard-x {
  position: relative;
  padding: 160px 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(0, 255, 225, 0.348), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(0, 255, 225, 0.347), transparent 55%),
    linear-gradient(135deg, #05070c 0%, #05070c 100%);
  font-family: 'Inter', sans-serif;
  background: #050b18;
  overflow: hidden;
}

.core-x-header {
  max-width: 780px;
  margin: 0 auto 100px;
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.2s;
}

.core-x-badge {
  display: inline-block;
  font-family: 'Rosnoc', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 10px 22px;
  margin-bottom: 20px;
  border-radius: 50px;
  color: rgb(0, 202, 204);
  border: 1px solid rgba(111, 178, 255, 0.35);
  text-transform: uppercase;
}

.core-x-header h2 {
  color: #ffffff;
  font-size: 44px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 20px;
}

.core-x-header h2 span {
  color: #00cacc;
}

.core-x-header p {
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 40px;
}

/* ── CORE-X-BTN ── */
.core-x-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: #04fbff;
  color: #060c18;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: none;
  position: relative;
  overflow: hidden;
  /* mantém a animação de entrada original */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.4s;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  line-height: normal;
}

.core-x-btn::after {
  content: '→';
  display: inline-block;
  transition: transform 0.25s ease;
}

.core-x-btn:hover {
  background: #ffffff;
  color: #060c18;
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0, 255, 224, 0.35);
}

.core-x-btn:hover::after {
  transform: translateX(4px);
}

.core-x-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.core-x-card {
  position: relative;
  padding: 40px 32px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.5s ease;
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(50px);
  animation: cardFadeIn 0.8s forwards;
  animation-delay: var(--delay);
}

.core-x-card:hover {
  transform: translateY(-10px);
  border-color: #04fbff;
  box-shadow: 0 25px 60px rgba(0, 255, 224, 0.5);
}

.core-x-number {
  font-size: 14px;
  font-weight: 700;
  color: #04fbff;
  letter-spacing: 1px;
}

.core-x-card h4 {
  color: #04fbff;
  ;
  font-size: 22px;
  margin: 16px 0 12px;
}

.core-x-card p {
  font-size: 15px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 992px) {
  .core-x-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .core-x-header h2 {
    font-size: 36px;
  }
}

@media (max-width: 576px) {
  .core-x-grid {
    grid-template-columns: 1fr;
  }

  .core-x-header h2 {
    font-size: 28px;
  }

  .core-x-header p {
    font-size: 14px;
  }

  .core-x-btn {
    padding: 14px 32px;
    font-size: 14px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* CTA Ultra Premium */
.cta-ultra {
  position: relative;
  padding: 100px 20px;
  background: linear-gradient(135deg, #050b18 0%, #050b18 100%);
  background: #050b18;
  border-radius: 20px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
}

.cta-ultra::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: #050b18;
  border-radius: 50%;
  top: -80px;
  left: -80px;
  filter: blur(120px);
  z-index: 1;
}

.cta-ultra::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: #050b18;
  border-radius: 50%;
  bottom: -60px;
  right: -60px;
  filter: blur(100px);
  z-index: 1;
}

.cta-ultra .inner-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.cta-ultra .cta-content-column {
  flex: 1 1 500px;
}

.cta-ultra .cta-content-column h2 {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
  color: #ffffff;
}

.cta-ultra .cta-content-column h2 span {
  color: #00cacc;
  font-family: 'Rosnoc', sans-serif;
}

.cta-ultra .cta-content-column .cta-text {
  font-size: 16px;
  line-height: 1.6;
  color: #a0a8b8;
  margin-bottom: 30px;
}

/* ── CTA-BTN ── */
.cta-ultra .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: #04fbff;
  color: #060c18;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: none;
  position: relative;
  overflow: hidden;
  animation: none;
  transition: all 0.25s ease;
  line-height: normal;
}

.cta-ultra .cta-btn::after {
  content: '→';
  display: inline-block;
  transition: transform 0.25s ease;
}

.cta-ultra .cta-btn:hover {
  background: #ffffff;
  color: #060c18;
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0, 255, 224, 0.35);
}

.cta-ultra .cta-btn:hover::after {
  transform: translateX(4px);
}

.cta-ultra .cta-image-column {
  flex: 1 1 400px;
  text-align: center;
}

.cta-ultra .cta-image-column img {
  max-width: 100%;
  border-radius: 20px;
  transition: transform 0.4s ease;
}

.cta-ultra .cta-image-column img:hover {
  transform: scale(1.05);
}

@media (max-width: 991px) {
  .cta-ultra .inner-container {
    flex-direction: column;
  }

  .cta-ultra .cta-content-column,
  .cta-ultra .cta-image-column {
    flex: 1 1 100%;
  }

  .cta-ultra .cta-content-column h2 {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .cta-ultra .cta-content-column h2 {
    font-size: 24px;
  }
}


/* ======================================
   FAQ ULTRA PREMIUM
====================================== */

.faq-ultra {
  padding: 140px 0;
  background: #050b18;
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
}

/* Glow de fundo subtil */
.faq-ultra::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 200, 0.05), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.faq-ultra-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ── Coluna esquerda — título ── */
.faq-ultra-title {
  position: sticky;
  top: 100px;
}

.faq-ultra-title .faq-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00cacc;
  margin-bottom: 20px;
}

.faq-ultra-title .faq-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00cacc;
  box-shadow: 0 0 8px #00cacc;
}

.faq-ultra-title h2 {
  font-size: 44px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.faq-ultra-title h2 span {
  font-family: 'Rosnoc', sans-serif;
  color: #04fbff;
}

.faq-ultra-title p {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  line-height: 1.7;
  max-width: 380px;
}

/* ── FAQ-ULTRA-BTN ── */
.faq-ultra-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: #04fbff;
  color: #060c18;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: none;
  position: relative;
  overflow: hidden;
  margin-top: 32px;
  animation: none;
  transition: all 0.25s ease;
  line-height: normal;
}

.faq-ultra-btn::after {
  content: '→';
  display: inline-block;
  transition: transform 0.25s ease;
}

.faq-ultra-btn:hover {
  background: #ffffff;
  color: #060c18;
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0, 255, 224, 0.35);
}

.faq-ultra-btn:hover::after {
  transform: translateX(4px);
}

/* ── Coluna direita — accordion ── */
.faq-ultra-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.faq-item:hover {
  border-color: rgba(0, 229, 200, 0.15);
}

.faq-item.active {
  background: rgba(0, 229, 200, 0.04);
  border-color: rgba(0, 229, 200, 0.25);
}

.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  color: #e8eeff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 16px;
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: #00cacc;
}

.faq-item.active .faq-question {
  color: #04fbff;
}

/* Ícone "+" que vira "×" */
.faq-question .icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  transition: border-color 0.25s ease, color 0.25s ease,
    background 0.25s ease, transform 0.3s ease;
}

.faq-item.active .faq-question .icon {
  border-color: #00cacc;
  color: #00cacc;
  background: rgba(0, 229, 200, 0.10);
  transform: rotate(45deg);
}

/* Linha de destaque topo do item ativo */
.faq-item.active {
  box-shadow: inset 3px 0 0 #00e5c8;
}

.faq-answer {
  padding: 0 24px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14.5px;
  line-height: 1.7;
  transition:
    max-height 0.42s cubic-bezier(.4, 0, .2, 1),
    opacity 0.32s ease,
    padding 0.32s ease;
}

.faq-item.active .faq-answer {
  padding: 0 24px 22px;
  max-height: 240px;
  opacity: 1;
}

@media (max-width: 992px) {
  .faq-ultra-inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .faq-ultra-title {
    position: static;
  }

  .faq-ultra-title h2 {
    font-size: 34px;
  }
}


/* MOZPROTECH – CHOOSE SECTION */
.mp-choose {
  padding: 110px 0;
  background: linear-gradient(180deg, #050b18 0%, #050b18 100%);
  color: #ffffff;
}

.mp-choose-title {
  max-width: 760px;
  margin: 0 auto 80px;
  text-align: center;
  color: #ffffff;
}

.mp-choose-eyebrow {
  display: inline-block;
  font-family: 'Rosnoc', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 10px 22px;
  margin-bottom: 20px;
  border-radius: 50px;
  color: rgb(0, 202, 204);
  border: 1px solid rgba(111, 178, 255, 0.35);
  text-transform: uppercase;
}

.mp-choose-title h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 18px;
  color: #ffffff;
}

.mp-choose-title h2 span {
  color: #04fbff;
}

.mp-choose-title p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
}

.mp-choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.mp-choose-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 45px 35px;
  text-align: center;
  transition: all 0.35s ease;
}

.mp-choose-card:hover {
  transform: translateY(-10px);
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow: 0 25px 70px rgba(0, 212, 255, 0.15);
}

.mp-choose-card.mp-featured {
  background: linear-gradient(160deg, rgba(0, 212, 255, 0.18), rgba(0, 212, 255, 0.04));
  border-color: rgba(0, 212, 255, 0.45);
  transform: translateY(-15px);
}

.mp-choose-card-top {
  margin-bottom: 26px;
  display: flex;
  justify-content: center;
}

.mp-stars {
  font-size: 20px;
  color: #04fbff;
  letter-spacing: 3px;
}

.mp-symbol {
  font-size: 34px;
  color: #04fbff;
}

.mp-choose-card h3 {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 14px;
  color: #ffffff;
}

.mp-choose-card p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 991px) {
  .mp-choose-grid {
    grid-template-columns: 1fr;
  }

  .mp-choose-card.mp-featured {
    transform: none;
  }

  .mp-choose-title h2 {
    font-size: 32px;
  }
}

.mp-choose-card.mp-featured .mp-symbol {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(0, 212, 255, 0.8);
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.8);
}

.mp-choose-card.mp-featured .mp-symbol::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 212, 255, 0.8);
  animation: mp-rotate 12s linear infinite;
}

.mp-choose-card.mp-featured .mp-symbol::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: #00d4ff;
  opacity: 0.85;
}

.mp-choose-card:not(.mp-featured) .mp-symbol {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0, 212, 255, 0.6);
}

.mp-choose-card:not(.mp-featured) .mp-symbol::before,
.mp-choose-card:not(.mp-featured) .mp-symbol::after {
  content: "";
  position: absolute;
  background: rgba(0, 212, 255, 0.6);
}

.mp-choose-card:not(.mp-featured) .mp-symbol::before {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
}

.mp-choose-card:not(.mp-featured) .mp-symbol::after {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
}

@keyframes mp-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* CTA Três Premium */
.cta-tres-premium {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(135deg, #050b18 0%, #050b18 100%);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

.cta-tres-premium_text {
  margin-bottom: 30px;
  z-index: 2;
}

.cta-tres-premium_text .sec-title_title {
  font-size: 16px;
  color: #00d4ff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 15px;
}

.cta-tres-premium_text .sec-title_heading {
  font-family: 'RosnOC', sans-serif;
  font-size: 42px;
  line-height: 50px;
  font-weight: 800;
  margin-bottom: 20px;
}

.cta-tres-premium_text .sec-title_heading span {
  color: #00cacc;
}

.cta-tres-premium_text .sec-title_text {
  font-size: 16px;
  line-height: 28px;
  color: #c1c1c1;
  margin-bottom: 30px;
}

/* ── BTN-PREMIUM-CTA ── */
.btn-premium-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: #00e5c8;
  color: #060c18;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: none;
  position: relative;
  overflow: hidden;
  animation: none;
  transition: all 0.25s ease;
  line-height: normal;
}

.btn-premium-cta::after {
  content: '→';
  display: inline-block;
  transition: transform 0.25s ease;
}

.btn-premium-cta:hover {
  background: #ffffff;
  color: #060c18;
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0, 255, 224, 0.35);
}

.btn-premium-cta:hover::after {
  transform: translateX(4px);
}

.cta-tres-premium_image img {
  width: 100%;
  max-width: 600px;
  animation: float-cta 6s ease-in-out infinite;
}

@keyframes float-cta {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@media (max-width: 991px) {

  .cta-tres-premium_text,
  .cta-tres-premium_image {
    text-align: center;
  }

  .cta-tres-premium_text .sec-title_heading {
    font-size: 32px;
    line-height: 40px;
  }
}

@media (max-width: 575px) {
  .cta-tres-premium {
    padding: 80px 20px;
  }

  .cta-tres-premium_text .sec-title_heading {
    font-size: 26px;
    line-height: 32px;
  }
}

/* ============================================================
   MOZPROTECH — footer.css
   Core AI theme · Dark · Cyan accent · Imersivo
============================================================ */

/* ── SECTION ── */
.moz-footer {
  position: relative;
  background: #030810;
  font-family: 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.55);
  overflow: hidden;
}

/* ── BACKGROUND GLOW ── */
.moz-footer__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 80%, rgba(0, 229, 200, 0.05), transparent),
    radial-gradient(ellipse 50% 60% at 85% 20%, rgba(80, 160, 255, 0.06), transparent);
  pointer-events: none;
}

/* ── LINHA DE TOPO ── */
.moz-footer__topline {
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 229, 200, 0.5) 30%,
      rgba(0, 229, 200, 0.8) 50%,
      rgba(0, 229, 200, 0.5) 70%,
      transparent 100%);
  box-shadow: 0 0 20px rgba(0, 229, 200, 0.25);
}

/* ── TOP ROW: logo + social ── */
.moz-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 52px 0 44px;
}

/* Logo */
.moz-footer__logo {
  display: inline-block;
  margin-bottom: 12px;
}

.moz-footer__logo img {
  height: 54px;
  width: auto;
  display: block;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.moz-footer__logo:hover img {
  opacity: 1;
}

/* Tagline */
.moz-footer__tagline {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 229, 200, 0.6);
  margin: 0;
}

/* Social */
.moz-footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.moz-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  text-decoration: none;
  transition:
    border-color 0.22s ease,
    color 0.22s ease,
    background 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.moz-footer__social-link:hover {
  border-color: rgba(0, 229, 200, 0.40);
  color: #00e5c8;
  background: rgba(0, 229, 200, 0.07);
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(0, 229, 200, 0.15);
}

/* ── DIVISOR ── */
.moz-footer__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* ── MID ROW: colunas + newsletter ── */
.moz-footer__mid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.6fr;
  gap: 48px;
  padding: 52px 0;
}

/* Coluna genérica */
.moz-footer__col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 22px;
}

.moz-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.moz-footer__links a {
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.moz-footer__links a:hover {
  color: #00e5c8;
  padding-left: 4px;
}

/* ── Newsletter ── */
.moz-footer__newsletter-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 20px;
}

.moz-footer__form-group {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.moz-footer__form-group:focus-within {
  border-color: rgba(0, 229, 200, 0.40);
  box-shadow: 0 0 0 3px rgba(0, 229, 200, 0.07);
}

.moz-footer__input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  outline: none;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #ffffff;
  min-width: 0;
}

.moz-footer__input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.moz-footer__submit {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #00e5c8;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #060c18;
  transition: background 0.22s ease;
}

.moz-footer__submit svg {
  width: 16px;
  height: 16px;
  transition: transform 0.22s ease;
}

.moz-footer__submit:hover {
  background: #ffffff;
}

.moz-footer__submit:hover svg {
  transform: translateX(3px);
}

/* Apps */
.moz-footer__apps {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.moz-footer__app-btn img {
  height: 34px;
  width: auto;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.moz-footer__app-btn:hover img {
  opacity: 1;
  transform: translateY(-1px);
}

/* ── BOTTOM ROW ── */
.moz-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0 32px;
}

/* Copyright */
.moz-footer__copy {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.30);
  margin: 0;
}

.moz-footer__copy a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.2s ease;
}

.moz-footer__copy a:hover {
  color: rgb(0, 229, 200);
}

/* Status online */
.moz-footer__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.30);
  letter-spacing: 0.04em;
}

.moz-footer__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00e5c8;
  box-shadow: 0 0 8px #00e5c8;
  animation: footerDotPulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes footerDotPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.6);
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .moz-footer__mid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 36px;
  }

  .moz-footer__col--newsletter {
    grid-column: 1 / -1;
    max-width: 480px;
  }
}

@media (max-width: 768px) {
  .moz-footer__mid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .moz-footer__col--newsletter {
    grid-column: 1 / -1;
  }

  .moz-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .moz-footer__mid {
    grid-template-columns: 1fr;
  }

  .moz-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}


@media (max-width: 768px) {

  .core-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .core-title {
    font-size: 34px;
  }

  .core-title span {
    font-size: 28px;
  }

  .core-description {
    font-size: 15px;
  }

  .core-actions {
    flex-direction: column;
    gap: 18px;
  }

  #aiCoreCanvas {
    opacity: 0.85;
    /* evita poluição visual */
  }

}



/* ============================================================
   CORE AI — FINAL VISUAL POLISH
   Only targets: .cta-ultra, .cta-content-column, .cta-image-column
   and all .dash-* classes. Zero layout changes.
   ============================================================ */

/* ─────────────────────────────────────────
   KEYFRAMES  (refined — smoother easings)
   ───────────────────────────────────────── */

@keyframes cai-float {
  0%,  100% { transform: translateY(0px) perspective(1200px) rotateX(0deg); }
  50%        { transform: translateY(-7px) perspective(1200px) rotateX(0.6deg); }
}

@keyframes cai-glow-breathe {
  0%,  100% {
    box-shadow:
      0 0 0 1px rgba(0,210,190,0.14),
      0 0 28px rgba(0,210,190,0.05),
      0 2px 0 rgba(0,210,190,0.06) inset,
      0 28px 70px rgba(0,0,0,0.60),
      0 60px 120px rgba(0,0,0,0.35);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0,210,190,0.26),
      0 0 52px rgba(0,210,190,0.12),
      0 2px 0 rgba(0,210,190,0.10) inset,
      0 28px 70px rgba(0,0,0,0.60),
      0 60px 120px rgba(0,0,0,0.35);
  }
}

@keyframes cai-lock-breathe {
  0%,  100% {
    box-shadow: 0 0 0 0px rgba(0,210,190,0);
    border-color: rgba(0,210,190,0.24);
    background: rgba(0,210,190,0.045);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(0,210,190,0.14), 0 0 44px 8px rgba(0,80,255,0.06);
    border-color: rgba(0,210,190,0.52);
    background: rgba(0,210,190,0.07);
  }
}

@keyframes cai-dash-pulse {
  0%,  100% { opacity: 0.48; }
  50%        { opacity: 0.40; }
}

@keyframes cai-status-pulse {
  0%,  100% { opacity: 1;    box-shadow: 0 0 0 0px rgba(0,210,190,0.40); }
  50%        { opacity: 0.30; box-shadow: 0 0 6px 3px rgba(0,210,190,0.0); }
}

@keyframes cai-scanline {
  0%   { transform: translateY(-100%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(600%); opacity: 0; }
}

/* ─────────────────────────────────────────
   CTA SECTION — TYPOGRAPHY & SPACING
   ───────────────────────────────────────── */

/* Section breathing room */
.cta-ultra {
  padding-top:    90px;
  padding-bottom: 90px;
}

/* Left column text rhythm */
.cta-content-column h2 {
  font-size:      clamp(28px, 3.6vw, 44px);
  font-weight:    700;
  line-height:    1.18;
  letter-spacing: -0.03em;
  color:          #f0f4ff;
  margin-bottom:  20px;
}

.cta-content-column h2 span {
  background:          linear-gradient(118deg, #00cacc 0%, #00cacc 55%, #00cacc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:     text;
  display:             inline;
}

.cta-content-column .cta-text,
.cta-content-column p {
  font-size:      clamp(14px, 1.5vw, 17px);
  line-height:    1.72;
  color:          rgba(185, 200, 230, 0.72);
  letter-spacing: 0.01em;
  max-width:      46ch;
  margin-bottom:  32px;
}

/* CTA buttons — if present */
.cta-content-column .theme-btn,
.cta-content-column a.btn {
  font-size:      14px;
  font-weight:    600;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────
   RIGHT COLUMN — CONTAIN + CENTER
   ───────────────────────────────────────── */

.cta-image-column {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       0;
  overflow:        hidden;
  padding:         16px 0;
}

.cta-image-column > img { display: none; }

/* ─────────────────────────────────────────
   DASH-WRAP — 3D DEPTH CARD
   ───────────────────────────────────────── */

.dash-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;

  background:
    radial-gradient(circle at top left,
      rgba(0,210,190,0.06),
      transparent 60%),
    radial-gradient(circle at bottom right,
      rgba(80,120,255,0.04),
      transparent 55%),
    #07090f;

  font-family: -apple-system, 'Inter', BlinkMacSystemFont, 'Segoe UI', sans-serif;

  border-top:   1px solid rgba(255,255,255,0.08);
  border-left:  1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(0,0,0,0.35);
  border-bottom:1px solid rgba(0,0,0,0.45);

  /* ❌ NO SHADOWS — intentionally removed */
  box-shadow: none;

  animation:
    cai-float 8s cubic-bezier(0.45,0,0.55,1) infinite;

  transform-style: preserve-3d;
  will-change: transform;
}

.dash-wrap::before {
  content: '';
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(0,210,190,0.05),
      transparent 40%
    ),
    linear-gradient(
      315deg,
      rgba(80,120,255,0.03),
      transparent 45%
    );

  pointer-events: none;
  z-index: 1;
}

/* ─────────────────────────────────────────
   CORNER BRACKETS
   ───────────────────────────────────────── */

.corner-tl,
.corner-tr,
.corner-bl,
.corner-br {
  position:       absolute;
  width:          34px;
  height:         34px;
  pointer-events: none;
  z-index:        9;
}

.corner-tl { top:0;    left:0;  border-top:  1.5px solid rgba(0,210,190,0.42); border-left:   1.5px solid rgba(0,210,190,0.42); border-radius:18px 0 0 0; }
.corner-tr { top:0;    right:0; border-top:  1.5px solid rgba(0,210,190,0.28); border-right:  1.5px solid rgba(0,210,190,0.28); border-radius:0 18px 0 0; }
.corner-bl { bottom:0; left:0;  border-bottom:1.5px solid rgba(0,210,190,0.28); border-left:  1.5px solid rgba(0,210,190,0.28); border-radius:0 0 0 18px; }
.corner-br { bottom:0; right:0; border-bottom:1.5px solid rgba(0,210,190,0.18); border-right: 1.5px solid rgba(0,210,190,0.18); border-radius:0 0 18px 0; }

/* ─────────────────────────────────────────
   STATUS BAR
   ───────────────────────────────────────── */

.top-status-bar {
  background:    linear-gradient(90deg, #03050b 0%, #05080f 100%);
  border-bottom: 1px solid rgba(0,210,190,0.10);
  padding:       6px 18px;
  display:       flex;
  align-items:   center;
  gap:           7px;
  font-size:     9px;
  font-weight:   600;
  letter-spacing:0.75px;
  color:         rgba(0,210,190,0.44);
  text-transform:uppercase;
  position:      relative;
  z-index:       2;
  white-space:   nowrap;
  overflow:      hidden;
}

.status-dot {
  width:        5px;
  height:       5px;
  border-radius:50%;
  background:   #00d2be;
  flex-shrink:  0;
  animation:    cai-status-pulse 3s ease-in-out infinite;
  box-shadow:   0 0 6px rgba(0,210,190,0.60);
}

/* ─────────────────────────────────────────
   BLURRED DASHBOARD INNER
   ───────────────────────────────────────── */

.dash-inner {
  display:         flex;
  height:          370px;
  pointer-events:  none;
  user-select:     none;
  -webkit-user-select: none;
  filter:          blur(4.5px) brightness(0.78) saturate(0.9);
  animation:       cai-dash-pulse 6s ease-in-out infinite;
  will-change:     opacity;
}

/* ─────────────────────────────────────────
   SIDEBAR
   ───────────────────────────────────────── */

.sidebar {
  width:         138px;
  flex-shrink:   0;
  background:    linear-gradient(180deg, #0a0d18 0%, #080b14 100%);
  border-right:  1px solid rgba(255,255,255,0.04);
  display:       flex;
  flex-direction:column;
  padding:       14px 0;
}

.sb-logo {
  display:      flex;
  align-items:  center;
  gap:          8px;
  padding:      0 14px 14px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  margin-bottom:12px;
}

.sb-icon {
  width:         24px;
  height:        24px;
  border-radius: 6px;
  background:    linear-gradient(135deg, #00cdb8 0%, #00cacc 100%);
  display:       flex;
  align-items:   center;
  justify-content:center;
  font-size:     11px;
  font-weight:   700;
  color:         #fff;
  flex-shrink:   0;
  box-shadow:    0 2px 10px rgba(0,200,180,0.30), 0 0 0 1px rgba(255,255,255,0.08) inset;
}

.sb-name {
  font-size:    11px;
  font-weight:  600;
  color:        #c8d4f0;
  letter-spacing:-0.2px;
}

.sb-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     8px 14px;
  font-size:   11px;
  color:       #2e3a52;
  cursor:      default;
}

.sb-item.active {
  color:      #00c8b4;
  background: rgba(0,200,180,0.065);
  border-right: 2px solid #00c8b4;
  box-shadow:  inset 0 0 12px rgba(0,200,180,0.04);
}

.sb-dot {
  width:        11px;
  height:       11px;
  border-radius:3px;
  background:   currentColor;
  opacity:      0.50;
  flex-shrink:  0;
}

.sb-version {
  margin-top: auto;
  padding:    10px 14px;
  font-size:  9px;
  color:      #111826;
}

/* ─────────────────────────────────────────
   MAIN AREA
   ───────────────────────────────────────── */

.main-area {
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-width:      0;
}

.topbar {
  height:        46px;
  background:    linear-gradient(90deg, #0a0d18 0%, #090c16 100%);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display:       flex;
  align-items:   center;
  padding:       0 16px;
  gap:           12px;
  flex-shrink:   0;
}

.search-mock {
  flex:         1;
  max-width:    210px;
  height:       25px;
  background:   rgba(255,255,255,0.025);
  border:       1px solid rgba(255,255,255,0.06);
  border-radius:6px;
  display:      flex;
  align-items:  center;
  padding:      0 10px;
  box-shadow:   inset 0 1px 0 rgba(255,255,255,0.03);
}

.search-line {
  width:        65px;
  height:       2px;
  background:   rgba(255,255,255,0.08);
  border-radius:2px;
}

.topbar-right {
  margin-left:  auto;
  display:      flex;
  gap:          8px;
  align-items:  center;
}

.tb-dot {
  width:        7px;
  height:       7px;
  border-radius:50%;
  background:   rgba(255,255,255,0.10);
}

.avatar {
  width:        25px;
  height:       25px;
  border-radius:50%;
  background:   linear-gradient(135deg, #00cacc, #00cacc);
  box-shadow:   0 0 0 1.5px rgba(109,40,217,0.36), 0 2px 6px rgba(0,0,0,0.40);
}

.content {
  flex:       1;
  padding:    14px 15px;
  overflow:   hidden;
  background: linear-gradient(180deg, #07090f 0%, #06080e 100%);
}

/* ─────────────────────────────────────────
   KPI CARDS  — refined glass surfaces
   ───────────────────────────────────────── */

.kpi-row {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:                   8px;
  margin-bottom:         10px;
}

.kpi-card {
  background:    linear-gradient(160deg, #0f1322 0%, #0c1020 100%);
  border-top:    1px solid rgba(255,255,255,0.07);
  border-left:   1px solid rgba(255,255,255,0.04);
  border-right:  1px solid rgba(0,0,0,0.30);
  border-bottom: 1px solid rgba(0,0,0,0.40);
  border-radius: 9px;
  padding:       11px 12px;
  box-shadow:    0 4px 14px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
}

.kpi-label {
  font-size:    9px;
  color:        #2e3c56;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  font-weight:  600;
}

.kpi-value {
  font-size:    18px;
  font-weight:  700;
  color:        #e8eeff;
  line-height:  1;
  margin-bottom:4px;
  letter-spacing:-0.5px;
}

.kpi-delta {
  font-size:  9px;
  color:      #0fba82;
  font-weight:500;
}

/* ─────────────────────────────────────────
   CHARTS — glass surface polish
   ───────────────────────────────────────── */

.charts-row {
  display:               grid;
  grid-template-columns: 3fr 2fr;
  gap:                   8px;
}

.chart-card {
  background:    linear-gradient(160deg, #0f1322 0%, #0c1020 100%);
  border-top:    1px solid rgba(255,255,255,0.07);
  border-left:   1px solid rgba(255,255,255,0.04);
  border-right:  1px solid rgba(0,0,0,0.30);
  border-bottom: 1px solid rgba(0,0,0,0.40);
  border-radius: 9px;
  padding:       11px 12px;
  overflow:      hidden;
  box-shadow:    0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

.chart-title {
  font-size:    9px;
  color:        #2e3c56;
  margin-bottom:8px;
  font-weight:  500;
  letter-spacing:0.2px;
}

.bar-chart {
  display:     flex;
  align-items: flex-end;
  gap:         3px;
  height:      58px;
}

.bar {
  flex:         1;
  border-radius:2px 2px 0 0;
  background:   rgba(0,200,180,0.14);
}

.bar.hi {
  background: linear-gradient(180deg, rgba(0,210,190,0.65) 0%, rgba(0,180,165,0.45) 100%);
  box-shadow: 0 -2px 6px rgba(0,210,190,0.15);
}

.line-chart  { position:relative; height:58px; }
.lc-svg      { width:100%; height:100%; display:block; }

/* ─────────────────────────────────────────
   PIPELINE TABLE
   ───────────────────────────────────────── */

.table-card {
  background:    linear-gradient(160deg, #0f1322 0%, #0c1020 100%);
  border-top:    1px solid rgba(255,255,255,0.07);
  border-left:   1px solid rgba(255,255,255,0.04);
  border-right:  1px solid rgba(0,0,0,0.30);
  border-bottom: 1px solid rgba(0,0,0,0.40);
  border-radius: 9px;
  padding:       10px 12px;
  margin-top:    8px;
  box-shadow:    0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

.table-label {
  font-size:    9px;
  color:        #2e3c56;
  margin-bottom:8px;
  font-weight:  500;
}

.trow {
  display:     flex;
  align-items: center;
  gap:         7px;
  padding:     3px 0;
  border-bottom:1px solid rgba(255,255,255,0.025);
}

.trow:last-child { border-bottom:none; }

.tcell-dot {
  width:        5px;
  height:       5px;
  border-radius:50%;
  background:   #00c8b4;
  flex-shrink:  0;
  box-shadow:   0 0 4px rgba(0,200,180,0.50);
}

.tcell-name {
  font-size:  9px;
  color:      #2e3c56;
  width:      60px;
  flex-shrink:0;
}

.tcell-bar-bg {
  flex:         1;
  height:       2px;
  background:   rgba(255,255,255,0.04);
  border-radius:2px;
  overflow:     hidden;
}

.tcell-bar {
  height:       100%;
  border-radius:2px;
  background:   linear-gradient(90deg, #00c8b4 0%, #0050ee 100%);
  box-shadow:   0 0 4px rgba(0,200,180,0.22);
}

.tcell-val {
  font-size:  9px;
  color:      #2e3c56;
  width:      28px;
  text-align: right;
}

/* ─────────────────────────────────────────
   LOCK OVERLAY  — deepened glass
   ───────────────────────────────────────── */

.lock-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    168deg,
    rgba(7,9,15,0.10)  0%,
    rgba(7,9,15,0.48)  40%,
    rgba(7,9,15,0.78)  100%
  );
  display:        flex;
  align-items:    center;
  justify-content:center;
  z-index:        20;
  padding:        16px;

  /* subtle noise-free glass texture via gradient */
  backdrop-filter:saturate(1.1);
}

.lock-glass {
  background:    rgba(9,12,22,0.92);
  border-top:    1px solid rgba(255,255,255,0.08);
  border-left:   1px solid rgba(255,255,255,0.05);
  border-right:  1px solid rgba(0,0,0,0.50);
  border-bottom: 1px solid rgba(0,0,0,0.60);
  border-radius: 20px;
  padding:       28px 34px;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  gap:           10px;
  width:         100%;
  max-width:     256px;
  text-align:    center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 4px 6px  rgba(0,0,0,0.12),
    0 16px 40px rgba(0,0,0,0.55),
    0 40px 80px rgba(0,0,0,0.35);
}

.lock-icon-ring {
  width:         50px;
  height:        50px;
  border-radius: 50%;
  border:        1.5px solid rgba(0,200,180,0.24);
  display:       flex;
  align-items:   center;
  justify-content:center;
  background:    rgba(0,200,180,0.045);
  margin-bottom: 2px;
  animation:     cai-lock-breathe 3.6s ease-in-out infinite;
  will-change:   box-shadow, border-color, background;
  box-shadow:
    0 0 0 4px rgba(0,200,180,0.04),
    0 0 0 8px rgba(0,200,180,0.02);
}

.lock-svg {
  width:  21px;
  height: 21px;
  display:block;
  filter: drop-shadow(0 0 4px rgba(0,200,180,0.40));
}

.lock-title {
  font-size:    14px;
  font-weight:  600;
  color:        #e2e9f8;
  letter-spacing:-0.25px;
  line-height:  1.28;
}

.lock-sub {
  font-size:    10px;
  color:        rgba(0,200,180,0.55);
  letter-spacing:0.9px;
  text-transform:uppercase;
  font-weight:  600;
}

.lock-divider {
  width:      32px;
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,180,0.22), transparent);
  margin:     1px 0;
}

.lock-pills {
  display:        flex;
  gap:            6px;
  flex-wrap:      wrap;
  justify-content:center;
}

.lock-pill {
  font-size:    9px;
  padding:      3px 10px;
  border-radius:20px;
  border:       1px solid rgba(0,200,180,0.14);
  color:        rgba(0,200,180,0.48);
  background:   rgba(0,200,180,0.04);
  letter-spacing:0.5px;
  font-weight:  600;
  box-shadow:   inset 0 1px 0 rgba(255,255,255,0.03);
}

/* ─────────────────────────────────────────
   TABLET  ≤ 900px
   ───────────────────────────────────────── */

@media (max-width: 900px) {
  .dash-inner          { height:310px; }
  .sidebar             { width:108px; }
  .sb-name             { font-size:10px; }
  .sb-item             { font-size:10px; padding:7px 10px; }
  .kpi-value           { font-size:15px; }
  .kpi-label,
  .kpi-delta           { font-size:8px; }
  .charts-row          { grid-template-columns:1fr 1fr; }
  .bar-chart,
  .line-chart          { height:46px; }
  .table-card          { display:none; }
  .lock-glass          { padding:22px 24px; max-width:230px; }
  .lock-title          { font-size:13px; }
}

/* ─────────────────────────────────────────
   MOBILE  ≤ 640px
   ───────────────────────────────────────── */

@media (max-width: 640px) {
  .cta-ultra           { padding-top:60px; padding-bottom:60px; }
  .cta-content-column h2 { font-size:clamp(22px, 6vw, 30px); }
  .cta-content-column .cta-text,
  .cta-content-column p  { font-size:14px; }

  .cta-image-column    { padding:24px 0 0; width:100%; }

  .dash-wrap           { border-radius:14px; }
  .dash-inner          { height:268px; }
  .sidebar             { width:88px; }
  .sb-logo             { padding:0 10px 10px; gap:6px; }
  .sb-icon             { width:20px; height:20px; font-size:10px; }
  .sb-name             { display:none; }
  .sb-item             { padding:6px 10px; font-size:9px; gap:6px; }
  .sb-dot              { width:10px; height:10px; }
  .topbar              { height:38px; padding:0 10px; }
  .content             { padding:10px; }
  .kpi-row             { gap:6px; }
  .kpi-card            { padding:8px 9px; }
  .kpi-value           { font-size:13px; }
  .kpi-label,
  .kpi-delta           { font-size:8px; }
  .charts-row          { grid-template-columns:1fr; gap:6px; }
  .chart-card          { padding:8px; }
  .bar-chart,
  .line-chart          { height:38px; }
  .table-card          { display:none; }
  .lock-glass          { padding:18px 20px; gap:8px; border-radius:14px; max-width:210px; }
  .lock-icon-ring      { width:42px; height:42px; }
  .lock-svg            { width:18px; height:18px; }
  .lock-title          { font-size:12px; }
  .lock-sub            { font-size:9px; }
  .lock-pill           { font-size:8px; padding:3px 8px; }
  .top-status-bar      { font-size:8px; padding:5px 10px; }
  .corner-tl,
  .corner-tr,
  .corner-bl,
  .corner-br           { width:24px; height:24px; }
}

/* ─────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .dash-wrap,
  .dash-inner,
  .lock-icon-ring,
  .status-dot,
  .dash-wrap::after {
    animation: none !important;
    transform: none !important;
  }
}