/* =====================================================================
   Diskwala API — MOBILE APP STYLESHEET (≤ 768px)
   Separate mobile CSS giving an app-like experience:
   bottom tab bar, app header, full-width cards, sheet menus, FABs.
   Loaded AFTER style.css — overrides desktop layout for phones.
   Powered By AK REVOLUTION DEVELOPMENT
   ===================================================================== */

@media (max-width:768px){

  /* ---------- Base app shell ---------- */
  body{
    padding-bottom:calc(74px + env(safe-area-inset-bottom));
    font-size:15px;
    -webkit-tap-highlight-color:transparent;
  }
  .container{width:100%;padding-inline:18px}
  .container-narrow{width:100%;padding-inline:18px}
  .section{padding:64px 0}
  .section-head{margin-bottom:36px}
  .section-head h2{font-size:1.7rem;margin:12px 0 10px}
  .section-head p{font-size:.95rem}

  /* ---------- App header (sticky, fixed height) ---------- */
  :root{--nav-h:60px}
  .navbar{height:calc(var(--nav-h) + env(safe-area-inset-top))}
  .navbar.scrolled{background:color-mix(in srgb,var(--bg) 90%,transparent)}
  .nav-inner{height:var(--nav-h);padding-inline:14px;gap:10px}
  .logo{font-size:1.08rem;gap:8px}
  .logo-mark{width:34px;height:34px;border-radius:10px;font-size:.95rem}
  .nav-actions{gap:8px}
  .theme-toggle{width:40px;height:40px;border-radius:11px;font-size:1rem}

  /* Burger shown; desktop links become a bottom sheet */
  .burger{display:flex}
  .nav-links{
    position:fixed;left:0;right:0;top:auto;bottom:0;z-index:1200;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--bg2);
    border-top:1px solid var(--border2);
    border-radius:24px 24px 0 0;
    padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(110%);
    visibility:hidden;pointer-events:none;
    transition:transform .45s var(--ease),visibility 0s .45s;
    box-shadow:0 -20px 60px -20px rgba(0,0,0,.5);
    max-height:78vh;overflow-y:auto;
  }
  .nav-links.open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .45s var(--ease),visibility 0s 0s}
  .nav-links a{
    padding:16px;border-radius:14px;font-size:1rem;font-weight:600;
    display:flex;align-items:center;gap:14px;color:var(--text2);
  }
  .nav-links a:hover{color:var(--text);background:var(--grad-soft)}
  .nav-links a.active{color:var(--green-500);background:var(--grad-soft)}
  .nav-links a::before{
    content:"";width:8px;height:8px;border-radius:50%;background:var(--green-500);opacity:0;
  }
  .nav-links a.active::before{opacity:1}

  /* Sheet handle */
  .nav-links::before{
    content:"";display:block;width:44px;height:5px;border-radius:5px;background:var(--border2);
    margin:0 auto 14px;
  }

  /* ---------- Bottom tab bar (app-like) ---------- */
  .mobile-tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:1100;
    display:flex;align-items:center;justify-content:space-around;
    background:color-mix(in srgb,var(--bg2) 92%,transparent);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--border2);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-tabs a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 0;border-radius:12px;color:var(--text3);
    font-size:.66rem;font-weight:600;transition:color .2s,transform .2s;
  }
  .mobile-tabs a .tab-ico{font-size:1.3rem;line-height:1}
  .mobile-tabs a.on{color:var(--green-400)}
  .mobile-tabs a:active{transform:scale(.92)}
  .mobile-tabs .tab-cta{
    width:46px;height:46px;border-radius:16px;background:var(--grad);
    display:grid;place-items:center;font-size:1.35rem;color:#032B13;
    box-shadow:var(--shadow-glow);margin-top:-24px;
    border:4px solid var(--bg);
  }

  /* ---------- Hero (app-style) ---------- */
  .hero{min-height:auto;padding:calc(var(--nav-h) + env(safe-area-inset-top) + 22px) 0 40px}
  .hero-badge{font-size:.74rem;padding:8px 14px;margin-bottom:20px}
  .hero h1{font-size:2rem;letter-spacing:-.02em;margin-bottom:16px}
  .hero p.lead{font-size:1rem;margin-bottom:26px}
  .hero-cta{margin-bottom:28px;gap:12px}
  .hero-cta .btn{flex:1;padding:15px 12px;font-size:.9rem}
  .hero-trust{gap:10px 16px;margin-bottom:28px}
  .trust-item{font-size:.8rem}
  .hero-stats{width:100%}
  .stat{padding:0 22px}
  .stat .num{font-size:1.4rem}
  .stat .lbl{font-size:.72rem}

  /* ---------- Marquee ---------- */
  .marquee{padding:16px 0}
  .marquee-track{gap:36px}

  /* ---------- Cards full-width, app feel ---------- */
  .features-grid{gap:14px}
  .features-grid>*{flex:0 1 100%;min-width:0}
  .feature-card{padding:26px 22px;border-radius:18px}
  .feature-card h3{font-size:1.05rem}
  .feature-icon{width:50px;height:50px;font-size:1.35rem}

  /* ---------- Pricing ---------- */
  .plans-grid{grid-template-columns:1fr;gap:16px}
  .plan-card{padding:28px 22px;border-radius:22px}
  .plan-card.featured{transform:none}
  .plan-card.featured:hover{transform:none}
  .plan-price{font-size:2.2rem}
  .plan-features{gap:8px}
  .plan-features li{font-size:.86rem}

  /* ---------- Steps ---------- */
  .steps{grid-template-columns:1fr;gap:14px;max-width:none}
  .step{padding:30px 22px}
  .step-num{width:58px;height:58px;font-size:1.3rem}

  /* ---------- API docs ---------- */
  .api-cards{gap:14px}
  .api-cards>*{flex:0 1 100%;min-width:0}
  .api-card{padding:24px}

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

  /* ---------- CTA ---------- */
  .cta-band{padding:44px 24px;border-radius:24px}
  .cta-band h2{font-size:1.55rem}
  .cta-band p{font-size:.95rem}
  .telegram-btns{gap:12px}
  .telegram-btns .btn{width:100%}

  /* ---------- FAQ ---------- */
  .faq-list{gap:12px}
  .faq-q{padding:18px;font-size:.95rem}
  .faq-a p{padding:0 18px 18px}

  /* ---------- Footer ---------- */
  .footer{padding:56px 0 0}
  .footer-grid{grid-template-columns:1fr;gap:34px;padding-bottom:40px}
  .newsletter form{flex-direction:column}
  .footer-bottom{flex-direction:column;text-align:center;padding:20px 0 calc(20px + env(safe-area-inset-bottom))}
  .socials{justify-content:flex-start}

  /* ---------- Buttons touch-friendly ---------- */
  .btn{padding:15px 22px;font-size:.95rem;border-radius:14px}
  .btn-sm{padding:10px 16px;font-size:.82rem}
  .btn-lg{padding:17px 28px}

  /* ---------- Reveal faster on mobile ---------- */
  .reveal{transition-duration:.5s}
}

/* ---------- Small phones ---------- */
@media (max-width:400px){
  .hero h1{font-size:1.72rem}
  .stat{padding:0 16px}
  .mobile-tabs a{font-size:.6rem}
  .mobile-tabs a .tab-ico{font-size:1.15rem}
}