/* =======================================================
   MateGrowth — Mobile Polish Stylesheet
   Load this AFTER mb-style.css. Makes everything beautiful
   and comfortable on phones & tablets.
   ======================================================= */

/* ---- Global niceties (all sizes) ---- */
*{ -webkit-tap-highlight-color: rgba(190,50,34,.15); }
html,body{ overflow-x:hidden; }              /* kill sideways scroll */
img,svg,video{ max-width:100%; height:auto; }
a,button{ touch-action:manipulation; }        /* snappier taps */
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; border-radius:6px; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================
   LARGE TABLET / SMALL-MEDIUM LAPTOP  (1025px – 1320px)
   keep the desktop nav from feeling cramped
   ========================================================= */
@media (min-width:1025px) and (max-width:1320px){
  .topbar-inner{ gap:12px; }
  .tb-left{ gap:14px; font-size:.8rem; }
  .tb-links{ gap:10px; }
  .tb-links a{ font-size:.85rem; }
  .tb-soc{ gap:8px; }
  .audit-btn{ padding:7px 14px; font-size:.76rem; }
  .nav-links{ gap:12px; }
  .nav-links > a{ font-size:.85rem; }
  .wa-chip{ padding:6px 11px; }
  .wa-chip b{ font-size:.74rem; }
  .wa-chip span{ font-size:.68rem; }
}
@media (min-width:1025px) and (max-width:1180px){
  .tb-links{ display:none; }
}

/* =========================================================
   TABLET  (<= 1024px)
   ========================================================= */
@media (max-width:1024px){
  .wrap{ padding:0 22px; }
  .section{ padding:64px 0; }
  h1{ line-height:1.12; }
  .badges{ gap:16px; }
}

/* =========================================================
   PHONE / SMALL TABLET  (<= 1024px)
   ========================================================= */
@media (max-width:1024px){

  .wrap{ padding:0 18px; }
  .section{ padding:52px 0; }
  .sec-top::before,.sec-top::after{ width:24px; }

  /* ---------- Top bar: tidy, single row, scrollable ---------- */
  .topbar-inner{ height:auto; padding:9px 0; gap:8px; justify-content:center; }
  .tb-left{ gap:14px; font-size:.8rem; flex-wrap:wrap; justify-content:center; }
  .tb-right{ gap:10px; }
  .tb-links{ display:none; }
  .audit-btn{ padding:8px 14px; font-size:.78rem; }

  /* ---------- Nav bar ---------- */
  .site-header{ position:sticky; top:0; z-index:120; background:#fff; }
  .nav-inner{ height:64px; }
  .nav{ position:relative; top:auto; z-index:90; background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .logo{ font-size:1.25rem; }
  .logo .mb{ width:34px; height:34px; }
  .nav-burger{
    display:grid !important; width:46px; height:46px; border-radius:10px;
    box-shadow:0 8px 20px -10px rgba(45,40,87,.5); position:relative; z-index:78;
  }

  /* ---------- Mobile slide-in menu (beautiful drawer) ---------- */
  .nav-links{
    display:flex !important;
    position:fixed !important; top:0; right:0; left:auto; bottom:0;
    width:min(86vw,360px); height:100dvh; max-height:100dvh;
    background:linear-gradient(180deg,#fff,#fbfbfe); flex-direction:column !important; align-items:stretch;
    gap:4px; padding:84px 18px 28px;
    border-left:1px solid var(--line); border-bottom:0;
    transform:translateX(105%); transition:transform .34s cubic-bezier(.22,1,.36,1);
    box-shadow:-24px 0 60px -30px rgba(45,40,87,.5);
    overflow-y:auto; overscroll-behavior:contain;
    z-index:76;
  }
  .nav-links.open{ transform:translateX(0) !important; }

  /* dim backdrop when menu open (no blur) */
  body.menu-open::after{
    content:""; position:fixed; inset:0; background:transparent;
    z-index:75;
  }
  @keyframes fadeBg{ from{opacity:0} to{opacity:1} }

  /* top-level links: big, tappable, divided */
  .nav-links > a,
  .has-drop{ width:100%; }
  .nav-links > a,
  .has-drop > a{
    font-size:1.02rem; font-weight:600; color:var(--indigo);
    padding:15px 12px; border-radius:8px; width:100%;
    min-height:50px; display:flex !important; align-items:center;
    justify-content:flex-start;
  }
  .has-drop > a{ justify-content:space-between; }
  .nav-links > a:active,
  .has-drop > a:active{ background:var(--bg-soft); }
  .has-drop{ border-bottom:1px solid var(--line); }
  .has-drop:last-of-type{ border-bottom:0; }

  .nav-links > a[href="about.html"],
  .nav-links > a[href="contact.html"]{ border-bottom:1px solid var(--line); }

  /* caret pill with CSS chevron (reliable everywhere) */
  .has-drop > a .caret{
    margin-left:auto; width:28px; height:28px; border-radius:50%;
    background:var(--bg-soft); color:transparent; font-size:0;
    display:grid; place-items:center; flex-shrink:0;
    transition:transform .28s, background .2s;
    position:relative;
  }
  .has-drop > a .caret::after{
    content:""; width:8px; height:8px;
    border-right:2px solid var(--red); border-bottom:2px solid var(--red);
    transform:rotate(45deg) translate(-1px,-1px);
    transition:border-color .2s;
  }
  .has-drop.open > a .caret{ transform:rotate(180deg); background:var(--red); }
  .has-drop.open > a .caret::after{ border-color:#fff; }

  /* nested drop/flyout = smooth accordion */
  .drop, .flyout{
    position:static !important; opacity:1 !important; visibility:visible !important; transform:none !important;
    box-shadow:none; border:0; border-radius:0; padding:0;
    margin:0; min-width:0;
    max-height:0; overflow:hidden;
    transition:max-height .34s ease;
    background:transparent;
  }
  .has-drop.open > .drop{ max-height:1200px; }
  .has-flyout.open > .flyout{ max-height:800px; }

  .drop a, .flyout a{
    padding:12px 14px; font-size:.92rem; border-radius:10px;
    color:var(--muted); margin:10px 0px 10px 0px;
    border-left:2px solid var(--line); min-height:auto;
  }
  .drop a:active, .flyout a:active{ background:var(--bg-soft); color:var(--red); }
  .has-flyout{ width:100%; }
  .has-flyout > a{ color:var(--indigo); font-weight:600; margin-left:10px; border-left:2px solid var(--red); justify-content:space-between; }
  .has-flyout > a .arr{
    width:24px; height:24px; border-radius:50%; background:var(--bg-soft);
    color:transparent; font-size:0; display:grid; place-items:center;
    flex-shrink:0; transition:transform .28s, background .2s; position:relative;
  }
  .has-flyout > a .arr::after{
    content:""; width:7px; height:7px;
    border-right:2px solid var(--red); border-bottom:2px solid var(--red);
    transform:rotate(45deg) translate(-1px,-1px);
    transition:border-color .2s;
  }
  .has-flyout.open > a .arr{ transform:rotate(180deg); background:var(--red); }
  .has-flyout.open > a .arr::after{ border-color:#fff; }
  .drop > *, .flyout > *{ animation:none !important; }     /* no stagger on mobile */
  .drop.mega{ min-width:0; }

  /* WhatsApp chip -> full-width button at bottom of menu */
  .wa-chip{
    display:flex !important; width:100%; margin-top:14px; justify-content:center;
    background:var(--teal); border:0; border-radius:8px; padding:13px;
  }
  .wa-chip .ic{ background:#fff; color:var(--teal); }
  .wa-chip b, .wa-chip span{ color:#fff; }

  /* ---------- Hero ---------- */
  .hero{ padding:42px 0 54px; }
  .hero h1{ font-size:clamp(1.9rem,8.5vw,2.7rem); }
  .hero .top{ font-size:clamp(1.2rem,5vw,1.7rem); }
  .hero .intro{ font-size:.98rem; }
  .badges{ gap:12px; margin:28px 0 26px; }
  .badge-hex{ width:calc(50% - 8px); max-width:155px; height:92px; }

  /* split OR buttons stack neatly & go full width */
  .or-btn{ width:100%; flex-direction:column; border-radius:8px; gap:2px; }
  .or-btn a{ width:100%; justify-content:center; padding:15px; }
  .or-btn .or{ margin:-12px auto; }
  .btn{ padding:14px 22px; }       /* comfy tap target */

  /* ---------- Two-column blocks stack ---------- */
  .two-col, .cr-grid, .vid-grid, .ready-inner, .hire-grid,
  .port-grid, .fb-grid, .hub, .tabfeat, .ind-wrap,
  .contact-grid, .pd-hero-grid, .offer-wrap, .why-grid, .enq-grid{
    grid-template-columns:1fr; gap:30px;
  }

  /* heading sizes a touch smaller */
  .sec-h{ font-size:clamp(1.5rem,6.5vw,2.1rem); }
  .sec-top{ font-size:clamp(1.15rem,4.6vw,1.5rem); }
  .sec-sub{ font-size:.96rem; }

  /* ---------- Growth-engine images ---------- */
  .ge-imgs{ max-width:380px; margin:0 auto; }

  /* ---------- Stats ---------- */
  .cr-stats{ gap:22px; justify-content:space-between; }
  .cr-stats .num{ font-size:1.6rem; }
  .cr-left h2{ font-size:clamp(1.8rem,8vw,2.6rem); }

  /* form card breathes */
  .form-card{ padding:24px; border-radius:8px; }
  .fc-row{ grid-template-columns:1fr; gap:0; }
  .captcha{ flex-wrap:wrap; }
  .fc-row{ grid-template-columns:1fr; gap:0; }
  .captcha{ flex-wrap:wrap; }
  .proposal-modal{ padding:14px; align-items:flex-start; overflow:auto; }
  .proposal-dialog{ grid-template-columns:1fr; max-height:none; margin:18px 0; }
  .proposal-art{ min-height:260px; padding:28px 22px; }
  .proposal-art h2{ font-size:1.55rem; }
  .proposal-art p{ font-size:.92rem; }
  .proposal-visual{ min-height:136px; }
  .pv-card-one{ width:104px; height:76px; }
  .pv-card-two{ width:126px; height:86px; right:0; bottom:42px; }
  .pv-card-three{ width:136px; height:62px; left:48px; }
  .proposal-form{ padding:28px 22px; }
  .proposal-close{ right:10px; top:10px; }

   /* ---------- Logos grid ---------- */
  .logos-grid{ grid-template-columns:1fr 1fr; gap:14px; }

  /* ---------- HUB (digital solutions) ---------- */
  .hub{ display:flex; flex-direction:column; gap:16px; margin-top:34px; }
  .hub-center{ order:-1; width:200px; height:200px; margin:0 auto 8px; }
  .hub-col.right .hub-item{
    flex-direction:row; text-align:left; border-radius:8px;
  }
  .hub-item{ padding:14px 18px 14px 14px; border-radius:8px; }
  .hub-bar{ gap:8px; margin-top:30px; }
  .hub-bar .pill{ padding:11px 16px; font-size:.85rem; }

  /* ---------- Low-cost feature tabs ---------- */
  .tabfeat{ display:flex; flex-direction:column; gap:16px; }
  .tabfeat-btns{ grid-template-columns:1fr 1fr; gap:10px; }
  .tf-btn{ padding:16px 10px; font-size:.85rem; }
  .tf-panel{ flex-direction:column; }
  .tf-img{ width:100%; aspect-ratio:16/9; }

  /* ---------- Video phone ---------- */
  .phone{ width:200px; }

  /* ---------- Testimonials ---------- */
  .testi-head{ display:block; margin-bottom:30px; }
  .testi-head .sec-top,
  .testi-head .sec-h,
  .testi-head .sec-sub{ text-align:center; justify-content:center; }
  .testi-head .btn{ width:100%; justify-content:center; margin-top:22px; }
  .testi-grid{ gap:16px; }
  .testi-card{ flex:0 0 100%; }
  .testi-card{ padding:24px; }
  .testi-card.featured{ transform:none; }
  .testi-strip{ grid-template-columns:1fr 1fr; gap:12px; }

  /* ---------- Roadmap ---------- */
  .road{ grid-template-columns:1fr; gap:34px; margin-top:38px; }
  .road-step{ margin-top:30px !important; }

  /* ---------- Services grid ---------- */
  .serv-grid{ grid-template-columns:1fr 1fr; border-radius:8px; gap:14px; }
  .serv-card{ padding:20px 16px; }
  .serv-card h4{ min-height:auto; font-size:.95rem; }

  /* ---------- Hire checklist images ---------- */
  .hire-imgs .im2{ margin:0; }

  /* ---------- Portfolio devices ---------- */
  .port-devices{ transform:scale(.9); transform-origin:center; }
  .port-tab{ width:240px; }

  /* ---------- Industries vertical tabs -> stacked ---------- */
  .ind-wrap{ grid-template-columns:1fr; }
  .ind-side{ display:flex; gap:8px; overflow-x:auto; padding:14px; }
  .ind-tab{ flex:0 0 auto; margin-bottom:0; white-space:nowrap; padding:12px 16px; }
  .ind-panel.on{ grid-template-columns:1fr; }

  /* ---------- Product-detail page ---------- */
  .pd-bar-inner{ flex-direction:column; text-align:center; gap:14px; }
  .pd-bar h3{ font-size:1rem; }
  .pd-hero{ padding:44px 0; }
  .pd-hero .person{ max-width:260px; margin:0 auto; font-size:2.6rem; }
  .mid-cta{ padding:32px 22px; }
  .offer-wrap{ display:flex; flex-direction:column; }
  .offer-tab{ padding:15px 16px; }
  .offer-body{ padding:26px; }
  .guar-grid{ grid-template-columns:1fr; }
  .proc{ grid-template-columns:1fr; gap:32px; }
  .proc-step{ margin-top:30px; }
  .why-grid{ grid-template-columns:1fr; }
  .purpose-list li{ padding:15px 18px; font-size:.92rem; }

  /* ---------- Inner page hero ---------- */
  .page-hero{ padding:54px 0 48px; }
  .page-hero h1{ font-size:clamp(1.9rem,8vw,2.7rem); }
  .page-hero p{ font-size:.98rem; }

  /* ---------- Counters band ---------- */
  .cband{ padding:42px 0; }
  .cband-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .cband .num{ font-size:2.1rem; }

  /* ---------- Values / pricing / guarantee ---------- */
  .val-grid{ grid-template-columns:1fr; }
  .price-grid{ grid-template-columns:1fr; }

  /* ---------- Footer ---------- */
  .footer{ padding:48px 0 0; }
  .foot-top{ grid-template-columns:1fr 1fr; gap:26px; }
  .foot-mid{ grid-template-columns:1fr; gap:24px; text-align:left; }
  .foot-addr{ flex-direction:row; }
  .foot-bot{ flex-direction:column; text-align:center; gap:10px; }

  /* ---------- Blog listing + details ---------- */
  .blog-list{ grid-template-columns:1fr 1fr; gap:18px; }
  .blog-toolbar{ flex-direction:column; align-items:stretch; }
  .blog-search{ min-width:0; }
  .article-wrap{ grid-template-columns:1fr; gap:36px; }
  .a-side{ position:static; }
  .article-body h2{ font-size:1.4rem; }
  .author-box{ flex-direction:column; text-align:center; }

  /* ---------- Proven Results (stack: screenshot top, accordion below) ---------- */
  .proven-grid{ grid-template-columns:1fr; gap:60px; }
  .proven-visual{ max-width:440px; margin:0 auto; width:100%; }
  .logo-float{ width:150px; right:0; bottom:-30px; padding:16px; }
  .logo-float .mark{ font-size:1.2rem; }
  .logo-float .sub{ font-size:.74rem; }
  .proven-actions{ margin-top:54px; justify-content:center; }
  .btn-gradient{ flex:1 1 100%; text-align:center; }
  .btn-nav{ flex:1; justify-content:center; }
  .proven-meet{ text-align:center; }
  .proven-h{ font-size:clamp(1.5rem,6vw,2rem); }
  .acc-head{ padding:16px 16px; }
  .acc-head .t{ font-size:.98rem; }
  .acc-inner{ padding:0 16px 18px; }
  .rank-table thead th{ font-size:.74rem; padding:9px 10px; }
  .rank-table td{ padding:10px 10px; font-size:.84rem; }

  /* ---------- Services carousel (2 per view on tablet) ---------- */
  .svc-slide{ flex:0 0 calc((100% - 24px)/2); }
  .svc-card{ padding:28px 22px; }
  .svc-card .ic{ width:56px; height:56px; font-size:1.5rem; }

  /* ---------- Proven slider on mobile ---------- */
  .pv-controls{ margin-top:24px; }

  /* ---------- Floating WhatsApp ---------- */
  .wa-float{ width:52px; height:52px; bottom:18px; right:18px; font-size:1.4rem; }
}

/* =========================================================
   SMALL PHONES  (<= 480px)
   ========================================================= */
@media (max-width:480px){
  .wrap{ padding:0 16px; }
  .section{ padding:44px 0; }

  .hero h1{ font-size:clamp(1.7rem,9vw,2.2rem); }
  .badge-hex{ width:calc(50% - 6px); height:88px; }
  .badge-hex .mid{ font-size:.72rem; padding:2px 8px; }

  .sec-h{ font-size:clamp(1.35rem,7.5vw,1.8rem); }

  /* stat numbers don't overflow */
  .cr-stats{ gap:16px; }
  .cr-stats > div{ flex:1 1 40%; }
  .cr-stats .num{ font-size:1.4rem; }

  .logos-grid{ grid-template-columns:1fr 1fr; }
  .blog-list{ grid-template-columns:1fr; }
  .tabfeat-btns{ grid-template-columns:1fr; }
  .svc-slide{ flex:0 0 100%; }
  .proven-actions{ flex-wrap:wrap; }
  .btn-nav{ flex:1 1 calc(50% - 6px); }
  .rank-table thead th:nth-child(3){ display:none; }
  .rank-table td:nth-child(3){ display:none; }
  .serv-grid{ grid-template-columns:1fr; }
  .cband-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }

  .hub-center{ width:180px; height:180px; }
  .hub-center b{ font-size:1.2rem; }

  .port-devices{ transform:scale(.78); }

  /* headings & buttons never cramped */
  .btn, .or-btn a{ font-size:.92rem; }
  .form-card{ padding:20px; }
  .proposal-art{ min-height:230px; }
  .proposal-form{ padding:24px 18px; }
  .proposal-form h3{ font-size:1.35rem; }
  .hero .top{font-size:.88rem;padding:7px 12px}
  .blog-toolbar{align-items:stretch}
  .blog-search{width:100%;min-width:0}

/* =========================================================
   Tiny phones (<= 360px) — last safety net
   ========================================================= */
@media (max-width:360px){
  .logos-grid{ grid-template-columns:1fr; }
  .cr-stats > div{ flex:1 1 100%; }
  .badges{ gap:10px; }
}