@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root {
    --c-brand: #8B6CFF;
    --c-brand-light: rgba(139, 108, 255, 0.15);
    --c-brand-dark: #A98CFF;
    --c-brand-glow: rgba(139, 108, 255, 0.3);
    --c-accent: #FFB547;
    --c-accent-light: rgba(255, 181, 71, 0.12);
    --c-coral: #FF7B7B;
    --c-teal: #3DE8B8;
    --c-teal-light: rgba(61, 232, 184, 0.12);

    --c-bg: #09090F;
    --c-bg-alt: #0F0F18;
    --c-surface: #161622;
    --c-surface-raised: #1E1E2E;
    --c-surface-hover: #262638;

    --c-ink: #F0F0F8;
    --c-ink-soft: #C8C8D8;
    --c-ink-muted: #8888A0;
    --c-ink-faint: #55556A;

    --c-border: rgba(255, 255, 255, 0.08);
    --c-border-strong: rgba(255, 255, 255, 0.14);
    --c-border-focus: var(--c-brand);

    --c-white: #FFFFFF;
    --c-error: #FF6B6B;
    --c-success: #3DE8B8;

    --ff-en: 'Sora', system-ui, -apple-system, sans-serif;
    --ff-ar: 'Tajawal', 'Sora', system-ui, -apple-system, sans-serif;
    --ff-body: var(--ff-en);
    --ff-display: var(--ff-en);

    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.625rem;
    --text-2xl: 2.125rem;
    --text-3xl: 2.875rem;
    --text-4xl: 3.75rem;
    --text-hero: clamp(2.5rem, 6vw, 4.25rem);

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.55;

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl: 40px;
    --r-full: 999px;

    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px var(--c-brand-glow);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.3s;

    --z-nav: 500;
    --z-overlay: 600;
    --z-modal: 700;
}

[dir="rtl"] {
    --ff-body: var(--ff-ar);
    --ff-display: var(--ff-ar);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--c-ink);
    background-color: var(--c-bg);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--c-ink);
    margin: 0;
}

p { color: var(--c-ink-soft); margin: 0; line-height: var(--leading-normal); }

a { color: var(--c-brand); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-brand-dark); }

img { max-width: 100%; height: auto; display: block; }

::selection {
    background: var(--c-brand);
    color: var(--c-white);
}

.wrap {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.sec {
    padding-block: 100px;
    position: relative;
}

@media (max-width: 768px) {
    .sec { padding-block: 64px; }
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-brand);
}

.kicker::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--c-brand);
    border-radius: 1px;
}

.sec-head {
    max-width: 600px;
    margin-bottom: 56px;
}

.sec-head--center {
    text-align: center;
    margin-inline: auto;
}

.sec-head h2 {
    font-size: var(--text-3xl);
    margin-top: 16px;
    margin-bottom: 16px;
    color: var(--c-ink);
}

.sec-head p {
    font-size: var(--text-lg);
    color: var(--c-ink-soft);
}

@media (max-width: 768px) {
    .sec-head h2 { font-size: var(--text-2xl); }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ff-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    line-height: 1;
    padding: 14px 28px;
    border-radius: var(--r-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
}

.btn--fill {
    background: var(--c-brand);
    color: var(--c-white);
    border-color: var(--c-brand);
}

.btn--fill:hover {
    background: var(--c-brand-dark);
    border-color: var(--c-brand-dark);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.btn--outline {
    background: transparent;
    color: var(--c-brand);
    border-color: rgba(139, 108, 255, 0.4);
}

.btn--outline:hover {
    background: var(--c-brand);
    color: var(--c-white);
    transform: translateY(-2px);
}

.btn--ghost {
    background: transparent;
    color: var(--c-ink-muted);
    border-color: transparent;
    padding: 10px 16px;
}

.btn--ghost:hover { color: var(--c-brand); }

.btn--lg {
    padding: 18px 36px;
    font-size: var(--text-base);
}

.btn--block { width: 100%; }

.btn--white {
    background: var(--c-white);
    color: var(--c-bg);
    border-color: var(--c-white);
    font-weight: var(--weight-bold);
}

.btn--white:hover {
    background: transparent;
    color: var(--c-white);
    transform: translateY(-2px);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 14px 18px;
    font-family: var(--ff-body);
    font-size: var(--text-sm);
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--r-md);
    outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field input:focus,
.field textarea:focus {
    border-color: var(--c-brand);
    box-shadow: 0 0 0 4px var(--c-brand-light);
    background: var(--c-surface-raised);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--c-ink-faint); }

.preloader { display: none !important; }

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}