:root {
    --l-bg: #050b1a;
    --l-bg-soft: #0a1428;
    --l-card: #0e1b33;
    --l-card-soft: #122444;
    --l-text: #e9f0fb;
    --l-muted: #9db0cc;
    --l-border: rgba(255, 255, 255, 0.09);
    --l-accent: #3b82f6;
    --l-accent-2: #22d3ee;
    --l-accent-ink: #eaf3ff;
    --l-success: #34d399;
    --l-warn: #fbbf24;
    --l-radius: 16px;
    --l-radius-sm: 12px;
}

:root[data-theme="light"] {
    --l-bg: #f4f8ff;
    --l-bg-soft: #e9f1fb;
    --l-card: #ffffff;
    --l-card-soft: #f1f6fd;
    --l-text: #0b1f33;
    --l-muted: #4b5d76;
    --l-border: rgba(11, 31, 51, 0.10);
    --l-accent: #2563eb;
    --l-accent-2: #0891b2;
    --l-accent-ink: #08213b;
    --l-success: #059669;
    --l-warn: #b45309;
}

* { box-sizing: border-box; }

body.landing {
    margin: 0;
    font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
    background: var(--l-bg);
    color: var(--l-text);
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.l-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

a { color: inherit; }

.l-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--l-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--l-border);
}
.l-header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.l-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 20px; color: var(--l-text); }
.l-logo img { width: 38px; height: 38px; border-radius: 10px; }
.l-nav { display: flex; align-items: center; gap: 18px; }
.l-nav a { text-decoration: none; color: var(--l-muted); font-weight: 500; font-size: 15px; transition: color .15s; }
.l-nav a:hover { color: var(--l-text); }

.l-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: 999px; text-decoration: none;
    font-weight: 700; font-size: 15px; border: 0; cursor: pointer;
    transition: transform .15s, box-shadow .15s, opacity .15s;
}
.l-btn-primary { background: linear-gradient(120deg, var(--l-accent), var(--l-accent-2)); color: #041426; box-shadow: 0 8px 24px -10px var(--l-accent); }
.l-btn-primary:hover { transform: translateY(-2px); }
.l-btn-ghost { background: transparent; color: var(--l-text); border: 1px solid var(--l-border); }
.l-btn-ghost:hover { background: var(--l-card-soft); }
.l-btn-sm { padding: 9px 16px; font-size: 14px; }

.l-hero { padding: 60px 0 34px; position: relative; overflow: hidden; }
.l-hero::before {
    content: ""; position: absolute; inset: -40% 30% auto auto; width: 520px; height: 520px;
    background: radial-gradient(circle, color-mix(in srgb, var(--l-accent) 26%, transparent), transparent 62%);
    filter: blur(20px); pointer-events: none; z-index: 0;
}
.l-hero > * { position: relative; z-index: 1; }
.l-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
    color: var(--l-accent-2); background: color-mix(in srgb, var(--l-accent) 12%, transparent);
    border: 1px solid var(--l-border); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.l-hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.25; margin: 0 0 14px; font-weight: 800; letter-spacing: -.5px; }
.l-hero h1 .grad { background: linear-gradient(120deg, var(--l-accent), var(--l-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-lead { font-size: 18px; color: var(--l-muted); max-width: 680px; margin: 0 0 26px; }
.l-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

.l-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.l-badge {
    display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600;
    color: var(--l-text); background: var(--l-card); border: 1px solid var(--l-border);
    padding: 8px 14px; border-radius: 999px;
}
.l-badge i { color: var(--l-accent-2); font-size: 15px; }
.l-badge.is-success i { color: var(--l-success); }
.l-badge.is-warn i { color: var(--l-warn); }

.l-section { padding: 34px 0; }
.l-section h2 { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; margin: 0 0 8px; letter-spacing: -.3px; }
.l-section .l-sub { color: var(--l-muted); font-size: 16px; margin: 0 0 24px; max-width: 640px; }

.l-grid { display: grid; gap: 16px; }
.l-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.l-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.l-card {
    background: var(--l-card); border: 1px solid var(--l-border);
    border-radius: var(--l-radius); padding: 24px; transition: transform .15s, border-color .15s;
}
.l-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--l-accent) 40%, var(--l-border)); }
.l-card .l-ico {
    width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--l-accent) 16%, transparent); color: var(--l-accent-2); font-size: 20px; margin-bottom: 14px;
}
.l-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.l-card p { margin: 0; color: var(--l-muted); font-size: 15px; }

.l-pkg { text-align: center; }
.l-pkg .l-qty { font-size: 15px; color: var(--l-muted); font-weight: 600; }
.l-pkg .l-amt { font-size: 30px; font-weight: 800; margin: 6px 0 2px; }
.l-pkg .l-note { font-size: 13px; color: var(--l-muted); margin-bottom: 16px; }
.l-pkg .l-btn { width: 100%; justify-content: center; }
.l-pkg.is-featured { border-color: color-mix(in srgb, var(--l-accent) 55%, var(--l-border)); box-shadow: 0 12px 40px -22px var(--l-accent); }
.l-pkg .l-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--l-accent-2); background: color-mix(in srgb, var(--l-accent) 14%, transparent); padding: 3px 12px; border-radius: 999px; margin-bottom: 10px; }

.l-steps { counter-reset: step; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.l-step { position: relative; background: var(--l-card); border: 1px solid var(--l-border); border-radius: var(--l-radius); padding: 22px 22px 22px 22px; }
.l-step::before {
    counter-increment: step; content: counter(step); position: absolute; top: -14px; inset-inline-start: 22px;
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(120deg, var(--l-accent), var(--l-accent-2)); color: #041426; font-weight: 800; font-size: 15px;
}
.l-step h3 { margin: 10px 0 6px; font-size: 17px; }
.l-step p { margin: 0; color: var(--l-muted); font-size: 14.5px; }

.l-faq { display: flex; flex-direction: column; gap: 12px; }
.l-faq details { background: var(--l-card); border: 1px solid var(--l-border); border-radius: var(--l-radius-sm); overflow: hidden; }
.l-faq summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary .chev { color: var(--l-muted); transition: transform .2s; }
.l-faq details[open] summary .chev { transform: rotate(180deg); }
.l-faq .l-answer { padding: 0 20px 18px; color: var(--l-muted); font-size: 15px; }

.l-cta-band {
    background: linear-gradient(120deg, color-mix(in srgb, var(--l-accent) 18%, var(--l-card)), var(--l-card));
    border: 1px solid var(--l-border); border-radius: 20px; padding: 40px 30px; text-align: center;
}
.l-cta-band h2 { margin: 0 0 10px; }
.l-cta-band p { color: var(--l-muted); margin: 0 0 22px; }

.l-footer { border-top: 1px solid var(--l-border); margin-top: 40px; padding: 34px 0; background: var(--l-bg-soft); }
.l-footer .l-cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.l-footer h4 { font-size: 15px; margin: 0 0 12px; }
.l-footer a { display: block; text-decoration: none; color: var(--l-muted); font-size: 14.5px; padding: 4px 0; transition: color .15s; }
.l-footer a:hover { color: var(--l-text); }
.l-footer .l-copy { color: var(--l-muted); font-size: 13px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--l-border); text-align: center; }

@media (max-width: 640px) {
    .l-nav a:not(.l-btn) { display: none; }
    .l-hero { padding: 40px 0 24px; }
}