:root{
    --bg1:#f7f5f2;
    --bg2:#e8e2da;
    --gold:#c59b3b;
    --text:#1b1b1b;
    --muted:#6d6a65;
    --black:#0b0b0c;
  }
  
  *{ margin:0; padding:0; box-sizing:border-box; }
  body{
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:linear-gradient(180deg,var(--bg1),var(--bg2));
  }
  
  /* Top bar icons like original */
  .topbar{
    max-width:1200px;
    margin:18px auto 0;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand-mini{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
  }
  .brand-dot{
    width:10px;height:10px;border-radius:99px;
    background:linear-gradient(180deg,var(--gold),#e7c87b);
    box-shadow:0 6px 18px rgba(197,155,59,.35);
  }
  .top-icons{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  .icon-link{
    display:flex;
    gap:8px;
    align-items:center;
    text-decoration:none;
    color:var(--text);
    font-size:12px;
    opacity:.85;
  }
  .icon-link svg{
    width:18px;height:18px;
    fill:currentColor;
    opacity:.85;
  }
  
  /* Poster-style hero */
  .hero-poster{
    position:relative;
    padding:28px 0 0;
    overflow:hidden;
  }
  .hero-poster::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(900px 450px at 20% 10%, rgba(197,155,59,.10), transparent 60%),
      radial-gradient(800px 420px at 90% 20%, rgba(197,155,59,.10), transparent 60%),
      linear-gradient(180deg,var(--bg1),var(--bg2));
    z-index:0;
  }
  
  .hero-inner{
    position:relative;
    z-index:1;
    max-width:1200px;
    margin:0 auto;
    padding:32px 18px 0;
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap:24px;
    align-items:center;
  }
  
  .hero-title{
    font-size:44px;
    letter-spacing:.2px;
  }
  .hero-sub{
    color:var(--muted);
    margin-top:6px;
    font-size:13px;
  }
  .hero-headline{
    margin-top:18px;
    font-size:40px;
    line-height:1.12;
  }
  .hero-headline span{ color:var(--gold); }
  .hero-desc{
    margin-top:10px;
    font-size:14px;
    color:#3a3733;
  }
  
  .arabic-box{
    margin-top:18px;
    display:inline-block;
    background:rgba(0,0,0,.78);
    color:#fff;
    padding:12px 14px;
    border-radius:10px;
    font-size:16px;
    box-shadow:0 10px 22px rgba(0,0,0,.18);
  }
  
  /* HERO image should blend — no “box” look */
  .hero-right{ display:flex; justify-content:flex-end; }
  .hero-image-wrap{
    position:relative;
    width:min(520px, 100%);
  }
  .hero-image-wrap img{
    width:100%;
    height:auto;
    display:block;
    border-radius:24px;
    /* blending feel */
    box-shadow: 0 22px 50px rgba(0,0,0,.12);
  }
  /* Feather edges so it melts into background (key part) */
  .hero-image-wrap::after{
    content:"";
    position:absolute; inset:-2px;
    border-radius:26px;
    pointer-events:none;
    background:
      radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(247,245,242,.95) 80%),
      linear-gradient(180deg, rgba(247,245,242,.25), rgba(232,226,218,.35));
    mix-blend-mode:screen;
    opacity:.65;
  }
  
  /* Platform cards centered like original */
  .platform-block{
    position:relative;
    z-index:1;
    max-width:1200px;
    margin:28px auto 0;
    padding:0 18px;
    text-align:center;
  }
  .platform-title .smallcap{
    font-size:12px;
    letter-spacing:.14em;
    font-weight:700;
  }
  .platform-title .subcap{
    margin-top:4px;
    font-size:13px;
    color:var(--muted);
  }
  
  .platform-cards{
    margin-top:18px;
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
  }
  
  .pcard{
    width:210px;
    text-decoration:none;
    color:#fff;
    border-radius:16px;
    padding:14px 14px 12px;
    display:grid;
    grid-template-columns:42px 1fr;
    grid-template-rows:auto auto;
    column-gap:10px;
    row-gap:8px;
    box-shadow: 0 16px 30px rgba(0,0,0,.14);
    transform: translateZ(0);
    transition:.22s ease;
  }
  .pcard:hover{ transform: translateY(-6px); }
  
  .picon{
    width:42px;height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.12);
  }
  .picon svg{ width:22px;height:22px; fill:#fff; }
  
  .temu-badge{
    font-weight:800;
    font-size:12px;
    letter-spacing:.08em;
  }
  
  .ptxt{ text-align:left; }
  .pname{ font-weight:700; font-size:15px; line-height:1.1; }
  .pmeta{ font-size:12px; opacity:.9; margin-top:2px; }
  .pcta{
    grid-column:1 / -1;
    text-align:left;
    font-size:12px;
    opacity:.95;
    background:rgba(0,0,0,.18);
    padding:8px 10px;
    border-radius:12px;
  }
  
  .pcard.amazon{ background: linear-gradient(180deg,#1b1b1d,#0f0f11); }
  .pcard.temu{ background: linear-gradient(180deg,#ff7a00,#ff3c00); }
  .pcard.insta{ background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
  .pcard.whatsapp{ background: linear-gradient(180deg,#2bd06f,#1aa456); }
  
  /* Feature row (white strip) */
  .feature-row{
    position:relative;
    z-index:1;
    margin-top:26px;
    background:rgba(255,255,255,.78);
    border-top:1px solid rgba(0,0,0,.06);
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .feature-row{
    display:flex;
    justify-content:space-around;
    gap:12px;
    padding:14px 18px;
    flex-wrap:wrap;
  }
  .fitem{ font-size:13px; font-weight:500; color:#242322; }
  
  /* Fade into black like original poster bottom */
  .bottom-fade{
    height:90px;
    background: linear-gradient(180deg, rgba(232,226,218,0), rgba(11,11,12,1));
    margin-top:26px;
  }
  
  /* Bottom black service strip */
  .after-sales{
    background:var(--black);
    color:#fff;
    padding:22px 18px;
    display:flex;
    justify-content:space-around;
    gap:12px;
    flex-wrap:wrap;
  }
  .as-item{ font-size:13px; opacity:.95; }
  
  .footer{
    background:#000;
    color:#fff;
    text-align:center;
    padding:16px 18px 18px;
    font-size:12px;
    opacity:.9;
  }
  
  /* Responsive: phone */
  @media (max-width: 900px){
    .hero-inner{
      grid-template-columns:1fr;
      gap:16px;
      padding-top:18px;
    }
    .hero-title{ font-size:36px; }
    .hero-headline{ font-size:34px; }
    .hero-right{ justify-content:flex-start; }
    .pcard{ width:min(360px, 100%); }
    .topbar{
      gap:10px;
      flex-direction:column;
      align-items:flex-start;
    }
  }