*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary:        var(--color-primary);
    --primary-dark:   var(--color-primary-dark);
    --primary-shadow: var(--color-primary-glow);
    --text:           var(--color-text-navy);
    --text-muted:     var(--color-text-muted);
    --white:          var(--color-surface);
}

/* Settles in by scale, not by translate.
   translateY(20px) does not change layout, but it does extend the *scrollable
   overflow* area, so for the first 0.6s of every page load the document was
   20px taller than the viewport. On the desktop landing page, where both
   panels are exactly 100vh, that showed a scrollbar which then vanished when
   the animation finished — the flash on entering the page.
   Scaling from 0.98 to 1 only ever shrinks the box inward, so it can never
   add overflow, and the entry still reads as motion rather than a hard cut. */
@keyframes fadeUp {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Page layout ── */
body {
    font-family: 'Poppins', Arial, sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    background: url(../images/bg-access.svg) center / cover no-repeat;
    display: flex;
    flex-direction: column;
}

/* ─────────────────────────────────────────
   BRAND PANEL (left / top)
───────────────────────────────────────── */
.brand-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    /* Tightened for the stacked layout: at this width the brand panel and the
       action card sit one above the other, and the panel was eating 650px of a
       ~780px window, pushing "Get Started" and both buttons entirely below the
       fold. The >=768px block restores the roomier desktop padding. */
    padding: 2rem 2.4rem 1.2rem;
    animation: fadeUp 0.6s ease both;
    text-align: center;
}

/* Logo */
.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.logo_image {
    width: 9rem;
    height: 9rem;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.12));
}

.logo_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Was no gap at all. Combined with line-height:1 on .sawa that let the
       Arabic sit directly on the wordmark, so the three lines read as one
       crowded lump instead of a hierarchy. */
    gap: 0.5rem;
}

.sawa {
    font-size: 3.6rem;
    font-weight: 800;
    /* 0.08em spread the five letters wide enough to fight the logo above it. */
    letter-spacing: 0.06em;
    color: var(--text);
    line-height: 1;
}

.sawa_arab {
    font-family: 'Cairo', 'Poppins', Arial, sans-serif;
    /* A step down and muted so the Latin wordmark stays the hero. At 2.6rem in
       the same colour and weight as .sawa the two competed for the same job,
       which is what made the block look unresolved. */
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.2;
    direction: rtl;
}

.sawa_text {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    /* Extra room here is what separates the strapline from the name — the two
       were 4px apart and read as a single run-on block. */
    margin-top: 0.7rem;
    opacity: 0.85;
}

/* Value proposition */
.value-prop {
    font-size: 1.4rem;
    color: var(--text);
    line-height: 1.55;
    margin-top: 1.2rem;
    max-width: 34rem;
    overflow-wrap: anywhere;
}

.value-prop strong {
    color: var(--primary);
}

/* Feature list */
.feature-list {
    list-style: none;
    display: flex;
    /* Three across instead of stacked rows. Three full-width rows cost ~184px
       of a ~780px window; as a row of chips they cost ~70px, which is the
       single biggest saving available on this screen. Restored to a column at
       >=768px where the panel has a whole half of the viewport. */
    flex-direction: row;
    gap: 0.8rem;
    margin-top: 1.2rem;
    width: 100%;
    max-width: 36rem;
    min-width: 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    text-align: left;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 1.2rem;
    padding: 0.9rem 0.6rem;
    min-width: 0;
    /* Chip form: icon above the label, centred, sharing the row equally. */
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

/* Stacked layout only: the icon and title carry the point on their own, and
   dropping the description line reclaims ~130px across the three cards, which
   is most of what the fold needed back. Restored in full at >=768px. */
.feature-item p {
    display: none;
}

.feature-item > div {
    min-width: 0;
}

.feature-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon svg {
    width: 1.8rem;
    height: 1.8rem;
    stroke: var(--primary);
}

.feature-item h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0;
    line-height: 1.3;
}

.feature-item p {
    font-size: 1.2rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ─────────────────────────────────────────
   ACTION CARD (right / bottom)
───────────────────────────────────────── */
.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    min-width: 0;
    padding: 1.6rem 2.4rem 0;
    animation: fadeUp 0.6s 0.15s ease both;
}

.card-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary-dark);
    text-align: center;
    margin-bottom: 0.2rem;
}

.card-sub {
    font-size: 1.4rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 28rem;
    line-height: 1.5;
}

/* Buttons */
.button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 32rem;
    min-width: 0;
}

.button_signup,
.button_login {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    max-width: 100%;
    min-height: 5.2rem;
    border-radius: 9999px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}

/* Sign Up = primary (filled) */
.button_signup {
    background: var(--primary);
    color: #fff;
    border: 2px solid var(--primary);
    box-shadow: 0 4px 16px var(--primary-shadow);
}
.button_signup:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--primary-shadow);
}

/* Log In = outlined */
.button_login {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}
.button_login:hover {
    background: rgba(37, 99, 235, 0.07);
    transform: translateY(-1px);
}

/* Trust line */
.trust-line {
    font-size: 1.15rem;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.85;
    letter-spacing: 0.01em;
}

/* Guest link */
.link_visitors {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-dark);
    text-decoration: none;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.link_visitors svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.18s ease;
}
.link_visitors:hover {
    opacity: 0.85;
}
.link_visitors:hover svg { transform: translateX(3px); }

/* ── Footer (inside action-card) ── */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    /* Trimmed on the stacked layout so the page clears the fold exactly;
       the >=768px block puts the roomier padding back. */
    padding: 1.2rem 0 1.2rem;
    margin-top: auto;
    width: 100%;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.social-links a {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Inline SVGs below inherit this via fill="currentColor" */
    color: #0f172a;
    transition: transform 0.2s, background 0.2s, color 0.2s;
}
.social-links a:hover {
    transform: scale(1.12);
    background: rgba(255,255,255,0.75);
}
.social-links img,
.social-links svg { display: block; }

html[data-theme="dark"] .social-links a {
    background: rgba(255,255,255,0.08);
    color: rgba(203,213,225,0.78);
}
html[data-theme="dark"] .social-links a:hover {
    background: rgba(255,255,255,0.16);
    color: #e2e8f0;
}

.footer p {
    font-size: 1.2rem;
    color: var(--text-muted);
}

/* ── Top-right theme control ── */
.theme-toggle--floating {
    position: fixed;
    top: 1.6rem;
    right: 1.6rem;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(37, 99, 235, 0.18);
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    z-index: 120;
    padding: 0;
}

.theme-toggle--floating:hover {
    background: rgba(255,255,255,0.98);
    transform: scale(1.05);
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.18);
}

.theme-toggle--floating:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.theme-toggle--floating svg {
    width: 1.85rem;
    height: 1.85rem;
}

html[data-theme="dark"] .theme-toggle--floating {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(96, 165, 250, 0.28);
    color: #93c5fd;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .theme-toggle--floating:hover {
    background: rgba(15, 23, 42, 0.92);
}

/* ─────────────────────────────────────────
   TABLET (≥768px) — side by side
───────────────────────────────────────── */
@media (min-width: 768px) {
    body {
        flex-direction: row;
        min-height: 100vh;
        overflow-y: auto;
    }

    .brand-panel {
        flex: 1;
        justify-content: center;
        padding: 4rem 3.2rem;
        min-height: 100vh;
    }

    /* Side by side there is room for the full cards again. */
    .feature-item p { display: block; }
    .feature-item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 1.2rem 1.4rem;
        gap: 1.2rem;
    }
    .feature-item h4 { font-size: 1.4rem; margin-bottom: 0.2rem; }
    .feature-icon { width: 3.6rem; height: 3.6rem; }
    .feature-list { flex-direction: column; gap: 1.2rem; margin-top: 2rem; }
    .logo_image { width: 11rem; height: 11rem; }
    .value-prop { font-size: 1.5rem; line-height: 1.65; margin-top: 1.6rem; }
    .action-card { gap: 1.6rem; }
    .footer { padding: 1.6rem 0; }

    .action-card {
        width: 40rem;
        flex-shrink: 0;
        min-height: 100vh;
        justify-content: center;
        padding: 4rem 3.6rem;
        background: rgba(255,255,255,0.28);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-left: 1px solid rgba(255,255,255,0.5);
        box-shadow: -12px 0 40px rgba(0,0,0,0.08);
    }

    .footer {
        margin-top: auto;
        padding-bottom: 2rem;
    }
}

/* ─────────────────────────────────────────
   DESKTOP (≥1024px) — wider brand panel
───────────────────────────────────────── */
@media (min-width: 1024px) {
    .logo_image { width: 14rem; height: 14rem; }
    .sawa { font-size: 5rem; }
    .sawa_arab { font-size: 3.2rem; }
    .value-prop { font-size: 1.7rem; max-width: 40rem; }

    .action-card {
        width: 44rem;
        padding: 4rem 4.8rem;
    }
}

/* ─────────────────────────────────────────
   DARK MODE — home screen
───────────────────────────────────────── */

@media (max-width: 520px) {
    .brand-panel {
        padding: 5.2rem 1.6rem 1.8rem;
    }

    .logo_image {
        width: 9.5rem;
        height: 9.5rem;
    }

    .sawa {
        font-size: 3rem;
    }

    .sawa_arab {
        font-size: 2.2rem;
    }

    .value-prop,
    .feature-list,
    .testimonial-rotator,
    .card-sub,
    .button-group {
        max-width: 100%;
    }

    .action-card {
        padding: 2rem 1.6rem 0;
    }

    .theme-toggle--floating {
        top: 1rem;
        right: 1rem;
        width: 3.6rem;
        height: 3.6rem;
    }
}

html[data-theme="dark"] body {
    background:
        linear-gradient(145deg, #071113 0%, #0f172a 46%, #0d2b2b 100%);
}

html[data-theme="dark"] .sawa,
html[data-theme="dark"] .sawa_arab,
html[data-theme="dark"] .value-prop,
html[data-theme="dark"] .feature-item h4,
html[data-theme="dark"] .card-title {
    color: #f8fafc;
}

html[data-theme="dark"] .sawa_text,
html[data-theme="dark"] .feature-item p,
html[data-theme="dark"] .card-sub,
html[data-theme="dark"] .trust-line,
html[data-theme="dark"] .testimonial-slide blockquote,
html[data-theme="dark"] .testimonial-slide small,
html[data-theme="dark"] .footer p {
    color: #cbd5e1;
}

html[data-theme="dark"] .feature-item,
html[data-theme="dark"] .testimonial-rotator,
html[data-theme="dark"] .action-card {
    background: rgba(15, 23, 42, 0.76);
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .feature-icon,
html[data-theme="dark"] .testimonial-avatar {
    background: rgba(96, 165, 250, 0.16);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.28);
}

html[data-theme="dark"] .button_login {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(96, 165, 250, 0.34);
    color: #bfdbfe;
}

html[data-theme="dark"] .button_login:hover {
    background: rgba(96, 165, 250, 0.12);
}