*{box-sizing:border-box}
body{
 margin:0;
 font-family:Inter,system-ui;
 background:radial-gradient(1200px 600px at 50% -20%,#1a3cff44,#050b14);
 color:#eaf0ff;
 overflow-x:hidden;
}
canvas#wave{position:fixed;inset:0;z-index:-1}

.nav{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:28px 64px;
}
.logo{
 font-size:24px;
 font-weight:800;
}
.logo span{color:#4f7cff}

.hero{
 max-width:860px;
 margin:140px auto 120px;
 text-align:center;
}
.hero h1{
 font-size:52px;
 font-weight:800;
 margin-bottom:20px;
}
.hero p{
 font-size:18px;
 opacity:.85;
 margin-bottom:40px;
}

.pricing{
 display:flex;
 justify-content:center;
 gap:32px;
 margin-bottom:140px;
}
.price-card{
 width:280px;
 background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
 border:1px solid rgba(255,255,255,.1);
 padding:36px;
 border-radius:24px;
 text-align:center;
 transition:.35s;
 backdrop-filter:blur(12px);
}
.price-card:hover{transform:translateY(-8px)}
.price-card.highlight{outline:2px solid #4f7cff}
.price{
 font-size:38px;
 font-weight:700;
 margin:14px 0;
}

.btn{
 display:inline-flex;
 justify-content:center;
 align-items:center;
 padding:12px 22px;
 border-radius:14px;
 font-weight:600;
 border:none;
 cursor:pointer;
 transition:.25s;
 text-decoration:none;
}
.btn.primary{
 background:linear-gradient(135deg,#4f7cff,#2b5bff);
 color:white;
}
.btn.outline{
 background:none;
 border:1px solid #4f7cff;
 color:#4f7cff;
}
.btn.large{padding:16px 30px;font-size:16px}
.btn.full{width:100%}

.footer{
 text-align:center;
 padding:40px;
 opacity:.5;
 font-size:14px;
}

.modal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.7);
 display:none;
 align-items:center;
 justify-content:center;
 backdrop-filter:blur(10px);
}

.modal-card{
 width:360px;
 background:#0c1730;
 padding:42px;
 border-radius:24px;
 display:flex;
 flex-direction:column;
 gap:16px;
}

.modal-card.modern{
 background:rgba(15,23,53,.9);
 box-shadow:0 25px 80px rgba(0,0,0,.65);
}

.modal-card input{
 padding:14px;
 border-radius:12px;
 border:none;
 background:#0a1225;
 color:white;
}

.reveal{
 opacity:0;
 transform:translateY(30px) scale(.97);
 transition:1s cubic-bezier(.2,.8,.2,1);
}
.reveal.show{
 opacity:1;
 transform:none;
}

/* =================================
   LOGIN MODAL FIXES (IMPORTANT)
================================= */

.login-fields,
.login-success{
 width:100%;
}

/* Hide success UI by default */
.login-success{
 display:none;
 text-align:center;
 margin-top:20px;
}

/* Success checkmark */
.checkmark{
 width:64px;
 height:64px;
 margin:0 auto;
 border-radius:50%;
 background:linear-gradient(135deg,#4f7cff,#2b5bff);
 color:white;
 font-size:34px;
 display:flex;
 align-items:center;
 justify-content:center;
 animation:pop .4s ease;
}

@keyframes pop{
 from{transform:scale(.5);opacity:0}
 to{transform:scale(1);opacity:1}
}

/* Password toggle */
.password-group{
 position:relative;
}

.toggle-password{
 position:absolute;
 right:14px;
 top:50%;
 transform:translateY(-50%);
 cursor:pointer;
 opacity:.7;
}

.toggle-password:hover{
 opacity:1;
}

/* Forgot password link */
.forgot{
 font-size:13px;
 color:#8fa1ff;
 text-decoration:none;
 text-align:right;
 margin-bottom:6px;
}

.forgot:hover{
 text-decoration:underline;
}

/* Mobile safety */
@media (max-width:480px){
 .modal-card{
  width:92%;
  padding:32px;
 }
}

/* FORCE hide success UI */
.login-success {
  display: none !important;
}

/* ===============================
   MOBILE RESPONSIVE FIXES
================================ */

@media (max-width: 768px) {

  /* General spacing */
  body {
    overflow-x: hidden;
  }

  /* Navbar */
  .nav {
    padding: 18px 20px;
  }

  .logo {
    font-size: 20px;
  }

  .nav .btn {
    padding: 10px 18px;
    font-size: 14px;
  }

  /* Hero section */
  .hero {
    margin: 100px auto 80px;
    padding: 0 20px;
  }

  .hero h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .hero p {
    font-size: 15px;
  }

  /* Pricing cards stack */
  .pricing {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 100px;
  }

  .price-card {
    width: 100%;
    max-width: 340px;
  }

  /* Buttons */
  .btn.large {
    width: 100%;
  }

  /* Modal */
  .modal {
    padding: 20px;
  }

  .modal-card {
    width: 100%;
    max-width: 380px;
    padding: 28px;
    border-radius: 20px;
  }

  /* Inputs */
  .modal-card input {
    font-size: 14px;
  }

  /* Login success text */
  .login-success h3 {
    font-size: 18px;
  }

  .login-success p {
    font-size: 13px;
  }

  /* Footer */
  .footer {
    padding: 30px 16px;
    font-size: 13px;
  }
}

/* Extra small phones */
@media (max-width: 420px) {

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 14px;
  }

  .modal-card {
    padding: 24px;
  }
}

/* ===== MODAL ANIMATIONS (ADD-ONLY) ===== */

.modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

.modal .modal-card {
  transform: scale(.95) translateY(10px);
  transition: transform .25s ease;
}

.modal.show .modal-card {
  transform: scale(1) translateY(0);
}