<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Conecta Verse 🌐</title>

  <!-- (Opcional) seu CSS existente; o inline abaixo sobrescreve -->
  <link rel="stylesheet" href="/assets/css/style.css?v=1">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

  <style>
    /* ===== Reset/Base ===== */
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{height:100%}
    body{
      font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif;
      color:#eaf2ff; overflow-x:hidden;
      background:url('/assets/imagem/A_digital_illustration_serves_as_promotional_artwo.png') center/cover fixed no-repeat;
    }
    a{color:inherit}

    /* ===== Header ===== */
    .header{
      position:sticky; top:0; z-index:1000;
      height:70px; display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:0 40px;
      background:rgba(3,6,18,.55); backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow:0 0 10px #00ffff44;
    }
    .logo{font-size:22px;font-weight:700;letter-spacing:.2px}
    .logo span:first-child{color:#4ecfff}
    .logo span:last-child{color:#7C4DFF}
    .nav{display:flex;gap:24px}
    .nav a{color:#b8c6ff;text-decoration:none;font-weight:600;transition:.25s}
    .nav a:hover{color:#eaf2ff}
    .btn-login{
      background:linear-gradient(135deg,#7C4DFF,#00E5FF);
      border:1px solid rgba(255,255,255,.2);
      padding:8px 18px;border-radius:20px;color:#061018;font-weight:700;cursor:pointer;transition:.2s
    }
    .btn-login:hover{transform:translateY(-1px);filter:brightness(1.05)}

    /* ===== Full-bleed Hero =====
       A hero cobre 100% da LARGURA com um ::before que ocupa 100vw.
       O conteúdo fica dentro de .wrap centralizada (max 1200px). */
    .hero{
      position:relative;
      min-height:100vh;
      display:block;   /* garante bloco full-bleed */
      padding-top:110px; /* compensa o header fixo */
      isolation:isolate; /* separa o ::before */
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      /* gradientes amplos em toda a largura */
      background:
        radial-gradient(1200px 600px at 10% 0%, rgba(124,77,255,.18), transparent 60%),
        radial-gradient(1200px 600px at 90% 20%, rgba(0,229,255,.18), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
      z-index:-1; /* fica atrás do conteúdo */
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    /* container interno CENTRALIZADO, mas o fundo continua 100% */
    .wrap{
      width:min(1200px, 92vw);
      margin:0 auto;
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap:42px;
      align-items:center;
      padding: 0 0 80px;
    }

    .text-content h1{font-size:clamp(34px, 6vw, 56px); line-height:1.05}
    .text-content h1{color:#4ecfff}
    .text-content h1 span{color:#7C4DFF}
    .text-content p{color:#cfd7ff; font-size:18px; margin:16px 0}
    .btn-saiba{
      margin-top:22px; display:inline-block;
      padding:14px 32px; border-radius:28px; border:0;
      background:linear-gradient(90deg,#7C4DFF,#00E5FF);
      color:#061018; font-weight:800; cursor:pointer;
      box-shadow:0 0 18px #00e5ff66; transition:.25s;
    }
    .btn-saiba:hover{transform:translateY(-2px)}

    .hero-image{display:flex; justify-content:center; align-items:center}
    .hero-image img{
      width:min(520px, 90%); height:auto; border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow:0 30px 80px rgba(124,77,255,.25), 0 0 80px rgba(0,229,255,.18);
      animation:flutuar 6s ease-in-out infinite
    }
    @keyframes flutuar{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

    /* ===== Seções ===== */
    .section{position:relative; padding:64px 0}
    .section::before{
      content:""; position:absolute; inset:0; z-index:-1;
      /* também full-bleed, sem “faixa” */
      background:rgba(0,0,0,.45);
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .section .wrap{grid-template-columns:1fr; gap:0}
    .section h2{font-size:clamp(24px,3.4vw,32px); margin-bottom:18px; color:#4ecfff}
    .section p{color:#dfe7ff}

    .cards-container{
      display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:20px; margin-top:24px;
    }
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.12);
      padding:18px; border-radius:16px;
      box-shadow:0 10px 28px rgba(0,0,0,.35);
      transition:transform .25s ease, box-shadow .25s ease
    }
    .card:hover{transform:translateY(-6px); box-shadow:0 16px 36px rgba(0,229,255,.25)}
    .card h3{font-size:18px; margin-bottom:8px}
    .card p{color:#cbd4ff}

    /* ===== Footer ===== */
    .footer{padding:28px 0; color:#b9c3e6; text-align:center}
    .link{color:#9cdfff; text-decoration:none; border-bottom:1px dashed rgba(156,223,255,.35)}
    .link:hover{opacity:.9}

    /* ===== Modal ===== */
    .modal{position:fixed; inset:0; display:grid; place-items:center;
      background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
      opacity:0; pointer-events:none; transition:.25s}
    .modal[aria-hidden="false"]{opacity:1; pointer-events:auto}
    .modal-content{
      width:min(420px,92vw);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:22px 20px 16px;
      box-shadow:0 20px 60px rgba(0,0,0,.45)
    }
    .modal-content h3{margin:0 0 10px}
    .modal-content form{display:grid; gap:12px}
    .modal-content input{
      height:48px; padding:0 14px; border-radius:12px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.05); color:#eaf2ff
    }
    .modal-content button[type="submit"]{
      height:48px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
      background:linear-gradient(135deg,#6C63FF,#00E5FF); color:#061018; font-weight:800; cursor:pointer
    }
    .notice{min-height:20px; color:#19e5a8; font-size:.95rem}
    .close-btn{
      position:fixed; top:18px; right:18px; width:42px; height:42px;
      border-radius:12px; display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06); color:#eaf2ff; cursor:pointer
    }

    /* ===== Responsivo ===== */
    @media (max-width: 980px){
      .wrap{grid-template-columns:1fr; gap:26px}
      .hero{padding-top:96px}
      .header{padding:0 20px}
      .nav{gap:14px}
    }
  </style>
</head>
<body>
  <header class="header">
    <div class="logo"><span>Conecta</span> <span>Verse 🌐</span></div>
    <nav class="nav">
      <a href="#inicio">Início</a>
      <a href="#funcionalidades">Funcionalidades</a>
      <a href="#contato">Contato</a>
    </nav>
    <button class="btn-login" data-open="login">Entrar</button>
  </header>

  <!-- HERO full-bleed -->
  <section class="hero" id="inicio">
    <div class="wrap">
      <div class="text-content">
        <h1>Conecta <span>Verse</span></h1>
        <p>Aprenda, invista e evolua em um metaverso com propósito real.</p>
        <p>O Conecta Verse é uma plataforma inovadora que une educação, gamificação e investimentos descentralizados em um único ecossistema. Ao garantir seu acesso, você entra em uma comunidade exclusiva onde conhecimento gera impacto — e rendimento.</p>
        <p><strong>🎥 Transmissões ao Vivo:</strong> Participe de transmissões com tutores experientes, veja operações reais acontecendo, tire dúvidas ao vivo e acompanhe estratégias aplicadas com foco em Web3, criptoativos e jogos blockchain.</p>
        <p><strong>📊 Transparência Total:</strong> Veja em tempo real onde os recursos da comunidade estão sendo aplicados e acompanhe o rendimento de cada projeto de forma clara, segura e pública.</p>
        <a class="btn-saiba" href="https://instagram.com/conectaverseoficial" target="_blank" rel="noopener">Saiba mais</a>
      </div>

      <div class="hero-image">
        <img src="/assets/imagem/blockchain.png" alt="Imagem Blockchain">
      </div>
    </div>
  </section>

  <!-- Funcionalidades (também full-bleed via ::before) -->
  <section class="section" id="funcionalidades">
    <div class="wrap">
      <h2>🌐 Funcionalidades do Conecta Verse</h2>
      <div class="cards-container">
        <div class="card">
          <h3>🎓 Educação Web3</h3>
          <p>Conteúdo educacional prático sobre Web3, blockchain e investimentos digitais para iniciantes e avançados.</p>
        </div>
        <div class="card">
          <h3>🕹️ Jogos NFT & Metaversos</h3>
          <p>Integração com jogos NFT e metaversos parceiros para aplicar pontos e gerar rendimento real.</p>
        </div>
        <div class="card">
          <h3>📈 Dashboard de Pontos</h3>
          <p>Acompanhe sua performance com gráficos de evolução e rank de usuários em tempo real.</p>
        </div>
        <div class="card">
          <h3>🏆 Recompensas Exclusivas</h3>
          <p>Receba NFTs colecionáveis, prêmios e experiências únicas com base no seu desempenho e nível.</p>
        </div>
        <div class="card">
          <h3>🎥 Plataforma Educacional ao Vivo</h3>
          <p>Lives com tutores experientes para aprender estratégias aplicadas em tempo real (Web3, cripto, jogos NFT).</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Contato -->
  <section class="section" id="contato">
    <div class="wrap" style="text-align:center">
      <h2>Contato</h2>
      <p>📩 Instagram: <a class="link" href="https://instagram.com/conectaverseoficial" target="_blank" rel="noopener">@conectaverseoficial</a></p>
      <p>📧 Email: conectaverse@gmail.com</p>
    </div>
  </section>

  <footer class="footer">
    <div class="wrap" style="text-align:center">
      <p>&copy; 2025 Conecta Verse. Todos os direitos reservados.</p>
    </div>
  </footer>

  <!-- Modal Login -->
  <div class="modal" id="modal-login" aria-hidden="true" role="dialog" aria-labelledby="loginTitle">
    <div class="modal-content" role="document">
      <h3 id="loginTitle">Login</h3>
      <form id="loginForm" autocomplete="off">
        <input type="email" name="email" placeholder="E-mail" required>
        <input type="password" name="senha" placeholder="Senha" required>
        <button type="submit">Entrar</button>
        <div id="loginMsg" class="notice" aria-live="polite"></div>
      </form>
    </div>
    <button class="close-btn" data-close aria-label="Fechar">×</button>
  </div>

  <!-- JS leve -->
  <script>
    (function(){
      const openBtn = document.querySelector('[data-open="login"]');
      const modal = document.getElementById('modal-login');
      const closeBtn = modal?.querySelector('[data-close]');

      function open(){ modal?.setAttribute('aria-hidden','false'); }
      function close(){ modal?.setAttribute('aria-hidden','true'); }

      openBtn?.addEventListener('click', open);
      closeBtn?.addEventListener('click', close);
      modal?.addEventListener('click', (e)=>{ if(e.target === modal) close(); });

      const form = document.getElementById('loginForm');
      form?.addEventListener('submit', (e)=>{
        e.preventDefault();
        const msg = document.getElementById('loginMsg');
        msg.textContent = '🔒 Validando credenciais...';
        setTimeout(()=>{ msg.textContent = '✅ Login integrado ao back-end em breve.'; }, 600);
      });
    })();
  </script>
</body>
</html>
