:root{
      --bg:#c34aa1; /* dark blue-gray */
      --card:#0b1d20;
      --accent:#06b6d4; /* cyan */
      --muted:#94a3b8;
      --glass: rgba(255,255,255,0.04);
      --radius:14px;
      --maxw:1200px;
      --gap:20px;
      --font-family: 'Segoe UI', Tahoma, sans-serif;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--font-family);
      background:linear-gradient(180deg,#071021 0%,var(--bg) 100%);
      color:#a164d2;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }
    .container{max-width:var(--maxw);margin:0 auto;padding:28px}

    /* Header */
    header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#7c3aed);display:flex;align-items:center;justify-content:center;font-weight:700}
    .logo span{font-size:18px}
    nav{display:flex;gap:18px;align-items:center}
    nav a{color:var(--muted);text-decoration:none;font-weight:600}
    .btn{background:var(--accent);color:#042029;padding:10px 16px;border-radius:10px;font-weight:700;border:none;cursor:pointer}
    .ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:var(--muted)}

    /* Mobile nav */
    .hamburger{display:none;background:transparent;border:0;color:var(--muted);font-size:22px}
    @media (max-width:880px){
      nav{display:none}
      .hamburger{display:block}
    }

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center;padding:36px 0}
    .eyebrow{color:var(--accent);font-weight:700;letter-spacing:0.6px}
    h1{font-size:38px;margin:10px 0}
    p.lead{color:var(--muted);max-width:60ch}
    .hero-cta{display:flex;gap:12px;margin-top:18px}
    .mock{background:linear-gradient(180deg,#07202a 0%,#081423 100%);border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 30px rgba(2,6,23,0.6)}
    .mock img{display:block;width:100%;height:auto;border-radius:10px}

    /* Features */
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:36px 0}
    .card{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
    .feature h3{margin:8px 0}
    .muted{color:var(--muted);font-size:14px}
    @media (max-width:880px){
      .hero{grid-template-columns:1fr;}
      .features{grid-template-columns:1fr}
    }

    /* Products */
    .products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
    .product{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
    .product img{width:100%;height:200px;object-fit:cover;border-radius:8px}
    .price{font-weight:800;margin-top:10px}
    @media (max-width:1100px){.products{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:600px){.products{grid-template-columns:1fr}}

    /* CTA bar */
    .cta-bar{display:flex;align-items:center;justify-content:space-between;padding:18px;background:var(--glass);border-radius:12px;border:1px solid rgba(255,255,255,0.03);margin:36px 0}
    .subscribe{display:flex;gap:8px;align-items:center}
    .subscribe input{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}

    /* Footer */
    footer{padding:32px 0;color:var(--muted);font-size:14px}

    /* Small animations */
    .fade-up{opacity:0;transform:translateY(10px);transition:all 700ms cubic-bezier(.16,.84,.44,1)}
    .in-view{opacity:1;transform:none}

    /* utilities */
    .flex{display:flex}
    .center{align-items:center}
    .space-between{justify-content:space-between}

    /* Accessibility focus */
    a:focus,button:focus,input:focus{outline:3px solid rgba(6,182,212,0.16);outline-offset:2px}
   .product-card {
  background: rgba(255,255,255,0.12); /* يظهر الكارد */
  color: #fff;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  text-align: center;
}

.product-card img {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  margin-bottom: 12px;
  object-fit: cover;
}