*{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:'Cairo',system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:#f5f6fa;
      color:#222;
      line-height:1.6;
    }
    img{max-width:100%;display:block}
    a{text-decoration:none}

    :root{
      --primary:#1c93ff;
      --primary-dark:#0c64b8;
      --accent:#ff9f1c;
      --bg-soft:#ffffff;
      --radius:18px;
      --shadow:0 10px 25px rgba(0,0,0,.08);
    }

    header{
      background:linear-gradient(135deg,#e8f4ff,#ffffff);
      padding:1.5rem 1rem 2.5rem;
    }
    .container{max-width:1100px;margin:0 auto}

    .hero{
      display:flex;
      flex-wrap:wrap;
      gap:2rem;
      align-items:center;
      justify-content:space-between;
    }
    .hero-content{flex:1 1 320px}
    .hero-badge{
      display:inline-block;
      background:#e3f3ff;
      color:var(--primary-dark);
      padding:.25rem .75rem;
      border-radius:999px;
      font-size:.85rem;
      margin-bottom:.75rem;
    }
    .hero h1{
      font-size:2rem;
      margin-bottom:.5rem;
    }
    .hero h2{
      font-size:1.1rem;
      color:#555;
      margin-bottom:1rem;
    }
    .hero-list{
      list-style:none;
      margin-bottom:1.5rem;
    }
    .hero-list li{
      display:flex;
      align-items:flex-start;
      gap:.4rem;
      margin-bottom:.35rem;
      font-size:.95rem;
    }
    .hero-list span.bullet{
      width:8px;
      height:8px;
      border-radius:999px;
      margin-top:.45rem;
      background:var(--primary);
      flex-shrink:0;
    }

    .hero-cta{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      align-items:center;
    }
    .btn{
      padding:.65rem 1.3rem;
      border-radius:999px;
      font-size:.95rem;
      font-weight:600;
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      cursor:pointer;
      border:0;
      transition:.15s all ease-in-out;
      white-space:nowrap;
    }
    .btn-whatsapp{
      background:#25D366;
      color:#fff;
      box-shadow:var(--shadow);
    }
    .btn-whatsapp:hover{background:#1aae52}
    .btn-instagram{
      background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
      color:#fff;
    }
    .btn-outline{
      background:transparent;
      color:var(--primary-dark);
      border:1px solid #cfd7e6;
    }
    .hero-note{
      font-size:.82rem;
      color:#777;
      margin-top:.4rem;
    }

    .hero-image{
      flex:1 1 320px;
      background:var(--bg-soft);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:.75rem;
      position:relative;
    }
    .hero-tag{
      position:absolute;
      left:1rem;
      top:1rem;
      background:var(--accent);
      color:#fff;
      padding:.35rem .7rem;
      border-radius:999px;
      font-size:.8rem;
      font-weight:600;
    }

    /* sections */
    section{
      padding:2.5rem 1rem;
    }
    .section-title{
      text-align:center;
      font-size:1.4rem;
      margin-bottom:1.5rem;
    }
    .section-sub{
      text-align:center;
      font-size:.95rem;
      color:#666;
      margin:-.75rem auto 1.7rem;
      max-width:550px;
    }

    .grid-3{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1.2rem;
    }
    .card{
      background:var(--bg-soft);
      border-radius:var(--radius);
      padding:1.1rem;
      box-shadow:var(--shadow);
      font-size:.92rem;
    }
    .card h3{
      font-size:1rem;
      margin-bottom:.4rem;
    }
    .tag{
      display:inline-block;
      font-size:.75rem;
      padding:.1rem .55rem;
      border-radius:999px;
      background:#edf2ff;
      color:var(--primary-dark);
      margin-bottom:.35rem;
    }

    .features-list{
      list-style:none;
      margin-top:.35rem;
    }
    .features-list li{
      margin-bottom:.25rem;
      position:relative;
      padding-right:1rem;
    }
    .features-list li::before{
      content:"•";
      position:absolute;
      right:0;
      top:0;
      color:var(--primary);
    }

    /* gallery */
    .gallery{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
    }
    .gallery-item{
      background:var(--bg-soft);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .gallery-item img{width:100%;height:100%;object-fit:cover}
    .gallery-caption{
      padding:.4rem .7rem;
      font-size:.8rem;
      color:#555;
    }

    /* offer */
    .offer{
      background:linear-gradient(135deg,#1c93ff,#0b65c0);
      color:#fff;
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:1.8rem 1.4rem;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .offer h2{font-size:1.3rem;margin-bottom:.3rem}
    .offer p{font-size:.95rem;opacity:.9}
    .price-tag{
      font-size:1.1rem;
      font-weight:700;
      margin-top:.3rem;
      color:#ffeaa7;
    }

    footer{
      padding:1.3rem 1rem 1.8rem;
      font-size:.82rem;
      color:#777;
      text-align:center;
    }

    /* mobile sticky bar */
    .sticky-bar{
      position:fixed;
      bottom:0;
      left:0;
      right:0;
      padding:.5rem .75rem;
      background:#ffffffee;
      backdrop-filter:blur(8px);
      border-top:1px solid #e0e4f0;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.5rem;
      z-index:999;
    }
    .sticky-bar span{
      font-size:.8rem;
      color:#555;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .sticky-bar .btn{
      flex:0 0 auto;
      padding:.5rem 1rem;
      font-size:.85rem;
    }

    /* responsive */
    @media (max-width:900px){
      .hero{flex-direction:column-reverse}
      header{padding-top:1rem}
    }
    @media (max-width:768px){
      .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
      .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width:550px){
      .grid-3,
      .gallery{grid-template-columns:1fr}
      .offer{flex-direction:column;align-items:flex-start}
      body{padding-bottom:60px} /* space for sticky bar */
    }