diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..55ce0f4
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,148 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: Arial, sans-serif;
+  color: #1f2937;
+  background:
+    linear-gradient(135deg, rgba(199, 70, 52, 0.12), transparent 38%),
+    linear-gradient(225deg, rgba(31, 41, 55, 0.08), transparent 34%),
+    #f7f7f4;
+}
+
+main {
+  width: min(1120px, 92vw);
+  margin: 0 auto;
+  padding: 40px 0;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 72px;
+}
+
+.oracle-logo {
+  width: 132px;
+  height: auto;
+  flex: 0 0 auto;
+  display: block;
+}
+
+h1 {
+  max-width: 760px;
+  margin: 0;
+  font-size: clamp(2.75rem, 7vw, 5.5rem);
+  line-height: 0.95;
+  letter-spacing: 0;
+  color: #161616;
+}
+
+p {
+  margin: 0;
+  line-height: 1.6;
+}
+
+.header-title {
+  color: #4b5563;
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hero {
+  max-width: 860px;
+}
+
+.eyebrow {
+  margin-bottom: 18px;
+  color: #c74634;
+  font-size: 0.86rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.lead {
+  max-width: 720px;
+  margin-top: 24px;
+  color: #374151;
+  font-size: 1.2rem;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 32px;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 0 20px;
+  border-radius: 4px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.button-primary {
+  color: #ffffff;
+  background: #312d2a;
+}
+
+.button-secondary {
+  color: #312d2a;
+  border: 1px solid #9ca3af;
+  background: rgba(255, 255, 255, 0.58);
+}
+
+.benefits {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-top: 56px;
+}
+
+.benefit {
+  min-height: 150px;
+  padding: 22px;
+  border: 1px solid #dedbd2;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.benefit h2 {
+  margin: 0 0 10px;
+  color: #161616;
+  font-size: 1.05rem;
+}
+
+.benefit p {
+  color: #4b5563;
+  font-size: 0.96rem;
+}
+
+@media (max-width: 720px) {
+  main {
+    padding: 28px 0;
+  }
+
+  .page-header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 48px;
+  }
+
+  .benefits {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/teste.html b/teste.html
index a55d3e7..a69ac81 100644
--- a/teste.html
+++ b/teste.html
@@ -3,55 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Documento Inicial</title>
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      min-height: 100vh;
-      font-family: Arial, sans-serif;
-      color: #1f2937;
-      background: #f3f4f6;
-      display: grid;
-      place-items: center;
-    }
-
-    main {
-      width: min(720px, 92vw);
-      padding: 32px;
-      background: #ffffff;
-      border: 1px solid #e5e7eb;
-      border-radius: 8px;
-      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
-    }
-
-    .page-header {
-      display: flex;
-      align-items: center;
-      gap: 18px;
-      margin-bottom: 12px;
-    }
-
-    .oracle-logo {
-      width: 132px;
-      height: auto;
-      flex: 0 0 auto;
-      display: block;
-    }
-
-    h1 {
-      margin: 0;
-      font-size: 2rem;
-    }
-
-    p {
-      margin: 0;
-      line-height: 1.6;
-    }
-  </style>
+  <title>Oracle Exadata</title>
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <main>
@@ -61,9 +14,40 @@
         src="https://www.oracle.com/a/ocom/img/oracle-logo.svg"
         alt="Oracle"
       >
-      <h1>Pagina inicial</h1>
+      <span class="header-title">Infraestrutura de dados</span>
     </header>
-    <p>Este e um arquivo HTML inicial pronto para receber seu conteudo.</p>
+    <section class="hero" aria-labelledby="page-title">
+      <p class="eyebrow">Banco de dados para cargas críticas</p>
+      <h1 id="page-title">Oracle Exadata</h1>
+      <p class="lead">
+        Oracle Exadata é uma plataforma integrada de hardware e software criada
+        para executar bancos de dados Oracle com alta performance,
+        disponibilidade e segurança, tanto em ambientes locais quanto na nuvem.
+      </p>
+      <div class="actions" aria-label="Acoes principais">
+        <a class="button button-primary" href="https://www.oracle.com/br/engineered-systems/exadata/" target="_blank" rel="noopener">
+          Conhecer Exadata
+        </a>
+        <a class="button button-secondary" href="https://www.oracle.com/br/database/" target="_blank" rel="noopener">
+          Ver soluções Oracle Database
+        </a>
+      </div>
+    </section>
+
+    <section class="benefits" aria-label="Beneficios do Oracle Exadata">
+      <article class="benefit">
+        <h2>Performance extrema</h2>
+        <p>Processamento otimizado para transações, analytics e workloads mistos de missão crítica.</p>
+      </article>
+      <article class="benefit">
+        <h2>Alta disponibilidade</h2>
+        <p>Arquitetura preparada para continuidade, escalabilidade e recuperação em ambientes corporativos.</p>
+      </article>
+      <article class="benefit">
+        <h2>Gestão simplificada</h2>
+        <p>Recursos integrados reduzem complexidade operacional e ajudam equipes a entregar mais valor ao negócio.</p>
+      </article>
+    </section>
   </main>
 </body>
 </html>
