/* Declared here so the browser knows the font from frame 0.
      font-display:swap = use font if available in block period (preloaded, so yes);
      never swap after first render → eliminates FOUT-driven CLS entirely. */
   @font-face{font-family:'Red Hat Display';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/red-hat-display-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
   *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
   html{-webkit-text-size-adjust:100%}
   body{font-family:'Red Hat Display',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:20px;color:#333;background:#fff;overflow-x:hidden}
   img{max-width:100%;border-style:none;vertical-align:middle}
   /* ══════════════════════════════════════════════════════
      NAVBAR - full-width fixed bar, logo left, links right
      ══════════════════════════════════════════════════════ */
   /* 1. Full-width fixed navbar - transparent on hero, white on scroll */
   .nav-wrapper{
     position:fixed!important;left:0!important;right:0!important;top:0!important;
     width:100%!important;height:64px!important;z-index:9999!important;
     display:flex!important;flex-direction:row!important;align-items:center!important;
     padding:0 2vw!important;gap:0!important;
     background:transparent!important;box-shadow:none!important;
     flex:none!important;
     transition:background 0.3s ease,box-shadow 0.3s ease!important;
   }
   /* White background after scroll */
   .nav-wrapper.is-scrolled,
   .nav-wrapper.nevactive{
     background:#fff!important;
     box-shadow:0 1px 3px rgba(0,0,0,.10)!important;
   }
   /* 2. Logo - left side */
   .logo-wrapper{
     position:static!important;height:auto!important;
     display:flex!important;align-items:center!important;
     flex-shrink:0!important;margin-right:auto!important;
     text-decoration:none!important;padding:0!important;
   }
   .logo-img{height:35px!important;width:160px!important;object-fit:contain!important;display:block!important;filter:none!important;transition:filter 0.3s ease!important}
   .nav-wrapper.nevactive .logo-img,
   .nav-wrapper.is-scrolled .logo-img{filter:none!important}
   /* 3. Nav items list */
   .nav-item-wrapper{
     list-style:none!important;margin:0!important;padding:0!important;
     display:flex!important;flex-direction:row!important;
     align-items:center!important;gap:0!important;flex-shrink:0!important;
   }
   /* 4. Nav links - white on transparent hero, dark after scroll */
   .nav-link{padding:0 0.75rem!important;flex-direction:row!important;font-size:0.76rem!important;font-weight:700!important}
   /* Default: white links (hero is dark background) */
   .nav-link.white a{
     color:#fff!important;font-size:0.76rem!important;
     font-weight:700!important;white-space:nowrap!important;letter-spacing:0.03em!important;
     transition:color 0.2s ease!important;
   }
   .nav-link.white a:hover{color:rgba(255,255,255,0.75)!important}
   /* After scroll: dark links on white background */
   .nav-wrapper.nevactive .nav-link.white a,
   .nav-wrapper.is-scrolled .nav-link.white a{color:#0b1726!important}
   .nav-wrapper.nevactive .nav-link.white a:hover,
   .nav-wrapper.is-scrolled .nav-link.white a:hover{color:#003d82!important}
   /* Book a Call button - always visible */
   .nav-desktop .btn.wrapper .btn-text{color:#fff!important}
   /* 5. Hamburger - white on hero, dark after scroll */
   .nav-burger{
     display:none!important;flex-direction:column!important;
     justify-content:center!important;align-items:center!important;
     gap:5px!important;width:40px!important;height:40px!important;
     background:transparent!important;border:none!important;
     border-radius:8px!important;cursor:pointer!important;
     padding:0!important;color:#fff!important;flex-shrink:0!important;
     transition:color 0.2s ease!important;
   }
   .nav-wrapper.nevactive .nav-burger,
   .nav-wrapper.is-scrolled .nav-burger{color:#0b1726!important}
   .burger-bar{display:block!important;width:18px!important;height:2px!important;background:currentColor!important;border-radius:2px!important}
   /* 6. Mobile breakpoint */
   @media(max-width:991px){
     .nav-wrapper{height:56px!important;padding:0 4vw!important}
     .logo-img{height:40px!important;width:182px!important}
     .nav-burger{display:flex!important;border:none!important}
     .nav-item-wrapper li.nav-link{display:none!important}
     .nav-item-wrapper li.nav-desktop{display:none!important}
     .nav-item-wrapper li.nav-burger-wrapper{display:flex!important;align-items:center!important;list-style:none!important}
   }
   /* 6b. Small-laptop breakpoint (992-1149px) - burger instead of the full menu.
      The 8-item menu measures 1168px and neither it nor the logo can shrink
      (both are flex-shrink:0), so below ~1370px the row overflowed the wrapper.
      Because .nav-wrapper is justify-content:flex-end the overflow spilled off
      the LEFT: at 1024px the logo sat at x=-329 (completely off-screen) and
      "Home" / "AI & Automation Services" were clipped. Swap in the burger, but
      keep the 64px desktop navbar height so the body offset still matches. */
   @media(min-width:992px) and (max-width:1149px){
     .nav-burger{display:flex!important;border:none!important}
     .nav-item-wrapper li.nav-link{display:none!important}
     .nav-item-wrapper li.nav-desktop{display:none!important}
     .nav-item-wrapper li.nav-burger-wrapper{display:flex!important;align-items:center!important;list-style:none!important}
   }
   /* 6c. Laptop (1150-1399px) - keep the real menu but tighten it so the whole
      row (logo + 8 links + Book a Call) fits without eating the logo.
      Compressed the menu measures ~963px, which clears 1150px with room spare. */
   @media(min-width:1150px) and (max-width:1399px){
     .nav-wrapper{padding:0 1.25vw!important}
     .logo-img{width:132px!important;height:29px!important}
     .nav-link{padding:0 0.38rem!important;font-size:0.68rem!important;letter-spacing:0!important}
     .nav-link.white a{font-size:0.68rem!important;letter-spacing:0!important}
   }
   @media(max-width:480px){
     .nav-wrapper{height:50px!important;padding:0 4vw!important}
     .logo-img{height:34px!important;width:155px!important}
   }
   /* 7. Body offset */
   body{padding-top:64px!important}
   .section.softto-sec{margin-top:-64px!important;padding-top:calc(4% + 64px)!important}
   @media(max-width:991px){body{padding-top:56px!important}.section.softto-sec{margin-top:-56px!important;padding-top:calc(4% + 56px)!important}}
   @media(max-width:480px){body{padding-top:50px!important}.section.softto-sec{margin-top:-50px!important;padding-top:calc(4% + 50px)!important}}
   /* Hero: full viewport, slides up behind fixed navbar */
   .section.home-mainmate{margin-top:-64px!important;height:100vh!important;box-sizing:border-box!important;padding:calc(64px + 4vw) 5% 2vw!important;overflow:hidden!important}
   @media(max-width:991px){.section.home-mainmate{margin-top:-56px!important;height:100vh!important;padding:calc(56px + 3vw) 5% 2vw!important}}
   @media(max-width:480px){.section.home-mainmate{margin-top:-50px!important;height:100vh!important;padding:calc(50px + 3vw) 4% 2vw!important}}
   .section.home-mainmate.main-index-heading{margin-top:-64px!important;height:100vh!important;padding:calc(64px + 4vw) 5% 2vw!important}
   /* Laptop (992-1400px): tighter content spacing */
   @media(min-width:992px) and (max-width:1400px){
     .section.home-mainmate,.section.home-mainmate.main-index-heading{padding:calc(64px + 2vw) 5% 1.5vw!important}
     .softothemecontent.main-banner-content{margin-top:0.5%!important}
     .home-h1{font-size:clamp(1.6rem,2.4vw,2.6rem)!important;line-height:1.5!important;margin-bottom:0.2em!important}
     .mainmate-softothemecontent{margin-top:0.8vw!important;grid-row-gap:0.6vw!important}
     .p.white.f-bold{font-size:0.8rem!important;line-height:1.5!important}
     .class-btn-call{margin-top:0.6em!important;margin-bottom:0!important}
   }
   /* Mobile: hero auto-height */
   @media(max-width:991px){
     .section.home-mainmate,.section.home-mainmate.main-index-heading{margin-top:-56px!important;height:auto!important;min-height:100vh!important;padding:calc(56px + 3vw) 5% 2vw!important}
   }
   @media(max-width:480px){
     .section.home-mainmate,.section.home-mainmate.main-index-heading{margin-top:-50px!important;padding:calc(50px + 3vw) 4% 2vw!important}
   }
   /* ── Service ticker strip - absolute bottom of hero ── */
   .softo-ticker{position:absolute;bottom:0;left:0;right:0;width:100%;background:rgba(11,23,38,0.92);overflow:hidden;height:44px;display:flex;align-items:center;z-index:2}
   .softo-ticker-track{display:flex;align-items:center;gap:0;white-space:nowrap;animation:softoTicker 28s linear infinite}
   .softo-ticker-track:hover{animation-play-state:paused}
   .softo-ticker-item{display:inline-flex;align-items:center;gap:0.6rem;padding:0 2.2rem;font-family:'Red Hat Display',sans-serif;font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#fff;white-space:nowrap}
   .softo-ticker-dot{width:5px;height:5px;border-radius:50%;background:#2979ff;flex-shrink:0}
   @keyframes softoTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
   @media(max-width:767px){.softo-ticker{height:36px}.softo-ticker-item{font-size:0.68rem;padding:0 1.4rem}}
   /* 8. Mobile nav - raise z-index above our navbar (9999) so it covers it on open */
   .mobile-nav{z-index:10000!important}
   .mobile-nav-inner{z-index:10001!important}
   /* Hero section */
   .section{position:relative;display:flex;overflow:hidden;width:100%;padding:4% 10%;flex-direction:column;align-items:flex-start}
   .section.softto-sec{min-height:60vh;justify-content:center}
   .bg-img{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:0}
   .softothemecontent{position:relative;z-index:1;display:flex;flex-direction:column;width:100%}
   .softothemecontent.softto-sec{margin-top:-5vw}
   /* Hero typography - bigger, more breathing room */
   .home-h1{font-size:clamp(1.9rem,3vw,3.2rem);line-height:1.5;font-weight:900;color:#fff;letter-spacing:-0.5px;margin:0 0 0.3em;font-family:'Red Hat Display',sans-serif}
   .home-h1.typingtext-upper{margin-top:0;margin-bottom:0.3em;line-height:1.5}
   .home-h1 .span{color:#003d82}
   .span{color:#003d82}
   /* Blog post above-fold CLS guard: keep long-title blog heroes and first body
      content in their final layout before deferred style.css is applied. */
   .bp-hero-content{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:.5rem;width:62%!important;margin-top:0!important;position:relative}
   .blog-post-hero-banner .home-h1.bp-hero-title,.cs-hero-banner .home-h1.bp-hero-title{font-size:clamp(1.7rem,2.8vw,3.4rem)!important;line-height:1.13;white-space:normal;overflow-wrap:break-word}
   .bp-meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .75rem;color:rgba(255,255,255,.72);font-size:.88rem;margin-top:.75rem}
   .bp-meta-row strong{color:#fff}.bp-meta-dot{color:rgba(255,255,255,.35)}
   .bp-featured-img-wrap{padding:0 10%;margin-top:-2.5rem;position:relative;z-index:2}
   .bp-featured-img{width:100%;max-height:540px;object-fit:cover;border-radius:14px;display:block;box-shadow:0 16px 48px rgba(0,0,0,.18)}
   .bp-body-section{padding-top:3rem!important;padding-bottom:4rem!important;align-items:center!important}
   .bp-content-col{width:min(70vw,1280px);margin:0 auto}
   .bp-share-bar{display:flex;align-items:center;gap:.6rem;padding:1rem 0 1.5rem;border-bottom:1px solid #e5e7eb;margin-bottom:2.5rem}
   .bp-share-label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin-right:.25rem}
   .bp-share-btn{display:inline-flex;align-items:center;gap:.4em;background:#f3f4f6;color:#374151;font-size:.8rem;font-weight:600;padding:.4em .9em;border-radius:6px;text-decoration:none}
   .bp-share-btn svg{flex-shrink:0}
   .bp-prose{font-size:1.06rem;line-height:1.63;color:#1f2937}
   .bp-prose p{margin:0 0 1rem}.bp-prose h2{margin-top:2rem;margin-bottom:.6rem}.bp-prose h3{margin-top:1.5rem;margin-bottom:.5rem}.bp-prose>*:first-child{margin-top:0}
   .blog-post-prose h2{font-size:1.75rem;line-height:1.3;margin:2.5rem 0 .75rem;font-weight:700;color:#0b1726}
   .blog-post-prose h3{font-size:1.35rem;line-height:1.35;margin:2rem 0 .5rem;font-weight:700;color:#0b1726}
   .blog-post-prose p{margin:0 0 1.25rem}.blog-post-prose ul,.blog-post-prose ol{margin:0 0 1.5rem;padding-left:1.5rem}.blog-post-prose li{margin-bottom:.5rem;line-height:1.7}
   .blog-post-prose a{color:#003D82;text-decoration:underline;text-underline-offset:2px}
   .page-nav-wrapper{display:none!important}
   .btn.wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}
   .btn-text{font-family:'Red Hat Display',sans-serif;color:#fff;font-size:.8vw;line-height:1.2vw;height:1.2vw;font-weight:700;text-align:center;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;transition:transform .35s cubic-bezier(.25,.46,.45,.94)}
   .btn-text-wrapper{display:flex;overflow:hidden;height:1.2vw;flex-direction:column;align-items:center}
   .ss-hero-cta-buttons{display:flex!important;flex-wrap:nowrap!important;gap:.6rem!important;align-items:stretch!important}
   .ss-hero-cta-buttons .btn-text-wrapper{height:32px!important;line-height:32px!important;overflow:hidden!important;flex-direction:column!important;display:flex!important}
   .ss-hero-cta-buttons .btn-text{height:32px!important;min-height:32px!important;line-height:32px!important;display:flex!important;align-items:center!important;gap:.45rem!important;font-size:.8rem!important;white-space:nowrap!important;flex-shrink:0!important}
   .ss-hero-cta-buttons .btn-text svg{width:14px!important;height:14px!important;flex:0 0 14px!important;display:block!important}
   .ss-cta-call .btn-text{color:#003D82!important}.ss-cta-whatsapp .btn-text{color:#fff!important}
   .p{font-size:1vw;line-height:1.6}
   .p.white{color:#fff}
   /* Tablet hero overrides (768-991px) */
   @media(max-width:991px){
     .softothemecontent.mainmate{width:100%}
     .home-h1{font-size:clamp(1.5rem,3.8vw,2.2rem);line-height:1.2}
     .bp-featured-img-wrap{padding:0 6%;margin-top:-1.5rem}
     .bp-content-col{width:min(90vw,880px)}
     .blog-post-hero-banner .home-h1.bp-hero-title,.cs-hero-banner .home-h1.bp-hero-title{font-size:clamp(1.5rem,5vw,2.4rem)}
     .bp-hero-content{width:88%!important}
     .btn-text{line-height:24px;height:24px}
   }
   /* Mobile hero overrides */
   @media(max-width:767px){
     .section{padding:3vh 6%!important}
     #mainmate.section.softto-sec{padding-top:90px!important}
     .softothemecontent.softto-sec{margin-top:0!important}
     .home-h1{font-size:clamp(1.5rem,7vw,2.4rem);line-height:1.2;margin-top:0!important}
     .ss-hero-cta-buttons{flex-direction:column!important;flex-wrap:wrap!important;gap:.6rem!important}
     .ss-hero-cta-buttons .ss-cta-call,.ss-hero-cta-buttons .ss-cta-whatsapp{width:100%!important;min-width:unset!important}
     .ss-hero-cta-buttons .btn-text{white-space:nowrap!important;justify-content:center!important}
     .btn-text{line-height:21px;height:21px}
     .p{font-size:.95rem}
   }
   @media(max-width:479px){
     .bp-content-col{width:92vw}
     .bp-featured-img-wrap{padding:0 4%;margin-top:-1rem}
     .bp-featured-img{border-radius:8px;max-height:260px}
     .bp-hero-content{width:96%!important}
     .blog-post-prose,.bp-prose{font-size:.95rem;line-height:1.7}
   }
   /* Webflow IX2 safety: all [data-w-id] elements visible without Webflow JS.
      IX2 animations replaced by AOS (data-aos). This prevents any element
      left in opacity:0 pre-animation state from becoming permanently hidden. */
   [data-w-id]{opacity:1!important}
   /* Active tab pane always visible (first pane has w--tab-active in HTML) */
   .w-tab-pane{display:none}.w-tab-pane.w--tab-active{display:block}
   /* -��-�� Hide elements that are "display:none" in style.css but invisible in critical CSS.
      Without this they render as block elements, covering content (mobile FCP delay)
      and then vanishing when style.css loads (desktop CLS 1.014). -��-�� */
   /* ── PAGE LOADER ─────────────────────────────────────────────────────────
      White screen + brand logo + guaranteed-circle spinner beneath it.
      Fades out once style.css loads. */
   .preloader{
     position:fixed;left:0;top:0;right:0;bottom:0;z-index:100000;
     display:flex!important;align-items:center;justify-content:center;
     flex-direction:column;gap:20px;
     background:#fff;
     transition:opacity 0.2s ease;
   }
   .preloader.loaded{opacity:0;pointer-events:none}
   .preloader-logo{width:180px;height:auto;display:block}
   /* Dedicated circle spinner  - sized independently of the logo so it is
      always a perfect circle regardless of the logo's aspect ratio. */
   .preloader-spinner{
     width:44px;height:44px;
     flex-shrink:0;
     aspect-ratio:1/1;
     border-radius:50%;
     border:3px solid rgba(0,61,130,.1);
     border-top-color:#003d82;
     border-right-color:rgba(0,61,130,.3);
     animation:ldspin .85s linear infinite;
   }
   @keyframes ldspin{to{transform:rotate(360deg)}}
   /* ── NAV OVERLAY: keep hidden until IS-scrolled (matches style.css rule) ── */
   .nav-overlay{display:none!important;opacity:0!important}
   .nevactive .nav-overlay,.is-scrolled .nav-overlay{display:block!important;opacity:1!important}
   /* ── MEGA MENU: hide when closed, fully interactive when open ─────────── */
   .mega-menu-page--closed{display:none!important}
   /* ── MOBILE NAV: hide when not open ───────────────────────────────────── */
   .mobile-nav:not(.open){display:none!important}
   /* ── OTHER HIDDEN-BY-DEFAULT ELEMENTS ────────────────────────────────── */
   #ck-wrap{display:none}
   .chat-panel{display:none}
   .whatsapp-icon{position:fixed;bottom:20px;right:20px;z-index:9998;background:none;border:none;padding:0;cursor:pointer}
   /* ── CLS PREVENTION: mirror style.css layout rules here so space is reserved
      from first render. Without this, CSS-grid and vw-sized containers start at
      0-height/single-column and jump when style.css loads  - the root cause of CLS 0.816.
      Values are copied exactly from style.css. ── */
   /* ahed-by: two-column grid (left=lottie, right=text) */
   .softothemecontent.ahed-by{display:grid;grid-template-columns:auto auto;grid-column-gap:15vw;width:100%}
   /* Lottie wrapper and container  - reserve exact dimensions */
   .about-product-wrapper{width:32vw;height:32vw}
   .home-product-lottie{width:40vw;height:40vw}
   @media(max-width:991px){
     .softothemecontent.ahed-by{grid-template-columns:auto}
     .about-product-wrapper{width:100%;height:auto}
     .home-product-lottie{width:70vw;height:70vw}
   }
   @media(max-width:767px){
     .home-product-lottie{width:90vw;height:90vw}
   }
   /* Hero accent: user chose logo navy #003d82 (matches brand). Note: low contrast
      on dark hero (1.8:1 fails WCAG AA)  - accepted as a brand-consistency decision. */
   .section.home-mainmate .hero-span,.section.home-mainmate .span{color:#003d82}
   /* CLS: reserve one text-line height for the typing animation before JS runs */
   .home-h1.typingtext-upper{min-height:1.2em}
   /* AOS replaced: only fade-up used across all pages  - native shim in scripts partial */
   [data-aos]{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
   [data-aos].aos-animate{opacity:1;transform:translateY(0)}
   /* ── HOMEPAGE HERO CLS PREVENTION ───────────────────────────────────────────
      style.css applies completely different rules to .section.home-mainmate
      (height:100vh, padding:10vw 5%, flex-direction:row) vs the generic .section
      (padding:4% 10%). Without these rules in critical CSS the hero section
      fully re-layouts when style.css loads → CLS 0.4+.
      Values copied exactly from style.css. ── */
   .section.home-mainmate{height:100vh;padding-top:0;padding-bottom:0;flex-direction:row;align-items:center;background-color:#121212}
   .section.home-mainmate.main-index-heading{padding:10vw 5%}
   @media(max-width:991px){.section.home-mainmate{align-items:flex-start}}
   @media(max-width:767px){.section.home-mainmate{height:auto;min-height:100vh;flex-direction:column}}

   /* ── Accessibility ──────────────────────────────────────────────────
      Skip link (WCAG 2.2 SC 2.4.1 Bypass Blocks). Kept in critical CSS
      because it is the first focusable element on the page and must work
      before style.css arrives. Off-screen until focused, then pinned to the
      top-left above every other layer. ── */
   .skip-link{position:absolute;left:-9999px;top:0;z-index:100000;padding:.8rem 1.4rem;background:#003d82;color:#fff;font-size:.95rem;font-weight:600;text-decoration:none;border-radius:0 0 6px 0}
   .skip-link:focus{left:0}
   /* The skip link moves focus to <main tabindex="-1">. That is programmatic
      focus on a non-interactive container, so it must not draw a ring around
      the whole page. Needs !important to beat the :focus-visible rule below. */
   main#main:focus,main#main:focus-visible{outline:none!important;box-shadow:none!important}

   /* Visible keyboard focus (WCAG 2.2 SC 2.4.7 / 2.4.11). Component rules in
      style.css set outline:none on inputs, tabs and search results, which
      removed the indicator entirely. Restored for keyboard users only, so
      mouse interaction stays visually unchanged. The dark ring plus light
      halo keeps the indicator readable on the light page background and on
      the dark hero and footer sections alike. */
   :focus-visible{outline:3px solid #003d82!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(255,255,255,.95)!important;border-radius:3px}
   .softto-sec :focus-visible,.footer :focus-visible,footer :focus-visible{outline-color:#fff!important;box-shadow:0 0 0 5px rgba(0,61,130,.95)!important}
   @media (forced-colors:active){:focus-visible{outline:3px solid Highlight!important}}
   
[data-aos]{opacity:1!important;transform:none!important;transition:none!important}