:root {
  --navy: #121d37;
  --navy-light: #1a2a50;
  --red: #C52127;
  --red-dark: #9e1a1f;
  --white: #ffffff;
  --off-white: #f8f9fc;
  --gray-100: #f0f2f7;
  --gray-200: #e0e4ef;
  --gray-400: #8892a8;
  --gray-600: #4a5568;
  --teal: #85D0CF;
  --blue-sec: #738FC1;
  --pink-sec: #DB9FC7;
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip prevents horizontal scroll WITHOUT breaking position:sticky
   (overflow-x:hidden on html/body turns them into scroll containers, which
   disables sticky descendants like the products-page category sidebar).
   hidden is kept first as a fallback for browsers without clip support. */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{font-family:'Poppins',sans-serif;background:#fff;color:#1a1a2e;overflow-x:hidden;overflow-x:clip;max-width:100%;position:relative}

/* Language reveal-gate: hide the page until lang.js applies the correct
   language, so visitors never see the authored default flash to the other
   language. Fallback animation reveals after 1.2s even if JS is slow/blocked. */
@keyframes ddsLangReveal{to{opacity:1}}
html:not(.dds-lang-ready) body{opacity:0;animation:ddsLangReveal 0s linear .5s forwards}
html.dds-lang-ready body{opacity:1;transition:opacity .12s ease}
@media(prefers-reduced-motion:reduce){html:not(.dds-lang-ready) body{opacity:1;animation:none}}

/* Mobile typography safety: prevent long words/headings overflowing the screen */
@media(max-width:600px){
  h1,h2,h3{overflow-wrap:break-word}
  h1{font-size:clamp(26px,8vw,34px) !important;line-height:1.14 !important;letter-spacing:-.8px !important}
  h2{font-size:clamp(22px,6.4vw,30px) !important;line-height:1.18 !important}
  /* headings that cap width in ch should use full width on phones */
  .bhg-hero h1,.oc-hero h1,.st-hero h1,.rz-hero h1,.story-h1,.ms-hero h1{max-width:100% !important}
}
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif}

/* ===== RTL GLOBAL OVERRIDES ===== */
html[dir="rtl"] body{font-family:'Noto Kufi Arabic','Poppins',sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h5{font-family:'Noto Kufi Arabic','Montserrat',sans-serif}
/* Headings across the site use Latin-tuned tight line-heights (1.02-1.15) and
   negative letter-spacing, which cramp Noto Kufi Arabic (tall diacritics) and
   don't apply to Arabic script. Relax both globally for RTL. Targets heading
   tags plus the common title/hero-heading class patterns. */
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] [class*="-title"],html[dir="rtl"] [class*="-h1"],
html[dir="rtl"] [class$="-hero"] h1,html[dir="rtl"] [class*="-hero"] h1,
html[dir="rtl"] [class*="-hero"] h2,html[dir="rtl"] [class*="hero-"] h1{
  line-height:1.4;letter-spacing:0}

/* NAV: always LTR regardless of language — logo left, menu center, CTA right */
html[dir="rtl"] .nav-inner{flex-direction:row !important;direction:ltr}
html[dir="rtl"] .nav-logo{margin-right:36px !important;margin-left:0 !important}
html[dir="rtl"] .nav-cta{margin-left:auto !important;margin-right:0 !important}
html[dir="rtl"] .nav-menu{direction:ltr}
html[dir="rtl"] .nav-link{direction:ltr;unicode-bidi:plaintext}
/* Mega menus: keep them centred below their trigger, LTR */
html[dir="rtl"] .mega-menu{left:50% !important;right:auto !important;transform:translateX(-50%) !important;direction:ltr}
/* AR/EN + country switcher stay in their natural left-to-right slot */
html[dir="rtl"] #langToggleBtn{margin-right:0;margin-left:0}
html[dir="rtl"] #dds-country-switcher{margin-right:0}

html[dir="rtl"] .section-header.center{text-align:center}
html[dir="rtl"] .section-eyebrow{text-align:inherit}
html[dir="rtl"] .hero-actions{flex-direction:row-reverse}
/* Arabic (Noto Kufi) has tall ascenders and diacritics, so the Latin-tuned
   tight line-heights make the lines nearly touch. Give RTL hero text room. */
html[dir="rtl"] .hero-title{line-height:1.35}
html[dir="rtl"] .hero-desc{line-height:1.9}
/* Breadcrumb: reverse flow for RTL — items read right→left */
html[dir="rtl"] .breadcrumb{flex-direction:row-reverse;justify-content:flex-start}
html[dir="rtl"] .breadcrumb a,html[dir="rtl"] .breadcrumb span{font-family:'Noto Kufi Arabic','Poppins',sans-serif}
/* Inner-hero: right-align all text and metrics */
html[dir="rtl"] .inner-hero .container{text-align:right}
html[dir="rtl"] .inner-title{text-align:right}
html[dir="rtl"] .inner-sub{text-align:right;margin-left:auto;margin-right:0}
html[dir="rtl"] .inner-metrics{flex-direction:row-reverse;justify-content:flex-end}
html[dir="rtl"] .inner-metric{text-align:right}
html[dir="rtl"] .section-eyebrow{text-align:right}
html[dir="rtl"] .footer-top{direction:rtl}
html[dir="rtl"] .footer-bottom{flex-direction:row-reverse}
html[dir="rtl"] .challenge-dot{margin-left:0;margin-right:0}
html[dir="rtl"] .service-card::before{left:auto;right:0}
/* RTL (Arabic): keep all floating widgets on the LEFT so they sit opposite
   the right-aligned Arabic text. Live-chat sidebar + WhatsApp button. */
html[dir="rtl"] #liveChatBar{right:auto !important;left:0 !important;border-radius:0 8px 8px 0}
html[dir="rtl"] #liveChatBar > div{border-radius:0 8px 8px 0}
html[dir="rtl"] #liveChatFab{right:auto !important;left:20px !important}
html[dir="rtl"] #liveChatPanel{right:auto !important;left:56px !important}
/* WhatsApp floating button → bottom-LEFT corner in RTL (inline-styled right:… per page).
   align-items:flex-start pins the button to the left edge of its column so it
   sits tight in the corner and clears the hero stat cards. */
html[dir="rtl"] .wa-float{right:auto !important;left:16px !important;bottom:24px !important;direction:ltr !important;align-items:flex-start !important}
html[dir="rtl"] .wa-btn{align-self:flex-start !important}
html[dir="rtl"] .wa-bubble{transform-origin:bottom left !important;align-self:flex-start !important}
@media(max-width:480px){html[dir="rtl"] .wa-float{left:12px !important;right:auto !important}}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08);transition:background .3s}
nav.scrolled{background:rgba(18,29,55,.97);backdrop-filter:blur(12px)}

/* ===== GLASS NAV (floating frosted pill, site-wide) ===== */
nav#mainNav.nav-glass{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);right:auto;
  width:calc(100% - 32px);max-width:1320px;
  background:rgba(18,29,55,.55);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 8px 30px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .3s ease, box-shadow .3s ease, top .3s ease, border-radius .3s ease, width .3s ease;
}
nav#mainNav.nav-glass .nav-inner{height:60px}
/* Scrolled: settle tighter to the top, denser glass, deeper shadow */
nav#mainNav.nav-glass.is-scrolled{
  top:8px;
  width:calc(100% - 20px);
  background:rgba(14,23,46,.82);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
}
nav#mainNav.nav-glass.is-scrolled .nav-inner{height:54px}
/* The mega panel must align under the floating pill */
nav#mainNav.nav-glass .v2-mega-panel{border-radius:16px}
@media(max-width:720px){
  nav#mainNav.nav-glass{top:8px;width:calc(100% - 16px);border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  nav#mainNav.nav-glass{transition:none}
}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:68px;gap:0}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:36px;flex-shrink:0}
.logo-icon{width:36px;height:36px;position:relative}
.logo-text{font-family:'Montserrat',sans-serif;font-weight:900;font-size:22px;color:#fff;letter-spacing:-.5px}
.logo-text span{color:var(--red)}
.logo-sub{font-family:'Poppins',sans-serif;font-size:8px;color:var(--gray-400);letter-spacing:2px;text-transform:uppercase;margin-top:-2px}
.logo-group{display:flex;flex-direction:column}
.nav-menu{display:flex;align-items:center;list-style:none;gap:2px;flex:1}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:5px;padding:8px 14px 10px;color:rgba(255,255,255,.85);font-size:13.5px;font-weight:500;text-decoration:none;border-radius:6px;transition:all .2s;cursor:pointer;white-space:nowrap;font-family:'Poppins',sans-serif}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.1)}
.nav-link svg{width:11px;height:11px;transition:transform .2s;flex-shrink:0}
.nav-item:hover .nav-link svg{transform:rotate(180deg)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn-nav{padding:9px 20px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:'Poppins',sans-serif;text-decoration:none;white-space:nowrap}
.btn-outline{border:1.5px solid rgba(255,255,255,.4);color:#fff;background:transparent}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-primary{background:var(--red);color:#fff;border:1.5px solid var(--red)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark)}

/* Mega Menu */
.mega-menu{position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);background:var(--navy-light);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px;min-width:220px;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s;pointer-events:none;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.nav-item:hover .mega-menu{opacity:1;visibility:visible;pointer-events:all;transition:opacity .15s ease,visibility 0s linear 0s}
.mega-menu.wide{min-width:560px;display:grid;grid-template-columns:1fr 1fr}
.mega-col h6{font-size:10px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;font-family:'Montserrat',sans-serif}
.mega-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:rgba(255,255,255,.8);font-size:13px;text-decoration:none;transition:all .2s;cursor:pointer;font-family:'Poppins',sans-serif}
.mega-link:hover{background:rgba(255,255,255,.08);color:#fff}
.mega-link-icon{width:28px;height:28px;border-radius:6px;background:rgba(197,33,39,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.mega-divider{height:1px;background:rgba(255,255,255,.07);margin:8px 0}

/* ===== MOBILE NAV (hamburger + drawer) ===== */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0;
  background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:9px;cursor:pointer;flex-shrink:0}
.nav-burger:focus-visible{border-color:var(--red);box-shadow:0 0 0 3px rgba(197,33,39,.25);outline:none}
.nav-burger-bar{display:block;width:18px;height:2px;margin:0 auto;background:#fff;border-radius:2px;
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s}
.nav-burger-bar.b1.open{transform:translateY(7px) rotate(45deg)}
.nav-burger-bar.b2.open{opacity:0}
.nav-burger-bar.b3.open{transform:translateY(-7px) rotate(-45deg)}

.nav-mobile-scrim{position:fixed;inset:0;z-index:998;background:rgba(8,14,30,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.nav-mobile-scrim.is-open{opacity:1;visibility:visible;transition:opacity .3s ease}

.nav-mobile{position:fixed;top:0;right:0;z-index:999;height:100dvh;width:min(86vw,360px);
  background:linear-gradient(180deg,#16233f,#0d1830);border-left:1px solid rgba(255,255,255,.1);
  box-shadow:-20px 0 60px -20px rgba(0,0,0,.6);
  transform:translateX(101%);transition:transform .34s cubic-bezier(.4,0,.2,1),visibility 0s linear .34s;
  visibility:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:84px 18px 32px}
.nav-mobile.is-open{transform:translateX(0);visibility:visible;transition:transform .34s cubic-bezier(.4,0,.2,1)}
html[dir="rtl"] .nav-mobile{right:auto;left:0;border-left:none;border-right:1px solid rgba(255,255,255,.1);transform:translateX(-101%)}
html[dir="rtl"] .nav-mobile.is-open{transform:translateX(0)}

/* The floating WhatsApp button is z-index:9999 — above the drawer's 999 — so
   while the drawer is open it sits over the menu and swallows taps on whatever
   item falls beneath it (Resources, once another submenu is expanded). Hide it
   for as long as the drawer is open. */
body:has(#navMobile.is-open) .wa-float{opacity:0;visibility:hidden;pointer-events:none}
.wa-float{transition:opacity .2s ease,visibility .2s ease}

.nav-mobile-list{display:flex;flex-direction:column;gap:2px}
.nm-link,.nm-acc{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 16px;background:transparent;border:none;border-radius:11px;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:16px;font-weight:600;color:#fff;text-decoration:none;text-align:left;
  transition:background .18s}
html[dir="rtl"] .nm-link,html[dir="rtl"] .nm-acc{text-align:right}
.nm-link:hover,.nm-acc:hover{background:rgba(255,255,255,.07)}
.nm-acc svg{width:12px;height:12px;color:rgba(255,255,255,.6);transition:transform .25s}
/* open top-level item (DDS / Huawei / Odoo / Resources): red-tinted highlight */
.nm-acc.is-open{background:rgba(197,33,39,.16);color:#fff}
.nm-acc.is-open svg{transform:rotate(180deg);color:var(--red)}
/* its dropdown sits on a darker inset panel with a red accent so the
   sub-links clearly read as a nested level (applies to DDS/Odoo/Resources) */
.nm-sub{display:flex;flex-direction:column;padding:6px 6px;margin:4px 0 6px;
  background:rgba(0,0,0,.22);border-radius:12px;border:1px solid rgba(255,255,255,.06)}
.nm-sub:not(.nm-sub-nested) a{position:relative;display:block;margin:0 6px;padding:11px 14px 11px 26px;color:rgba(255,255,255,.7);font-size:14px;text-decoration:none;border-radius:8px;
  font-family:'Poppins',sans-serif;border-left:2px solid rgba(197,33,39,.5)}
html[dir="rtl"] .nm-sub:not(.nm-sub-nested) a{padding:11px 26px 11px 14px;border-left:none;border-right:2px solid rgba(197,33,39,.5)}
.nm-sub a:hover{background:rgba(255,255,255,.07);color:#fff}
.nm-sub a b{font-weight:700;color:#fff}
/* nested 2nd-level (category → sub → sub) */
/* nested sub-category panel gets a distinct darker inset surface so the
   hierarchy (main item → sub-category → links) is clearly readable */
.nm-sub-nested{padding:6px 6px 8px;margin:4px 0 6px;background:rgba(0,0,0,.22);border-radius:12px;
  border:1px solid rgba(255,255,255,.06)}
.nm-acc2{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px;
  background:transparent;border:none;border-radius:9px;cursor:pointer;color:rgba(255,255,255,.92);text-align:left;
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:600}
html[dir="rtl"] .nm-acc2{text-align:right}
.nm-acc2:hover{background:rgba(255,255,255,.06)}
.nm-acc2 svg{width:11px;height:11px;color:rgba(255,255,255,.45);transition:transform .25s}
/* open sub-category: red-tinted highlight + red label so it stands out */
.nm-acc2.is-open{background:rgba(197,33,39,.16);color:#fff}
.nm-acc2.is-open svg{transform:rotate(180deg);color:var(--red)}
.nm-sub2{display:flex;flex-direction:column;padding:2px 0 6px;margin:0 6px 4px;
  border-left:2px solid rgba(197,33,39,.5)}
html[dir="rtl"] .nm-sub2{border-left:none;border-right:2px solid rgba(197,33,39,.5)}
.nm-sub2 a{display:block;padding:10px 14px 10px 26px;color:rgba(255,255,255,.66);font-size:13.5px;text-decoration:none;border-radius:8px;font-family:'Poppins',sans-serif}
html[dir="rtl"] .nm-sub2 a{padding:10px 26px 10px 14px}
.nm-sub2 a:hover{background:rgba(255,255,255,.07);color:#fff}
.nm-sub2 a b{color:#fff;font-weight:700}
.nm-contact{margin-top:16px;justify-content:center;text-align:center;font-size:15px;padding:14px}
/* Login sits under Contact in the drawer — same shape, quieter weight */
.nm-login{margin-top:10px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;padding:14px}
/* The sign-in arrow points "into" the app, so it follows reading direction */
html[dir="rtl"] .nav-login-desktop svg,html[dir="rtl"] .nm-login svg{transform:scaleX(-1)}

/* Toggle desktop vs mobile nav */
@media (max-width: 960px){
  .nav-menu{display:none !important}
  .nav-contact-desktop{display:none !important}
  /* Below 960px the drawer carries Login instead */
  .nav-login-desktop{display:none !important}
  .nav-burger{display:flex}
  .nav-logo{margin-right:0 !important}
  /* Match the specificity of the RTL rule above, or its 36px margin survives
     here and pushes the burger past the right edge on narrow screens. */
  html[dir="rtl"] .nav-logo{margin-right:0 !important}
  .nav-cta{margin-left:auto}
  .v2-mega-panel{display:none !important}
}
@media (min-width: 961px){
  .nav-burger,.nav-mobile,.nav-mobile-scrim{display:none !important}
}

/* Very narrow phones (≤360px): the logo image is ~168px wide and .nav-logo is
   flex-shrink:0, leaving too little room for the CTA cluster — the burger ends
   up clipped. Scale the logo down so everything fits. The !important overrides
   the inline height on the <img> injected by nav-v2.js. */
@media (max-width: 360px){
  .nav-inner{padding:0 12px}
  .nav-logo img{height:32px !important}
  .nav-cta{gap:6px}
}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;height:100vh;max-height:920px;display:flex;align-items:stretch;overflow:hidden;padding-top:40px;
  background:
    radial-gradient(900px 600px at 78% 18%, rgba(197,33,39,.16), transparent 60%),
    radial-gradient(800px 620px at 12% 92%, rgba(133,208,207,.10), transparent 65%),
    linear-gradient(165deg,#16233f 0%,#101c34 45%,var(--navy) 100%)}
@media(max-width:980px){.hero{height:auto;max-height:none;min-height:0}}
/* Interactive starfield canvas — sits above gradient, below content */
.hero canvas.hero-stars{position:absolute;inset:0;z-index:1;pointer-events:none;display:block}
/* Signature: glowing 3D DDS cube icon, floating in clear upper-right space */
.hero-cube{position:absolute;z-index:1;top:6%;right:5%;width:clamp(220px,26vw,400px);pointer-events:none;
  filter:drop-shadow(0 24px 50px rgba(197,33,39,.40));
  animation:heroCubeFloat 9s ease-in-out infinite}
.hero-cube img,.hero-cube svg{width:100%;height:auto;display:block}
@keyframes heroCubeFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-22px) rotate(1.5deg)}}
@media(max-width:980px){.hero-cube{opacity:.45;top:4%;right:-6%;width:240px}}
@media(prefers-reduced-motion:reduce){.hero-cube{animation:none}}

/* Hero layout: grid fills the full viewport height. The left column's
   content (eyebrow → title → paragraph → CTA) flows together and is
   vertically centred for balanced spacing; the stats grid is bottom-aligned. */
.hero-grid{max-width:1320px;margin:0 auto;padding:48px 40px 48px;width:100%;
  display:grid;grid-template-columns:1.7fr 1fr;gap:56px;align-items:stretch;
  position:relative;z-index:2}
/* Left column: grouped + vertically centred (no forced void before the CTA).
   align-items:flex-start keeps the eyebrow pill hugging its content.
   Right column pins the stats grid to the bottom. Scoped under .hero-grid
   to beat the legacy .hero-right rule below. */
.hero-grid .hero-left{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hero-grid .hero-right{position:static;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:28px;padding:88px 20px 48px}
  .hero-grid .hero-left{justify-content:flex-start}
  .hero-grid .hero-right{justify-content:flex-start}
}
.hero-bg-pattern{position:absolute;right:-60px;top:0;bottom:0;width:55%;opacity:.07;background-image:repeating-linear-gradient(0deg,transparent,transparent 34px,rgba(197,33,39,.6) 34px,rgba(197,33,39,.6) 35px),repeating-linear-gradient(90deg,transparent,transparent 34px,rgba(197,33,39,.6) 34px,rgba(197,33,39,.6) 35px);pointer-events:none}
.hero-squares{position:absolute;right:0;top:0;bottom:0;width:50%;overflow:hidden;opacity:.12;pointer-events:none}
.sq-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding:40px 20px;height:100%;align-content:center}
.sq{border:2px solid var(--red);border-radius:4px;aspect-ratio:1;animation:sqPulse 3s ease-in-out infinite}
.sq:nth-child(odd){animation-delay:.5s}
.sq:nth-child(3n){animation-delay:1s}
@keyframes sqPulse{0%,100%{opacity:.3}50%{opacity:.8}}
.hero-content{max-width:1280px;margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2;width:100%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(197,33,39,.15);border:1px solid rgba(197,33,39,.3);border-radius:20px;padding:6px 16px;margin-bottom:24px}
.hero-eyebrow span{font-size:12px;font-weight:600;color:var(--red);letter-spacing:1px;text-transform:uppercase;font-family:'Montserrat',sans-serif}.hero-eyebrow span[style]{color:inherit}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.5s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
h1.hero-title{font-size:clamp(36px,3.7vw,56px);font-weight:900;color:#fff;line-height:1.06;letter-spacing:-1.5px;margin-bottom:18px;max-width:none;white-space:nowrap}
@media(max-width:980px){h1.hero-title{white-space:normal}}
h1.hero-title em{color:var(--red);font-style:normal}
.hero-desc{font-size:16px;color:rgba(255,255,255,.72);line-height:1.6;max-width:540px;margin-bottom:26px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;border:none;font-family:'Poppins',sans-serif}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(197,33,39,.35)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.5)}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.stat-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:16px 20px}
.stat-num{font-family:'Montserrat',sans-serif;font-size:28px;font-weight:900;color:#fff;letter-spacing:-1px}
.stat-num em{color:var(--red);font-style:normal}
.stat-label{font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}
.hero-right{position:relative;display:flex;justify-content:center;align-items:center}
.hero-visual{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px;width:100%;max-width:420px}
.hv-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(197,33,39,.12);border:1px solid rgba(197,33,39,.25);border-radius:8px;padding:8px 14px;margin-bottom:20px}
.hv-badge-text{font-size:12px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.5px;font-family:'Montserrat',sans-serif}
.hv-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:6px;font-family:'Montserrat',sans-serif}
.hv-sub{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:20px}
.hv-metrics{display:flex;flex-direction:column;gap:10px}
.hv-metric{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.05);border-radius:8px}
.hv-metric-icon{width:32px;height:32px;border-radius:7px;background:rgba(197,33,39,.2);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.hv-metric-val{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;color:#fff}
.hv-metric-lbl{font-size:11px;color:rgba(255,255,255,.5)}

/* ===== TRUST BAR ===== */
.trust-bar{background:var(--off-white);border-bottom:1px solid var(--gray-200);padding:20px 0}
.trust-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.trust-label{font-size:11px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:2px;font-family:'Montserrat',sans-serif;white-space:nowrap}
.trust-badges{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.trust-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#fff;border:1px solid var(--gray-200);border-radius:8px}
.trust-badge-text{font-size:12px;font-weight:700;color:var(--navy);font-family:'Montserrat',sans-serif}
.trust-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}

/* ===== SECTION COMMONS ===== */
section{padding:80px 0}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.section-eyebrow{font-size:11px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:2px;font-family:'Montserrat',sans-serif;margin-bottom:12px}
.section-title{font-size:clamp(28px,3.5vw,44px);font-weight:900;color:var(--navy);letter-spacing:-1px;line-height:1.1;margin-bottom:16px}
.section-title.light{color:#fff}
.section-desc{font-size:16px;color:var(--gray-600);line-height:1.7;max-width:540px}
.section-desc.light{color:rgba(255,255,255,.7)}
.section-header{margin-bottom:52px}
.section-header.center{text-align:center}
.section-header.center .section-desc{margin:0 auto}

/* ===== SERVICES ===== */
.services-section{background:#fff}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card{border:1px solid var(--gray-200);border-radius:16px;padding:32px;transition:all .3s;cursor:pointer;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transition:transform .3s}
.service-card:hover{border-color:var(--red);box-shadow:0 12px 40px rgba(197,33,39,.1);transform:translateY(-4px)}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{width:52px;height:52px;border-radius:12px;background:rgba(197,33,39,.08);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px;transition:background .3s}
.service-card:hover .service-icon{background:rgba(197,33,39,.15)}
.service-title{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:10px;font-family:'Montserrat',sans-serif}
.service-desc{font-size:14px;color:var(--gray-600);line-height:1.6}
.service-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-size:13px;font-weight:600;margin-top:16px;font-family:'Montserrat',sans-serif}

/* ===== INDUSTRIES ===== */
.industries-section{background:var(--gray-100)}
.industries-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.industry-card{background:#fff;border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:all .3s;cursor:pointer;border:1px solid transparent}
.industry-card:hover{border-color:var(--red);box-shadow:0 8px 30px rgba(197,33,39,.1);transform:translateY(-3px)}
.industry-icon{font-size:28px}
.industry-name{font-size:15px;font-weight:700;color:var(--navy);font-family:'Montserrat',sans-serif}
.industry-desc{font-size:13px;color:var(--gray-600);line-height:1.5}
.industry-link{font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.5px;font-family:'Montserrat',sans-serif}

/* ===== CASE STUDIES ===== */
.cases-section{background:var(--navy);position:relative;overflow:hidden}
.cases-section::before{content:'';position:absolute;right:0;top:0;bottom:0;width:40%;opacity:.05;background-image:repeating-linear-gradient(0deg,transparent,transparent 34px,rgba(255,255,255,.8) 34px,rgba(255,255,255,.8) 35px),repeating-linear-gradient(90deg,transparent,transparent 34px,rgba(255,255,255,.8) 34px,rgba(255,255,255,.8) 35px)}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:24px;transition:all .3s;cursor:pointer}
.case-card:hover{background:rgba(255,255,255,.1);border-color:rgba(197,33,39,.4);transform:translateY(-3px)}
.case-tag{font-size:10px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:1.5px;font-family:'Montserrat',sans-serif;margin-bottom:12px}
.case-client{font-size:16px;font-weight:700;color:#fff;font-family:'Montserrat',sans-serif;margin-bottom:8px}
.case-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5;margin-bottom:16px}
.case-metrics{display:flex;gap:16px}
.case-metric{text-align:center}
.case-metric-val{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:900;color:var(--red)}
.case-metric-lbl{font-size:11px;color:rgba(255,255,255,.5)}

/* ===== DARK SECTION ===== */
.dark-section{background:var(--navy);color:#fff}

/* ===== CTA SECTION ===== */
.cta-section{background:var(--red);padding:72px 0}
.cta-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-title{font-size:clamp(24px,3vw,38px);font-weight:900;color:#fff;letter-spacing:-.5px;margin-bottom:8px;font-family:'Montserrat',sans-serif}
.cta-sub{font-size:15px;color:rgba(255,255,255,.8)}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;flex-shrink:0}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{background:var(--off-white)}
.btn-white-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.btn-white-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ===== INNER PAGES ===== */
.inner-hero{background:var(--navy);padding:120px 0 72px;position:relative;overflow:hidden}
.inner-hero::after{content:'';position:absolute;right:0;top:0;bottom:0;width:35%;opacity:.08;background-image:repeating-linear-gradient(0deg,transparent,transparent 34px,rgba(197,33,39,.6) 34px,rgba(197,33,39,.6) 35px),repeating-linear-gradient(90deg,transparent,transparent 34px,rgba(197,33,39,.6) 34px,rgba(197,33,39,.6) 35px)}
.inner-hero .container{position:relative;z-index:2}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.breadcrumb a,.breadcrumb span{font-size:12px;color:rgba(255,255,255,.5);font-family:'Poppins',sans-serif;cursor:pointer}
.breadcrumb a:hover{color:rgba(255,255,255,.9)}
.breadcrumb-sep{color:rgba(255,255,255,.3);font-size:12px}
.inner-title{font-size:clamp(32px,4vw,52px);font-weight:900;color:#fff;letter-spacing:-1.5px;margin-bottom:16px}
.inner-sub{font-size:17px;color:rgba(255,255,255,.7);line-height:1.6;max-width:600px;margin-bottom:32px}
.inner-metrics{display:flex;gap:32px;flex-wrap:wrap}
.inner-metric{text-align:left}
.inner-metric-val{font-family:'Montserrat',sans-serif;font-size:28px;font-weight:900;color:#fff}
.inner-metric-val em{color:var(--red);font-style:normal}
.inner-metric-lbl{font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}

/* ── V2 hero treatment for the regional Huawei Cloud pages ──────────
   Scoped to .hc-region-hero so only KSA/Egypt heroes are restyled to
   match the site's V2 look. All page content/markup stays the same. */
.inner-hero.hc-region-hero{
  padding:140px 0 88px;
  background:
    radial-gradient(900px 600px at 80% 12%, rgba(197,33,39,.18), transparent 60%),
    radial-gradient(760px 560px at 8% 95%, rgba(133,208,207,.10), transparent 65%),
    linear-gradient(165deg,#16233f 0%,#101c34 45%,var(--navy) 100%);
}
.inner-hero.hc-region-hero::after{opacity:.05}
/* eyebrow → glass pill */
.inner-hero.hc-region-hero .section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  background:rgba(197,33,39,.14);border:1px solid rgba(197,33,39,.32);
  color:#fff !important;font-size:11px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:22px;
}
.inner-hero.hc-region-hero .inner-title{
  font-size:clamp(36px,4.4vw,60px);letter-spacing:-1.8px;line-height:1.06;
}
.inner-hero.hc-region-hero .inner-sub{max-width:640px;font-size:17px;line-height:1.7}
/* metrics → V2 spec cards */
.inner-hero.hc-region-hero .inner-metrics{
  gap:16px;margin-top:36px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px;
}
.inner-hero.hc-region-hero .inner-metric{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:18px 20px;
}
.inner-hero.hc-region-hero .inner-metric-val{font-size:30px;letter-spacing:-.8px}
@media(max-width:720px){
  .inner-hero.hc-region-hero{padding:120px 0 64px}
  .inner-hero.hc-region-hero .inner-metrics{grid-template-columns:1fr 1fr}
}

/* ===== CHALLENGES ===== */
.challenges-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.challenge-item{display:flex;align-items:flex-start;gap:12px;padding:18px;background:var(--gray-100);border-radius:10px}
.challenge-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:6px}
.challenge-text{font-size:14px;color:var(--gray-600);line-height:1.5}

/* ===== SOLUTIONS ===== */
.solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.solution-card{background:#fff;border:1px solid var(--gray-200);border-radius:14px;padding:24px;transition:all .25s}
.solution-card:hover{border-color:var(--red);box-shadow:0 8px 30px rgba(197,33,39,.08)}
.solution-icon{width:44px;height:44px;border-radius:10px;background:rgba(197,33,39,.08);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
.solution-name{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px;font-family:'Montserrat',sans-serif}
.solution-items{list-style:none}
.solution-items li{font-size:13px;color:var(--gray-600);padding:3px 0;display:flex;align-items:center;gap:8px}
.solution-items li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--red);flex-shrink:0}

/* ===== CASE STUDY BLOCK ===== */
.case-study-block{background:var(--navy-light);border-radius:20px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cs-label{font-size:10px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:2px;font-family:'Montserrat',sans-serif;margin-bottom:12px}
.cs-title{font-size:22px;font-weight:800;color:#fff;font-family:'Montserrat',sans-serif;margin-bottom:16px}
.cs-text{font-size:14px;color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:20px}
.cs-section-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px;font-family:'Montserrat',sans-serif;margin-bottom:8px;margin-top:16px}
.cs-bullets{list-style:none}
.cs-bullets li{font-size:13px;color:rgba(255,255,255,.7);padding:3px 0;display:flex;align-items:center;gap:8px}
.cs-bullets li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--red);flex-shrink:0}
.cs-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cs-result-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;text-align:center}
.cs-result-val{font-family:'Montserrat',sans-serif;font-size:32px;font-weight:900;color:var(--red)}
.cs-result-lbl{font-size:12px;color:rgba(255,255,255,.6);margin-top:4px}

/* ===== PARTNER PAGE ===== */
.journey-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.journey-steps::before{content:'';position:absolute;top:28px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--red),rgba(197,33,39,.3))}
.journey-step{text-align:center;padding:0 16px;position:relative;z-index:2}
.step-num{width:56px;height:56px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:18px;font-weight:900;color:#fff;margin:0 auto 16px}
.step-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px;font-family:'Montserrat',sans-serif}
.step-desc{font-size:12px;color:var(--gray-600);line-height:1.5}
.enablement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.enablement-card{background:var(--off-white);border-radius:16px;padding:28px;border:1px solid var(--gray-200);transition:all .3s}
.enablement-card:hover{border-color:var(--red);box-shadow:0 8px 30px rgba(197,33,39,.08)}
.enablement-icon{font-size:28px;margin-bottom:16px}
.enablement-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:10px;font-family:'Montserrat',sans-serif}
.enablement-list{list-style:none}
.enablement-list li{font-size:13px;color:var(--gray-600);padding:4px 0;display:flex;align-items:center;gap:8px}
.enablement-list li::before{content:'✓';color:var(--red);font-weight:700;font-size:12px}

/* ===== ERP ===== */
.modules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.module-chip{background:var(--gray-100);border:1px solid var(--gray-200);border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:10px;transition:all .2s;cursor:pointer}
.module-chip:hover{border-color:var(--red);background:rgba(197,33,39,.04)}
.module-chip-icon{font-size:18px}
.module-chip-name{font-size:13px;font-weight:600;color:var(--navy);font-family:'Montserrat',sans-serif}
.impl-steps{display:flex;flex-direction:column;gap:0}
.impl-step{display:flex;gap:24px;position:relative}
.impl-step::before{content:'';position:absolute;left:20px;top:48px;bottom:0;width:2px;background:var(--gray-200)}
.impl-step:last-child::before{display:none}
.impl-num{width:42px;height:42px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:900;color:#fff;flex-shrink:0;margin-top:2px;position:relative;z-index:2}
.impl-body{padding-bottom:32px;flex:1}
.impl-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px;font-family:'Montserrat',sans-serif}
.impl-desc{font-size:14px;color:var(--gray-600);line-height:1.6}

/* ===== ABOUT ===== */
.timeline{display:flex;flex-direction:column;gap:0;max-width:700px}
.timeline-item{display:flex;gap:24px;padding-bottom:32px;position:relative}
.timeline-item::before{content:'';position:absolute;left:12px;top:28px;bottom:0;width:2px;background:var(--gray-200)}
.timeline-item:last-child::before{display:none}
.timeline-dot{width:26px;height:26px;border-radius:50%;background:var(--red);flex-shrink:0;position:relative;z-index:2;margin-top:4px}
.timeline-content{}
.timeline-year{font-size:12px;font-weight:700;color:var(--red);font-family:'Montserrat',sans-serif;margin-bottom:4px}
.timeline-text{font-size:14px;color:var(--gray-600);line-height:1.6}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.pillar-card{background:var(--navy);border-radius:16px;padding:32px;color:#fff}
.pillar-icon{font-size:32px;margin-bottom:16px}
.pillar-title{font-size:18px;font-weight:800;color:#fff;font-family:'Montserrat',sans-serif;margin-bottom:12px}
.pillar-list{list-style:none}
.pillar-list li{font-size:13px;color:rgba(255,255,255,.7);padding:4px 0;display:flex;align-items:center;gap:8px}
.pillar-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--red);flex-shrink:0}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:start}
.contact-info-card{background:var(--navy);border-radius:16px;padding:40px;color:#fff}
.contact-info-title{font-size:22px;font-weight:800;color:#fff;font-family:'Montserrat',sans-serif;margin-bottom:8px}
.contact-info-sub{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:32px;line-height:1.6}
.contact-detail{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.contact-detail-icon{width:38px;height:38px;border-radius:8px;background:rgba(197,33,39,.2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.contact-detail-label{font-size:11px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px;font-family:'Montserrat',sans-serif;margin-bottom:3px}
.contact-detail-val{font-size:14px;color:#fff}
.contact-form{}
/* Shared lead-form card (injected by lead-form.js). White card so the
   official form reads identically on light or dark section backgrounds. */
.lead-form-card{background:#fff;border-radius:20px;padding:32px;box-shadow:0 30px 70px -28px rgba(0,0,0,.5);max-width:640px}
.lead-form-card .form-grid{margin-bottom:0}
@media(max-width:640px){.lead-form-card{padding:24px 20px}}
.form-title{font-size:24px;font-weight:800;color:var(--navy);font-family:'Montserrat',sans-serif;margin-bottom:6px}
.form-sub{font-size:14px;color:var(--gray-600);margin-bottom:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-group.full{grid-column:1/-1}
.form-label{font-size:13px;font-weight:600;color:var(--navy);font-family:'Poppins',sans-serif}
.form-input{width:100%;box-sizing:border-box;max-width:100%;padding:12px 16px;border:1.5px solid var(--gray-200);border-radius:8px;font-size:14px;font-family:'Poppins',sans-serif;color:var(--navy);transition:border-color .2s;outline:none;background:#fff}
.form-input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(197,33,39,.08)}
textarea.form-input{resize:vertical;min-height:120px}
select.form-input{cursor:pointer}
.form-submit{width:100%;padding:14px;background:var(--red);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif;transition:all .2s;margin-top:8px}
.form-submit:hover{background:var(--red-dark);transform:translateY(-1px)}

/* ===== FOOTER ===== */
footer{background:#0a1228;padding:60px 0 30px}
.footer-inner{max-width:1280px;margin:0 auto;padding:0 24px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand-desc{font-size:13px;color:rgba(255,255,255,.45);line-height:1.7;margin-top:16px;max-width:240px}
.footer-col-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;font-family:'Montserrat',sans-serif}
.footer-link{display:block;font-size:13px;color:rgba(255,255,255,.5);text-decoration:none;padding:3px 0;cursor:pointer;transition:color .2s;font-family:'Poppins',sans-serif}
.footer-link:hover{color:rgba(255,255,255,.9)}
.footer-social a{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:transform .2s cubic-bezier(.34,1.45,.6,1),background .2s ease,color .2s ease,border-color .2s ease}
.footer-social a:hover{color:#fff;background:var(--red,#C52127);border-color:var(--red,#C52127);transform:translateY(-2px)}
.footer-social a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.3);font-family:'Poppins',sans-serif}
.footer-cert{display:flex;gap:10px;flex-wrap:wrap}
.cert-badge{padding:4px 12px;border:1px solid rgba(255,255,255,.15);border-radius:20px;font-size:11px;color:rgba(255,255,255,.5);font-family:'Montserrat',sans-serif;font-weight:600}

/* ===== MISC ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.two-col-right{display:flex;flex-direction:column;gap:16px}
.why-item{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:10px;transition:background .2s}
.why-item:hover{background:var(--gray-100)}
.why-icon{width:40px;height:40px;border-radius:9px;background:rgba(197,33,39,.1);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.why-title{font-size:14px;font-weight:700;color:var(--navy);font-family:'Montserrat',sans-serif;margin-bottom:3px}
.why-text{font-size:13px;color:var(--gray-600);line-height:1.5}
.huawei-capabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cap-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;transition:all .3s}
.cap-card:hover{background:rgba(255,255,255,.1);border-color:rgba(197,33,39,.3)}
.cap-icon{font-size:24px;margin-bottom:12px}
.cap-title{font-size:14px;font-weight:700;color:#fff;font-family:'Montserrat',sans-serif;margin-bottom:6px}
.cap-text{font-size:12px;color:rgba(255,255,255,.6);line-height:1.5}


/* Mega-menu hover bridge — prevents gap between trigger and dropdown */
.nav-item:hover .mega-menu::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-item{padding-bottom:0}
/* ===== LOGO SCROLL ANIMATION ===== */
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#logoStrip:hover{animation-play-state:paused}

/* ===== HAMBURGER BUTTON ===== */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:transparent;border:1.5px solid rgba(255,255,255,.25);border-radius:8px;cursor:pointer;padding:0;flex-shrink:0;transition:border-color .2s,background .2s}
.nav-hamburger:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.nav-hamburger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s,width .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;width:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== MOBILE DRAWER ===== */
.nav-drawer{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;background:var(--navy);z-index:999;overflow-y:auto;flex-direction:column;padding:16px 0 40px;border-top:1px solid rgba(255,255,255,.08)}
.nav-drawer.open{display:flex}
.nav-drawer-item{padding:0}
.nav-drawer-link{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;color:rgba(255,255,255,.85);font-size:15px;font-weight:500;font-family:'Poppins',sans-serif;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s,color .15s}
.nav-drawer-link:hover,.nav-drawer-link.current{background:rgba(255,255,255,.07);color:#fff}
.nav-drawer-link.current{border-left:3px solid var(--red);padding-left:21px}
.nav-drawer-sub{background:rgba(0,0,0,.2);padding:8px 0}
.nav-drawer-sub a{display:block;padding:10px 32px;color:rgba(255,255,255,.65);font-size:14px;font-family:'Poppins',sans-serif;text-decoration:none;transition:color .15s}
.nav-drawer-sub a:hover{color:#fff}
.nav-drawer-flags{display:flex;align-items:center;gap:16px;padding:20px 24px 4px}
.nav-drawer-cta{padding:16px 24px 0}
.nav-drawer-cta a{display:block;text-align:center;background:var(--red);color:#fff;padding:14px;border-radius:8px;font-size:14px;font-weight:700;font-family:'Montserrat',sans-serif;text-decoration:none;transition:background .2s}
.nav-drawer-cta a:hover{background:var(--red-dark)}

/* ===== RESPONSIVE ===== */

/* ── Tablet landscape (≤1024px) ── */
@media(max-width:1024px){
  .nav-inner{padding:0 20px}
  .hero-content{grid-template-columns:1fr 1fr;gap:40px}
  .two-col{grid-template-columns:1fr 1fr;gap:40px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
}

/* ── Tablet portrait (≤900px) ── */
@media(max-width:900px){
  .hero-content,.two-col,.case-study-block,.contact-grid{grid-template-columns:1fr}
  .services-grid,.industries-grid,.cases-grid,.solutions-grid,.enablement-grid,.modules-grid,.pillars-grid,.huawei-capabilities{grid-template-columns:repeat(2,1fr)}
  .journey-steps{grid-template-columns:repeat(2,1fr);gap:24px}
  .journey-steps::before{display:none}
  .footer-top{grid-template-columns:1fr 1fr}
  .inner-hero .container{padding-top:80px;padding-bottom:60px}
  .inner-metrics{gap:24px;flex-wrap:wrap}
  /* Keep hero stats 2-col on tablet */
  .hero-stats{grid-template-columns:1fr 1fr !important;gap:14px}
}

/* ── Mobile (≤768px) ── */
@media(max-width:768px){
  /* NOTE: nav menu/burger are handled by the ≤960px block above (nav-v2).
     Do NOT hide .nav-cta here — it holds the hamburger, flag & language toggle. */
  .nav-inner{padding:0 16px;justify-content:space-between}

  /* Hero */
  .hero>div:last-child{padding:80px 16px 48px}
  .hero-stats{grid-template-columns:1fr 1fr;gap:12px}

  /* Inline 2-col grids — keep as 2-col on tablet, collapse on phone */
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;gap:20px !important}
  [style*="grid-template-columns:1fr 1px 1fr"]{grid-template-columns:1fr !important;gap:32px !important}

  /* Sections */
  section,.inner-hero,.hero{padding-left:16px !important;padding-right:16px !important}
  .container{padding-left:16px !important;padding-right:16px !important}

  /* Typography */
  .inner-title{font-size:clamp(26px,7vw,40px) !important}
  .inner-sub{font-size:14px !important}
  .section-title{font-size:clamp(22px,6vw,36px) !important}
  .inner-metrics{gap:16px;flex-wrap:wrap}
  .inner-metric-val{font-size:clamp(24px,7vw,36px) !important}

  /* Cards & badges */
  [style*="min-width:160px"]{min-width:120px !important}
  [style*="min-width:170px"]{min-width:120px !important}
  [style*="min-width:180px"]{min-width:140px !important}

  /* Footer */
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
  .footer-cert{justify-content:center}

  /* Huawei block */
  .huawei-sa-block{grid-template-columns:1fr;padding:28px 20px}

  /* Pillar cards */
  .pillars-grid{grid-template-columns:1fr}
}

/* ── Phone (≤540px) — collapse all inline 2-col grids ── */
@media(max-width:540px){
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:20px !important}
  [style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr !important;gap:16px !important}
  .hero-stats{grid-template-columns:1fr 1fr !important;gap:10px}
}

/* ── About page story grid — stack on mobile, hide divider ── */
@media(max-width:768px){
  .about-story-grid{grid-template-columns:1fr !important;gap:32px !important}
  .about-story-grid > div:nth-child(2){display:none}
  .about-story-grid > div:last-child{padding-left:0 !important}
}

/* ── Contact page mobile fixes ── */
@media(max-width:768px){
  .contact-grid{grid-template-columns:1fr !important;gap:28px !important}
  .contact-info-card{padding:24px 20px !important;overflow:visible !important}
  .contact-form{padding:0 !important}
  .form-grid{grid-template-columns:1fr !important;gap:16px !important}
  .form-group.full{grid-column:auto !important}
  .inner-hero{overflow:hidden}
  .inner-hero .container{padding-left:16px !important;padding-right:16px !important}
  section .container{padding-left:16px !important;padding-right:16px !important}
  .contact-grid,.contact-form,.form-grid{max-width:100%;overflow:hidden}
  /* Push WhatsApp button to not overlap content */
  .wa-float{bottom:16px !important;right:12px !important}
}

/* ── Small mobile (≤480px) ── */
@media(max-width:480px){
  .hero-stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:16px}
  .stat-num{font-size:clamp(22px,8vw,32px) !important}
  .services-grid,.industries-grid,.cases-grid,.solutions-grid{grid-template-columns:1fr}
  .btn,.btn-red,.btn-ghost{font-size:13px;padding:12px 20px}
  .section-title{font-size:clamp(20px,7vw,28px) !important}
  .inner-title{font-size:clamp(22px,8vw,34px) !important}

  /* Reduce section padding on tiny screens */
  section[style*="padding:80px"]{padding-top:48px !important;padding-bottom:48px !important}
  section[style*="padding:72px"]{padding-top:40px !important;padding-bottom:40px !important}
  .inner-hero .container{padding-top:72px !important}
}

/* ===== RESOURCE PLACEHOLDER ===== */
.placeholder-page{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px}
.placeholder-icon{font-size:48px;margin-bottom:20px}
.placeholder-title{font-size:28px;font-weight:800;color:var(--navy);font-family:'Montserrat',sans-serif;margin-bottom:12px}
.placeholder-sub{font-size:15px;color:var(--gray-600);max-width:400px;line-height:1.6}

/* Huawei page specific */
.huawei-sa-block{background:linear-gradient(135deg,var(--navy) 0%,#1e3266 100%);border-radius:20px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.huawei-sa-block::after{content:'SA';position:absolute;right:40px;bottom:-20px;font-family:'Montserrat',sans-serif;font-size:120px;font-weight:900;color:rgba(255,255,255,.04);line-height:1}

/* Active nav indicator */
.nav-link.current{color:#fff;background:rgba(197,33,39,.2) !important}