:root {
 --color-bg: #0a0a0a;
 --color-primary: #c77dff;
 --color-text: #f5f5f5;
 --color-muted: #9a9a9a;
    }
* { 
   margin:0;
   padding:0; 
   box-sizing:border-box; 
    }
    body { 
      font-family: 'Inter', sans-serif; 
      background: var(--color-bg);
       color: var(--color-text);
        line-height:1.6;
   }
    a { 
      text-decoration:none;
       color:inherit; 
    }
    header {
        position:fixed;
        top:0; left:0; right:0;
        background:rgba(10,10,10,.9); 
        backdrop-filter:blur(10px); 
        padding:1rem 2rem;
        display:flex; align-items:center;
        justify-content:space-between;
        z-index:50; 
    }
    nav ul { 
      display:flex;
      gap:2rem;
      list-style:none; 
    }
    .btn { 
      padding:.75rem 1.25rem;
      border-radius:.5rem; 
      font-weight:600; 
      transition:.3s; 
    }
    .btn-primary { 
      background:var(--color-primary); 
      color:#000;
     }
    .btn-outline { 
      border:1px solid var(--color-primary); 
      color:var(--color-primary);
     }
    section {
       padding:6rem 2rem;
        max-width:1200px;
         margin:auto;
         }
    .hero { 
      min-height:100vh; 
      display:flex; 
      flex-direction:column; 
      align-items:center; 
      justify-content:center; text-align:center;
     }
    .hero h1 {
       font-size:3rem;
        font-weight:700;
         margin-bottom:1rem;
         }
    .hero p { 
      max-width:600px;
      margin-bottom:2rem;
      color:var(--color-muted);
       }
    .features { 
      display:grid;
       grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        gap:1.5rem; margin-top:3rem;
       }
    .card {
       padding:2rem;
       background:#111;
       border-radius:1rem; text-align:center;
         }
    .steps { 
      display:grid;
       grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
        gap:1rem; margin-top:3rem;
       }
    .step { 
      padding:1.5rem; 
      border:1px solid #222; border-radius:.75rem;
     }
    footer { 
      background:#111;
      padding:3rem 2rem;
      text-align:center; 
      font-size:.875rem; 
      color:var(--color-muted);
     }
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--color-text);
}

.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* keeps aspect ratio, fills screen */
  z-index: -2;         /* send video to back */
}

.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(10,10,10,0.6); /* dark overlay for readability */
  z-index: -1; /* above video, below text */
}

.hero-overlay {
  position: relative;
  max-width: 800px;
  padding: 2rem;
}