html {
       scroll-behavior: smooth;
}

body {
       margin: 0;
       font-family: 'Inter', sans-serif;
       background: #ffffff;
       color: #fff;
       overflow-x: hidden;
}

/* NAV */
header {
       position: fixed;
       top: 0;
       width: 100%;
       z-index: 1000;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 5px 6px;
       background: rgba(2, 6, 23, 0.6);
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* LOGO */
header h1 {
       color: white;
       font-size: 18px;
       margin-left: 30px;
}

/* NAV */
header nav {
       display: flex;
       gap: 25px;
}

header nav a {
       color: #94a3b8;
       text-decoration: none;
       font-size: 14px;
       transition: 0.3s;
}

header nav a:hover {
       color: white;
}

/* BOTÃO CTA */
header .cta {
       background: #f97316;
       color: white;
       padding: 10px 18px;
       border-radius: 25px;
       text-decoration: none;
       font-weight: bold;
       transition: 0.3s;
       margin-left: -200px;
       margin-right: 30px;
}

header .cta:hover {
       transform: scale(1.05);
}

/* HERO */
.hero {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 100px 10%;
       min-height: 65vh;
       background: #f1f5f9;
       color: #0f173a;
}

/* TEXT */
.hero-content {
       max-width: 500px;
}

.tag {
       background: rgba(255, 255, 255, 0.1);
       padding: 6px 12px;
       border-radius: 20px;
       font-size: 12px;
       color: #facc15;
}

.hero h1 {
       font-size: 40px;
       margin: 20px 0;
       line-height: 1.2;
}

.hero h1 span {
       color: #f97316;
}

.hero p {
       color: #94a3b8;
       margin-bottom: 30px;
}

/* BUTTONS */
.buttons {
       display: flex;
       gap: 15px;
}

.btn {
       padding: 12px 20px;
       border-radius: 30px;
       text-decoration: none;
       font-weight: bold;
}

.btn:hover {
  transform: scale(1.05);
}

.btn:active {
  transform: scale(0.97);
}

.primary {
       background: #f97316;
       color: white;
}

.secondary {
       background: rgba(18, 17, 59, 0.803);
       color: rgb(255, 255, 255);
}

/* SOCIAL */
.social-proof {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatars span {
  width: 30px;
  height: 30px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  margin-left: -8px;
}

/* IMAGE */
.hero-image {
       position: relative;
}

.mockup {
       background: linear-gradient(145deg, #ffffff, #b8babc);
       padding: 20px;
       border-radius: 20px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.mockup img {
       width: 400px;
       border-radius: 10px;
}

/* FLOATING CARD */
.floating-card {
       position: absolute;
       bottom: -20px;
       left: -40px;
       background: white;
       color: black;
       padding: 15px;
       border-radius: 15px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.floating-card small {
       font-size: 14px;
       color: #22c55e;
}

/* RESPONSIVO */
@media (max-width: 900px) {
       .hero {
              flex-direction: column;
              text-align: center;
       }

       .hero-image {
              margin-top: 40px;
       }

       .mockup img {
              width: 100%;
       }

       .floating-card {
              position: static;
              margin-top: 20px;
       }
}

/* SECTIONS */
section {
       padding: 60px 20px;
       text-align: center;
}

/* PROBLEMA */
.problema {
       background: #f1f5f9;
       padding: 100px 20px;
       text-align: center;
       min-height: 60vh;
}

.problema .tag {
       color: #f97316;
       font-size: 12px;
       font-weight: bold;
       letter-spacing: 2px;
}

.problema h2 {
       font-size: 36px;
       margin: 10px 0;
       color: #0f173a;
}

.problema .subtitle {
       color: #64748b;
       max-width: 600px;
       margin: 0 auto 50px;
}

/* GRID */
.problema-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 25px;
       max-width: 1100px;
       margin: auto;
}

/* CARDS */
.problema .card {
       background: #fff;
       padding: 25px;
       border-radius: 15px;
       text-align: left;

       border: 1px solid #f1f5f9;
       transition: 0.3s;
}

.problema .card:hover {
       transform: translateY(-5px);
}

/* ÍCONE */
.problema .icon {
       width: 45px;
       height: 45px;
       background: #fee2e2;
       color: #ef4444;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 12px;
       margin-bottom: 15px;
       font-size: 20px;
}

/* TEXTO */
.problema h3 {
       margin-bottom: 8px;
       color: #0f172a;
}

.problema p {
       font-size: 14px;
       color: #64748b;
}

/* RESPONSIVO */
@media (max-width: 900px) {
       .problema-grid {
              grid-template-columns: 1fr 1fr;
       }
}

@media (max-width: 600px) {
       .problema-grid {
              grid-template-columns: 1fr;
       }
}

/* SOLUÇÃO */
.solucao {
       background: #f1f5f9;
       padding: 100px 20px;
       text-align: center;
}

.solucao .tag {
       color: #f97316;
       font-size: 12px;
       font-weight: bold;
       letter-spacing: 2px;
}

.solucao h2 {
       font-size: 36px;
       margin: 10px 0;
       color: #0f173a;
}

.solucao .subtitle {
       color: #64748b;
       max-width: 600px;
       margin: 0 auto 50px;
}

/* GRID */
.solucao-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 25px;
       max-width: 1100px;
       margin: auto;
}

/* CARDS */
.solucao .card {
       background: #fff;
       padding: 25px;
       border-radius: 15px;
       text-align: left;

       border: 1px solid #f1f5f9;
       transition: 0.3s;
}

.solucao .card:hover {
       transform: translateY(-5px);
}

/* DESTAQUE (igual o print com borda) */
.solucao .destaque {
       border: 2px solid #f97316;
}

/* ÍCONE */
.solucao .icon {
       width: 45px;
       height: 45px;
       background: #f97316;
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 12px;
       margin-bottom: 15px;
       font-size: 20px;
}

/* TEXTO */
.solucao h3 {
       margin-bottom: 8px;
       color: #0f172a;
}

.solucao p {
       font-size: 14px;
       color: #64748b;
}

/* RESPONSIVO */
@media (max-width: 900px) {
       .solucao-grid {
              grid-template-columns: 1fr 1fr;
       }
}

@media (max-width: 600px) {
       .solucao-grid {
              grid-template-columns: 1fr;
       }
}

/* CARDS */
.cards {
       display: flex;
       justify-content: center;
       gap: 20px;
}

.card {
       background: #0f172a;
       padding: 20px;
       border-radius: 10px;
}

/* DEMO */
.demo {
       background: #f1f5f9;
       padding: 100px 20px;
       text-align: center;
       display: flex;
}

.text-demo {
       max-width: 500px;
       margin-left: 100px;
       margin-top: 200px;
}

.tag {
       color: #f97316;
       font-weight: bold;
       font-size: 12px;
       letter-spacing: 2px;
}

.demo h2 {
       font-size: 36px;
       margin: 10px 0;
       color: #0f173a;
}

.demo p {
       color: #64748b;
       max-width: 600px;
       margin: 0 auto 40px;
}

/* TABS */
.tabs {
       display: inline-flex;
       background: #e2e8f0;
       padding: 6px;
       border-radius: 50px;
       margin-bottom: 40px;
}

.tab {
       border: none;
       background: transparent;
       padding: 10px 20px;
       border-radius: 50px;
       cursor: pointer;
       color: #475569;
       transition: 0.3s;
}

.tab.active {
       background: #f97316;
       color: #fff;
}

/* WRAPPER (efeito fundo blur) */
.phone {
       width: 280px;
       height: 560px;
       background: #475569;
       border-radius: 40px;
       padding: 10px;
       margin: 0 auto;
       position: relative;

       box-shadow:
              0 20px 60px rgba(85, 84, 84, 0.3),
              inset 0 0 10px rgba(255, 255, 255, 0.181);
}

/* tela */
.screen {
       width: 100%;
       height: 100%;
       background: #000;
       border-radius: 30px;
       overflow: hidden;
}

.screen img {
       width: 100%;
       height: 100%;
       object-fit: cover;
}

@media screen and (max-width: 900px) {
       .demo {
              flex-direction: column;
              text-align: center;
       }

       .text-demo {
              margin: 30px auto 0;
       }
}

/* BENEFÍCIOS */
.beneficios {
       background: #f1f5f9;
       padding: 100px 20px;
       text-align: center;
}

.beneficios .tag {
       color: #f97316;
       font-size: 12px;
       font-weight: bold;
       letter-spacing: 2px;
}

.beneficios h2 {
       font-size: 36px;
       margin: 10px 0;
       color: #0f173a;
}

.beneficios p {
       color: #64748b;
       max-width: 600px;
       margin: 0 auto 50px;
}

.beneficios-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 25px;
       max-width: 1000px;
       margin: auto;
}

.card {
       background: #fff;
       padding: 25px;
       border-radius: 15px;
       text-align: left;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
       transition: 0.3s;
}

.card:hover {
       transform: translateY(-6px);
}

.icon {
       width: 45px;
       height: 45px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 12px;
       margin-bottom: 15px;
       font-size: 20px;
       color: #fff;
}

.green {
       background: #10b981;
}

.blue {
       background: #3b82f6;
}

.purple {
       background: #8b5cf6;
}

.red {
       background: #ef4444;
}

.orange {
       background: #f97316;
}

.card h3 {
       margin-bottom: 8px;
       color: #0f172a;
}

.card p {
       font-size: 14px;
       color: #64748b;
}

@media (max-width: 900px) {
       .beneficios-grid {
              grid-template-columns: 1fr 1fr;
       }
}

@media (max-width: 600px) {
       .beneficios-grid {
              grid-template-columns: 1fr;
       }
}

/* Planos */
.planos {
       background: #f1f5f9;
       padding: 100px 20px;
       text-align: center;
}

.btn {
       padding: 12px 20px;
       border-radius: 30px;
       text-decoration: none;
       font-weight: bold;
       transition: 0.3s;
}

.planos h2 {
       font-size: 36px;
       margin: 10px 0;
       color: #0f173a;
}

.planos .subtitle {
       color: #64748b;
       margin-bottom: 50px;
}

/* GRID */
.planos-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 25px;
       max-width: 1100px;
       margin: auto;
}

/* CARD */
.plano {
       background: #fff;
       padding: 30px;
       border-radius: 20px;
       text-align: left;
       border: 1px solid #e2e8f0;
       position: relative;
       transition: 0.3s;
       cursor: pointer;
}

.plano.ativo {
       border: 2px solid #22c55e;
       transform: scale(1.05);
       box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.plano.ativo::after {
       content: "Selecionado";
       position: absolute;
       top: 10px;
       left: 10px;
       background: #22c55e;
       color: white;
       font-size: 12px;
       padding: 4px 8px;
       border-radius: 8px;
}

.plano:hover {
       transform: translateY(-8px);
}

/* DESTAQUE */
.plano.destaque {
       border: 2px solid #f97316;
       transform: scale(1.05);
}

.badge {
       position: absolute;
       top: -12px;
       right: 20px;
       background: #f97316;
       color: white;
       padding: 5px 10px;
       font-size: 12px;
       border-radius: 10px;
}

/* PREÇO */
.preco {
       font-size: 32px;
       margin: 15px 0;
       color: #0f172a;
}

.preco span {
       font-size: 14px;
       color: #64748b;
}

/* LISTA */
.plano ul {
       list-style: none;
       padding: 0;
       margin: 20px 0;
}

.plano ul li {
       margin-bottom: 10px;
       font-size: 14px;
       color: #475569;
}

/* RESPONSIVO */
@media (max-width: 900px) {
       .planos-grid {
              grid-template-columns: 1fr;
       }

       .plano.destaque {
              transform: scale(1);
       }
}

/* MODAL */
/* FUNDO ESCURO */
.modal {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;

       background: rgba(0, 0, 0, 0.6);
       -webkit-backdrop-filter: blur(5px);
       backdrop-filter: blur(5px);

       display: flex;
       align-items: center;
       justify-content: center;

       opacity: 0;
       visibility: hidden;
       transition: 0.3s;
}

/* ATIVO */
.modal.show {
       opacity: 1;
       visibility: visible;
}

/* CAIXA */
.modal-content {
       background: #020617;
       color: white;
       padding: 30px;
       border-radius: 20px;
       text-align: center;
       width: 90%;
       max-width: 400px;

       transform: scale(0.9);
       transition: 0.3s;
}

.modal.show .modal-content {
       transform: scale(1);
}

/* BOTÃO */
.modal-content button {
       margin-top: 20px;
       padding: 12px 20px;
       border: none;
       border-radius: 25px;
       background: #f97316;
       color: white;
       cursor: pointer;
}

/* FECHAR */
.close {
       position: absolute;
       right: 20px;
       top: 15px;
       cursor: pointer;
       font-size: 20px;
}

/* CTA */
.cta-final {
       text-align: center;
       padding: 100px 20px;
       background: #f1f5f9;
       color: #0f173a;
}

/* TAG */
.cta-final .tag {
       background: #f1f5f9;
       padding: 6px 14px;
       border-radius: 20px;
       font-size: 12px;
       color: #ffffff;
}

/* TÍTULO */
.cta-final h2 {
       font-size: 40px;
       margin: 20px 0;
}

.cta-final h2 span {
       color: #f97316;
}

/* TEXTO */
.cta-final p {
       color: #94a3b8;
       max-width: 600px;
       margin: 0 auto 30px;
}

/* BOTÕES */
.cta-final .buttons {
       display: flex;
       justify-content: center;
       gap: 15px;
       margin-bottom: 20px;
}

.cta-final .btn {
       padding: 14px 28px;
       border-radius: 30px;
       text-decoration: none;
       font-weight: bold;
       transition: 0.3s;
}

/* BOTÃO PRINCIPAL */
.cta-final .primary {
       background: linear-gradient(90deg, #facc15, #f97316);
       color: white;
}

.cta-final .primary:hover {
       transform: scale(1.05);
}

/* BOTÃO SECUNDÁRIO */
.cta-final .secondary {
       background: rgb(255, 255, 255);
       color: #0f173a;
}

.cta-final .secondary:hover {
       background: rgba(173, 166, 166, 0.334);
}

/* TEXTO FINAL */
.cta-final small {
       color: #64748b;
}

/* RESPONSIVO */
@media (max-width: 600px) {
       .cta-final h2 {
              font-size: 28px;
       }

       .cta-final .buttons {
              flex-direction: column;
       }
}

.footer {
       background: #f1f5f9;
       color: #94a3b8;
       padding: 40px 20px;
       text-align: center;
}

.footer-content {
       margin-bottom: 20px;
}

.footer h3 {
       color: #0f173a;
       margin-bottom: 10px;
}

.footer .links {
       display: flex;
       justify-content: center;
       gap: 20px;
}

.footer .links a {
       color: #64748b;
       text-decoration: none;
       font-size: 14px;
       transition: 0.3s;
}

.footer .links a:hover {
       color: white;
}

.footer .copy {
       font-size: 13px;
       color: #475569;
}

/* MOBILE */
@media (max-width: 768px) {

       /* ===== HERO ===== */
       .hero {
              flex-direction: column;
              text-align: center;
              padding: 80px 20px;
       }

       .hero-content {
              margin-top: 20px;
       }

       .cta {
              display: none;
       }

       .hero h1 {
              font-size: 32px;
       }

       .hero p {
              font-size: 14px;
       }

       .hero .buttons {
              flex-direction: column;
              align-items: center;
              gap: 15px;
              margin: 25px;
       }

       .hero .btn {
              width: 100%;
              max-width: 300px;
       }

       .hero-image {
              margin-top: 40px;
       }

       .mockup img {
              width: 100%;
       }

       .floating-card {
              position: static;
              margin-top: 15px;
       }

       /* ===== HEADER ===== */
       header {
              padding: 15px 20px;
       }

       header nav {
              display: none;
              /* depois a gente pode fazer menu hambúrguer */
       }

       /* ===== PROBLEMA / SOLUÇÃO / BENEFÍCIOS ===== */
       .problema-grid,
       .solucao-grid,
       .beneficios-grid {
              grid-template-columns: 1fr;
       }

       /* ===== TEXTOS ===== */
       h2 {
              font-size: 26px;
       }

       /* ===== BOTÕES GERAIS ===== */
       .buttons {
              flex-direction: column;
              gap: 10px;
              max-width: 280px;
       }

       .btn {
              width: 100%;
              text-align: center;
       }

       /* ===== CTA FINAL ===== */
       .cta-final h2 {
              font-size: 28px;
       }

}

/* ===== DARK MODE OVERRIDES ===== */
body {
       background: #070c17 !important;
       color: #e2e8f0 !important;
}

header {
       background: rgba(5, 12, 28, 0.9) !important;
       border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

header h1 {
       color: #e5ecff !important;
}

header nav a {
       color: #94a3b8 !important;
}

header nav a:hover,
footer .links a:hover,
.btn:hover,
.cta-final .primary:hover,
.cta-final .secondary:hover {
       color: #fce08b !important;
}

.hero,
.problema,
.solucao,
.beneficios,
.demo,
.planos,
.cta-final,
.footer {
       background: #0b1225 !important;
       color: #dbe8fc !important;
}

.hero p,
.problema .subtitle,
.solucao .subtitle,
.beneficios p,
.planos .subtitle,
.cta-final p,
.footer p,
.footer .copy {
       color: #94a3b8 !important;
}

.card,
.problema .card,
.solucao .card,
.beneficios .card,
.plano,
.phone,
.mockup,
.modal-content {
       background: #111f36 !important;
       border-color: #1f2f4f !important;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55) !important;
}

.card h3,
.problema h3,
.problema h2,
.solucao h2,
.solucao h3,
.beneficios h2,
.planos h2,
.preco,
.demo h2,
.cta-final h2,
.footer h3 {
       color: #ffffff !important;
}

.icones,
.icon,
.badge,
.plano.ativo::after,
.tag,
.star,
.floating-card small {
       color: #000000 !important;
}

.solucao .icon,
.icon.green,
.icon.blue,
.icon.purple,
.icon.red,
.icon.orange {
       opacity: 0.95 !important;
}

.primary,
.btn.primary,
.cta-final .primary,
.plano.ativo,
.header .cta,
.badge,
.tag {
       background: #f97316 !important;
       color: white !important;
}

.secondary,
.cta-final .secondary {
       background: rgba(30, 42, 70, 0.8) !important;
       color: #dbe8fc !important;
}

.footer {
       background: #091128 !important;
}

.hero h1 span,
.tag,
.cta-final h2 span,
.floating-card small {
       color: #f97316;
}