/* ==========================================================================\n   SoftWorX Global — Mobile App UI layer\n   Desktop is intentionally untouched. Everything below is mobile-only.\n   ========================================================================== */
.swx-mobile-bottom-nav,.swx-mobile-fab,.swx-mobile-menu-scrim,.swx-mobile-drawer,.mobile-brand-copy{display:none}

@media (max-width:767px){
  :root{
    --swx-app-bg:#07070d;
    --swx-app-surface:#0f0d17;
    --swx-app-surface-2:#151121;
    --swx-app-line:rgba(255,255,255,.075);
    --swx-app-muted:#a8a0b5;
    --swx-app-purple:#9b55ff;
    --swx-app-purple-2:#6f36ff;
  }

  html{scroll-padding-top:82px;background:var(--swx-app-bg)}
  body{
    background:
      radial-gradient(circle at 86% 3%,rgba(124,58,237,.16),transparent 24%),
      linear-gradient(180deg,#06060c 0%,#090811 48%,#06060a 100%);
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color:transparent;
    overscroll-behavior-y:none;
  }
  body.swx-mobile-menu-open{overflow:hidden}
  .ambient{opacity:.10;filter:blur(72px)}
  .container{width:calc(100% - 28px);max-width:none}

  /* App top bar */
  .site-header{
    top:0;
    z-index:90;
    border-bottom:0;
    background:rgba(7,7,13,.78);
    -webkit-backdrop-filter:blur(22px) saturate(135%);
    backdrop-filter:blur(22px) saturate(135%);
    box-shadow:0 1px 0 rgba(255,255,255,.055),0 10px 30px rgba(0,0,0,.22);
  }
  .site-header.is-scrolled{background:rgba(7,7,13,.93)}
  .nav-wrap{height:66px;gap:12px;padding-top:env(safe-area-inset-top)}
  .brand.brand-icon{
    width:auto!important;height:46px!important;flex:1!important;
    display:flex;align-items:center;gap:10px;margin:0!important;
  }
  .brand.brand-icon img{width:34px!important;height:34px!important;object-fit:contain;flex:0 0 34px}
  .mobile-brand-copy{display:flex;flex-direction:column;line-height:1}
  .mobile-brand-copy strong{font-family:var(--serif);font-size:18px;font-weight:400;letter-spacing:.01em}
  .mobile-brand-copy small{margin-top:4px;color:#8f859c;font-size:6px;letter-spacing:.33em;font-weight:700}
  .nav-cta{display:none!important}
  .nav-toggle{
    display:flex!important;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.08);
    border-radius:14px;background:rgba(255,255,255,.035);align-items:center;justify-content:center;flex-direction:column;gap:5px;
  }
  .nav-toggle span{display:block;width:17px;height:1.5px;border-radius:9px;background:#fff;transition:.25s ease}
  /* The original desktop nav is hidden on phones. A dedicated body-level drawer
     avoids the stacking conflict that prevented the old burger menu from appearing. */
  .main-nav{display:none!important}

  .nav-toggle{position:relative;z-index:94}
  .nav-toggle.active span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .nav-toggle.active span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

  .swx-mobile-menu-scrim{
    display:block;position:fixed;z-index:118;inset:0;background:rgba(2,2,7,.72);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .24s ease,visibility .24s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
  }
  .swx-mobile-menu-scrim.show{opacity:1;visibility:visible;pointer-events:auto}

  .swx-mobile-drawer{
    display:flex;position:fixed;z-index:120;top:max(10px,env(safe-area-inset-top));right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));width:min(88vw,372px);padding:17px;
    flex-direction:column;border:1px solid rgba(255,255,255,.10);border-radius:27px;overflow:hidden;
    background:
      radial-gradient(circle at 100% 0%,rgba(151,71,255,.20),transparent 34%),
      linear-gradient(180deg,rgba(22,17,33,.985),rgba(8,8,13,.995));
    box-shadow:-24px 0 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(28px) saturate(145%);backdrop-filter:blur(28px) saturate(145%);
    transform:translateX(calc(100% + 28px));opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .24s ease,visibility .24s ease
  }
  .swx-mobile-drawer.open{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto}
  .swx-mobile-drawer:after{
    content:'';position:absolute;width:220px;height:220px;border-radius:50%;right:-105px;bottom:12%;
    background:rgba(124,58,237,.16);filter:blur(46px);pointer-events:none
  }
  .swx-mobile-drawer-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:2px 1px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
  .swx-mobile-drawer-brand{display:flex;align-items:center;gap:10px}
  .swx-mobile-drawer-brand img{width:34px;height:34px;object-fit:contain}
  .swx-mobile-drawer-brand span{display:flex;flex-direction:column;line-height:1}
  .swx-mobile-drawer-brand strong{font-family:var(--serif);font-size:18px;font-weight:400}
  .swx-mobile-drawer-brand small{margin-top:4px;color:#8f859c;font-size:6px;letter-spacing:.32em;font-weight:700}
  .swx-mobile-drawer-close{width:40px;height:40px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.04);position:relative;cursor:pointer}
  .swx-mobile-drawer-close span{position:absolute;left:11px;top:19px;width:17px;height:1.5px;background:#fff;border-radius:3px}
  .swx-mobile-drawer-close span:first-child{transform:rotate(45deg)}
  .swx-mobile-drawer-close span:last-child{transform:rotate(-45deg)}
  .swx-mobile-drawer-label{position:relative;z-index:2;padding:18px 7px 8px;color:#7f778b;font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
  .swx-mobile-drawer-links{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;overflow:auto;padding-right:2px}
  .swx-mobile-drawer-links a{
    display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 13px;border-radius:14px;
    color:#c8c1d0;font-size:15px;font-weight:650;transition:.2s ease
  }
  .swx-mobile-drawer-links a b{font-size:9px;color:#625b6e;font-weight:700;letter-spacing:.08em}
  .swx-mobile-drawer-links a.active{color:#fff;background:linear-gradient(90deg,rgba(133,65,255,.18),rgba(168,85,247,.06));box-shadow:inset 3px 0 0 #9c5cff}
  .swx-mobile-drawer-links a.active b{color:#b984ff}
  .swx-mobile-drawer-action{position:relative;z-index:2;margin-top:auto;padding:15px;border:1px solid rgba(167,103,255,.20);border-radius:18px;background:linear-gradient(135deg,rgba(98,45,191,.24),rgba(255,255,255,.025))}
  .swx-mobile-drawer-action small{display:block;margin-bottom:9px;color:#a99fb5;font-size:10px}
  .swx-mobile-drawer-action>a{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 14px;border-radius:13px;background:linear-gradient(135deg,#7138ff,#a74fff);font-size:12px;font-weight:800;color:#fff;box-shadow:0 12px 30px rgba(96,38,203,.30)}
  .swx-mobile-drawer-action>a span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.16)}

  /* Bottom app navigation */
  .swx-mobile-bottom-nav{
    position:fixed;z-index:90;left:10px;right:10px;bottom:calc(9px + env(safe-area-inset-bottom));height:68px;
    display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:7px 5px;
    border:1px solid rgba(255,255,255,.09);border-radius:23px;
    background:rgba(13,11,20,.90);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);
    box-shadow:0 20px 55px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.055);
  }
  .swx-mobile-bottom-nav a,.swx-mobile-bottom-nav button{
    position:relative;min-width:0;height:54px;margin:0;padding:4px 2px;border:0;background:none;color:#756e80;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:inherit;cursor:pointer;
  }
  .swx-mobile-bottom-nav svg{width:21px;height:21px;fill:currentColor;transition:.22s ease}
  .swx-mobile-bottom-nav span{font-size:9px;font-weight:700;line-height:1;letter-spacing:.01em}
  .swx-mobile-bottom-nav a.active,.swx-mobile-bottom-nav button.active{color:#fff}
  .swx-mobile-bottom-nav a.active:before,.swx-mobile-bottom-nav button.active:before{
    content:'';position:absolute;top:0;width:31px;height:28px;border-radius:12px;
    background:linear-gradient(135deg,rgba(111,54,255,.36),rgba(168,85,247,.18));z-index:-1;box-shadow:0 0 22px rgba(124,58,237,.25)
  }
  .swx-mobile-bottom-nav a.active svg{color:#b981ff;transform:translateY(-1px)}

  .swx-mobile-fab{
    position:fixed;z-index:72;right:15px;bottom:calc(88px + env(safe-area-inset-bottom));display:flex;
    align-items:center;gap:8px;padding:10px 12px 10px 14px;border-radius:999px;color:#fff;font-size:11px;font-weight:700;
    border:1px solid rgba(255,255,255,.17);background:linear-gradient(135deg,#6f36ff,#ab55ff);
    box-shadow:0 14px 34px rgba(92,34,192,.38);transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s ease;
  }
  .swx-mobile-fab b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);font-size:13px}
  .swx-mobile-fab.show{transform:translateY(0);opacity:1;pointer-events:auto}

  /* Home hero becomes an immersive app cover */
  .hero.hero-cinematic{min-height:auto!important;padding:0!important;overflow:visible}
  .hero-cinematic-inner{min-height:auto!important;padding-top:14px!important;padding-bottom:18px!important;display:block}
  .hero.hero-cinematic .container{width:calc(100% - 20px)}
  .hero-media{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:.78!important;border-radius:0 0 34px 34px;overflow:hidden
  }
  .hero-media img{object-position:67% center!important;transform:none!important}
  .hero-overlay{
    border-radius:0 0 34px 34px;
    background:
      linear-gradient(180deg,rgba(4,4,9,.16) 0%,rgba(4,4,9,.30) 26%,rgba(5,5,11,.80) 65%,#07070d 93%),
      linear-gradient(90deg,rgba(5,5,11,.86) 0%,rgba(5,5,11,.48) 68%,rgba(5,5,11,.18) 100%)!important;
  }
  .hero-copy{position:relative;width:100%!important;padding:56px 8px 0;z-index:3}
  .hero-kicker{margin-bottom:16px;padding:7px 10px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(8,7,14,.44);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:9px!important}
  .hero.hero-cinematic h1{font-size:clamp(44px,13.8vw,62px)!important;line-height:.94!important;letter-spacing:-.045em;margin-bottom:18px!important;max-width:360px}
  .hero.hero-cinematic p{font-size:14px!important;line-height:1.65;max-width:92%!important;color:#d0c9d8!important;margin-bottom:23px!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
  .hero-actions .btn{width:100%!important;min-height:48px;padding:12px 13px!important;border-radius:15px!important;font-size:12px}
  .hero-actions .hero-secondary{background:rgba(12,10,18,.44);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .hero-benefits{
    display:flex!important;grid-template-columns:none!important;gap:8px!important;margin-top:22px!important;padding:0 0 12px!important;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none
  }
  .hero-benefits::-webkit-scrollbar{display:none}
  .hero-benefit,.hero-benefit:first-child,.hero-benefit:last-child{
    flex:0 0 78%;scroll-snap-align:start;min-height:68px;padding:12px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:16px!important;
    background:rgba(15,12,23,.58);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)
  }
  .benefit-icon{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:12px!important}
  .hero-benefit strong{font-size:12px}.hero-benefit small{font-size:10px;line-height:1.25}
  .hero-tech-panel{
    position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:3;margin:0 8px 0!important;padding:13px 13px 11px!important;
    border-radius:17px!important;background:rgba(14,11,22,.88)!important;box-shadow:0 15px 40px rgba(0,0,0,.26)!important
  }
  .hero-tech-panel .tech-list{display:flex!important;grid-template-columns:none!important;gap:8px!important;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;scroll-snap-type:x proximity}
  .hero-tech-panel .tech-list::-webkit-scrollbar{display:none}
  .hero-tech-panel .tech-item{flex:0 0 auto;min-width:86px!important;padding:8px 9px!important;border-radius:11px!important;scroll-snap-align:start}
  .hero-tech-panel .tech-list span:last-child{grid-column:auto!important}
  .tech-label{text-align:left!important;margin:0 0 8px 3px!important;font-size:8px!important}

  /* Native-app section rhythm */
  .section{padding:54px 0!important}
  .section.light{background:#0a0910!important;color:var(--text)!important}
  .section-head{display:block!important;margin-bottom:23px!important}
  .section-head>div{max-width:100%}
  .section-head h2,.split h2,.cta h2{font-size:clamp(33px,10vw,44px)!important;line-height:1.02!important;letter-spacing:-.025em}
  .section-head p,.split p{font-size:13px!important;line-height:1.65!important;color:#9e96a7!important}
  .section-head>.arrow-link{margin-top:14px!important;padding:9px 12px;border:1px solid #2f253c;border-radius:999px;font-size:10px}
  .eyebrow{font-size:9px!important;letter-spacing:.16em!important;margin-bottom:12px!important}

  /* Services: horizontal snap carousel */
  .cards{
    display:flex!important;grid-template-columns:none!important;gap:12px!important;margin-left:-2px;padding:2px 2px 13px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none
  }
  .cards::-webkit-scrollbar{display:none}
  .service-card{
    flex:0 0 min(82vw,325px);scroll-snap-align:start;min-height:245px!important;padding:21px!important;border-radius:22px!important;
    background:
      radial-gradient(circle at 92% 0%,rgba(124,58,237,.17),transparent 36%),
      linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
    box-shadow:0 14px 42px rgba(0,0,0,.16)
  }
  .service-card:hover{transform:none}
  .service-icon{width:46px;height:46px;border-radius:14px;margin-bottom:35px}
  .service-card h3{font-size:20px;max-width:230px}.service-card p{font-size:12px;line-height:1.65}
  .service-card .arrow-link{font-size:11px}

  /* Metrics are app-style KPI tiles */
  .metrics{grid-template-columns:1fr 1fr!important;gap:9px!important;margin-top:13px!important;border:0!important;border-radius:0!important;overflow:visible!important}
  .metric{padding:18px 12px!important;border:1px solid var(--swx-app-line)!important;border-radius:17px;background:linear-gradient(180deg,#11101a,#0c0b12)}
  .metric strong{font-size:26px!important}.metric span{font-size:9px!important;line-height:1.4}

  /* Work section: swipeable premium case studies */
  .section.light .eyebrow{color:#ad76ff}
  .project-grid{
    display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;padding:1px 1px 13px;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none
  }
  .project-grid::-webkit-scrollbar{display:none}
  .project-card{
    flex:0 0 min(86vw,345px);scroll-snap-align:center;border-radius:22px!important;
    color:#f8f6ff!important;background:#111019!important;border:1px solid rgba(255,255,255,.075)!important;box-shadow:0 16px 46px rgba(0,0,0,.18)
  }
  .project-card:hover{transform:none;box-shadow:0 16px 46px rgba(0,0,0,.18)}
  .project-image{aspect-ratio:16/10;border-radius:21px 21px 0 0;background:linear-gradient(135deg,#171327,#51238e)}
  .project-body{padding:17px 17px 20px!important}.project-body .tag{font-size:9px;background:#211434;color:#c89cff}
  .project-body h3{font-size:18px;line-height:1.3}.project-body p{color:#9e96a8!important;font-size:12px;line-height:1.6}

  /* Why section becomes a stacked in-app feature story */
  .split,.why-swx-grid{grid-template-columns:1fr!important;gap:26px!important}
  .why-values,.values{grid-template-columns:1fr!important;gap:9px!important;margin-top:22px!important}
  .why-value,.value{min-height:auto!important;padding:16px!important;border-radius:16px!important;background:#0f0d16}
  .why-value-number{margin-bottom:8px!important}.why-value strong{font-size:13px}.why-value>span:last-child{font-size:11px}
  .swx-network{min-height:335px!important;border-radius:24px!important}
  .swx-network-center{transform:translate(-50%,-50%) scale(.82)!important}
  .swx-network-node{transform:scale(.88)}
  .node-strategy{left:7%!important}.node-technology{right:5%!important}.node-growth{right:4%!important}.node-design{right:10%!important}.node-operations{left:7%!important}
  .swx-network-caption{left:20px!important;bottom:20px!important}

  /* Insights: editorial app feed */
  .blog-grid{
    display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;padding:1px 1px 13px;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none
  }
  .blog-grid::-webkit-scrollbar{display:none}
  .blog-card{flex:0 0 min(84vw,340px);scroll-snap-align:start;border-radius:21px!important;background:#100f18!important;border-color:rgba(255,255,255,.075)!important}
  .blog-card .thumb{aspect-ratio:16/9}.blog-card .body{padding:17px!important}.blog-card h3{font-size:18px;line-height:1.28}.blog-card p{font-size:12px;line-height:1.6}.blog-card .meta{font-size:9px}

  /* CTA behaves like an app action card */
  .cta{grid-template-columns:1fr!important;gap:16px!important;padding:24px 20px!important;border-radius:23px!important;background:
    radial-gradient(circle at 100% 0%,rgba(184,105,255,.34),transparent 38%),
    linear-gradient(135deg,#24123f,#5522a9)!important}
  .cta h2{font-size:34px!important}.cta p{font-size:12px;margin:0 0 15px}.cta .btn{width:100%;min-height:48px;border-radius:15px}

  /* Footer is cleaner on an app canvas */
  .footer{padding:48px 0 28px!important;margin-top:14px;border-top:1px solid rgba(255,255,255,.055)}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:28px 18px!important}
  .footer-grid>div:first-child{grid-column:1/-1;padding-bottom:4px}.footer-logo{width:158px}.footer p{font-size:11px}.footer h4{font-size:12px}.footer a{font-size:11px;margin:8px 0}.social-row a{width:34px;height:34px}
  .footer-legal{gap:8px 14px!important;padding-top:18px!important}.footer-legal a{font-size:9px!important}
  .footer-bottom{font-size:9px!important;padding-bottom:8px!important}

  /* Generic inner pages also receive the app shell, not a desktop redesign. */
  .page-hero{padding:52px 0 38px!important;border-bottom:1px solid rgba(255,255,255,.055)!important;background:radial-gradient(circle at 88% 18%,rgba(124,58,237,.18),transparent 30%)}
  .page-hero h1{font-size:clamp(44px,13vw,60px)!important}.page-hero p{font-size:14px!important}
  .prose{font-size:14px}.prose h2{font-size:30px}
  .gallery{grid-template-columns:1fr!important}.gallery figure{border-radius:18px!important}
  .contact-grid{grid-template-columns:1fr!important;gap:12px!important}.contact-panel,.form-panel{padding:20px!important;border-radius:20px!important}
  .form-grid{grid-template-columns:1fr!important}.field.full{grid-column:auto!important}

  /* Make horizontal rails feel deliberate with a fade at the right edge. */
  .cards,.project-grid,.blog-grid,.hero-benefits,.hero-tech-panel .tech-list{
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }

  /* Welcome intro stays lightweight on phones. */
  .swx-welcome-mark-wrap{width:78px!important;height:78px!important}.swx-welcome-mark{width:46px!important;height:46px!important}
  .swx-welcome-slide strong{font-size:clamp(32px,10vw,46px)!important}.swx-welcome-slides{height:112px!important}
}

@media (max-width:380px){
  .container{width:calc(100% - 22px)}
  .hero.hero-cinematic .container{width:calc(100% - 16px)}
  .hero-copy{padding-left:6px;padding-right:6px}
  .hero.hero-cinematic h1{font-size:42px!important}
  .hero-actions{grid-template-columns:1fr!important}
  .service-card{flex-basis:88vw}.project-card{flex-basis:89vw}.blog-card{flex-basis:88vw}
  .swx-mobile-bottom-nav{left:7px;right:7px;bottom:calc(7px + env(safe-area-inset-bottom))}
  .swx-mobile-bottom-nav span{font-size:8px}
  .footer-grid{grid-template-columns:1fr!important}.footer-grid>div:first-child{grid-column:auto}
}

@media (prefers-reduced-motion:reduce) and (max-width:767px){
  .main-nav,.swx-mobile-menu-scrim,.swx-mobile-fab{transition:none!important}
  .cards,.project-grid,.blog-grid,.hero-benefits,.hero-tech-panel .tech-list{scroll-behavior:auto}
}