/* ==========================================================================
   CEA redesign (Oct 2026) — academycea.com
   Royal blue + deep navy from the CEA emblem, glass cards and 3D depth.
   Logical properties throughout so Arabic (RTL) mirrors automatically.
   3D motion is switched off for visitors who ask for reduced motion.
   ========================================================================== */

:root {
    --ce-night: #030b24;
    --ce-navy: #071a45;
    --ce-navy-2: #0c2a6b;
    --ce-royal: #1457e8;
    --ce-royal-d: #0c43c4;
    --ce-sky: #4d8dff;
    --ce-cyan: #3fd0ff;
    --ce-ice: #e9f1ff;
    --ce-ink: #0b1630;
    --ce-muted: #56657f;
    --ce-line: #dfe7f5;
    --ce-tint: #f3f7ff;
    --ce-radius: 20px;
    --ce-radius-lg: 28px;
    --ce-shadow: 0 10px 30px rgba(7, 26, 69, .08);
    --ce-shadow-lg: 0 28px 70px rgba(7, 26, 69, .18);
    --ce-glow: 0 18px 50px rgba(20, 87, 232, .35);
}

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.ce-home h1, .ce-home h2, .ce-home h3 { letter-spacing: -0.015em; }
.rtl .ce-home h1, .rtl .ce-home h2, .rtl .ce-home h3 { letter-spacing: 0; }
.ce-home { overflow-x: clip; }

/* ---------- Buttons ---------- */
.ce-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 10px 24px; border-radius: 14px; border: 1.5px solid transparent;
    font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none !important; white-space: nowrap; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.ce-btn:hover { transform: translateY(-2px); }
.ce-btn--sm { min-height: 40px; padding: 8px 18px; font-size: 14px; border-radius: 12px; }
.ce-btn--lg { min-height: 56px; padding: 14px 30px; font-size: 16px; border-radius: 16px; }
.ce-btn--primary {
    color: #fff !important; background: linear-gradient(135deg, var(--ce-sky) 0%, var(--ce-royal) 55%, var(--ce-royal-d) 100%);
    box-shadow: var(--ce-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ce-btn--primary:hover { box-shadow: 0 22px 60px rgba(20, 87, 232, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ce-btn--glass {
    color: #fff !important; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ce-btn--glass:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); }
.ce-btn--outline { color: var(--ce-royal) !important; border-color: rgba(20, 87, 232, .35); background: #fff; }
.ce-btn--outline:hover { border-color: var(--ce-royal); box-shadow: var(--ce-shadow); }
.ce-arrow { display: inline-block; transition: transform .18s ease; }
.rtl .ce-arrow { transform: scaleX(-1); }
a:hover > .ce-arrow, a:hover .ce-arrow { transform: translateX(3px); }
.rtl a:hover > .ce-arrow, .rtl a:hover .ce-arrow { transform: scaleX(-1) translateX(3px); }

/* ---------- Labels / headings ---------- */
.ce-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    background: var(--ce-ice); color: var(--ce-royal-d); font-size: 13px; font-weight: 700;
}
.ce-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ce-royal); box-shadow: 0 0 0 4px rgba(20, 87, 232, .15); }
.ce-section--dark .ce-eyebrow, .ce-head--light .ce-eyebrow, .ce-footer .ce-eyebrow, .ce-band .ce-eyebrow {
    background: rgba(255, 255, 255, .1); color: #bfe6ff;
}
.ce-section--dark .ce-eyebrow::before, .ce-footer .ce-eyebrow::before, .ce-band .ce-eyebrow::before { background: var(--ce-cyan); box-shadow: 0 0 12px var(--ce-cyan); }
.ce-gradient-text {
    display: block; background: linear-gradient(100deg, #8fd8ff 0%, var(--ce-cyan) 30%, #7aa9ff 65%, #c9dcff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ce-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.ce-head h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; font-weight: 800; color: var(--ce-ink); margin: 16px 0 12px; }
.ce-head p { font-size: 17px; line-height: 1.75; color: var(--ce-muted); margin: 0; }
.ce-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; text-align: start; }
.ce-head--row > div { max-width: 680px; }
.ce-head--light h2 { color: #fff; }
.ce-head--light p { color: rgba(255, 255, 255, .75); }

/* ---------- Sections ---------- */
.ce-section { position: relative; padding: 96px 0; }
.ce-section--tint { background: linear-gradient(180deg, var(--ce-tint), #fff); }
.ce-section--dark, .ce-band, .ce-footer {
    color: rgba(255, 255, 255, .8); overflow: hidden;
    background:
        radial-gradient(800px 480px at 90% 0%, rgba(20, 87, 232, .45), transparent 60%),
        radial-gradient(700px 520px at 0% 100%, rgba(63, 208, 255, .16), transparent 60%),
        linear-gradient(180deg, var(--ce-night) 0%, var(--ce-navy) 100%);
}
.ce-section__sky { position: absolute; inset: 0; pointer-events: none; }
.ce-narrow { max-width: 860px; }

/* glow blobs + particles */
.ce-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .65; pointer-events: none; }
.ce-glow--1 { width: 460px; height: 460px; inset-inline-end: -120px; top: -120px; background: radial-gradient(circle, rgba(63, 208, 255, .55), transparent 70%); }
.ce-glow--2 { width: 520px; height: 520px; inset-inline-start: -160px; bottom: -200px; background: radial-gradient(circle, rgba(20, 87, 232, .7), transparent 70%); }
.ce-particles {
    position: absolute; inset: 0; opacity: .75;
    background-image:
        radial-gradient(1.6px 1.6px at 24px 40px, #fff 50%, transparent 52%),
        radial-gradient(1.2px 1.2px at 120px 150px, #bfe6ff 50%, transparent 52%),
        radial-gradient(1.6px 1.6px at 210px 70px, #fff 50%, transparent 52%),
        radial-gradient(1.2px 1.2px at 290px 200px, #8fd8ff 50%, transparent 52%),
        radial-gradient(1px 1px at 350px 30px, #fff 50%, transparent 52%);
    background-size: 380px 240px;
    animation: ce-drift 60s linear infinite;
}
@keyframes ce-drift { to { background-position: 380px -240px; } }

/* ---------- Header ---------- */
#themeHeaderVacuum { display: none; }
.ce-header { position: sticky !important; top: 0; z-index: 1030; margin-bottom: 0 !important; }
.ce-header__bar {
    background: rgba(3, 11, 36, .86); border-bottom: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
}
.ce-header__inner { display: flex; align-items: center; gap: 24px; min-height: 78px; }
.ce-header__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; flex: 0 0 auto; }
.ce-header__brand img { height: 46px; width: auto; filter: drop-shadow(0 6px 14px rgba(20, 87, 232, .45)); transition: transform .3s ease; }
.ce-header__brand:hover img { transform: perspective(300px) rotateY(-14deg) scale(1.05); }
.ce-header__name { display: flex; flex-direction: column; line-height: 1.15; }
.ce-header__name strong { color: #fff; font-size: 16px; font-weight: 800; }
.ce-header__name small { color: rgba(191, 230, 255, .75); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.ce-header__nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.ce-header__nav a {
    position: relative; color: rgba(255, 255, 255, .78) !important; font-weight: 600; font-size: 14.5px; padding: 9px 13px;
    border-radius: 12px; text-decoration: none !important; transition: color .15s, background .15s;
}
.ce-header__nav a:hover { color: #fff !important; background: rgba(255, 255, 255, .07); }
.ce-header__nav a.is-active { color: #fff !important; }
.ce-header__nav a.is-active::after {
    content: ""; position: absolute; inset-inline: 14px; bottom: 3px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ce-cyan), var(--ce-sky)); box-shadow: 0 0 10px var(--ce-cyan);
}
.ce-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ce-header__actions .bg-white-10 { background: rgba(255, 255, 255, .08) !important; }
.ce-header__icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255, 255, 255, .08); border: 0; cursor: pointer;
}
.ce-header__link { color: rgba(255, 255, 255, .85) !important; font-weight: 600; text-decoration: none !important; }
.ce-header__link:hover { color: #fff !important; }
.ce-header .header-1-dropdown-menu { inset-inline-end: 0; }
/* Categories dropdown (header_1 component) on the dark bar */
.ce-header__cats { flex: 0 0 auto; }
.ce-header__cats .theme-header-1__dropdown > div:first-child {
    padding: 9px 14px !important; border-radius: 12px !important; cursor: pointer;
    background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .12);
}
.ce-header__cats .theme-header-1__dropdown > div:first-child span, .ce-header__cats .theme-header-1__dropdown > div:first-child .icons { color: #fff !important; font-weight: 600; }
.ce-header__cats .theme-header-1__dropdown:hover > div:first-child { background: rgba(255, 255, 255, .14) !important; }
.ce-header__cats .header-1-dropdown-menu { inset-inline-start: 0; inset-inline-end: auto; min-width: 260px; }

/* ---------- Hero (3D) ---------- */
.ce-hero {
    position: relative; overflow: hidden; color: #fff; padding: 80px 0 150px;
    background:
        radial-gradient(900px 560px at 80% 10%, rgba(20, 87, 232, .55), transparent 60%),
        radial-gradient(700px 500px at 5% 95%, rgba(63, 208, 255, .22), transparent 60%),
        linear-gradient(180deg, var(--ce-night) 0%, #061a4d 60%, var(--ce-navy-2) 100%);
}
.ce-hero__sky { position: absolute; inset: 0; pointer-events: none; }
.ce-grid-floor {
    position: absolute; inset-inline: -40%; bottom: -10%; height: 60%;
    background-image:
        linear-gradient(rgba(63, 208, 255, .28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63, 208, 255, .28) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(600px) rotateX(68deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%);
    animation: ce-floor 9s linear infinite;
}
@keyframes ce-floor { to { background-position: 0 64px, 0 0; } }
.ce-hero__grid { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.ce-chip {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
    color: #d6eeff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ce-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ce-cyan); box-shadow: 0 0 12px var(--ce-cyan); animation: ce-pulse 2s ease-in-out infinite; }
@keyframes ce-pulse { 50% { transform: scale(1.5); opacity: .6; } }
.ce-hero__title { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.04; font-weight: 800; margin: 22px 0 10px; color: #fff; }
.rtl .ce-hero__title { line-height: 1.25; }
.ce-hero__title span { display: block; }
.ce-words { display: flex; align-items: center; min-height: 44px; font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; color: var(--ce-cyan); text-shadow: 0 0 24px rgba(63, 208, 255, .5); }
.ce-words__track { display: inline-block; transition: opacity .3s ease, transform .3s ease; }
.ce-words__track.is-out { opacity: 0; transform: translateY(10px) rotateX(60deg); }
.ce-words__caret { width: 3px; height: 1.1em; margin-inline-start: 6px; background: var(--ce-cyan); border-radius: 2px; animation: ce-blink 1s steps(1) infinite; }
@keyframes ce-blink { 50% { opacity: 0; } }
.ce-hero__subtitle { font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, .78); max-width: 580px; margin: 18px 0 0; }
.ce-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.ce-hero__points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 32px 0 0; padding: 0; list-style: none; }
.ce-hero__points li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .86); font-size: 14.5px; font-weight: 600; }
.ce-hero__points li::before {
    content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(63, 208, 255, .16); color: var(--ce-cyan); font-size: 12px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(63, 208, 255, .35);
}

/* 3D stage: JS sets --rx/--ry from the pointer; children move by their data-depth */
.ce-hero__stage { perspective: 1400px; }
.ce-stage {
    position: relative; transform-style: preserve-3d; min-height: 520px;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out;
}
.ce-stage > [data-depth] { transform: translateZ(calc(var(--z, 0) * 1px)); }
.ce-stage__card {
    --z: 40; position: absolute; inset-inline-end: 0; top: 0; width: 78%; aspect-ratio: 4 / 4.6; border-radius: 30px; overflow: hidden;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 60px rgba(20, 87, 232, .35);
}
.ce-stage__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-stage__shine {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
    background: radial-gradient(500px circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .55), transparent 45%);
}
.ce-emblem {
    --z: 140; position: absolute; inset-inline-start: -2%; bottom: 4%; width: 44%; animation: ce-float 6s ease-in-out infinite;
}
.ce-emblem img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(3, 11, 36, .6)) drop-shadow(0 0 30px rgba(63, 208, 255, .35)); }
.ce-emblem__shadow { position: absolute; inset-inline: 15%; bottom: -16%; height: 14%; border-radius: 50%; background: radial-gradient(rgba(63, 208, 255, .45), transparent 70%); filter: blur(6px); animation: ce-shadow 6s ease-in-out infinite; }
.ce-emblem--solo { inset-inline-start: 12%; bottom: 18%; width: 72%; }
@keyframes ce-float { 50% { translate: 0 -16px; rotate: -2deg; } }
@keyframes ce-shadow { 50% { transform: scale(.82); opacity: .55; } }
.ce-orbits { position: absolute; inset: 6% 0 0 6%; transform-style: preserve-3d; pointer-events: none; }
.ce-orbits span {
    position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1.5px solid rgba(63, 208, 255, .45);
    box-shadow: 0 0 22px rgba(63, 208, 255, .25), inset 0 0 22px rgba(63, 208, 255, .15);
    transform: rotateX(72deg) rotateZ(0deg); animation: ce-orbit 18s linear infinite;
}
.ce-orbits span:nth-child(1) { width: 96%; height: 96%; }
.ce-orbits span:nth-child(2) { width: 74%; height: 74%; border-color: rgba(77, 141, 255, .55); animation-duration: 12s; animation-direction: reverse; }
.ce-orbits span:nth-child(3) { width: 52%; height: 52%; border-style: dashed; animation-duration: 24s; }
.ce-orbits span::after { content: ""; position: absolute; top: -5px; inset-inline-start: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--ce-cyan); box-shadow: 0 0 16px var(--ce-cyan); }
@keyframes ce-orbit { to { transform: rotateX(72deg) rotateZ(360deg); } }
.ce-float-card {
    --z: 110; position: absolute; inset-inline-end: 2%; bottom: 8%; display: flex; align-items: center; gap: 12px; max-width: 290px;
    padding: 14px 18px; border-radius: 18px; text-decoration: none !important; color: var(--ce-ink) !important;
    background: rgba(255, 255, 255, .92); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    animation: ce-float 7s ease-in-out infinite reverse;
}
.ce-float-card__icon { flex: 0 0 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; background: linear-gradient(135deg, var(--ce-sky), var(--ce-royal-d)); box-shadow: var(--ce-glow); }
.ce-float-card strong { display: block; font-size: 15px; line-height: 1.3; }
.ce-float-card small { display: block; color: var(--ce-muted); font-size: 12.5px; margin-top: 2px; }

/* ---------- Key figures ---------- */
.ce-stats { position: relative; z-index: 5; margin-top: -86px; }
.ce-stats--flat { margin-top: 48px; }
.ce-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ce-stat {
    padding: 26px 22px; border-radius: var(--ce-radius); text-align: center; background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .7); box-shadow: var(--ce-shadow-lg);
}
.ce-stat strong {
    display: block; font-size: clamp(30px, 3vw, 40px); font-weight: 800; line-height: 1.1;
    background: linear-gradient(135deg, var(--ce-royal-d), var(--ce-sky)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ce-stat > span { display: block; margin-top: 6px; color: var(--ce-muted); font-weight: 600; font-size: 14.5px; }

/* ---------- 3D tilt cards (JS sets --rx/--ry/--mx/--my) ---------- */
[data-tilt] {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; will-change: transform;
}
[data-tilt].is-tilting { transition: transform .08s linear, box-shadow .35s ease; }

/* ---------- Categories ---------- */
.ce-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ce-cat {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: var(--ce-radius); text-decoration: none !important;
    background: #fff; border: 1px solid var(--ce-line); box-shadow: var(--ce-shadow); overflow: hidden;
}
.ce-cat::before {
    content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(20, 87, 232, .1), transparent 60%);
}
.ce-cat:hover { box-shadow: var(--ce-shadow-lg); border-color: rgba(20, 87, 232, .3); }
.ce-cat:hover::before { opacity: 1; }
.ce-cat__icon {
    position: relative; flex: 0 0 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--ce-ice), #fff); box-shadow: inset 0 0 0 1px rgba(20, 87, 232, .12), 0 8px 18px rgba(20, 87, 232, .12);
    font-weight: 800; font-size: 22px; color: var(--ce-royal);
}
.ce-cat__icon img { width: 30px; height: 30px; object-fit: contain; }
.ce-cat__text { position: relative; flex: 1; min-width: 0; }
.ce-cat__text strong { display: block; color: var(--ce-ink); font-size: 15.5px; line-height: 1.35; }
.ce-cat__text small { display: block; color: var(--ce-muted); margin-top: 3px; font-size: 13px; }
.ce-cat__go { position: relative; color: var(--ce-royal); font-weight: 800; opacity: .4; transition: opacity .2s, transform .2s; }
.rtl .ce-cat__go { transform: scaleX(-1); }
.ce-cat:hover .ce-cat__go { opacity: 1; }

/* ---------- Courses ---------- */
.ce-courses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ce-course {
    display: flex; flex-direction: column; border-radius: var(--ce-radius); overflow: hidden; text-decoration: none !important;
    background: #fff; border: 1px solid var(--ce-line); box-shadow: var(--ce-shadow);
}
.ce-course:hover { box-shadow: 0 30px 70px rgba(7, 26, 69, .2); }
.ce-course__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ce-ice); }
.ce-course__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ce-course:hover .ce-course__media img { transform: scale(1.06); }
.ce-course__price {
    position: absolute; inset-inline-end: 12px; bottom: 12px; padding: 6px 12px; border-radius: 10px; font-weight: 800; font-size: 14px;
    color: #fff; background: linear-gradient(135deg, var(--ce-sky), var(--ce-royal-d)); box-shadow: 0 8px 20px rgba(12, 67, 196, .4);
}
.ce-course__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.ce-course__cat { color: var(--ce-royal); font-size: 12.5px; font-weight: 700; }
.ce-course h3 {
    margin: 6px 0 14px; color: var(--ce-ink); font-size: 16.5px; font-weight: 700; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ce-course__meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ce-muted); }
.ce-course__teacher { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ce-course__teacher img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ce-rate { flex: 0 0 auto; font-weight: 700; color: var(--ce-ink); }
.ce-rate span { color: #ffb020; }
.ce-section--dark .ce-course { border-color: rgba(255, 255, 255, .1); }

/* ---------- Instructors ---------- */
.ce-people { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.ce-person {
    display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 16px 22px; border-radius: var(--ce-radius);
    background: #fff; border: 1px solid var(--ce-line); box-shadow: var(--ce-shadow); text-decoration: none !important;
}
.ce-person:hover { box-shadow: var(--ce-shadow-lg); }
.ce-person__avatar { position: relative; width: 96px; height: 96px; margin-bottom: 14px; }
.ce-person__avatar img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 10px 24px rgba(7, 26, 69, .18); }
.ce-person__ring { position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(from 0deg, var(--ce-cyan), var(--ce-royal), transparent 70%, var(--ce-cyan)); animation: ce-spin 6s linear infinite; }
@keyframes ce-spin { to { transform: rotate(360deg); } }
.ce-person strong { color: var(--ce-ink); font-size: 15px; line-height: 1.35; }
.ce-person small { color: var(--ce-muted); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.ce-person__go { margin-top: 12px; color: var(--ce-royal); font-size: 13px; font-weight: 700; }

/* ---------- Reviews ---------- */
.ce-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ce-review {
    margin: 0; padding: 26px; border-radius: var(--ce-radius); color: rgba(255, 255, 255, .86);
    background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.ce-review__stars span { color: rgba(255, 255, 255, .25); font-size: 17px; }
.ce-review__stars span.is-on { color: #ffc23d; text-shadow: 0 0 10px rgba(255, 194, 61, .5); }
.ce-review blockquote { margin: 14px 0 22px; font-size: 15.5px; line-height: 1.8; color: #fff; }
.ce-review__shot { display: block; margin: 16px 0 20px; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.ce-review__shot img { display: block; width: 100%; max-height: 360px; object-fit: contain; background: #fff; }
.ce-review figcaption { display: flex; align-items: center; gap: 12px; }
.ce-review figcaption img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(63, 208, 255, .6); }
.ce-review figcaption strong { display: block; color: #fff; font-size: 15px; }
.ce-review figcaption small { display: block; color: rgba(255, 255, 255, .6); font-size: 13px; }

/* ---------- Blog ---------- */
.ce-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ce-post { display: flex; flex-direction: column; border-radius: var(--ce-radius); overflow: hidden; background: #fff; border: 1px solid var(--ce-line); box-shadow: var(--ce-shadow); text-decoration: none !important; }
.ce-post:hover { box-shadow: var(--ce-shadow-lg); }
.ce-post__media { position: relative; aspect-ratio: 16 / 9; background: var(--ce-ice); overflow: hidden; }
.ce-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ce-post:hover .ce-post__media img { transform: scale(1.05); }
.ce-post__cat { position: absolute; inset-inline-start: 12px; top: 12px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ce-royal-d); background: rgba(255, 255, 255, .92); }
.ce-post__body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.ce-post time { color: var(--ce-muted); font-size: 13px; }
.ce-post h3 { margin: 8px 0 10px; color: var(--ce-ink); font-size: 17px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ce-post p { color: var(--ce-muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 16px; }
.ce-post__go { margin-top: auto; color: var(--ce-royal); font-weight: 700; font-size: 14px; }

/* ---------- Steps ---------- */
.ce-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ce-step { position: relative; padding: 30px 26px; border-radius: var(--ce-radius); background: #fff; border: 1px solid var(--ce-line); box-shadow: var(--ce-shadow); }
.ce-step__num {
    display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; font-weight: 800; font-size: 18px;
    color: #fff; background: linear-gradient(135deg, var(--ce-sky), var(--ce-royal-d)); box-shadow: var(--ce-glow);
}
.ce-step h3 { margin: 18px 0 8px; font-size: 19px; font-weight: 700; color: var(--ce-ink); }
.ce-step p { margin: 0; color: var(--ce-muted); line-height: 1.7; }

/* ---------- Picture + text ---------- */
.ce-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.ce-split--reverse .ce-split__media { order: 2; }
.ce-split__media img { width: 100%; border-radius: var(--ce-radius-lg); box-shadow: 0 40px 90px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .1); object-fit: cover; }
.ce-split__copy h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.2; font-weight: 800; color: #fff; margin: 16px 0 14px; }
.ce-split__copy p { font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, .78); }
.ce-split--light .ce-split__copy h2 { color: var(--ce-ink); }
.ce-split--light .ce-split__copy p { color: var(--ce-muted); }
.ce-split--light .ce-split__media img { box-shadow: var(--ce-shadow-lg); }
.ce-split .ce-btn { margin-top: 10px; }
.ce-checklist, .ce-crosslist { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; }
.ce-checklist li, .ce-crosslist li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; }
.ce-checklist li::before, .ce-crosslist li::before {
    flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; margin-top: 1px;
}
.ce-checklist li::before { content: "✓"; color: #fff; background: linear-gradient(135deg, var(--ce-sky), var(--ce-royal-d)); }
.ce-crosslist li::before { content: "✕"; color: #d14343; background: #fde8e8; }
.ce-checklist--light li { color: rgba(255, 255, 255, .88); }

/* ---------- Compare ---------- */
.ce-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ce-compare__col { padding: 34px; border-radius: var(--ce-radius-lg); background: #fff; border: 1px solid var(--ce-line); box-shadow: var(--ce-shadow); }
.ce-compare__col h3 { font-size: 20px; font-weight: 800; color: var(--ce-ink); margin: 0 0 6px; }
.ce-compare__col--after { border-color: rgba(20, 87, 232, .35); box-shadow: 0 24px 60px rgba(20, 87, 232, .16); }

/* ---------- Highlight band ---------- */
.ce-band { position: relative; padding: 100px 0; text-align: center; }
.ce-band h2 { color: #fff; font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; margin: 18px 0 14px; }
.ce-band p { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.8; }
.ce-traits { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.ce-traits span { padding: 10px 20px; border-radius: 999px; color: #fff; font-weight: 700; background: rgba(255, 255, 255, .08); border: 1px solid rgba(63, 208, 255, .35); box-shadow: 0 0 20px rgba(63, 208, 255, .12); }

/* ---------- FAQ ---------- */
.ce-faq { display: grid; gap: 14px; }
.ce-faq details { border-radius: 18px; background: #fff; border: 1px solid var(--ce-line); box-shadow: var(--ce-shadow); overflow: hidden; }
.ce-faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 700; color: var(--ce-ink); display: flex; justify-content: space-between; gap: 16px; }
.ce-faq summary::-webkit-details-marker { display: none; }
.ce-faq summary::after { content: "+"; flex: 0 0 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ce-ice); color: var(--ce-royal); font-size: 20px; transition: transform .2s; }
.ce-faq details[open] summary::after { transform: rotate(45deg); }
.ce-faq details p { margin: 0; padding: 0 24px 22px; color: var(--ce-muted); line-height: 1.8; }

/* ---------- Call to action ---------- */
.ce-cta {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 52px 56px; border-radius: 32px; overflow: hidden; color: #fff;
    background:
        radial-gradient(500px 300px at 85% 0%, rgba(63, 208, 255, .35), transparent 60%),
        linear-gradient(135deg, var(--ce-royal-d), var(--ce-navy) 70%);
    box-shadow: 0 40px 90px rgba(12, 67, 196, .35);
}
.ce-cta__emblem { position: absolute; inset-inline-end: -40px; bottom: -60px; width: 260px; opacity: .14; transform: rotate(-12deg); pointer-events: none; }
.ce-cta__emblem img { width: 100%; }
.ce-cta h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); font-weight: 800; margin: 12px 0 8px; }
.ce-cta p { color: rgba(255, 255, 255, .8); margin: 0; font-size: 16.5px; }
.ce-cta > div { position: relative; }
.ce-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Free text ---------- */
.ce-text { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.ce-text--with-image { grid-template-columns: 1.1fr 1fr; }
.ce-text h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.25; margin: 14px 0 16px; color: var(--ce-ink); font-weight: 800; }
.ce-text--dark h2 { color: #fff; }
.ce-text__body { color: var(--ce-muted); font-size: 17px; line-height: 1.8; }
.ce-text--dark .ce-text__body { color: rgba(255, 255, 255, .8); }
.ce-text__body a { color: var(--ce-royal); text-decoration: underline; }
.ce-text__media img { width: 100%; border-radius: var(--ce-radius-lg); box-shadow: var(--ce-shadow-lg); object-fit: cover; }

/* ---------- Quotes / founders carousel ---------- */
.ce-founder {
    display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: center; padding: 44px; border-radius: 32px;
    background: linear-gradient(160deg, #fff, var(--ce-tint)); border: 1px solid var(--ce-line); box-shadow: var(--ce-shadow-lg);
}
.ce-founder--no-photo { grid-template-columns: 1fr; }
.ce-founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; box-shadow: var(--ce-shadow-lg); }
.ce-founder blockquote { font-size: 22px; line-height: 1.6; font-weight: 700; color: var(--ce-navy); margin: 18px 0; }
.ce-founder p { color: var(--ce-muted); line-height: 1.8; }
.ce-founder__mission { color: var(--ce-ink) !important; font-weight: 600; }
.ce-founder__role { display: inline-block; margin-top: 8px; font-weight: 800; color: var(--ce-royal); }
.ce-quotes__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.ce-quotes__track::-webkit-scrollbar { display: none; }
.ce-quotes__slide { flex: 0 0 100%; scroll-snap-align: start; }
.ce-quotes__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.ce-quotes__arrow {
    width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--ce-line); background: #fff; color: var(--ce-royal);
    font-size: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--ce-shadow);
}
.ce-quotes__arrow:hover { background: var(--ce-royal); color: #fff; }
.rtl .ce-quotes__arrow { transform: scaleX(-1); }
.ce-quotes__dots { display: flex; gap: 8px; }
.ce-quotes__dots button { width: 10px; height: 10px; border-radius: 999px; border: 0; background: var(--ce-line); cursor: pointer; padding: 0; transition: width .2s, background .2s; }
.ce-quotes__dots button.is-active { width: 28px; background: var(--ce-royal); }

/* ---------- Footer ---------- */
.ce-footer { position: relative; padding: 80px 0 32px; font-size: 14.5px; }
.ce-footer__cta {
    position: relative; display: flex; align-items: center; gap: 28px; padding: 34px 40px; margin-bottom: 40px; border-radius: 28px;
    background: linear-gradient(135deg, rgba(20, 87, 232, .55), rgba(12, 42, 107, .55)); border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.ce-footer__cta > div { flex: 1; }
.ce-footer__cta h3 { color: #fff; font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; margin: 10px 0 0; }
.ce-footer__cta-emblem { width: 120px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .45)); animation: ce-float 6s ease-in-out infinite; }
.ce-footer__news {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 32px; margin-bottom: 56px; border-radius: var(--ce-radius);
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.ce-footer__news h4 { margin: 0 0 4px; }
.ce-footer__news p { margin: 0; color: rgba(255, 255, 255, .65); }
.ce-footer__news-form { position: relative; display: flex; gap: 10px; flex: 0 1 460px; flex-wrap: wrap; }
.ce-footer__news-form input {
    flex: 1; min-width: 200px; min-height: 48px; padding: 0 18px; border-radius: 14px; color: #fff;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06);
}
.ce-footer__news-form input::placeholder { color: rgba(255, 255, 255, .5); }
.ce-footer__news-form .invalid-feedback { flex-basis: 100%; }
.ce-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; gap: 40px; }
.ce-footer__brand p { margin: 18px 0; line-height: 1.8; max-width: 400px; }
.ce-footer h4 { color: #fff; font-size: 15.5px; font-weight: 800; margin: 0 0 16px; }
.ce-footer__grid > div:not(.ce-footer__brand) { display: flex; flex-direction: column; gap: 10px; }
.ce-footer a { color: rgba(255, 255, 255, .72) !important; text-decoration: none !important; }
.ce-footer a:hover { color: #fff !important; }
.ce-footer a.ce-btn { color: #fff !important; }
.ce-footer__social { display: flex; flex-wrap: wrap; gap: 10px; }
.ce-footer__social a { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .08); transition: background .2s, transform .2s; }
.ce-footer__social a:hover { background: var(--ce-royal); transform: translateY(-2px); }
.ce-footer__social img { width: 18px; height: 18px; filter: brightness(0) invert(1); opacity: .9; }
.ce-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }

/* ---------- Scroll reveal (only when JS runs, so content never hides without it) ---------- */
.ce-js [data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .7s ease var(--d, 0ms), translate .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.ce-js [data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* ==========================================================================
   Site-wide touches so inner pages match the new look
   ========================================================================== */
.mobile-header, .theme-mobile-header { background: var(--ce-night) !important; }
section[class*="lists-hero"] {
    background:
        radial-gradient(1.5px 1.5px at 20px 30px, #fff 50%, transparent 51%) 0 0 / 360px 220px,
        radial-gradient(1px 1px at 160px 120px, #bfe6ff 50%, transparent 51%) 0 0 / 360px 220px,
        radial-gradient(700px 320px at 85% 20%, rgba(20, 87, 232, .55), transparent 60%),
        linear-gradient(180deg, var(--ce-night) 0%, var(--ce-navy) 100%);
}
section[class*="lists-hero"] > img.img-cover { opacity: 0; }
section[class*="lists-hero"] > [class$="__mask"] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .ce-courses { grid-template-columns: repeat(3, 1fr); }
    .ce-people { grid-template-columns: repeat(3, 1fr); }
    .ce-header__nav a { padding: 8px 9px; font-size: 13.5px; }
    .ce-header__name small { display: none; }
}
@media (max-width: 991px) {
    .ce-hero { padding: 48px 0 130px; }
    .ce-hero__grid, .ce-split, .ce-compare, .ce-founder, .ce-text--with-image { grid-template-columns: 1fr; gap: 40px; }
    .ce-stage { min-height: 440px; max-width: 560px; margin-inline: auto; }
    .ce-cats { grid-template-columns: repeat(2, 1fr); }
    .ce-courses, .ce-reviews, .ce-posts { grid-template-columns: repeat(2, 1fr); }
    .ce-steps { grid-template-columns: 1fr; }
    .ce-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .ce-section { padding: 72px 0; }
    .ce-split--reverse .ce-split__media { order: 0; }
    .ce-founder { padding: 28px; }
    .ce-founder__photo { max-width: 320px; }
    .ce-cta { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
    .ce-footer__grid { grid-template-columns: 1fr 1fr; }
    .ce-footer__news, .ce-footer__cta { flex-direction: column; align-items: stretch; text-align: start; }
    .ce-footer__cta-emblem { width: 90px; }
    .ce-footer__news-form { flex: 0 0 auto; align-items: center; }
    .ce-footer__news-form input { flex: 1 1 200px; height: 48px; }
    .ce-footer__news-form .ce-btn { flex: 0 0 auto; }
    .ce-header__nav { display: none; }
}
@media (max-width: 575px) {
    .ce-hero__actions .ce-btn { width: 100%; }
    .ce-stage { min-height: 360px; }
    .ce-float-card { inset-inline-end: 0; max-width: 240px; }
    .ce-cats, .ce-courses, .ce-reviews, .ce-posts { grid-template-columns: 1fr; }
    .ce-people { grid-template-columns: repeat(2, 1fr); }
    .ce-head--row { flex-direction: column; align-items: flex-start; }
    .ce-footer__grid { grid-template-columns: 1fr; }
    .ce-stat { padding: 20px 14px; }
}

/* ---------- Reduced motion: no 3D movement, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
    .ce-particles, .ce-grid-floor, .ce-emblem, .ce-emblem__shadow, .ce-orbits span, .ce-float-card, .ce-person__ring, .ce-chip__dot, .ce-footer__cta-emblem, .ce-words__caret { animation: none !important; }
    .ce-stage, [data-tilt] { transform: none !important; }
    .ce-js [data-reveal] { opacity: 1; translate: none; }
}
.ce-header__cats .theme-header-1__categories a, .ce-header__cats .header-1-dropdown-menu__sub-menu a { color: var(--ce-ink) !important; font-weight: 600; }

.ce-header__cats .theme-header-1__categories a span, .ce-header__cats .header-1-dropdown-menu__sub-menu a span { color: inherit !important; }
.ce-header__cats .header-1-dropdown-menu__sub-menu { min-width: 280px; }
/* category icons: fixed box; a missing icon file can't show its alt text or push the label */
.ce-header__cats .cat-dropdown-menu-icon { flex: 0 0 24px; width: 24px; height: 24px; object-fit: contain; overflow: hidden; font-size: 0; color: transparent; }

/* hover stays inside the panel: highlight the row, indent the label (no sideways shift) */
.ce-header__cats .theme-header-1__dropdown .header-1-dropdown-menu .header-1-dropdown-menu__item:hover > a { transform: none !important; }
.ce-header__cats .theme-header-1__categories > li { margin-inline: 8px; border-radius: 10px; }
.ce-header__cats .theme-header-1__categories > li > a { transition: padding .2s ease, color .2s ease; }
.ce-header__cats .theme-header-1__categories > li:hover { background: var(--ce-tint) !important; }
.ce-header__cats .theme-header-1__categories > li:hover > a { padding-inline-start: 22px !important; }
.ce-header__cats .theme-header-1__dropdown .header-1-dropdown-menu .header-1-dropdown-menu__item:hover > a,
.ce-header__cats .theme-header-1__dropdown .header-1-dropdown-menu .header-1-dropdown-menu__item:hover > a span { color: var(--ce-royal) !important; }
.ce-header__cats .theme-header-1__dropdown .header-1-dropdown-menu__sub-menu li,
.ce-header__cats .theme-header-1__dropdown .header-1-dropdown-menu__sub-menu li * { color: var(--ce-ink) !important; }
.ce-header__cats .theme-header-1__dropdown .header-1-dropdown-menu__sub-menu li { margin-inline: 8px; border-radius: 10px; }
.ce-header__cats .theme-header-1__dropdown .header-1-dropdown-menu__sub-menu li:hover { background: var(--ce-tint); }
.ce-header__cats .theme-header-1__dropdown .header-1-dropdown-menu__sub-menu li:hover * { color: var(--ce-royal) !important; }
