/* ============================================================================
   MOBILE UX OVERRIDES — bhaveshsukam.com
   ============================================================================
   This file loads LAST in the cascade to naturally override existing styles
   without excessive !important usage. It implements:
   
   1. CSS Custom Properties (design tokens)
   2. Responsive typography system (clamp)
   3. 8-point spacing grid
   4. Safe area support (iPhone notch/Dynamic Island)
   5. Sticky header with hide/reveal
   6. Touch-friendly targets (48px minimum)
   7. All mobile layout fixes (320px–768px)
   8. Landscape orientation support
   9. Accessibility improvements
   10. Performance optimizations (reduced motion, GPU hints)
   
   DOES NOT TOUCH desktop layout (≥992px) — all fixes scoped to mobile.
   ============================================================================ */

/* ============================================================================
   0. DESIGN TOKENS
   ============================================================================ */
:root {
  /* ── 8-Point Spacing Scale ── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Responsive Typography Scale ── */
  --text-xs: clamp(0.6875rem, 0.625rem + 0.25vw, 0.75rem);
  --text-sm: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.875rem + 0.25vw, 1rem);
  --text-lg: clamp(1rem, 0.925rem + 0.3vw, 1.125rem);
  --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-2xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-3xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-4xl: clamp(2rem, 1.5rem + 2vw, 2.5rem);
  --text-5xl: clamp(2.25rem, 1.8rem + 2.5vw, 4rem);
  --text-hero: clamp(2.75rem, 2rem + 4vw, 8.75rem);

  /* ── Brand Colors (preserved from existing) ── */
  --color-primary: #FFB646;
  --color-primary-hover: #FF9330;
  --color-dark: #080808;
  --color-text: #696969;
  --color-text-dark: rgba(8, 8, 8, 0.8);
  --color-bg: #FFFFFF;
  --color-bg-subtle: rgba(8, 8, 8, 0.04);

  /* ── Touch Target Minimum ── */
  --touch-min: 48px;

  /* ── Safe Area Insets ── */
  --sai-top: env(safe-area-inset-top, 0px);
  --sai-right: env(safe-area-inset-right, 0px);
  --sai-bottom: env(safe-area-inset-bottom, 0px);
  --sai-left: env(safe-area-inset-left, 0px);

  /* ── Header Height ── */
  --header-height: 64px;

  /* ── Transition ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Focus Ring ── */
  --focus-ring: 0 0 0 3px rgba(255, 182, 70, 0.4);

  /* ── Border Radius Scale ── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
}

/* ============================================================================
   1. GLOBAL RESETS & SAFE AREA
   ============================================================================ */

/* Safe area padding for notched devices */
html {
  padding: var(--sai-top) var(--sai-right) var(--sai-bottom) var(--sai-left);
}

/* Skip navigation link */
.skip-nav {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100001;
  padding: var(--space-3) var(--space-6);
  background: var(--color-dark);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: top var(--duration-fast) ease;
}
.skip-nav:focus {
  top: var(--space-4);
  color: #fff;
}

/* ── Accessibility: Focus Indicators ── */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* Override the global outline:none — preserve it for mouse but show for keyboard */
*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ── Smooth scrolling (respects reduced motion) ── */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================================================
   2. STICKY HEADER — Hide on scroll down, reveal on scroll up
   ============================================================================ */

#sticky-header {
  transition: transform var(--duration-normal) var(--ease-out),
              background-color var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease;
  will-change: transform;
}

#sticky-header.is-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding-top: var(--sai-top);
}

#sticky-header.header-hidden {
  transform: translateY(-100%);
}

/* ============================================================================
   3. MOBILE BREAKPOINTS (≤767px)
   ============================================================================ */
@media only screen and (max-width: 767.98px) {

  /* ── 3.1 Global ── */
  html,
  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Safe area on body */
  body {
    padding-bottom: var(--sai-bottom);
  }

  /* All containers get consistent mobile padding */
  .container,
  .container-fluid {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Prevent ALL content from causing horizontal scroll */
  section,
  .overflow-x-hidden {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Media elements must fit viewport */
  img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
  }

  /* Long text wrapping */
  .paragraph,
  .text-lg,
  .text-xl,
  .text-2xl,
  .text-32,
  h1, h2, h3, h4, h5, h6,
  p, li, a, span {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ── 3.2 Section Spacing ── */
  .pt-140 {
    padding-top: var(--space-20) !important;
  }
  .pb-90 {
    padding-bottom: var(--space-12) !important;
  }
  .py-120 {
    padding-top: var(--space-16) !important;
    padding-bottom: var(--space-16) !important;
  }
  .pb-120 {
    padding-bottom: var(--space-16) !important;
  }
  .mb-120 {
    margin-bottom: var(--space-16) !important;
  }
  .py-72 {
    padding-top: var(--space-12) !important;
    padding-bottom: var(--space-12) !important;
  }

  /* ── 3.3 Responsive Typography ── */
  .hero-title {
    font-size: var(--text-hero) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px;
  }
  .section-title {
    font-size: var(--text-4xl);
    line-height: 1.15;
  }
  .strock-text {
    font-size: var(--text-3xl);
    line-height: 1.2;
  }
  .text-counter {
    font-size: var(--text-3xl) !important;
  }
  .years-experience-of-number {
    font-size: var(--text-4xl);
  }
  .years-experience-of-number::before {
    width: 70px;
    height: 70px;
  }
  .banner-title {
    font-size: var(--text-3xl) !important;
    line-height: 1.2 !important;
  }
  .paragraph {
    font-size: var(--text-base);
    line-height: 1.7;
  }
  .based-in-german-title,
  .based-in-german-title-tab,
  .based-in-Pune-title-tab {
    font-size: var(--text-xl) !important;
    line-height: 1.3 !important;
  }
  .hello-iam {
    font-size: var(--text-lg) !important;
  }
  .iam-designer {
    font-size: var(--text-base) !important;
  }
  .say-hello-email {
    font-size: var(--text-xl) !important;
    word-break: break-all;
  }
  .portfolio-link {
    font-size: var(--text-lg);
  }

  /* ── 3.4 Hero Section ── */
  .hero-row {
    row-gap: 0;
  }
  .hero-btn-wraper {
    margin-bottom: var(--space-8) !important;
  }
  .hero-content-wrapper {
    text-align: left;
  }
  .contact-spin {
    display: none !important;
  }
  .circle-shape::before,
  .section-title.circle-shape::before {
    width: 40px !important;
    height: 40px !important;
  }
  .hello-iam span {
    margin-right: var(--space-3);
  }
  .mx-8 {
    margin-left: var(--space-3) !important;
    margin-right: var(--space-3) !important;
  }

  /* Social links in hero */
  .social-links {
    margin-top: var(--space-5);
  }
  .social-links ul {
    column-gap: var(--space-4);
  }

  /* ── 3.5 Header & Navigation ── */
  .header {
    padding-top: var(--sai-top);
  }
  .header-inner {
    padding-left: var(--space-4);
  }

  /* Offcanvas — fit all screens including 320px */
  .offcanvas {
    width: min(350px, 85vw) !important;
    min-height: auto;
    padding-left: var(--space-6);
    padding-bottom: var(--sai-bottom);
  }
  .offcanvas-header {
    margin-bottom: var(--space-10);
  }
  .offcanvas-close {
    padding: var(--space-5) var(--space-6);
    min-height: var(--touch-min);
  }
  .offcanvas-toggle {
    padding: var(--space-4) var(--space-5);
    min-height: var(--touch-min);
    min-width: var(--touch-min);
  }
  .offcanvas-nav {
    margin-right: var(--space-6);
  }
  .offcanvas-menu-item {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .offcanvas-menu-link {
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    font-size: var(--text-lg);
  }

  /* Offcanvas blur backdrop */
  .offcanvas-backdrop.show {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* ── 3.6 About Section ── */
  .about-section {
    padding-bottom: var(--space-16);
  }
  .about-grid {
    gap: var(--space-10);
  }
  .about-grid-space-right {
    padding-left: 0;
  }
  .about-grid-section-two {
    gap: var(--space-6);
  }
  .about-me-grid {
    gap: var(--space-6);
  }

  /* About me tab — stack label + value vertically */
  #about_me_tab .tab-contents ul > li {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-1) !important;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  #about_me_tab .tab-contents .w-110px {
    width: auto !important;
    font-size: var(--text-sm) !important;
    color: rgba(8, 8, 8, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  #about_me_tab .tab-contents .text-2xl {
    font-size: var(--text-lg) !important;
    max-width: 100%;
  }

  /* Tab content containers */
  .tab-content,
  .tab-contents {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Years of experience badge */
  .years-of-experience {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: var(--space-6);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }

  /* Tab navigation pills */
  .tabs.nav {
    gap: var(--space-2);
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
  }

  /* Featured properties (about tabs area) */
  .featured-properties {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
  .featured-properties-space-left {
    padding-left: 0;
  }

  /* ── 3.7 Services Section ── */
  .service-card {
    padding: var(--space-5) var(--space-4);
  }
  .service-icon {
    margin-bottom: var(--space-5);
  }
  .service-contact-card {
    max-width: 100%;
    padding: var(--space-6) var(--space-4);
    margin-top: var(--space-6);
  }

  /* ── 3.8 Skills & Experience Tabs ── */
  .skills-tab-contents {
    gap: var(--space-3);
  }
  .skills-tab-item {
    padding: var(--space-5) var(--space-4);
  }
  .experience-tab-item {
    padding: var(--space-5) var(--space-4);
  }
  .education-tab-item {
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
  }
  .awards-tab-item {
    gap: var(--space-5);
    padding: var(--space-5);
  }
  .tab-contents-experience {
    gap: var(--space-4);
  }
  .education-tab-contents {
    gap: var(--space-4);
  }

  /* ── 3.9 Portfolio/Projects Section ── */
  .project-item {
    border-radius: var(--radius-xl);
  }
  /* Make project content visible by default on mobile (not hover-dependent) */
  .project-item-content {
    bottom: var(--space-4) !important;
    opacity: 1;
  }
  .project-item::before {
    opacity: 0.55;
    border-radius: var(--radius-xl);
  }
  .project-title {
    font-size: var(--text-lg);
  }
  .portfolio-tag-link {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }

  /* ── 3.10 Testimonials Section ── */
  .testimonial {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }
  .testimonial-title-section {
    text-align: left;
    margin-bottom: var(--space-8);
  }
  .testimonial-space-left {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .testimonial-gap {
    column-gap: var(--space-6);
    flex-direction: column;
    row-gap: var(--space-8);
  }
  .qotation-icon {
    margin-bottom: var(--space-4);
  }
  .testimonial-texts {
    font-size: var(--text-base);
    line-height: 1.7;
  }

  /* ── 3.11 Blog Section ── */
  .blog-grid {
    gap: var(--space-5) !important;
  }
  .blog-title {
    font-size: var(--text-base);
  }
  .blog-clients-info {
    column-gap: var(--space-6);
    row-gap: var(--space-4);
  }

  /* ── 3.12 Footer ── */
  .footer {
    padding-top: var(--space-16);
    padding-bottom: var(--space-12);
  }
  .footer-grid {
    gap: var(--space-4);
  }
  .service-contact-card-footer {
    padding: var(--space-5) var(--space-4);
  }
  .copyright {
    padding-top: var(--space-6);
    margin-top: var(--space-6);
  }
  .footer-social {
    margin-left: 0;
    margin-top: var(--space-4);
  }

  /* ── 3.13 Contact Form ── */
  .contact-form-control {
    padding: var(--space-4);
    font-size: var(--text-base);
    min-height: var(--touch-min);
    border-radius: var(--radius-md);
  }
  textarea.contact-form-control {
    height: 120px;
  }
  .address-item {
    gap: var(--space-3);
    max-width: 100%;
  }
  #contact-form {
    row-gap: var(--space-4);
  }

  /* ── 3.14 Cards (Global) ── */
  /* Equal-height, consistent styling */
  .service-card,
  .pricing-item,
  .skills-tab-item,
  .experience-tab-item,
  .education-tab-item,
  .awards-tab-item {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    /* Touch feedback */
    -webkit-tap-highlight-color: rgba(255, 182, 70, 0.1);
  }

  /* Touch active state for all cards */
  .service-card:active,
  .pricing-item:active,
  .skills-tab-item:active,
  .education-tab-item:active {
    transform: scale(0.98);
    transition: transform var(--duration-fast) ease;
  }

  /* ── 3.15 Buttons — 48px Minimum Touch Targets ── */
  .btn-primary,
  .btn-primary-outline {
    padding: 14px var(--space-6);
    font-size: var(--text-sm);
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    -webkit-tap-highlight-color: transparent;
  }
  .btn-primary:active,
  .btn-primary-outline:active {
    transform: scale(0.97);
    transition: transform var(--duration-fast) ease;
  }

  .tab-btn {
    padding: 14px var(--space-5);
    min-height: 44px;
    font-size: var(--text-sm);
  }

  .contact-link {
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Project tab buttons — enlarged for touch */
  .project-tab-btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .figma-cta {
    padding: var(--space-3) var(--space-5);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .lock-gate-btn {
    padding: var(--space-4) var(--space-6);
    min-height: var(--touch-min);
  }

  /* ── 3.16 Chatbot Fixes ── */
  .chatbot-close {
    width: 44px;
    height: 44px;
  }
  .chatbot-send {
    width: 44px;
    height: 44px;
  }
  .chatbot-chip {
    padding: var(--space-3) var(--space-4);
    min-height: 40px;
    font-size: var(--text-sm);
  }
  .chatbot-input {
    min-height: var(--touch-min);
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* ── 3.17 WhatsApp Button ── */
  .whatsapp-float {
    bottom: calc(20px + var(--sai-bottom));
    right: var(--space-4);
    width: 50px;
    height: 50px;
  }
  /* Stop pulse animation on mobile — saves GPU */
  .whatsapp-float::before {
    animation: none;
  }

  /* ── 3.18 Games Promo ── */
  .games-home-promo {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-xl);
  }
  .games-home-promo-inner {
    gap: var(--space-5);
  }
  .games-home-promo-icon {
    font-size: 2.5rem;
  }

  /* ── 3.19 Pricing ── */
  .pricing-item {
    padding: var(--space-5);
    gap: var(--space-6);
  }
  .pricing-title-section {
    max-width: 100%;
  }

  /* ── 3.20 Brand Carousel ── */
  .brand-carousel {
    padding: var(--space-4) 0;
  }

  /* ── 3.21 Case Study Components ── */
  .cs-callout {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-8);
  }
  .cs-metrics {
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }
  .cs-metric-card {
    padding: var(--space-5) var(--space-4);
  }
  .cs-metric-value {
    font-size: var(--text-3xl);
  }
  .cs-divider {
    margin: var(--space-8) 0;
  }

  /* ── 3.22 Lock Popup ── */
  .lock-popup-box {
    padding: var(--space-8) var(--space-5) var(--space-6);
    width: calc(100% - var(--space-8));
    max-width: 420px;
  }
  .lock-popup-input {
    min-height: var(--touch-min);
    font-size: 16px; /* Prevents iOS zoom */
  }
  .lock-popup-submit {
    min-height: var(--touch-min);
  }

  /* ── 3.23 Premium Gate ── */
  .premium-gate {
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--sai-top));
    padding-bottom: calc(var(--space-4) + var(--sai-bottom));
  }
  .premium-gate__panel {
    padding: var(--space-5) var(--space-4);
  }
  .premium-input {
    min-height: var(--touch-min);
    font-size: 16px; /* Prevents iOS zoom */
  }
  .premium-btn {
    min-height: var(--touch-min);
  }

  /* ── 3.24 Career Selection Modal ── */
  .career-card__cta {
    padding: var(--space-3) var(--space-5);
    min-height: 44px;
  }

  /* ── 3.25 Role Switcher ── */
  .role-card__illustration {
    width: 120px;
    height: 120px;
  }
  .devops-locked-overlay__content {
    padding: var(--space-8) var(--space-5);
    max-width: calc(100% - var(--space-8));
  }
  .devops-locked-overlay__title {
    font-size: var(--text-2xl);
  }
  .devops-locked-overlay__btn {
    min-height: var(--touch-min);
    padding: 14px var(--space-6);
  }

  /* ── 3.26 Project Detail Pages ── */
  .project-tab-nav {
    top: 0;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .project-tab-nav::-webkit-scrollbar {
    display: none;
  }
  .project-details-section {
    margin-top: -100px;
    padding-top: 100px;
  }
  .blog-details-section {
    margin-top: -180px;
    padding-top: 180px;
  }
  .clients-info-item {
    width: 50%;
    flex: 0 0 calc(50% - var(--space-2));
  }

  /* ── 3.27 Explore Circle Fix ── */
  .explore-circle::before {
    display: none;
  }

  /* ── 3.28 Banner ── */
  .banner-contents {
    padding: 0 var(--space-4);
  }
  .max-w-1075 {
    padding: 0 var(--space-4);
  }

  /* ── 3.29 Award Lists ── */
  .award-lists {
    gap: var(--space-6);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
  }

  /* ── 3.30 Video Popup ── */
  .video-popup svg {
    width: 60px;
    height: 60px;
  }

  /* ── 3.31 Social Link Touch Targets (WCAG 2.5.8) ── */
  .social-links a,
  .footer-social-links a,
  .offcanvas-social-links a,
  .footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  /* ── 3.32 Persistent Mobile CTA Bar ── */
  .mobile-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--sai-bottom));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(8, 8, 8, 0.06);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
  }
  .mobile-cta-bar a {
    flex: 1;
    text-align: center;
    padding: 14px var(--space-4);
    min-height: var(--touch-min);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: var(--text-sm);
    font-family: "Syne", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: background-color var(--duration-fast) ease,
                color var(--duration-fast) ease;
  }
  .mobile-cta-bar .cta-primary {
    background: #080808;
    color: #FFFFFF;
    border: 1px solid #080808;
  }
  .mobile-cta-bar .cta-primary:active {
    background: #333;
  }
  .mobile-cta-bar .cta-secondary {
    background: transparent;
    color: #080808;
    border: 1px solid rgba(8, 8, 8, 0.25);
  }
  .mobile-cta-bar .cta-secondary:active {
    background: rgba(8, 8, 8, 0.04);
  }

  /* Add bottom padding to body to prevent CTA bar from covering footer */
  body {
    padding-bottom: calc(72px + var(--sai-bottom));
  }
}

/* ── Hover Flash Fix for Touch Devices ── */
@media (hover: none) {
  .btn-primary:hover {
    background-color: #080808;
    color: #FFFFFF;
    border-color: rgba(8, 8, 8, 0.4);
  }
  .btn-primary-outline:hover {
    background-color: transparent;
    color: #080808;
  }
  .service-card-link:hover {
    color: inherit;
  }
}

/* ── CSS-Only Hero Entrance Animation (mobile) ── */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media only screen and (max-width: 767.98px) {
  .hero-title,
  .iam-designer,
  .hero-area .paragraph,
  .social-links {
    animation: heroFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero-title { animation-delay: 0.1s; }
  .iam-designer { animation-delay: 0.2s; }
  .hero-area .paragraph { animation-delay: 0.3s; }
  .social-links { animation-delay: 0.4s; }
}

/* ── Focus Visible Ring (WCAG 2.4.7) ── */
*:focus-visible {
  outline: 2px solid #FFB646;
  outline-offset: 3px;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(255, 182, 70, 0.4));
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ============================================================================
   4. EXTRA-SMALL DEVICES (≤375px) — iPhone SE, Galaxy S8
   ============================================================================ */
@media only screen and (max-width: 375px) {
  :root {
    --text-hero: clamp(2.25rem, 1.8rem + 3.5vw, 3.5rem);
  }

  .container,
  .container-fluid {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .hero-title {
    letter-spacing: -0.5px;
  }

  .section-title {
    font-size: var(--text-3xl);
  }

  /* Tighter card padding */
  .service-card,
  .skills-tab-item,
  .experience-tab-item,
  .education-tab-item,
  .pricing-item {
    padding: var(--space-4) var(--space-3);
  }

  /* Stack hero buttons on very small screens */
  .hero-btn-wraper {
    flex-direction: column;
    gap: var(--space-3);
  }
  .hero-btn-wraper .btn-primary,
  .hero-btn-wraper .btn-primary-outline {
    width: 100%;
    margin-right: 0;
    text-align: center;
  }

  /* Footer cards */
  .service-contact-card-footer {
    padding: var(--space-4) var(--space-3);
  }

  .offcanvas {
    padding-left: var(--space-4);
  }
}

/* ============================================================================
   5. NARROW DEVICES (≤320px) — Galaxy Fold, old devices
   ============================================================================ */
@media only screen and (max-width: 320px) {
  :root {
    --text-hero: clamp(2rem, 1.5rem + 3vw, 2.75rem);
  }

  .hero-title {
    line-height: 1.1 !important;
  }

  .text-counter {
    font-size: var(--text-2xl) !important;
  }

  .offcanvas {
    width: 100vw !important;
  }

  .tab-btn {
    padding: var(--space-3) var(--space-4);
    font-size: 13px;
  }

  .project-tab-btn {
    padding: var(--space-2) var(--space-3);
    font-size: 11px;
  }
}

/* ============================================================================
   6. TABLET (768px–991px)
   ============================================================================ */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .about-grid-space-right {
    padding-left: 0;
  }

  .testimonial-gap {
    column-gap: var(--space-8);
  }

  .offcanvas {
    width: min(460px, 85vw) !important;
  }

  /* Tab nav scrollable on tablet too */
  .project-tab-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .project-tab-nav::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================================================
   7. LANDSCAPE MODE
   ============================================================================ */
@media only screen and (orientation: landscape) and (max-height: 500px) {
  /* Reduce hero vertical space drastically in landscape */
  .pt-140 {
    padding-top: var(--space-12) !important;
  }
  .pb-90 {
    padding-bottom: var(--space-8) !important;
  }

  /* Prevent hero from consuming entire landscape viewport */
  .hero-title {
    font-size: clamp(2rem, 1.5rem + 3vw, 3rem) !important;
  }

  /* Tighter section spacing in landscape */
  .py-120 {
    padding-top: var(--space-10) !important;
    padding-bottom: var(--space-10) !important;
  }

  .featured-properties {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .footer {
    padding-top: var(--space-12);
  }

  /* Career selection modal scrollable */
  .career-selection__modal {
    max-height: calc(100svh - var(--space-4));
    overflow-y: auto;
  }
}

/* ============================================================================
   8. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Ensure AOS elements are visible */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Stop all spinning/pulsing */
  .animate-spin,
  .whatsapp-float::before,
  .chatbot-trigger::before {
    animation: none !important;
  }

  /* Skip hero video animation */
  .hero-video {
    animation: none !important;
  }

  /* Sticky header — instant transition */
  #sticky-header {
    transition: none !important;
  }
}

/* ============================================================================
   9. MOBILE SCROLL PERFORMANCE — Content Visibility First
   ============================================================================
   CRITICAL: AOS (Animate On Scroll) sets opacity:0 on elements BEFORE they
   enter viewport. On mobile, fast scrolling = blank white sections.
   
   Solution: On mobile (≤767px), ALL content is immediately visible.
   AOS is completely neutralized via CSS — no opacity:0, no transforms,
   no transition delays. Content is NEVER hidden while scrolling.
   Desktop animations are preserved (≥768px).
   ============================================================================ */
@media only screen and (max-width: 767.98px) {

  /* ── NUCLEAR OPTION: Make ALL AOS elements immediately visible ── */
  /* This overrides the AOS library's default opacity:0 and transforms */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    pointer-events: auto !important;
    /* Content is always visible, never hidden by animation state */
  }

  /* Also catch the base AOS selectors that set opacity:0 */
  [data-aos^="fade"][data-aos^="fade"],
  [data-aos^="zoom"][data-aos^="zoom"],
  [data-aos^="slide"][data-aos^="slide"],
  [data-aos^="flip"][data-aos^="flip"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Override AOS .aos-init and .aos-animate states */
  [data-aos].aos-init,
  [data-aos]:not(.aos-animate) {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable blanket transition on all elements — only apply where needed */
  a, button, img, input {
    transition: color var(--duration-fast) ease,
                background-color var(--duration-fast) ease,
                border-color var(--duration-fast) ease,
                opacity var(--duration-fast) ease;
  }

  /* Disable continuous/infinite animations on mobile to save GPU */
  .animate-spin {
    animation: none !important;
  }

  /* ── Life Outside Pixels: custom reveal system overrides ── */
  /* These classes use opacity:0 + translateY/X(60-80px) to hide content */
  .rv,
  .rv-l,
  .rv-r,
  .rv.active,
  .rv-l.active,
  .rv-r.active {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* LOP hero entrance — skip 2.5-3.4s animation delay, show instantly */
  .lop-hero h1,
  .lop-hero p,
  .lop-scroll-cta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* LOP loader — speed up to 0.5s instead of 2s+ */
  .lop-loader h2 {
    animation-duration: 0.3s !important;
    animation-delay: 0s !important;
  }

  /* LOP glow effect — unnecessary on touch devices */
  .lop-glow {
    display: none !important;
  }

  /* LOP film grain overlay — heavy GPU compositing, hide on mobile */
  .lop-grain {
    display: none !important;
  }
}

/* ============================================================================
   10. PRINT STYLES (basic)
   ============================================================================ */
@media print {
  .header,
  .offcanvas,
  .whatsapp-float,
  .chatbot-trigger,
  .chatbot-window,
  #scrollUp,
  .career-selection,
  .premium-gate,
  .contact-spin {
    display: none !important;
  }
  
  body {
    color: #000 !important;
    background: #fff !important;
  }
}