:root {
			--brand: #6699FF;
			--ink: #0b1220;
			--muted: #64748b;
			--border: #e5e7eb;
			--soft: #f4f6fb;
			--card: #ffffff;
			--radius: 18px;
			--shadow: 0 18px 50px rgba(15, 23, 42, .10);
			--shadow2: 0 25px 70px rgba(15, 23, 42, .14);
		}

		html {
			scroll-behavior: smooth;
		}

		body {
			font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
			color: var(--ink);
			background: #fff;
			overflow-x: hidden;
		}

		.container {
			max-width: 1100px;
		}

		/* Navbar */
		.navbar {
			backdrop-filter: blur(10px);
			background: rgba(255, 255, 255, .90);
			border-bottom: 1px solid var(--border);
		}

		.nav-link {
			font-weight: 600;
			color: var(--ink);
		}

		.nav-link:hover {
			color: var(--brand);
		}

		/* Buttons */
		.btn {
			border-radius: 14px;
			font-weight: 700;
			padding: 12px 16px;
		}

		.btn-brand {
			background: #6699FF;
			/* linear-gradient(135deg, #2e1a47, #1b0f2f); */
			border: 0;
			color: #fff;
			box-shadow: 0 14px 30px rgba(102, 153, 255, .28);
			font-size: 16px;
			align-items: center;
			justify-content: center;
			display: flex;
		}

		.btn-brand:hover {
			background: #3f7dff;
			color: black;
		}

		.btn-outline-brand {
			border: 1px solid rgba(102, 153, 255, .45);
			color: #1b2a4a;
			background: #fff;
			font-size: 16px;
		}

		.btn-outline-brand:hover {
			background: #6699FF;
			border-color: #6699FF;
			color: #fff;
		}

		/* Sections */
		section {
			padding: 80px 0;
		}

		.section-title {
			font-weight: 800;
			letter-spacing: -0.02em;
		}

		.section-subtitle {
			color: var(--muted);
			max-width: 820px;
		}

		/* Hero */
		.hero {
			padding: 110px 0 70px;
			background:
				radial-gradient(circle at top right, rgba(102, 153, 255, .24), transparent 60%),
				linear-gradient(180deg, #fff 0%, var(--soft) 100%);
		}

		.hero h1 {
			font-weight: 900;
			letter-spacing: -0.03em;
			line-height: 1.05;
		}

		.hero p {
			color: var(--muted);
			font-size: 1.08rem;
		}

		.pill {
			display: inline-flex;
			gap: .5rem;
			align-items: center;
			padding: 8px 12px;
			border: 1px solid var(--border);
			border-radius: 999px;
			background: rgba(255, 255, 255, .85);
			font-weight: 700;
			color: #1b2a4a;
		}

		.pill i {
			color: var(--brand);
		}

		/* Cards */
		.cardx {
			background: var(--card);
			color: #1b2a4a;
			border: 1px solid var(--border);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			padding: 22px;
			height: 100%;
		}

		.iconbox {
			width: 48px;
			height: 48px;
			border-radius: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(102, 153, 255, .14);
			color: var(--brand);
			font-size: 1.25rem;
			margin-bottom: 12px;
		}

		.tiny {
			color: var(--muted);
			font-size: .92rem;
		}

		/* Plan grid */
		.plan {
			border: 1px solid var(--border);
			border-radius: var(--radius);
			background: #dbdfdf5e;
			padding: 22px;
			height: 100%;
			box-shadow: var(--shadow);
			transform-style: preserve-3d;
			transform 300ms cubic-bezier(.03, .98, .52, .99);
			box-shadow 300ms ease;
			will-change: transform;
		}

		.plan .tag {
			display: inline-block;
			font-weight: 800;
			font-size: .78rem;
			padding: 6px 10px;
			border-radius: 999px;
			background: rgba(102, 153, 255, .12);
			color: #1b2a4a;
			border: 1px solid rgba(102, 153, 255, .25);
			margin-bottom: 10px;
		}

		.plan h3 {
			font-weight: 900;
			margin: 0 0 6px;
			letter-spacing: -.02em;
		}

		.plan ul {
			padding-left: 18px;
			margin: 14px 0 0;
			color: #334155;
			height: 340px;
		}

		.plan li {
			margin: 8px 0;
		}

		/* Comparison */
		.table-wrap {
			border: 1px solid var(--border);
			border-radius: var(--radius);
			overflow: hidden;
			box-shadow: var(--shadow);
			background: #fff;
		}

		.table thead th {
			background: #0b1220;
			color: #fff;
			font-weight: 800;
			border-color: #0b1220;
			vertical-align: middle;
		}

		.table td,
		.table th {
			border-color: var(--border);
			vertical-align: middle;
		}

		.yes {
			color: #16a34a;
			font-weight: 900;
		}

		.no {
			color: #ef4444;
			font-weight: 900;
		}

		.maybe {
			color: #f59e0b;
			font-weight: 900;
		}

		/* baby blue band */
		.band {
			background: #6699FF;
			/* linear-gradient(135deg, #2e1a47, #1b0f2f); */
			color: #fff;
		}

		.band .tiny {
			color: rgba(255, 255, 255, .75);
		}

		/* FAQ */
		.accordion-button {
			font-weight: 800;
			border-radius: 0 !important;
		}

		.accordion-item {
			border: 1px solid var(--border);
			border-radius: 14px !important;
			overflow: hidden;
			box-shadow: 0 10px 25px rgba(15, 23, 42, .06);
		}

		.accordion-button:not(.collapsed) {
			box-shadow: none;
		}

		/* ===== Mini-FAQ (accordion dos anexos) ===== */
		.annex-mini .accordion-button{
		  font-size: 0.75rem;        /* menor */
		  /* background: #eaf0fc; */
		  color: #595e68;           /* cor do texto */
		  font-weight: 700;
		}
		.annex-mini .accordion-body{
		  font-size: 0.75rem;        /* menor */
		}

		/* Floating WhatsApp */
		.whatsapp-fab {
			position: fixed;
			right: 18px;
			bottom: 18px;
			width: 56px;
			height: 56px;
			border-radius: 50%;
			background: #25D366;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 1.4rem;
			box-shadow: 0 15px 30px rgba(0, 0, 0, .25);
			z-index: 1000;
			text-decoration: none;
		}

		.whatsapp-fab:hover {
			background: #1ebe57;
			color: #fff;
		}

		footer {
			background: #0b1220;
			color: #cbd5f5;
			padding: 28px 0;
		}

		@media (max-width: 992px) {
			.hero {
				padding-top: 95px;
			}

			.hero h1 {
				font-size: 2.1rem;
			}
		}

		/* ====== ANEXOS / TABELAS DE RECURSOS (dentro do visual do site) ====== */
		.annex-wrap {
			margin-top: 34px;
		}

		.annex-card {
			background: #fff;
			border: 1px solid var(--border);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			padding: 22px;
			margin-bottom: 18px;
		}

		.annex-title {
			font-weight: 900;
			letter-spacing: -0.02em;
			margin: 0 0 6px;
		}

		.annex-kicker {
			font-weight: 900;
			color: #ff9933;
			font-size: 1.05rem;
			margin: 0 0 6px;
		}

		.annex-subtitle {
			color: var(--muted);
			margin: 0 0 14px;
			font-size: .95rem;
		}

		.annex-table {
			width: 100%;
			border-collapse: collapse;
			overflow: hidden;
			border-radius: 14px;
		}

		.annex-table thead th {
			background: #0b1220;
			color: #fff;
			font-weight: 800;
			border: 1px solid #0b1220;
			padding: 12px 10px;
			font-size: .92rem;
			vertical-align: middle;
		}

		.annex-table td {
			border: 1px solid var(--border);
			padding: 10px;
			font-size: .92rem;
			vertical-align: middle;
		}

		.annex-table tbody tr:hover {
			background: rgba(102, 153, 255, .06);
		}

		.money {
			text-align: right;
			white-space: nowrap;
		}

		.center {
			text-align: center;
		}

		/* Oculta APENAS valores da mensalidade (coluna) */
		.hide-monthly {
			color: transparent;
			user-select: none;
			text-shadow: none;
			position: relative;
		}

		.hide-monthly::after {
			content: "—";
			color: #64748b;
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
		}

		/* Notas abaixo das tabelas */
		.annex-notes {
			margin-top: 14px;
			color: #334155;
			font-size: .92rem;
		}

		.annex-notes p {
			margin: 0 0 8px;
		}

		.annex-notes ul {
			margin: 0;
			padding-left: 18px;
		}

		.annex-notes li {
			margin: 6px 0;
		}

		.annex-footer {
			margin-top: 12px;
			padding-top: 12px;
			border-top: 1px dashed var(--border);
			color: #334155;
			font-size: .92rem;
		}

		/* Responsividade: deixa a tabela rolável no mobile */
		.table-scroll {
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			position: relative;
		}

		.table-scroll .annex-table {
			min-width: 860px;
		}

		/* Ícones de sim/não com emoji (se quiser tirar as imagens circle_*.png) */
		.yn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			font-size: 12px;
			font-weight: 900;
			line-height: 1;
		}

		.yn.yes {
			background: rgba(22, 163, 74, .15);
			color: #16a34a;
		}

		.yn.no {
			background: rgba(239, 68, 68, .15);
			color: #ef4444;
		}

		#anexosAcc .accordion-body {
			padding: 22px;
		}

		#anexosAcc .accordion-button {
			font-weight: 900;
		}

		.subtitle-1 {
			font-size: 14px !important;
		}

		/* mantém o espaço igual, só esconde visualmente antes de começar */
		.cardx.tw-ready h5,
		.cardx.tw-ready li {
			opacity: 0;
		}

		.cardx.tw-on h5,
		.cardx.tw-on li {
			opacity: 1;
		}

		/* cursor no elemento que está digitando */
		.tw-cursor::after {
			content: "▋";
			margin-left: 4px;
			animation: twBlink .9s infinite;
		}

		@keyframes twBlink {

			0%,
			49% {
				opacity: 1
			}

			50%,
			100% {
				opacity: 0
			}
		}

		.cardia {
			min-height: 290px;
			position: relative;
			border-radius: 18px;
			background: #fff;
			z-index: 0;
		}

		/* miolo do card */
		.cardia.tw-typing::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: 18px;
			background: #fff;
			z-index: -1;
			pointer-events: none;
		}

		@keyframes twSpin {
			to {
				transform: rotate(360deg);
			}
		}

		/* cursor */
		.tw-cursor::after {
			content: "▋";
			margin-left: 4px;
			animation: twBlink .9s infinite;
		}

		@keyframes twBlink {

			0%,
			49% {
				opacity: 1
			}

			50%,
			100% {
				opacity: 0
			}
		}

		/* remove o marker padrão */
		.cardia ul {
			list-style: none;
			padding-left: 0;
			margin-left: 0;
			min-height: 140px;
		}

		/* cada li vira uma linha com "bolinha fake" */
		.cardia ul li {
			display: flex;
			gap: .6rem;
			align-items: flex-start;
		}

		/* bolinha fake (fica invisível até a classe ligar) */
		.cardia ul li::before {
			content: "•";
			opacity: 0;
			transform: translateY(.05em);
			transition: opacity .12s ease;
		}

		/* quando estiver digitando aquele item, a bolinha aparece */
		.cardia ul li.tw-bullet-on::before {
			opacity: 1;
		}
		.mouse-glow{
  position: fixed;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;

  /* “sombra” azul */
  background: radial-gradient(circle, #6699ff80, rgba(0, 140, 255, 0) 60%);
  filter: blur(8px);

  transform: translate(-50%, -50%);
  pointer-events: none;   /* não atrapalha cliques */
  z-index: 9999;

  opacity: 0;            /* começa invisível */
  transition: opacity .2s ease;
}

/* Mini-FAQ dentro dos anexos */
.annex-mini .accordion-item{
  border:1px solid var(--border);
  border-radius: 14px !important;
  overflow:hidden;
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}
.annex-mini .accordion-button{
  font-weight: 900;
}
.annex-mini .accordion-button:not(.collapsed){
  box-shadow: none;
}
.annex-mini .accordion-body{
  padding: 18px 18px;
}

/* POPOVER */
.info-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid rgba(102,153,255,.55);
  color:#6699FF;
  background:#fff;
  font-size:14px;
  margin-left:8px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, background .12s ease;
  vertical-align: middle;
}
.info-ico i{
  font-size:20px;
  /* transform: translateY(1px); */
}
  .info-ico:hover{ transform: translateY(-1px); background: rgba(102,153,255,.08); }

  /* deixa o popover com cara “Mobex” */
  .popover{
    border-radius:14px;
    border:1px solid rgba(229,231,235,1);
    box-shadow: 0 18px 50px rgba(15,23,42,.14);
	
  }
  .popover-header{
    font-weight:900;
    background:#fff;
    border-bottom:1px solid rgba(229,231,235,1);
    border-top-left-radius:14px;
    border-top-right-radius:14px;
  }
  .popover-body{
    color:#0b1220;
    font-size:.92rem;
    line-height:1.35;
  }

  /* fade out suave (Bootstrap já tem .fade, isso melhora a sensação) */
  .popover.fade{ transition: opacity .18s ease; }