/* ------------------------------------------------------------------
           Type scale, derived for Arabic rather than inherited from a Latin
           template. Three things differ and all three were wrong here:

           - WEIGHT. Arabic has no capital/lowercase contrast to carry a 900,
             so a black headline reads as a solid slab instead of as emphasis.
             Display tops out at 800, headings at 700.
           - LEADING. Arabic ascenders (ا ل ك) and the dot/diacritic layer sit
             further from the baseline than Latin x-height type, so every step
             needs more line-height, not less. Body runs 1.75.
           - GROWTH. Arabic sets longer per concept and its letterforms fill
             more of the em, so the same rem value reads visually larger than
             in Latin. Steps grow at ~1.2 and cap early; the hero was clamped
             at 4.5rem/6vw and hit that ceiling on every desktop.
           ------------------------------------------------------------------ */
        :root {
            --step--1: 0.8125rem;                        /* badges, meta */
            --step-0: 1rem;                              /* body */
            --step-1: 1.0625rem;                         /* lead body, card name */
            --step-2: 1.25rem;                           /* card heading */
            --step-3: clamp(1.375rem, 2.2vw, 1.75rem);   /* stat figure */
            --step-4: clamp(1.625rem, 3vw, 2.125rem);    /* section title */
            --step-5: clamp(1.875rem, 3.6vw, 2.875rem);  /* hero */

            --leading-display: 1.28;
            --leading-heading: 1.4;
            --leading-body: 1.75;

            --ink: #0f172a;
            --ink-muted: #64748b;
        }

        * {
            font-family: 'Tajawal', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 50%, #faf0ff 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Navbar Styles */
        .custom-navbar {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(99, 102, 241, 0.1);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
            padding: 12px 0;
        }

        .custom-navbar .navbar-brand {
            font-weight: 800;
            font-size: 1.5rem;
            color: #1e293b;
        }

        /* One sizing rule for both navbar actions.
           .btn-outline-custom hardcodes `padding: 10px 28px`, and home2.css
           loads after Bootstrap, so that padding beat .btn-sm/.px-4 on the
           outlined button while the solid one kept Bootstrap's 4px. The flex
           row stretched both boxes to the same height, which hid the size
           difference but left the solid button's LABEL riding high in its
           pill. Scoping to .custom-navbar (0,2,0) outranks both. */
        .custom-navbar .btn {
            padding: 8px 22px;
            font-size: 0.9375rem;
            font-weight: 700;
            line-height: 1.5;
            border-width: 2px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .custom-navbar .navbar-brand span {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .custom-navbar .nav-link {
            font-weight: 600;
            color: #475569;
            transition: all 0.3s ease;
            position: relative;
        }

        .custom-navbar .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            transition: all 0.3s ease;
            transform: translateX(50%);
        }

        .custom-navbar .nav-link:hover::after {
            width: 100%;
        }

        .custom-navbar .nav-link:hover {
            color: #6366f1;
        }

        .btn-primary-custom {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none;
            color: white;
            padding: 10px 28px;
            border-radius: 50px;
            font-weight: 700;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }

        .btn-primary-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
            color: white;
        }

        .btn-outline-custom {
            background: transparent;
            border: 2px solid #6366f1;
            color: #6366f1;
            padding: 10px 28px;
            border-radius: 50px;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        .btn-outline-custom:hover {
            background: #6366f1;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);
        }

        /* Hero Section */
        /* Height follows the content, with padding doing the spacing.
           min-height: 90vh plus align-items: center was manufacturing the
           gap under the navbar: whenever the hero's content was shorter than
           90vh, the leftover was split above and below it, so the taller the
           visitor's screen the further the headline sat from the menu. The
           top pad is deliberately smaller than the bottom one — the navbar
           already supplies visual separation above, while the stat cards
           below need clearance from the next section. */
        .hero-section {
            display: flex;
            align-items: center;
            position: relative;
            padding: 44px 0 64px;
        }

        /* The brand lockup above the headline. The lockup itself is
           inline-styled (it renders into four Bootstrap layouts that never
           load Tailwind), so this rule owns only what the hero decides:
           the block's own spacing and its hover state. */
        .hero-brand {
            display: inline-block;
            margin-bottom: 26px;
            text-decoration: none;
            color: var(--ink);
            transition: transform 0.25s ease, opacity 0.25s ease;
        }

        .hero-brand:hover,
        .hero-brand:focus-visible {
            color: var(--ink);
            transform: translateY(-2px);
            opacity: 0.92;
        }

        /* The lockup is a link, so it takes a focus ring — offset outward so
           the ring traces the tile rather than cutting through it. */
        .hero-brand:focus-visible {
            outline: 2px solid #6366f1;
            outline-offset: 6px;
            border-radius: 14px;
        }

        .hero-title {
            font-size: var(--step-5);
            font-weight: 800;
            line-height: var(--leading-display);
            letter-spacing: -0.01em;
            color: var(--ink);
            text-wrap: balance;
        }

        .hero-title .gradient-text {
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-subtitle {
            font-size: var(--step-1);
            color: var(--ink-muted);
            /* 58ch, not 600px: the measure should follow the text, and Arabic
               sets more characters into the same width than Latin does. */
            max-width: 58ch;
            line-height: var(--leading-body);
            text-wrap: pretty;
        }

        /* Floating Shapes Animation */
        .floating-shapes {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }

        .shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .shape-1 {
            width: 300px;
            height: 300px;
            background: #6366f1;
            top: -100px;
            right: -100px;
            animation-delay: 0s;
        }

        .shape-2 {
            width: 200px;
            height: 200px;
            background: #8b5cf6;
            bottom: -50px;
            left: -50px;
            animation-delay: -5s;
        }

        .shape-3 {
            width: 150px;
            height: 150px;
            background: #a855f7;
            top: 50%;
            left: 50%;
            animation-delay: -10s;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(30px, -30px) rotate(90deg); }
            50% { transform: translate(-20px, 20px) rotate(180deg); }
            75% { transform: translate(20px, 30px) rotate(270deg); }
        }

        /* Particles Container */
        #particles {
            position: absolute;
            inset: 0;
            z-index: 1;
        }

        /* Stats Cards */
        .stat-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            padding: 24px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
        }

        .stat-number {
            font-size: var(--step-3);
            font-weight: 800;
            line-height: 1.2;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-label {
            font-size: var(--step--1);
            color: var(--ink-muted);
            font-weight: 600;
        }

        /* Live Counter */
        .live-counter {
            position: fixed;
            bottom: 24px;
            left: 24px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(34, 197, 94, 0.2);
            border-radius: 50px;
            padding: 12px 20px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 600;
            color: #0f172a;
        }

        .live-dot {
            width: 10px;
            height: 10px;
            background: #22c55e;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        /* Teacher Cards */

/* Rating sits inline with the subject, not floated into the card corner.
   It is an attribute of the teacher — the same kind of fact as the subject
   they teach — so it reads on that row rather than as a sticker applied on
   top of the card. */
.teacher-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--step--1);
}

.teacher-meta .rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff9e6;
    color: #b45309;
    border: 1px solid #fef3c7;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 50px;
}

.teacher-meta .subject {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #e0e7ff;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 50px;
}

/* 64px, down from 85px: at the old size the avatar outweighed the name it
   belongs to, and initials-only fallbacks made that worse. */
.avatar-wrapper-sm {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #eef2ff;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.12);
}

.teacher-name {
    font-size: var(--step-1);
    font-weight: 700;
    line-height: var(--leading-heading);
    color: var(--ink);
}

.teacher-bio {
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--ink-muted);
}

/* Anchored to the top, not the centre: a portrait photo is taller than the
   circle, and a centred crop trims equal slices off the top and bottom, which
   is where the head gets chopped. New uploads are squared server-side by
   AvatarImage, so this only matters for photos stored before that. */
.avatar-wrapper-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Two clamped lines at a FIXED height, not a min-height inside a flex-grow
   parent. The old rule let a short bio stretch and pushed the buttons to the
   bottom of whatever the tallest card happened to be, which is where the gap
   under the bio came from. A fixed box makes every card's actions align. */
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(2 * 1.65em);
}

/* تحسين استجابة وتمرير الفيديو */
.demo-video video {
    width: 100%;
    max-height: 130px;
    object-fit: cover;
    display: block;
}

/* تأثير التكبير المائل البسيط للكرت */
.teacher-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* The one flourish on this card: the start edge picks up the same
   indigo -> violet the wordmark uses. Inset-inline-start, so it lands on the
   right in RTL and would follow the text if this page is ever set in LTR. */
.teacher-card::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: linear-gradient(180deg, #6366f1, #a855f7);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s ease;
}

.teacher-card:hover::before,
.teacher-card:focus-within::before {
    transform: scaleY(1);
}

.teacher-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}

        /* Features Section */
        .feature-card {
            background: white;
            border-radius: 24px;
            padding: 32px 24px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
            height: 100%;
        }

        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(99, 102, 241, 0.1);
        }

        .feature-icon {
            font-size: 2.25rem;
            margin-bottom: 16px;
            display: block;
        }

        .feature-title {
            font-size: var(--step-2);
            font-weight: 700;
            line-height: var(--leading-heading);
            color: var(--ink);
            margin-bottom: 8px;
        }

        .feature-desc {
            font-size: var(--step-0);
            color: var(--ink-muted);
            line-height: var(--leading-body);
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.1), transparent 70%);
        }

        /* Footer */
        .footer {
            background: #0f172a;
            color: #94a3b8;
            padding: 40px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .footer a {
            color: #94a3b8;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer a:hover {
            color: #6366f1;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero-section {
                padding: 28px 0 48px;
            }

            /* Tighter above the headline on a phone, where the fold is the
               scarce thing and the tile has already done its job. */
            .hero-brand {
                margin-bottom: 18px;
            }

            .stat-card {
                padding: 16px;
            }

            .stat-number {
                font-size: var(--step-2);
            }

            .teacher-card .card-actions {
                grid-template-columns: 1fr;
            }

            .live-counter {
                bottom: 16px;
                left: 16px;
                padding: 10px 16px;
                font-size: 0.75rem;
            }
        }

        /* Smooth Scroll */
        html {
            scroll-behavior: smooth;
        }

        /* Section Titles */
        .section-title {
            font-size: var(--step-4);
            font-weight: 700;
            line-height: var(--leading-heading);
            color: var(--ink);
            text-align: center;
            margin-bottom: 12px;
            text-wrap: balance;
        }

        .section-subtitle {
            text-align: center;
            color: var(--ink-muted);
            font-size: var(--step-1);
            line-height: var(--leading-body);
            margin-bottom: 48px;
        }

        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeIn 0.8s ease forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }

/* ---------------------------------------------------------------------------
   Teacher preview: the public syllabus.

   This page is a LISTING, so it is judged on density and alignment rather
   than on decoration. Every lesson used to be its own bordered white card
   with 1rem of padding inside a bordered unit box inside a subject card —
   three nested frames around one line of text, which made a short syllabus
   scroll for pages. Lessons are rows separated by hairlines now, and the
   frame count drops from three to one.

   Sizes come from the same --step-* ladder the landing page uses, descending
   strictly: name > section > subject > unit > lesson. Each one only has to
   outrank the thing directly beneath it — a teacher's name is a page title,
   not a marketing headline, so nothing here reaches the landing page's hero
   or section sizes. Unit and lesson share a size and separate on weight and
   background instead, which is what the tinted header is already doing.
   --------------------------------------------------------------------------- */

.preview-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 24px;
}

.preview-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #eef2ff;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.15);
    flex-shrink: 0;
}

.preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.preview-name {
    font-size: var(--step-3);
    font-weight: 700;
    line-height: var(--leading-heading);
    color: var(--ink);
    margin: 0;
}

.preview-bio {
    font-size: var(--step-0);
    line-height: var(--leading-body);
    color: var(--ink-muted);
    max-width: 62ch;
}

.syllabus-heading {
    font-size: var(--step-1);
    font-weight: 700;
    line-height: var(--leading-heading);
    color: var(--ink);
}

.syllabus-subject {
    font-size: var(--step-0);
    font-weight: 700;
    line-height: var(--leading-heading);
    color: #4338ca;
}

/* The unit is the row that carries the free/locked answer, so it gets the
   weight; its lessons sit quietly underneath. */
.syllabus-unit {
    border: 1px solid #e9ecf5;
    border-radius: 14px;
    overflow: hidden;
}

.syllabus-unit + .syllabus-unit {
    margin-top: 8px;
}

.syllabus-unit__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f8f9fc;
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--ink);
}

.syllabus-unit--trial .syllabus-unit__header {
    background: #f0fdf4;
}

.syllabus-unit--trial {
    border-color: #bbf7d0;
}

/* The class badge beside a subject title. Deliberately NOT .syllabus-pill:
   that one carries `margin-inline-start: auto` to push the free/locked answer
   to the end of a unit row, which here would fling the class to the far edge
   of the heading instead of sitting next to the name it qualifies. */
.syllabus-subject__class {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--step--1);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    background: #eef2ff;
    color: #4338ca;
    white-space: nowrap;
}

.syllabus-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    font-size: var(--step--1);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    white-space: nowrap;
}

.syllabus-pill--free {
    background: #dcfce7;
    color: #15803d;
}

.syllabus-pill--locked {
    background: #eef1f6;
    color: #64748b;
    font-weight: 600;
}

/* Rows, not cards: one hairline between lessons instead of a border, a
   radius and a background per lesson. */
.syllabus-lesson {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: var(--step--1);
    color: var(--ink);
    background: #fff;
}

.syllabus-lesson + .syllabus-lesson {
    border-top: 1px solid #f1f3f9;
}

.syllabus-lesson__icon {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
}

.syllabus-lesson--locked {
    color: var(--ink-muted);
}

.syllabus-empty {
    padding: 8px 14px;
    font-size: var(--step--1);
    color: var(--ink-muted);
    background: #fff;
}

@media (max-width: 575.98px) {
    .preview-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 16px;
    }

    .preview-bio {
        text-align: start;
    }
    
}