:root{
  --bg: #0f1724;
  --panel: rgba(255,255,255,0.04);
  --muted: #9aa4b2;
  --glass: rgba(255,255,255,0.03);
  --accent: linear-gradient(90deg,#ff6b6b,#ffd166,#06d6a0,#4dabf7,#9b5cf6);
  --radius: 14px;
  --maxw: 1100px;
  --gap: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(155,92,246,0.12), transparent),
              radial-gradient(900px 400px at 90% 90%, rgba(6,214,160,0.07), transparent),
              var(--bg);
  color: #e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding-bottom:60px;
}

/* Header */
.site-header{padding:18px 24px}
.nav{
  max-width:var(--maxw);
  margin:0 auto; display:flex; align-items:center; justify-content:space-between;
}
.logo{font-weight:700; letter-spacing:1px; opacity:0.95}
.nav-actions{display:flex; gap:12px; align-items:center}

/* Buttons */
.btn{
  font-weight:600; padding:10px 16px; border-radius:12px; border:0; cursor:pointer;
  background:transparent; color:inherit; transition:all .18s ease;
  box-shadow: 0 4px 18px rgba(2,6,23,0.5);
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{
  background: linear-gradient(90deg,#6b6bff,#9b5cf6);
  color:white; box-shadow: 0 6px 26px rgba(155,92,246,0.18);
}
.btn-outline{
  border:1px solid rgba(255,255,255,0.06); padding:9px 14px;
}
.btn-cta{padding:14px 20px; border-radius:16px; font-size:1.03rem}
.btn-ghost{background: transparent; border:1px dashed rgba(255,255,255,0.06)}
.btn-small{padding:6px 10px; font-size:.85rem}

/* Hero */
.hero{max-width:var(--maxw); margin:20px auto; padding:28px; text-align:center}
.rainbow-title{
  font-size:clamp(48px,10vw,120px);
  margin:10px 0 8px;
  letter-spacing: -6px;
  line-height:0.9;
  font-weight:900;
  background: linear-gradient(90deg,#ff6b6b,#ffd166,#06d6a0,#4dabf7,#9b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue 6s linear infinite;
  text-transform: lowercase;
  text-shadow: 0 6px 30px rgba(0,0,0,0.35);
}

/* Subtle animated rainbow movement */
@keyframes hue{
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(40deg); }
  100% { filter: hue-rotate(0deg); }
}

.lead{max-width:760px; margin:12px auto; color:var(--muted); font-size:1.05rem}
.cta-row{display:flex; gap:14px; justify-content:center; margin-top:18px}

/* Features */
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:28px}
.card{background:var(--panel); padding:18px; border-radius:12px; text-align:left; box-shadow: 0 6px 30px rgba(2,6,23,0.5)}
.card h3{margin:0 0 8px}

/* Footer */
.site-footer{position:fixed; left:0; right:0; bottom:8px; text-align:center; color:var(--muted)}

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.8)); z-index:60}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:22px; border-radius:16px; width:clamp(320px, 40vw, 520px); box-shadow:0 20px 60px rgba(2,6,23,0.7)}
.modal-close{background:transparent; border:0; font-size:28px; float:right; cursor:pointer; color:var(--muted)}
.form label{display:block; margin:10px 0; color:var(--muted)}
.form input{width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit}
.form-actions{display:flex; gap:10px; margin-top:12px}

/* 404 page */
.error-page{min-height:100vh; display:flex; align-items:center; justify-content:center}
.error-main{max-width:var(--maxw); display:flex; gap:40px; align-items:flex-start; padding:40px}
.error-left{flex:1; color:#f3f7fb}
.error-left h1{font-size:8rem; margin:0; line-height:0.85}
.error-left h2{margin:6px 0 12px}

/* Mel's Hut */
.mels-hut{width:320px; position:relative; transform:translateY(20px); transition:all .25s ease; opacity:0; pointer-events:none}
.mels-hut[aria-hidden="false"]{opacity:1; transform:translateY(0); pointer-events:auto}
.hut-roof{height:24px; background:linear-gradient(90deg,#9b5cf6,#06d6a0); border-radius:6px 6px 0 0}
.hut-body{background:var(--panel); padding:16px; border-radius:8px; box-shadow: 0 8px 30px rgba(2,6,23,0.6)}
.note{color:var(--muted); margin:8px 0}
.hut-foot{display:block; margin-top:10px; color:var(--muted); text-align:right; font-size:. nine rem}

/* Responsiveness */
@media (max-width:800px){
  .error-main{flex-direction:column; align-items:center; text-align:center}
  .mels-hut{width:92%}
  .rainbow-title{letter-spacing:-2px}
}