:root {
            --skycloud-blue-start: #35a3f5;  /* azul claro (esquerda da nuvem) */
--skycloud-blue-end: #1e3a8a;    /* azul escuro (direita da nuvem) */
--skycloud-text: #e6f4ff;        /* texto claro para contraste */
        --text-tertiary: #95979b;
          --plan-color: 76, 153, 252;
          --color-bg-gradient-start: #0a0c10; /* Cor mais clara do gradiente */
          --color-bg-gradient-end: #0b0e13;   /* Cor mais escura do gradiente */
          --color-primary: oklch(.623 .214 259.815);          /* Roxo principal */
          --color-secondary: oklch(.707 .165 254.624);        /* Roxo de destaque */
          --color-card-bg: #11151b;          /* Fundo dos cards */
          --color-text-primary: #e8e8e9;     /* Tom de roxo escuro para texto */
          --color-text-secondary: #b7b9bc;   /* Texto claro */
          --color-button-bg: oklch(.546 .245 262.881);        /* Botão */
          --color-button-bg-hover: oklch(.488 .243 264.376);  /* Botão hover */
          --color-toggle-bg: #161a23;        /* Fundo dos toggles */
          --color-toggle-text: #e8e8e9;      /* Texto dos toggles */
          --shadow-card: 0 4px 20px rgba(0,0,0,0.1);
            
          --font-heading: 'Poppins', sans-serif;
--font-body: 'Nunito', sans-serif;

        }
        body, main {
  font-family: var(--font-body);
}

h1, h2, h3, .btn, .toggle, .toggle-features, .price, .faq-title {
  font-family: var(--font-heading);
}
header {
        font-family: 'Poppins', 'Nunito', sans-serif;
      }
        main {
          font-family: var(--font-family);
          background: linear-gradient(
            to bottom,
            var(--color-bg-gradient-start),
            var(--color-bg-gradient-end)
          );
          color: var(--color-text-primary);
          line-height: 1.4;
        }
    
        /* 
          SEÇÃO PRINCIPAL 
          Centraliza todo o conteúdo da página
        */
        main {
        box-sizing: border-box;
          width: 100%;
          margin: 0 auto;
          padding: 2rem 1rem;
          text-align: center;
        }
    
        /* 
          TÍTULOS E TEXTOS 
        */
        h1 {
          font-size: 2rem;
          margin-bottom: 0.5rem;
          color: var(--color-text-primary);
        }
        h2 {
          font-size: 1.5rem;
          margin-bottom: 0.5rem;
          color: var(--color-primary);
        }
        h3 {
          font-size: 1.2rem;
          margin-bottom: 0.5rem;
          color: var(--color-text-primary);
        }
        p {
          margin-bottom: 1rem;
        }
    
        /* 
          TOGGLES (SERVIDOR NO BRASIL, SERVIDOR NOS EUA, PLANO ANUAL)
          Estilização aproximada dos botões "pílula".
        */
        .toggle-container {
          display: inline-flex;
          gap: 0.5rem;
          margin-bottom: 2rem;
        }
        .toggle {
          background: var(--color-toggle-bg);
          color: var(--color-toggle-text);
          border: none;
          border-radius: 999px; /* deixa no formato "pill" */
          padding: 0.5rem 1rem;
          font-size: 0.9rem;
          cursor: pointer;
          transition: background 0.3s;
        }
        .toggle:hover {
          filter: brightness(0.95);
        }
        /* Toggle ativo - apenas exemplo visual */
        .toggle.active {
          background: var(--color-primary);
        }
    
        /* 
          GRID DE PLANOS 
          Usa display flex, mas pode ser grid. Aqui, flex com wrap para responsividade.
        */
        .plans {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.plans::-webkit-scrollbar {
  display: none;
}
    
        /* 
          CARD DO PLANO 
          Cada plano é um article com fundo branco, sombra e bordas arredondadas.
        */
        .plan-card {
            flex: 0 0 auto;
  scroll-snap-align: start;
          background: var(--color-card-bg);
          box-shadow: var(--shadow-card);
          border-radius: 1rem;
          width: 300px;
          max-width: 90%;
          padding: 1.5rem;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: transform 0.3s;
        }
        
        .plan-card:hover {
          transform: translateY(-3px);
        }
    
        .plan-card h2 {
          margin-bottom: 0.5rem;
        }
        .price {
          font-size: 2rem;
          color: var(--color-primary);
          margin: 1rem 0;
        }
    
        /* 
          LISTA DE BENEFÍCIOS 
        */
        .benefits {
          list-style: none;
          text-align: left;
          margin: 1rem 0 0;
          color: var(--text-secondary);
          padding-left: 0;
        }
        .benefits li {
          margin-bottom: 0.5rem;
          position: relative;
          display: flex;
          align-items: center;
        }
        .benefits li svg {
          color: oklch(79.2% .209 151.711);
          width: 1rem;
          height: 1rem;
          margin-right: .30rem;
          position: relative;
          flex-shrink: 0;
        }
        /* 
        .benefits li::before {
          content: '✓';
          color: var(--color-primary);
          position: absolute;
          left: 0;
        } */
    
        /* 
          BOTÃO DE ASSINAR 
        */
        .plan-card .btn {
          background: var(--color-button-bg);
          color: #fff;
        text-decoration: none;
          border: none;
          border-radius: 0.5rem;
          padding: 0.8rem 1.5rem;
          font-size: 1rem;
          cursor: pointer;
          transition: background 0.3s;
          margin-top: 1rem;
        }
        .plan-card .btn:hover {
          opacity: 0.9;
        }
        
        /*
          MAIS RECURSOS
        */
        .features-collapsible {
  display: none;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.4s ease, transform 0.3s ease;
}

.features-collapsible.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.toggle-features {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #2563eb;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  margin-top: 1rem;
}
.toggle-features span {
  font-size: 1rem;
}
.toggle-features svg {
  width: 2rem;
  transition: transform 0.3s ease;
}

.toggle-features svg.rotated {
  transform: rotate(180deg);
}


        /* 
          AJUSTES RESPONSIVOS 
        */
        @media (max-width: 768px) {
          h1 {
            font-size: 1.6rem;
          }
        }


            .plan-slider {
                width: 100%;
                height: 0.5rem;
                background: rgba(var(--plan-color), 0.25);
                border-radius: 9999px;
                appearance: none;
            }
        
            .plan-slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background: rgb(79, 70, 229);
                cursor: pointer;
            }
        
            hr.separator {
                border: none;
                border-top: 2px solid rgba(var(--plan-color), 0.15);
                border-radius: 9999px;
                margin: 1rem 0;
            }
        
            .attributes {
                display: flex;
                gap: 0.5rem;
                flex-wrap: wrap;
            }
        
            .attributes .attribute {
                flex: 1 1 30%;
                background: transparent;
                border: 2px solid rgba(var(--plan-color), 0.15);
                border-radius: 0.5rem;
                padding: 0.5rem;
                text-align: center;
                position: relative;
            }
        
            .attributes .attribute svg {
                width: 1.25rem;
                position: absolute;
                top: -0.25rem;
                right: -0.25rem;
                font-size: 1rem;
                color: rgb(var(--plan-color));
            }
        
            .attributes .attribute .value {
                font-weight: 600;
                font-size: 0.875rem;
                color: var(--text-primary);
            }
        
            .attributes .attribute .label {
                font-size: 0.75rem;
                color: var(--text-tertiary);
            }
        
            /* Seção de chamada para ação com identidade SkyCloud */
            section.cta-section {
              max-width: 1300px;
              margin: 4rem auto;
              padding: 100px 0px;
              background: linear-gradient(135deg, #35a3f5, #1e3a8a); /* Gradiente azul SkyCloud */
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 1rem;
            }
          
            .cta-container {
              width: 100%;
              text-align: center;
            }
          
            .cta-heading {
              font-family: 'Poppins', sans-serif;
              font-size: 2.5rem;
              font-weight: 700;
              line-height: 1.4;
              margin-bottom: 2rem;
              color: #e6f4ff;
            }
          
            .gradient-text {
              background: linear-gradient(90deg, #ffffff, #93c5fd);
              background-clip: text;
              -webkit-text-fill-color: transparent;
              display: inline-block;
            }
          
            /* Estilo do formulário e botão */
            .cta-form {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              gap: 12px;
            }
          
            .cta-form button {
              padding: 15px 30px;
              background: linear-gradient(to right, #3b82f6, #1e3a8a);
              color: #fff;
              font-weight: 600;
              border: none;
              border-radius: 999px;
              cursor: pointer;
              font-size: 1rem;
              transition: background 0.3s ease, transform 0.2s ease;
            }
          
            .cta-form button:hover {
              background: linear-gradient(to right, #60a5fa, #1e3a8a);
              transform: translateY(-2px);
            }
          
            /* Responsivo */
            @media (max-width: 480px) {
              .cta-heading {
                font-size: 1.8rem;
              }
          
              .cta-form {
                justify-content: center;
              }
          
              .cta-form button {
                width: 80%;
              }
            }
          
          

            /* Título do FAQ com identidade visual SkyCloud */
            .faq-title {
              margin-bottom: 2rem;
              font-size: 2.25rem;
              font-weight: 800;
              letter-spacing: -0.02em;
              color: #e6f4ff;
              text-align: center;
              font-family: 'Poppins', sans-serif;
            }
          
            .accordion {
              max-width: 900px;
              margin: 0 auto;
              padding: 60px 20px;
            }
          
            details {
              background: #0f172a;
              border-radius: 12px;
              margin-bottom: 12px;
              overflow: hidden;
              border: 1px solid rgba(255, 255, 255, 0.05);
              transition: background 0.3s ease;
            }
          
            summary {
              padding: 20px 24px;
              cursor: pointer;
              position: relative;
              font-weight: 600;
              font-size: 1.1rem;
              color: #e2e8f0;
              list-style: none;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: 'Nunito', sans-serif;
            }
          
            summary::marker {
              display: none;
            }
          
            summary::after {
              content: "+";
              font-size: 1.5rem;
              /*color: #60a5fa;*/
              transition: transform 0.3s ease, color 0.3s ease;
            }
          
            details[open] summary::after {
              content: "–";
              color: #93c5fd;
              transform: rotate(180deg);
            }
          
            .accordion-content {
              padding: 20px 24px;
              background: #1e293b;
              color: #cbd5e1;
              line-height: 1.6;
              font-size: 1rem;
              border-top: 1px solid #334155;
            }
          
            @media (max-width: 600px) {
              .faq-title {
                font-size: 1.75rem;
              }
          
              summary {
                font-size: 1rem;
                padding: 16px 20px;
                text-align: left;
              }
          
              .accordion-content {
                font-size: 0.95rem;
                padding: 16px 20px;
              }
            }