/* ═══ Lobia Landing Page — Premium Design ═══ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

:root {
    --green-900: #1a4731;
    --green-800: #276749;
    --green-700: #2f855a;
    --green-600: #38a169;
    --green-500: #48bb78;
    --green-400: #68d391;
    --green-100: #c6f6d5;
    --green-50: #f0fff4;
    --gold-600: #b7791f;
    --gold-500: #d69e2e;
    --gold-400: #ecc94b;
    --gold-100: #fefcbf;
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    --teal-600: #0d9488;
    --teal-500: #14b8a6;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.landing {
    font-family:'Cairo',sans-serif;
    background: var(--slate-50);
    color: var(--slate-800);
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ═══ HERO ═══ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(160deg, var(--green-900) 0%, var(--green-800) 40%, var(--green-700) 100%);
    overflow: hidden;
}
.hero::before {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(circle at 20% 80%, rgba(104,211,145,0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(214,158,46,0.1) 0%, transparent 50%);
}
.hero-pattern {
    position:absolute; inset:0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content {
    position:relative; z-index:2;
    padding: 2rem 1.5rem;
    max-width: 600px;
}
.hero-logo {
    width: 140px; height: 140px;
    margin: 0 auto 1.5rem;
    background: rgba(255,255,255,0.12);
    border-radius: 32px;
    padding: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    animation: float 4s ease-in-out infinite;
}
.hero-logo img { width:100%; height:100%; object-fit:contain; }
@keyframes float {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-8px); }
}
.hero h1 {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
.hero h1 .gold { color: var(--gold-400); }
.hero-slogan {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2rem;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
    padding: 16px 40px;
    border-radius: 60px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(214,158,46,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.hero-cta:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(214,158,46,0.45); }
.hero-cta:active { transform:scale(0.97); }
.hero-cta svg { width:22px; height:22px; }

.hero-scroll {
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,0.4);
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%,100% { transform:translateX(-50%) translateY(0); }
    50% { transform:translateX(-50%) translateY(8px); }
}

/* ═══ SECTIONS ═══ */
.section { padding: 5rem 1.5rem; }
.section-dark { background: var(--slate-900); color:#fff; }
.section-white { background: #fff; }
.container { max-width:1100px; margin:0 auto; }
.section-badge {
    display:inline-flex; align-items:center; gap:6px;
    background: var(--green-50);
    color: var(--green-700);
    font-size:0.8rem; font-weight:800;
    padding:6px 16px; border-radius:30px;
    margin-bottom:1rem;
}
.section-dark .section-badge { background:rgba(104,211,145,0.1); color:var(--green-400); }
.section-title {
    font-size:2rem; font-weight:900;
    margin-bottom:0.5rem; line-height:1.3;
}
.section-subtitle {
    font-size:1rem; font-weight:600;
    color:var(--slate-500); max-width:500px;
    margin-bottom:2.5rem;
}
.section-dark .section-subtitle { color:var(--slate-400); }

/* ═══ FEATURES ═══ */
.features-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:1.5rem;
}
.feature-card {
    background:#fff;
    border:1px solid var(--slate-200);
    border-radius:20px;
    padding:2rem 1.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,0.08); }
.feature-icon {
    width:56px; height:56px;
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:1rem;
    font-size:1.5rem;
}
.fi-green { background:var(--green-100); color:var(--green-700); }
.fi-gold { background:var(--gold-100); color:var(--gold-600); }
.fi-teal { background:#ccfbf1; color:var(--teal-600); }
.feature-card h3 { font-size:1.1rem; font-weight:800; margin-bottom:0.5rem; }
.feature-card p { font-size:0.9rem; font-weight:600; color:var(--slate-500); line-height:1.7; }

/* ═══ BRANCHES ═══ */
.branches-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:1.5rem;
}
.branch-card {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;
    padding:1.5rem;
    backdrop-filter:blur(10px);
    transition: transform 0.3s, border-color 0.3s;
}
.branch-card:hover { transform:translateY(-3px); border-color:rgba(104,211,145,0.3); }
.branch-name {
    font-size:1.15rem; font-weight:900; color:#fff;
    display:flex; align-items:center; gap:8px;
    margin-bottom:1rem;
}
.branch-name .dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--green-400);
    box-shadow:0 0 8px var(--green-400);
}
.branch-info { display:flex; flex-direction:column; gap:0.6rem; }
.branch-info-row {
    display:flex; align-items:center; gap:10px;
    font-size:0.85rem; font-weight:600; color:var(--slate-400);
}
.branch-info-row svg { width:18px; height:18px; flex-shrink:0; color:var(--green-400); }
.branch-info-row a { color:var(--green-400); text-decoration:none; }
.branch-info-row a:hover { text-decoration:underline; }
.branch-map-btn {
    display:inline-flex; align-items:center; gap:6px;
    margin-top:1rem;
    background:rgba(104,211,145,0.1);
    color:var(--green-400);
    font-size:0.8rem; font-weight:800;
    padding:8px 16px; border-radius:12px;
    text-decoration:none;
    border:1px solid rgba(104,211,145,0.2);
    transition: background 0.2s;
}
.branch-map-btn:hover { background:rgba(104,211,145,0.2); }
.branch-map-btn svg { width:16px; height:16px; }

/* ═══ CONTACT ═══ */
.contact-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap:1.5rem;
}
.contact-card {
    background:var(--slate-50);
    border:1px solid var(--slate-200);
    border-radius:20px;
    padding:2rem;
    text-align:center;
    text-decoration:none;
    color:inherit;
    transition: transform 0.3s, box-shadow 0.3s;
}
.contact-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.contact-icon {
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 1rem;
    font-size:1.3rem;
}
.ci-phone { background:#dcfce7; color:#16a34a; }
.ci-email { background:#dbeafe; color:#2563eb; }
.ci-whatsapp { background:#dcfce7; color:#22c55e; }
.contact-card h3 { font-size:0.95rem; font-weight:800; margin-bottom:0.3rem; }
.contact-card p { font-size:0.85rem; font-weight:600; color:var(--slate-500); direction:ltr; }

/* ═══ FOOTER ═══ */
.footer {
    background:var(--green-900);
    color:rgba(255,255,255,0.5);
    text-align:center;
    padding:2.5rem 1.5rem;
    font-size:0.85rem; font-weight:600;
}
.footer-logo { width:48px; height:48px; margin:0 auto 1rem; border-radius:14px; padding:6px; background:rgba(255,255,255,0.1); }
.footer-logo img { width:100%; height:100%; object-fit:contain; }
.footer-brand { font-size:1rem; font-weight:900; color:#fff; margin-bottom:0.3rem; }
.footer-links { display:flex; justify-content:center; gap:1.5rem; margin-top:1rem; flex-wrap:wrap; }
.footer-links a { color:rgba(255,255,255,0.5); text-decoration:none; font-weight:700; font-size:0.8rem; transition:color 0.2s; }
.footer-links a:hover { color:var(--green-400); }
.footer-divider { width:60px; height:2px; background:rgba(255,255,255,0.1); margin:1.5rem auto; border-radius:2px; }
.footer-legal { font-size:0.75rem; color:rgba(255,255,255,0.3); }

/* ═══ RESPONSIVE ═══ */
@media (max-width:768px) {
    .hero { min-height:100svh; }
    .hero-logo { width:110px; height:110px; border-radius:26px; }
    .hero h1 { font-size:1.8rem; }
    .hero-slogan { font-size:0.95rem; }
    .hero-cta { font-size:1rem; padding:14px 32px; }
    .section { padding:3.5rem 1.25rem; }
    .section-title { font-size:1.5rem; }
    .features-grid, .branches-grid, .contact-grid {
        grid-template-columns:1fr;
    }
}
@media (max-width:380px) {
    .hero h1 { font-size:1.5rem; }
    .hero-cta { padding:12px 28px; font-size:0.9rem; }
}

/* ═══ ANIMATIONS ═══ */
.fade-up {
    opacity:0; transform:translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }