body{margin:0;font-family:Inter, system-ui,

 

<style>

  /* ====== Base ====== */

  :root{

    --bg:#0b1020; --card:#071024; --glass: rgba(255,255,255,0.06);

    --accent1: #A78BFA; --accent2:#7C3AED; --muted: #94A3B8; --glass-border: rgba(255,255,255,0.08);

    --glass-blur: 10px;

  }

  *{box-sizing:border-box}

  body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:#e6eef8;background: radial-gradient(1200px 600px at 10% 20%, rgba(124,58,237,0.12), transparent 12%), radial-gradient(1000px 500px at 90% 80%, rgba(15,185,177,0.06), transparent 12%), var(--bg); -webkit-font-smoothing:antialiased;}

  a{color:inherit;text-decoration:none}

  .container{max-width:1200px;margin:0 auto;padding:28px}

  .row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}

  .col{flex:1}

  .right{margin-left:auto}

  .muted{color:var(--muted)}

  .btn{background:linear-gradient(90deg,var(--accent1),var(--accent2));border:none;color:white;padding:12px 18px;border-radius:12px;font-weight:600;cursor:pointer;box-shadow:0 8px 30px rgba(124,58,237,0.18)}

  .ghost{background:transparent;border:1px solid var(--glass-border);padding:10px 14px;border-radius:10px;color:var(--muted);cursor:pointer}

  .nav{display:flex;align-items:center;padding:18px 0}

  .brand{font-family:'Playfair Display', serif;font-size:1.4rem;font-weight:700;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}

  .nav a{margin-left:18px;color:var(--muted);font-weight:600}

  .hero{padding:48px 0}

  .hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:18px;padding:36px;border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur));box-shadow:0 20px 60px rgba(2,6,23,0.6)}

  h1{font-family:Playfair Display, serif;font-size:32px;line-height:1.2;margin:0 0 14px}

  p.lead{color:var(--muted);margin:0 0 20px}

  .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:24px}

  .feature{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:12px;border:1px solid var(--glass-border);}

  .feature h4{margin:0 0 8px}

  .feature p{margin:0;color:var(--muted)}

  footer{margin-top:48px;padding:28px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}

</style>

<div class="container">

  <nav class="nav">

    <div class="brand">Luxora</div>

    <div class="right">

      <a href="#features">Fitur</a>

      <a href="#contact">Kontak</a>

      <button class="btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Hubungi Kami</button>

    </div>

  </nav>

  <section class="hero">

    <div class="hero-card">

      <h1>Website Mewah untuk Bisnis Anda</h1>

      <p class="lead">Desain premium, responsif, dan siap membuat brand Anda terlihat elegan.</p>

      <div class="features">

        <div class="feature">

          <h4>Desain Elegan</h4>

          <p>Tampilan modern dengan efek glassmorphism dan tipografi premium.</p>

        </div>

        <div class="feature">

          <h4>Mobile Friendly</h4>

          <p>Responsif di semua perangkat — dari smartphone sampai desktop.</p>

        </div>

        <div class="feature">

          <h4>Mudah Dikustomisasi</h4>

          <p>Ubah warna, font, dan konten sesuai brand Anda.</p>

        </div>

      </div>

    </div>

  </section>

  <section id="contact" style="margin-top:28px">

    <h3>Kontak</h3>

    <form onsubmit="alert('Terima kasih, pesan Anda telah terkirim!'); return false;" style="margin-top:12px">

      <input type="text" placeholder="Nama" style="width:100%;padding:10px;margin-bottom:10px;border-radius:10px;border:1px solid var(--glass-border);background:transparent;color:inherit" required>

      <input type="email" placeholder="Email" style="width:100%;padding:10px;margin-bottom:10px;border-radius:10px;border:1px solid var(--glass-border);background:transparent;color:inherit" required>

      <textarea placeholder="Pesan" rows="4" style="width:100%;padding:10px;border-radius:10px;border:1px solid var(--glass-border);background:transparent;color:inherit"></textarea>

      <button type="submit" class="btn" style="margin-top:12px">Kirim</button>

    </form>

  </section>

  <footer>

    <div>© 2025 Luxora — All rights reserved.</div>

  </footer>

</div>