:root{--brand-navy:#0C2747;--brand-red:#E63946;--brand-amber:#FFB703;--ink:#0f172a;--muted:#64748b;--bg:#f6f7fb;--card:#ffffff;--radius:18px;--shadow:0 10px 30px rgba(12,39,71,.08)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:"Cairo","Tahoma",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}a{color:var(--brand-red);text-decoration:none}.container{max-width:1150px;margin:auto;padding:0 20px}header{background:linear-gradient(120deg,rgba(230,57,70,.97),rgba(12,39,71,.97));color:#fff;position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}.navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0}.brand{display:flex;gap:12px;align-items:center}.brand img{height:46px;width:auto;border-radius:10px}.brand .title{font-weight:800;letter-spacing:.3px}nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-wrap:wrap}nav a{color:#fff;font-weight:600;opacity:.9}nav a:hover{opacity:1}.hero{background:radial-gradient(1200px 400px at -10% -10%, rgba(230,57,70,.18), transparent),radial-gradient(1000px 300px at 120% 10%, rgba(12,39,71,.18), transparent);padding:44px 0 24px}.hero-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:24px;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}.hero-card img{width:100%;height:auto}.hero h1{margin:10px 0 6px;font-size:clamp(24px,3vw,38px);color:var(--brand-navy)}.hero p.lead{margin:0;font-weight:700;color:var(--brand-red)}.hero p.en{margin-top:6px;color:#1f2937}.cta{display:flex;gap:10px;flex-wrap:wrap}.btn{background:var(--brand-red);color:#fff;border:none;padding:11px 16px;border-radius:12px;cursor:pointer;font-weight:700;box-shadow:var(--shadow)}.btn.alt{background:#fff;color:var(--brand-navy);border:2px solid var(--brand-navy)}.section{padding:38px 0}.section h2{margin:0 0 14px;color:var(--brand-navy);font-size:clamp(20px,2.3vw,28px)}.card{background:#fff;border-radius:18px;padding:20px;box-shadow:var(--shadow)}.grid-2{display:grid;grid-template-columns:1fr;gap:16px}@media(min-width:800px){.grid-2{grid-template-columns:1fr 1fr}}.grid-3{display:grid;grid-template-columns:1fr;gap:16px}@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}.muted{color:var(--muted)}.figure{background:#fff;border-radius:18px;padding:10px;box-shadow:var(--shadow)}.figure img{width:100%;height:auto;display:block;border-radius:14px}footer{background:#0b1c33;color:#cbd5e1;padding:28px 0;margin-top:28px}footer a{color:#fff}.fab-wa{position:fixed;right:16px;bottom:18px;z-index:60;background:#25D366;color:#fff;font-weight:800;border:none;border-radius:999px;padding:12px 16px;box-shadow:var(--shadow)}


.ai-title-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

.dot-anim {
    width: 16px;
    height: 16px;
    background-color: #001F54;
    border-radius: 50%;
    animation: pulse 1.3s infinite;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

.ai-title-text {
    margin: 0;
    color: #001F54;
    font-size: 26px;
    font-weight: 800;
    opacity: 0;
    transform: translateX(25px);
    animation: slideIn 1.2s ease forwards;
    animation-delay: 0.5s;
}

/* ANIMATIONS */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(35px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}.ai-btn {
    background: #001f54; /* الأزرق الكحلي */
    color: #fff !important;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    margin-right: 10px; /* يحط مسافة بسيطة بينه وبين الواتساب */
    transition: 0.3s;
}

.ai-btn:hover {
    background: #003c8f;
}

.hero{
    background:url('assets/img/firepro-bg.jpg') center center/cover no-repeat;

    min-height:400px;
    border-radius:25px;
    padding:40px 30px;

    background-size:cover;
    background-position:center;
}
/* AI Banner */

.ai-banner{
    width:100%;
    text-align:center;
    margin:5px auto 15px;
}

.ai-banner img{
    width:60%;
    max-width:800px;
    height:auto;
    display:block;
    margin:auto;
    border-radius:18px;
    box-shadow:0 6px 20px rgba(0,0,0,.15);
}