.elementor-kit-11{--e-global-color-primary:#FFCA00;--e-global-color-secondary:#010A4B;--e-global-color-text:#FFFFFF;--e-global-color-accent:#61CE70;--e-global-color-41e9f00:#EEEEEEEE;--e-global-color-5960f84:#010A4B;--e-global-color-590fb6d:#FFCA00;--e-global-color-50a559d:#6AC2F0;--e-global-color-af13804:#1D89E4;--e-global-typography-primary-font-family:"Mina";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nome do Token Crypto</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
  <style>
    /* Reset e fontes */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', sans-serif;
      color: #FFFFFF;
      background: url('https://via.placeholder.com/1920x1080') no-repeat center/cover;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

    /* Cores principais */
    :root {
      --dark-blue: #0A1F44;
      --light-blue: #3B7DDD;
      --gold: #FFD700;
      --white: #FFFFFF;
    }

    /* Overlay geral */
    .overlay-section {
      position: relative;
      background: rgba(10,31,68,0.6);
      padding: 6rem 0;
    }
    .overlay-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: inherit;
      filter: blur(8px) brightness(0.5);
      z-index: 0;
    }
    .overlay-content {
      position: relative;
      z-index: 1;
      width: 90%; max-width: 1200px;
      margin: 0 auto;
    }

    /* Header com vidro fosco */
    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      padding: 1rem 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo {
      font-weight: 800; font-size: 1.75rem;
      color: var(--gold);
    }
    nav ul { display: flex; gap: 2rem; list-style: none; }
    nav li a {
      font-weight: 600;
      transition: color .3s;
      color: var(--light-blue);
    }
    nav li a:hover { color: var(--light-blue); }
    .btn-primary {
      padding: .6rem 1.2rem;
      border-radius: 2rem;
      background: var(--light-blue);
      color: var(--white);
      font-weight: 600;
      transition: background .3s;
    }
    .btn-primary:hover { background: var(--dark-blue); }

    /* Hero */
    #hero .overlay-content { text-align: center; padding: 4rem 1rem; }
    #hero h1 { font-size: 3rem; margin-bottom: 1rem; }
    #hero p { font-size: 1.25rem; margin-bottom: 2rem; }

    /* Grid de Features */
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }
    .feature-card {
      background: rgba(59,125,221,0.1);
      backdrop-filter: blur(6px);
      padding: 2rem;
      border-radius: 12px;
      text-align: center;
      transition: transform .3s;
    }
    .feature-card:hover { transform: translateY(-10px); }
    .feature-card h3 {
      margin-bottom: .75rem;
      color: var(--gold);
    }

    /* Tokenomics tabela moderna */
    .tokenomics table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 1rem;
      margin-top: 2rem;
    }
    .tokenomics th, .tokenomics td {
      padding: 1rem;
      background: rgba(59,125,221,0.1);
      backdrop-filter: blur(6px);
      border: none;
      color: var(--white);
    }
    .tokenomics th { font-weight: 600; text-align: left; }

    /* Roadmap linha vertical */
    .roadmap {
      position: relative;
      padding-left: 2rem;
      margin-top: 2rem;
    }
    .roadmap::before {
      content: '';
      position: absolute;
      left: 1rem; top: 0; bottom: 0;
      width: 2px;
      background: var(--gold);
    }
    .phase {
      position: relative;
      padding: 1rem 0 1rem 1.5rem;
    }
    .phase::before {
      content: '';
      position: absolute;
      left: -1.25rem;
      top: 1rem;
      width: 12px;
      height: 12px;
      background: var(--gold);
      border-radius: 50%;
    }
    .phase h4 { font-weight: 600; margin-bottom: .5rem; color: var(--light-blue); }
    .phase p { color: var(--white); }

    /* Footer */
    footer {
      text-align: center;
      padding: 2rem 1rem;
      background: rgba(10,31,68,0.8);
      backdrop-filter: blur(10px);
    }
    footer p { font-size: .9rem; color: var(--white); }
    footer a { color: var(--light-blue); }
  </style>
</head>
<body>
  <header>
    <div class="logo">CryptoToken</div>
    <nav>
      <ul>
        <li><a href="#hero">Home</a></li>
        <li><a href="#features">Características</a></li>
        <li><a href="#tokenomics">Tokenomics</a></li>
        <li><a href="#roadmap">Roadmap</a></li>
        <li><a href="#buy" class="btn-primary">Comprar</a></li>
      </ul>
    </nav>
  </header>

  <section id="hero" class="overlay-section">
    <div class="overlay-content">
      <h1>Bem-vindo ao CryptoToken</h1>
      <p>O futuro das finanças descentralizadas</p>
      <a href="#buy" class="btn-primary">Adquirir Agora</a>
    </div>
  </section>

  <section id="features" class="overlay-section">
    <div class="overlay-content">
      <h2>Características</h2>
      <div class="features">
        <div class="feature-card">
          <h3>Baixas Taxas</h3>
          <p>Taxas mínimas para maximizar seus ganhos.</p>
        </div>
        <div class="feature-card">
          <h3>Segurança</h3>
          <p>Auditorias de contrato e segurança de nível militar.</p>
        </div>
        <div class="feature-card">
          <h3>Governança DAO</h3>
          <p>Decisões coletivas pelos detentores de tokens.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="tokenomics" class="overlay-section">
    <div class="overlay-content">
      <h2>Tokenomics</h2>
      <table>
        <thead>
          <tr><th>Propósito</th><th>Percentual</th></tr>
        </thead>
        <tbody>
          <tr><td>Liquidez</td><td>40%</td></tr>
          <tr><td>Equipe</td><td>15%</td></tr>
          <tr><td>Marketing</td><td>20%</td></tr>
          <tr><td>Reserva</td><td>25%</td></tr>
        </tbody>
      </table>
    </div>
  </section>

  <section id="roadmap" class="overlay-section">
    <div class="overlay-content">
      <h2>Roadmap</h2>
      <div class="roadmap">
        <div class="phase">
          <h4>Fase 1 - Lançamento</h4>
          <p>Listagem em exchanges descentralizadas e auditoria de contratos.</p>
        </div>
        <div class="phase">
          <h4>Fase 2 - Expansão</h4>
          <p>Parcerias estratégicas e listagem em exchanges centralizadas.</p>
        </div>
        <div class="phase">
          <h4>Fase 3 - Crescimento</h4>
          <p>Implementação de staking e programa de rewards.</p>
        </div>
      </div>
    </div>
  </section>

  <footer>
    <p>&copy; 2025 CryptoToken. Todos os direitos reservados. <a href="#privacy">Política de Privacidade</a></p>
  </footer>
</body>
</html>/* End custom CSS */