/* ============================================
   DEZIGNITE — Mobile Fixes
   css/mobile-fixes.css
   Load LAST in every HTML file (after all other CSS)
   ============================================ */

@media (max-width: 768px) {

  /* ══════════════════════════════════════════
     1. SERVICE CARDS — always visible on touch
     (no hover state needed — show everything)
  ══════════════════════════════════════════ */

  /* Full opacity — no hover dimming */
  .srv-row {
    opacity: 1 !important;
  }

  /* Show the bg image at full brightness immediately */
  .srv-bg-img {
    opacity: 0.55 !important;
    filter: grayscale(5%) brightness(0.85) !important;
  }

  /* Always show blobs */
  .srv-blob {
    opacity: 0.8 !important;
  }

  /* Always show grid lines */
  .srv-grid-lines {
    opacity: 0.7 !important;
  }

  /* Show explore hint without hover */
  .srv-explore-hint {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Icon ring always glowing */
  .srv-icon-ring {
    border-color: rgba(176, 152, 120, 0.4) !important;
    box-shadow: 0 0 40px rgba(176, 152, 120, 0.15) !important;
  }

  .srv-icon-ring svg {
    opacity: 1 !important;
  }

  /* Pills always lit */
  .srv-pill {
    background: rgba(176, 152, 120, 0.07) !important;
    border-color: rgba(176, 152, 120, 0.18) !important;
    color: rgba(176, 152, 120, 0.8) !important;
  }

  /* Link button always visible */
  .srv-link-btn {
    color: rgba(176, 152, 120, 0.9) !important;
  }

  /* Ghost number always slightly visible */
  .srv-index {
    -webkit-text-stroke-color: rgba(176, 152, 120, 0.18) !important;
  }

  /* Bottom glow line always shown */
  .srv-visual::before {
    transform: scaleX(1) !important;
  }

  /* ── Layout fixes for service rows ── */
  .srv-row,
  .srv-row.flip {
    grid-template-columns: 1fr;
    direction: ltr;
    border-radius: 20px;
    margin: 0 1rem 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(176, 152, 120, 0.18);
  }

  .srv-visual {
    min-height: 200px;
    order: -1;
  }

  /* Fade bottom, not side */
  .srv-visual::after,
  .srv-row.flip .srv-visual::after {
    background: linear-gradient(to top, #0a0a0a 0%, transparent 50%) !important;
  }

  .srv-text {
    padding: 1.75rem 1.5rem 2rem;
  }

  .srv-title-big {
    font-size: 1.7rem;
    letter-spacing: -0.5px;
  }

  .srv-desc-text {
    font-size: 0.9rem;
  }

  .srv-index {
    font-size: 4rem;
    right: 1rem;
    top: 0.5rem;
  }

  .srv-row.flip .srv-index {
    left: auto;
    right: 1rem;
  }

  /* Hover/touch active state */
  .srv-row:active .srv-bg-img {
    opacity: 0.7 !important;
    filter: grayscale(5%) brightness(1) !important;
  }

  /* ══════════════════════════════════════════
     2. HERO — disable heavy scroll animation
     Show content directly, no scroll-triggered
     fade dance on small screens
  ══════════════════════════════════════════ */

  .hero-scroll-wrapper {
    height: auto !important;
    min-height: 100svh;
  }

  .hero-sticky-inner {
    position: relative !important;
    height: 100svh;
    min-height: 600px;
  }

  /* Logo always visible, no disappearing */
  #spotlight-logo-container {
    opacity: 1 !important;
    transform: none !important;
  }

  #base-logo {
    opacity: 1 !important;
    width: clamp(280px, 80vw, 480px) !important;
  }

  #trail-canvas {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  /* New content strip — always visible on mobile */
  #hero-new-content {
    position: absolute !important;
    bottom: 2rem !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    width: 90% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  #hero-new-content .hero-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    margin-bottom: 1rem !important;
  }

  #hero-new-content .hero-buttons {
    flex-direction: row !important;
    gap: 0.75rem !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  #hero-new-content .hero-buttons .btn {
    font-size: 0.85rem !important;
    padding: 0.75rem 1.25rem !important;
  }

  /* Hide stats on mobile hero — saves space */
  #hero-new-content .hero-stats {
    display: none !important;
  }

  /* Hero scroll arrow always shown */
  #hero-original-arrow {
    opacity: 1 !important;
  }

  /* Hero arch — keep */
  .hero-arch {
    display: block;
  }

  /* ══════════════════════════════════════════
     3. SECTIONS — breathing room + typography
  ══════════════════════════════════════════ */

  :root {
    --section-padding: 4rem 0;
    --container-padding: 1.25rem;
  }

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

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

  .section-header {
    margin-bottom: 2.5rem;
  }

  /* ══════════════════════════════════════════
     4. CTA SECTION
  ══════════════════════════════════════════ */

  .cta-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1.25;
  }

  .cta-subtitle {
    font-size: 1rem;
  }

  .cta-section {
    padding: 4rem 0;
  }

  /* ══════════════════════════════════════════
     5. CONTACT SECTION
  ══════════════════════════════════════════ */

  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-form-container {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .contact-info {
    gap: 1rem;
  }

  .contact-info-card {
    padding: 1.25rem;
    border-radius: 14px;
  }

  /* Disable translateX animation — too jarring on mobile */
  .contact-info-card {
    transform: none !important;
  }

  /* ══════════════════════════════════════════
     6. FOOTER
  ══════════════════════════════════════════ */

  .footer {
    padding: 3rem 0 1.5rem;
  }

  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-content > .footer-section:first-child {
    grid-column: 1 / -1;
  }

  .footer-logo {
    font-size: 1.4rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    padding-top: 1.5rem;
  }

  .footer-bottom-links {
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ══════════════════════════════════════════
     7. NAVBAR
  ══════════════════════════════════════════ */

  .logo-img {
    height: 36px !important;
  }

  .navbar {
    padding: 0.9rem 0 !important;
  }

  /* ══════════════════════════════════════════
     8. ABOUT PAGE
  ══════════════════════════════════════════ */

  .about-hero {
    grid-template-columns: 1fr !important;
    min-height: 100svh;
  }

  .about-hero-text {
    padding: 7rem 1.5rem 4rem !important;
  }

  .about-hero-title {
    font-size: clamp(2.8rem, 10vw, 4rem) !important;
    letter-spacing: -1.5px !important;
  }

  .about-hero-lead {
    font-size: 0.95rem !important;
  }

  .about-story-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .about-story-title {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }

  .values-grid {
    grid-template-columns: 1fr !important;
  }

  .value-card {
    padding: 1.75rem !important;
  }

  .team-grid {
    grid-template-columns: 1fr !important;
  }

  .about-story,
  .about-values,
  .about-team,
  .about-cta {
    padding: 4rem 0 !important;
  }

  .about-cta-title {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    letter-spacing: -1px !important;
  }

  /* ══════════════════════════════════════════
     9. VIDEO PAGE
  ══════════════════════════════════════════ */

  .video-hero-content {
    padding: 6rem 1.25rem 2rem !important;
  }

  .video-hero-title {
    font-size: clamp(2.2rem, 9vw, 3.5rem) !important;
    letter-spacing: -1.5px !important;
  }

  .video-hero-subtitle {
    font-size: 0.95rem !important;
  }

  .play-icon-large svg {
    width: 56px !important;
    height: 56px !important;
  }

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

  .video-service-card {
    padding: 1.75rem !important;
  }

  .btn-video {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.5rem !important;
  }

  .video-stats-inline {
    gap: 0.75rem !important;
  }

  .stat-badge {
    font-size: 0.8rem !important;
    padding: 0.6rem 1rem !important;
  }

  .timeline-item {
    padding-left: 70px !important;
  }

  .timeline-marker {
    width: 50px !important;
    height: 50px !important;
  }

  .timeline-content h3 {
    font-size: 1.3rem !important;
  }

  /* ══════════════════════════════════════════
     10. YOUTUBE PAGE
  ══════════════════════════════════════════ */

  .yt-hero-inner {
    padding: 7rem 0 3rem !important;
    grid-template-columns: 1fr !important;
  }

  .yt-hero-title {
    font-size: clamp(2.2rem, 8vw, 3rem) !important;
    letter-spacing: -1px !important;
  }

  .yt-hero-desc {
    font-size: 0.95rem !important;
  }

  .yt-hero-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

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

  .yt-metrics {
    gap: 1.5rem !important;
    flex-wrap: wrap;
  }

  .yt-service-row {
    grid-template-columns: 32px 1fr !important;
    gap: 1rem !important;
    padding: 1.5rem 0.75rem !important;
  }

  .yt-srv-arrow { display: none; }

  .yt-section-title {
    font-size: clamp(1.6rem, 6vw, 2rem) !important;
  }

  .yt-process-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .yt-cta-content h2 {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }

  /* ══════════════════════════════════════════
     11. CUSTOM GRAPHICS PAGE
  ══════════════════════════════════════════ */

  .graphics-title {
    font-size: clamp(2.8rem, 11vw, 4.5rem) !important;
    letter-spacing: -2px !important;
  }

  .graphics-subtitle {
    font-size: 0.95rem !important;
  }

  .graphics-hero-content {
    padding: 7rem 1.25rem 5rem !important;
  }

  .hero-cta-group {
    flex-direction: column !important;
    align-items: stretch;
    gap: 0.75rem !important;
  }

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

  /* ══════════════════════════════════════════
     12. WEB DEVELOPMENT PAGE
  ══════════════════════════════════════════ */

  .web-hero-inner {
    padding: 7rem 0 3rem !important;
    grid-template-columns: 1fr !important;
  }

  .web-hero-title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    letter-spacing: -1px !important;
  }

  .web-hero-desc {
    font-size: 0.95rem !important;
  }

  .web-hero-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

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

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

  .web-section-title {
    font-size: clamp(1.6rem, 6vw, 2rem) !important;
  }

  .web-process-steps {
    grid-template-columns: 1fr 1fr !important;
  }

  .web-cta-title {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }

  .terminal-block {
    margin-top: 2.5rem !important;
  }

  .terminal-body {
    padding: 1.25rem 1rem !important;
    font-size: 0.72rem !important;
  }

  /* ══════════════════════════════════════════
     13. GENERAL — touch-friendly targets
  ══════════════════════════════════════════ */

  .btn {
    min-height: 48px;
  }

  .nav-links a {
    min-height: 52px;
    display: flex;
    align-items: center;
  }

  /* Remove translateY on contact cards (causes layout jumps) */
  .contact-info-card:hover {
    transform: none !important;
  }

  /* Reduce particle canvas opacity on mobile for perf */
  #dz-parallax-canvas {
    opacity: 0.5 !important;
  }

  /* Custom cursor — hide on touch devices */
  #dz-cursor-dot,
  #dz-cursor-ring {
    display: none !important;
  }

  /* Scroll-to-top button */
  .scroll-to-top {
    bottom: 1.25rem !important;
    right: 1.25rem !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* ══════════════════════════════════════════
   Extra small — 380px (iPhone SE etc.)
══════════════════════════════════════════ */
@media (max-width: 400px) {

  .srv-row,
  .srv-row.flip {
    margin: 0 0.75rem 1.25rem;
  }

  .srv-title-big {
    font-size: 1.45rem !important;
  }

  .about-hero-title {
    font-size: clamp(2.4rem, 11vw, 3rem) !important;
  }

  .footer-content {
    grid-template-columns: 1fr !important;
  }

  .footer-bottom-links {
    flex-direction: column !important;
    gap: 0.4rem !important;
  }
}

/* ══════════════════════════════════════════
   HERO — MOBILE FIX (FINAL)
   Replace everything you previously appended
   to mobile-fixes.css with just this block.
══════════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1. Collapse scroll-track wrapper */
  .hero-scroll-wrapper {
    height: auto !important;
    min-height: 100svh !important;
  }

  .hero-sticky-inner {
    position: relative !important;
    height: 100svh !important;
    min-height: 580px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* 2. Logo — full width × 1.3 zoom via scale */
  #spotlight-logo-container {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: scale(1.3) !important;
    transform-origin: center center !important;
    margin-bottom: 3.5rem !important;  /* extra gap to compensate for scale overhang */
    opacity: 1 !important;
    z-index: 3 !important;
    flex-shrink: 0 !important;
  }

  #base-logo {
    width: 100% !important;
    height: auto !important;
    opacity: 0.75 !important;
  }

  #trail-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  /* 3. Hero content — buttons only, no title/stats */
  #hero-new-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    width: 90% !important;
    max-width: 480px !important;
    padding: 0 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }

  #hero-new-content .hero-title,
  #hero-new-content .hero-stats {
    display: none !important;
  }

  #hero-new-content .hero-buttons {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0 !important;
  }

  #hero-new-content .hero-buttons .btn {
    font-size: 0.9rem !important;
    padding: 0.85rem 1.5rem !important;
  }

  /* 4. Hide scroll arrow and snap point */
  #hero-original-arrow,
  .hero-snap-point {
    display: none !important;
  }

  /* 5. Arch */
  .hero-arch {
    display: block !important;
  }

  .hero-arch svg {
    height: clamp(60px, 10vw, 100px) !important;
  }
}

@media (max-width: 400px) {
  #hero-new-content .hero-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }

  #hero-new-content .hero-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
}

/* ══════════════════════════════════════════
   HERO — MOBILE COMPACT (replaces fullscreen hero)
   Logo sits naturally, no upscale, no buttons
══════════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1. Wrapper collapses to exactly the sticky inner height — no black gap */
  .hero-scroll-wrapper {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }

  /* Kill the snap point height so it doesn't add space */
  .hero-snap-point {
    display: none !important;
  }

  /* 2. Sticky inner — compact, natural height */
  .hero-sticky-inner {
    position: relative !important;
    height: 60svh !important;
    min-height: 340px !important;
    max-height: 480px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* 3. Logo — natural size, no scale */
  #spotlight-logo-container {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: calc(100vw - 48px) !important;
    max-width: 360px !important;
    transform: none !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
    z-index: 3 !important;
    flex-shrink: 0 !important;
  }

  #base-logo {
    width: 100% !important;
    height: auto !important;
    opacity: 0.75 !important;
  }

  #trail-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  /* 4. Hide buttons, arrow, stats */
  #hero-new-content {
    display: none !important;
  }

  #hero-original-arrow {
    display: none !important;
  }

  /* 5. Arch — keep it, but pull it up to overlap the video bottom
         so it transitions directly into services with no gap */
  .hero-arch {
    display: block !important;
    position: absolute !important;
    bottom: -1px !important;   /* flush against sticky-inner bottom */
    left: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
  }

  .hero-arch svg {
    height: clamp(40px, 8vw, 70px) !important;
    display: block !important;
  }
}

/* ============================================
   DEZIGNITE — Footer Mobile Fix Patch
   Add this at the END of mobile-fixes.css,
   inside the existing @media (max-width: 768px) block
   OR apply as a separate patch file loaded last.
   ============================================ */

@media (max-width: 768px) {

  /* ─── FOOTER GRID ─── */
  .footer {
    padding: 3rem 0 1.5rem;
  }

  .footer-content {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }

  /* Logo + description always spans full width */
  .footer-content > .footer-section:first-child {
    grid-column: 1 / -1;
  }

  .footer-logo {
    font-size: 1.4rem;
  }

  .footer-description {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  /* Footer link columns tighten up */
  .footer-title {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .footer-links {
    gap: 0.5rem;
  }

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

  /* Newsletter section spans full width on mobile */
  .footer-content > .footer-section:last-child {
    grid-column: 1 / -1;
  }

  /* Newsletter form stacks vertically */
  .newsletter-form {
    flex-direction: column;
    gap: 0.65rem;
  }

  .newsletter-form input {
    width: 100%;
    border-radius: 12px !important;
  }

  .newsletter-form button {
    width: 100%;
    padding: 0.875rem 1.25rem;
    border-radius: 12px !important;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  /* Social links row */
  .social-links {
    flex-wrap: wrap;
  }

  /* Footer bottom */
  .footer-bottom {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
    padding-top: 1.5rem !important;
  }

  .footer-bottom-links {
    flex-direction: row !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

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

/* Extra small — full single column footer */
@media (max-width: 400px) {
  .footer-content {
    grid-template-columns: 1fr !important;
  }

  .footer-bottom-links {
    flex-direction: column !important;
    gap: 0.4rem !important;
  }
}