/* =============================================
   MOBILE DEDICATED EXPERIENCE (Premium Redesign)
   Loaded via media="(max-width: 900px)"
   ============================================= */

/* =============================================
   COMPONENT 0: GLOBAL RESETS & PERFORMANCE
   ============================================= */

/* ============================================================
   OVERFLOW CONTAINMENT — Nuclear fix for horizontal scroll
   overflow-x: clip on body = clips content WITHOUT breaking
   position:fixed (unlike overflow:hidden which breaks fixed!)
   ============================================================ */

html {
    font-size: 14px !important;
    overflow-x: clip !important;
    max-width: 100vw !important;
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
    -ms-overflow-style: none !important;
}

/* Kill ALL scrollbars on mobile — vertical AND horizontal */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

body {
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
    -ms-overflow-style: none !important;
    overflow: visible !important;
    overscroll-behavior-x: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 20px)) !important;
    -webkit-text-size-adjust: 100% !important;
}

/* Universal box-sizing */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Ensure images and videos are responsive */
img, video, iframe, svg, canvas {
    max-width: 100% !important;
}



/* Kill all cursors — touch device */
* {
    cursor: auto !important;
}

/* Hide desktop-only elements for performance */
.cursor-outer,
.cursor-inner,
#section-tracker,
.ambient-glow,
.grid-mesh {
    display: none !important;
}

/* Kill expensive ambient orbs */
body::before,
body::after {
    display: none !important;
}

/* Disable expensive animations globally */
.project-visual::after {
    display: none !important;
}

/* Content-visibility for below-fold sections */
section:not(.hero) {
    content-visibility: auto !important;
    contain-intrinsic-size: auto 500px !important;
}


/* =============================================
   COMPONENT 1: BOTTOM DOCK NAVIGATION
   ============================================= */

/* Hide desktop nav completely */
nav.desktop-nav {
    display: none !important;
    visibility: hidden !important;
}

/* Premium floating dock — Apple-inspired pill */
.mobile-nav {
    display: flex !important;
    position: fixed !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    transform: none !important;
    background: rgba(12, 12, 12, 0.92) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 50px !important;
    padding: 10px 8px !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    z-index: 9999 !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.85),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.05) !important;
}

/* All nav items — uniform sizing */
.mobile-nav .mobile-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    text-decoration: none !important;
    font-size: inherit !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    padding: 6px 0 !important;
    min-width: 0 !important;
    width: 20% !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    -webkit-tap-highlight-color: transparent !important;
    flex: 1 1 0% !important;
    background: transparent !important;
    filter: none !important;
    transform: none !important;
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
}

/* Icon — uniform */
.mobile-nav .mobile-item i {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    display: block !important;
}

/* Label — uniform */
.mobile-nav .mobile-item span {
    font-size: 0.5rem !important;
    font-family: var(--font-code), monospace !important;
    letter-spacing: 0.8px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    opacity: 0.7 !important;
    display: block !important;
}

/* Active state — subtle red accent + dot indicator */
.mobile-nav .mobile-item.active {
    color: var(--accent-red) !important;
    transform: none !important;
    background: transparent !important;
    filter: none !important;
}

.mobile-nav .mobile-item.active span {
    opacity: 1 !important;
    color: var(--accent-red) !important;
}

/* Active dot indicator under icon */
.mobile-nav .mobile-item.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--accent-red) !important;
    box-shadow: 0 0 8px rgba(255, 31, 31, 0.6) !important;
}

/* Tap feedback */
.mobile-nav .mobile-item:active {
    transform: scale(0.88) !important;
    opacity: 0.6 !important;
}


/* =============================================
   COMPONENT 2: HERO SECTION — Cinematic Mobile
   ============================================= */

.hero {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: auto !important;
    min-height: auto !important;
    background: #000 !important;
    background-image: none !important;
    padding: 0 !important;
    padding-bottom: 30px !important;
    display: flex !important;
    perspective: none !important;
    overflow: visible !important;
    position: relative !important;
}

/* Cinematic red atmosphere — tighter glow */
.hero::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -10% !important;
    right: -10% !important;
    height: 50% !important;
    background: radial-gradient(
        ellipse at 50% 20%,
        rgba(200, 20, 20, 0.4) 0%,
        rgba(140, 10, 10, 0.2) 35%,
        transparent 70%
    ) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Disable grid mesh on mobile */
.hero .grid-mesh {
    display: none !important;
}

/* Disable floating particles */
.hero::before {
    animation: none !important;
    opacity: 0.08 !important;
}

/* Image — full-bleed cover, fills entire top half */
.hero-visual {
    position: relative !important;
    width: 100% !important;
    height: 55vh !important;
    height: 55dvh !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2 !important;
    display: block !important;
    order: 1 !important;
    background: transparent !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    overflow: hidden !important;
}

/* Bottom vignette — smooth fade into black */
.hero-visual::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40% !important;
    background: linear-gradient(
        to top,
        #000 0%,
        rgba(0, 0, 0, 0.85) 30%,
        rgba(0, 0, 0, 0.4) 60%,
        transparent 100%
    ) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    display: block !important;
}

/* The actual image — COVER fills the container, crops bottom */
.hero-visual img {
    object-fit: cover !important;
    object-position: center top !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    filter:
        brightness(0.95)
        drop-shadow(0 0 60px rgba(180, 15, 15, 0.3)) !important;
    opacity: 1 !important;
    transform: scale(1.25) translateY(-15%) !important;
    transform-origin: center top !important;
    animation: none !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Text Container — block layout, kills desktop flex scroll trap */
.hero-container {
    display: block !important;
    position: relative !important;
    padding: 0 24px !important;
    height: auto !important;
    text-align: center !important;
    z-index: 10 !important;
    margin-top: -20px !important;
    width: 100% !important;
    order: 2 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    align-items: unset !important;
    justify-content: unset !important;
}

.hero-content {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    max-width: 100% !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

/* Hide Status Badge on Mobile */
.status-badge {
    display: none !important;
}

/* Hero heading — cinematic */
h1 {
    font-size: clamp(2.6rem, 11vw, 3.8rem) !important;
    line-height: 0.95 !important;
    margin-bottom: 12px !important;
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.9),
        0 10px 40px rgba(0, 0, 0, 0.6) !important;
    animation: none !important;
    text-align: center !important;
    letter-spacing: -0.02em !important;
}

/* Role Tag — glass outline style with red accent text */
.role-tag {
    font-size: 0.65rem !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    background: rgba(255, 31, 31, 0.06) !important;
    color: var(--accent-red) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 10px 24px !important;
    margin: 0 auto 18px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 31, 31, 0.25) !important;
    box-shadow: 0 0 20px rgba(255, 31, 31, 0.08) !important;
    justify-content: center !important;
    letter-spacing: 3px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
}

.role-tag .role-divider {
    display: inline !important;
    opacity: 0.3 !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Credential Badges — wrap instead of scroll */
.hero-credentials {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 22px !important;
    flex-wrap: wrap !important;
    overflow: hidden !important;
    padding: 2px 0 6px !important;
    justify-content: center !important;
}

.hero-credentials::-webkit-scrollbar {
    display: none !important;
}

.credential-badge {
    flex-shrink: 0 !important;
    font-size: 0.68rem !important;
    padding: 7px 14px !important;
    animation: none !important;
    white-space: nowrap !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
}

/* CTA Buttons — Full width stacked, glass style */
.cta-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 10px !important;
}

.btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    padding: 14px 20px !important;
    min-height: 50px !important;
    border-radius: 12px !important;
    letter-spacing: 1px !important;
}

/* Hero Stats — inline 3-col */
.hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0 !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
    width: 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.hero-stat {
    text-align: center !important;
    align-items: center !important;
    position: relative !important;
}

/* Divider between stats */
.hero-stat:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 10% !important;
    height: 80% !important;
    width: 1px !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.hero-stat-number {
    font-size: 1.6rem !important;
}

.hero-stat-label {
    font-size: 0.55rem !important;
    letter-spacing: 1.5px !important;
    opacity: 0.5 !important;
}


/* =============================================
   COMPONENT 3: CONTENT SECTIONS — SINGLE COLUMN
   ============================================= */

/* All sections — tighter mobile padding */
section:not(.hero) {
    padding: 60px 20px !important;
}

/* Section headers */
.section-header {
    margin-bottom: 40px !important;
}

.section-tag {
    font-size: 0.65rem !important;
    letter-spacing: 3px !important;
}

h2 {
    font-size: 1.8rem !important;
}

/* Dynamic font overrides */
.fs-about,
.fs-proj {
    font-size: 1.6rem !important;
}

/* Section header reveals — instant on mobile */
.section-header .section-tag,
.section-header h2 {
    opacity: 1 !important;
    transform: none !important;
}

/* Scroll reveals — simplified */
.reveal {
    transform: translateY(20px) !important;
}
.reveal.active {
    transform: translateY(0) !important;
}

/* Project reveals — no horizontal slide */
.project-item.reveal,
.project-item.reveal:nth-child(even) {
    transform: translateY(20px) !important;
    opacity: 0;
}
.project-item.reveal.active {
    transform: translateY(0) !important;
    opacity: 1;
}

/* === ABOUT === */
.about-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
}

.personal-details {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.bio-text p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
}

/* === VENTURES === */
.ventures-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
}

.venture-card {
    padding: 20px !important;
}

.venture-info h3 {
    font-size: 1.05rem !important;
}

.venture-info p {
    font-size: 0.82rem !important;
}

/* === PROJECTS === */
.project-list {
    gap: 60px !important;
}

.project-item {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
}

.project-item:nth-child(even) {
    direction: ltr !important;
}

.project-visual {
    height: auto !important;
    min-height: 220px !important;
    aspect-ratio: auto !important;
}

.project-info h3 {
    font-size: 1.5rem !important;
}

.project-info p {
    font-size: 0.88rem !important;
}

/* Show click cue overlay neatly at top right on mobile with high contrast light theme */
.click-cue {
    display: flex !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    bottom: auto !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0d0d0d !important;
    border: 1px solid #ffffff !important;
    padding: 6px 12px !important;
    border-radius: 25px !important;
    font-size: 0.72rem !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    z-index: 10 !important;
}

/* === AWARDS === */
.awards-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}

.award-card {
    height: auto !important;
    min-height: 280px !important;
}

.award-title {
    font-size: 1.2rem !important;
}

.award-sub {
    font-size: 0.8rem !important;
}

/* === CERTIFICATIONS === */
.cert-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.cert-card {
    padding: 14px 16px !important;
}

.cert-thumb {
    width: 50px !important;
    height: 50px !important;
}

.cert-info h4 {
    font-size: 0.85rem !important;
}

/* === REVIEWS === */
#reviews > div {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}

/* === BLOG === */
#blog > div {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}

/* === SOCIAL PROFILES === */
#social_profiles .ventures-grid,
#social_profiles > div > div {
    grid-template-columns: 1fr !important;
}

/* === CONTACT === */
.terminal-container {
    padding: 20px !important;
    margin: 0 !important;
}

.terminal-container::before {
    display: none !important;
}

.cmd-line input {
    width: 100% !important;
    font-size: 1rem !important;
    padding: 10px 0 !important;
    min-height: 44px !important;
}

.cmd-line .btn {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 0.9rem !important;
}


/* =============================================
   COMPONENT 4: SKILLS — STATIC MOBILE GRID
   ============================================= */

/* Override the skills section header spacing */
#skills .section-header {
    margin-bottom: 30px !important;
}

/* Hide the progress bar — no scroll-lock on mobile */
.skills-progress {
    display: none !important;
}

/* Scroll hint — hide */
.skills-scroll-hint {
    display: none !important;
}

/* Convert deck from absolute-positioned chaos to a clean grid */
.skills-deck {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    min-height: auto !important;
    perspective: none !important;
    width: 100% !important;
}

/* Skill cards — static grid items */
.skill-card-pinned {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: auto !important;
    will-change: auto !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    background: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 8px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.skill-card-pinned i {
    font-size: 1.8rem !important;
    margin-bottom: 0 !important;
}

.skill-card-pinned h4 {
    font-size: 0.6rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
}

/* Remove the spotlight class effect */
.skill-card-pinned.spotlight {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}


/* =============================================
   COMPONENT 5: TOUCH INTERACTIONS & PERFORMANCE
   ============================================= */

/* Kill ALL hover transforms */
.award-card:hover,
.project-visual:hover,
.credential-badge:hover,
.skill-card:hover,
.detail-item:hover,
.cert-card:hover,
.venture-card:hover,
.tech-tag:hover,
.btn-fill:hover,
.btn-outline:hover,
.award-btn:hover {
    transform: none !important;
    box-shadow: inherit !important;
}

/* Tap feedback for interactive cards */
.award-card:active,
.project-visual:active,
.venture-card:active,
.cert-card:active,
.award-btn:active,
.btn:active {
    transform: scale(0.97) !important;
    opacity: 0.85 !important;
    transition: transform 0.1s, opacity 0.1s !important;
}

/* Disable Vanilla Tilt data attribute effects */
[data-tilt] {
    transform: none !important;
}

/* Disable the 3D perspective on project visuals */
.project-visual {
    transform-style: flat !important;
    perspective: none !important;
}

/* Disable animated gradient border */
.project-visual::after {
    display: none !important;
}

/* Detail items — no hover lift */
.detail-item {
    padding: 14px !important;
}

.detail-item:hover {
    transform: none !important;
    background: inherit !important;
    box-shadow: none !important;
}

/* Minimum tap targets */
.award-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 16px !important;
    font-size: 0.8rem !important;
}

/* Disable the desktop hover-dependent UI overlay on project visuals */
.project-visual .ui-mock {
    display: none !important;
}

/* Kill backdrop-filter on non-essential elements */
.detail-item,
.status-badge,
.credential-badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Kill will-change on everything except nav */
.skill-card-pinned,
.award-card,
.project-visual,
.venture-card {
    will-change: auto !important;
}

/* Disable borderShimmer animation */
@keyframes borderShimmer {
    0%, 100% { background-position: 0% 0%; }
}

/* Disable floatBadge animation */
@keyframes floatBadge {
    0%, 50%, 100% { transform: none; }
}


/* =============================================
   COMPONENT 6: TYPOGRAPHY & SPACING
   ============================================= */

/* Body font size override */
body {
    font-size: 14px !important;
}

/* Tighten section tag */
.section-tag {
    margin-bottom: 8px !important;
}

/* h2 underline accent — thinner on mobile */
h2::after {
    width: 30px !important;
    height: 1.5px !important;
    bottom: -8px !important;
}

.section-header::after {
    margin-top: 12px !important;
}

/* Footer — safe area aware */
footer {
    padding: 40px 20px calc(100px + env(safe-area-inset-bottom, 20px)) 20px !important;
}

/* Footer social links */
footer a {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}


/* =============================================
   COMPONENT 7: LIGHTBOX — MOBILE OPTIMIZED
   ============================================= */

/* We target the dynamically-created lightbox via its ID */
#lightbox-modal {
    padding: 0 !important;
    align-items: flex-start !important;
}

#lightbox-modal .lb-content {
    max-width: 100vw !important;
    width: 100% !important;
    padding: 15px !important;
    padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 0 !important;
}

/* Lightbox title */
#lightbox-modal h2 {
    font-size: 1.3rem !important;
    margin-bottom: 15px !important;
    padding-right: 50px !important;
    text-align: left !important;
}

/* Gallery images */
#lightbox-modal .lb-slide img,
#lightbox-modal .lb-slide video {
    max-height: 45vh !important;
    border-radius: 10px !important;
}

/* Gallery nav arrows — bottom center on mobile */
#lightbox-modal button[onclick*="scrollBy"] {
    width: 44px !important;
    height: 44px !important;
    font-size: 1rem !important;
}

/* Close button */
#lightbox-modal button[onclick="closeLightbox()"] {
    width: 44px !important;
    height: 44px !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: 10px !important;
    z-index: 30 !important;
}

/* Cert lightbox */
#cert-lightbox img {
    max-width: 95vw !important;
    max-height: 80vh !important;
    border-radius: 8px !important;
}

#cert-lightbox .lb-close {
    top: calc(15px + env(safe-area-inset-top, 0px)) !important;
    right: 15px !important;
    font-size: 2.2rem !important;
}


/* =============================================
   COMPONENT 8: AWARD CARDS — MOBILE
   ============================================= */

/* Click-cue badge clearly visible at top right on mobile award cards */
.award-card .click-cue {
    display: flex !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    bottom: auto !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0d0d0d !important;
    border: 1px solid #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    z-index: 10 !important;
}

/* Awards: make sure the bottom gradient doesn't cover the action bar */
.award-card > div[style*="linear-gradient"] {
    pointer-events: none !important;
}


/* =============================================
   TIMELINE / EXPERIENCE — Mobile
   ============================================= */

.timeline {
    padding-left: 25px !important;
    margin-left: 5px !important;
}

.timeline-dot {
    left: -34px !important;
    width: 12px !important;
    height: 12px !important;
}

.timeline-item {
    margin-bottom: 35px !important;
}

.role {
    font-size: 1.15rem !important;
}

.company {
    font-size: 0.9rem !important;
}


/* =============================================
   SERVICES — Mobile (uses .awards-grid already)
   ============================================= */

#services .awards-grid {
    grid-template-columns: 1fr !important;
}

#services .award-card {
    height: auto !important;
    padding: 25px !important;
}


/* =============================================
   SOCIAL PROFILES — Mobile
   ============================================= */

#social_profiles > div > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

#social_profiles .btn-outline {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    padding: 15px !important;
}

/* =============================================
   PRELOADER — mobile optimized
   ============================================= */

/* Clean mobile-native preloader */
.preloader {
    background: #000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    gap: 6px !important;
}

/* Remove the broken ::before */
.preloader::before {
    content: none !important;
    display: none !important;
}

/* INITIALIZING... text */
.preloader > div:first-of-type,
.preloader-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 6px !important;
    color: #fff !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    font-family: var(--font-code) !important;
    text-align: center !important;
}

/* ALOOF K // PORTFOLIO */
.preloader > div:nth-of-type(2),
.preloader-sub {
    font-size: 0.75rem !important;
    letter-spacing: 4px !important;
    color: var(--accent-red) !important;
    margin-bottom: 30px !important;
    font-family: var(--font-code) !important;
    text-align: center !important;
}

/* Loader bar */
.preloader .loader-bar {
    width: 140px !important;
    height: 2px !important;
    background: #1a1a1a !important;
    border-radius: 2px !important;
}


/* =============================================
   NOTIFICATION BAR — mobile
   ============================================= */

#global-notification {
    font-size: 0.75rem !important;
    padding: 8px 15px !important;
    text-align: center !important;
}


/* =============================================
   MISC — Edge case fixes
   ============================================= */

/* Prevent horizontal overflow from main containers */
section,
.hero-container,
.hero-content,
.project-list,
.awards-grid,
.ventures-grid,
.cert-grid,
footer {
    max-width: 100vw !important;
    overflow: visible !important;
}

/* Hard-disable all scrollbars everywhere except html/body (and lightbox) */
*::-webkit-scrollbar { display: none !important; }
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
#lightbox-modal *::-webkit-scrollbar { display: block !important; }
#lightbox-modal * { scrollbar-width: auto !important; -ms-overflow-style: auto !important; }

/* Force ALL cards to be fully expansive and non-clipping to prevent touch-event trapping */
.award-card, .project-card, .project-visual, .venture-card, .timeline-item, .system-card {
    overflow: visible !important;
}

/* Fix project info direction on even items */
.project-item:nth-child(even) .project-info {
    direction: ltr !important;
}

/* Tech tags — smaller on mobile */
.tech-tag {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
}

/* Award card content overlay — ensure text is readable */
.award-content {
    padding: 20px !important;
}

.award-content h3,
.award-title {
    font-size: 1.1rem !important;
}

/* Section divider — thinner */
.section-divider {
    margin: 0 20px !important;
}

/* Print — hide dock */
@media print {
    .mobile-nav {
        display: none !important;
    }
}