/* Mobile optimization layer */
.mchip,.swipe,.mbar{display:none}
.cslink{display:inline-flex;align-items:center;gap:6px;margin-top:24px;font-weight:600;font-size:15px;color:#67e8f9}
.cslink:hover{color:#fff}
.mbar:focus-visible,.cslink:focus-visible{outline:2px solid #22d3ee;outline-offset:3px}

@media (max-width:980px){
  html{scroll-padding-top:92px}
  .fab{display:none!important}
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:95;justify-content:center;align-items:center;gap:8px;height:52px;border-radius:999px;background:linear-gradient(120deg,#60a5fa,#22d3ee 45%,#34d399);color:#04111f;font:600 16px/1 Inter,system-ui,sans-serif;box-shadow:0 12px 30px -8px rgba(34,211,238,.6);transform:translateY(150%);transition:transform .3s ease}
  .mbar.show{transform:none}
  footer{padding-bottom:100px!important}
  .alayout .aside .abox:first-child{display:none}
}

@media (max-width:600px){
  body{font-size:16px}
  section{padding:56px 0}
  .h2{font-size:30px;margin-bottom:12px}
  .lead{font-size:16px}
  .center{text-align:left}
  .center .lead{margin:0}
  .eyebrow{font-size:12px;margin-bottom:12px}

  /* hero */
  .hero{padding:104px 0 36px}
  .hero-grid{gap:0}
  .visual{display:none}
  .mchip{display:flex;align-items:center;gap:12px;margin-bottom:18px}
  .mchip img{width:52px;height:52px;border-radius:16px;object-fit:cover;border:2px solid rgba(34,211,238,.6)}
  .mchip b{display:block;color:#fff;font-size:16px;font-family:"Space Grotesk",Inter,sans-serif}
  .mchip span{font-size:13.5px;color:#95a1b8;line-height:1.35}
  .pill{font-size:12.5px;margin-bottom:18px}
  .hero h1{font-size:clamp(34px,10vw,42px);margin-bottom:16px}
  .hero p{font-size:16.5px;margin-bottom:24px}
  .hero .cta{flex-direction:column;gap:10px;margin-bottom:26px}
  .hero .cta .btn{width:100%;padding:15px 20px}
  .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .trust span{display:flex;flex-direction:column;align-items:flex-start;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.03);font-size:12px;line-height:1.3}
  .trust span+span{padding-left:12px;border-left:1px solid rgba(255,255,255,.09)}
  .trust strong{font-size:19px;margin:0 0 2px}

  .marquee{padding:14px 0}
  .track{gap:36px}
  .track span{font-size:15px;gap:36px}

  /* stats 2x2 */
  .stats{grid-template-columns:1fr 1fr!important;gap:10px}
  .stat{padding:18px 16px;border-radius:16px}
  .stat .n{font-size:28px;margin-bottom:6px}
  .stat p{font-size:12.5px;line-height:1.45}

  /* swipe carousels */
  .swipe{display:block;margin:22px 0 -8px;font-size:13px;color:#6b7791}
  .bento,.wins{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:14px -16px 0;padding:6px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bento::-webkit-scrollbar,.wins::-webkit-scrollbar{display:none}
  .bento .svc,.wins .win{flex:0 0 84%;scroll-snap-align:start;padding:22px}
  .svc h3{font-size:19px}
  .svc p{font-size:14.5px}
  .ico{width:42px;height:42px;margin-bottom:14px}

  /* case studies */
  .cases{gap:16px}
  .case{border-radius:20px}
  .case-l,.case-r{padding:22px!important}
  .case-l h3{font-size:23px}
  .case-l .loc{margin-bottom:18px;font-size:13.5px}
  .chip{font-size:11px;margin-bottom:14px}
  .kpis{grid-template-columns:1fr 1fr!important;gap:8px}
  .kpi{padding:12px}
  .kpi b{font-size:21px}
  .kpi span{font-size:12px}
  .case-r h4:nth-of-type(2),.case-r .list:not(.up){display:none}
  .case-r h4:not(:first-child){margin-top:20px}
  .list li{font-size:14.5px}
  .more{gap:10px}
  .mini{padding:18px;gap:14px}

  /* process */
  .steps{grid-template-columns:1fr!important;row-gap:12px;margin-top:28px}
  .step{display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:start;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.03)}
  .step .num{width:52px;height:52px;border-radius:14px;font-size:16px;margin:0;grid-row:span 2;box-shadow:none}
  .step h3{font-size:17px;margin-bottom:2px}
  .step p{font-size:14px}

  /* experience */
  .exp{margin-top:28px;gap:14px}
  .tl{gap:10px}
  .job{padding:18px}
  .job p{font-size:14px}
  .box{padding:20px}

  /* blog cards on homepage */
  .pgrid{margin-top:28px;gap:10px}
  .pcard{flex-direction:row}
  .pa{width:96px;height:auto;flex:none;border-bottom:0;border-right:1px solid rgba(255,255,255,.09)}
  .pb{padding:14px 16px}
  .pb h3{font-size:15.5px;margin-bottom:8px}
  .pcat{font-size:10.5px;margin-bottom:6px}
  .pm{font-size:13px}
  .blog-more .btn{width:100%}

  /* faq + cta */
  .faq{margin-top:28px;gap:8px}
  summary{font-size:16px;padding:16px 18px}
  details p{padding:0 18px 18px;font-size:15px}
  .final{padding:40px 20px;border-radius:24px}
  .final h2{font-size:30px}
  .final p{font-size:16px}
  .final .cta{flex-direction:column}
  .final .cta .btn{width:100%}

  /* blog pages */
  .bhero{padding:104px 0 20px;text-align:left}
  .bhero h1{font-size:34px}
  .bhero p{font-size:16px;margin:0}
  .posts{gap:12px;padding:16px 0 60px}
  .pc .art{height:120px}
  .pc .body,.pc.feat .body{padding:18px}
  .pc h2,.pc h3,.pc.feat h2{font-size:19px}
  .pc p{font-size:14.5px}
  .ahero{padding:100px 0 16px}
  .crumbs{font-size:13px;margin-bottom:14px}
  .ahero h1{font-size:30px;margin-bottom:14px}
  .ahero .sub{font-size:16px;margin-bottom:18px}
  .alayout{margin-top:12px;margin-bottom:40px;gap:24px}
  .prose{font-size:16.5px}
  .prose h2{font-size:23px;margin-top:1.6em}
  .prose h3{font-size:19px}
  .prose pre{font-size:12.5px;padding:16px;border-radius:12px}
  .endcta{margin-top:36px;padding:22px}
  .endcta h3{font-size:21px}
  .endcta .row{flex-direction:column}
  .endcta .btn{width:100%}
  .related{padding:0 0 40px}
  .related h2{font-size:24px}
}