<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="TechSphere Studio: Soluções digitais de alta performance construídas com HTML5 semântico e padrões modernos.">
  <title>TechSphere Studio — Inovação & Engenharia Web</title>
  
  <style>
    /* Variáveis de Design & Reset Moderno */
    :root {
      --bg-dark: #0b1120;
      --card-bg: #0f172a;
      --border-color: #1e293b;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --accent: #38bdf8;
      --accent-hover: #0284c7;
      --success: #10b981;
    }
 
    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: var(--bg-dark);
      color: var(--text-main);
      line-height: 1.6;
    }
 
    /* Acessibilidade: Skip Link para Teclado */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 16px;
      background: var(--accent);
      color: #000;
      padding: 10px 18px;
      font-weight: 700;
      text-decoration: none;
      border-radius: 4px;
      z-index: 9999;
      transition: top 0.2s;
    }
    .skip-link:focus { top: 16px; outline: 3px solid #fff; }
 
    /* Indicador Universal de Foco Visível */
    a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
    }
 
    .container {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
    }
 
    /* Topo & Navegação */
    .site-header {
      background-color: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .nav-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
    }
    .brand-logo {
      font-size: 1.3rem;
      font-weight: 800;
      color: #fff;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .brand-logo svg { width: 28px; height: 28px; color: var(--accent); }
    .main-nav ul { display: flex; list-style: none; gap: 20px; }
    .main-nav a {
      color: var(--text-muted);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }
    .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--accent); }
 
    /* Seção Hero Principal */
    .hero-section {
      padding: 70px 0;
      text-align: center;
    }
    .hero-section h1 {
      font-size: 2.8rem;
      line-height: 1.2;
      margin-bottom: 20px;
      color: #fff;
    }
    .hero-section p {
      font-size: 1.2rem;
      color: var(--text-muted);
      max-width: 680px;
      margin: 0 auto 30px;
    }
    .btn-cta {
      display: inline-block;
      background-color: var(--accent);
      color: #0f172a;
      padding: 14px 28px;
      font-size: 1.05rem;
      font-weight: 700;
      text-decoration: none;
      border-radius: 8px;
      transition: background 0.2s;
    }
    .btn-cta:hover { background-color: var(--accent-hover); }
 
    /* Seção de Recursos (Cards em Grid) */
    .features-section { padding: 60px 0; }
    .section-title {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 40px;
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }
    .feature-card {
      background-color: var(--card-bg);
      border: 1px solid var(--border-color);
      padding: 24px;
      border-radius: 8px;
    }
    .feature-card h2 {
      font-size: 1.25rem;
      margin: 12px 0 8px;
      color: #fff;
    }
    .feature-card p { color: var(--text-muted); font-size: 0.95rem; }
 
    /* Seção de Mídia Nativa */
    .media-section {
      padding: 60px 0;
      background-color: #090e17;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .video-wrapper {
      max-width: 800px;
      margin: 0 auto;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border-color);
    }
    .video-wrapper video {
      width: 100%;
      aspect-ratio: 16 / 9;
      display: block;
    }
 
    /* Seção de FAQ (Sanfona semântica com details/summary) */
    .faq-section { padding: 60px 0; max-width: 760px; margin: 0 auto; }
    details {
      background-color: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      margin-bottom: 12px;
      padding: 14px 18px;
      cursor: pointer;
    }
    summary {
      font-weight: 600;
      color: #fff;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    summary::after { content: "＋"; color: var(--accent); font-size: 1.2rem; }
    details[open] summary::after { content: "−"; }
    details p {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border-color);
      color: var(--text-muted);
      font-size: 0.95rem;
    }
 
    /* Seção de Formulário Validado */
    .contact-section { padding: 60px 0; }
    .form-card {
      max-width: 620px;
      margin: 0 auto;
      background-color: var(--card-bg);
      border: 1px solid var(--border-color);
      padding: 30px;
      border-radius: 8px;
    }
    .form-group { margin-bottom: 20px; }
    .form-group label {
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
      font-size: 0.95rem;
    }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%;
      padding: 12px 14px;
      background-color: var(--bg-dark);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: #fff;
      font-size: 1rem;
    }
    .form-group input:user-invalid { border-color: #ef4444; }
    .form-group input:user-valid { border-color: var(--success); }
    .help-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; display: block; }
    .btn-submit {
      width: 100%;
      padding: 14px;
      background-color: var(--success);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 1.05rem;
      font-weight: 700;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .btn-submit:hover { opacity: 0.9; }
 
    /* Rodapé */
    .site-footer {
      background-color: #060a12;
      padding: 40px 0;
      border-top: 1px solid var(--border-color);
      text-align: center;
      color: var(--text-muted);
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
 
  <!-- 1. Skip Link de Acessibilidade -->
  <a href="#conteudo-principal" class="skip-link">Pular para o conteúdo principal →</a>
 
  <!-- 2. Cabeçalho Semântico com Logotipo e Navegação -->
  <header class="site-header">
    <div class="container nav-wrapper">
      <a href="#" class="brand-logo" aria-label="Página Inicial TechSphere">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
          <polyline points="2 17 12 22 22 17"></polyline>
          <polyline points="2 12 12 17 22 12"></polyline>
        </svg>
        <span>TechSphere</span>
      </a>
      <nav class="main-nav" aria-label="Menu Principal">
        <ul>
          <li><a href="#recursos">Recursos</a></li>
          <li><a href="#demonstracao">Demonstração</a></li>
          <li><a href="#faq">Dúvidas</a></li>
          <li><a href="#contato">Contato</a></li>
        </ul>
      </nav>
    </div>
  </header>
 
  <!-- 3. Conteúdo Principal da Aplicação -->
  <main id="conteudo-principal" tabindex="-1">
 
    <!-- Hero Section com H1 Único -->
    <section class="hero-section container">
      <h1>Construa o Futuro com HTML5 Semântico e Acessível</h1>
      <p>Projetamos interfaces digitais ultrarrápidas, resilientes e preparadas para todos os dispositivos, unindo os mais modernos padrões W3C às melhores práticas de SEO.</p>
      <a href="#contato" class="btn-cta">Iniciar Meu Projeto Agora →</a>
    </section>
 
    <!-- Seção de Recursos em Artigos Independentes -->
    <section id="recursos" class="features-section container">
      <h2 class="section-title">Recursos de Alta Engenharia</h2>
      <div class="features-grid">
        <article class="feature-card">
          <span style="font-size: 2rem;" aria-hidden="true">⚡</span>
          <h3>Desempenho Extremo</h3>
          <p>Marcação limpa sem bibliotecas pesadas de terceiros, garantindo pontuações máximas no Google Core Web Vitals.</p>
        </article>
 
        <article class="feature-card">
          <span style="font-size: 2rem;" aria-hidden="true">♿</span>
          <h3>Acessibilidade WCAG 2.2</h3>
          <p>Navegação completa por teclado, compatibilidade total com leitores de tela e estrutura inclusiva para todas as pessoas.</p>
        </article>
 
        <article class="feature-card">
          <span style="font-size: 2rem;" aria-hidden="true">📱</span>
          <h3>Direção de Arte com &lt;picture&gt;</h3>
          <p>Imagens adaptáveis em formatos modernos de última geração como WebP e AVIF com economia de até 70% de dados móveis.</p>
        </article>
      </div>
    </section>
 
    <!-- Seção Multimídia com Vídeo Nativo -->
    <section id="demonstracao" class="media-section">
      <div class="container">
        <h2 class="section-title">Demonstração em Vídeo Nativo</h2>
        <div class="video-wrapper">
          <video controls poster="https://webzoneware.com/wp-content/themes/astra-child/assets/images/logo.png" preload="metadata">
            <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
            <p>Seu navegador não possui suporte para reproduzir este vídeo nativamente.</p>
          </video>
        </div>
      </div>
    </section>
 
    <!-- Seção de Dúvidas Frequentes (FAQ) com Tags details/summary -->
    <section id="faq" class="faq-section container">
      <h2 class="section-title">Perguntas Frequentes</h2>
      
      <details>
        <summary>Por que o HTML semântico é tão importante para o SEO?</summary>
        <p>Robôs de indexação como o Googlebot utilizam as tags semânticas para identificar a hierarquia e o peso dos conteúdos, priorizando páginas bem estruturadas no ranqueamento orgânico.</p>
      </details>
 
      <details>
        <summary>A validação nativa de formulários do HTML5 é segura?</summary>
        <p>A validação no HTML5 é perfeita para melhorar a experiência do usuário (UX), mas nunca substitui a validação estrita no servidor (Back-End) para garantir a segurança dos dados.</p>
      </details>
    </section>
 
    <!-- Seção de Contato com Validações Nativas Avançadas -->
    <section id="contato" class="contact-section container">
      <div class="form-card">
        <h2 style="text-align: center; margin-bottom: 24px; color: #fff;">Fale com Nossa Equipe</h2>
        
        <form action="/api/contato" method="POST">
          <div class="form-group">
            <label for="nomeCliente">Nome Completo *</label>
            <input 
              type="text" 
              id="nomeCliente" 
              name="nome" 
              required 
              minlength="3" 
              placeholder="Ex: Mariana Albuquerque" 
              autocomplete="name">
          </div>
 
          <div class="form-group">
            <label for="emailCliente">E-mail Corporativo *</label>
            <input 
              type="email" 
              id="emailCliente" 
              name="email" 
              required 
              placeholder="[email protected]" 
              autocomplete="email">
          </div>
 
          <div class="form-group">
            <label for="servicoDesejado">Área de Interesse *</label>
            <input 
              list="opcoesServicos" 
              id="servicoDesejado" 
              name="servico" 
              required 
              placeholder="Selecione ou digite...">
            <datalist id="opcoesServicos">
              <option value="Auditoria de Acessibilidade WCAG"></option>
              <option value="Otimização Core Web Vitals"></option>
              <option value="Desenvolvimento de Landing Pages"></option>
              <option value="Consultoria em Arquitetura Front-End"></option>
            </datalist>
          </div>
 
          <div class="form-group">
            <label for="mensagemTexto">Detalhes do Projeto *</label>
            <textarea 
              id="mensagemTexto" 
              name="mensagem" 
              rows="4" 
              required 
              minlength="20" 
              placeholder="Descreva brevemente os objetivos da sua aplicação..."></textarea>
            <small class="help-text">Mínimo de 20 caracteres.</small>
          </div>
 
          <button type="submit" class="btn-submit">Enviar Proposta de Projeto →</button>
        </form>
      </div>
    </section>
 
  </main>
 
  <!-- 4. Rodapé Semântico com Direitos Autorais e Políticas -->
  <footer class="site-footer">
    <div class="container">
      <p>&copy; 2026 TechSphere Studio. Desenvolvido com os mais altos padrões da Web Academy | Web-ZoneWare</p>
      <p style="margin-top: 8px; font-size: 0.8rem;">Todos os direitos reservados &bull; Código limpo, semântico e 100% acessível.</p>
    </div>
  </footer>
 
</body>
</html>