/* Wasla public landing page. Standalone marketing styles that share the
   product's color identity but breathe like a brochure, not a dashboard.
   The page is laid out with flex and grid only, so it mirrors itself in
   Arabic with no direction specific rules. */

:root {
    --ink: #0f172a;
    --ink-soft: #334155;
    --muted: #64748b;
    --line: #e2e8f0;
    --bg: #f8fafc;
    --surface: #ffffff;
    --teal: #0f766e;
    --teal-bright: #14b8a6;
    --teal-soft: #ccfbf1;
    --indigo: #4f46e5;
    --indigo-soft: #e0e7ff;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px rgba(15, 23, 42, .07);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Cairo', 'Manrope', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
}

a { color: var(--teal); text-decoration: none; }

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

/* Top navigation */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(248, 250, 252, .88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.site-nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 19px;
    color: var(--ink);
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--teal-bright), var(--indigo));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
    font-weight: 700;
    font-size: 14px;
}

.nav-links a { color: var(--ink-soft); }
.nav-links a:hover { color: var(--teal); }

@media (max-width: 760px) {
    .nav-links .nav-anchor { display: none; }
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-weight: 800;
    font-size: 15px;
    font-family: inherit;
    padding: 11px 22px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.btn:hover { filter: brightness(.97); transform: translateY(-1px); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.small { padding: 8px 16px; font-size: 13.5px; }

/* Hero */

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(720px 400px at 88% -10%, var(--indigo-soft), transparent),
        radial-gradient(680px 420px at -8% 30%, var(--teal-soft), transparent),
        var(--bg);
}

.hero .wrap {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 44px;
    align-items: center;
    padding-top: 72px;
    padding-bottom: 84px;
}

.hero h1 {
    margin: 0 0 16px;
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 800;
}

.hero h1 .accent {
    background: linear-gradient(90deg, var(--teal), var(--indigo));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero .lead {
    font-size: 18px;
    color: var(--ink-soft);
    margin: 0 0 28px;
    max-width: 52ch;
}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-art { min-width: 0; }
.hero-art svg { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
    .hero .wrap { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 56px; }
    .hero h1 { font-size: 33px; }
    .hero-art { max-width: 420px; margin: 0 auto; }
}

/* Shared section chrome */

.section { padding: 76px 0; }
.section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }

.eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal);
    background: var(--teal-soft);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.section-head h2 {
    margin: 0 0 10px;
    font-size: 30px;
    letter-spacing: -.01em;
}

.section-head p { color: var(--muted); margin: 0; }

/* Steps */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

.step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 26px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--teal-bright), var(--teal));
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.step h3 { margin: 0 0 8px; font-size: 18px; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* Features */

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.feature {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.feature i {
    font-size: 22px;
    color: var(--teal);
    background: var(--teal-soft);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.feature:nth-child(even) i { color: var(--indigo); background: var(--indigo-soft); }

.feature h3 { margin: 0 0 6px; font-size: 16px; }
.feature p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* Pricing */

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
    max-width: 900px;
    margin: 0 auto;
}

.plan {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* auto-fit collapses the empty tracks, so a single plan would otherwise
   stretch across the whole 900px grid. */
.plan:only-child { max-width: 360px; margin-inline: auto; }

.plan h3 { margin: 0 0 6px; font-size: 19px; }

.plan-price { margin: 12px 0 4px; font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.plan-price small { font-size: 14px; font-weight: 700; color: var(--muted); }
.plan-unit { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }

.plan p.desc { color: var(--muted); font-size: 14px; flex: 1; margin: 0 0 20px; }

.plan .btn { justify-content: center; }

/* Contact */

.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 820px) {
    .contact-grid { grid-template-columns: 1fr; }
}

.contact-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px 28px;
}

.contact-side h3 { margin: 0 0 10px; font-size: 22px; }
.contact-side p { color: var(--muted); }

.contact-side .point {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 18px;
}

.contact-side .point i { color: var(--teal); font-size: 19px; margin-top: 2px; }
.contact-side .point strong { display: block; font-size: 15px; }
.contact-side .point span { color: var(--muted); font-size: 13.5px; }

/* Form fields */

.field { margin-bottom: 14px; }

.field label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--ink-soft);
}

.field-input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ink);
    background: #fff;
}

.field-input:focus { outline: 2px solid var(--teal-soft); border-color: var(--teal); }
textarea.field-input { resize: vertical; }

.field .error { color: #b91c1c; font-size: 12.5px; margin-top: 4px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* Technical strings keep their own direction inside an Arabic page */
.mono {
    font-family: 'Cascadia Code', Consolas, monospace;
    direction: ltr;
    unicode-bidi: isolate;
}

/* Honeypot lives far off screen so people never see it */
.hp-field {
    position: absolute;
    inset-inline-start: -9999px;
    top: -9999px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Flash messages */

.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 14px;
}

.flash.success { background: #dcfce7; color: #15803d; }
.flash.error { background: #fee2e2; color: #b91c1c; }
.flash.warning { background: #fef3c7; color: #b45309; }
.flash.info { background: #dbeafe; color: #1d4ed8; }

/* Footer */

.site-footer {
    background: #0f172a;
    color: #cbd5e1;
    padding: 48px 0 36px;
}

.site-footer .wrap {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
}

@media (max-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr; } }

.site-footer .nav-brand { color: #fff; margin-bottom: 10px; }
.site-footer p { color: #94a3b8; font-size: 13.5px; margin: 0; max-width: 40ch; }
.site-footer h4 { color: #e2e8f0; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; font-size: 14px; }
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }

/* The WhatsApp alternative next to the demo form, for the visitor who
   would rather send a message than fill anything in. */

.wa-inline {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.wa-inline span {
    display: block;
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 10px;
}

.btn.wa-btn {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}

.btn.wa-btn:hover { filter: brightness(.96); }

/* Floating WhatsApp button. In this market a conversation starts on
   WhatsApp far more often than it starts with an email, so it follows the
   visitor down the page. It sits on the trailing edge, which mirrors to the
   left in Arabic on its own. */

.wa-float {
    position: fixed;
    inset-inline-end: 22px;
    bottom: 22px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
    transition: transform .14s ease, box-shadow .14s ease;
}

.wa-float:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
}

.wa-float i { font-size: 22px; line-height: 1; }

@media (max-width: 560px) {
    /* On a phone the label costs more room than it earns, keep the mark */
    .wa-float { padding: 15px; inset-inline-end: 16px; bottom: 16px; }
    .wa-float span { display: none; }
}

.site-footer .wa-link { color: #4ade80; }
.site-footer .wa-link:hover { color: #86efac; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 36px;
    padding-top: 18px;
    text-align: center;
    color: #64748b;
    font-size: 12.5px;
}