/* =====================================================
   CYBERPROBD — Responsive Stylesheet
   Author: MD Abu Bokkar
   Version: v12.1 — Fixed Search Button Mobile
   Build: January 2026

   🎯 WHAT'S NEW IN v12.1:
   ✅ Mobile: Search button HIDDEN in top navbar
   ✅ Desktop: Search button VISIBLE (normal)
   ✅ Bottom nav handles search on mobile
   ✅ Hamburger always visible on mobile
   ✅ Language toggle always visible
   ✅ No horizontal scroll on any device
   ✅ Chrome "Desktop Site" mode fix
   ✅ iOS Safari 100dvh fix
   ✅ Safe-area support for iPhone
   ✅ Tablet hero single-column fix
   ✅ Footer compact on mobile
   ✅ Better touch targets (44px minimum)
   ✅ Landscape mode improvements

   📱 BREAKPOINTS:
   - 1300px  → tablet landscape + Chrome desktop mode
   - 1101px  → hamburger still shows (touch devices)
   - 1100px  → hamburger appears, search hides
   - 1024px  → tablet portrait
   - 900px   → mobile-nav appears (bottom bar)
   - 768px   → tablet / large phone
   - 600px   → small phone
   - 480px   → smaller phone
   - 360px   → very small phone
   - 320px   → Galaxy Fold
   ===================================================== */

/* =====================================================
   1. DESKTOP — Hide Hamburger
   ===================================================== */
@media (min-width: 1101px) {
  .nav-toggle { display: none !important; }
  /* ✅ Desktop: Search button visible (default) */
  .nav-search-btn { display: flex !important; }
}

/* =====================================================
   2. MOBILE + TABLET NAVBAR (Hamburger Menu)
   1100px and below
   ===================================================== */
@media (max-width: 1100px) {
  /* ============ HAMBURGER BUTTON ============ */
  .nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
    background: rgba(139, 92, 246, 0.12) !important;
    border: 1.5px solid rgba(139, 92, 246, 0.45) !important;
    border-radius: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 1100 !important;
    flex-shrink: 0 !important;
    margin-left: 4px !important;
    position: relative !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .nav-toggle span {
    display: block !important;
    width: 18px !important;
    height: 2.5px !important;
    background: var(--text) !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
  }

  .nav-toggle.active {
    background: var(--gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.5) !important;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(3px, 3px) !important;
    background: white !important;
  }

  .nav-toggle.active span:nth-child(2) { opacity: 0 !important; }

  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -3px) !important;
    background: white !important;
  }

  [data-theme="light"] .nav-toggle {
    background: rgba(124, 58, 237, 0.08) !important;
    border-color: rgba(124, 58, 237, 0.5) !important;
  }

  /* ============ ✅ SEARCH BUTTON HIDDEN ON MOBILE ============
     কারণ mobile এ search নিচের bottom nav এ আছে
     Desktop এ search button থাকবে (উপরে rule দেখুন)
     ============================================ */
  .nav-search-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* ============ NAV MENU — SLIDE-IN PANEL ============ */
  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 320px !important;
    max-width: 88vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--bg-2) !important;
    border-left: 1px solid var(--border) !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 72px 18px 24px !important;
    gap: 4px !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1050 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .nav-menu.open { right: 0 !important; }

  .nav-menu-search { display: block !important; }

  .nav-link {
    padding: 12px 15px !important;
    font-size: 13.5px !important;
    text-align: left !important;
    border-radius: 10px !important;
    width: 100% !important;
    display: block !important;
  }

  .nav-link.active {
    background: var(--gradient) !important;
    color: white !important;
  }

  .nav-cta {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 14px !important;
  }

  [data-theme="light"] .nav-menu {
    background: var(--card) !important;
  }

  /* ============ NAV CONTAINER ============ */
  .nav-container {
    padding: 8px 12px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .nav-logo {
    gap: 7px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  .logo-badge {
    width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
  }

  .logo-name {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .logo-role {
    font-size: 8.5px !important;
  }

  /* ============ NAV RIGHT — BUTTONS VISIBLE ============ */
  .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Language toggle always visible */
  .lang-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 36px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    flex-shrink: 0 !important;
  }

  .lang-current {
    font-size: 10.5px !important;
    pointer-events: none !important;
  }

  /* Clock compact */
  .live-clock {
    display: flex !important;
    visibility: visible !important;
    padding: 5px 9px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
  }

  .clock-text { font-size: 10px !important; }
  .clock-dot { width: 5px !important; height: 5px !important; }

  /* Theme toggle compact */
  .theme-toggle {
    display: flex !important;
    visibility: visible !important;
    width: 46px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }

  .theme-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .theme-icon svg {
    width: 11px !important;
    height: 11px !important;
  }
}

/* =====================================================
   3. VERY SMALL MOBILE — 320px (Galaxy Fold)
   ===================================================== */
@media (max-width: 320px) {
  .container { padding: 0 11px !important; }
  .section { padding: 36px 0 !important; }

  .nav-container { padding: 7px 10px !important; gap: 4px !important; }

  .logo-badge { width: 28px !important; height: 28px !important; font-size: 10px !important; }
  .logo-name { font-size: 10.5px !important; }
  .logo-role { font-size: 7px !important; }

  .lang-toggle {
    display: flex !important;
    min-width: 30px !important;
    height: 26px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
  }

  .lang-current { font-size: 9px !important; }

  .live-clock { padding: 4px 7px !important; font-size: 8.5px !important; }
  .clock-text { font-size: 8.5px !important; }

  .theme-toggle { width: 40px !important; height: 22px !important; }
  .theme-icon { width: 15px !important; height: 15px !important; }
  .theme-icon svg { width: 10px !important; height: 10px !important; }

  .nav-toggle {
    width: 34px !important;
    height: 34px !important;
    padding: 7px !important;
  }

  .nav-toggle span { width: 16px !important; }

  .hero { padding: 80px 0 36px !important; }
  .hero-title { font-size: 18px !important; }
  .hero-roles { font-size: 12.5px !important; }
  .hero-description { font-size: 11px !important; }
  .hero-badge { font-size: 9.5px !important; padding: 4px 9px !important; }

  .section-title { font-size: 16.5px !important; }
  .page-hero-title { font-size: 18px !important; }

  .stat-num { font-size: 14px !important; }
  .stat-label { font-size: 7.5px !important; }

  .btn { padding: 9px 13px !important; font-size: 11px !important; }

  .wa-widget-box { width: 260px !important; }
  .wa-widget-toggle { width: 42px !important; height: 42px !important; }
  .wa-widget-toggle svg { width: 17px !important; height: 17px !important; }

  .fs-icon { width: 28px !important; height: 28px !important; }
  .fs-icon svg { width: 12px !important; height: 12px !important; }

  .footer-main { gap: 16px !important; }
}

/* =====================================================
   4. SMALL MOBILE — 360px
   ===================================================== */
@media (max-width: 360px) and (min-width: 321px) {
  .container { padding: 0 13px !important; }
  .hero-title { font-size: 20px !important; }
  .hero-roles { font-size: 13.5px !important; }
  .fs-icon { width: 30px !important; height: 30px !important; }
  .fs-icon svg { width: 13px !important; height: 13px !important; }
  .wa-widget-box { width: 270px !important; }

  .logo-name { font-size: 11px !important; }
  .logo-role { font-size: 7.5px !important; }

  .lang-toggle {
    min-width: 34px !important;
    height: 28px !important;
    font-size: 10px !important;
  }
}

/* =====================================================
   5. MAIN MOBILE — 768px and below
   ===================================================== */
@media (max-width: 768px) {
  .container { padding: 0 18px !important; }
  .section { padding: 52px 0 !important; }

  .service-section,
  .company-section {
    padding: 48px 0 !important;
  }

  .company-section-compact { padding: 40px 0 !important; }

  /* ============ HERO ============ */
  .hero {
    padding: 96px 0 48px !important;
    min-height: auto !important;
  }

  .hero-container {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .hero-visual { order: -1 !important; }

  .hero-title { font-size: clamp(24px, 7.5vw, 36px) !important; }
  .hero-description { font-size: 13px !important; }
  .hero-badge { font-size: 11px !important; padding: 5px 12px !important; }
  .hero-roles { font-size: 16px !important; }
  .hero-buttons { gap: 9px !important; margin-bottom: 26px !important; }
  .hero-buttons .btn { padding: 10px 17px !important; font-size: 12px !important; }
  .hero-stats { gap: 13px !important; padding-top: 20px !important; }
  .stat-num { font-size: 19px !important; }
  .stat-suf { font-size: 14px !important; }
  .stat-label { font-size: 9px !important; }
  .stat-divider { height: 18px !important; }

  .profile-card { max-width: 100% !important; }
  .profile-url { display: none !important; }
  .profile-footer { padding: 13px 15px !important; }

  .float-card-1 { top: 2% !important; left: -8px !important; }
  .float-card-2 { bottom: 4% !important; right: -8px !important; }
  .float-card { padding: 7px 10px !important; }
  .float-icon { width: 22px !important; height: 22px !important; }
  .float-info strong { font-size: 9.5px !important; }
  .float-info span { font-size: 8px !important; }

  /* ============ PAGE HERO ============ */
  .page-hero { padding: 96px 0 44px !important; }
  .page-hero-title { font-size: 24px !important; }
  .page-hero-sub { font-size: 13px !important; }

  /* ============ STATS STRIP ============ */
  .stats-strip { padding: 22px 0 !important; }
  .stats-strip-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .stat-strip-num { font-size: 22px !important; }
  .stat-strip-label { font-size: 9px !important; }

  /* ============ QUICK NAV ============ */
  .quick-nav-section { padding: 22px 0 !important; }
  .quick-nav-grid { grid-template-columns: 1fr !important; gap: 9px !important; }
  .quick-nav-grid.quick-nav-4 { grid-template-columns: 1fr !important; }
  .quick-nav-card { padding: 11px 13px !important; }
  .qnc-icon { width: 34px !important; height: 34px !important; }
  .qnc-text strong { font-size: 12px !important; }
  .qnc-text span { font-size: 9.5px !important; }

  /* ============ MARQUEE ============ */
  .trust-strip { padding: 14px 0 !important; }
  .marquee-track { gap: 24px !important; }
  .marquee-group { gap: 24px !important; }
  .marquee-group span { font-size: 13px !important; }
  .marquee-group span.sep { font-size: 10px !important; }

  /* ============ VENTURES ============ */
  .ventures-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ventures-grid > .venture-card:last-child { grid-column: span 1 !important; }
  .venture-thumb { height: 150px !important; }
  .venture-body { padding: 18px !important; }
  .venture-body h3 { font-size: 15px !important; }

  /* ============ ABOUT ============ */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  .about-image-wrap { max-width: 100% !important; }
  .about-badge {
    bottom: 11px !important;
    left: 11px !important;
    padding: 9px 11px !important;
  }
  .about-badge-num { font-size: 18px !important; }
  .about-badge-text { font-size: 9px !important; }
  .about-lead { font-size: 14px !important; }
  .about-text { font-size: 12.5px !important; }

  /* ============ SECTION ============ */
  .section-title { font-size: clamp(20px, 6.5vw, 26px) !important; }
  .section-sub { font-size: 13px !important; }
  .section-head { margin-bottom: 30px !important; }

  /* ============ SKILLS ============ */
  .skill-category { padding: 18px !important; }
  .skill-cat-head h3 { font-size: 13.5px !important; }
  .skills-categories { grid-template-columns: 1fr !important; }

  /* ============ PROJECTS ============ */
  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .projects-grid-compact { gap: 12px !important; }
  .project-thumb { height: 170px !important; }
  .project-card-sm .project-thumb { height: 160px !important; }
  .project-body { padding: 18px !important; }
  .project-card-sm .project-body { padding: 14px !important; }
  .project-body h3 { font-size: 15px !important; }
  .project-card-sm .project-body h3 { font-size: 13.5px !important; }

  .filter-bar {
    gap: 6px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 5px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .filter-bar::-webkit-scrollbar { display: none !important; }
  .filter-btn {
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    font-size: 11.5px !important;
  }

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

  .case-study { gap: 24px !important; grid-template-columns: 1fr !important; }
  .case-study-content h3 { font-size: 18px !important; }
  .cs-details {
    grid-template-columns: 1fr 1fr !important;
    padding: 15px !important;
    gap: 11px !important;
  }
  .cs-detail strong { font-size: 11px !important; }

  /* ============ SERVICES ============ */
  .services-grid-home {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }
  .service-home-card { padding: 18px !important; }
  .service-home-icon { width: 42px !important; height: 42px !important; }

  .service-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 13px !important;
    margin-bottom: 24px !important;
  }
  .service-header-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 13px !important;
  }
  .service-title { font-size: 20px !important; }
  .service-tagline { font-size: 12px !important; }
  .service-intro { font-size: 13px !important; margin-bottom: 20px !important; }
  .service-items-grid { grid-template-columns: 1fr !important; gap: 11px !important; }
  .service-item { padding: 17px !important; }

  .online-services-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .online-service-card { padding: 14px 9px !important; }
  .osc-icon { width: 32px !important; height: 32px !important; }
  .online-service-card h4 { font-size: 11.5px !important; }
  .online-service-card p { font-size: 9px !important; }

  .service-tech-row { padding: 11px 13px !important; gap: 5px !important; }
  .tech-chip { font-size: 9.5px !important; padding: 3px 9px !important; }

  .service-cta { gap: 7px !important; }
  .service-cta .btn { flex: 1 !important; min-width: 120px !important; }

  .process-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 11px !important;
  }
  .process-step { padding: 18px 14px !important; }
  .process-num { font-size: 24px !important; }
  .process-step h3 { font-size: 13px !important; }
  .process-step p { font-size: 11px !important; }

  /* ============ COMPANIES ============ */
  .company-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 13px !important;
    margin-bottom: 24px !important;
  }
  .company-header-sm { gap: 11px !important; margin-bottom: 22px !important; }

  .company-logo-badge {
    width: 54px !important;
    height: 54px !important;
    border-radius: 15px !important;
  }
  .company-header-sm .company-logo-badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }
  .company-name { font-size: 22px !important; }
  .company-name-sm { font-size: 20px !important; }
  .company-tagline { font-size: 12px !important; }

  .company-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .company-grid-sm { gap: 20px !important; }
  .company-grid.reverse { direction: ltr !important; }
  .company-visual { aspect-ratio: 4 / 3 !important; }
  .company-visual-sm { aspect-ratio: 4 / 3 !important; }
  .company-lead { font-size: 13.5px !important; }
  .company-text { font-size: 12px !important; }

  .company-services-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .company-services-grid-sm { gap: 6px !important; }
  .cs-item { padding: 10px !important; }
  .cs-item-sm { padding: 8px 10px !important; }
  .eco-materials-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .eco-materials-grid-sm { gap: 6px !important; }
  .asa-services-list span {
    font-size: 10.5px !important;
    padding: 5px 10px !important;
  }
  .asa-services-list-sm span {
    font-size: 10px !important;
    padding: 4px 9px !important;
  }

  .company-actions { gap: 7px !important; }
  .company-actions .btn { flex: 1 !important; min-width: 110px !important; }

  .connection-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }
  .connection-card { padding: 18px 15px !important; }
  .connection-icon { width: 40px !important; height: 40px !important; }

  /* ============ VALUES + STATS ============ */
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }
  .value-card { padding: 18px !important; }
  .value-icon { width: 38px !important; height: 38px !important; }
  .value-card h3 { font-size: 13.5px !important; }

  .stats-big-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 11px !important;
  }
  .stat-big { padding: 18px 12px !important; }
  .stat-big-num { font-size: 26px !important; }
  .stat-big-label { font-size: 9px !important; }

  /* ============ TIMELINE ============ */
  .timeline { padding-left: 24px !important; }
  .timeline::before { left: 7px !important; }
  .timeline-dot {
    left: -24px !important;
    width: 16px !important;
    height: 16px !important;
  }
  .timeline-content { padding: 15px 17px !important; }
  .timeline-content h3 { font-size: 14px !important; }
  .timeline-content p { font-size: 12px !important; }

  /* ============ TRADING ============ */
  .trading-tags span {
    font-size: 11px !important;
    padding: 5px 12px !important;
  }
  .tv-chart-main .tradingview-widget-container { height: 300px !important; }
  .tv-chart-card .tradingview-widget-container { height: 260px !important; }
  .tv-chart-header { padding: 11px 14px !important; }
  .tv-chart-info strong { font-size: 12.5px !important; }
  .tv-chart-sub { font-size: 9.5px !important; }
  .tv-chart-symbol { width: 30px !important; height: 30px !important; }

  .trading-story {
    gap: 13px !important;
    grid-template-columns: 1fr !important;
  }
  .story-block { padding: 20px !important; }
  .story-num { font-size: 26px !important; }
  .story-block h3 { font-size: 14px !important; }
  .story-block p { font-size: 12px !important; }

  .featured-tool {
    gap: 24px !important;
    grid-template-columns: 1fr !important;
  }
  .featured-tool-actions { gap: 7px !important; }
  .featured-tool-actions .btn { flex: 1 !important; min-width: 120px !important; }

  /* ============ TESTIMONIALS + FAQ ============ */
  .testimonials-grid { grid-template-columns: 1fr !important; }
  .testimonials-grid .testimonial-card:last-child { grid-column: span 1 !important; }
  .testimonial-card { padding: 20px !important; }

  .faq-q { padding: 14px 15px !important; gap: 10px !important; }
  .faq-text { font-size: 12.5px !important; }
  .faq-a p { padding: 0 15px 15px 38px !important; font-size: 12px !important; }
  .faq-icon { width: 22px !important; height: 22px !important; }

  /* ============ CONTACT ============ */
  .contact-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  .contact-big-card { padding: 16px !important; gap: 11px !important; }
  .cbc-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .cbc-value { font-size: 14px !important; }
  .cbc-value.cbc-small { font-size: 12px !important; }

  .location-card { padding: 16px !important; gap: 11px !important; }
  .location-icon { width: 38px !important; height: 38px !important; }

  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .contact-form {
    padding: 20px !important;
    gap: 13px !important;
  }
  .form-head h3 { font-size: 16px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 13px !important; }

  .biz-card-full-inner {
    padding: 22px !important;
    position: static !important;
  }
  .card-photo-wrap { width: 80px !important; height: 80px !important; }
  .card-name { font-size: 16px !important; }
  .qr-image { width: 110px !important; height: 110px !important; }

  /* ============ BLOG ============ */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .blog-thumb { height: 170px !important; }
  .blog-featured {
    padding: 20px !important;
    gap: 18px !important;
    grid-template-columns: 1fr !important;
  }
  .blog-featured h2 { font-size: 18px !important; }
  .blog-featured-visual-icon { width: 70px !important; height: 70px !important; }
  .newsletter-form { flex-direction: column !important; }
  .newsletter-form button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ============ BLOG POST ============ */
  .post-hero { padding: 100px 0 30px !important; }
  .post-body {
    font-size: 15px !important;
    line-height: 1.8 !important;
    padding: 26px 0 10px !important;
  }
  .post-body h2 { margin-top: 34px !important; }
  .post-author {
    flex-direction: column !important;
    text-align: center !important;
  }
  .post-nav { grid-template-columns: 1fr !important; }
  .post-share-buttons { flex-direction: column !important; }
  .post-share-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .post-toc { padding: 16px 18px !important; }
  .post-toc-list li a { font-size: 12.5px !important; }
  .related-posts-grid { grid-template-columns: 1fr !important; }

  /* ============ LEGAL ============ */
  .legal-intro {
    padding: 18px 20px !important;
    font-size: 12.5px !important;
  }
  .legal-section h2 { font-size: 17px !important; }
  .legal-section p,
  .legal-section ul li { font-size: 12.5px !important; }
  .legal-num {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }

  /* ============ MODAL ============ */
  .project-modal { padding: 12px !important; }
  .project-modal-box {
    max-height: 92vh !important;
    border-radius: var(--radius-lg) !important;
  }
  .pm-hero { height: 190px !important; }
  .pm-body { padding: 20px 22px !important; }
  .pm-body h2 { font-size: 20px !important; }
  .pm-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 13px !important;
  }

  /* ============ 404 / Search / Thank you / Offline ============ */
  .err-section, .thank-you-section, .offline-section {
    padding: 100px 16px 40px !important;
  }
  .err-code { font-size: clamp(70px, 20vw, 120px) !important; }
  .err-title { font-size: 22px !important; }
  .err-actions { flex-direction: column !important; }
  .err-actions .btn { width: 100% !important; }

  .search-page { padding: 96px 0 40px !important; }
  .search-input-wrap input { font-size: 14px !important; }

  .thank-you-icon, .offline-icon { width: 80px !important; height: 80px !important; }
  .thank-you-actions { flex-direction: column !important; }
  .thank-you-actions .btn { width: 100% !important; }

  /* ============ FLOATING + WA WIDGET ============ */
  .float-btn {
    width: 42px !important;
    height: 42px !important;
    right: 13px !important;
  }
  .float-top { bottom: 158px !important; }

  .wa-widget { bottom: 158px !important; right: 13px !important; }
  .wa-widget-toggle { width: 52px !important; height: 52px !important; }
  .wa-widget-toggle svg { width: 20px !important; height: 20px !important; }
  .wa-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }
  .wa-widget-box {
    bottom: 68px !important;
    right: 0 !important;
    width: 300px !important;
    max-width: calc(100vw - 32px) !important;
  }
  .wa-head-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
  }
  .wa-widget-body {
    padding: 13px !important;
    max-height: 360px !important;
  }
  .wa-bubble p { font-size: 12px !important; }
  .wa-tpl { font-size: 11.5px !important; padding: 9px 12px !important; }

  /* ============ CTA ============ */
  .cta-section { padding: 40px 0 !important; }
  .cta-banner {
    padding: 26px 22px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  .cta-content h2 { font-size: 18px !important; }
  .cta-content p { font-size: 12.5px !important; }
  .cta-buttons { width: 100% !important; }
  .cta-buttons .btn { flex: 1 !important; min-width: 110px !important; }

  /* ============ FOOTER — COMPACT ============ */
  .footer {
    padding: 22px 0 0 !important;
    margin-top: 20px !important;
  }
  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    text-align: center !important;
  }
  .footer-main .fm-col { display: none !important; }

  .footer-main .fm-brand,
  .footer-main .fm-contact {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .fm-logo { margin: 0 auto !important; }
  .fm-tagline {
    margin: 0 auto !important;
    text-align: center !important;
    max-width: 300px !important;
    font-size: 11px !important;
  }
  .fm-status { margin: 0 auto !important; }
  .fm-col-title {
    text-align: center !important;
    margin-bottom: 4px !important;
  }
  .fm-contact-item {
    justify-content: center !important;
    margin: 0 auto !important;
    font-size: 10.5px !important;
  }

  .footer-socials-row {
    padding: 10px 0 !important;
    gap: 5px !important;
    justify-content: center !important;
  }
  .fs-label {
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 4px 0 !important;
    font-size: 9px !important;
  }
  .fs-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }
  .fs-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .footer-bottom-bar {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    text-align: center !important;
  }
  .fbb-left, .fbb-right {
    justify-content: center !important;
    width: 100% !important;
  }
  .fbb-copy { font-size: 10px !important; }
  .fbb-links { font-size: 10px !important; }
  .fbb-top { font-size: 9.5px !important; padding: 4px 8px !important; }

  /* ============ CURSOR / GLOW DISABLE ============ */
  .cursor-dot, .cursor-ring { display: none !important; }
  .ambient-glow { display: none !important; }
}

/* =====================================================
   6. SMALL MOBILE — 480px and below
   ===================================================== */
@media (max-width: 480px) {
  .container { padding: 0 15px !important; }
  .section { padding: 44px 0 !important; }

  .hero { padding: 88px 0 42px !important; }
  .hero-title { font-size: 22px !important; }
  .hero-roles { font-size: 15px !important; }
  .hero-description { font-size: 12.5px !important; }

  .hero-buttons { flex-direction: column !important; width: 100% !important; }
  .hero-buttons .btn { width: 100% !important; }

  .hero-stats { gap: 11px !important; padding-top: 18px !important; }
  .stat-num { font-size: 17px !important; }
  .stat-suf { font-size: 13px !important; }
  .stat-label { font-size: 8.5px !important; }

  .logo-badge { width: 30px !important; height: 30px !important; font-size: 11px !important; }
  .logo-name { font-size: 11.5px !important; }
  .logo-role { font-size: 7.5px !important; }

  .lang-toggle {
    display: flex !important;
    min-width: 32px !important;
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
  .lang-current { font-size: 10px !important; }

  .theme-toggle { width: 44px !important; height: 24px !important; }
  .theme-icon { width: 16px !important; height: 16px !important; }
  .theme-icon svg { width: 10px !important; height: 10px !important; }

  .live-clock { padding: 4px 8px !important; font-size: 9.5px !important; gap: 4px !important; }
  .clock-text { font-size: 9.5px !important; }
  .clock-dot { width: 4px !important; height: 4px !important; }

  .page-hero { padding: 88px 0 40px !important; }
  .page-hero-title { font-size: 21px !important; }
  .page-hero-sub { font-size: 12.5px !important; }

  .section-title { font-size: 19px !important; }

  .stats-strip-grid { grid-template-columns: 1fr 1fr !important; gap: 11px !important; }
  .stat-strip-num { font-size: 20px !important; }
  .stat-strip-label { font-size: 8.5px !important; }

  .profile-footer h3 { font-size: 13px !important; }
  .profile-tags span { font-size: 9px !important; padding: 3px 8px !important; }

  .float-card { padding: 6px 9px !important; gap: 6px !important; }
  .float-icon { width: 20px !important; height: 20px !important; }
  .float-info strong { font-size: 9px !important; }
  .float-info span { font-size: 7.5px !important; }

  .about-badge { padding: 8px 10px !important; gap: 8px !important; }
  .about-badge-num { font-size: 16px !important; }
  .about-badge-text { font-size: 8.5px !important; }

  .service-home-card { padding: 16px !important; }
  .service-home-icon { width: 38px !important; height: 38px !important; }
  .service-home-card h3 { font-size: 13.5px !important; }

  .project-types-grid { grid-template-columns: 1fr !important; }
  .project-card-sm .project-thumb { height: 155px !important; }

  .online-services-grid { grid-template-columns: 1fr 1fr !important; }
  .online-service-card { padding: 11px 7px !important; }
  .osc-icon { width: 28px !important; height: 28px !important; }
  .online-service-card h4 { font-size: 11px !important; }

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

  .stats-big-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-big { padding: 16px 10px !important; }
  .stat-big-num { font-size: 22px !important; }

  .faq-icon { width: 20px !important; height: 20px !important; }
  .faq-icon svg { width: 11px !important; height: 11px !important; }

  .contact-form { padding: 16px !important; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .card-photo-wrap { width: 72px !important; height: 72px !important; }
  .card-name { font-size: 15px !important; }
  .qr-image { width: 100px !important; height: 100px !important; }

  .float-btn { width: 40px !important; height: 40px !important; right: 11px !important; }
  .float-top { bottom: 152px !important; }
  .wa-widget { bottom: 152px !important; right: 11px !important; }
  .wa-widget-toggle { width: 48px !important; height: 48px !important; }
  .wa-widget-box { width: 280px !important; }

  .project-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 13px !important;
  }

  .tv-chart-main .tradingview-widget-container { height: 260px !important; }
  .tv-chart-card .tradingview-widget-container { height: 240px !important; }

  .cta-banner { padding: 20px 18px !important; }
  .cta-content h2 { font-size: 17px !important; }
  .cta-buttons { flex-direction: column !important; }
  .cta-buttons .btn { width: 100% !important; }

  .form-alt { flex-direction: column !important; gap: 3px !important; }

  .timeline { padding-left: 20px !important; }
  .timeline-content { padding: 13px 15px !important; }

  .footer { padding: 22px 0 0 !important; }
  .fs-icon { width: 34px !important; height: 34px !important; }
  .fbb-copy { font-size: 10.5px !important; }
  .fbb-links { font-size: 10.5px !important; }

  .blog-thumb { height: 150px !important; }
  .blog-body { padding: 16px !important; }
  .blog-body h3 { font-size: 14px !important; }
}

/* =====================================================
   7. TABLET PORTRAIT — 769px to 1024px
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { padding: 0 26px !important; }

  .hero {
    padding: 100px 0 50px !important;
    min-height: auto !important;
  }
  .hero-container {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center !important;
  }
  .hero-visual {
    order: -1 !important;
    justify-content: center !important;
  }
  .hero-content {
    text-align: center !important;
    max-width: 100% !important;
  }
  .hero-badge { margin: 0 auto 20px !important; }
  .hero-title { font-size: clamp(30px, 4.5vw, 42px) !important; }
  .hero-roles { font-size: clamp(18px, 2.5vw, 24px) !important; }
  .hero-description {
    font-size: 14px !important;
    max-width: 600px !important;
    margin: 0 auto 24px !important;
  }
  .hero-buttons { justify-content: center !important; }
  .hero-stats { justify-content: center !important; padding-top: 24px !important; }
  .profile-card { max-width: 380px !important; margin: 0 auto !important; }
  .float-card-1 { top: 5% !important; left: 5% !important; }
  .float-card-2 { bottom: 8% !important; right: 5% !important; }

  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  .about-image-wrap {
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  .skills-grid,
  .skills-categories { grid-template-columns: 1fr !important; }

  .services-grid-home {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .ventures-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ventures-grid > .venture-card:last-child {
    grid-column: span 2 !important;
  }

  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .testimonials-grid .testimonial-card:last-child {
    grid-column: span 2 !important;
  }

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

  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .blog-featured {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .footer-main {
    grid-template-columns: 1.4fr 1fr 1fr !important;
    gap: 24px !important;
  }
  .footer-main .fm-contact {
    grid-column: span 3 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
  }
  .footer-main .fm-contact .fm-col-title {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .tv-charts-grid { grid-template-columns: 1fr !important; }
  .trading-story { grid-template-columns: repeat(2, 1fr) !important; }
  .featured-tool {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .company-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .company-grid.reverse { direction: ltr !important; }
  .case-study {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .values-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .connection-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-big-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .online-services-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .project-types-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .project-card-sm .project-thumb { height: 210px !important; }
}

/* =====================================================
   8. SMALL LAPTOP — 1025px to 1280px
   ===================================================== */
@media (min-width: 1025px) and (max-width: 1280px) {
  .container { max-width: 1080px; }
  .hero-container { gap: 40px !important; }
  .services-grid-home { grid-template-columns: repeat(4, 1fr) !important; }
  .online-services-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .footer-main {
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr !important;
    gap: 26px !important;
  }
}

/* =====================================================
   9. LARGE DESKTOP — 1441px to 1920px
   ===================================================== */
@media (min-width: 1441px) and (max-width: 1920px) {
  .container { max-width: 1280px; padding: 0 28px; }
  .nav-container { max-width: 1360px; }
}

/* =====================================================
   10. ULTRA WIDE — 1921px+
   ===================================================== */
@media (min-width: 1921px) {
  html { font-size: 15px; }
  .container { max-width: 1440px; padding: 0 32px; }
  .nav-container { max-width: 1520px; }
  .hero-container { gap: 60px !important; }
  .profile-card { max-width: 420px !important; }
}

/* =====================================================
   11. CHROME MOBILE DESKTOP MODE FIX
   (Viewport ~980px with touch device)
   ===================================================== */
@media (min-width: 769px) and (max-width: 1100px) and (any-pointer: coarse) {
  .nav-container { padding: 10px 16px !important; }

  /* Search hidden on touch tablet */
  .nav-search-btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
  }

  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 320px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--bg-2) !important;
    border-left: 1px solid var(--border) !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 72px 20px 24px !important;
    gap: 4px !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1050 !important;
    overflow-y: auto !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
  }

  .nav-menu.open { right: 0 !important; }
  .nav-menu-search { display: block !important; }

  .nav-link {
    padding: 13px 16px !important;
    font-size: 14px !important;
    text-align: left !important;
    border-radius: 10px !important;
  }

  .nav-link.active {
    background: var(--gradient) !important;
    color: white !important;
  }

  .nav-cta {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .nav-toggle { display: flex !important; }

  .hero-container { grid-template-columns: 1fr !important; gap: 40px !important; }
  .hero-visual { order: -1 !important; }
  .hero { padding: 100px 0 56px !important; min-height: auto !important; }
  .hero-title { font-size: clamp(28px, 5vw, 38px) !important; }
  .profile-card { max-width: 380px !important; }
  .float-card-1 { top: 4% !important; left: 0 !important; }
  .float-card-2 { bottom: 6% !important; right: 0 !important; }

  .services-grid-home { grid-template-columns: repeat(2, 1fr) !important; }
  .ventures-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ventures-grid > .venture-card:last-child { grid-column: span 2 !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 34px !important; }
  .about-image-wrap { max-width: 400px !important; margin: 0 auto !important; }
  .skills-categories { grid-template-columns: 1fr !important; }
  .projects-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .online-services-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .project-types-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .case-study { grid-template-columns: 1fr !important; gap: 30px !important; }
  .company-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .company-grid.reverse { direction: ltr !important; }
  .featured-tool { grid-template-columns: 1fr !important; gap: 30px !important; }
  .tv-charts-grid { grid-template-columns: 1fr !important; }
  .trading-story { grid-template-columns: 1fr !important; }
  .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .values-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .connection-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .testimonials-grid .testimonial-card:last-child { grid-column: span 2 !important; }
  .stats-big-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-strip-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-cards-grid { grid-template-columns: 1fr 1fr !important; }
  .biz-card-full-inner { position: static !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-featured { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-main { grid-template-columns: 1fr 1fr !important; gap: 22px !important; }

  .lang-toggle { display: flex !important; }
}

/* =====================================================
   12. TABLET DESKTOP MODE — 1101px to 1300px with touch
   ===================================================== */
@media (min-width: 1101px) and (max-width: 1300px) and (any-pointer: coarse) {
  .services-grid-home { grid-template-columns: repeat(3, 1fr) !important; }
  .online-services-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .project-types-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ventures-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =====================================================
   13. LANDSCAPE MOBILE
   ===================================================== */
@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    min-height: auto !important;
    padding: 88px 0 40px !important;
  }
  .hero-container {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .hero-visual { order: -1 !important; }
  .profile-card { max-width: 320px !important; }
  .nav-menu { padding-top: 62px !important; }
  .wa-widget-body { max-height: 300px !important; }
}

/* =====================================================
   14. VERY SHORT LANDSCAPE
   ===================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 74px 0 30px !important; min-height: auto !important; }
  .section { padding: 34px 0 !important; }
  .navbar { padding: 6px 0 !important; }
  .nav-container { padding: 8px 16px !important; }
}

/* =====================================================
   15. VERY TALL PHONES (20:9, 21:9)
   ===================================================== */
@media (max-width: 480px) and (min-height: 800px) {
  .hero { min-height: auto !important; padding: 100px 0 60px !important; }
  .section { padding: 52px 0 !important; }
}

/* =====================================================
   16. iOS SAFE AREA
   ===================================================== */
@supports (padding: max(0px)) {
  .footer-main {
    padding-left: max(0px, env(safe-area-inset-left)) !important;
    padding-right: max(0px, env(safe-area-inset-right)) !important;
  }
  .float-btn {
    right: max(18px, env(safe-area-inset-right)) !important;
  }
  .float-top {
    bottom: max(158px, calc(env(safe-area-inset-bottom) + 158px)) !important;
  }
  .wa-widget {
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(158px, calc(env(safe-area-inset-bottom) + 158px)) !important;
  }

  @media (max-width: 768px) {
    .float-btn { right: max(13px, env(safe-area-inset-right)) !important; }
    .float-top { bottom: max(158px, calc(env(safe-area-inset-bottom) + 158px)) !important; }
    .wa-widget {
      right: max(13px, env(safe-area-inset-right)) !important;
      bottom: max(158px, calc(env(safe-area-inset-bottom) + 158px)) !important;
    }
  }

  /* Desktop safe area */
  @media (min-width: 901px) {
    .float-top { bottom: 74px !important; }
    .wa-widget { bottom: 18px !important; }
  }
}

/* =====================================================
   17. MOBILE NAV SPACING (bottom padding)
   ===================================================== */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .footer {
    padding-bottom: 8px !important;
  }
}

@media (min-width: 901px) {
  body {
    padding-bottom: 0 !important;
  }
}

/* =====================================================
   18. LIGHT MODE MOBILE FIXES
   ===================================================== */
@media (max-width: 768px) {
  [data-theme="light"] .nav-menu {
    background: var(--card) !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.15) !important;
  }
  [data-theme="light"] .live-clock {
    background: var(--gradient-gold) !important;
    color: #ffffff !important;
    border-color: rgba(217, 119, 6, 0.6) !important;
  }
  [data-theme="light"] .clock-dot {
    background: #ffffff !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9) !important;
  }
  [data-theme="light"] .venture-badge,
  [data-theme="light"] .thumb-badge,
  [data-theme="light"] .blog-cat-badge {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--primary) !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
  }
}

/* =====================================================
   19. TOUCH DEVICES — Remove hover transforms
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
  .profile-card:hover,
  .venture-card:hover,
  .project-card:hover,
  .service-home-card:hover,
  .testimonial-card:hover,
  .value-card:hover,
  .skill-card:hover,
  .contact-big-card:hover,
  .connection-card:hover,
  .project-type-card:hover,
  .service-item:hover,
  .online-service-card:hover,
  .process-step:hover,
  .timeline-content:hover,
  .quick-nav-card:hover,
  .stat-big:hover,
  .blog-card:hover,
  .related-post-card:hover,
  .search-result-item:hover {
    transform: none !important;
  }
  .project-card:hover .project-img,
  .venture-card:hover .venture-img {
    transform: none !important;
  }
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-whatsapp:hover,
  .project-btn:hover,
  .float-top:hover,
  .wa-widget-toggle:hover,
  .fs-icon:hover,
  .client-logo:hover {
    transform: none !important;
  }
  .cursor-dot, .cursor-ring, .ambient-glow { display: none !important; }
  html { cursor: auto !important; }
}

/* =====================================================
   20. ACCESSIBILITY — Minimum touch target
   ===================================================== */
@media (any-pointer: coarse) {
  .nav-link,
  .filter-btn,
  .blog-cat-filter .filter-btn,
  .project-btn,
  .fbb-top,
  .cmd-item,
  .wa-tpl,
  .err-suggest-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-link,
  .filter-btn,
  .blog-cat-filter .filter-btn {
    min-height: 40px;
  }
  .fs-icon {
    min-width: 40px;
    min-height: 40px;
  }
}

/* =====================================================
   21. 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;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .preloader { display: none !important; }
  .cursor-dot, .cursor-ring, .ambient-glow { display: none !important; }
  .marquee-track, .client-logos-marquee { animation: none !important; }
  .float-card { animation: none !important; }
  .live-clock { animation: none !important; }
  .wa-widget-toggle { animation: none !important; }
  .card-photo-ring { animation: none !important; }
}

/* =====================================================
   22. FORCE HAMBURGER VISIBILITY — ULTIMATE FIX
   ===================================================== */
@media screen and (max-width: 1300px) {
  .nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (any-pointer: coarse) and (max-width: 1300px) {
  .nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media screen and (max-width: 600px) {
  .nav-toggle { display: flex !important; }
  .lang-toggle { display: flex !important; }
  .theme-toggle { display: flex !important; }
  .live-clock { display: flex !important; }
  /* Search button hidden on small mobile */
  .nav-search-btn {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
  }
}

/* =====================================================
   23. ✅ GUARANTEED SEARCH BUTTON HIDE
   সব mobile breakpoint এ search button hide
   Desktop এ থাকবে (উপরে rule দেখুন)
   ===================================================== */
@media screen and (max-width: 1300px) and (any-pointer: coarse) {
  .nav-search-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
  }
}

/* Double safety: hide on any mobile width */
@media screen and (max-width: 1100px) {
  .nav-search-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
  }
}


/* ============================================
   FIX v12.3 — Float-top + WhatsApp separate
   ============================================ */

@media (max-width: 900px) {
  /* WhatsApp widget — নিচের দিকে */
  .wa-widget {
    right: 16px !important;
    bottom: 200px !important;
  }

  /* Float-top — আরো উপরে */
  .float-btn.float-top {
    right: 16px !important;
    bottom: 264px !important;
  }

  /* WhatsApp box — open হলে */
  .wa-widget-box {
    bottom: 76px !important;
    right: 0 !important;
  }
}

/* Extra small (≤480px) */
@media (max-width: 480px) {
  .wa-widget {
    right: 13px !important;
    bottom: 190px !important;
  }

  .float-btn.float-top {
    right: 13px !important;
    bottom: 252px !important;
  }
}

/* Extra extra small (≤360px) */
@media (max-width: 360px) {
  .wa-widget {
    right: 11px !important;
    bottom: 184px !important;
  }

  .float-btn.float-top {
    right: 11px !important;
    bottom: 244px !important;
  }
}

/* iOS Safe Area */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .wa-widget {
      right: max(16px, env(safe-area-inset-right)) !important;
      bottom: max(200px, calc(env(safe-area-inset-bottom) + 200px)) !important;
    }
    .float-btn.float-top {
      right: max(16px, env(safe-area-inset-right)) !important;
      bottom: max(264px, calc(env(safe-area-inset-bottom) + 264px)) !important;
    }
  }
}

/* =====================================================
   END — responsive.css v12.1
   ===================================================== */


   /* ============================================================
   FINAL FIX v12.5 — Adjust button positions
   MUST BE LAST IN FILE
   ============================================================ */

/* ===== Mobile (≤900px) ===== */
@media screen and (max-width: 900px) {
  .wa-widget {
    bottom: 90px !important;
    right: 18px !important;
    z-index: 998 !important;
  }

  .float-btn.float-top,
  button.float-btn.float-top {
    bottom: 156px !important;
    right: 18px !important;
    z-index: 999 !important;
  }

  .wa-widget-box {
    bottom: 76px !important;
  }
}

/* ===== Small Mobile (≤480px) ===== */
@media screen and (max-width: 480px) {
  .wa-widget {
    bottom: 84px !important;
    right: 15px !important;
  }

  .float-btn.float-top,
  button.float-btn.float-top {
    bottom: 146px !important;
    right: 15px !important;
  }
}

/* ===== Tiny Mobile (≤360px) ===== */
@media screen and (max-width: 360px) {
  .wa-widget {
    bottom: 80px !important;
    right: 13px !important;
  }

  .float-btn.float-top,
  button.float-btn.float-top {
    bottom: 138px !important;
    right: 13px !important;
  }
}

/* ===== iOS Safe Area ===== */
@supports (padding: max(0px)) {
  @media screen and (max-width: 900px) {
    .wa-widget {
      right: max(18px, env(safe-area-inset-right)) !important;
      bottom: max(90px, calc(env(safe-area-inset-bottom) + 90px)) !important;
    }
    .float-btn.float-top,
    button.float-btn.float-top {
      right: max(18px, env(safe-area-inset-right)) !important;
      bottom: max(156px, calc(env(safe-area-inset-bottom) + 156px)) !important;
    }
  }
}

/* ===== Force hidden by default (scroll-triggered) ===== */
.float-btn.float-top:not(.show) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.float-btn.float-top.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}