/* ========================================
   MOBILE OPTIMIZATIONS - INDEX.HTML
   Target: 375px - 440px (Focus on 440px)
   ======================================== */

/* ========================================
   1. HERO SECTION - MOBILE
   ======================================== */

@media (max-width: 440px) {
  /* Fix horizontal overflow - constrain all 100vw elements */
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100%;
  }

  /* Fix all 100vw elements that cause horizontal overflow */
  .services-horizontal__viewport,
  .hero-premium-container,
  .services-horizontal,
  .page-wrap,
  main,
  section {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove centering transforms that use 100vw */
  .services-horizontal__viewport {
    left: 0 !important;
    transform: none !important;
  }

  /* Ensure hero doesn't overflow */
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Hero Container */
  .hero {
    min-height: 100svh;
    padding: 0;
    margin-top: 0;
  }

  /* Hero Content - Adjust positioning */
  .hero-content {
    padding: 24px 20px 80px;
    min-height: 100svh;
    justify-content: center;
    align-items: center;
  }

  /* Hero Text */
  .hero-text {
    max-width: 100%;
    text-align: center;
    margin-bottom: 32px;
  }

  /* Hero Heading */
  .hero-premium-heading {
    font-size: clamp(36px, 10vw, 48px) !important;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }

  /* Hero Subheading */
  .hero-premium-subheading {
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.6;
    max-width: 100%;
    margin-bottom: 24px;
  }

  /* CTA Buttons - Stack vertically */
  .hero-cta-buttons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .hero-start-project-btn,
  .hero-view-work-btn {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
    padding: 16px 24px;
    justify-content: center;
  }

  /* Hide decorative elements on mobile */
  .hero-panel-logo,
  .hero-panel-terminal,
  .hero-panel-stats,
  .winkla-craft-engine,
  .intelligence-node {
    display: none !important;
  }

  /* Video Background - Ensure proper coverage */
  .hero-bg-video,
  .hero-bg-image {
    object-fit: cover;
    object-position: center;
  }
}

/* ========================================
   2. ABOUT SECTION - MOBILE
   ======================================== */

@media (max-width: 440px) {
  .about-section {
    padding: 60px 20px;
    min-height: auto;
  }

  /* Center WINKLA STUDIO */
  .about-badge,
  .about-name {
    text-align: center;
    justify-content: center;
    margin: 0 auto;
  }

  .about-header {
    text-align: center;
  }

  .about-title {
    text-align: center;
  }

  /* Reorder elements: content, link, then image */
  .about-container {
    display: flex;
    flex-direction: column;
  }

  .about-content {
    max-width: 100%;
    order: 1;
  }

  .about-image {
    order: 3;
    margin-top: 32px;
  }

  .about-link {
    order: 2;
    margin-top: 24px;
    margin-bottom: 0;
  }

  /* Hide first and third paragraphs, show only second */
  .about-text p:nth-child(1),
  .about-text p:nth-child(3) {
    display: none !important;
  }

  .about-text p:nth-child(2) {
    display: block !important;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
  }

  .about-eyebrow {
    font-size: 11px;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
  }

  .about-heading {
    font-size: clamp(32px, 8vw, 42px);
    line-height: 1.2;
    margin-bottom: 20px;
  }

  .about-description {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
  }

  .about-stats {
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
  }

  .about-stat-item {
    text-align: center;
  }

  .about-stat-number {
    font-size: 36px;
    margin-bottom: 8px;
  }

  .about-stat-label {
    font-size: 13px;
  }
}

/* ========================================
   3. SERVICES SECTION - MOBILE
   ======================================== */

@media (max-width: 440px) {
  .services {
    padding: 60px 0 40px;
    margin-top: 40px;
  }

  .services-inner {
    padding: 0 20px;
  }

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

  .services-eyebrow {
    font-size: 11px;
    margin-bottom: 12px;
  }

  .services-title {
    font-size: clamp(32px, 8vw, 40px);
    line-height: 1.2;
  }

  /* Service Cards - Horizontal Scroll */
  .services-horizontal__canvas {
    gap: 4rem;
    padding: 0 20px;
  }

  .service-card-h {
    min-width: 280px;
    width: 280px;
    padding: 24px;
  }

  .service-card-h__number {
    font-size: 48px;
    margin-bottom: 16px;
  }

  .service-card-h__title {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .service-card-h__description {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .service-card-h__cta {
    font-size: 13px;
    padding: 10px 20px;
  }
}

/* ========================================
   4. LATEST WORK - MOBILE
   ======================================== */

@media (max-width: 440px) {
  /* Hide work sidebar on mobile */
  .work-sidebar {
    display: none !important;
  }

  .latest-work {
    margin-top: 60px;
    padding: 0 20px 60px;
  }

  .latest-work-header {
    margin-bottom: 32px;
    text-align: center;
    width: 100%;
  }

  .latest-work-title {
    font-size: clamp(40px, 10vw, 56px);
    line-height: 1.1;
    margin-bottom: 16px;
    text-align: center;
    width: 100%;
  }

  .latest-work-subtitle {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    width: 100%;
  }

  /* Work Grid - Single Column */
  .latest-work-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .work-card {
    aspect-ratio: 4/3;
  }

  .work-card__image {
    height: 100%;
  }

  .work-card__content {
    padding: 20px;
  }

  .work-card__title {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .work-card__category {
    font-size: 12px;
  }

  /* View All Button - Fix width */
  .latest-work-footer {
    width: 100% !important;
    padding: 0 20px !important;
  }

  .latest-work-more-link,
  .latest-work-more-link a,
  .work-view-all-btn,
  .btn-view-all {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 52px;
    font-size: 15px;
    margin: 32px auto 0 !important;
    padding: 16px 32px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* ========================================
   5. LATEST INSIGHTS/BLOG - MOBILE
   ======================================== */

@media (max-width: 440px) {
  .latest-insights-section {
    padding: 60px 20px;
    height: auto;
  }

  .latest-insights-header {
    margin-bottom: 32px;
  }

  .latest-insights-title {
    font-size: clamp(32px, 8vw, 40px);
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .latest-insights-subtitle {
    font-size: 14px;
  }

  /* Blog Cards - Vertical Stack (no horizontal scroll) */
  .latest-insights-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 24px !important;
    padding-bottom: 0;
    padding-left: 5% !important;
    padding-right: 5% !important;
    scroll-snap-type: none !important;
  }

  .insight-card {
    min-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0;
    scroll-snap-align: none;
    margin: 0 !important;
  }

  .insight-card__image {
    height: 200px;
  }

  .insight-card__content {
    padding: 20px;
  }

  .insight-card__category {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .insight-card__title {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .insight-card__excerpt {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .insight-card__meta {
    font-size: 12px;
  }

  /* See All Button */
  .latest-insights-see-all {
    width: auto !important;
    max-width: 90% !important;
    min-height: 52px;
    font-size: 15px;
    margin: 32px auto 0 !important;
    padding: 16px 32px !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* ========================================
   6. CONTACT SECTION - MOBILE
   ======================================== */

@media (max-width: 440px) {
  /* New Contact Section - Reorder elements */
  .new-contact__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
  }

  .new-contact__left {
    order: 1;
    text-align: center;
  }

  .new-contact__middle {
    order: 2;
  }

  .new-contact__right {
    order: 3;
    max-width: 100% !important;
    justify-self: center !important;
  }

  .new-contact__phone {
    max-width: 280px !important;
    margin: 0 auto;
  }

  /* Center contact buttons with full width */
  .new-contact__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .new-contact__btn-primary,
  .new-contact__btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Old winkla-contact styles (if still used) */
  .winkla-contact {
    padding: 60px 20px 120px;
  }

  .winkla-contact__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .winkla-contact__heading {
    font-size: clamp(32px, 8vw, 40px);
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .winkla-contact__description {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Contact Info */
  .winkla-contact__info-item {
    padding: 16px 0;
  }

  .winkla-contact__info-label {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .winkla-contact__info-value {
    font-size: 16px;
  }

  /* Form */
  .winkla-contact__form-group {
    margin-bottom: 20px;
  }

  .winkla-contact__label {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .winkla-contact__input,
  .winkla-contact__textarea {
    font-size: 15px;
    padding: 14px 16px;
    min-height: 52px;
  }

  .winkla-contact__textarea {
    min-height: 140px;
  }

  .winkla-contact__submit {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
    padding: 16px 24px;
  }
}

/* ========================================
   7. FOOTER - MOBILE
   ======================================== */

@media (max-width: 440px) {
  .winkla-footer {
    padding: 60px 20px 32px;
  }

  .winkla-footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 32px;
  }

  .winkla-footer__brand {
    text-align: center;
  }

  .winkla-footer__logo {
    width: 120px;
    margin-bottom: 12px;
  }

  .winkla-footer__tagline {
    font-size: 13px;
    line-height: 1.6;
  }

  .winkla-footer__nav {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .winkla-footer__col h4 {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .winkla-footer__col ul li {
    margin-bottom: 8px;
  }

  .winkla-footer__col ul li a {
    font-size: 14px;
  }

  .winkla-footer__bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .winkla-footer__social {
    justify-content: center;
  }

  .winkla-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 12px;
  }

  .winkla-footer__copyright {
    font-size: 12px;
  }
}

/* ========================================
   8. GLOBAL MOBILE UTILITIES
   ======================================== */

@media (max-width: 440px) {
  /* Typography */
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  h1 {
    font-size: clamp(32px, 8vw, 42px);
  }

  h2 {
    font-size: clamp(28px, 7vw, 36px);
  }

  h3 {
    font-size: clamp(22px, 6vw, 28px);
  }

  /* Spacing */
  section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Buttons - Ensure touch-friendly */
  button,
  .btn,
  a.btn {
    min-height: 48px;
    padding: 14px 20px;
    font-size: 15px;
  }

  /* Images - Responsive */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Remove horizontal scroll */
  body {
    overflow-x: hidden;
  }

  /* Smooth scrolling for horizontal cards */
  .services-horizontal__canvas,
  .latest-insights-grid {
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .services-horizontal__canvas::-webkit-scrollbar,
  .latest-insights-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
}

/* ========================================
   9. SERVICES PROBA SECTION - MOBILE
   ======================================== */

@media (max-width: 440px) {
  /* Disable horizontal scroll - convert to vertical stack */
  .services-proba {
    height: auto !important;
    overflow: visible !important;
  }

  .services-proba__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .services-proba__track {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    width: 100% !important;
    gap: 60px;
    padding: 40px 20px;
  }

  /* Each slide becomes a vertical section */
  .proba-slide {
    width: 100% !important;
    min-height: auto !important;
    padding: 40px 0;
  }

  .proba-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    position: relative !important;
  }

  /* === SLIDE 1: IZRADA WEB (Terminal) === */
  
  /* Hide terminal monitor completely */
  .slide-1 .terminal-monitor,
  .slide-1 .monitor-frame,
  .slide-1 .monitor-screen,
  .slide-1 .before-after-slider {
    display: none !important;
  }

  /* Show only specific terminal content on mobile */
  .slide-1 .terminal-description {
    display: none !important;
  }
  
  .slide-1 .terminal-stats {
    display: none !important;
  }
  
  /* Show terminal prompts (project --init and design --info) */
  .slide-1 .terminal-prompt {
    display: block !important;
    margin-bottom: 16px !important;
  }
  
  .slide-1 .prompt-line {
    display: block !important;
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }
  
  .slide-1 .prompt-symbol {
    color: #10b981 !important;
  }
  
  .slide-1 .prompt-text {
    font-size: 11px !important;
  }
  
  .slide-1 .terminal-response {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.6 !important;
    margin-left: 12px !important;
  }
  
  .slide-1 .text-success {
    color: #10b981 !important;
  }
  
  /* Ensure terminal header and service info is visible */
  .slide-1 .terminal-header,
  .slide-1 .maintenance-highlight,
  .slide-1 .service-title-terminal,
  .slide-1 .service-subtitle-terminal {
    display: block !important;
  }
  
  .slide-1 .service-title-terminal {
    font-size: 13px !important;
  }
  
  .slide-1 .service-subtitle-terminal {
    font-size: 10px !important;
  }
  
  .slide-1 .maintenance-icon {
    width: 18px !important;
    height: 18px !important;
  }

  /* Terminal layout - single column */
  .slide-1 .layout-terminal {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
  }

  .slide-1 .terminal-content {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .slide-1 .terminal-window {
    padding: 16px !important;
    font-size: 12px !important;
    min-height: auto !important;
  }

  .slide-1 .main-title,
  .slide-1 .card-1,
  .slide-1 .proba-quote {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .slide-1 .proba-heading {
    font-size: 32px !important;
  }

  /* === SLIDE 2: ODRŽAVANJE (Premium Visual) === */
  
  /* Hide all premium visual elements */
  .slide-2 .premium-panel,
  .slide-2 .premium-icon,
  .slide-2 .floating-icon,
  .slide-2 .shield-grid-bg,
  .slide-2 .shield-left,
  .slide-2 .shield-right,
  .slide-2 .status-card,
  .slide-2 .metric-card,
  .slide-2 .progress-bar,
  .slide-2 .layout-shield {
    display: none !important;
  }

  /* Keep only text content */
  .slide-2 .card-2,
  .slide-2 .center-text,
  .slide-2 .card-3 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .slide-2 .proba-heading {
    font-size: 32px !important;
  }

  .slide-2 .proba-desc {
    font-size: 15px !important;
    max-width: 100% !important;
  }

  /* === SLIDE 3: DRUŠTVENE MREŽE (Phone Mockup) === */
  
  /* Hide floating premium icons around phone */
  .slide-3 .premium-icon,
  .slide-3 .floating-icon,
  .slide-3 .phone-float-icon {
    display: none !important;
  }

  /* Scale phone mockup from center */
  .slide-3 .phone-mockup-container {
    transform: scale(0.75) !important;
    transform-origin: center center !important;
    margin: 0 auto !important;
  }

  .slide-3 .iphone-15-pro {
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* Text content */
  .slide-3 .big-end,
  .slide-3 .card-4,
  .slide-3 .bottom-right {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .slide-3 .proba-heading {
    font-size: 32px !important;
  }

  .slide-3 .proba-desc {
    font-size: 15px !important;
    max-width: 100% !important;
  }

  /* === GLOBAL PROBA STYLES === */
  
  .proba-label {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }

  .proba-heading {
    line-height: 1.2 !important;
  }

  .proba-heading.small {
    font-size: 28px !important;
  }

  .proba-heading.big {
    font-size: 40px !important;
  }

  .proba-desc {
    line-height: 1.6 !important;
  }

  .proba-btn {
    width: 100% !important;
    max-width: 280px !important;
    margin: 20px auto 0 !important;
    padding: 14px 24px !important;
    font-size: 14px !important;
  }

  .proba-quote {
    font-size: 20px !important;
    max-width: 100% !important;
  }

  .proba-image-card {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
}

/* ========================================
   6. WORK PAGE - MOBILE
   ======================================== */

@media (max-width: 440px) {
  /* Remove padding-bottom from work grid */
  .all-work-grid {
    padding-bottom: 0 !important;
    gap: 60px !important;
    margin-bottom: 80px !important;
  }

  /* Mobile scroll animations - enhanced for center-screen effect */
  .all-work-grid .work-image-item.reveal-element {
    opacity: 0.6 !important;
    transform: scale(0.92) translateY(20px) !important;
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) !important;
  }

  .all-work-grid .work-image-item.reveal-element.is-visible {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
  }

  /* Reduce card spacing on small mobile */
  .work-image-item {
    margin-bottom: 60px !important;
  }

  /* Adjust section padding */
  .all-work-section {
    padding: 80px 20px 40px !important;
  }

  /* Title sizing */
  .all-work-title {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
}

@media (max-width: 375px) {
  .all-work-grid {
    gap: 48px !important;
    margin-bottom: 60px !important;
  }

  .work-image-item {
    margin-bottom: 48px !important;
  }

  .all-work-section {
    padding: 60px 16px 32px !important;
  }
}

/* ========================================
   7. PROJECT DETAIL PAGES - MOBILE
   ======================================== */

@media (max-width: 440px) {
  /* Editorial Hero - Image first, content below */
  .editorial-hero__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .editorial-hero__visual {
    order: 1 !important;
    width: 100% !important;
    height: 50vh !important;
    max-height: 400px !important;
  }

  .editorial-hero__content {
    order: 2 !important;
    padding: 0 20px !important;
  }

  .editorial-hero__title {
    font-size: clamp(32px, 8vw, 48px) !important;
  }

  /* Editorial Context - Text below visual */
  .editorial-context__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    padding: 0 20px !important;
  }

  .editorial-context__visual {
    order: 1 !important;
    width: 100% !important;
  }

  .editorial-context__text {
    order: 2 !important;
    transform: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  
  /* Remove grey background from second grid text */
  .editorial-context__grid:nth-of-type(2) .editorial-context__text {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Hide showcase images (full and split) */
  .editorial-showcase__full,
  .editorial-showcase__split {
    display: none !important;
  }

  /* Editorial Showcase Offset - Image first, text below */
  .editorial-showcase__offset-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    padding: 0 20px !important;
  }

  .editorial-showcase__offset-visual {
    order: 1 !important;
  }

  .editorial-showcase__offset-content {
    order: 2 !important;
  }

  /* Editorial Next section - Image first, content below and centered */
  .editorial-next {
    padding: 60px 20px !important;
  }

  .editorial-next__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    align-items: center !important;
  }

  .editorial-next__visual {
    order: 1 !important;
    width: 100% !important;
  }

  .editorial-next__content {
    order: 2 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .editorial-next__title {
    font-size: clamp(28px, 7vw, 36px) !important;
    text-align: center !important;
  }

  .editorial-next__link {
    margin: 0 auto !important;
  }

  /* Testimonial styling */
  .editorial-testimonial {
    padding: 32px 20px !important;
  }

  .editorial-testimonial__quote {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
  }

  .editorial-testimonial__author {
    font-size: 14px !important;
    color: #ffffff !important;
  }
}

@media (max-width: 375px) {
  .editorial-hero__container {
    gap: 24px !important;
  }

  .editorial-hero__visual {
    height: 45vh !important;
  }

  .editorial-context__grid {
    gap: 24px !important;
  }

  .editorial-showcase__offset-grid {
    gap: 24px !important;
  }

  .editorial-testimonial {
    padding: 24px 16px !important;
  }

  .editorial-testimonial__quote {
    font-size: 15px !important;
  }
}

/* ========================================
   8. ARTICLES PAGE - MOBILE
   ======================================== */

@media (max-width: 440px) {
  /* Blog articles page - vertical stack */
  .articles-grid-section {
    padding: 0 5% 80px !important;
  }

  .articles-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 24px !important;
    scroll-snap-type: none !important;
  }

  .articles-grid .insight-card--featured,
  .articles-grid .insight-card--standard {
    min-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0;
    margin: 0 !important;
  }

  .articles-grid .insight-card--featured {
    height: 360px !important;
  }

  .articles-grid .insight-card--standard {
    height: 400px !important;
  }
}

@media (max-width: 375px) {
  .articles-grid-section {
    padding: 0 5% 60px !important;
  }

  .articles-grid {
    gap: 20px !important;
  }

  .articles-grid .insight-card--featured {
    height: 340px !important;
  }

  .articles-grid .insight-card--standard {
    height: 380px !important;
  }
}

/* ========================================
   8. FOOTER - MOBILE
   ======================================== */

@media (max-width: 440px) {
  .site-footer {
    padding: 40px 0 30px !important;
  }

  .site-footer__container {
    padding: 0 20px !important;
  }

  .site-footer__card {
    padding: 24px 20px !important;
  }

  /* Center brand section */
  .site-footer__brand {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .site-footer__logo-wrap {
    margin: 0 auto 16px !important;
  }

  .site-footer__tagline {
    text-align: center !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* Center navigation columns */
  .site-footer__main {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    text-align: center !important;
  }

  .site-footer__nav {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    width: 100% !important;
  }

  .site-footer__col {
    text-align: center !important;
    width: 100% !important;
  }

  .site-footer__col h4 {
    text-align: center !important;
    margin-bottom: 16px !important;
  }

  .site-footer__col ul {
    text-align: center !important;
  }

  .site-footer__col ul li {
    margin-bottom: 12px !important;
  }

  /* Center contact items */
  .site-footer__contact li {
    justify-content: center !important;
  }

  /* Center bottom section */
  .site-footer__bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important;
    padding-top: 24px !important;
  }

  .site-footer__social {
    justify-content: center !important;
    order: 1 !important;
  }

  .site-footer__legal {
    justify-content: center !important;
    order: 2 !important;
    flex-wrap: wrap !important;
  }

  .site-footer__copyright {
    order: 3 !important;
    text-align: center !important;
    width: 100% !important;
  }
}

@media (max-width: 375px) {
  .site-footer__container {
    padding: 0 16px !important;
  }

  .site-footer__card {
    padding: 20px 16px !important;
  }

  .site-footer__logo-wrap {
    width: 140px !important;
  }

  .site-footer__logo {
    width: 140px !important;
  }

  .site-footer__tagline {
    font-size: 13px !important;
  }

  .site-footer__col h4 {
    font-size: 10px !important;
  }

  .site-footer__col ul a {
    font-size: 14px !important;
  }
}

/* ========================================
   9. COOKIE BANNER - MOBILE
   ======================================== */

@media (max-width: 440px) {
  .cookie-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px !important;
    z-index: 9999 !important;
  }

  .cookie-banner__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 12px 12px 0 0 !important;
    max-width: 100% !important;
  }

  .cookie-banner__text {
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  .cookie-banner__actions {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .cookie-btn {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Cookie Modal Mobile */
  .cookie-modal__dialog {
    width: 90% !important;
    max-width: 90% !important;
    margin: 20px !important;
    padding: 20px !important;
  }

  .cookie-modal__title {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }

  .cookie-toggle {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 0 !important;
  }

  .cookie-toggle__left {
    width: 100% !important;
  }

  .cookie-toggle__title {
    font-size: 14px !important;
  }

  .cookie-toggle__desc {
    font-size: 12px !important;
  }

  .cookie-modal__actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

@media (max-width: 375px) {
  .cookie-banner {
    padding: 10px !important;
  }

  .cookie-banner__inner {
    padding: 14px !important;
  }

  .cookie-banner__text {
    font-size: 12px !important;
  }

  .cookie-btn {
    padding: 10px 14px !important;
    font-size: 11px !important;
  }
}

/* ========================================
   10. EXTRA SMALL DEVICES (375px and below)
   ======================================== */

@media (max-width: 375px) {
  /* Fix horizontal overflow for extra small devices */
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100%;
  }

  .services-horizontal__viewport,
  .hero-premium-container,
  .services-horizontal,
  .page-wrap,
  main,
  section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-content {
    padding: 20px 16px 60px;
  }

  .hero-premium-heading {
    font-size: clamp(32px, 9vw, 40px) !important;
  }

  .about-section,
  .services-inner,
  .latest-work,
  .latest-insights-section,
  .winkla-contact,
  .winkla-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* About section - same mobile optimizations */
  .about-badge,
  .about-name {
    text-align: center;
    justify-content: center;
    margin: 0 auto;
  }

  .about-header,
  .about-title {
    text-align: center;
  }

  .about-container {
    display: flex;
    flex-direction: column;
  }

  .about-content {
    order: 1;
  }

  .about-image {
    order: 3;
    margin-top: 32px;
  }

  .about-link {
    order: 2;
    margin-top: 24px;
  }

  .about-text p:nth-child(1),
  .about-text p:nth-child(3) {
    display: none !important;
  }

  .about-text p:nth-child(2) {
    display: block !important;
    text-align: center;
  }

  /* Work sidebar */
  .work-sidebar {
    display: none !important;
  }

  /* Blog vertical stack */
  .latest-insights-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 20px !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
  }

  .insight-card {
    min-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Contact section reorder */
  .new-contact__grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .new-contact__left {
    order: 1;
    text-align: center;
  }

  .new-contact__middle {
    order: 2;
  }

  .new-contact__right {
    order: 3;
  }

  .new-contact__phone {
    max-width: 260px !important;
  }

  /* Center contact buttons */
  .new-contact__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .new-contact__btn-primary,
  .new-contact__btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* Fix latest-work button */
  .latest-work-footer {
    width: 100% !important;
    padding: 0 16px !important;
  }

  .latest-work-more-link {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Center PROJEKTI title */
  .latest-work-header,
  .latest-work-title,
  .latest-work-subtitle {
    text-align: center !important;
    width: 100% !important;
  }

  /* Show terminal prompts on extra small devices */
  .slide-1 .terminal-description,
  .slide-1 .terminal-stats {
    display: none !important;
  }

  .slide-1 .terminal-prompt {
    display: block !important;
    margin-bottom: 14px !important;
  }

  .slide-1 .prompt-line {
    font-size: 10px !important;
  }

  .slide-1 .terminal-response {
    font-size: 9px !important;
  }

  .slide-1 .service-title-terminal {
    font-size: 12px !important;
  }

  .slide-1 .service-subtitle-terminal {
    font-size: 9px !important;
  }

  .slide-1 .maintenance-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .slide-1 .terminal-window {
    min-height: auto !important;
  }

  .service-card-h,
  .insight-card {
    min-width: 260px;
    width: 260px;
  }
}