<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>أمان — تطبيقك الشامل</title>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --yellow: #FFD000;
            --yellow-light: #FFE566;
            --yellow-dark: #E6B800;
            --black: #0A0A0A;
            --dark: #111111;
            --dark2: #1A1A1A;
            --dark3: #222222;
            --white: #FFFFFF;
            --gray: #888888;
            --gray-light: #BBBBBB;
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Cairo', sans-serif;
            background: var(--black);
            color: var(--white);
            overflow-x: hidden;
        }

        /* ========== SCROLLBAR ========== */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--black); }
        ::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 3px; }

        /* ========== NAV ========== */
        nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            padding: 0 5%;
            height: 75px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(10,10,10,0.85);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255,208,0,0.15);
            transition: all 0.3s;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .nav-logo img {
            height: 42px;
            width: 42px;
            object-fit: contain;
        }

        .nav-logo span {
            font-size: 1.6rem;
            font-weight: 900;
            color: var(--yellow);
            letter-spacing: -0.5px;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 35px;
            list-style: none;
        }

        .nav-links a {
            color: rgba(255,255,255,0.75);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            transition: color 0.2s;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px; right: 0;
            width: 0; height: 2px;
            background: var(--yellow);
            transition: width 0.3s;
        }

        .nav-links a:hover { color: var(--yellow); }
        .nav-links a:hover::after { width: 100%; }

        .btn-nav {
            background: var(--yellow);
            color: var(--black) !important;
            padding: 10px 24px;
            border-radius: 50px;
            font-weight: 700 !important;
            transition: all 0.3s !important;
        }

        .btn-nav::after { display: none !important; }
        .btn-nav:hover {
            background: var(--yellow-light) !important;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255,208,0,0.35);
        }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 5px;
        }

        .hamburger span {
            display: block;
            width: 25px; height: 2px;
            background: var(--yellow);
            transition: all 0.3s;
        }

        /* ========== HERO ========== */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding: 100px 5% 60px;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse 80% 60% at 70% 50%, rgba(255,208,0,0.07) 0%, transparent 60%),
                radial-gradient(ellipse 40% 40% at 20% 80%, rgba(255,208,0,0.05) 0%, transparent 60%),
                var(--black);
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            background-image: 
                linear-gradient(rgba(255,208,0,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,208,0,0.04) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse at 60% 50%, black 30%, transparent 70%);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,208,0,0.12);
            border: 1px solid rgba(255,208,0,0.3);
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--yellow);
            margin-bottom: 24px;
        }

        .hero-badge span { width: 8px; height: 8px; background: var(--yellow); border-radius: 50%; animation: pulse 2s infinite; }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        .hero-title {
            font-size: clamp(2.4rem, 5vw, 4rem);
            font-weight: 900;
            line-height: 1.15;
            margin-bottom: 22px;
            letter-spacing: -1px;
        }

        .hero-title em {
            font-style: normal;
            color: var(--yellow);
            position: relative;
        }

        .hero-desc {
            font-size: 1.1rem;
            color: var(--gray-light);
            line-height: 1.9;
            margin-bottom: 40px;
            max-width: 480px;
        }

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

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--yellow);
            color: var(--black);
            padding: 16px 32px;
            border-radius: 14px;
            font-weight: 800;
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
        }

        .btn-primary:hover {
            background: var(--yellow-light);
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(255,208,0,0.4);
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: transparent;
            color: var(--white);
            padding: 16px 32px;
            border-radius: 14px;
            font-weight: 700;
            font-size: 1rem;
            text-decoration: none;
            border: 2px solid rgba(255,255,255,0.2);
            transition: all 0.3s;
            cursor: pointer;
        }

        .btn-secondary:hover {
            border-color: var(--yellow);
            color: var(--yellow);
            transform: translateY(-3px);
        }

        .hero-stats {
            display: flex;
            gap: 35px;
            margin-top: 50px;
            padding-top: 40px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }

        .stat-num {
            font-size: 1.9rem;
            font-weight: 900;
            color: var(--yellow);
            line-height: 1;
        }

        .stat-label {
            font-size: 0.82rem;
            color: var(--gray);
            margin-top: 4px;
        }

        /* Hero Visual */
        .hero-visual {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .phone-mockup {
            width: 280px;
            height: 560px;
            background: var(--dark2);
            border-radius: 44px;
            border: 2px solid rgba(255,208,0,0.25);
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 
                0 40px 100px rgba(0,0,0,0.7),
                0 0 0 1px rgba(255,255,255,0.05),
                inset 0 0 60px rgba(255,208,0,0.03);
            animation: float 5s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(-1deg); }
            50% { transform: translateY(-20px) rotate(1deg); }
        }

        .phone-notch {
            width: 100px; height: 28px;
            background: var(--black);
            border-radius: 0 0 20px 20px;
            margin: 0 auto 15px;
            flex-shrink: 0;
        }

        .phone-screen {
            flex: 1;
            padding: 0 18px 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .phone-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .phone-logo {
            font-size: 1.1rem;
            font-weight: 900;
            color: var(--yellow);
        }

        .phone-avatar {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--yellow), var(--yellow-dark));
            display: flex; align-items: center; justify-content: center;
            font-size: 0.8rem;
            color: var(--black);
            font-weight: 700;
        }

        .map-placeholder {
            height: 130px;
            background: linear-gradient(135deg, #1a2a1a, #0d1f0d);
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255,208,0,0.1);
        }

        .map-lines {
            position: absolute; inset: 0;
            background: 
                linear-gradient(rgba(255,208,0,0.15) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,208,0,0.15) 1px, transparent 1px);
            background-size: 30px 30px;
        }

        .map-dot {
            position: absolute;
            width: 14px; height: 14px;
            background: var(--yellow);
            border-radius: 50%;
            border: 3px solid var(--white);
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 20px rgba(255,208,0,0.6);
        }

        .map-dot::before {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: 2px solid rgba(255,208,0,0.4);
            animation: ripple 2s infinite;
        }

        @keyframes ripple {
            0% { transform: scale(0.8); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }

        .service-pill {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,208,0,0.08);
            border: 1px solid rgba(255,208,0,0.2);
            padding: 10px 14px;
            border-radius: 12px;
        }

        .service-pill-icon {
            width: 34px; height: 34px;
            background: var(--yellow);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            color: var(--black);
            font-size: 0.85rem;
            flex-shrink: 0;
        }

        .service-pill-text { font-size: 0.78rem; font-weight: 700; }
        .service-pill-sub { font-size: 0.65rem; color: var(--gray); margin-top: 1px; }

        .pill-price {
            margin-right: auto;
            font-size: 0.85rem;
            font-weight: 800;
            color: var(--yellow);
        }

        .phone-btn {
            background: var(--yellow);
            color: var(--black);
            border: none;
            border-radius: 12px;
            padding: 12px;
            font-weight: 800;
            font-size: 0.85rem;
            font-family: 'Cairo', sans-serif;
            cursor: pointer;
        }

        /* Glow behind phone */
        .phone-glow {
            position: absolute;
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(255,208,0,0.12) 0%, transparent 65%);
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        /* Floating badges */
        .float-badge {
            position: absolute;
            background: var(--dark2);
            border: 1px solid rgba(255,208,0,0.3);
            border-radius: 14px;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.82rem;
            font-weight: 700;
            white-space: nowrap;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        }

        .float-badge-icon {
            width: 32px; height: 32px;
            background: var(--yellow);
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            color: var(--black);
        }

        .fb-1 { top: 20%; right: -30px; animation: float2 4s ease-in-out infinite; }
        .fb-2 { bottom: 25%; left: -40px; animation: float2 4s ease-in-out infinite 1.5s; }

        @keyframes float2 {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* ========== SECTION BASE ========== */
        section { padding: 100px 5%; }

        .container { max-width: 1200px; margin: 0 auto; }

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--yellow);
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 16px;
        }

        .section-label::before {
            content: '';
            width: 30px; height: 2px;
            background: var(--yellow);
        }

        .section-title {
            font-size: clamp(1.9rem, 4vw, 3rem);
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: -0.5px;
            margin-bottom: 16px;
        }

        .section-desc {
            font-size: 1.05rem;
            color: var(--gray-light);
            line-height: 1.8;
            max-width: 600px;
        }

        /* ========== SERVICES ========== */
        #services { background: var(--dark); }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 60px;
        }

        .service-card {
            background: var(--dark2);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 24px;
            padding: 36px 30px;
            transition: all 0.4s;
            position: relative;
            overflow: hidden;
            cursor: default;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--yellow), transparent);
            opacity: 0;
            transition: opacity 0.4s;
        }

        .service-card:hover {
            border-color: rgba(255,208,0,0.3);
            transform: translateY(-8px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,208,0,0.1);
        }

        .service-card:hover::before { opacity: 1; }

        .service-bg-icon {
            position: absolute;
            bottom: -20px; left: -20px;
            font-size: 8rem;
            opacity: 0.03;
            color: var(--yellow);
            transition: opacity 0.4s;
        }

        .service-card:hover .service-bg-icon { opacity: 0.06; }

        .service-icon {
            width: 62px; height: 62px;
            background: linear-gradient(135deg, var(--yellow), var(--yellow-dark));
            border-radius: 18px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem;
            color: var(--black);
            margin-bottom: 24px;
        }

        .service-card h3 {
            font-size: 1.35rem;
            font-weight: 800;
            margin-bottom: 12px;
        }

        .service-card p {
            color: var(--gray-light);
            line-height: 1.8;
            font-size: 0.95rem;
        }

        .service-features {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sf-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            color: var(--gray-light);
        }

        .sf-item i { color: var(--yellow); font-size: 0.75rem; }

        /* ========== HOW IT WORKS ========== */
        #how { background: var(--black); }

        .steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-top: 60px;
            position: relative;
        }

        .steps::before {
            content: '';
            position: absolute;
            top: 35px;
            right: calc(12.5% + 20px);
            left: calc(12.5% + 20px);
            height: 2px;
            background: linear-gradient(90deg, var(--yellow), transparent);
        }

        .step {
            text-align: center;
            position: relative;
        }

        .step-num {
            width: 70px; height: 70px;
            border-radius: 50%;
            background: var(--dark2);
            border: 2px solid rgba(255,208,0,0.4);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem;
            font-weight: 900;
            color: var(--yellow);
            margin: 0 auto 20px;
            position: relative;
            z-index: 1;
            transition: all 0.3s;
        }

        .step:hover .step-num {
            background: var(--yellow);
            color: var(--black);
            border-color: var(--yellow);
            transform: scale(1.1);
        }

        .step h4 {
            font-size: 1rem;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .step p {
            font-size: 0.85rem;
            color: var(--gray);
            line-height: 1.7;
        }

        /* ========== ABOUT ========== */
        #about { background: var(--dark); }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .about-visual {
            position: relative;
        }

        .about-img-wrap {
            background: var(--dark2);
            border: 1px solid rgba(255,208,0,0.2);
            border-radius: 28px;
            overflow: hidden;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .logo-display {
            width: 80%;
            filter: drop-shadow(0 0 40px rgba(255,208,0,0.3));
        }

        .about-bg-glow {
            position: absolute;
            width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(255,208,0,0.1) 0%, transparent 70%);
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }

        .about-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            position: absolute;
            bottom: -30px;
            right: -30px;
        }

        .acard {
            background: var(--dark3);
            border: 1px solid rgba(255,208,0,0.2);
            border-radius: 16px;
            padding: 16px;
            text-align: center;
        }

        .acard-num {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--yellow);
        }

        .acard-label {
            font-size: 0.75rem;
            color: var(--gray);
            margin-top: 4px;
        }

        .about-points {
            display: flex;
            flex-direction: column;
            gap: 22px;
            margin-top: 36px;
        }

        .about-point {
            display: flex;
            gap: 18px;
            align-items: flex-start;
        }

        .ap-icon {
            width: 46px; height: 46px;
            background: rgba(255,208,0,0.1);
            border: 1px solid rgba(255,208,0,0.25);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            color: var(--yellow);
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .ap-text h5 { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
        .ap-text p { font-size: 0.85rem; color: var(--gray); line-height: 1.6; }

        /* ========== REGISTER FORM ========== */
        #register { background: var(--black); }

        .register-wrap {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 60px;
            align-items: start;
        }

        .register-info h2 { margin-bottom: 16px; }

        .register-info p {
            color: var(--gray-light);
            line-height: 1.8;
            margin-bottom: 36px;
        }

        .info-list {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 0.95rem;
        }

        .info-icon {
            width: 42px; height: 42px;
            background: rgba(255,208,0,0.1);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            color: var(--yellow);
            flex-shrink: 0;
        }

        /* Form */
        .form-card {
            background: var(--dark2);
            border: 1px solid rgba(255,208,0,0.15);
            border-radius: 28px;
            padding: 40px;
        }

        .form-title {
            font-size: 1.4rem;
            font-weight: 800;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }

        .type-select {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 28px;
        }

        .type-btn {
            background: var(--dark3);
            border: 2px solid rgba(255,255,255,0.08);
            border-radius: 14px;
            padding: 16px 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.25s;
            font-family: 'Cairo', sans-serif;
            color: var(--white);
        }

        .type-btn i {
            font-size: 1.6rem;
            display: block;
            margin-bottom: 8px;
            color: var(--gray);
            transition: color 0.25s;
        }

        .type-btn span { font-size: 0.9rem; font-weight: 700; }

        .type-btn:hover, .type-btn.active {
            border-color: var(--yellow);
            background: rgba(255,208,0,0.08);
        }

        .type-btn.active i { color: var(--yellow); }
        .type-btn:hover i { color: var(--yellow-light); }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }

        .form-group { margin-bottom: 16px; }
        .form-group.full { grid-column: 1 / -1; }

        label {
            display: block;
            font-size: 0.88rem;
            font-weight: 700;
            color: rgba(255,255,255,0.8);
            margin-bottom: 8px;
        }

        input, select, textarea {
            width: 100%;
            background: var(--dark3);
            border: 1.5px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            padding: 13px 16px;
            color: var(--white);
            font-family: 'Cairo', sans-serif;
            font-size: 0.95rem;
            transition: all 0.25s;
            outline: none;
            -webkit-appearance: none;
        }

        input::placeholder, textarea::placeholder { color: var(--gray); }

        input:focus, select:focus, textarea:focus {
            border-color: var(--yellow);
            box-shadow: 0 0 0 3px rgba(255,208,0,0.12);
            background: #1e1e1e;
        }

        select { cursor: pointer; }

        select option { background: var(--dark3); }

        textarea { resize: vertical; min-height: 100px; }

        .business-field {
            display: none;
            margin-bottom: 16px;
        }

        .submit-btn {
            width: 100%;
            background: var(--yellow);
            color: var(--black);
            border: none;
            border-radius: 14px;
            padding: 16px;
            font-size: 1.05rem;
            font-weight: 800;
            font-family: 'Cairo', sans-serif;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .submit-btn:hover {
            background: var(--yellow-light);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(255,208,0,0.35);
        }

        .success-msg {
            background: rgba(0,200,83,0.12);
            border: 1px solid rgba(0,200,83,0.3);
            color: #00E676;
            border-radius: 14px;
            padding: 16px;
            text-align: center;
            margin-bottom: 20px;
            font-weight: 600;
        }

        /* ========== FOOTER ========== */
        footer {
            background: var(--dark);
            border-top: 1px solid rgba(255,208,0,0.1);
            padding: 50px 5% 30px;
        }

        .footer-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 50px;
            margin-bottom: 40px;
        }

        .footer-brand p {
            color: var(--gray);
            line-height: 1.7;
            font-size: 0.9rem;
            margin-top: 16px;
            max-width: 280px;
        }

        .footer-col h5 {
            font-weight: 800;
            font-size: 1rem;
            margin-bottom: 20px;
            color: var(--yellow);
        }

        .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

        .footer-col a {
            color: var(--gray);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.2s;
        }

        .footer-col a:hover { color: var(--yellow); }

        .footer-bottom {
            max-width: 1200px;
            margin: 0 auto;
            padding-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--gray);
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 1024px) {
            .hero-content { grid-template-columns: 1fr; gap: 50px; }
            .hero-visual { order: -1; }
            .services-grid { grid-template-columns: 1fr 1fr; }
            .steps { grid-template-columns: repeat(2, 1fr); }
            .steps::before { display: none; }
            .about-grid { grid-template-columns: 1fr; gap: 50px; }
            .register-wrap { grid-template-columns: 1fr; gap: 40px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 768px) {
            nav { padding: 0 4%; }
            .nav-links { display: none; flex-direction: column; position: fixed; top: 75px; right: 0; left: 0; background: rgba(10,10,10,0.97); padding: 30px; gap: 25px; border-bottom: 1px solid rgba(255,208,0,0.1); }
            .nav-links.open { display: flex; }
            .hamburger { display: flex; }
            section { padding: 70px 4%; }
            .services-grid { grid-template-columns: 1fr; }
            .steps { grid-template-columns: 1fr 1fr; }
            .form-row { grid-template-columns: 1fr; }
            .type-select { grid-template-columns: 1fr 1fr 1fr; }
            .footer-grid { grid-template-columns: 1fr; gap: 30px; }
            .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
            .phone-mockup { width: 220px; height: 440px; }
            .float-badge { display: none; }
            .hero-stats { gap: 20px; }
        }

        @media (max-width: 480px) {
            .hero-btns { flex-direction: column; }
            .btn-primary, .btn-secondary { justify-content: center; }
            .type-select { grid-template-columns: repeat(3, 1fr); }
            .steps { grid-template-columns: 1fr; }
            .form-card { padding: 25px; }
        }

        /* ========== ANIMATIONS ========== */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }
    </style>
</head>
<body>

<!-- ===== NAV ===== -->
<nav id="navbar">
    <a href="#" class="nav-logo">
        <img src="<?php echo e(asset('images/logo.png')); ?>" alt="أمان" onerror="this.style.display='none'">
        <span>أمان</span>
    </a>
    <ul class="nav-links" id="navLinks">
        <li><a href="#about">عن التطبيق</a></li>
        <li><a href="#services">الخدمات</a></li>
        <li><a href="#how">كيف يعمل</a></li>
        <li><a href="#register">انضم كشريك</a></li>
        <li><a href="<?php echo e(route('login')); ?>" class="btn-nav">تسجيل الدخول</a></li>
    </ul>
    <div class="hamburger" id="hamburger" onclick="toggleNav()">
        <span></span>
        <span></span>
        <span></span>
    </div>
</nav>

<!-- ===== HERO ===== -->
<section class="hero" id="home">
    <div class="hero-bg"></div>
    <div class="hero-grid"></div>

    <div class="hero-content">
        <div class="hero-text">
            <div class="hero-badge"><span></span> منصة رقمية عراقية</div>
            <h1 class="hero-title">
                كل ما تحتاجه<br>في تطبيق <em>واحد</em>
            </h1>
            <p class="hero-desc">
                تاكسي، مطاعم، وغاز — أمان يجمع أفضل الخدمات اليومية في منصة واحدة سهلة وآمنة وسريعة، صُممت للعراق.
            </p>
            <div class="hero-btns">
                <a href="#register" class="btn-primary">
                    <i class="fas fa-user-plus"></i> انضم كشريك
                </a>
                <a href="<?php echo e(route('invite')); ?>" class="btn-secondary">
                    <i class="fas fa-gift"></i> كود الدعوة
                </a>
            </div>
            <div class="hero-stats">
                <div>
                    <div class="stat-num">3+</div>
                    <div class="stat-label">خدمات متكاملة</div>
                </div>
                <div>
                    <div class="stat-num">24/7</div>
                    <div class="stat-label">متوفر دائماً</div>
                </div>
                <div>
                    <div class="stat-num">100%</div>
                    <div class="stat-label">آمن وموثوق</div>
                </div>
            </div>
        </div>

        <div class="hero-visual">
            <div class="phone-glow"></div>

            <div class="float-badge fb-1">
                <div class="float-badge-icon"><i class="fas fa-check"></i></div>
                <div>
                    <div style="font-size:0.85rem">رحلة مؤكدة</div>
                    <div style="font-size:0.72rem; color:var(--gray)">في طريقه إليك</div>
                </div>
            </div>

            <div class="float-badge fb-2">
                <div class="float-badge-icon"><i class="fas fa-star"></i></div>
                <div>
                    <div style="font-size:0.85rem">تقييم 4.9</div>
                    <div style="font-size:0.72rem; color:var(--gray)">مقدمي الخدمة</div>
                </div>
            </div>

            <div class="phone-mockup">
                <div class="phone-notch"></div>
                <div class="phone-screen">
                    <div class="phone-header">
                        <div class="phone-logo">أمان</div>
                        <div class="phone-avatar">أ</div>
                    </div>

                    <div class="map-placeholder">
                        <div class="map-lines"></div>
                        <div class="map-dot"></div>
                    </div>

                    <div class="service-pill">
                        <div class="service-pill-icon"><i class="fas fa-car"></i></div>
                        <div>
                            <div class="service-pill-text">تاكسي قريب</div>
                            <div class="service-pill-sub">3 دقائق بعيد</div>
                        </div>
                        <div class="pill-price">2,500 د</div>
                    </div>

                    <div class="service-pill">
                        <div class="service-pill-icon"><i class="fas fa-utensils"></i></div>
                        <div>
                            <div class="service-pill-text">طلب مطعم</div>
                            <div class="service-pill-sub">20 دقيقة توصيل</div>
                        </div>
                        <div class="pill-price">جاهز</div>
                    </div>

                    <button class="phone-btn">احجز الآن</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ===== SERVICES ===== -->
<section id="services">
    <div class="container">
        <div class="reveal">
            <div class="section-label">خدماتنا</div>
            <h2 class="section-title">خدمات متكاملة لحياتك اليومية</h2>
            <p class="section-desc">نقدم ثلاث خدمات أساسية في منصة واحدة مدمجة وسهلة الاستخدام</p>
        </div>

        <div class="services-grid">
            <div class="service-card reveal reveal-delay-1">
                <div class="service-bg-icon"><i class="fas fa-car"></i></div>
                <div class="service-icon"><i class="fas fa-car"></i></div>
                <h3>خدمة التاكسي</h3>
                <p>احجز رحلتك في ثوانٍ. سائقون معتمدون وموثوقون مع تتبع مباشر وأسعار شفافة.</p>
                <div class="service-features">
                    <div class="sf-item"><i class="fas fa-check-circle"></i> تتبع مباشر للرحلة</div>
                    <div class="sf-item"><i class="fas fa-check-circle"></i> سائقون معتمدون</div>
                    <div class="sf-item"><i class="fas fa-check-circle"></i> أسعار ثابتة وواضحة</div>
                </div>
            </div>

            <div class="service-card reveal reveal-delay-2">
                <div class="service-bg-icon"><i class="fas fa-utensils"></i></div>
                <div class="service-icon"><i class="fas fa-utensils"></i></div>
                <h3>توصيل المطاعم</h3>
                <p>اطلب من أفضل المطاعم المحلية. توصيل سريع وطازج مباشرة إلى باب منزلك.</p>
                <div class="service-features">
                    <div class="sf-item"><i class="fas fa-check-circle"></i> مطاعم موثوقة ومتنوعة</div>
                    <div class="sf-item"><i class="fas fa-check-circle"></i> توصيل سريع</div>
                    <div class="sf-item"><i class="fas fa-check-circle"></i> تتبع طلبك لحظياً</div>
                </div>
            </div>

            <div class="service-card reveal reveal-delay-3">
                <div class="service-bg-icon"><i class="fas fa-fire-alt"></i></div>
                <div class="service-icon"><i class="fas fa-fire-alt"></i></div>
                <h3>توصيل الغاز</h3>
                <p>اطلب اسطوانات الغاز من مكاتب معتمدة. توصيل آمن وسريع إلى منزلك.</p>
                <div class="service-features">
                    <div class="sf-item"><i class="fas fa-check-circle"></i> مكاتب معتمدة ومرخصة</div>
                    <div class="sf-item"><i class="fas fa-check-circle"></i> توصيل آمن مضمون</div>
                    <div class="sf-item"><i class="fas fa-check-circle"></i> أسعار رسمية</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ===== HOW IT WORKS ===== -->
<section id="how">
    <div class="container">
        <div class="reveal" style="text-align:center">
            <div class="section-label" style="justify-content:center">كيف يعمل</div>
            <h2 class="section-title" style="text-align:center">أربع خطوات بسيطة</h2>
        </div>

        <div class="steps">
            <div class="step reveal reveal-delay-1">
                <div class="step-num">١</div>
                <h4>حمّل التطبيق</h4>
                <p>حمّل أمان مجاناً وأنشئ حسابك في دقيقة واحدة</p>
            </div>
            <div class="step reveal reveal-delay-2">
                <div class="step-num">٢</div>
                <h4>اختر الخدمة</h4>
                <p>تاكسي، مطعم، أو غاز — اختر ما تحتاجه</p>
            </div>
            <div class="step reveal reveal-delay-3">
                <div class="step-num">٣</div>
                <h4>تأكيد الطلب</h4>
                <p>راجع التفاصيل والسعر وأكد طلبك بضغطة زر</p>
            </div>
            <div class="step reveal reveal-delay-4">
                <div class="step-num">٤</div>
                <h4>استلم خدمتك</h4>
                <p>تابع التوصيل مباشرة وقيّم تجربتك</p>
            </div>
        </div>
    </div>
</section>

<!-- ===== ABOUT ===== -->
<section id="about">
    <div class="container">
        <div class="about-grid">
            <div class="about-visual reveal">
                <div class="about-img-wrap">
                    <div class="about-bg-glow"></div>
                    <img src="<?php echo e(asset('images/logo.png')); ?>" alt="أمان" class="logo-display"
                         onerror="this.style.opacity='0.2'; this.style.fontSize='8rem'">
                </div>
                <div class="about-cards">
                    <div class="acard">
                        <div class="acard-num">٣</div>
                        <div class="acard-label">خدمات</div>
                    </div>
                    <div class="acard">
                        <div class="acard-num">٢٤/٧</div>
                        <div class="acard-label">متاح</div>
                    </div>
                </div>
            </div>

            <div class="reveal reveal-delay-2">
                <div class="section-label">عن أمان</div>
                <h2 class="section-title">منصة عراقية بمعايير عالمية</h2>
                <p style="color:var(--gray-light); line-height:1.9; font-size:1rem; margin-bottom:8px;">
                    أمان منصة رقمية عراقية تربط بين العملاء ومقدمي الخدمات بسهولة وأمان. صُممت خصيصاً لتلبية احتياجات الحياة اليومية في العراق.
                </p>

                <div class="about-points">
                    <div class="about-point">
                        <div class="ap-icon"><i class="fas fa-shield-alt"></i></div>
                        <div class="ap-text">
                            <h5>أمان وثقة</h5>
                            <p>جميع مقدمي الخدمة موثّقون ومعتمدون مع نظام تقييم شفاف</p>
                        </div>
                    </div>
                    <div class="about-point">
                        <div class="ap-icon"><i class="fas fa-bolt"></i></div>
                        <div class="ap-text">
                            <h5>سرعة وكفاءة</h5>
                            <p>تقنية متقدمة تضمن أسرع استجابة وأفضل تجربة للمستخدم</p>
                        </div>
                    </div>
                    <div class="about-point">
                        <div class="ap-icon"><i class="fas fa-map-marker-alt"></i></div>
                        <div class="ap-text">
                            <h5>تغطية واسعة</h5>
                            <p>نتوسع في المدن العراقية تدريجياً لنغطي أكبر عدد ممكن من المناطق</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ===== REGISTER ===== -->
<section id="register">
    <div class="container">
        <div class="register-wrap">
            <div class="register-info reveal">
                <div class="section-label">انضم إلينا</div>
                <h2 class="section-title">كن شريكاً في أمان</h2>
                <p>سجّل طلب انضمامك كشريك وسنتواصل معك خلال 24 ساعة لإتمام الإجراءات وبدء العمل.</p>

                <div class="info-list">
                    <div class="info-item">
                        <div class="info-icon"><i class="fas fa-car"></i></div>
                        <span>سائقون — انضم وابدأ استقبال الطلبات فوراً</span>
                    </div>
                    <div class="info-item">
                        <div class="info-icon"><i class="fas fa-utensils"></i></div>
                        <span>مطاعم — وسّع نطاق عملك وارفع مبيعاتك</span>
                    </div>
                    <div class="info-item">
                        <div class="info-icon"><i class="fas fa-fire-alt"></i></div>
                        <span>مكاتب غاز — اوصل خدمتك للمزيد من العملاء</span>
                    </div>
                    <div class="info-item">
                        <div class="info-icon"><i class="fas fa-headset"></i></div>
                        <span>دعم فني متواصل لجميع الشركاء</span>
                    </div>
                </div>
            </div>

            <div class="form-card reveal reveal-delay-2">
                <div class="form-title">
                    <i class="fas fa-handshake" style="color:var(--yellow); margin-left:10px;"></i>
                    طلب الانضمام
                </div>

                
                <?php if(session('success')): ?>
                <div class="success-msg">
                    <i class="fas fa-check-circle"></i> <?php echo e(session('success')); ?>

                </div>
                <?php endif; ?>

                <?php if($errors->any()): ?>
                <div class="success-msg" style="background:rgba(255,50,50,0.12); border-color:rgba(255,50,50,0.3); color:#ff6b6b;">
                    <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $e): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><div>• <?php echo e($e); ?></div><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
                <?php endif; ?>

                <form action="<?php echo e(route('partner.register')); ?>" method="POST">
                    <?php echo csrf_field(); ?>

                    <div class="type-select">
                        <button type="button" class="type-btn active" data-value="driver" onclick="selectType(this)">
                            <i class="fas fa-car"></i>
                            <span>سائق</span>
                        </button>
                        <button type="button" class="type-btn" data-value="restaurant" onclick="selectType(this)">
                            <i class="fas fa-utensils"></i>
                            <span>مطعم</span>
                        </button>
                        <button type="button" class="type-btn" data-value="gas_office" onclick="selectType(this)">
                            <i class="fas fa-fire-alt"></i>
                            <span>غاز</span>
                        </button>
                    </div>

                    <input type="hidden" name="partner_type" id="partnerType" value="<?php echo e(old('partner_type', 'driver')); ?>">

                    <div class="form-row">
                        <div class="form-group">
                            <label>الاسم الكامل *</label>
                            <input type="text" name="name" placeholder="أدخل اسمك الكامل" value="<?php echo e(old('name')); ?>" required>
                        </div>
                        <div class="form-group">
                            <label>رقم الهاتف *</label>
                            <input type="tel" name="phone" placeholder="07XXXXXXXXX" value="<?php echo e(old('phone')); ?>" required>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>البريد الإلكتروني</label>
                            <input type="email" name="email" placeholder="example@email.com" value="<?php echo e(old('email')); ?>">
                        </div>
                        <div class="form-group">
                            <label>المدينة</label>
                            <input type="text" name="city" placeholder="بغداد، الناصرية،..." value="<?php echo e(old('city')); ?>">
                        </div>
                    </div>

                    <div class="business-field" id="businessField">
                        <label>اسم المنشأة / المطعم / المكتب</label>
                        <input type="text" name="business_name" placeholder="اسم الجهة" value="<?php echo e(old('business_name')); ?>">
                    </div>

                    <div class="form-group">
                        <label>ملاحظات إضافية</label>
                        <textarea name="notes" placeholder="أي معلومات إضافية تود مشاركتها..."><?php echo e(old('notes')); ?></textarea>
                    </div>

                    <button type="submit" class="submit-btn">
                        <i class="fas fa-paper-plane"></i> إرسال الطلب
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- ===== FOOTER ===== -->
<footer>
    <div class="footer-grid">
        <div class="footer-brand">
            <a href="#" class="nav-logo" style="text-decoration:none;">
                <img src="<?php echo e(asset('images/logo.png')); ?>" alt="أمان" style="height:38px; object-fit:contain;" onerror="this.style.display='none'">
                <span style="font-size:1.5rem; font-weight:900; color:var(--yellow);">أمان</span>
            </a>
            <p>منصة رقمية عراقية تجمع خدمات التاكسي والمطاعم والغاز في تطبيق واحد سهل وآمن.</p>
        </div>

        <div class="footer-col">
            <h5>الخدمات</h5>
            <ul>
                <li><a href="#services">خدمة التاكسي</a></li>
                <li><a href="#services">توصيل المطاعم</a></li>
                <li><a href="#services">توصيل الغاز</a></li>
            </ul>
        </div>

        <div class="footer-col">
            <h5>روابط</h5>
            <ul>
                <li><a href="<?php echo e(route('login')); ?>">لوحة التحكم</a></li>
                <li><a href="<?php echo e(route('invite')); ?>">كود الدعوة</a></li>
                <li><a href="<?php echo e(route('privacy-policy')); ?>">سياسة الخصوصية</a></li>
                <li><a href="#register">انضم كشريك</a></li>
            </ul>
        </div>
    </div>

    <div class="footer-bottom">
        <span>&copy; <?php echo e(date('Y')); ?> أمان. جميع الحقوق محفوظة.</span>
        <span>صُنع بـ ❤️ في العراق</span>
    </div>
</footer>

<script>
    // Nav toggle
    function toggleNav() {
        document.getElementById('navLinks').classList.toggle('open');
    }

    // Close nav on link click
    document.querySelectorAll('#navLinks a').forEach(a => {
        a.addEventListener('click', () => {
            document.getElementById('navLinks').classList.remove('open');
        });
    });

    // Navbar scroll
    window.addEventListener('scroll', () => {
        const nav = document.getElementById('navbar');
        if (window.scrollY > 50) {
            nav.style.boxShadow = '0 4px 30px rgba(0,0,0,0.5)';
        } else {
            nav.style.boxShadow = 'none';
        }
    });

    // Partner type selection
    function selectType(btn) {
        document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const val = btn.dataset.value;
        document.getElementById('partnerType').value = val;
        const bf = document.getElementById('businessField');
        bf.style.display = (val === 'restaurant' || val === 'gas_office') ? 'block' : 'none';
    }

    // Init type from old value
    const oldType = document.getElementById('partnerType').value;
    document.querySelectorAll('.type-btn').forEach(btn => {
        if (btn.dataset.value === oldType) {
            btn.classList.add('active');
            if (oldType !== 'driver') {
                document.getElementById('businessField').style.display = 'block';
            }
        } else {
            btn.classList.remove('active');
        }
    });

    // Reveal on scroll
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(e => {
            if (e.isIntersecting) {
                e.target.classList.add('visible');
            }
        });
    }, { threshold: 0.1 });

    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>

</body>
</html><?php /**PATH C:\wamp64\www\taxi_app\resources\views/landing.blade.php ENDPATH**/ ?>