:root{
      --bg: #07130b;
      --card: rgba(255,255,255,.08);
      --line: rgba(255,255,255,.12);
      --text: rgba(255,255,255,.86);
      --muted: rgba(255,255,255,.65);
      --brand: #57d27a;
      --brand2: #10b981;
    }

    html, body { font-family: "Poppins","Zain", system-ui, -apple-system, Segoe UI, Roboto, Arial; }
    /* body { background: #0b0f0d; color: #111; font-size: 15px; } */

    /* NAV */
    .nav-blur{
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(8, 12, 10, .70);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    /* HERO */
    .hero {
      position: relative;
      min-height: 92vh;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: radial-gradient(1200px 700px at 10% 10%, rgba(87,210,122,.18), transparent 60%),
                  radial-gradient(900px 600px at 90% 20%, rgba(16,185,129,.14), transparent 55%),
                  linear-gradient(180deg, #061009 0%, #0b0f0d 75%);
      color: #fff;
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.15)),
        url("../img/hero-banner-3.jpg") center/cover no-repeat;
      filter: saturate(1.1) contrast(1.05);
      transform: scale(1.04);
      z-index: 0;
    }

    .hero-content { position: relative; z-index: 1; }

    .pill {
      display:inline-flex;
      gap:.5rem;
      align-items:center;
      padding:.35rem .75rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      color: var(--text);
      font-size: .9rem;
    }

    .hero h1{
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.05;
    }

    .hero-sub{
      color: var(--text);
      max-width: 60ch;
    }

    .hero-card{
      color: var(--bg);
      /* background-color: #fff; */
       backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.74);
      background: rgba(255, 255, 255, 0.9); 
      border-radius: 18px;
      padding: 1.25rem;
    }

    .btn-brand{
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      border: 0;
      color: #052010;
      font-weight: 700;
      border-radius: 12px;
      padding: .85rem 1.05rem;
    }
    .btn-brand:hover{ filter: brightness(.95); }
    .btn-ghost{
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.06);
      color: #fff;
      border-radius: 12px;
      padding: .85rem 1.05rem;
      font-weight: 600;
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.10); color: #fff; }

    /* SECTIONS */
    .section{
      padding: 80px 0;
    }
    .section-title{
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .section-lead{ color: #556; max-width: 70ch; }

    .glass{
      background: rgba(255,255,255,.70);
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 18px;
      box-shadow: 0 18px 60px rgba(0,0,0,.08);
    }

    .feature{
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.06);
      background: #fff;
      box-shadow: 0 10px 35px rgba(0,0,0,.06);
      overflow: hidden;
      height: 100%;
    }
    .feature .icon{
     
      display:grid; place-items:center;
      border-radius: 14px;
      background: rgba(87,210,122,.18);
      color: #0b6b3a;
    }

    /* CLOSED BOX */
    .closed{
      border-radius: 22px;
      border: 1px solid rgba(0,0,0,.08);
      background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(87,210,122,.10));
      overflow: hidden;
    }
    .closed .badge{
      background: rgba(16,185,129,.18) !important;
      color: #0b6b3a !important;
    }

    /* GALLERY */
    .gallery a{ display:block; border-radius: 18px; overflow:hidden; }
    .gallery img{
      width: 100%;
      height: 230px;
      object-fit: cover;
      transition: transform .35s ease;
    }
    .gallery a:hover img{ transform: scale(1.05); }

    /* FOOTER */
    footer{
      background: #061009;
      color: rgba(255,255,255,.86);
      border-top: 1px solid rgba(255,255,255,.08);
    }
    footer a{ color: rgba(255,255,255,.78); text-decoration: none; }
    footer a:hover{ color: #fff; }

    /* Animations: elements start hidden, GSAP reveals */
    .reveal { opacity: 0; transform: translateY(16px); }


    .hero-card .form-control,
.hero-card .form-select,
.hero-card .input-group-text{
 border-color: rgba(37, 37, 37, 0.18) !important; 
}
.hero-card .form-control,
.hero-card .form-select{
  background: rgba(255,255,255,.06) !important;
  /* color: #fff !important; */
}
.hero-card .form-control::placeholder{
  /* color: rgba(255,255,255,.55) !important; */
}
.hero-card .btn-outline-light{
  color: var(--brand2);
   border-color:var(--brand2) !important; 
}
.hero-card .btn-check:checked + .btn-outline-light{
  background: rgba(87,210,122) !important;
  border-color: rgb(63, 216, 106) !important;
}