<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultra Premium Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&#038;display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:#0b0f19;color:#fff;line-height:1.6;overflow-x:hidden;}
/* HERO */
.hero{
  position:relative;text-align:center;overflow:hidden;background:#020617;padding:140px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.hero::before{
  content:"";position:absolute;width:700px;height:700px;top:50%;left:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#00c6ff55,#0072ff22,transparent 70%);filter:blur(100px);animation:moveGlow 10s linear infinite;z-index:0;
}
.hero::after{
  content:"";position:absolute;width:800px;height:800px;top:50%;left:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#8b5cf655,#00c6ff22,transparent 70%);filter:blur(120px);animation:moveGlowReverse 12s linear infinite;z-index:0;
}
@keyframes moveGlow{
  0%{transform:translate(-50%,-50%) rotate(0deg);}
  100%{transform:translate(-50%,-50%) rotate(360deg);}
}
@keyframes moveGlowReverse{
  0%{transform:translate(-50%,-50%) rotate(360deg);}
  100%{transform:translate(-50%,-50%) rotate(0deg);}
}
.hero-content{position:relative;z-index:2;max-width:900px;}
.hero-badge{display:inline-block;padding:8px 20px;border-radius:25px;background:rgba(255,255,255,0.15);margin-bottom:25px;font-size:14px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:1px;}
.hero h1{
  font-size:60px;margin-bottom:20px;color:#fff;line-height:1.2;
  text-shadow:0 0 20px rgba(0,198,255,0.5);
}
.hero p{color:#fff;max-width:700px;margin:auto;margin-bottom:40px;font-size:18px;text-shadow:0 0 10px rgba(0,198,255,0.2);}
.hero-btn{
  padding:16px 40px;border:none;border-radius:30px;background:linear-gradient(45deg,#00c6ff,#0072ff);color:#fff;cursor:pointer;
  box-shadow:0 0 40px rgba(0,198,255,0.6);transition:0.3s;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:1px;
}
.hero-btn:hover{transform:scale(1.08);box-shadow:0 0 70px rgba(0,198,255,0.9);}
.hero-img{margin-top:70px;position:relative;display:flex;justify-content:center;animation:float 6s ease-in-out infinite;}
.hero-img::before{content:"";position:absolute;width:320px;height:320px;background:radial-gradient(circle,#00c6ff88,#0072ff33,transparent);border-radius:50%;filter:blur(70px);z-index:0;}
.hero-img img{width:280px;border-radius:20px;position:relative;z-index:1;box-shadow:0 0 120px rgba(0,150,255,0.6);}
@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-20px);}}
/* FEATURES */
.features{padding:80px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px;background:#020617;}
.card{padding:30px;border-radius:20px;background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);transition:0.5s;position:relative;overflow:hidden;text-align:center;}
.card::before{content:"";position:absolute;width:200%;height:200%;background:linear-gradient(45deg,#00c6ff,#0072ff,#00ffcc);top:-50%;left:-50%;opacity:0;transition:0.5s;}
.card:hover::before{opacity:0.15;}
.card:hover{transform:translateY(-12px) scale(1.03);}
.card h3{margin-bottom:10px;color:#fff;}
.card p{color:#bbb;}
/* SHOWCASE */
.showcase{padding:80px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:40px;background:#020617;}
.showcase img{width:100%;max-width:380px;border-radius:20px;box-shadow:0 0 100px rgba(0,198,255,0.4);transition:transform 0.4s;}
.showcase img:hover{transform:scale(1.05);}
.showcase-text{flex:1;min-width:280px;}
.showcase-text h2{font-size:40px;margin-bottom:15px;color:#fff;}
.showcase-text p{color:#bbb;}
/* TESTIMONIAL */
.testimonial{padding:80px 20px;text-align:center;background:#0c1122;}
.testimonial h2{font-size:36px;margin-bottom:40px;color:#fff;}
.testimonial-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;}
.testimonial-card{background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);padding:30px;border-radius:20px;max-width:300px;transition:0.3s;position:relative;}
.testimonial-card:hover{transform:scale(1.03);box-shadow:0 0 40px rgba(0,198,255,0.3);}
.testimonial-card p{color:#bbb;margin-bottom:15px;}
.testimonial-card h4{color:#fff;}
/* PRICING */
.pricing{padding:80px 20px;text-align:center;background:#020617;}
.pricing h2{font-size:36px;margin-bottom:40px;color:#fff;}
.pricing-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;}
.pricing-card{background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);padding:30px;border-radius:20px;min-width:250px;transition:0.3s;position:relative;}
.pricing-card:hover{transform:scale(1.03);box-shadow:0 0 50px rgba(0,198,255,0.3);}
.pricing-card h3{margin-bottom:10px;color:#fff;}
.pricing-card p{color:#bbb;}
.pricing-card span{font-size:28px;font-weight:700;color:#00c6ff;display:block;margin:15px 0;}
/* NEWSLETTER */
.newsletter{padding:60px 20px;text-align:center;background:#0c1122;}
.newsletter h2{font-size:32px;margin-bottom:20px;color:#fff;}
.newsletter p{color:#bbb;margin-bottom:20px;}
.newsletter input[type="email"]{padding:12px 20px;border-radius:30px;border:none;width:250px;max-width:80%;margin-right:10px;}
.newsletter button{padding:12px 25px;border:none;border-radius:30px;background:linear-gradient(45deg,#00c6ff,#0072ff);color:#fff;cursor:pointer;box-shadow:0 0 30px rgba(0,198,255,0.5);transition:0.3s;}
.newsletter button:hover{transform:scale(1.05);box-shadow:0 0 50px rgba(0,198,255,0.7);}
/* FOOTER */
footer{text-align:center;padding:30px 20px;background:#05070d;color:#777;}
/* RESPONSIVE */
@media(max-width:768px){
  .hero h1{font-size:36px;}
  .showcase-text h2{font-size:28px;}
  .hero-img img{width:200px;}
  .testimonial h2,.pricing h2,.newsletter h2{font-size:28px;}
  .pricing-card{min-width:200px;}
}
</style>
</head>
<body>
<!-- HERO -->
<section>
    ✨ Future UI
    <h1>Next Gen Premium Experience</h1>
    <p>Deep glowing background, center spotlight, animated floating hero image — premium high-end feel.</p>
    <button>Get Started</button>
      <img decoding="async" src="https://images.unsplash.com/photo-1615634260167-c8cdede054de" alt="product">
</section>
<!-- FEATURES -->
<section>
    <h3>âš¡ Ultra Fast</h3>
    <p>Optimized for performance across all devices.</p>
    <h3>📱 Fully Responsive</h3>
    <p>Looks perfect on mobile, tablet, and desktop.</p>
    <h3>🎨 Premium Design</h3>
    <p>Glassmorphism + glowing gradient cards with hover effects.</p>
</section>
<!-- SHOWCASE -->
<section>
  <img decoding="async" src="https://images.unsplash.com/photo-1596462502278-27bfdc403348" alt="showcase">
    <h2>Luxury Look & Feel</h2>
    <p>Animated glowing elements, floating hero image, gradient text — gives high-end premium brand experience.</p>
</section>
<!-- TESTIMONIAL -->
<section>
  <h2>What Our Users Say</h2>
      <p>"Absolutely stunning design and animation. Our users love it!"</p>
      <h4>— Alex R.</h4>
      <p>"This landing page gives our brand a high-end premium feel."</p>
      <h4>— Sarah M.</h4>
      <p>"The animations and glowing effects are just perfect!"</p>
      <h4>— John D.</h4>
</section>
<!-- PRICING -->
<section>
  <h2>Pricing Plans</h2>
      <h3>Basic</h3>
      $29/mo
      <p>Essential features for small teams</p>
      <h3>Pro</h3>
      $59/mo
      <p>Advanced features for growing businesses</p>
      <h3>Enterprise</h3>
      $99/mo
      <p>All features for large organizations</p>
</section>
<!-- NEWSLETTER -->
<section>
  <h2>Stay Updated</h2>
  <p>Subscribe to our newsletter for latest updates</p>
  <input type="email" placeholder="Enter your email">
  <button>Subscribe</button>
</section>
<!-- FOOTER -->
<footer>
  <p>© 2026 Brand. All rights reserved.</p>
</footer>
</body>
</html>