:root{
      --accent: rgb(76, 0, 255);
      --accent-2: #183f6b;
      --muted: #6d86a0;
      --card: #ffffff;
      --radius: 14px;
      --maxw: 1200px;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:#f6f8fb;color:#082033}
    a{color:inherit;text-decoration:none}

    /* SITE WRAPPER */
    .site{min-height:100vh;display:flex;flex-direction:column}

    /* NAV */
    header{position:fixed;left:0;right:0;top:0;z-index:1000}
    .nav{max-width:var(--maxw);margin:12px auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(90deg,rgba(255,255,255,0.6),rgba(255,255,255,0.4));backdrop-filter:blur(8px);border-radius:12px}
    .brand{display:flex;align-items:center;gap:12px;color:inherit}
    .brand img{height:44px}
    nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
    nav a{color:#0e2b4a;text-decoration:none;font-weight:600;position:relative;display:inline-flex;align-items:center;gap:8px}
    .cta{
        background:linear-gradient(90deg,var(--accent),rgb(76, 0, 255));
        color:white;
        font-weight: bold;
        text-align: center;
        padding:13px;
        width: 100%;
        max-width:350px;
        font-size: 14px;
        border-radius:10px
    }
    center{
        margin-top: 50px;
        padding: 10px;
    }
    .menu-toggle{display:none;border:0;background:transparent;font-size:20px;padding:6px}

    /* Icon helper */
    .nav-icon{width:18px;height:18px;display:inline-block;flex:0 0 18px}

    /* Dropdown */
    .dropdown-wrapper{position:relative}
    .dropdown-trigger{cursor:pointer;display:flex;align-items:center;gap:8px}
    .caret{font-size:12px;opacity:0.85}
    .dropdown {
      display:none;
      position:absolute;
      top:110%;
      left:0;
      background:#fff;
      border-radius:10px;
      box-shadow:0 10px 30px rgba(10,30,60,0.12);
      min-width:260px;
      flex-direction:column;
      padding:8px 6px;
      z-index:999;
      border:1px solid rgba(10,30,60,0.04);
      transform-origin: top;
      transition: transform .12s ease, opacity .12s ease;
      opacity:0;
      transform: translateY(-6px) scale(.99);
    }
    .dropdown.open, .dropdown-hover { display:flex; opacity:1; transform: translateY(0) scale(1); }
    .dropdown li{width:100%;list-style:none}
    .dropdown a{
      display:flex;
      align-items:center;
      gap:12px;
      padding:10px 14px;
      color:#0e2b4a;
      font-weight:600;
      border-radius:8px;
    }
    #BELLA{
        margin: 0 auto;
        width:100%;
        max-width: 450px;
        background-color: rgb(76, 0, 255);
        object-fit: cover;
        border-radius: 20px;        
    }

    #BELLAS{
        margin: 0 auto;
        background-color: rgb(76, 0, 255);
        max-width: 1200px;
        height: 200px;
        width: 100%;
        object-fit: cover;
        border-radius: 20px;
    }    
    .dropdown a small{display:block;font-weight:500;color:var(--muted)}
    .dropdown a:hover{background:rgba(91,74,214,0.06); color:var(--accent)}
    .dd-icon{width:18px;height:18px;flex:0 0 18px;display:inline-block}

    /* HERO full screen banner */
    .hero-wrap{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;margin-top:16px}
    .hero{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;position:relative}
    .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,15,30,0.28),rgba(9,21,37,0.4));}
    .hero-inner{height:450px; border-radius:20px;position:relative;z-index:2;max-width:1100px;padding:60px 24px;display:flex;gap:28px;align-items:center;color:white}
    .hero-left{flex:1}
    .hero h1{font-size:40px;margin:0 0 12px;line-height:1.04}
    .hero p{margin:0 0 20px;color:rgba(255,255,255,0.92);font-size:18px}
    .hero .actions{display:flex;gap:12px;flex-wrap:wrap}

    /* small card on right */
    .hero-card{width:200px;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03));border-radius:14px;padding:18px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.06)}
    .hero-card img{max-width:140px;display:block;margin:0 auto 8px}
    .hero-card .soon{font-weight:700;text-align:center;color:#fff;margin-bottom:6px}

    /* SECTION LAYOUT */
    section{max-width:var(--maxw);margin:36px auto;padding:22px}
    .card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 12px 30px rgba(10,30,60,0.06)}
    .muted{color:var(--muted)}

    /* features */
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
    .feat{padding:14px;border-radius:12px}

    /* ABOUT */
    #sobre .inner{display:flex;gap:22px;align-items:center}
    #sobre img{width:220px;border-radius:12px;object-fit:cover}

    
    .plans-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:18px
    }

    .plan{
        border-radius:12px;
        padding:20px;
        background:linear-gradient(180deg,#fff,#fbfbff);
        border:1px solid rgba(24,63,107,0.04);
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    .price{
        font-weight:800;
        font-size:26px;
        color:var(--accent);
        text-align: center;
    }
     
    h3{
        font-weight: 400;
        text-align: center;
        border: 2px solid var(--accent);
        color: var(--accent);
        border-radius: 20px;
        padding: 14px;
    }
    h2{
        font-weight: 400;
        text-align: left;
        color: var(--accent);
        border-radius: 20px;
    }
    li{
        padding:8px;
        font-weight: 400;
        color: #000000;
    }
    .price{
        font-weight: 500;
        text-align: center;
        color: #fff;
        font-size: 15px;
        background-color: var(--accent);
        padding: 12px;
        border-radius: 13px;
    }
    strong{
        font-weight: 300;
    }
    .nav a{
        font-weight: 500;
    }

    

    .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .service{position:relative;border-radius:12px;overflow:hidden;min-height:160px;display:flex;align-items:flex-end;color:white;padding:14px}
    .service .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.0),rgba(0,0,0,0.45));}
    .service h4{position:relative;z-index:2;margin:0}


    
    .dash-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:16px
    }


    footer{
        margin-top:18px;
        padding:28px 20px;
        background:transparent
    }


    .whatsapp-fab{
        position:fixed;
        right:20px;
        bottom:20px;
        z-index:1200;
        width:64px;
        height:64px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:
        center;
        background:linear-gradient(180deg,var(--accent),#6f00ff);
        box-shadow:0 12px 30px rgba(18,35,70,0.14);
        color:white}

 
        
    @media (max-width:980px){
       #sobre{
          width: 100%;
          max-width: 450px;
       }
      .features{grid-template-columns:1fr 1fr}
      .services-grid{grid-template-columns:1fr 1fr}
      .plans-grid{grid-template-columns:1fr 1fr}
      .dash-grid{grid-template-columns:1fr 1fr}
      .hero-inner{
        padding:36px;
        height:700px;
    }
    .nav a{
        text-align: left;
    }
    }

    @media (max-width:720px){  
       #sobre{
          width: 100%;
          max-width: 450px;
       }     
       nav ul{display:none}
      .menu-toggle{display:block}
      .hero-inner{flex-direction:column;text-align:center}
      .hero-card{width:100%}
      .features{grid-template-columns:1fr}
      .plans-grid{grid-template-columns:1fr}
      .services-grid{grid-template-columns:1fr}
      .dash-grid{grid-template-columns:1fr}
      /* mobile dropdown styles */
      .dropdown{position:static;box-shadow:none;background:transparent;padding:0;border:0}
      .dropdown a{padding:10px 6px;border-radius:0}
      .nav a{
        text-align: left;
       }
    }



    nav a.active{color:var(--accent)}