:root {
      --color-primary: #8E44AD;
      --color-primary-light: #BB8FCE;
      --color-surface: #16161A;
      --color-border-theme: #2D2D35;
      --color-background-dark: #0A0A0C;
      --color-accent-gold: #FFD700;
    }
* {
  max-width: 100%;
}
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { overflow-x: hidden;scroll-behavior: smooth; }

    body {
      background-color: var(--color-background-dark);
      color: #f5f5f5;
      font-family: 'Cairo', sans-serif;
      direction: rtl;
      overflow-x: hidden;
    }

    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #171717; }
    ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 99px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }

    ::selection { background: var(--color-primary); color: #fff; }

    /* ── NAVBAR ── */
    .navbar {
          margin-top: 10px; margin-bottom: 10px; top: 0; width: 100%; z-index: 50;
      transition: all .3s ease;
    }
    .navbar.scrolled {
      background: rgba(22,22,26,.85);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--color-border-theme);
    }
    .navbar-inner {
      max-width: 1280px; margin: auto; padding: 0 1.5rem;
      display: flex; align-items: center; justify-content: space-between;
      height: 70px;
    }
    .logo { display:flex; align-items:center; gap:.25rem; text-decoration:none; }
    .logo-badge {
      background: var(--color-primary); color:#fff;
      padding: .25rem .75rem; border-radius:.5rem;
      font-size:1.4rem; font-weight:900;
    }
    .logo-suffix { font-size:1.4rem; font-weight:900; color:var(--color-primary-light); margin-right:.25rem; }

    .nav-links { display:flex; align-items:center; gap:2rem; list-style:none; }
    .nav-links a { color:#a3a3a3; font-size:.9rem; font-weight:600; text-decoration:none; transition:color .2s; }
    .nav-links a:hover { color:var(--color-primary); }
    .btn-nav {
      background:var(--color-primary); color:#fff; border:none;
      padding:.5rem 1.5rem; border-radius:.5rem; font-family:'Cairo',sans-serif;
      font-weight:700; font-size:.9rem; cursor:pointer;
      box-shadow:0 4px 20px rgba(142,68,173,.3); transition:all .2s;
    }
    .btn-nav:hover { background:var(--color-primary-light); transform:translateY(-1px); }

    .hamburger { display:none; background:none; border:none; color:#fff; cursor:pointer; padding:.5rem; }
    .mobile-menu {
      display:none; position:fixed; inset:0; z-index:40;
      background:#050507; padding-top:5rem; padding-right:1.5rem; padding-left:1.5rem;
      flex-direction:column; gap:1.5rem;
    }
    .mobile-menu.open { display:flex; }
    .mobile-menu a { color:#a3a3a3; font-size:1.25rem; font-weight:700; text-decoration:none; transition:color .2s; }
    .mobile-menu a:hover { color:var(--color-primary); }
    .btn-mobile {
      background:var(--color-primary); color:#fff; border:none;
      padding:1rem; border-radius:.75rem; font-family:'Cairo',sans-serif;
      font-weight:700; font-size:1.1rem; cursor:pointer; margin-top:.5rem;
      box-shadow:0 8px 25px rgba(142,68,173,.25);
    }

    /* ── HERO ── */
    .hero {
      position:relative; min-height:100vh;
      display:flex; align-items:center; justify-content:center;
      text-align:center; padding: 8rem 1.5rem 5rem;
      overflow:hidden;
    }
    .hero::before {
      content:''; position:absolute; inset:0; z-index:0;
      background: radial-gradient(ellipse at 20% 0%, rgba(142,68,173,.35) 0%, transparent 50%),
                  radial-gradient(ellipse at 80% 100%, rgba(142,68,173,.15) 0%, transparent 50%);
    }
    /* animated grid bg */
    .hero-grid {
      position:absolute; inset:0; z-index:0; opacity:.07;
      background-image: linear-gradient(var(--color-border-theme) 1px, transparent 1px),
                        linear-gradient(90deg, var(--color-border-theme) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .hero-content { position:relative; z-index:1; max-width:860px; margin:auto; }
    .badge-4k {
      display:inline-block; background:var(--color-accent-gold); color:#000;
      font-size:.7rem; font-weight:900; padding:.2rem .75rem; border-radius:.25rem;
      margin-bottom:1.5rem; letter-spacing:.05em;
    }
    .hero h1 {
      font-size: clamp(2.2rem, 6vw, 5rem); font-weight:900; line-height:1.2;
      margin-bottom:1.5rem;
      background: linear-gradient(135deg, #fff 0%, var(--color-primary-light) 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .hero p {
      color:#a3a3a3; font-size:clamp(.95rem, 2vw, 1.15rem);
      line-height:1.9; max-width:700px; margin:0 auto 2.5rem;
    }
    .hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
    .btn-primary {
      background:var(--color-primary); color:#fff; border:none;
      padding:1rem 2.5rem; border-radius:.75rem; font-family:'Cairo',sans-serif;
      font-weight:700; font-size:1rem; cursor:pointer;
      box-shadow:0 8px 30px rgba(142,68,173,.4); transition:all .25s;
    }
    .btn-primary:hover { background:var(--color-primary-light); transform:translateY(-2px); }
    .btn-outline {
      background:transparent; color:var(--color-primary-light);
      border:1.5px solid var(--color-primary); padding:1rem 2.5rem;
      border-radius:.75rem; font-family:'Cairo',sans-serif;
      font-weight:700; font-size:1rem; cursor:pointer; transition:all .25s;
    }
    .btn-outline:hover { background:rgba(142,68,173,.1); }
    .hero-chips { margin-top:2rem; display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
    .hero-chips span { color:#737373; font-size:.85rem; font-weight:600; }

    /* ── FEATURES ── */
    .section-dark { background:var(--color-background-dark); padding:6rem 1.5rem; }
    .section-bg { background:var(--color-surface); }
    .container { max-width:1280px; margin:auto; }
    .grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; }
    .feature-card {
      background:var(--color-surface); border:1px solid var(--color-border-theme);
      border-radius:1rem; padding:2rem; transition:border-color .3s, transform .3s;
    }
    .feature-card:hover { border-color:rgba(142,68,173,.5); transform:translateY(-4px); }
    .feat-icon {
      width:48px; height:48px; background:rgba(142,68,173,.15);
      border-radius:.75rem; display:flex; align-items:center; justify-content:center;
      margin-bottom:1.5rem; color:var(--color-primary);
    }
    .feat-icon svg { width:24px; height:24px; }
    .feature-card h3 { font-size:1.15rem; font-weight:700; color:var(--color-primary-light); margin-bottom:.75rem; }
    .feature-card p { color:#737373; font-size:.875rem; line-height:1.8; }

    /* ── PRICING ── */
    .section-pricing { padding:7rem 1.5rem; }
    .section-title { text-align:center; margin-bottom:1rem; }
    .section-title h2 { font-size:clamp(1.8rem,4vw,3rem); font-weight:900; }
    .section-title p { color:#737373; font-size:1.05rem; margin-top:.5rem; }
    .plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; max-width:1100px; margin:4rem auto 0; }
    .plan-card {
      background:rgba(22,22,26,.5); border:1px solid var(--color-border-theme);
      border-radius:1.5rem; padding:2rem; display:flex; flex-direction:column;
      justify-content:space-between; transition:border-color .3s;
      position:relative;
    }
    .plan-card:hover { border-color:rgba(142,68,173,.4); }
    .plan-card.recommended {
      background:var(--color-surface); border-color:var(--color-primary);
      box-shadow:0 0 0 2px rgba(142,68,173,.2); transform:scale(1.03); z-index:1;
    }
    .plan-badge {
      position:absolute; top:-1rem; left:50%; transform:translateX(-50%);
      background:var(--color-primary); color:#fff; padding:.25rem 1rem;
      border-radius:.25rem; font-size:.75rem; font-weight:900; white-space:nowrap;
    }
    .plan-name { font-size:1.15rem; font-weight:700; margin-bottom:1.25rem; }
    .plan-price { margin-bottom:2rem; }
    .plan-price .amount { font-size:2.5rem; font-weight:900; color:#fff; }
    .plan-price .period { color:#525252; font-size:.875rem; margin-right:.25rem; }
    .plan-features { list-style:none; margin-bottom:2.5rem; display:flex; flex-direction:column; gap:.75rem; }
    .plan-features li { display:flex; align-items:center; gap:.75rem; color:#a3a3a3; font-size:.875rem; }
    .plan-features li svg { color:var(--color-primary); flex-shrink:0; width:16px; height:16px; }
    .btn-plan {
      width:100%; padding:1rem; border-radius:.75rem; font-family:'Cairo',sans-serif;
      font-weight:700; font-size:1rem; cursor:pointer; border:none; transition:all .2s;
    }
    .btn-plan-primary { background:var(--color-primary); color:#fff; box-shadow:0 4px 20px rgba(142,68,173,.3); }
    .btn-plan-primary:hover { background:var(--color-primary-light); }
    .btn-plan-secondary { background:#262626; color:#fff; }
    .btn-plan-secondary:hover { background:#303030; }

    /* ── DEVICES ── */
    .section-devices { padding:6rem 1.5rem; background:rgba(10,10,12,.7); }
    .devices-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:3rem; max-width:900px; margin:4rem auto 0; }
    .device-item {
      display:flex; flex-direction:column; align-items:center; gap:1rem;
      color:rgba(255,255,255,.6); transition:color .25s, transform .25s;
    }
    .device-item:hover { color:var(--color-primary); transform:translateY(-6px); }
    .device-item svg { width:56px; height:56px; }
    .device-item span { font-weight:700; font-size:.9rem; }

    /* ── SEO ARTICLE ── */
    .seo-section { background:var(--color-background-dark); padding:7rem 1.5rem; border-top:1px solid var(--color-border-theme); border-bottom:1px solid var(--color-border-theme); }
    .seo-title { text-align:center; margin-bottom:5rem; }
    .seo-title h2 { font-size:clamp(1.6rem,4vw,2.8rem); font-weight:900; font-style:italic; }
    .seo-title h2 span { color:var(--color-primary-light); text-decoration-color:rgba(142,68,173,.4); }

    .seo-row { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-bottom:7rem; }
    .seo-row.reverse { direction:ltr; }
    .seo-row.reverse > * { direction:rtl; }
    .seo-img-wrap { position:relative; }
    .seo-img-wrap::before {
      content:''; position:absolute; inset:0;
      background:rgba(142,68,173,.2); border-radius:1.5rem;
      filter:blur(30px); opacity:0; transition:opacity .4s;
    }
    .seo-img-wrap:hover::before { opacity:1; }
    .seo-img-wrap img {
      width:100%; border-radius:1.5rem;
      border:1px solid var(--color-border-theme);
      box-shadow:0 20px 60px rgba(0,0,0,.5);
      position:relative; z-index:1; transition:transform .5s ease;
    }
    .seo-img-wrap:hover img { transform:scale(1.02); }
    .seo-text { display:flex; flex-direction:column; }
    .seo-text h3 { font-size:clamp(1.3rem,2.5vw,2rem); font-weight:700; color:var(--color-primary-light); margin-bottom:1.25rem; }
    .seo-text p { color:#737373; font-size:1rem; line-height:1.95; margin-bottom:1rem; }
    .seo-text strong { color:#c4b5d0; }
    .btn-seo {
      background:var(--color-primary); color:#fff; border:none;
      padding:.75rem 2rem; border-radius:.75rem; font-family:'Cairo',sans-serif;
      font-weight:700; font-size:.95rem; cursor:pointer; margin-top:1.5rem;
      align-self:center; transition:all .2s;
    }
    .btn-seo:hover { background:var(--color-primary-light); }
    .seo-summary {
      margin-top:5rem; padding:2.5rem; border-radius:1.5rem;
      background:var(--color-surface); border:1px solid var(--color-border-theme); text-align:center;
    }
    .seo-summary p { color:#525252; font-size:.875rem; line-height:2; max-width:900px; margin:auto; }
    .seo-summary strong { color:#a3a3a3; }

    /* ── REVIEWS ── */
    .section-reviews { padding:6rem 1.5rem; background:var(--color-surface); }
    .reviews-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:2rem; }
    .review-card {
      background:var(--color-background-dark); padding:1.5rem; border-radius:1.25rem;
      border:1px solid var(--color-border-theme); transition:transform .25s, border-color .25s;
    }
    .review-card:hover { transform:translateY(-3px); border-color:rgba(142,68,173,.3); }
    .stars { display:flex; gap:.2rem; margin-bottom:.75rem; color:var(--color-accent-gold); }
    .stars svg { width:14px; height:14px; }
    .review-text { color:#d4d4d4; font-size:.9rem; line-height:1.75; margin-bottom:1rem; }
    .review-author { color:var(--color-primary-light); font-size:.8rem; font-weight:700; font-style:italic; }

    /* ── FAQ ── */
    .section-faq { padding:7rem 1.5rem; background:rgba(22,22,26,.4); }
    .faq-list { max-width:800px; margin:4rem auto 0; display:flex; flex-direction:column; gap:1.25rem; }
    details {
      background:var(--color-surface); border:1px solid var(--color-border-theme);
      border-radius:1rem; overflow:hidden; transition:border-color .25s;
    }
    details:hover { border-color:rgba(142,68,173,.4); }
    details[open] { border-color:var(--color-primary); }
    summary {
      list-style:none; padding:1.25rem 1.5rem; cursor:pointer;
      display:flex; align-items:center; justify-content:space-between; gap:1rem;
      font-weight:700; font-size:1rem; transition:background .2s;
    }
    details[open] summary { background:rgba(142,68,173,.07); }
    summary::-webkit-details-marker { display:none; }
    .faq-chevron { flex-shrink:0; width:20px; height:20px; color:var(--color-primary); transition:transform .3s; }
    details[open] .faq-chevron { transform:rotate(180deg); }
    .faq-answer { padding:0 1.5rem 1.25rem; color:#737373; line-height:1.85; font-size:.9rem; }

    /* ── FOOTER ── */
.footer {
  margin-top: 80px;
  background: var(--color-background-dark);
  padding: 3.5rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-border-theme);
}
.footer-inner {
  max-width: 1280px;
  margin: auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border-theme);
}
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}
.footer-brand { }
.footer-desc {
  color: #525252;
  font-size: .83rem;
  line-height: 1.9;
  margin-top: .85rem;
}
.footer-col-title {
  color: #6b6b6b;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-weight: 500;
}
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav li { margin-bottom: .6rem; }
.footer-nav li a {
  color: #525252;
  font-size: .83rem;
  text-decoration: none;
  transition: color .2s;
}
.footer-nav li a:hover { color: #888; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.25rem;
}
.footer-copy { color: #3a3a3a; font-size: .76rem; }
.footer-payments {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.pay-badge {
  background: var(--color-surface);
  border: 1px solid var(--color-border-theme);
  border-radius: 5px;
  height: 26px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
    /* ── ANIMATIONS ── */
    @keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    .fade-up { animation: fadeUp .7s ease both; }
    .delay-1 { animation-delay:.1s; }
    .delay-2 { animation-delay:.2s; }
    .delay-3 { animation-delay:.3s; }
    .delay-4 { animation-delay:.4s; }
    .delay-5 { animation-delay:.5s; }

    /* intersection observer reveal */
    .reveal { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
    .reveal.visible { opacity:1; transform:none; }
    .reveal-left { opacity:0; transform:translateX(-50px); transition:opacity .6s ease, transform .6s ease; }
    .reveal-left.visible { opacity:1; transform:none; }
    .reveal-right { opacity:0; transform:translateX(50px); transition:opacity .6s ease, transform .6s ease; }
    .reveal-right.visible { opacity:1; transform:none; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .seo-row { grid-template-columns:1fr; gap:2.5rem; }
      .seo-row.reverse { direction:rtl; }
    }
    @media (max-width: 768px) {
      .nav-links { display:none; }
      .btn-nav { display:none; }
      .hamburger { display:block; }
      .hero p { font-size:.9rem; }
    }

/* ===============================
   WOOCOMMERCE SPECIFIC FIXES
=============================== */
.woocommerce-info {
    display: none !important;
}

.woocommerce-additional-fields {
    display: none !important;
}

.woocommerce-privacy-policy-text {
    display: none !important;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    display: none !important;
}

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce ul.products li.product {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce ul.products li::before,
.woocommerce ul.products li::after {
    content: none !important;
    display: none !important;
}

.woocommerce ul.products li.product.first {
    grid-column: auto !important;
}

.woocommerce .clear {
    display: none !important;
}

.single-product .single_add_to_cart_button {
    width: 100%;
    background-color: var(--color-primary);
    color: var(--color-light-text);
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: 22px;
    font-weight: 800;
    padding: 20px;
    border-radius: 12px;
    border: none;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-hover);
}

.single-product .single_add_to_cart_button:hover {
    background-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(42, 58, 107, 0.5);
}

.single-product .single_add_to_cart_button.loading {
    opacity: .75;
}

.single-product form.cart {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.single-product .summary .price {
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: var(--color-primary);
}

.single-product .product_title {
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: 32px;
    font-weight: 900;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, 
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: #fff200;
}

a {
    color: var(--color-light-text);
}

/* ===============================
   ACTIVATION POPUP
=============================== */
.activation-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.4s ease;
}

.activation-popup {
    max-width: 850px;
    width: 100%;
    background: linear-gradient(135deg, rgba(24,32,68,0.98), rgba(0,0,0,0.98));
    border-radius: 20px;
    padding: 45px;
    color: var(--color-light-text);
    font-family: "Cairo", "Tajawal", sans-serif;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    text-align: center;
    position: relative;
}

.activation-popup .close-popup {
    position: absolute;
    top: 18px;
    left: 18px;
    font-size: 26px;
    color: var(--color-primary-lighter);
    cursor: pointer;
    transition: var(--transition-hover);
}

.activation-popup .close-popup:hover {
    color: var(--color-primary-light);
    transform: scale(1.2);
}

.activation-popup h2 {
    font-size: 34px;
    margin-bottom: 10px;
    color: var(--color-primary-lighter);
}

.activation-popup .subtitle {
    font-size: 20px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.activation-step {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
}

.activation-step span {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-light-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.activation-popup textarea {
    width: 100%;
    height: 170px;
    background: #0d0d0d;
    color: var(--color-light-text);
    border-radius: 12px;
    border: 2px solid var(--color-primary);
    padding: 18px;
    font-size: 16px;
    resize: none;
    direction: rtl;
    margin-bottom: 25px;
    transition: var(--transition-hover);
}

.activation-popup textarea:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 15px rgba(24, 32, 68, 0.5);
    outline: none;
}

.activation-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.activation-btn {
    padding: 15px 40px;
    border-radius: 35px;
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition-hover);
    border: none;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
}

.activation-btn.copy {
    background: var(--color-primary);
    color: var(--color-light-text);
}

.activation-btn.copy:hover {
    background: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(42, 58, 107, 0.5);
}

.activation-btn.close {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.activation-btn.close:hover {
    background: var(--color-primary);
    color: var(--color-light-text);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(24, 32, 68, 0.5);
}

/* ===============================
   RESPONSIVE DESIGN
=============================== */
@media (max-width: 1023px) {
    .section {
        padding-top: 50px;
        padding-bottom: 50px;
        margin-bottom: 60px;
    }
    
    .col-lg-6, .col-lg-4, .col-lg-3 {
        width: 100%;
    }
    
    h1 { font-size: 2.8em; }
    h2 { font-size: 2.1em; }
    h3 { font-size: 1.6em; }
    p { font-size: 1em; }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .content-row {
        flex-direction: column;
        min-height: auto;
    }

    .content-image,
    .content-text {
        width: 100%;
        height: 350px;
    }

    .content-text {
        padding: 30px 20px;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .desktop-nav {
        display: none !important;
    }
    
    .mobile-nav {
        display: flex !important;
        align-items: center;
        width: 100%;
    }
    
    .header {
        padding: 15px 0;
    }
    
    .mobile-menu {
        top: 75px;
        height: calc(100vh - 75px);
    }

    .logo-wrapper {
        margin: 0 auto;
        order: 2;
    }

    .mobile-cart-link {
        order: 1;
        margin-left: 12px;
        color: var(--color-light-text);
        background: var(--color-primary);
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
        transition: var(--transition-hover);
    }

    .mobile-cart-link:hover {
        background: var(--color-primary-light);
        transform: scale(1.1);
    }

    .mobile-menu-toggle {
        order: 3;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .section {
        padding-top: 60px;
        padding-bottom: 60px;
        margin-bottom: 80px;
    }
    
    h1 { font-size: 2.2em; line-height: 1.3; } 
    h2 { font-size: 1.6em; }
    h3 { font-size: 1.3em; }
    h4 { font-size: 1.2em; }
    p { font-size: 0.95em; }
    
    #one {
        min-height: 350px;
        margin-bottom: 80px;
    }
    
    #one h1 {
        font-size: 24px;
        line-height: 1.4;
        padding: 0 10px;
    }

    .hero-btn {
        padding: 14px 36px;
        font-size: 16px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat-item {
        padding: 20px 15px;
    }

    .stat-number {
        font-size: 2.2em;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 5px;
    }

    .product-card {
        padding: 15px;
        font-size: 13px;
    }
    
    .product-card h3 {
        font-size: 15px;
        min-height: 40px;
        line-height: 1.2;
    }
    
    .product-card .price {
        font-size: 16px;
    }
    
    .product-card .btn {
        font-size: 12px;
        padding: 10px 15px;
    }
    

    .content-row {
        flex-direction: column;
    }

    .content-image {
        height: 200px;
        order: 1 !important;
        width: 100%;
        margin: 40px 0;
    }

    .content-text {
        padding: 20px 12px;
        min-height: auto;
        order: 2 !important;
        width: 100%;
    }

    .content-section,
    .content-row,
    .content-text {
        display: block !important;
        min-height: auto !important;
        height: auto !important;
        align-items: unset !important;
    }

    .content-text {
        background: #000 !important;
        z-index: 2 !important;
    }

    .content-text h2 {
        position: static !important;
        margin: 15px 0 20px 0 !important;
        padding: 0 !important;
        background: none !important;
        font-size: 1.5em;
        color: var(--color-light-text) !important;
        padding-right: 12px !important;
        padding-left: 12px !important;
        margin-top: 35px !important;
        margin-bottom: 35px !important;
    }

    .content-text h2::before {
        display: none !important;
    }

    .content-text p {
        margin-bottom: 15px !important;
        color: var(--color-light-text) !important;
    }

    .content-text a.btn,
    .content-text .btn {
        display: block !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 9999 !important;
        margin-top: 20px !important;
    }

    .content-section *,
    .content-row *,
    .content-text * {
        overflow: visible !important;
    }

    .features-header h2 {
        font-size: 1.7em;
    }

    .feature-card-v2 {
        padding: 25px 15px;
        margin-bottom: 20px;
    }

    .feature-icon {
        font-size: 2.2em;
    }

    #cta {
        margin: 20px 10px;
        border-radius: 16px;
        min-height: 300px;
    }

    #cta h2 {
        font-size: 1.4em;
    }

    #cta h5 {
        font-size: 0.85em;
    }

    #cta .btn {
        font-size: 14px;
        padding: 12px 24px;
    }
    
    .btn {
        padding: 12px 24px;
        font-size: 13px;
        margin: 8px 6px;
    }
    
    .accordion-title {
        padding: 15px 20px;
        font-size: 14px;
    }
    
    .accordion-icon {
        width: 30px;
        height: 30px;
        font-size: 18px;
        margin-right: 10px;
    }
    
    .accordion-content {
        padding: 0 20px;
        font-size: 13px;
    }

    .accordion-content.active {
        padding: 15px 20px;
    }

    .footer-nav {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .payment-methods {
        gap: 15px;
        margin: 40px 0;
        padding: 0 10px;
    }

    .payment-icon {
        width: 55px;
        height: 38px;
    }

    .reviews-grid .review-card,
    .service-grid .service-card {
        margin-bottom: 30px;
    }

    .footer {
        margin-top: 60px;
    }

    .wc-block-grid__products,
    .wc-block-components-product-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .wc-block-grid__product,
    .wc-block-components-product-list-item {
        width: 100% !important;
        margin: 0 !important;
    }

    .wc-block-grid__product-title {
        font-size: 14px;
        line-height: 1.4;
    }

    .wc-block-grid__product-add-to-cart a {
        font-size: 13px;
        padding: 8px 10px;
    }

    .single-product .single_add_to_cart_button {
        font-size: 20px;
        padding: 18px;
    }

    .activation-popup {
        padding: 30px 20px;
    }

    .activation-popup h2 {
        font-size: 26px;
    }

    .activation-step {
        flex-direction: column;
        font-size: 18px;
    }
}

@media (min-width: 768px) {
    .mobile-nav {
        display: none !important;
    }
    
    .desktop-nav {
        display: flex !important;
    }
}

.related.products a {
    text-decoration: none !important;
}

.product-card .product-link {
    text-decoration: none !important;
    border-bottom: none !important;
}

.product-card .product-link:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* مهم جداً لأن العنوان جوه اللينك */
.product-card .product-link h3 {
    text-decoration: none !important;
    border: none !important;
}

.pay-badge img {
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1); /* اختياري لو الخلفية داكنة */
}

.devices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (max-width: 768px) {
  .devices-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.btn-primary,
.btn-outline {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section-products {
  padding: 5rem 0;
}

.products-grid {
  margin-top: 3rem;
}

.products-grid ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
}

@media (max-width: 768px) {
  .products-grid ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.pay-badge img {
  height: auto;
  max-height: 16px;
  width: auto;
  display: block;
}

  .whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 8px 20px rgba(37,211,102,.4);
    animation:pulse 1.8s infinite;
    z-index:9999
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.6) }
    70%{ box-shadow:0 0 0 16px rgba(37,211,102,0) }
    100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) }
  }

/* إصلاح مسافات العناوين داخل محتوى ووردبريس ووكومرس */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.wp-block-heading {
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}