@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&family=Montserrat:wght@400;500;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(circle at top,#25124a 0%,#10071f 45%,#05020b 100%);color:#f4edff;font-family:Montserrat,sans-serif;min-height:100vh}
header{display:flex;justify-content:space-between;align-items:center;padding:25px 8%;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);backdrop-filter:blur(10px)}
.logo{color:#ffd56b;text-decoration:none;font-family:Cinzel,serif;font-size:22px;font-weight:800;letter-spacing:2px}
nav{display:flex;gap:25px}nav a{color:#ddd;text-decoration:none;transition:.3s}nav a:hover{color:#ffd56b}
.hero{min-height:75vh;display:flex;align-items:center;justify-content:center;gap:100px;padding:60px 10%}.hero-content{max-width:600px}.subtitle{color:#c89bff;margin-bottom:20px;text-transform:uppercase;letter-spacing:4px}.hero h1{font-family:Cinzel,serif;font-size:clamp(60px,10vw,120px);line-height:.9;margin-bottom:30px}.hero h1 span{color:#ffd56b}.hero-text{font-size:19px;line-height:1.8;color:#d8d0e5;margin-bottom:35px}
.button{display:inline-block;padding:16px 30px;background:linear-gradient(135deg,#d28bff,#ffb347);color:#16071f;text-decoration:none;font-weight:bold;border-radius:40px;transition:.3s}.button:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(255,180,80,.35)}
.dragon{font-size:250px;filter:drop-shadow(0 0 40px rgba(255,130,40,.5));animation:fly 4s ease-in-out infinite}@keyframes fly{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
.intro{padding:100px 10%;text-align:center;background:rgba(255,255,255,.03)}.intro h2,.page h1{font-family:Cinzel,serif;font-size:45px;color:#ffd56b;margin-bottom:25px}.intro>p{max-width:700px;margin:auto;color:#cfc6db;line-height:1.8}
.cards,.powers,.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px}.cards{max-width:1000px;margin:60px auto 0}.card,.power-card{padding:35px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:.3s}.card:hover,.power-card:hover{transform:translateY(-8px);background:rgba(255,255,255,.08)}.icon{font-size:55px;margin-bottom:20px}.card h3,.power-card h2{margin-bottom:15px;color:#ffd56b}.card p,.power-card p{color:#bdb4c9;line-height:1.7}
.page{max-width:1000px;margin:auto;padding:100px 30px;min-height:75vh;text-align:center}.story{max-width:750px;margin:auto;text-align:left;font-size:18px;line-height:1.9;color:#d8d0e5}.story h2{color:#ffd56b;margin:50px 0 20px;font-family:Cinzel,serif}.story p{margin-bottom:20px}.highlight{font-size:28px;color:#ffcf68;font-family:Cinzel,serif;text-align:center}.big-icon{font-size:70px;margin-bottom:20px}.gallery-description{color:#cfc6db;margin-bottom:50px}.gallery-item{min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,rgba(119,51,160,.5),rgba(20,10,40,.8));border-radius:20px;border:1px solid rgba(255,255,255,.08);transition:.3s}.gallery-item:hover{transform:scale(1.04)}.gallery-item span{font-size:80px;margin-bottom:20px}
form{max-width:600px;margin:auto;display:flex;flex-direction:column;text-align:left;gap:12px}label{color:#ffd56b;margin-top:15px}input,textarea{padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:white;font-size:16px}textarea{min-height:160px;resize:vertical}button{margin-top:20px;padding:17px;border:none;border-radius:40px;background:linear-gradient(135deg,#d28bff,#ffb347);font-weight:bold;font-size:16px;cursor:pointer;transition:.3s}button:hover{transform:translateY(-3px)}#result{text-align:center;margin-top:20px;color:#ffd56b}footer{text-align:center;padding:30px;color:#83798f;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:800px){header{flex-direction:column;gap:25px}nav{flex-wrap:wrap;justify-content:center;gap:15px}.hero{flex-direction:column;text-align:center;gap:30px}.dragon{font-size:170px}.hero h1{font-size:65px}}