:root {
    --bg1: #220f27; --bg2: #392043; --bg3: #532c64;
    --text: #e0e0e0; --accent: #b700ff; --hover: #c300ff;
  }
  
  * { margin:0; padding:0; box-sizing:border-box; }
  
  body {
    display:flex; align-items:center; justify-content:center;
    min-height:100vh;
    background: linear-gradient(45deg, var(--bg1), var(--bg2), var(--bg3));
    background-size:600% 600%; animation: gradientBG 15s ease infinite;
    color:var(--text); font-family:'Segoe UI', sans-serif;
  }
  
  @keyframes gradientBG {
    0%{background-position:0% 50%}  
    50%{background-position:100% 50%}  
    100%{background-position:0% 50%}
  }
  
  .container {
    text-align:center; padding:2rem;
    background:rgba(0,0,0,0.6); border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
  }
  
  h1 {
    font-size:3rem; margin-bottom:1rem;
    color:var(--accent); letter-spacing:2px;
    animation: fadeIn 2s ease-out;
  }
  
  p {
    font-size:1.2rem; margin-bottom:2rem;
    animation: fadeIn 2.5s ease-out;
  }
  
  .contact-button {
    display:inline-block; background:var(--accent);
    color:#000; padding:.75rem 1.5rem; border-radius:8px;
    text-decoration:none; font-weight:bold;
    transition:transform .2s, box-shadow .2s;
    animation: fadeIn 3s ease-out;
  }
  
  .contact-button:hover {
    transform:scale(1.05);
    box-shadow:0 4px 15px var(--hover);
  }
  
  @keyframes fadeIn {
    from { opacity:0; transform:translateY(-20px); }
    to   { opacity:1; transform:translateY(0);  }
  }