:root{
      --bg:#3c50715c;
      --card:#45536f00;
      --muted:#9aa4b2;
      --accent1:#7c3aed;
      --accent2:#06b5d4;
      --glass: rgba(132, 127, 127, 0.525);
      --radius:14px;
      --maxw:1100px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    .bdy1 {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, rgb(21, 26, 45) 0%, rgb(48, 71, 112) 100%) fixed;
  color: #e6eef6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
  padding: 0;
  min-height: 100vh;
}

     
    .container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto; /* center horizontally */
  padding: 1rem; /* optional for better spacing */
}


     header.site-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1.75rem;
      color: aliceblue;
    }
    header.site-header1{
    margin-bottom:1.5rem;color:white;
    }

    section{
      margin-bottom:1.8rem;padding:1rem;
      background:var(--card);border-radius:var(--radius);
      border:1px solid rgba(219, 175, 175, 0.316);
    }
    img.responsive{width:100%;max-width:400px;border-radius:10px;margin-top:0.8rem;}


    .brand{
      display:flex;
      gap:0.75rem;
      align-items:center;
      text-decoration:none;
      color:inherit;
    }
        .logo-img {
      width:98px;
      height:98px;
      border-radius:10px;
      object-fit:cover;
    }
    nav.main-nav{
      display:flex;
      gap:1rem;
      align-items:center;
    }
    nav a{
      color:var(--muted);
      text-decoration:none;
      font-weight:600;
      font-size:0.95rem;
      padding:0.5rem 0.6rem;
      border-radius:8px;
    }
    nav a:hover{color:#fff;background:var(--glass)}
    

    main{
      display:grid;
      gap:1.5rem;
    }

    .hero{
      display:flex;
      gap:1.25rem;
      align-items:center;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      padding:1.25rem;
      border-radius:var(--radius);
      border: 1px solid rgba(255,255,255,0.03);
      box-shadow: 0 6px 30px rgba(2,6,23,0.6);
    }
    .hero-left{flex:1; min-width:260px}
    .kicker{
      display:inline-block;
      padding:0.35rem 0.6rem;
      border-radius:999px;
      background:rgba(124,58,237,0.12);
      color:var(--accent1);
      font-weight:700;
      font-size:0.8rem;
      margin-bottom:0.75rem;
    }
    h1{
      margin:0 0 0.6rem 0;
      font-size:clamp(1.45rem,2.4vw,2.1rem);
      letter-spacing:-0.02em;
      color: #06b6d4;
    }
    h2{color: #7c3aed;}
    h3{color: rgb(234, 251, 245);}
    h4{color: rgba(127, 255, 212, 0.614);}
    p.lead{
      margin:0;
      color:var(--muted);
      font-size:1rem;
    }
    .hero-right{
      width:340px;
      min-width:220px;
      background:linear-gradient(180deg, rgba(206, 121, 121, 0.158), rgba(255,255,255,0.01));
      border-radius:12px;
      padding:1rem;
      border:1px solid rgba(255,255,255,0.03);
    }
    .quick-list{display:grid;gap:0.5rem}
    .quick-item{display:flex;gap:0.75rem;align-items:center}
    .chip{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,0.03);display:grid;place-items:center;font-weight:700}
    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:1rem;
      margin-top:1rem;
    }
    .card{
      background:linear-gradient(180deg, rgba(255, 255, 255, 0.059), rgba(255, 255, 255, 0.053));
      padding:1.05rem;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.03);
      box-shadow: 0 6px 20px rgba(2,6,23,0.6);
      display:flex;
      flex-direction:column;
      gap:0.6rem;
    }
    .card h3{margin:0;font-size:1.05rem}
    .muted{color:var(--muted);font-size:0.92rem}
    .learn{
      margin-top:auto;
      display:inline-flex;
      align-items:center;
      gap:0.6rem;
      text-decoration:none;
      color:var(--accent2);
      font-weight:700;
      font-size:0.95rem;
    }
    .learn svg{width:14px;height:14px;transform:translateX(0);transition:transform .18s}
    .card:hover .learn svg{transform:translateX(4px)}

   
    .funnel-visual{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
    .funnel-svg{flex:1;min-width:220px;max-width:420px}
    .funnel-steps{flex:1;min-width:220px}
    .step{display:flex;align-items:center;gap:0.8rem;padding:0.45rem;border-radius:10px;background:rgba(255,255,255,0.02)}

    footer.site-footer{
      margin-top:1.5rem;
      padding-top:1.25rem;
      border-top:1px solid rgba(255,255,255,0.03);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:0.95rem;
    }

    
    @media (max-width:760px){
      .hero{flex-direction:column}
      .hero-right{width:100%}
      header.site-header{flex-direction:column;align-items:flex-start}
      nav.main-nav{order:2;width:100%;justify-content:space-between}
    }


   .dropdown {
     position: relative;
    }

    .dropbtn {
      background:linear-gradient(90deg,var(--accent1),var(--accent2));
      padding:0.6rem 0.9rem;
      border-radius: 10px;
      color:rgb(255, 255, 255);
      border-radius:10px;
      text-decoration:none;
      font-weight: 700;
      cursor: pointer;
      backdrop-filter: blur(6px);
      transition: 0.2s;
    }

    .dropbtn:hover {
      color: #ffffff;
      background: rgba(219, 52, 52, 0.222);
    }

     .dropdown-content {
      display: none;
      position: absolute;
      top: 110%;
      right: 0;
      background: black;
      border: 1px solid rgba(153, 151, 151, 0.103);
      border-radius: 12px;
      min-width: 220px;
      padding: 0.4rem 0;
      box-shadow: 0 12px 40px rgba(134, 133, 133, 0.623);
      z-index: 99;
    }

     .dropdown-content a {
      display: block;
      padding: 0.6rem 1rem;
      text-decoration: none;
      color:rgb(255, 255, 254);
      font-size: 0.92rem;
      transition: 0.35s;
    }

      .dropdown-content a:hover {
       background: rgba(255, 255, 255, 0.533);
       color: #fff;
    }

     .dropdown:hover .dropdown-content {
      display: block;
    }

    .ft{
    color: #7c3aed;
    }

    .highlighted {
  background: rgba(152, 98, 246, 0.42) !important;
  box-shadow: 0 0 12px rgba(152, 98, 246, 0.55);
  transition: background 0.75s ease-out, box-shadow 0.75s ease-out;
}

#backToTop {
  position: fixed;
  bottom: 18px;
  right: 18px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color: white;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 50px;
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: background 0.3s ease;
}

#backToTop:hover {
  background: var(--accent2);
}