/*
Theme Name: أبو ثابت للبرمجيات
Theme URI: https://abothabet.com
Author: أبو ثابت للبرمجيات
Author URI: https://abothabet.com
Description: قالب صفحة هبوط أحادية لعرض برامج أبو ثابت (تقييم الأداء، أرسل، تعبئة، دورك، مواعيد). كل النصوص والروابط والأرقام والشعارات قابلة للتعديل من "المظهر ‹ تخصيص" دون الحاجة إلى FTP.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abothabet
Tags: rtl-language-support, custom-colors, one-page, full-width-template
RTL: yes
*/

/* ============================================================
   ملاحظة: الخطوط (Cairo + Noto Kufi Arabic) تُحمّل عبر functions.php
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
    html { direction: rtl; scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      background: #0A1628;
      color: #ffffff;
      font-family: 'Noto Kufi Arabic', sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3, h4, .cairo { font-family: 'Cairo', sans-serif; margin: 0; }
    a { text-decoration: none; }
    ::selection { background: #57C5B6; color: #0F1B2D; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: #0A1628; }
    ::-webkit-scrollbar-thumb { background: #1F365A; border-radius: 5px; }
    ::-webkit-scrollbar-thumb:hover { background: #2E6F7E; }

    .ab-container { max-width: 80rem; margin: 0 auto; padding: 0 24px; }

    /* ===== NAV ===== */
    .ab-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      padding: 24px 0; background: transparent;
      transition: all .3s ease;
    }
    .ab-nav.scrolled {
      padding: 16px 0;
      background: rgba(10, 22, 40, 0.85);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      box-shadow: 0 25px 50px -12px rgba(0,0,0,.5);
    }
    .ab-nav-inner { max-width: 80rem; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
    .ab-nav-logo { display: flex; align-items: center; gap: 12px; position: relative; }
    .ab-nav-logo img { height: 64px; width: auto; transition: transform .5s ease; }
    .ab-nav-logo:hover img { transform: scale(1.05); }
    .ab-nav-links { display: none; align-items: center; gap: 32px; font-family: 'Cairo', sans-serif; font-weight: 600; font-size: 1.125rem; }
    @media (min-width: 768px) { .ab-nav-links { display: flex; } }
    .ab-nav-link { position: relative; background: none; border: none; cursor: pointer; color: #d1d5db; font: inherit; padding: 0; transition: color .3s; }
    .ab-nav-link::after { content: ''; position: absolute; bottom: -4px; right: 0; width: 0; height: 2px; background: #57C5B6; transition: width .3s; }
    .ab-nav-link:hover { color: #57C5B6; }
    .ab-nav-link:hover::after { width: 100%; }
    .ab-nav-link.gold:hover { color: #E8C07D; }
    .ab-nav-link.gold::after { background: #E8C07D; }
    .ab-nav-cta {
      background: #57C5B6; color: #0A1628; padding: 8px 24px; border-radius: 9999px;
      border: none; cursor: pointer; font: inherit; font-family: 'Cairo', sans-serif; font-weight: 600;
      transition: all .3s ease;
    }
    .ab-nav-cta:hover { background: #48A89A; box-shadow: 0 0 20px rgba(87,197,182,.4); transform: translateY(-2px); }

    /* ===== HERO ===== */
    .ab-hero { position: relative; min-height: 100dvh; display: flex; align-items: center; padding-top: 80px; overflow: hidden; }
    #ab-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
    .ab-glow { position: absolute; border-radius: 9999px; pointer-events: none; }
    .ab-glow-1 { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: #57C5B6; opacity: .10; filter: blur(120px); }
    .ab-glow-2 { top: 25%; right: 25%; width: 500px; height: 500px; background: #E8C07D; opacity: .05; filter: blur(100px); }
    .ab-hero-inner { position: relative; z-index: 10; width: 100%; }
    .ab-hero-grid { display: flex; flex-direction: column; align-items: center; gap: 48px; }
    @media (min-width: 1024px) { .ab-hero-grid { flex-direction: row; gap: 64px; } }
    .ab-hero-text { flex: 1; text-align: center; order: 2; }
    @media (min-width: 1024px) { .ab-hero-text { text-align: right; } }
    .ab-hero-text h1 { font-weight: 700; font-size: 3rem; line-height: 1.15; margin-bottom: 24px; }
    @media (min-width: 768px) { .ab-hero-text h1 { font-size: 3.75rem; } }
    @media (min-width: 1280px) { .ab-hero-text h1 { font-size: 4.5rem; } }
    .ab-gradient-text { background: linear-gradient(to right, #57C5B6, #E8C07D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
    .ab-hero-text p { font-size: 1.25rem; color: #d1d5db; margin: 0 auto 48px; max-width: 36rem; line-height: 1.7; }
    @media (min-width: 768px) { .ab-hero-text p { font-size: 1.5rem; } }
    @media (min-width: 1024px) { .ab-hero-text p { margin-right: 0; margin-left: 0; max-width: none; } }
    .ab-hero-buttons { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
    @media (min-width: 640px) { .ab-hero-buttons { flex-direction: row; } }
    @media (min-width: 1024px) { .ab-hero-buttons { align-items: flex-start; justify-content: flex-start; } }

    .ab-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 16px 32px; border-radius: 9999px; cursor: pointer; border: none;
      font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 1.125rem;
      transition: all .3s ease; color: #fff;
    }
    .ab-btn-primary { background: linear-gradient(to right, #57C5B6, #2E6F7E); box-shadow: 0 0 30px rgba(87,197,182,.3); }
    .ab-btn-primary:hover { box-shadow: 0 0 40px rgba(87,197,182,.6); transform: translateY(-4px); }
    .ab-btn-ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
    .ab-btn-ghost:hover { background: rgba(255,255,255,.1); }
    @media (max-width: 639px) { .ab-hero-buttons .ab-btn { width: 100%; } }
    .ab-btn svg { width: 20px; height: 20px; }
    .ab-btn-primary:hover .ab-chevron { transform: translateY(4px); }
    .ab-chevron { transition: transform .3s; }

    /* Hero icon */
    .ab-hero-icon { flex-shrink: 0; order: 1; position: relative; display: flex; align-items: center; justify-content: center; }
    .ab-icon-ring { position: absolute; inset: 0; border-radius: 9999px; }
    .ab-icon-ring.teal { background: #57C5B6; opacity: .2; filter: blur(48px); transform: scale(1.5); animation: ab-pulse 3s ease-in-out infinite; }
    .ab-icon-ring.gold { background: #E8C07D; opacity: .1; filter: blur(32px); transform: scale(1.25); }
    .ab-hero-icon img {
      position: relative; z-index: 10; width: 208px; height: 208px;
      filter: drop-shadow(0 0 60px rgba(87,197,182,.5));
      animation: ab-float 4s ease-in-out infinite;
    }
    @media (min-width: 768px) { .ab-hero-icon img { width: 256px; height: 256px; } }
    @media (min-width: 1024px) { .ab-hero-icon img { width: 320px; height: 320px; } }
    @media (min-width: 1280px) { .ab-hero-icon img { width: 384px; height: 384px; } }

    /* Scroll indicator */
    .ab-scroll-ind { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #6b7280; cursor: pointer; transition: color .3s; opacity: 0; animation: ab-fade-in 1s ease forwards 1.5s; }
    .ab-scroll-ind:hover { color: #fff; }
    .ab-scroll-ind span { font-size: .875rem; letter-spacing: .05em; text-transform: uppercase; font-family: 'Noto Kufi Arabic', sans-serif; }
    .ab-scroll-track { width: 2px; height: 48px; background: linear-gradient(to bottom, #6b7280, transparent); border-radius: 9999px; overflow: hidden; }
    .ab-scroll-dot { width: 100%; height: 50%; background: #57C5B6; border-radius: 9999px; animation: ab-scroll-move 2s ease-in-out infinite; }

    /* ===== SECTION TITLES ===== */
    .ab-section { padding: 128px 0; position: relative; z-index: 10; }
    .ab-section-head { text-align: center; margin-bottom: 96px; }
    .ab-section-head h2 { font-weight: 700; font-size: 2.25rem; margin-bottom: 16px; }
    @media (min-width: 768px) { .ab-section-head h2 { font-size: 3rem; } }
    .ab-section-rule { width: 96px; height: 4px; background: linear-gradient(to right, transparent, #57C5B6, transparent); margin: 0 auto; border-radius: 9999px; }

    /* ===== PRODUCTS ===== */
    .ab-products-list { display: flex; flex-direction: column; gap: 128px; }
    .ab-product {
      display: flex; flex-direction: column; align-items: center; gap: 48px;
      opacity: 0; transform: translateY(50px); transition: opacity .8s ease, transform .8s ease;
    }
    .ab-product.in-view { opacity: 1; transform: translateY(0); }
    @media (min-width: 1024px) {
      .ab-product { flex-direction: row; gap: 96px; }
      .ab-product.reverse { flex-direction: row-reverse; }
    }
    .ab-product-visual { width: 100%; position: relative; }
    @media (min-width: 1024px) { .ab-product-visual { width: 50%; } }
    .ab-product-visual-glow { position: absolute; inset: 0; opacity: .2; filter: blur(48px); transition: opacity .7s; }
    .ab-product-visual:hover .ab-product-visual-glow { opacity: .4; }
    .ab-product-card {
      position: relative; overflow: hidden; border-radius: 24px; border: 1px solid;
      aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
      transition: transform .7s ease, box-shadow .7s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    }
    .ab-product-card:hover { transform: translateY(-8px); }
    .ab-product-corner { position: absolute; top: 0; right: 0; width: 128px; height: 128px; opacity: .1; border-bottom-left-radius: 9999px; }
    .ab-product-logo { width: 85%; height: 80%; object-fit: contain; position: relative; z-index: 10; transition: transform .4s; }
    .ab-product-card:hover .ab-product-logo { transform: scale(1.05); }

    .ab-product-content { width: 100%; display: flex; flex-direction: column; gap: 32px; }
    @media (min-width: 1024px) { .ab-product-content { width: 50%; } }
    .ab-tag {
      display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 9999px;
      background: rgba(15,27,45,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1);
      align-self: flex-start;
    }
    .ab-tag-dot { width: 12px; height: 12px; border-radius: 9999px; animation: ab-pulse-dot 2s ease-in-out infinite; }
    .ab-tag span { font-size: .875rem; font-weight: 700; letter-spacing: .05em; }
    .ab-product-content h3 { font-weight: 700; font-size: 1.875rem; line-height: 1.2; }
    @media (min-width: 768px) { .ab-product-content h3 { font-size: 2.25rem; } }
    .ab-product-desc { font-size: 1.125rem; color: #9ca3af; line-height: 1.7; }
    .ab-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media (min-width: 768px) { .ab-features { grid-template-columns: 1fr 1fr; } }
    .ab-features li { display: flex; align-items: flex-start; gap: 12px; }
    .ab-features li svg { width: 24px; height: 24px; margin-top: 2px; flex-shrink: 0; }
    .ab-features li span { color: #d1d5db; }
    .ab-product-cta {
      display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 9999px;
      color: #fff; font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 1.125rem;
      transition: all .3s ease; align-self: flex-start;
    }
    .ab-product-cta:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,.3); }
    .ab-product-cta svg { width: 20px; height: 20px; transition: transform .3s; }
    .ab-product-cta:hover svg { transform: translateX(-4px); }

    /* ===== CONTACT ===== */
    .ab-contact { padding: 128px 0; position: relative; z-index: 10; background: rgba(15,27,45,0.5); border-top: 1px solid rgba(255,255,255,0.05); text-align: center; }
    .ab-contact-inner { max-width: 56rem; margin: 0 auto; padding: 0 24px; }
    .ab-contact h2 { font-weight: 700; font-size: 2.25rem; margin-bottom: 24px; }
    @media (min-width: 768px) { .ab-contact h2 { font-size: 3rem; } }
    .ab-contact p { font-size: 1.25rem; color: #9ca3af; margin: 0 auto 48px; max-width: 42rem; }
    .ab-contact-buttons { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
    @media (min-width: 640px) { .ab-contact-buttons { flex-direction: row; } }
    .ab-contact-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 12px;
      padding: 20px 40px; border-radius: 16px; color: #fff;
      font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 1.25rem; transition: all .3s ease;
    }
    @media (max-width: 639px) { .ab-contact-btn { width: 100%; } }
    .ab-contact-btn svg { width: 24px; height: 24px; }
    .ab-contact-wa { background: #25D366; box-shadow: 0 10px 30px rgba(37,211,102,.3); }
    .ab-contact-wa:hover { box-shadow: 0 10px 40px rgba(37,211,102,.5); transform: translateY(-4px); }
    .ab-contact-mail { background: rgba(15,27,45,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); }
    .ab-contact-mail:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }

    /* ===== FOOTER ===== */
    .ab-footer { padding: 48px 0; border-top: 1px solid rgba(255,255,255,0.05); background: #0A1628; position: relative; z-index: 10; }
    .ab-footer-top { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 32px; }
    @media (min-width: 768px) { .ab-footer-top { flex-direction: row; } }
    .ab-footer-logo { height: 32px; width: auto; filter: grayscale(1); opacity: .7; transition: all .5s ease; }
    .ab-footer-logo:hover { filter: grayscale(0); opacity: 1; }
    .ab-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
    .ab-footer-link { color: #6b7280; font-size: .875rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; transition: color .3s; }
    .ab-footer-link:hover { color: #fff; }
    .ab-footer-copy { text-align: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.05); color: #4b5563; font-size: .875rem; }

    /* ===== KEYFRAMES ===== */
    @keyframes ab-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
    @keyframes ab-pulse { 0%,100% { opacity: .2; } 50% { opacity: .35; } }
    @keyframes ab-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
    @keyframes ab-fade-in { to { opacity: 1; } }
    @keyframes ab-scroll-move { 0%,100% { transform: translateY(0); } 50% { transform: translateY(48px); } }
    @keyframes ab-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes ab-icon-in { from { opacity: 0; transform: scale(.7) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

    .ab-rise { opacity: 0; animation: ab-rise .8s ease forwards; }
    .ab-rise-1 { animation-delay: .2s; }
    .ab-rise-2 { animation-delay: .4s; }
    .ab-rise-3 { animation-delay: .6s; }
    .ab-icon-anim { animation: ab-icon-in 1.2s ease forwards; }

    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
      .ab-rise, .ab-product { opacity: 1 !important; transform: none !important; }
    }