/* Fueltek v6 — mobile-first refinements */
:root{--mobile-header-h:64px}

/* Shared floating contact safety */
body{padding-bottom:max(86px,env(safe-area-inset-bottom))}
section,footer{scroll-margin-top:82px}
.fueltek-whatsapp{transition:opacity .24s ease,transform .24s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
body.whatsapp-settled .fueltek-whatsapp__icon::after{animation:none!important;opacity:0!important}
body.pages-drawer-open-v56 .fueltek-whatsapp,
body.mobile-overlay-open .fueltek-whatsapp{opacity:.12!important;transform:translateY(12px) scale(.86)!important;pointer-events:none!important}

.mobile-read-more{display:none}

@media(max-width:900px){
  html{scroll-padding-top:76px}
  body{padding-top:74px!important}
  .frame{inset:7px!important;border-radius:16px!important}

  /* 1. Compact one-row mobile header */
  .header{
    top:7px!important;
    width:calc(100% - 14px)!important;
    height:62px!important;
    min-height:62px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:62px!important;
    gap:7px!important;
    transform:translateX(-50%)!important;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease!important;
  }
  body.mobile-header-hidden:not(.pages-drawer-open-v56) .header{transform:translate(-50%,-125%)!important;opacity:.35!important}
  .header .nav-shell,.header .jump-nav{display:none!important}
  .header .logo{
    width:auto!important;min-width:0!important;height:54px!important;min-height:54px!important;
    padding:0 12px!important;border-radius:11px!important;overflow:hidden!important;
    font-size:clamp(21px,6vw,27px)!important;
  }
  .header .logo small{display:none!important}
  .header-actions-v56{
    grid-column:2!important;grid-row:1!important;width:auto!important;min-width:0!important;height:54px!important;
    padding:4px!important;gap:5px!important;border-radius:11px!important;
  }
  .fmo-login-v56{display:inline-flex!important;min-height:46px!important;padding:0 12px!important;font-size:8px!important;letter-spacing:.09em!important}
  .pages-menu-btn-v56{display:inline-flex!important;width:46px!important;height:46px!important;min-height:46px!important;padding:0!important;font-size:0!important}
  .pages-menu-btn-v56 b{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
  .social-link-v75{display:none!important}
  .pages-drawer-v56{width:min(360px,94vw)!important;padding:16px!important}
  .pages-drawer-group-v56{padding:14px 0!important}
  .pages-drawer-group-v56 a{min-height:48px!important;padding:12px!important;font-size:14px!important}
  .pages-drawer-group-v56 small{font-size:11px!important}

  /* Global mobile readability */
  body,p,li,dd{font-size:15px}
  p,li,dd{line-height:1.65}
  .eyebrow,small,.product-breadcrumb,.stage-label,.product-panel-tag,.product-panel-fit,
  .product-card-kicker,.quick-stat span,.detail-pill{font-size:11px!important;line-height:1.35!important}
  section{padding-left:18px!important;padding-right:18px!important}
  .mobile-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  .mobile-clamp.is-expanded{display:block;-webkit-line-clamp:unset}
  .mobile-read-more{display:inline-flex;margin:8px 0 0;padding:0;border:0;background:none;color:var(--acid,#f3b324);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}

  /* 2. Homepage: shorter first view and one-product swipe carousel */
  .hero#home{
    height:auto!important;min-height:0!important;padding:18px 14px 28px!important;
    display:flex!important;flex-direction:column!important;gap:10px!important;overflow:hidden!important;
  }
  .hero#home .hero-copy{order:1!important;width:100%!important;padding:12px 4px 0!important;align-self:auto!important}
  .hero#home .hero-copy .eyebrow{margin:0 0 12px!important;font-size:11px!important;letter-spacing:.12em!important}
  .hero#home h1{font-size:clamp(49px,15.5vw,66px)!important;line-height:.82!important;letter-spacing:0!important}
  .hero#home .hero-copy>p:not(.eyebrow){max-width:540px!important;margin:18px 0 16px!important;font-size:15px!important;line-height:1.55!important}
  .hero#home .actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:0!important}
  .hero#home .actions .btn{width:100%!important;min-height:44px!important;padding:11px 10px!important;font-size:10px!important;letter-spacing:.08em!important}
  .hero#home .actions .btn.fill{grid-column:1/-1!important}
  .hero#home .showcase.carousel-mode.stage-image-mode{
    order:2!important;position:relative!important;left:auto!important;top:auto!important;transform:none!important;
    width:100%!important;height:405px!important;min-height:405px!important;margin:0!important;
    overflow:hidden!important;border-radius:22px!important;touch-action:pan-y!important;
  }
  .hero#home .stage-image-bg{inset:0!important;border-radius:22px!important;overflow:hidden!important}
  .hero#home .stage-image-bg img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
  .hero#home .stage-image-mode .product-object:not(.slot-center){opacity:0!important;visibility:hidden!important;pointer-events:none!important;filter:none!important}
  .hero#home .stage-image-mode .product-object.slot-center{
    opacity:1!important;visibility:visible!important;left:50%!important;bottom:104px!important;
    --active-scale:.66!important;filter:drop-shadow(0 28px 30px rgba(0,0,0,.9)) drop-shadow(0 0 25px rgba(243,179,36,.22))!important;
  }
  .hero#home .showcase-caption{
    left:12px!important;right:12px!important;bottom:12px!important;width:auto!important;transform:none!important;
    padding:10px 12px!important;border-radius:15px!important;text-align:left!important;
  }
  .hero#home .showcase-caption p{font-size:12px!important;line-height:1.35!important;margin:4px 0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero#home .caption-count{font-size:10px!important}
  .hero#home .hero-detail-link{font-size:10px!important;padding:7px 10px!important}
  .hero#home .drag-hint{display:none!important}
  .hero#home .caption-progress{gap:6px!important;margin-top:7px!important}
  .hero#home .caption-progress button{width:7px!important;height:7px!important}
  .hero#home .arrows{inset:44% 8px auto!important}
  .hero#home .arrow{width:40px!important;height:40px!important;font-size:27px!important;background:rgba(0,0,0,.56)!important}
  .hero#home .hero-feature-panel{display:none!important}
  .hero#home .metrics{
    order:3!important;display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;
    gap:10px!important;margin:4px 0 0!important;padding:0 4px 8px!important;width:100%!important;scrollbar-width:none!important;
  }
  .hero#home .metrics::-webkit-scrollbar{display:none!important}
  .hero#home .metric{flex:0 0 82vw!important;min-height:112px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:16px!important;padding:15px!important;scroll-snap-align:center!important;background:rgba(5,7,6,.72)!important}
  .hero#home .metric b{font-size:16px!important}.hero#home .metric small{font-size:13px!important}
  .hero#home .progress{display:none!important}

  /* 5. Lighter, swipeable supporting sections */
  .product-rail,.solution-cards,.compliance-grid,.kpis,.dash-bottom,.sector-grid,
  .info-grid,.spec-grid,.product-nav-grid,.detail-grid{
    display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;overscroll-behavior-inline:contain!important;padding:2px 2px 14px!important;scrollbar-width:none!important;
  }
  .product-rail::-webkit-scrollbar,.solution-cards::-webkit-scrollbar,.compliance-grid::-webkit-scrollbar,.kpis::-webkit-scrollbar,
  .dash-bottom::-webkit-scrollbar,.sector-grid::-webkit-scrollbar,.info-grid::-webkit-scrollbar,.spec-grid::-webkit-scrollbar,
  .product-nav-grid::-webkit-scrollbar,.detail-grid::-webkit-scrollbar{display:none!important}
  .product-card,.solution-card,.comp-card,.kpi,.dash-bottom>* ,.sector-card,.info-card,.spec-card,.product-nav-card,.detail-card{
    flex:0 0 min(84vw,360px)!important;scroll-snap-align:center!important;border-color:rgba(255,255,255,.10)!important;
  }
  .product-card,.solution-card,.info-card,.spec-card,.detail-card{box-shadow:none!important;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important}
  .section-grid,.software-wrap,.section-copy,.product-section-head{gap:20px!important}

  /* 3. Product pages: title → description → image → stats → enquiry */
  .product-main .product-hero{
    display:flex!important;flex-direction:column!important;min-height:0!important;gap:16px!important;
    padding:22px 18px 30px!important;align-items:stretch!important;
  }
  .product-main .product-hero>div:first-child{display:contents!important}
  .product-main .product-breadcrumb{order:1!important;margin:0 0 2px!important}
  .product-main .product-hero .eyebrow{order:2!important;margin:0!important}
  .product-main .product-hero h1{order:3!important;font-size:clamp(50px,17vw,72px)!important;line-height:.84!important}
  .product-main .product-hero h1 span{font-size:.32em!important;margin-top:12px!important;line-height:1.25!important;letter-spacing:.055em!important}
  .product-main .product-hero .lead{order:4!important;margin:2px 0 0!important;font-size:15px!important;line-height:1.58!important}
  .product-main .product-stage{
    order:5!important;min-height:410px!important;height:410px!important;width:100%!important;border-radius:24px!important;margin:4px 0!important;
  }
  .product-main .product-stage-bg{background-image:url('design/golden-portal-wide-background-mobile.jpg')!important}
  .product-main .product-stage img{height:82%!important;width:min(var(--product-width,78%),430px)!important;bottom:18px!important}
  .product-main .product-stage .stage-label{left:14px!important;top:14px!important;padding:8px 10px!important}
  .product-main .quick-stats{
    order:6!important;display:flex!important;overflow-x:auto!important;gap:9px!important;margin:2px 0 0!important;padding:0 0 7px!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;
  }
  .product-main .quick-stats::-webkit-scrollbar{display:none!important}
  .product-main .quick-stat{flex:0 0 72%!important;min-height:92px!important;scroll-snap-align:start!important;padding:16px!important;border-radius:16px!important}
  .product-main .quick-stat b{font-size:21px!important}
  .product-main .product-hero .actions{order:7!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin:4px 0 0!important}
  .product-main .product-hero .actions .btn{min-height:46px!important;padding:11px 10px!important;font-size:10px!important;white-space:normal!important;text-align:center!important}
  .product-main .product-hero .actions .btn.fill{grid-column:1/-1!important;font-size:11px!important}
  .product-main .product-section{padding:48px 18px!important}
  .product-main .product-section-head{display:grid!important;grid-template-columns:1fr!important}
  .product-main .product-section-head h2{font-size:clamp(40px,13vw,58px)!important}
  .product-main .info-grid,.product-main .spec-grid,.product-main .product-nav-grid{margin-left:0!important;margin-right:-18px!important;padding-right:18px!important}
  .product-main .info-card,.product-main .spec-card{flex-basis:min(88vw,380px)!important}
  .product-main .spec-row{grid-template-columns:1fr!important;gap:5px!important;padding:13px 16px!important}
  .product-main .spec-card h3{font-size:19px!important;padding:17px 16px!important}
  .product-main .info-card{padding:20px!important}
  .product-main .info-card h3{font-size:23px!important}

  /* 6. WhatsApp avoids content and becomes calmer */
  .fueltek-whatsapp{
    right:max(11px,env(safe-area-inset-right))!important;bottom:max(11px,env(safe-area-inset-bottom))!important;
    width:50px!important;height:50px!important;min-height:50px!important;padding:5px!important;
  }
  .fueltek-whatsapp__icon{width:40px!important;height:40px!important;flex-basis:40px!important}
  main,footer{padding-bottom:18px}

  /* 7. Portrait intro is supplied via media source; keep safe full-bleed canvas */
  .fueltek-intro-video{object-fit:cover!important;object-position:center!important}
}

@media(max-width:420px){
  .fmo-login-v56{padding:0 9px!important;font-size:7.5px!important}
  .header .logo{padding:0 10px!important;font-size:22px!important}
  .hero#home .showcase.carousel-mode.stage-image-mode{height:390px!important;min-height:390px!important}
  .hero#home .stage-image-mode .product-object.slot-center{--active-scale:.60!important;bottom:104px!important}
  .product-main .product-stage{height:390px!important;min-height:390px!important}
}

/* 8. Reduced motion and data-saving mode */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .mist,.scan,.beam,.clean-stage-portal,.grain{display:none!important}
}
html.data-saver .mist,html.data-saver .scan,html.data-saver .beam,html.data-saver .clean-stage-portal,
html.data-saver body::after,html.data-saver .grain{display:none!important}
html.data-saver .product-object,html.data-saver .tag-product-3d,html.data-saver .phone-frame{animation:none!important;transition:none!important}