@media (max-width: 768px) {
  /* ==============================================
      Apple-Style Mobile Reset
     ============================================== */

  /* 1. System font stack + iOS polish */
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Heebo", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overscroll-behavior-y: none;

    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }

  /* 2. Remove tap highlight */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* 3. Fast, native-like taps */
  button,
  .btn-primary,
  .nav-item,
  .card {
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    touch-action: manipulation;
  }

  button:active,
  .btn-primary:active,
  .nav-item:active,
  .card:active {
    transform: scale(0.96);
  }

  /* 4. Hide scrollbars (iOS/Chrome) */
  ::-webkit-scrollbar {
    display: none;
  }

  * {
    scrollbar-width: none;
  }

  /* 5. Prevent iOS zoom on inputs */
  input,
  textarea,
  select {
    font-size: 16px !important;
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
  }

  /* ==============================================
     UI Specific Adjustments
     ============================================== */

  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.5rem !important; }

  .nav-dock {
    width: 92% !important;
    bottom: calc(15px + env(safe-area-inset-bottom)) !important;
    padding: 12px 20px !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.4) !important;
  }

  .nav-main-btn {
    width: 60px !important;
    height: 60px !important;
    aspect-ratio: 1 !important;
    min-width: 60px !important;
    min-height: 60px !important;
    flex: 0 0 auto !important;
    margin-top: -35px !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 20px rgba(44, 62, 80, 0.4) !important;
  }

  .nav-cta {
    order: -1;
    flex: 0 0 auto;
    min-width: 110px;
    text-align: center;
    font-size: clamp(0.8rem, 2.4vw, 0.95rem);
    padding: 10px 18px !important;
    margin: 0 !important;
    align-self: stretch;
  }

  .card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 5px !important;
  }

  .card {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
  }

  .card-header {
    height: 180px !important;
  }

  .search-wrapper {
    padding: 0 10px !important;
    top: env(safe-area-inset-top) !important;
  }

  .ink-search-bar {
    height: 50px !important;
    border-radius: 16px !important;
  }

  .content {
    padding-bottom: 120px !important;
  }

  .content-layout {
    flex-direction: column;
  }
}