/* ═══════════════════════════════════════════════════════════
   LEGIT ROBOTICS CENTER — NVIDIA-Inspired Design System
   Brand Colors: Blue #1A73E8 · Black · Gray
   ═══════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ─── */
:root {
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-glass: rgba(255, 255, 255, 0.06);
    --bg-glass-hover: rgba(255, 255, 255, 0.10);

    --accent: #1A73E8;
    --accent-light: #4da3ff;
    --accent-glow: rgba(26, 115, 232, 0.3);
    --accent-deep: #0d47a1;

    --green-accent: #00c853;
    --green-glow: rgba(0, 200, 83, 0.25);

    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.70);
    --text-muted: rgba(255, 255, 255, 0.62);

    --border: rgba(255, 255, 255, 0.10);
    --border-active: rgba(26, 115, 232, 0.5);

    /* NVIDIA: sharp corners */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-xl: 2px;

    --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px var(--accent-glow);

    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-arabic: 'Noto Kufi Arabic', sans-serif;

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Light Theme Overrides ─── */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f4f4f4;
    --bg-tertiary: #ebebeb;
    --bg-card: rgba(0, 0, 0, 0.03);
    --bg-glass: rgba(0, 0, 0, 0.04);
    --bg-glass-hover: rgba(0, 0, 0, 0.08);

    --text-primary: #000000;
    --text-secondary: rgba(0, 0, 0, 0.70);
    --text-muted: rgba(0, 0, 0, 0.56);

    --border: rgba(0, 0, 0, 0.10);

    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);

    --accent-light: #1A73E8;
    /* Darken for visibility on white */
    --green-accent: #008736;
    /* Darker green for contrast */
}

/* Ensure text-based generated logos are visible in light mode */
[data-theme="light"] .logo-text {
    fill: #000000;
    color: #000000;
}

[data-theme="light"] .tool-card {
    background: #ffffff;
    border: 1px solid var(--border);
}

/* ─── Force Dark Theme on Footers ─── */
footer,
.main-footer {
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-glass: rgba(255, 255, 255, 0.06);
    --bg-glass-hover: rgba(255, 255, 255, 0.10);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.70);
    --text-muted: rgba(255, 255, 255, 0.62);
    --border: rgba(255, 255, 255, 0.10);
    --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.5);
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ─── RTL Support ─── */
html[dir="rtl"] {
    font-family: var(--font-arabic), var(--font-body);
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
    font-family: var(--font-arabic), var(--font-heading);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent-light);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--accent);
}

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

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ═══════════════ NAVBAR (NVIDIA-style) ═══════════════ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
    transition: background var(--transition), box-shadow var(--transition);
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    height: 64px;
}

[data-theme="light"] .navbar {
    background: #ffffff;
}

.navbar.scrolled {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .navbar.scrolled {
    background: #ffffff;
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.nav-logo {
    display: flex;
    align-items: center;
    height: 100%;
    margin-inline-end: 16px;
    flex-shrink: 0;
}

.nav-logo-img {
    height: 38px;
    width: auto;
    max-width: none;
    flex-shrink: 0;
    transition: var(--transition);
    background: transparent;
    padding: 0;
    border-radius: 0;
    object-fit: contain;
}

/* Lock the navbar logo to ONE universal width on desktop so it never resizes when the
   language changes. The flex menu's width differs per language and was squeezing the
   logo (EN 144 / AR 188 / FR 67). Fixed width + flex-shrink:0 = identical everywhere. */
@media (min-width: 769px) {
    .nav-logo-img { width: 144px; }
}

/* Header and footer logos are INDEPENDENT files, each shown as-is (no recolouring):
   navbar = logo-new.png (full-colour brand mark), footer = images/footer-logo.png. */

.nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 100%;
    list-style: none;
}

.theme-toggle {
    background: #f4f4f4;
    border: 1px solid #d4d4d4;
    color: #4b4b4b;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.1rem;
    margin-inline-end: 8px;
}

.theme-toggle:hover {
    background: #e4e4e4;
    color: #000000;
}

.nav-links a {
    color: #4b4b4b;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    transition: color 0.2s ease;
    position: relative;
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.nav-links a:hover {
    color: #000000;
}

.nav-links a:hover::after {
    transform: scaleX(1);
}

/* ─── Programs Dropdown ─── */
.nav-dropdown {
    position: relative;
    height: 100%;
}

.nav-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 4px;
}

.dropdown-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Hover flyout = DESKTOP-ONLY. On mobile (≤768px) the dropdown is a click
   accordion; if :hover fires there it forces the panel visible and bleeds the
   program list over the page. Gating to ≥769px keeps mobile purely click-driven. */
@media (min-width: 769px) {
    .nav-dropdown:hover .dropdown-chevron {
        transform: rotate(180deg);
    }
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 320px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1001;
    pointer-events: none;
}

@media (min-width: 769px) {
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown-menu:hover {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
}

.dropdown-group {
    padding: 4px 0;
}

.dropdown-group-label {
    display: block;
    padding: 6px 20px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background: #f4f4f4;
}

.dropdown-item strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

.dropdown-item span {
    font-size: 0.72rem;
    color: #888;
    font-weight: 400;
}

.dropdown-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dropdown-dot.dot-green {
    background: #00c853;
}

.dropdown-dot.dot-blue {
    background: #1A73E8;
}

.dropdown-dot.dot-dark {
    background: #b08d17;
}

.dropdown-dot.dot-purple {
    background: #7c4dff;
}

.dropdown-dot.dot-orange {
    background: #ff6d00;
}

.dropdown-divider {
    height: 1px;
    background: #eee;
    margin: 4px 16px;
}

/* ─── Beyond the Academy Section ─── */
.beyond-academy {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid var(--border);
}

.programs-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
}

.program-format-info {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.program-format-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.program-format-info i {
    color: var(--accent);
    font-size: 0.75rem;
}

.program-no-prereq {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--green-accent);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

/* ─── Level 4 (University) Purple Theme ─── */
.program-level.level-purple {
    background: rgba(101, 50, 220, 0.12);
    color: #6532dc;
    border: 1px solid rgba(101, 50, 220, 0.25);
}

.program-card[data-level="4"] {
    border-top: 3px solid #7c4dff;
}

/* ─── Level 5 (Professional) Orange Theme ─── */
.program-level.level-orange {
    background: rgba(220, 90, 0, 0.12);
    color: #dc5a00;
    border: 1px solid rgba(220, 90, 0, 0.25);
}

.program-card[data-level="5"] {
    border-top: 3px solid #ff6d00;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    margin-inline-start: auto;
}

.nav-actions .btn {
    white-space: nowrap;
}

/* NVIDIA-style language switcher */
.lang-switcher {
    display: flex;
    gap: 2px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    align-items: center;
}

.lang-btn {
    background: none;
    border: none;
    color: #4b4b4b;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-body);
    letter-spacing: 0.05em;
}

.lang-btn.active {
    background: #e4e4e4;
    color: #000000;
}

.lang-btn:hover:not(.active) {
    color: #000000;
    background: #f4f4f4;
}

/* NVIDIA-style CTA */
.nav-cta {
    background: var(--accent);
    color: #ffffff !important;
    padding: 0 24px;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 0;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: none;
    white-space: nowrap;
}

.nav-cta:hover {
    background: var(--accent-light);
    transform: none;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-inline-start: 16px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #000000;
    transition: var(--transition);
    border-radius: 0;
}

/* ═══════════════ HERO (NVIDIA split layout) ═══════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-geometric-bg {
    position: absolute;
    inset: 0;
    background-color: var(--bg-dark);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
    pointer-events: none;   /* decorative grid must not capture taps — it was stealing the
                               Summer Camp callout's tap on mobile (callout is position:static there) */
}

.hero-slides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    display: flex;
    align-items: center;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}

/* Base Hexagon/Trapezoid mask for the right side image */
.hero-bg-shape {
    position: absolute;
    right: 0;
    top: 0;
    bottom: auto;
    width: 55%;
    height: 100vh;            /* fixed to viewport — image size stays constant across languages */
    z-index: 1;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    border-left: 6px solid var(--accent);
}

html[dir="rtl"] .hero-bg-shape {
    right: auto;
    left: 0;
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
    border-left: none;
    border-right: 6px solid var(--accent);
}

/* Left-fade overlay (mirrors the shop hero) so light photos can't wash out the hero text */
.hero-bg-shape::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent 40%);
    z-index: 1;
    pointer-events: none;
}

html[dir="rtl"] .hero-bg-shape::before {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.6), transparent 40%);
}

.hero-bg-image {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform 6s ease-out;
}

.hero-slide.active .hero-bg-image {
    transform: scale(1.03);
}

/* ─── About Gallery ─── */
.about-gallery {
    margin-top: 48px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 4px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border: none;
    aspect-ratio: 16/10;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
}

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

    .gallery-item {
        aspect-ratio: 16/9;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    padding: 120px 80px 80px;
    max-width: 820px;
}

html[dir="rtl"] .hero-content {
    text-align: right;
}

/* RTL: render phone numbers as a left-to-right unit so the digits keep their order */
html[dir="rtl"] a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Tablet guard: keep the text column off the un-dimmed part of the photo.
   The image shape starts at 45vw (bottom edge of the clip-path); a 600px
   border-box column (text ends at 520px) stays left of it down to ~769px. */
@media (max-width: 1100px) and (min-width: 769px) {
    .hero-content {
        max-width: 600px;
    }
}

/* Web (desktop ≥1101px): wider hero text. Widen the text column; the
   titles/subtitles fill it by default (no inline cap), and the CMS width-drag
   can still narrow an individual line (inline max-width, no !important to fight).
   62vw stays narrower than the photo's dimmed zone ≈67vw so white text stays readable. */
@media (min-width: 1101px) {
    .hero-content { max-width: min(1080px, 62vw); }
}

.hero-eyebrow {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.hero-title-line {
    display: block;
    color: #ffffff;
}

.hero-title-highlight {
    display: block;
    color: var(--accent);
}

.hero-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: #b0b0b0;
    max-width: none;
    margin: 0 0 40px 0;
    line-height: 1.6;
    font-weight: 400;
}

.hero-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

html[dir="rtl"] .hero-actions {
    justify-content: flex-end;
}

/* ─── Buttons (NVIDIA: rectangular, sharp, bold) ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 0;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: var(--font-body);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-light);
    color: white;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--text-secondary);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: var(--text-primary);
    transform: translateY(-2px);
}

.btn-full {
    width: 100%;
}

/* ─── Hero Bottom Nav (NVIDIA Interactive Tabs Style) ─── */
.hero-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.hero-nav-tab {
    background: transparent;
    border: none;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px 20px;
    text-align: start;
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
    outline: none;
}

html[dir="rtl"] .hero-nav-tab {
    text-align: right;
}

/* Keyboard focus replacement for the suppressed outline */
.hero-nav-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.hero-nav-tab:last-child {
    border-right: none;
}

.hero-nav-tab:hover {
    background: rgba(255, 255, 255, 0.05);
}

.tab-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    transition: color 0.3s;
}

.tab-sublabel {
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.hero-nav-tab.active .tab-label {
    color: var(--accent);
}

.hero-nav-tab.active .tab-sublabel {
    opacity: 1;
    font-weight: 600;
}

/* Progress bar animation */
.progress-track {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent);
}

html[dir="rtl"] .progress-bar {
    float: right;
}

.hero-nav-tab.active .progress-bar {
    animation: heroProgress 7s linear forwards;
}

.hero-nav-tab.paused .progress-bar {
    animation-play-state: paused;
}

@keyframes heroProgress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.hero-stat-suffix {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--accent);
}

.hero-stat-label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ─── Scroll Indicator ─── */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.scroll-arrow {
    width: 24px;
    height: 38px;
    border: 2px solid var(--border);
    border-radius: 12px;
    position: relative;
}

.scroll-arrow::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--accent);
    border-radius: 4px;
    animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {

    0%,
    100% {
        top: 6px;
        opacity: 1;
    }

    50% {
        top: 18px;
        opacity: 0.3;
    }
}

/* ═══════════════ SECTION DIVIDER (NVIDIA thin gradient line) ═══════════════ */
.section::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    margin-bottom: 0;
}

/* ═══════════════ SECTIONS (SHARED) ═══════════════ */
.section {
    padding: 100px 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
}

/* NVIDIA: Category tag above heading */
.section-tag {
    display: inline-block;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* ═══════════════ NVIDIA WHITE SECTIONS ═══════════════ */


/* Override all text colors in white sections */



/* Cards in white sections */


/* About grid in white sections */



/* Buttons in white sections */


/* Comparison table in white sections */






/* Contact form in white sections */














/* Program cards in white sections */








/* Software grid in white section */



/* Lab equipment grid in white */



/* Gallery in white section */

/* Hardware in white section */

/* Achievements in white section */



.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.section-desc {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-top: 16px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Card (NVIDIA: clean, sharp, dark) ─── */
.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0;
    transition: var(--transition);
}

.glass-card:hover {
    background: var(--bg-glass-hover);
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* ═══════════════ ABOUT ═══════════════ */
.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
}

.about-card {
    padding: 40px 32px;
    text-align: left;
    background: var(--bg-primary);
}

html[dir="rtl"] .about-card {
    text-align: right;
}

.about-icon {
    width: 48px;
    height: 48px;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 115, 232, 0.12);
    border-radius: 0;
    color: var(--accent);
}

.about-icon svg {
    width: 24px;
    height: 24px;
}

.about-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.about-card p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.7;
}

/* ═══════════════ PROGRAMS ═══════════════ */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.program-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 36px 28px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.program-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.program-card[data-level="1"]::before {
    background: var(--green-accent);
}

.program-card[data-level="2"]::before {
    background: var(--accent);
}

.program-card[data-level="3"]::before {
    background: linear-gradient(90deg, #8a7215, #c9a91e);
}

.program-card:hover {
    background: var(--bg-glass-hover);
    border-color: var(--accent);
    transform: translateY(-4px);
}

.program-level {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
}

.program-level-num {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    opacity: 0.15;
    line-height: 1;
}

.program-level-tag {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 0;
}

.level-green .program-level-tag {
    background: rgba(0, 168, 70, 0.15);
    color: #00a846;
}

.level-blue .program-level-tag {
    background: rgba(26, 115, 232, 0.15);
    color: #1a73e8;
}

.level-dark .program-level-tag {
    background: rgba(180, 155, 50, 0.12);
    color: #b08d17;
}

.program-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.program-age {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 9px;
}

.program-goal {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.7;
}

.program-skills {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skill-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0;
    border: 1px solid transparent;
    transition: var(--transition);
}

.skill-item:hover {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.05);
}

.skill-icon {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.skill-item strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.skill-item span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.program-elite-badge {
    margin-top: 24px;
    text-align: center;
    padding: 10px;
    background: rgba(180, 155, 50, 0.08);
    border: 1px solid rgba(180, 155, 50, 0.2);
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #b08d17;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.program-explore-link {
    display: block;
    margin-top: 15px;
    padding: 14px 20px;
    text-align: center;
    background: var(--accent);
    border: none;
    border-radius: 0;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: var(--transition);
}

.program-explore-link:hover {
    background: var(--accent-light);
    color: white;
    transform: translateY(-2px);
}

/* ═══════════════ LAB ═══════════════ */
.lab-showcase {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.lab-image-wrap {
    position: relative;
    overflow: hidden;
    border: none;
    /* --home-img-h: home "Lab/Facility" image height (desktop). Set inline on the
       <div class="lab-image-wrap" ...> in index.html. --home-img-h-m = phone height. */
    height: var(--home-img-h, 500px);   /* fixed box so object-fit:cover crops and the CMS reposition (object-position) pans */
}

.lab-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lab-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--bg-secondary) 0%, transparent 40%);
    pointer-events: none;   /* purely decorative — let clicks reach the image (so the CMS can edit it) */
}

.lab-equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
}

.equip-card {
    padding: 28px 24px;
    background: var(--bg-primary);
}

.equip-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 115, 232, 0.12);
    border-radius: 0;
    color: var(--accent);
    margin-bottom: 16px;
}

.equip-icon svg {
    width: 20px;
    height: 20px;
}

.equip-card h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.equip-card p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ═══════════════ HARDWARE ═══════════════ */
.hardware-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hardware-badge {
    display: inline-block;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.hardware-info h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 32px;
}

.hardware-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.hardware-features li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.feature-dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 0;
    flex-shrink: 0;
    margin-top: 8px;
}

.hardware-features strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
}

.hardware-features span {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.hardware-note {
    padding: 16px 20px;
    background: rgba(26, 115, 232, 0.06);
    border-inline-start: 3px solid var(--accent);
    border-radius: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.6;
}

/* ─── PCB Graphic ─── */
.hardware-visual {
    position: relative;
}

.hardware-pcb-graphic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}

.pcb-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    border-radius: 50%;
    animation: pcbPulse 3s ease-in-out infinite;
}

@keyframes pcbPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.pcb-board {
    position: relative;
    width: 280px;
    height: 320px;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-shadow: 0 0 40px rgba(26, 115, 232, 0.1);
}

.pcb-chip {
    background: #111;
    border: 1px solid var(--accent);
    padding: 16px 28px;
    font-family: 'Space Grotesk', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    border-radius: 0;
    letter-spacing: 0.1em;
}

.pcb-port {
    position: absolute;
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 4px 10px;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.65rem;
    color: var(--text-muted);
    border-radius: 0;
}

.pcb-port-1 {
    right: -8px;
    top: 50px;
}

.pcb-port-2 {
    right: -8px;
    top: 110px;
}

.pcb-port-3 {
    right: -8px;
    top: 170px;
}

.pcb-port-4 {
    right: -8px;
    top: 230px;
}

.pcb-trace {
    position: absolute;
    background: rgba(26, 115, 232, 0.2);
    height: 1px;
}

.pcb-trace-1 {
    width: 60px;
    left: 30px;
    top: 60px;
    transform: rotate(30deg);
}

.pcb-trace-2 {
    width: 80px;
    left: 20px;
    top: 120px;
    transform: rotate(-15deg);
}

.pcb-trace-3 {
    width: 50px;
    left: 40px;
    top: 200px;
    transform: rotate(45deg);
}

.pcb-trace-4 {
    width: 70px;
    left: 50px;
    top: 260px;
    transform: rotate(-25deg);
}

.pcb-led {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: ledBlink 2s infinite;
}

.pcb-led-1 {
    left: 25px;
    top: 30px;
    background: #00c853;
}

.pcb-led-2 {
    left: 25px;
    top: 50px;
    background: var(--accent);
    animation-delay: 0.5s;
}

.pcb-led-3 {
    left: 25px;
    top: 70px;
    background: #ff5252;
    animation-delay: 1s;
}

@keyframes ledBlink {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 6px currentColor;
    }

    50% {
        opacity: 0.3;
        box-shadow: none;
    }
}

/* ═══════════════ SOFTWARE ═══════════════ */
.software-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--border);
}

.software-card {
    padding: 24px 20px;
    text-align: center;
    background: var(--bg-primary);
}

.sw-icon {
    width: 140px;
    height: 140px;
    margin: 0 auto 22px;
    padding: 20px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: var(--transition);
}

.sw-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.software-card h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.software-card p {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ═══════════════ ACHIEVEMENTS ═══════════════ */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.achievement-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 36px 28px;
    text-align: center;
    transition: var(--transition);
}

.achievement-card:hover {
    background: var(--bg-glass-hover);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.achievement-icon {
    font-size: 2.4rem;
    margin-bottom: 16px;
}

.achievement-card h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.achievement-card p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ═══════════════ WHY US ═══════════════ */
.comparison-table {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--border);
}

.comparison-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.comparison-col {
    padding: 20px 28px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    background: var(--bg-card);
}

.comparison-col-us {
    background: rgba(26, 115, 232, 0.15);
    color: var(--accent);
}

.comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
}

.comparison-cell {
    padding: 16px 28px;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
}

.comparison-cell-bad {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.01);
}

.comparison-cell-bad::before {
    content: '✕';
    margin-right: 12px;
    color: #ff5252;
    font-weight: 700;
    flex-shrink: 0;
}

.comparison-cell-good {
    color: var(--text-primary);
    background: rgba(26, 115, 232, 0.04);
    font-weight: 500;
}

.comparison-cell-good::before {
    content: '✓';
    margin-right: 12px;
    color: #00a846;
    font-weight: 700;
    flex-shrink: 0;
}

/* RTL fix for comparison */
html[dir="rtl"] .comparison-cell-bad::before,
html[dir="rtl"] .comparison-cell-good::before {
    margin-right: 0;
    margin-left: 12px;
}

/* ═══════════════ CONTACT ═══════════════ */
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 32px;
    align-items: start;
}

.contact-form {
    padding: 40px 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.contact-form h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 28px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.form-group select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

html[dir="rtl"] .form-group select {
    background-position: left 14px center;
}

.form-group select option {
    background: var(--bg-secondary);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-info-card {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.contact-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.contact-info-card h4 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-info-card p {
    font-size: 1rem;
}

.contact-info-card a {
    color: var(--text-primary);
}

.contact-info-card a:hover {
    color: var(--accent);
}

.contact-schedule {
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.contact-schedule h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.schedule-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.schedule-item:last-child {
    border-bottom: none;
}

/* ─── Google Maps Embed ─── */
.contact-map {
    margin-top: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.contact-map iframe {
    width: 100%;
    height: 220px;
    border: 0;
    filter: invert(0.9) hue-rotate(180deg) brightness(0.8) contrast(1.2);
}

[data-theme="light"] .contact-map iframe {
    filter: none;
}

/* Full-width location map band (home #contact) — edge-to-edge, frameless, like a clean map strip */
.contact-map-band { width: 100%; line-height: 0; background: #0a0a0a; }
.contact-map-band iframe { width: 100%; height: 420px; border: 0; display: block; }
@media (max-width: 768px) { .contact-map-band iframe { height: 320px; } }

.contact-address {
    padding: 16px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-address p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.contact-address a {
    color: var(--accent);
    font-weight: 600;
}

/* ═══════════════ GALLERY (Social Media Images) ═══════════════ */
.gallery-section-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.gallery-section-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.gallery-section-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-section-item:hover img {
    transform: scale(1.08);
}

.gallery-section-item .gallery-section-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    font-size: 0.82rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ═══════════════ FOOTER ═══════════════ */
.footer {
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(26, 115, 232, 0.12), transparent 72%),
        #000;
    border-top: 1px solid var(--border);
    padding: 64px 0 28px;
    position: relative;
    overflow: hidden;
}

/* brand accent bar across the very top of the footer */
.footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent) 28%, #ff6d00 72%, transparent);
    opacity: 0.75;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas:
        "brand    connect"
        "quick    quick"
        "programs programs";
    gap: 30px 48px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
}

/* brand + connect share the top row; Quick Links & Programs become full-width rows */
.footer-grid > :nth-child(1) { grid-area: brand; }
.footer-grid > :nth-child(2) { grid-area: quick; }
.footer-grid > :nth-child(3) { grid-area: programs; }
.footer-grid > :nth-child(4) { grid-area: connect; }

/* Quick Links + Programs: inline links separated by a subtle pipe (no longer a stacked block) */
.footer-grid > :nth-child(2) a,
.footer-grid > :nth-child(3) a {
    display: inline-block;
    padding: 4px 0;
}
.footer-grid > :nth-child(2) a:not(:last-child)::after,
.footer-grid > :nth-child(3) a:not(:last-child)::after {
    content: "|";
    margin: 0 13px;
    color: var(--text-muted);
    opacity: 0.55;
    font-weight: 300;
}
.footer-grid > :nth-child(2) a:hover,
.footer-grid > :nth-child(3) a:hover {
    padding-left: 0;
    padding-right: 0;
    color: var(--accent);
}

.footer-logo {
    height: 90px;
    margin-bottom: 16px;
    object-fit: contain;
}

.footer-brand p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-links h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

/* short accent underline under each footer column heading */
.footer-links h4::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    margin-top: 9px;
    background: linear-gradient(90deg, var(--accent), transparent);
    border-radius: 2px;
}

html[dir="rtl"] .footer-links h4::after {
    background: linear-gradient(270deg, var(--accent), transparent);
}

.footer-links a {
    display: block;
    color: var(--text-secondary);
    font-size: 0.88rem;
    padding: 5px 0;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--text-primary);
    padding-left: 4px;
}

html[dir="rtl"] .footer-links a:hover {
    padding-left: 0;
    padding-right: 4px;
}

.footer-bottom {
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.footer-bottom p { margin: 0; }

@media (max-width: 640px) {
    .footer-bottom { justify-content: center; text-align: center; }
}

/* ═══════════════ FOOTER SOCIAL ICONS ═══════════════ */
.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.footer-social--center {
    justify-content: center;
    margin: 4px 0 20px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.03);
    transition: var(--transition);
    /* override .footer-links a block-display + padding shift */
    padding: 0;
}

.footer-social a:hover {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(26, 115, 232, 0.4);
    /* neutralize the .footer-links a:hover padding-left nudge */
    padding: 0;
}

html[dir="rtl"] .footer-social a:hover {
    padding-right: 0;
}

/* keep the icon row from inheriting the block layout of text links */
.footer-connect .footer-social a {
    display: inline-flex;
}

/* ═══════════════ WHATSAPP FLOAT ═══════════════ */
.whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 999;
    width: 56px;
    height: 56px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
    transition: var(--transition);
    animation: whatsappPulse 2.5s infinite;
}

html[dir="rtl"] .whatsapp-float {
    right: auto;
    left: 28px;
}

.whatsapp-float svg {
    width: 28px;
    height: 28px;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}

@keyframes whatsappPulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
    }

    50% {
        box-shadow: 0 4px 30px rgba(37, 211, 102, 0.55), 0 0 0 12px rgba(37, 211, 102, 0.1);
    }
}

/* ═══════════════ THEME NAV SWITCH ═══════════════ */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

html[dir="rtl"] .theme-switch-wrapper {
    margin-right: 0;
    margin-left: 12px;
}

.theme-switch {
    width: 56px;
    height: 28px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7px;
    transition: background-color 0.3s ease;
}

.theme-switch .theme-icon-sun,
.theme-switch .theme-icon-moon {
    font-size: 0.75rem;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease, opacity 0.3s ease;
    line-height: 1;
}

.theme-switch-thumb {
    width: 22px;
    height: 22px;
    background-color: var(--accent);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

/* Light Mode State - Thumb on Left (Sun) */
[data-theme="light"] .theme-switch {
    background-color: #e0e0e0;
}

[data-theme="light"] .theme-switch-thumb {
    transform: translateX(0);
}

[data-theme="light"] .theme-icon-sun {
    color: #ffffff;
    opacity: 1;
}

[data-theme="light"] .theme-icon-moon {
    color: #9ca3af;
    opacity: 0.6;
}

/* Dark Mode State - Thumb on Right (Moon) */
html:not([data-theme="light"]) .theme-switch {
    background-color: #2d3748;
}

html:not([data-theme="light"]) .theme-switch-thumb {
    transform: translateX(28px);
}

html:not([data-theme="light"]) .theme-icon-sun {
    color: #9ca3af;
    opacity: 0.6;
}

html:not([data-theme="light"]) .theme-icon-moon {
    color: #ffffff;
    opacity: 1;
}

/* Hover effect */
.theme-switch:hover {
    opacity: 0.85;
}


/* ═══════════════ ANIMATIONS ═══════════════ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* When the GSAP motion layer is active it controls these per-frame, so drop the
   CSS transition (it would otherwise fight the tween). Fallback path keeps it. */
html.gsap-on .animate-on-scroll {
    transition: none !important;
}
/* Once GSAP finishes revealing an element, re-enable transitions for hover
   props (transform, shadow, border-color). gsap-motion.js adds .gsap-revealed
   in onComplete. Hover polish on cards depends on this. */
html.gsap-on .animate-on-scroll.gsap-revealed {
    transition: transform .35s cubic-bezier(.2,.7,.2,1),
                box-shadow .35s ease,
                border-color .35s ease,
                background-color .25s ease !important;
}

/* ─── Hero Particles ─── */
.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0.2;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.3;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-10vh) translateX(var(--drift));
        opacity: 0;
    }
}

/* ═══════════════ RESPONSIVE ═══════════════ */

/* ─── Tablet ─── */
@media (max-width: 1024px) {
    .container {
        padding: 0 24px;
    }

    .nav-container {
        padding: 0 24px;
    }

    .programs-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    .programs-grid-2 {
        grid-template-columns: 1fr !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }

    .about-grid {
        grid-template-columns: 1fr;
        background: none;
        gap: 0;
    }

    .about-card {
        border-bottom: 1px solid var(--border);
    }

    .about-card:last-child {
        border-bottom: none;
    }

    .lab-equipment-grid {
        grid-template-columns: repeat(2, 1fr);
        background: none;
        gap: 16px;
    }

    .equip-card {
        border: 1px solid var(--border);
    }

    .software-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hardware-showcase {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hardware-visual {
        order: -1;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .gallery-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Mobile ─── */
/* Reduced-motion: make the menu open/close INSTANT (no animation) — but KEEP the
   off-screen transform so a closed menu is genuinely off-canvas. Forcing
   transform:none here (the old approach) left the closed panel on-screen relying on
   visibility alone, which a child's visibility:visible could leak back over the page. */
@media (prefers-reduced-motion: reduce) {
    .nav-links,
    .nav-links.active { transition: none !important; }
    .nav-dropdown-menu { transition: none !important; }
    .nav-dropdown-trigger .dropdown-chevron { transition: none !important; }
}

@media (max-width: 768px) {

    /* ── Mobile navigation: full-screen menu, START-aligned list rows ──
       UX-researched: start-align = one scan edge; logical inset padding =
       no submenu clipping + RTL-correct; fade+slide via GPU transform/opacity. */
    .nav-links {
        display: flex;
        position: fixed;
        inset: 0;
        /* Elevated panel surface. Was #0b0b0f — nearly identical to the dark
           page bg (#000), so the open menu looked invisible/empty. A subtle
           gradient + hairline reads as a real surface on BOTH black & white pages. */
        background: linear-gradient(180deg, #1a1a22 0%, #0e0e13 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        z-index: 999;
        padding: 78px 0 calc(32px + env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-100%);
        transition: transform 220ms cubic-bezier(0.3, 0, 0.8, 0.15),
                    visibility 0s linear 220ms;
    }

    .nav-links.active {
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: transform 280ms cubic-bezier(0.05, 0.7, 0.1, 1),
                    visibility 0s;
    }

    .nav-links > li { width: 100%; }

    .nav-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        height: auto;
        padding: 14px 22px;
        font-size: 1.06rem;
        font-weight: 500;
        text-align: start;
        /* Menu panel is always dark, so links stay light in both page themes. */
        color: rgba(255, 255, 255, 0.9);
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.06);
    }

    .hamburger {
        display: flex;
        z-index: 1001;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Mobile dropdown = in-place ACCORDION, animated via grid-template-rows 0fr→1fr */
    .nav-dropdown {
        position: static;
        height: auto;
        width: 100%;
    }

    .nav-dropdown-trigger {
        height: auto;
        width: 100%;
        justify-content: space-between;
        padding: 14px 22px;
    }

    /* Caret = the real inline SVG chevron (rotates 180° on open). We deliberately do
       NOT use a ::after caret: ".nav-links a::after" is the desktop blue underline,
       and reusing the same pseudo-element collided — the trigger's full-width (320px)
       underline got rotated 45° into the stray blue diagonal line. Killing the
       underline on mobile (below) + using the SVG removes that bug at the root. */
    .nav-dropdown-trigger .dropdown-chevron {
        display: inline-block;
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        opacity: 0.7;
        transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
    }
    .nav-dropdown.mobile-open .dropdown-chevron {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* Kill the desktop hover/active underline inside the full-screen menu — it is an
       absolutely-positioned blue bar with no purpose in the stacked mobile layout,
       and it was the source element of the rotated-diagonal artifact. */
    .nav-links a::after,
    .nav-links a.active::after {
        content: none;
    }

    .nav-dropdown-menu {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        min-width: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border: none;
        box-shadow: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 260ms cubic-bezier(0.2, 0, 0, 1);
    }

    .nav-dropdown.mobile-open .nav-dropdown-menu {
        grid-template-rows: 1fr;
    }

    /* JS-injected wrapper that the grid row clips. */
    .nav-dd-inner {
        min-height: 0;
        overflow: hidden;
    }

    .dropdown-group { padding-block: 6px; }

    .dropdown-group-label {
        color: rgba(255, 255, 255, 0.5);
        padding: 10px 22px 4px;
        font-size: 0.72rem;
        text-align: start;
    }

    /* higher specificity than ".nav-links a" so the submenu indent/alignment wins */
    .nav-links .dropdown-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 11px;
        min-height: 46px;
        padding-block: 9px;
        padding-inline: 30px 18px;   /* indent children, logical → no clip + RTL-safe */
        text-align: start;
    }

    .nav-links .dropdown-item .dropdown-dot {
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        margin: 0;
    }

    .dropdown-item strong {
        color: rgba(255, 255, 255, 0.92);
        font-size: 0.95rem;
        font-weight: 500;
    }

    .dropdown-item span {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.8rem;
    }

    .nav-links .dropdown-item:hover,
    .nav-links .dropdown-item.active {
        background: rgba(255, 255, 255, 0.05);
    }

    .dropdown-divider { display: none; }

    /* Hide desktop CTA */
    .nav-cta {
        display: none;
    }

    .lang-switcher {
        order: -1;
    }

    /* Sections */
    .section {
        padding: 64px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-title {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }

    .section-desc {
        font-size: 0.95rem;
    }

    .section-tag {
        font-size: 0.72rem;
    }

    /* Hero */
    .hero-content {
        padding: 100px 20px 60px;
    }

    .hero-title {
        font-size: clamp(2rem, 7vw, 2.8rem);
        margin-bottom: 16px;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 28px;
    }

    .hero-badge {
        font-size: 0.78rem;
        padding: 6px 16px;
        margin-bottom: 24px;
    }

    .hero-actions {
        margin-bottom: 40px;
        gap: 12px;
    }

    .hero-stats {
        gap: 20px;
        flex-wrap: wrap;
        padding-top: 28px;
    }

    .hero-stat-number,
    .hero-stat-suffix {
        font-size: 1.8rem;
    }

    .hero-stat-label {
        font-size: 0.75rem;
    }

    .scroll-indicator {
        display: none;
    }

    /* About */
    .about-card {
        padding: 28px 24px;
    }

    .about-card h3 {
        font-size: 1.15rem;
    }

    .about-card p {
        font-size: 0.9rem;
    }

    /* Programs */
    .program-card {
        padding: 28px 22px;
    }

    .program-title {
        font-size: 1.2rem;
    }

    .program-level-num {
        font-size: 1.8rem;
    }

    /* Lab */
    .lab-equipment-grid {
        grid-template-columns: 1fr;
    }

    .lab-image-wrap {
        height: var(--home-img-h-m, 280px);
    }

    .equip-card {
        padding: 22px 20px;
    }

    /* Hardware */
    .hardware-info h3 {
        font-size: 1.4rem;
    }

    .pcb-board {
        width: 220px;
        height: 260px;
    }

    .pcb-chip {
        padding: 12px 20px;
        font-size: 0.82rem;
    }

    .pcb-glow {
        width: 200px;
        height: 200px;
    }

    .hardware-pcb-graphic {
        min-height: 300px;
    }

    .hardware-note {
        font-size: 0.85rem;
    }

    /* Software & Hardware — compact logo-only grid on phones (3-across white tiles).
       Name + description are kept in the DOM but hidden; a tap opens the .tool-popup
       (built in script.js) that shows the translated name + description. Scoped to the
       two HOME sections so program pages reusing .software-grid are unaffected. */
    #software .software-grid,
    #hardware-suite .software-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        background: transparent;
    }

    #software .software-card,
    #hardware-suite .software-card {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 8px;
        min-height: 76px;
        text-align: center;
        cursor: pointer;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg-primary);
    }

    /* hide name + description on mobile (popup shows them) */
    #software .software-card h4,
    #software .software-card p,
    #hardware-suite .software-card h4,
    #hardware-suite .software-card p {
        display: none;
    }

    /* white logo tile fills the cell */
    #software .sw-icon,
    #hardware-suite .sw-icon {
        width: 100%;
        height: 58px;
        padding: 8px 10px;
        margin: 0;
        background: #ffffff;
        box-shadow: none;
    }

    #software .sw-icon .tech-icon-img,
    #hardware-suite .sw-icon .tech-icon-img {
        width: 100%;
        height: 100%;
    }

    /* Achievements */
    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .achievement-card {
        padding: 24px 20px;
    }

    .achievement-icon {
        font-size: 1.6rem;
    }

    .achievement-card h4 {
        font-size: 1rem;
    }

    .achievement-card p {
        font-size: 0.88rem;
    }

    /* Comparison Table */
    .comparison-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comparison-header,
    .comparison-row {
        min-width: 500px;
    }

    .comparison-cell {
        padding: 12px 16px;
        font-size: 0.82rem;
    }

    /* Contact */
    .contact-form {
        padding: 28px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        padding: 20px 18px;
    }

    .contact-map iframe {
        height: 180px;
    }

    /* Gallery */
    .gallery-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer {
        padding: 40px 0 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "quick"
            "programs"
            "connect";
        gap: 24px;
    }

    .footer-links h4 {
        margin-bottom: 10px;
    }

    .footer-logo {
        height: 66px;
    }

    .footer-social {
        justify-content: flex-start;
    }

    html[dir="rtl"] .footer-social {
        justify-content: flex-end;
    }

    /* WhatsApp */
    .whatsapp-float {
        width: 52px;
        height: 52px;
        bottom: 20px;
        right: 20px;
    }

    .whatsapp-float svg {
        width: 26px;
        height: 26px;
    }

    html[dir="rtl"] .whatsapp-float {
        right: auto;
        left: 20px;
    }

    /* Buttons */
    .btn {
        padding: 12px 24px;
        font-size: 0.88rem;
    }

    /* ── Touch-target sizing (Apple ≥44px / Google ≥48px) ──
       Top-bar controls + footer links measured 16–28px tall on phones.
       Grow the HIT area via min-size/padding without bloating the chrome. */
    /* Keep nav pills PROPORTIONATE to the 32px logo (a forced 38px made them chunky
       and taller than the logo; the toggle's 14px radius stopped reading as a pill). */
    .lang-btn {
        min-height: 28px;
        padding: 4px 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* .theme-switch: leave its natural 56×28 pill (radius matches height) — no override. */
    .hamburger {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
    .footer-links a,
    .footer-contact a,
    .footer-brand a {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
    }
    .program-hero-breadcrumb a {
        display: inline-block;
        padding: 4px 2px;
    }
    .hero-nav-tab {
        min-height: 40px;
    }
}

/* ─── Small Mobile ─── */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .hero-content {
        padding: 90px 16px 50px;
    }

    .hero-title {
        font-size: 1.75rem;
        line-height: 1.15;
    }

    .hero-subtitle {
        font-size: 0.88rem;
        line-height: 1.7;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Hero CTAs: content-width and smaller on phones (not full-width like form buttons) */
    .hero-actions .btn {
        width: auto;
        padding: 9px 20px;
        font-size: 0.78rem;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-stats {
        gap: 16px;
    }

    .hero-stat-number,
    .hero-stat-suffix {
        font-size: 1.5rem;
    }

    .section {
        padding: 48px 0;
    }

    .section-title {
        font-size: 1.35rem;
    }

    .section-header {
        margin-bottom: 32px;
    }

    .about-card {
        padding: 24px 18px;
    }

    .program-card {
        padding: 24px 18px;
    }

    .program-level-num {
        font-size: 1.5rem;
    }

    .program-title {
        font-size: 1.1rem;
    }

    .skill-item {
        padding: 8px 10px;
        gap: 10px;
    }

    .skill-icon {
        font-size: 1.1rem;
    }

    .skill-item strong {
        font-size: 0.82rem;
    }

    .skill-item span {
        font-size: 0.75rem;
    }

    #software .software-grid,
    #hardware-suite .software-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    #software .software-card,
    #hardware-suite .software-card {
        padding: 10px 6px;
    }

    .contact-form {
        padding: 24px 16px;
    }

    .contact-form h3 {
        font-size: 1.1rem;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .comparison-table {
        margin: 0 -16px;
        padding: 0 16px;
    }

    .nav-container {
        padding: 0 16px;
    }

    .nav-logo-img {
        /* Fluid: ~19px on a 360px phone, scaling up to 30px on roomier phones.
           Keeps the FULL logo (true ~5:1 shape) readable while leaving room for
           ALL nav controls, so the hamburger never clips off the edge. */
        height: clamp(19px, 5.5vw, 30px);
    }

    /* flex-shrink:0 stops the navbar from compressing the logo box (which letterboxed
       it to a tiny 58×12); the fluid height above is what keeps it fitting. */
    .nav-logo {
        flex-shrink: 0;
        margin-inline-end: 4px;
    }

    /* Tighten the controls cluster (was 16px gap) so the hamburger never clips off
       the edge — this is what "broke" on language switch (it flipped to the left
       edge in Arabic/RTL and got cut off). */
    .nav-actions {
        gap: 6px;
    }
    .lang-switcher {
        gap: 1px;
    }

    .lang-btn {
        font-size: 0.72rem;
        padding: 4px;
    }

    .footer-brand p {
        font-size: 0.85rem;
    }

    .footer-links a {
        font-size: 0.82rem;
    }

    .footer-bottom p {
        font-size: 0.75rem;
    }

    .gallery-section-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════ TECH LOGOS ═══════════════ */
.tech-icon-img {
    background: #ffffff;
    padding: 6px;
    border-radius: 6px;
    max-height: 40px;
    max-width: 40px;
    object-fit: contain;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.sw-icon .tech-icon-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
    display: block;
    margin: 0;
    transform-origin: center center;
    transition: transform 0.2s ease;
}

.tech-icon-img:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* The CMS stores per-logo zoom as an inline transform: scale(X). Inline styles beat
   this hover reset, so a zoomed logo keeps its scale on hover while un-zoomed logos
   don't jump around inside the (now fixed) frame. The frame itself lifts via .sw-icon:hover. */
.sw-icon .tech-icon-img:hover {
    transform: none;
    box-shadow: none;
}

/* Broken/empty hardware logo: hide the img instead of showing a broken-image glyph.
   (The old placeholder span and its styling were removed.) */
.sw-icon { position: relative; }
.tech-icon-img.is-empty { opacity: 0; }

/* ═══════════════ ACTIVE NAV LINK ═══════════════ */
.nav-links a.active {
    color: #000000;
}

.nav-links a.active::after {
    width: 100%;
}

/* ═══════════════ PAGE LOAD ANIMATION ═══════════════ */
body {
    opacity: 0;
    transition: opacity 0.4s ease;
}

body.loaded {
    opacity: 1;
}

/* ═══════════════ IMPROVED COMPARISON TABLE (Mobile) ═══════════════ */
@media (max-width: 600px) {

    .comparison-header,
    .comparison-row {
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .comparison-cell {
        font-size: 0.78rem;
        padding: 10px 12px;
    }

    .comparison-table {
        margin: 0;
        padding: 0;
        overflow-x: visible;
    }
}

/* ═══════════════ FORM SUCCESS STATE ═══════════════ */
.form-success {
    text-align: center;
    padding: 40px 20px;
    color: var(--green-accent);
    font-weight: 600;
    font-size: 1.1rem;
}

/* ═══════════════ SMOOTH IMAGE LOADING ═══════════════ */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.5s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
    opacity: 1;
}

/* Fix for images that load before JS */
img[loading="lazy"] {
    opacity: 1;
}

/* Respect reduced-motion user preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .particles, .hero-particles { display: none; }
    .hero-nav-tab .progress-bar { animation: none; }
    .hero-bg-image { transition: none; }
}

/* ═══════════════ MOBILE FIX: hero slide-tabs were repeat(6,1fr) and
   overflowed (≈806px) off-screen on phones. Make the bar a horizontal
   swipe strip so all 6 topic tabs stay reachable. ═══════════════ */
@media (max-width: 820px) {
    .hero-bottom-nav {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .hero-bottom-nav::-webkit-scrollbar { display: none; }
    .hero-nav-container {
        display: flex;
        max-width: none;
    }
    .hero-nav-tab {
        flex: 0 0 auto;
        min-width: 158px;
        scroll-snap-align: start;
    }
}

/* ═══════════════ NAVBAR — ALWAYS LIGHT / WHITE ═══════════════
   Per request the top nav bar stays white with dark content on EVERY page and in
   BOTH themes — it must NOT turn dark in dark mode. So we deliberately do not
   re-theme the bar for dark mode; it falls back to the light-mode defaults (white
   background, dark text, black hamburger, normal logo, light dropdown). The
   slide-down mobile menu panel is a separate element and stays dark. */

/* ═══════════════ MOBILE TOP BAR — fixed 3-zone layout ═══════════════
   Identical on every page and in every language:
   languages LEFT · logo CENTER · (theme pill + hamburger) RIGHT.
   Forced LTR so Arabic / RTL keeps the exact same physical arrangement. */
@media (max-width: 768px) {
    .nav-container { position: relative; }
    .nav-container .nav-logo {
        position: absolute; left: 50%; top: 0; bottom: 0;
        transform: translateX(-50%); margin: 0; z-index: 2;
        display: flex; align-items: center;
    }
    .nav-actions {
        direction: ltr;            /* same physical order in LTR & RTL */
        width: 100%; margin: 0; gap: 8px; justify-content: flex-start;
    }
    html[dir="rtl"] .theme-switch-wrapper { margin: 0; }
    .lang-switcher { order: -1; margin: 0 auto 0 0; }   /* far left, pushes the rest right */
    .theme-switch-wrapper { order: 0; margin: 0; }
    .hamburger { order: 1; margin: 0; }                 /* far right (corner) */
    .nav-cta { display: none; }
}

/* ── NVIDIA-style stacked hero on phones ──
   Same slide markup as the shop (.hero-content text + .hero-bg-shape image).
   On phones, show only the active slide in flow as a vertical stack:
   camp callout → text → contained product image → slide tabs at the bottom. */
@media (max-width: 768px) {
  .hero { display: block; height: auto; min-height: 0; max-height: none; }
  /* callout flows in (higher specificity than the page's inline rule) */
  .hero .hero-camp-callout {
    position: static; transform: none; display: flex; width: fit-content;
    max-width: 92vw; margin: 74px auto 2px;
  }
  /* Touch: :hover fires on the first tap. The desktop hover's translateX(-50%) (which
     keeps the ABSOLUTE callout centered) shoves the STATIC mobile callout half its width
     to the left, so it appears to "move and hide left". Neutralise the transform so the
     callout stays put when tapped. */
  .hero .hero-camp-callout:hover,
  .hero .hero-camp-callout:active,
  .hero .hero-camp-callout:focus {
    transform: none;
  }
  .hero-slides { position: static; height: auto; }
  .hero-slide { position: static; inset: auto; opacity: 1; visibility: visible; transition: none; display: none; }
  .hero-slide.active { display: flex; flex-direction: column; }
  .hero-content { position: static; max-width: 100%; padding: 8px 22px 6px; text-align: left; }
  html[dir="rtl"] .hero-content { text-align: right; }
  /* tighter vertical gaps so the whole hero fits one phone screen */
  .hero-eyebrow { margin-bottom: 6px; }
  .hero-title { margin-bottom: 8px; }
  .hero-subtitle { margin-bottom: 12px; }
  .hero-actions { margin-bottom: 0; }
  .hero-bg-shape,
  html[dir="rtl"] .hero-bg-shape {
    position: static; right: auto; left: auto; width: 100%;
    height: auto;                /* reset the desktop 100vh — otherwise the image wrapper is full-screen tall on phones */
    clip-path: none; opacity: 1; margin: 0 auto 6px;
  }
  .hero-bg-shape::before { display: none; }
  .hero-bg-image,
  .hero-slide.active .hero-bg-image {
    position: static; width: 100%; aspect-ratio: 4 / 3; height: auto;
    object-fit: cover; opacity: 1; transform: none !important; display: block;
    border-radius: 12px;            /* same 4:3 image box as the program-page hero */
  }
  /* NVIDIA-style minimal carousel indicator: thin bars, no topic labels */
  .hero-bottom-nav { position: static; background: transparent; padding: 2px 0 10px; border: none; box-shadow: none; }
  .hero-nav-container { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 8px; max-width: 340px; margin: 0 auto; padding: 0 16px; overflow: visible !important; }
  .hero-nav-tab { padding: 12px 0; border: none !important; background: transparent !important; min-height: 0; min-width: 0; flex: none; }
  .hero-nav-tab > *:not(.progress-track) { display: none !important; }
  .hero-nav-tab .progress-track { display: block; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
  .hero-nav-tab .progress-bar { height: 100%; border-radius: 999px; }
  .hero-nav-tab.active .progress-bar { width: 100% !important; background: var(--accent) !important; animation: none !important; }
  .hero-nav-tab:not(.active) .progress-bar { width: 0 !important; }
}
/* ── Accessibility: skip-to-content link (visually hidden until focused) ── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--accent, #1A73E8);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { left: 0; }
html[dir="rtl"] .skip-link { left: auto; right: -9999px; border-radius: 0 0 0 8px; }
html[dir="rtl"] .skip-link:focus { right: 0; left: auto; }

/* ═══════════════ TECH-LOGO TAP POPUP (HOME) ═══════════════
   program-detail.css is NOT loaded on index.html, so the .tool-popup styles are
   ported here. The popup is created + opened (mobile only) by the home IIFE in
   script.js; it shows the tapped logo + its translated name/description. */
.tool-popup { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.6); }
.tool-popup.open { display: flex; }
.tool-popup-box { position: relative; width: 100%; max-width: 340px; background: #ffffff; color: #111111; border: 1px solid rgba(0,0,0,.12); border-radius: 14px; padding: 30px 24px 26px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.tool-popup-logo { width: 160px; height: 70px; object-fit: contain; background: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.12); margin: 0 auto; display: block; }
.tool-popup-name { font-family: var(--font-heading); font-size: 1.12rem; font-weight: 700; margin: 16px 0 8px; color: #111111; }
.tool-popup-desc { color: #555555; font-size: 0.92rem; line-height: 1.6; }
.tool-popup-close { position: absolute; top: 6px; inset-inline-end: 12px; background: none; border: none; font-size: 1.9rem; line-height: 1; color: #777777; cursor: pointer; }

/* ═══════════════ RTL: PAGE-NAV PREV/NEXT ARROWS ═══════════════
   The prev/next chevrons in .page-nav-link are bare ← / → glyphs wrapped in
   .pnav-arrow spans. In RTL the flex row reverses, so each arrow must mirror to
   keep pointing the correct way (without mirroring the adjacent text). */
html[dir="rtl"] .pnav-arrow { display: inline-block; transform: scaleX(-1); }
/* PROGRAMS -> swipeable carousel on phones (active card forward, others recede behind) */
@media (max-width: 768px) {
  .programs-grid { display: flex !important; max-width: none !important; margin: 0 !important; gap: 6px; padding: 16px 2px 26px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .programs-grid::-webkit-scrollbar { display: none; }
  .programs-grid > .program-card {
    flex: 0 0 82%; min-width: 0; scroll-snap-align: center;
    transform: scale(0.88) !important; opacity: 0.45 !important;
    transition: transform .35s ease, opacity .35s ease; z-index: 1;
  }
  .programs-grid > .program-card.is-active {
    transform: scale(1) !important; opacity: 1 !important; z-index: 2;
    box-shadow: 0 16px 46px rgba(0,0,0,.22);
  }
  /* tighter spacing inside the program cards */
  .program-card { padding: 22px 18px; }
  .program-level { margin-bottom: 12px; }
  .program-level-num { font-size: 1.7rem; }
  .program-title { font-size: 1.18rem; margin-bottom: 6px; }
  .program-age { margin-bottom: 9px; }
  .program-goal { margin-bottom: 13px; line-height: 1.55; }
  .program-skills { gap: 5px; }
  .skill-item { padding: 6px 11px; }
  .program-explore-link { margin-top: 13px; padding: 11px 16px; }
}
/* mobile "see more" progressive-disclosure collapse */
.m-toggle { display: none; }
.hardware-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
@media (max-width: 768px) {
  .m-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 2px; background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 9px 16px; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
  .m-toggle .chev { transition: transform .3s ease; font-size: 0.72rem; }
  .m-toggle.open .chev { transform: rotate(180deg); }
  .m-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
  .m-collapse > .m-collapse-inner { overflow: hidden; min-height: 0; }
  .m-collapse.open { grid-template-rows: 1fr; }
}
/* carousel tabs (mobile): jump to a card by clicking */
.car-tabs { display: none; }
@media (max-width: 768px) {
  .car-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 2px 0 16px; }
  .car-tab { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 100px; padding: 7px 15px; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
  .car-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .camp-section .car-tab.active { background: #ff6d00; border-color: #ff6d00; }
}