/*
============================================================
RHB Landing Page - Main Stylesheet

Visual state: Visual Freeze v1.0
Docs: see /docs and /knowledge
Warning: preserve visual design. Change only after checking real selectors.
============================================================
*/

@font-face{font-family:siteFont;src:local("IRANSans"),local("Vazirmatn"),local("Tahoma");font-display:swap}
:root{
  --bg:#f6f7ff;--ink:#07112d;--muted:#667085;--line:rgba(116,83,255,.15);
  --blue:#315bff;--violet:#6f3dff;--pink:#e853da;--glass:rgba(255,255,255,.66);
  --shadow:0 22px 70px rgba(55,70,140,.11);--deep:#06102a;--r:30px;
}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font-family:siteFont,Tahoma,Arial,sans-serif;color:var(--ink);overflow-x:hidden}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}.site-bg{position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 12% 38%,rgba(124,58,237,.05),transparent 24%),radial-gradient(circle at 90% 55%,rgba(49,91,255,.06),transparent 28%),#f7f8ff}.page{width:min(1488px,calc(100% - 54px));margin:18px auto 0}.glass{background:var(--glass);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.58);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:15px;height:48px;padding:0 22px;font-weight:800;font-size:14px;transition:.25s ease;white-space:nowrap}.btn:hover{transform:translateY(-3px)}.btn-primary{color:#fff;background:linear-gradient(90deg,#24408f 0%,#3d57b0 100%);box-shadow:0 14px 35px rgba(111,61,255,.28)}.btn-ghost{background:rgba(255,255,255,.52);border:1px solid rgba(120,120,180,.18);color:#26324e}.btn-dark{height:42px;border:1px solid rgba(255,255,255,.25);color:#d9d8ff;background:rgba(255,255,255,.04)}.play{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#2d42a0;background:#fff;border:1px solid rgba(111,61,255,.18)}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:900;font-size:14px;color:#2F4CA8}.eyebrow span{width:8px;height:8px;border-radius:50%;background:linear-gradient(90deg,#2F4CA8 0%,#6A4DA8 55%,#C25AA5 100%);box-shadow:0 0 18px rgba(111,61,255,.5)}
.header{height:76px;border-radius:24px;padding:0 24px;display:grid;grid-template-columns:260px 1fr 185px;align-items:center;position:absolute;z-index:30;top:18px;left:24px;right:24px}.brand{justify-self:end}.brand img{width:220px;height:auto}.nav{display:flex;justify-content:center;gap:38px;font-size:14px;font-weight:800}.nav a{position:relative}.nav a.active{color:var(--violet)}.nav a.active:after{content:"";position:absolute;bottom:-23px;right:0;left:0;margin:auto;width:42px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--pink))}.header-btn{justify-self:start;height:50px;border-radius:14px}
.hero-wrap{position:relative}.hero{position:relative;height:742px;border-radius:0 0 34px 34px;overflow:hidden}.hero-bg{position:absolute;inset:0;background:url('../img/hero-bg.webp') center center/cover no-repeat;animation:bgBreath 18s ease-in-out infinite}.hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,248,252,.86) 0%,rgba(247,248,252,.54) 28%,rgba(247,248,252,.02) 62%)}@keyframes bgBreath{50%{transform:scale(1.018) translateY(-7px);filter:brightness(1.03)}}.hero-content{position:absolute;z-index:5;top:176px;right:146px;width:520px;text-align:center;transform:translateX(-70px)}.hero h1{font-size:104px;line-height:.96;letter-spacing:-4px;margin:26px 0 0;font-weight:950;color:#07112d;text-shadow:0 14px 30px rgba(0,0,0,.16)}.hero p{width:470px;margin:24px auto 0;color:#424b67;font-size:16px;line-height:2.05;font-weight:600}.hero-actions{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:26px}.social-side{position:absolute;z-index:6;left:90px;top:180px;display:flex;align-items:center;flex-direction:column;gap:20px;color:#111827;opacity:.9}.social-side a{font-weight:900;font-size:17px;width:22px;height:22px;display:grid;place-items:center}.side-line{height:86px;width:1px;background:linear-gradient(var(--violet),transparent)}.side-line.short{height:62px}.tech-list{position:absolute;z-index:5;right:auto;left:90px;top:185px;text-align:left;direction:ltr;display:flex;flex-direction:column;gap:44px}.tech-item{position:relative;padding-right:22px}.tech-item:after{content:"";position:absolute;right:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 16px rgba(111,61,255,.5)}.tech-item b{font-size:19px}.tech-item small{display:block;color:#516079;font-size:12px;margin-top:3px}.scroll-note{position:absolute;z-index:5;left:74px;bottom:112px;text-align:center;color:#34405b;font-size:12px}.mouse{display:block;width:26px;height:42px;border:2px solid rgba(111,61,255,.65);border-radius:15px;margin:0 auto 8px;position:relative}.mouse:after{content:"";position:absolute;right:50%;top:8px;transform:translateX(50%);width:4px;height:8px;border-radius:9px;background:var(--violet);animation:mouse 1.8s infinite}@keyframes mouse{50%{top:19px;opacity:.3}}
.brand-strip{position:absolute;z-index:8;right:90px;left:90px;bottom:16px;height:82px;border-radius:24px;display:flex;align-items:center;overflow:hidden}.brand-badge{width:255px;height:100%;display:grid;place-items:center;font-size:13px;color:#535f78;background:rgba(255,255,255,.58);border-radius:24px 0 0 24px}.brand-logos{height:100%;flex:1;display:flex;align-items:center;justify-content:space-around;gap:24px;padding:0 34px;font-size:21px;color:#5a6073;font-weight:900;filter:grayscale(1);opacity:.78}.brand-logos span{white-space:nowrap}
.section{position:relative;margin-top:76px}.services-section{min-height:470px;display:grid;grid-template-columns:.85fr 1.25fr;align-items:center;gap:38px;padding:0 54px}.molecule-bg{position:absolute;left:-80px;right:auto;top:-65px;width:420px;opacity:.55;pointer-events:none}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card{min-height:162px;border-radius:27px;padding:24px 22px;text-align:center;background:rgba(255,255,255,.42);border:1px solid rgba(47,76,168,.12);box-shadow:0 18px 55px rgba(47,76,168,.06);transition:.25s}.service-card:hover{transform:translateY(-7px);background:#fff}.service-card i{width:46px;height:46px;border-radius:17px;display:grid;place-items:center;margin:0 auto 15px;color:#2F4CA8;font-size:25px;background:rgba(47,76,168,.08);font-style:normal}.service-card h3{font-size:17px;margin:0 0 9px}.service-card p{font-size:12px;line-height:1.85;color:#667085;margin:0}.section-copy{text-align:right}.section-copy h2{font-size:45px;line-height:1.35;margin:13px 0 17px;letter-spacing:-1px}.section-copy p{font-size:15px;line-height:2;color:#667085;max-width:440px;margin:0}.services-copy{text-align:right}.stats-panel{margin:70px auto 0;width:calc(100% - 72px);min-height:132px;border-radius:24px;background:radial-gradient(circle at 75% 0,rgba(232,83,218,.42),transparent 32%),linear-gradient(135deg,#050d2a,#0a1360 55%,#32106f);display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:26px 40px;color:#fff;box-shadow:0 24px 70px rgba(15,18,70,.28);overflow:hidden}.stat{display:flex;align-items:center;justify-content:center;gap:12px;border-left:1px solid rgba(255,255,255,.22)}.stat:last-child{border-left:0}.stat strong{font-size:40px;line-height:1}.stat small{display:block;margin-top:8px;color:rgba(255,255,255,.82);font-weight:700}.stat i{font-size:36px;color:#d8a4ff;font-style:normal;text-shadow:0 0 18px rgba(192,132,252,.55)}.process-section{display:grid;grid-template-columns:360px 1fr;gap:34px;align-items:start;padding:18px 54px 0}.process-copy h2{font-size:54px;line-height:1.25}.steps-line{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative}.steps-line:before{content:"";position:absolute;top:54px;right:10%;left:10%;height:4px;background:linear-gradient(90deg,#4f7cff,#c64cff);border-radius:999px;box-shadow:0 0 14px rgba(111,61,255,.35)}.step{text-align:center;position:relative;z-index:1}.step div{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;margin:0 auto 15px;font-size:34px;color:var(--violet);background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.8);box-shadow:0 18px 55px rgba(49,91,255,.12), inset 0 1px 0 rgba(255,255,255,.9)}.step b{color:var(--violet);font-size:14px}.step h3{font-size:15px;margin:7px 0}.step p{font-size:12px;line-height:1.85;color:#667085;margin:0}.projects-panel{position:relative;margin:80px auto 0;width:calc(100% - 72px);border-radius:26px;background:#071025;min-height:345px;padding:32px;display:grid;grid-template-columns:285px repeat(3,1fr);gap:24px;color:#fff;box-shadow:0 24px 70px rgba(0,0,0,.18)}.projects-copy small{color:#c084fc;font-weight:900}.projects-copy h2{font-size:36px;line-height:1.35;margin:16px 0}.projects-copy p{font-size:14px;line-height:2;color:rgba(255,255,255,.74)}.project-arrows{margin-top:28px;display:flex;gap:22px;color:#fff;opacity:.7}.project-card{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:22px;overflow:hidden;min-height:275px;background:#0b1534;padding:16px;display:flex;flex-direction:column;justify-content:flex-end}.project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.84}.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(2,8,24,.86))}.project-card h3,.project-card span{position:relative;z-index:1}.project-card h3{margin:0 0 12px;font-size:17px}.project-card span{align-self:flex-start;border-radius:999px;background:rgba(111,61,255,.28);color:#e9d5ff;font-size:12px;padding:6px 12px}.slider-next{position:absolute;left:-22px;top:50%;width:48px;height:48px;border-radius:50%;border:0;background:#0b1028;color:#fff;font-size:22px;box-shadow:0 15px 35px rgba(0,0,0,.25)}.cta-panel{position:relative;margin:56px auto 0;width:calc(100% - 26px);height:170px;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.66);border:1px solid rgba(111,61,255,.14);display:grid;grid-template-columns:420px 1fr;align-items:center;box-shadow:var(--shadow)}.cta-art{height:100%;overflow:hidden}.cta-art img{width:100%;height:100%;object-fit:cover}.cta-copy{text-align:right;padding:0 42px}.cta-copy h2{font-size:34px;margin:0 0 10px}.cta-copy p{color:#667085;line-height:1.9;margin:0 0 18px}.cta-copy .btn{height:44px}.footer{margin:22px auto 0;width:calc(100% - 30px);border-radius:28px 28px 0 0;padding:38px 42px 18px;display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:34px}.footer img{width:210px;margin-bottom:14px}.footer p,.footer a{display:block;color:#667085;font-size:13px;line-height:1.9;margin:8px 0}.footer h4{font-size:15px;margin:0 0 14px}.footer-social{display:flex;gap:18px;margin-top:20px}.copyright{grid-column:1/-1;text-align:center;border-top:1px solid rgba(111,61,255,.12);padding-top:16px;color:#98a2b3;font-size:12px}
@media(max-width:1100px){.page{width:100%;padding:0 14px}.header{grid-template-columns:210px 1fr 150px}.nav{gap:18px}.hero-content{right:70px}.brand-strip{right:40px;left:40px}.services-section,.process-section{grid-template-columns:1fr}.projects-panel{grid-template-columns:1fr 1fr}.footer{grid-template-columns:1fr 1fr}.cta-panel{grid-template-columns:1fr}.cta-art{display:none}}
@media(max-width:720px){.header{height:auto;grid-template-columns:1fr;gap:14px;padding:16px}.brand,.header-btn{justify-self:center}.nav{flex-wrap:wrap;gap:18px}.hero{height:780px}.hero-bg{background-position:67% center}.hero-content{top:160px;right:22px;left:22px;width:auto}.hero h1{font-size:58px;letter-spacing:-2px}.hero p{width:auto;font-size:14px}.social-side,.tech-list,.scroll-note{display:none}.brand-strip{height:auto;min-height:94px;right:18px;left:18px;bottom:18px;flex-direction:column}.brand-badge{width:100%;height:34px;border-radius:24px 24px 0 0}.brand-logos{font-size:12px;gap:12px;padding:10px;flex-wrap:wrap}.services-grid,.steps-line,.stats-panel{grid-template-columns:1fr}.stats-panel{width:100%}.projects-panel{width:100%;grid-template-columns:1fr}.footer{width:100%;grid-template-columns:1fr}.section-copy h2{font-size:32px}.services-section,.process-section{padding:0 12px}.steps-line:before{display:none}}

/* =====================================================
   FIX PASS 01 - Header/Hero alignment against reference
   هدف: جلوگیری از بیرون‌زدن آیتم‌های هدر و برگرداندن اجزای کناری به جای درست
===================================================== */
.header{
  position:absolute !important;
  top:18px !important;
  right:24px !important;
  left:24px !important;
  height:76px !important;
  padding:0 24px !important;
  display:block !important;
  overflow:hidden !important;
  z-index:40 !important;
}
.header .brand{
  position:absolute !important;
  right:26px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:230px !important;
  display:block !important;
}
.header .brand img{
  width:220px !important;
  height:auto !important;
}
.header .nav{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:38px !important;
  width:auto !important;
  white-space:nowrap !important;
}
.header .header-btn{
  position:absolute !important;
  left:24px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  height:46px !important;
  min-width:145px !important;
  border-radius:14px !important;
}
.header .header-btn:hover{
  transform:translateY(calc(-50% - 3px)) !important;
}

.hero-content{
  left:140px !important;
  right:auto !important;
  top:170px !important;
  width:520px !important;
  text-align:center !important;
}
.hero h1{
  font-size:96px !important;
  line-height:.96 !important;
}

.tech-list{
  right:52px !important;
  left:auto !important;
  top:184px !important;
  text-align:right !important;
  direction:rtl !important;
  gap:48px !important;
  z-index:9 !important;
}
.tech-item{
  padding-right:24px !important;
  padding-left:0 !important;
}
.tech-item:after{
  right:0 !important;
  left:auto !important;
}

.scroll-note{
  right:74px !important;
  left:auto !important;
  bottom:112px !important;
  z-index:9 !important;
}

.social-side{
  left:34px !important;
  right:auto !important;
  top:170px !important;
  z-index:9 !important;
  opacity:.9 !important;
}

.brand-strip{
  direction:rtl !important;
  right:88px !important;
  left:88px !important;
  bottom:16px !important;
  height:78px !important;
}
.brand-badge{
  width:245px !important;
  order:1 !important;
  border-radius:24px 0 0 24px !important;
}
.brand-logos{
  order:2 !important;
  font-size:20px !important;
}

@media(max-width:1100px){
  .header .nav{gap:18px !important;font-size:12px !important;}
  .header .brand{width:190px !important;right:18px !important;}
  .header .brand img{width:185px !important;}
  .hero-content{left:70px !important;}
}
@media(max-width:720px){
  .header{position:absolute !important;height:auto !important;min-height:122px !important;overflow:visible !important;}
  .header .brand,.header .nav,.header .header-btn{position:static !important;transform:none !important;margin:8px auto !important;display:flex !important;justify-content:center !important;}
  .header .nav{flex-wrap:wrap !important;white-space:normal !important;}
  .hero-content{left:22px !important;right:22px !important;width:auto !important;}
}

/* =====================================================
   FIX PASS 02 - Code review items 1..7
   فقط اصلاحات هدر/هیرو/نوار برند، بدون تولید تصویر و بدون دستکاری سکشن‌های بعدی.
===================================================== */

/* 1 + 3) هدر: لوگو سمت راست + نام صحیح برند با متن مشکی */
.header .brand{
  position:absolute !important;
  right:28px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  min-width:250px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  color:#07112d !important;
  text-align:right !important;
}
.header .brand .brand-icon{
  width:54px !important;
  height:54px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}
.header .brand .brand-copy{
  display:flex !important;
  flex-direction:column !important;
  line-height:1.05 !important;
  color:#07112d !important;
}
.header .brand .brand-copy strong{
  font-size:18px !important;
  font-weight:950 !important;
  color:#07112d !important;
  letter-spacing:-.4px !important;
}
.header .brand .brand-copy small{
  margin-top:5px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.8px !important;
  color:#07112d !important;
  direction:ltr !important;
}

/* 2) منو: خط زیر هیچ آیتمی در حالت عادی دیده نشود؛ فقط hover */
.nav a,
.header .nav a{
  position:relative !important;
  color:#07112d !important;
  padding-bottom:10px !important;
}
.nav a.active,
.header .nav a.active{
  color:#07112d !important;
}
.nav a.active:after,
.header .nav a.active:after{
  content:none !important;
}
.nav a::after,
.header .nav a::after{
  content:"" !important;
  position:absolute !important;
  right:50% !important;
  bottom:-12px !important;
  width:42px !important;
  height:3px !important;
  border-radius:99px !important;
  background:linear-gradient(90deg,var(--blue),var(--pink)) !important;
  opacity:0 !important;
  transform:translateX(50%) scaleX(0) !important;
  transform-origin:center !important;
  transition:opacity .22s ease, transform .22s ease !important;
}
.nav a:hover::after,
.header .nav a:hover::after{
  opacity:1 !important;
  transform:translateX(50%) scaleX(1) !important;
}
.nav a:hover,
.header .nav a:hover{
  color:#2F4CA8 !important;
}

/* 4) تصویر هیرو: زوم کمتر، فضای سمت چپ برای متن */
.hero-bg{
  
  background-position:92% center !important;
  background-repeat: no-repeat;
}
.hero-fade{
  background:linear-gradient(90deg,
    rgba(247,248,252,.94) 0%,
    rgba(247,248,252,.74) 27%,
    rgba(247,248,252,.20) 48%,
    rgba(247,248,252,0) 68%) !important;
}
.hero-content{
  left:128px !important;
  right:auto !important;
  top:175px !important;
  width:485px !important;
  text-align:center !important;
}
.hero h1{
  font-size:88px !important;
  line-height:.95 !important;
  letter-spacing:-3.2px !important;
}
.hero p{
  width:450px !important;
}

/* 5) CTA داخل هیرو: رنگی سمت چپ، شیشه‌ای سمت راست */
.hero-actions{
  flex-direction:row-reverse !important;
  justify-content:center !important;
}
.hero-actions .btn-primary{
  order:2 !important;
}
.hero-actions .btn-ghost{
  order:1 !important;
}

/* 6) شبکه اجتماعی: پایین‌تر و ترتیب لینکدین، اینستاگرام، تلگرام */
.social-side{
  left:36px !important;
  top:260px !important;
  gap:18px !important;
}
.social-side .social-link{
  font-size:18px !important;
  color:#111827 !important;
  opacity:.9 !important;
}
.social-side .side-line{
  height:74px !important;
}
.social-side .side-line.short{
  height:58px !important;
}

/* 7) نوار همراهان: نصف بیرون از هیرو */
.brand-strip{
  right:88px !important;
  left:88px !important;
  bottom:-38px !important;
  height:78px !important;
  z-index:20 !important;
}
.hero{
  margin-bottom:50px !important;
  overflow:visible !important;
}
.hero-bg,
.hero-fade{
  border-radius:0 0 34px 34px !important;
  overflow:hidden !important;
}

@media(max-width:1100px){
  .header .brand{min-width:210px !important;right:20px !important;}
  .header .brand .brand-icon{width:45px !important;height:45px !important;}
  .header .brand .brand-copy strong{font-size:15px !important;}
  .header .brand .brand-copy small{font-size:8px !important;}
  .hero-bg{background-position:80% center !important;}
  .hero-content{left:62px !important;width:430px !important;}
}

/* =====================================================
   FIX PASS 03 - user review 2026-05-30
   Header untouched. Only Hero image, social rail, CTA order,
   brand strip overlap and scroll interaction are adjusted.
===================================================== */

/* 2) Hero image: use the full-width artwork, not a small/contained crop */
.hero-bg{
  
  background-position:center center !important;
  background-repeat: no-repeat;
}
.hero-fade{
  background:linear-gradient(90deg,
    rgba(247,248,252,.88) 0%,
    rgba(247,248,252,.60) 25%,
    rgba(247,248,252,.12) 48%,
    rgba(247,248,252,0) 68%) !important;
}

/* 3 + 4) Social icons: lower, more left, and real Instagram/Telegram icons */
.social-side{
  left:18px !important;
  top:315px !important;
  gap:18px !important;
}
.social-side .social-link{
  width:24px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  color:#111827 !important;
  opacity:.95 !important;
  font-size:17px !important;
  line-height:1 !important;
}
.social-side .social-link svg{
  width:19px !important;
  height:19px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.social-side .social-linkedin{
  font-weight:950 !important;
  font-family:Arial, sans-serif !important;
}

/* 5) Hero CTA order: purple button left, glass button right */
.hero-actions{
  direction:ltr !important;
  flex-direction:row !important;
  justify-content:center !important;
}
.hero-actions .btn-primary{
  order:1 !important;
}
.hero-actions .btn-ghost{
  order:2 !important;
}
.hero-actions .btn span,
.hero-actions .btn i{
  direction:rtl !important;
}

/* 6) Partner island: half inside hero, half outside */
.brand-strip{
  bottom:-39px !important;
  height:78px !important;
  z-index:22 !important;
}
.hero{
  overflow:visible !important;
  margin-bottom:66px !important;
}

/* 7) Scroll button must be clickable and smoothly scroll to page end */
.scroll-note{
  cursor:pointer !important;
  text-decoration:none !important;
  color:#34405b !important;
}
.scroll-note:hover .mouse{
  border-color:rgba(111,61,255,.95) !important;
  box-shadow:0 0 20px rgba(111,61,255,.18) !important;
}

@media(max-width:1100px){
  .hero-bg{background-position:70% center !important;}
  .social-side{left:12px !important;top:315px !important;}
}

/* =====================================================
   FIX PASS 04 - user review 2026-05-30
   Header layout and partner island are intentionally untouched.
   Only: hero artwork fitting, CTA icon/visual weight, tech timeline dots.
===================================================== */

/* 2) Hero artwork: no artificial zoom, stick to both left/right edges of hero panel */
.hero-bg{
  
  background-position:center center !important;
  background-repeat: no-repeat;
  transform:none !important;
}
@keyframes bgBreath{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.018)}
}
.hero-bg{animation:bgBreath 22s ease-in-out infinite !important;}

/* Because the artwork is now wider, spread hero UI a bit too */
.hero-content{
  left:112px !important;
  width:520px !important;
}
.tech-list{
  right:48px !important;
}
.scroll-note{
  right:70px !important;
}
.social-side{
  left:16px !important;
}

/* 3) CTA arrows removed; gradient made quieter so buttons stop stealing all focus */
.header-btn i,
.hero-actions .btn-primary i{
  display:none !important;
}
.btn-primary{
  background:linear-gradient(135deg,#4262ff 0%,#884dff 54%,#d94ed0 100%) !important;
  box-shadow:0 12px 26px rgba(111,61,255,.20) !important;
}
.header-btn,
.hero-actions .btn-primary{
  padding-inline:24px !important;
}
.btn-primary:hover{
  box-shadow:0 14px 30px rgba(111,61,255,.24) !important;
}

/* 4) Right-side AI / DATA / CLOUD: soft orb markers + subtle vertical timeline */
.tech-list{
  position:absolute !important;
  padding-right:28px !important;
}
.tech-list::before{
  content:"";
  position:absolute;
  right:3px;
  top:10px;
  bottom:10px;
  width:1px;
  background:linear-gradient(
    180deg,
    rgba(111,61,255,0),
    rgba(111,61,255,.28) 18%,
    rgba(111,61,255,.28) 82%,
    rgba(111,61,255,0)
  );
  pointer-events:none;
}
.tech-item{
  padding-right:30px !important;
}
.tech-item::after{
  right:-1px !important;
  top:7px !important;
  width:11px !important;
  height:11px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 35% 30%,#ffffff 0%,#f6f1ff 34%,rgba(153,120,255,.42) 68%,rgba(111,61,255,.18) 100%) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 0 0 4px rgba(255,255,255,.28),0 0 18px rgba(111,61,255,.16) !important;
  opacity:.64 !important;
  transition:opacity .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease !important;
}
.tech-item:hover::after{
  opacity:1 !important;
  transform:scale(1.15) !important;
  background:radial-gradient(circle at 35% 30%,#ffffff 0%,#d9ccff 28%,#7b4dff 72%,#e853da 100%) !important;
  box-shadow:0 0 0 5px rgba(255,255,255,.38),0 0 26px rgba(111,61,255,.45) !important;
}

@media(max-width:1100px){
  .hero-bg{background-position:center center !important;}
  .hero-content{left:62px !important;}
}

/* =====================================================
   FIX PASS 05 - user review
   Header and partner island are intentionally untouched.
   Only hero background, hero CTA, tech timeline, smooth scroll, hero eyebrow orb.
===================================================== */

/* 5) Hero image: full viewport width horizontally, still clipped vertically by hero area */
.hero-bg,
.hero-fade{
  left:50% !important;
  right:auto !important;
  width:100vw !important;
  transform:translateX(-50%) !important;
}
.hero-bg{
  
  background-position:center center !important;
  background-repeat: no-repeat;
}
@keyframes bgBreath{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.012)}
}
.hero-bg{
  animation:bgBreath 26s ease-in-out infinite !important;
}

/* 2) Right-side timeline: line must pass exactly through the orb centers */
.tech-list{
  padding-right:34px !important;
}
.tech-list::before{
  right:5px !important;
  top:13px !important;
  bottom:13px !important;
  width:1px !important;
  z-index:0 !important;
  background:linear-gradient(
    180deg,
    rgba(111,61,255,0),
    rgba(111,61,255,.22) 14%,
    rgba(111,61,255,.34) 50%,
    rgba(111,61,255,.22) 86%,
    rgba(111,61,255,0)
  ) !important;
}
.tech-item{
  position:relative !important;
  padding-right:34px !important;
  z-index:1 !important;
}
.tech-item::after{
  right:0 !important;
  top:7px !important;
  z-index:2 !important;
}

/* 3) Hero CTA buttons: more glass, less loud. Header button untouched. */
.hero-actions .btn-primary{
  background:linear-gradient(135deg,rgba(49,91,255,.88),rgba(124,58,237,.82) 58%,rgba(232,83,218,.78)) !important;
  box-shadow:0 10px 24px rgba(111,61,255,.16) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  backdrop-filter:blur(12px) !important;
}
.hero-actions .btn-ghost{
  background:rgba(255,255,255,.38) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  box-shadow:0 10px 24px rgba(49,91,255,.06) !important;
  backdrop-filter:blur(14px) !important;
}
.hero-actions .btn:hover{
  transform:translateY(-2px) !important;
}

/* 6) Hero eyebrow dot: simple soft orb, no glow/hover effect */
.hero-content .eyebrow span{
  width:9px !important;
  height:9px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 35% 30%,#ffffff 0%,#ece5ff 34%,#8b5cf6 74%,#e853da 100%) !important;
  box-shadow:none !important;
  border:1px solid rgba(255,255,255,.72) !important;
}

@media(max-width:1100px){
  .hero-bg{}
}

/* =====================================================
   FIX PASS 06 - user review
   Header, partner island, and full-width hero structure untouched.
   Only: tech timeline alignment, hero CTA glassiness, remove any remaining hero zoom.
===================================================== */

/* 2) Timeline line through exact center of AI / DATA / CLOUD orbs */
.tech-list{
  padding-right:38px !important;
}
.tech-list::before{
  right:6px !important;
  top:13px !important;
  bottom:13px !important;
  width:1px !important;
  z-index:0 !important;
  background:linear-gradient(
    180deg,
    rgba(111,61,255,0) 0%,
    rgba(111,61,255,.20) 14%,
    rgba(111,61,255,.34) 50%,
    rgba(111,61,255,.20) 86%,
    rgba(111,61,255,0) 100%
  ) !important;
}
.tech-item{
  padding-right:38px !important;
  position:relative !important;
  z-index:1 !important;
}
.tech-item::after{
  right:0 !important;
  top:6px !important;
  width:12px !important;
  height:12px !important;
  z-index:2 !important;
}

/* 3) Hero CTA buttons: softer glass, less visual dominance */
.hero-actions .btn{
  height:46px !important;
  padding:0 22px !important;
  font-weight:700 !important;
}
.hero-actions .btn-primary{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(49,91,255,.74),rgba(124,58,237,.68) 54%,rgba(232,83,218,.62)) !important;
  border:1px solid rgba(255,255,255,.46) !important;
  box-shadow:0 10px 26px rgba(111,61,255,.12), inset 0 1px 0 rgba(255,255,255,.22) !important;
  backdrop-filter:blur(16px) saturate(130%) !important;
}
.hero-actions .btn-ghost{
  color:#22304d !important;
  background:rgba(255,255,255,.34) !important;
  border:1px solid rgba(255,255,255,.70) !important;
  box-shadow:0 10px 24px rgba(49,91,255,.045), inset 0 1px 0 rgba(255,255,255,.34) !important;
  backdrop-filter:blur(18px) saturate(120%) !important;
}
.hero-actions .btn:hover{
  transform:translateY(-1px) !important;
}

/* 5) Remove all artwork zoom. Keep full-viewport width, no scale animation. */
.hero-bg{
  
  background-position:center center !important;
  background-repeat: no-repeat;
  animation:none !important;
  filter:none !important;
}
@media(max-width:1100px){
  .hero-bg{background-position:center center !important;}
}
@media(max-width:720px){
  .hero-bg{background-position:center center !important;}
}


/* =====================================================
   FIX PASS 07 - user review
   Keep header structure, partner island, and full-width hero untouched.
   Only: real hero image URL/no effects, header CTA glass, timeline center, slower scroll support.
===================================================== */
html{scroll-behavior:auto !important;}

/* 2 + 5) Use the exact WordPress hero image, no animation/filter/overlay/zoom effect */
.hero-bg{
  background-image:url('../img/hero-final.webp') !important;
  
  background-position:center center !important;
  background-repeat: no-repeat;
  animation:none !important;
  filter:none !important;
}
.hero-fade{
  display:none !important;
  background:none !important;
}

/* 3) Header CTA: less bold, more glassy, but same position/layout */
.header .header-btn{
  background:linear-gradient(135deg,rgba(49,91,255,.70),rgba(124,58,237,.62) 55%,rgba(232,83,218,.58)) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  box-shadow:0 10px 24px rgba(111,61,255,.12), inset 0 1px 0 rgba(255,255,255,.26) !important;
  backdrop-filter:blur(16px) saturate(125%) !important;
  font-weight:700 !important;
}
.header .header-btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 12px 26px rgba(111,61,255,.16), inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* 2) Tech timeline: line exactly through orb centers */
.tech-list{
  padding-right:38px !important;
}
.tech-list::before{
  content:"" !important;
  position:absolute !important;
  right:6px !important;
  top:12px !important;
  bottom:12px !important;
  width:1px !important;
  z-index:0 !important;
  background:linear-gradient(180deg,
    rgba(111,61,255,0) 0%,
    rgba(111,61,255,.20) 13%,
    rgba(111,61,255,.36) 50%,
    rgba(111,61,255,.20) 87%,
    rgba(111,61,255,0) 100%) !important;
}
.tech-item{
  position:relative !important;
  padding-right:38px !important;
  z-index:1 !important;
}
.tech-item::after{
  right:0 !important;
  top:6px !important;
  width:12px !important;
  height:12px !important;
  z-index:2 !important;
}

@media(max-width:1100px){
  .hero-bg{background-position:center center !important;}
}
@media(max-width:720px){
  .hero-bg{background-position:center center !important;}
}

/* =====================================================
   FIX PASS 09 - user review
   Do NOT change: header structure, partner island, hero full width, hero image, scroll function.
   Only: tech label position, social rail position, scroll button position,
   softer header CTA hover, glassy nav hover.
===================================================== */

/* 1) AI / DATA / CLOUD: 50px more right and 50px lower */
.tech-list{
  right:98px !important;
  top:234px !important;
}

/* 2) Social rail: balanced edge distance and 50px lower */
.social-side{
  left:98px !important;
  top:365px !important;
}

/* 3) Scroll button: 50px more right, no behavior changes */
.scroll-note{
  right:120px !important;
}

/* 4) Header CTA hover: smaller movement, keep vertical centering intact */
.header .header-btn:hover{
  transform:translateY(calc(-50% - 1px)) !important;
  box-shadow:0 11px 24px rgba(111,61,255,.14), inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* 5) Header nav hover: softer glassy gradient, no always-on underline */
.header .nav a,
.nav a{
  border-radius:14px !important;
  transition:background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}
.header .nav a:hover,
.nav a:hover{
  color:#2f4ca8 !important;
  background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(47,76,168,.075) 34%,rgba(107,77,168,.07) 66%,rgba(194,90,165,.09)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 8px 20px rgba(47,76,168,.09) !important;
  backdrop-filter:blur(10px) saturate(120%) !important;
}
.header .nav a::after,
.nav a::after{
  background:linear-gradient(90deg,#2f4ca8 0%,#6b4da8 55%,#c25aa5 100%) !important;
  height:2px !important;
  box-shadow:0 0 12px rgba(107,77,168,.18) !important;
}

/* =====================================================
   FIX PASS 12 - viewport based edge positioning only
   Do not change header, brand strip, hero image, hero width, scroll behavior.
===================================================== */
.hero{
  overflow:visible !important;
}

.tech-list{
  left:auto !important;
  right:calc(50px - ((100vw - 100%) / 2)) !important;
  top:234px !important;
  text-align:right !important;
  direction:rtl !important;
}

.scroll-note{
  left:auto !important;
  right:calc(50px - ((100vw - 100%) / 2)) !important;
}

.social-side{
  right:auto !important;
  left:calc(50px - ((100vw - 100%) / 2)) !important;
  top:365px !important;
}

@media(max-width:720px){
  .hero{overflow:hidden !important;}
  .social-side,.tech-list,.scroll-note{display:none !important;}
}

.services-grid{position:relative}.services-grid:before,.services-grid:after{content:"";position:absolute;background:rgba(92,122,255,.18)}.services-grid:before{left:16.6%;right:16.6%;top:50%;height:1px}.services-grid:after{top:16.6%;bottom:16.6%;left:50%;width:1px}



/* =====================================================
   FIX PASS 15 - Full-bleed after-hero background
   The background must NOT sit inside the services box.
   It spans the full viewport width and continues behind the
   Services, Stats, Process, Projects, CTA and Footer area.
===================================================== */
.page{
  position:relative !important;
  overflow:visible !important;
}

.services-section{
  position:relative !important;
  overflow:visible !important;
  background:none !important;
  z-index:1 !important;
}

.molecule-bg{
  display:none !important;
}

.services-grid,
.services-copy,
.stats-panel,
.process-section,
.projects-panel,
.cta-panel,
.footer{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:720px){
  }

.page{
  position:relative !important;
}
.page::before{
  content:"" !important;
  position:absolute !important;
  top:-320px !important;
  left:50% !important;
  width:100vw !important;
  height:calc(100% + 430px) !important;
  transform:translateX(-50%) !important;
  background:
    url('../img/page-wave-transparent.png') bottom center / 100% auto no-repeat,
    linear-gradient(180deg, #f2f3fb 0%, #f5f3ff 30%, #efeaff 58%, #8d72ff 100%) !important;
  z-index:-1 !important;
  pointer-events:none !important;
}



/* =====================================================
   FIX PASS 26 - Services section visual polish
   Scope: Services only. Header/Hero/Partners/Stats/Process/Projects/CTA/Footer untouched.
===================================================== */

.services-section{
  min-height:590px !important;
  display:grid !important;
  grid-template-columns:minmax(620px, 1.35fr) minmax(360px, .75fr) !important;
  align-items:center !important;
  gap:52px !important;
  padding:42px 66px 8px !important;
}

.services-copy{
  justify-self:start !important;
  max-width:430px !important;
  padding-top:4px !important;
}

.services-copy .eyebrow{
  justify-content:flex-start !important;
  color:#7a3cff !important;
  font-size:13px !important;
  font-weight:900 !important;
  margin-bottom:12px !important;
}

.services-copy .eyebrow span{
  width:9px !important;
  height:9px !important;
  background:linear-gradient(135deg,#8b5cf6,#d946ef) !important;
  box-shadow:0 0 18px rgba(139,92,246,.38) !important;
}

.services-copy h2{
  font-size:43px !important;
  line-height:1.28 !important;
  letter-spacing:-1.4px !important;
  margin:0 0 20px !important;
  color:#07132f !important;
}

.services-copy p{
  max-width:420px !important;
  font-size:14px !important;
  line-height:2.15 !important;
  color:#667085 !important;
}

.services-grid{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  max-width:760px !important;
  justify-self:end !important;
  isolation:isolate !important;
  padding:8px !important;
}

/* شبکه اتصال خیلی ظریف بین کارت‌ها */
.services-grid::before{
  content:"" !important;
  position:absolute !important;
  inset:42px 30px !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(114,183,255,.32) 6% 94%, transparent 94% 100%) 50% 28% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 6%, rgba(114,183,255,.28) 6% 94%, transparent 94% 100%) 50% 72% / 100% 1px no-repeat,
    linear-gradient(180deg, transparent 0 7%, rgba(114,183,255,.25) 7% 93%, transparent 93% 100%) 33.333% 50% / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0 7%, rgba(114,183,255,.25) 7% 93%, transparent 93% 100%) 66.666% 50% / 1px 100% no-repeat;
  filter:drop-shadow(0 0 7px rgba(80,150,255,.18)) !important;
}

/* نودهای آبی کوچک بین کارت‌ها */
.services-grid::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:3 !important;
  background:
    radial-gradient(circle, #2ea7ff 0 3px, rgba(46,167,255,.38) 3px 6px, transparent 7px) 33.333% 28% / 12px 12px no-repeat,
    radial-gradient(circle, #2ea7ff 0 3px, rgba(46,167,255,.38) 3px 6px, transparent 7px) 66.666% 28% / 12px 12px no-repeat,
    radial-gradient(circle, #2ea7ff 0 3px, rgba(46,167,255,.38) 3px 6px, transparent 7px) 33.333% 72% / 12px 12px no-repeat,
    radial-gradient(circle, #2ea7ff 0 3px, rgba(46,167,255,.38) 3px 6px, transparent 7px) 66.666% 72% / 12px 12px no-repeat,
    radial-gradient(circle, #7c3cff 0 3px, rgba(124,60,255,.36) 3px 6px, transparent 7px) 16.6% 50% / 12px 12px no-repeat,
    radial-gradient(circle, #7c3cff 0 3px, rgba(124,60,255,.36) 3px 6px, transparent 7px) 50% 50% / 12px 12px no-repeat,
    radial-gradient(circle, #7c3cff 0 3px, rgba(124,60,255,.36) 3px 6px, transparent 7px) 83.4% 50% / 12px 12px no-repeat;
}

.service-card{
  position:relative !important;
  z-index:2 !important;
  min-height:177px !important;
  border-radius:30px !important;
  padding:27px 22px 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.46)) !important;
  border:1px solid rgba(124,93,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 20px 52px rgba(52,74,140,.075) !important;
  backdrop-filter:blur(12px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%) !important;
  overflow:hidden !important;
}

.service-card::before{
  content:"" !important;
  position:absolute !important;
  inset:10px !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.62) !important;
  pointer-events:none !important;
}

.service-card:hover{
  transform:translateY(-5px) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 26px 65px rgba(79,70,229,.12) !important;
}

.service-card i{
  width:47px !important;
  height:47px !important;
  border-radius:17px !important;
  margin:0 auto 17px !important;
  color:#6737ff !important;
  font-size:25px !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.92), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, rgba(111,61,255,.14), rgba(190,123,255,.08)) !important;
  box-shadow:0 10px 25px rgba(111,61,255,.08) !important;
}

.service-card h3{
  font-size:17px !important;
  line-height:1.45 !important;
  margin:0 0 9px !important;
  color:#07132f !important;
  font-weight:900 !important;
}

.service-card p{
  font-size:12px !important;
  line-height:1.9 !important;
  color:#667085 !important;
  max-width:175px !important;
  margin:0 auto !important;
}

/* جلوگیری از شلوغی در موبایل، همان تمدن حداقلی */
@media(max-width:980px){
  .services-section{
    grid-template-columns:1fr !important;
    padding:34px 22px 0 !important;
    gap:28px !important;
  }
  .services-copy{
    justify-self:stretch !important;
    text-align:center !important;
    margin:0 auto !important;
  }
  .services-grid{
    grid-template-columns:1fr 1fr !important;
    max-width:100% !important;
    justify-self:stretch !important;
  }
  .services-grid::before,
  .services-grid::after{
    display:none !important;
  }
}

@media(max-width:620px){
  .services-grid{
    grid-template-columns:1fr !important;
  }
  .services-copy h2{
    font-size:31px !important;
  }
}



/* =====================================================
   FIX PASS 27 - Services section reference refinement
   Changes:
   1) swap text/cards position
   2) add parent glass frame around card matrix
   3) add stronger organic/vascular connection mesh between cards
   Scope: Services only.
===================================================== */

.services-section{
  grid-template-columns:minmax(360px,.78fr) minmax(650px,1.32fr) !important;
  gap:48px !important;
}

/* متن سمت چپ، کارت‌ها سمت راست */
.services-copy{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:end !important;
  max-width:430px !important;
}

.services-grid{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:start !important;
  max-width:790px !important;
  padding:24px !important;
  border-radius:36px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.18)) !important;
  border:1px solid rgba(124,93,255,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 24px 70px rgba(49,91,255,.065) !important;
  backdrop-filter:blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(125%) !important;
}

/* قاب داخلی نزدیک به کارت‌ها */
.services-grid > .service-card{
  position:relative !important;
}

.services-grid{
  --mesh-blue: rgba(51,156,255,.36);
  --mesh-violet: rgba(124,60,255,.28);
}

/* شبکه آوندی پشت کارت‌ها */
.services-grid::before{
  content:"" !important;
  position:absolute !important;
  inset:52px 46px !important;
  pointer-events:none !important;
  z-index:1 !important;
  background:
    /* خطوط افقی */
    linear-gradient(90deg, transparent 0 4%, var(--mesh-blue) 4% 96%, transparent 96% 100%) 50% 25% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 4%, rgba(51,156,255,.30) 4% 96%, transparent 96% 100%) 50% 75% / 100% 1px no-repeat,

    /* خطوط عمودی */
    linear-gradient(180deg, transparent 0 6%, rgba(51,156,255,.25) 6% 94%, transparent 94% 100%) 31.5% 50% / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0 6%, rgba(51,156,255,.25) 6% 94%, transparent 94% 100%) 68.5% 50% / 1px 100% no-repeat,

    /* اتصال‌های مورب */
    linear-gradient(35deg, transparent 0 45%, rgba(124,60,255,.22) 45% 55%, transparent 55% 100%) 50% 50% / 48% 48% no-repeat,
    linear-gradient(-35deg, transparent 0 45%, rgba(51,156,255,.20) 45% 55%, transparent 55% 100%) 50% 50% / 48% 48% no-repeat;
  filter:drop-shadow(0 0 9px rgba(80,150,255,.16)) !important;
}

/* نودهای اتصال روشن‌تر، شبیه مفصل‌های شبکه */
.services-grid::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:4 !important;
  background:
    radial-gradient(circle, #2ea7ff 0 3px, rgba(46,167,255,.42) 3px 7px, transparent 8px) 33% 29% / 14px 14px no-repeat,
    radial-gradient(circle, #2ea7ff 0 3px, rgba(46,167,255,.42) 3px 7px, transparent 8px) 67% 29% / 14px 14px no-repeat,
    radial-gradient(circle, #2ea7ff 0 3px, rgba(46,167,255,.42) 3px 7px, transparent 8px) 33% 71% / 14px 14px no-repeat,
    radial-gradient(circle, #2ea7ff 0 3px, rgba(46,167,255,.42) 3px 7px, transparent 8px) 67% 71% / 14px 14px no-repeat,

    radial-gradient(circle, #7c3cff 0 3px, rgba(124,60,255,.34) 3px 7px, transparent 8px) 50% 50% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.95) 0 2px, rgba(124,60,255,.30) 2px 6px, transparent 7px) 16.5% 50% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.95) 0 2px, rgba(124,60,255,.30) 2px 6px, transparent 7px) 83.5% 50% / 14px 14px no-repeat;
}

/* کارت‌ها روی قاب و شبکه بنشینند */
.service-card{
  z-index:3 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.82), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.50)) !important;
  border:1px solid rgba(124,93,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 18px 46px rgba(49,91,255,.07) !important;
}

/* موبایل */
@media(max-width:980px){
  .services-section{
    grid-template-columns:1fr !important;
  }

  .services-copy,
  .services-grid{
    grid-column:auto !important;
    grid-row:auto !important;
    justify-self:stretch !important;
  }

  .services-copy{
    text-align:center !important;
  }

  .services-grid{
    padding:16px !important;
  }
}



/* =====================================================
   FIX PASS 28 - Services card grid closer to reference
   Scope: services cards only.
   - Text/cards positions kept as in reference pass.
   - Removes visible parent frame.
   - Adds soft depth/glow zone behind cards instead of boxed container.
   - Organic/vascular mesh with diamond nodes.
   - Card borders become soft individual glass frames.
===================================================== */

/* متن چپ، کارت‌ها راست */
.services-section{
  grid-template-columns:minmax(360px,.78fr) minmax(650px,1.32fr) !important;
  gap:46px !important;
}

.services-copy{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:end !important;
  max-width:430px !important;
}

.services-grid{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:start !important;
  max-width:770px !important;
  gap:14px !important;
  padding:18px !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  isolation:isolate !important;
}

/* Soft depth zone پشت کارت‌ها، نه قاب مادر */
.services-grid .service-card:nth-child(1)::after{
  content:"" !important;
  position:absolute !important;
  inset:-46px -540px -252px -28px !important;
  border-radius:46px !important;
  background:
    radial-gradient(ellipse at 45% 35%, rgba(255,255,255,.62), rgba(255,255,255,.12) 48%, transparent 75%),
    radial-gradient(ellipse at 65% 70%, rgba(139,92,246,.12), transparent 62%) !important;
  box-shadow:
    inset 0 0 70px rgba(255,255,255,.34),
    0 0 80px rgba(111,61,255,.055) !important;
  z-index:-3 !important;
  pointer-events:none !important;
}

/* شبکه آوندی واقعی‌تر پشت کارت‌ها */
.services-grid::before{
  content:"" !important;
  position:absolute !important;
  inset:55px 46px !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    /* افقی بالا و پایین */
    linear-gradient(90deg, transparent 0 4%, rgba(111,185,255,.28) 4% 96%, transparent 96% 100%) 50% 26% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 4%, rgba(111,185,255,.26) 4% 96%, transparent 96% 100%) 50% 74% / 100% 1px no-repeat,

    /* عمودی بین ردیف‌ها */
    linear-gradient(180deg, transparent 0 7%, rgba(111,185,255,.20) 7% 93%, transparent 93% 100%) 32.6% 50% / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0 7%, rgba(111,185,255,.20) 7% 93%, transparent 93% 100%) 67.4% 50% / 1px 100% no-repeat,

    /* رگه‌های مورب خیلی محو */
    linear-gradient(34deg, transparent 0 46%, rgba(124,60,255,.16) 46% 54%, transparent 54% 100%) 50% 50% / 54% 54% no-repeat,
    linear-gradient(-34deg, transparent 0 46%, rgba(66,165,255,.14) 46% 54%, transparent 54% 100%) 50% 50% / 54% 54% no-repeat;
  filter:drop-shadow(0 0 7px rgba(80,150,255,.15)) !important;
}

/* نودهای اتصال لوزی، نه دایره */
.services-grid::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:5 !important;
  background:
    linear-gradient(45deg, transparent 0 31%, #36a9ff 31% 69%, transparent 69% 100%) 33.1% 30% / 9px 9px no-repeat,
    linear-gradient(45deg, transparent 0 31%, #36a9ff 31% 69%, transparent 69% 100%) 66.9% 30% / 9px 9px no-repeat,
    linear-gradient(45deg, transparent 0 31%, #36a9ff 31% 69%, transparent 69% 100%) 33.1% 70% / 9px 9px no-repeat,
    linear-gradient(45deg, transparent 0 31%, #36a9ff 31% 69%, transparent 69% 100%) 66.9% 70% / 9px 9px no-repeat,

    linear-gradient(45deg, transparent 0 29%, #7b4dff 29% 71%, transparent 71% 100%) 16.5% 50% / 8px 8px no-repeat,
    linear-gradient(45deg, transparent 0 29%, #7b4dff 29% 71%, transparent 71% 100%) 50% 50% / 8px 8px no-repeat,
    linear-gradient(45deg, transparent 0 29%, #7b4dff 29% 71%, transparent 71% 100%) 83.5% 50% / 8px 8px no-repeat;
  filter:
    drop-shadow(0 0 4px rgba(54,169,255,.55))
    drop-shadow(0 0 7px rgba(124,77,255,.22)) !important;
}

/* کارت‌ها نزدیک‌تر و با قاب گلاسی جداگانه */
.service-card{
  min-height:168px !important;
  border-radius:26px !important;
  padding:25px 21px 22px !important;
  position:relative !important;
  z-index:3 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.86), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.42)) !important;
  border:1px solid rgba(255,255,255,.68) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124,93,255,.105),
    inset 0 1px 0 rgba(255,255,255,.92),
    0 15px 42px rgba(49,91,255,.052) !important;
  backdrop-filter:blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(120%) !important;
  overflow:hidden !important;
}

/* خط قاب داخلی هر کارت */
.service-card::before{
  content:"" !important;
  position:absolute !important;
  inset:9px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.68) !important;
  box-shadow:inset 0 0 22px rgba(255,255,255,.24) !important;
  pointer-events:none !important;
  z-index:1 !important;
}

/* محتوا بالای قاب داخلی */
.service-card > *{
  position:relative !important;
  z-index:2 !important;
}

/* بک‌پلیت آیکون کم‌رنگ‌تر */
.service-card i{
  width:43px !important;
  height:43px !important;
  border-radius:15px !important;
  margin:0 auto 14px !important;
  color:#6538ff !important;
  font-size:24px !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.82), rgba(255,255,255,0) 46%),
    linear-gradient(135deg, rgba(111,61,255,.095), rgba(190,123,255,.045)) !important;
  box-shadow:0 8px 20px rgba(111,61,255,.055) !important;
}

.service-card h3{
  font-size:16.5px !important;
  margin-bottom:8px !important;
}

.service-card p{
  font-size:11.7px !important;
  line-height:1.85 !important;
}

.service-card:hover{
  transform:translateY(-4px) !important;
}

/* موبایل */
@media(max-width:980px){
  .services-grid{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .services-grid::before,
  .services-grid::after,
  .services-grid .service-card:nth-child(1)::after{
    display:none !important;
  }
}



/* =====================================================
   FIX PASS 29 - Services: reserve Orb space + stronger glass cards
   Scope: Services only.
===================================================== */

.services-section{
  grid-template-columns:minmax(300px,.62fr) minmax(640px,1.18fr) !important;
  gap:34px !important;
  padding-left:300px !important;
  padding-right:54px !important;
  min-height:620px !important;
}

.services-copy{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:end !important;
  max-width:410px !important;
}

.services-grid{
  grid-column:2 !important;
  grid-row:1 !important;
  max-width:735px !important;
  gap:12px !important;
  padding:16px !important;
  justify-self:start !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* ناحیه عمق پشت کارت‌ها، بدون قاب مادر */
.services-grid .service-card:nth-child(2)::after{
  content:"" !important;
  position:absolute !important;
  inset:-58px -270px -260px -270px !important;
  border-radius:54px !important;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.46), rgba(255,255,255,.13) 54%, transparent 76%),
    radial-gradient(ellipse at 50% 72%, rgba(132,102,255,.14), transparent 68%) !important;
  z-index:-4 !important;
  pointer-events:none !important;
}

/* کارت‌ها گلاسی‌تر */
.service-card{
  min-height:178px !important;
  border-radius:27px !important;
  padding:27px 22px 23px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.94), rgba(255,255,255,.20) 45%, transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.36)) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:
    inset 0 0 0 1px rgba(128,98,255,.13),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -20px 40px rgba(132,102,255,.045),
    0 18px 50px rgba(49,91,255,.07) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}

.service-card::before{
  content:"" !important;
  position:absolute !important;
  inset:8px !important;
  border-radius:21px !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:
    inset 0 0 28px rgba(255,255,255,.34),
    0 0 18px rgba(255,255,255,.18) !important;
  pointer-events:none !important;
  z-index:1 !important;
}

.service-card > *{
  position:relative !important;
  z-index:2 !important;
}

/* هایلایت لبه کارت‌ها */
.service-card:not(:nth-child(2))::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:18% !important;
  right:18% !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent) !important;
  box-shadow:0 0 16px rgba(255,255,255,.58) !important;
  z-index:2 !important;
  pointer-events:none !important;
}

/* خطوط آوندی روشن‌تر و ظریف */
.services-grid::before{
  inset:54px 42px !important;
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(104,183,255,.34) 4% 96%, transparent 96% 100%) 50% 26% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 4%, rgba(104,183,255,.31) 4% 96%, transparent 96% 100%) 50% 74% / 100% 1px no-repeat,
    linear-gradient(180deg, transparent 0 7%, rgba(104,183,255,.24) 7% 93%, transparent 93% 100%) 32.6% 50% / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0 7%, rgba(104,183,255,.24) 7% 93%, transparent 93% 100%) 67.4% 50% / 1px 100% no-repeat,
    linear-gradient(34deg, transparent 0 46%, rgba(124,60,255,.20) 46% 54%, transparent 54% 100%) 50% 50% / 54% 54% no-repeat,
    linear-gradient(-34deg, transparent 0 46%, rgba(66,165,255,.18) 46% 54%, transparent 54% 100%) 50% 50% / 54% 54% no-repeat !important;
  filter:drop-shadow(0 0 10px rgba(80,150,255,.18)) !important;
}

.services-grid::after{
  filter:
    drop-shadow(0 0 5px rgba(54,169,255,.65))
    drop-shadow(0 0 10px rgba(124,77,255,.25)) !important;
}

/* آیکون‌ها شفاف‌تر */
.service-card i{
  width:45px !important;
  height:45px !important;
  border-radius:16px !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.88), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, rgba(111,61,255,.075), rgba(190,123,255,.035)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 10px 24px rgba(111,61,255,.06) !important;
}

@media(max-width:980px){
  .services-section{
    padding-left:22px !important;
    padding-right:22px !important;
    grid-template-columns:1fr !important;
  }
  .services-grid .service-card:nth-child(2)::after{
    display:none !important;
  }
}



/* FIX PASS 30 - Services reference match */
.services-section{grid-template-columns:minmax(330px,.72fr) minmax(720px,1.28fr)!important;gap:34px!important;padding-left:270px!important;padding-right:54px!important;min-height:620px!important}
.services-grid{max-width:840px!important;gap:11px!important;padding:18px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.services-grid .service-card:nth-child(2)::after{content:""!important;position:absolute!important;inset:-60px -320px -270px -320px!important;border-radius:58px!important;background:radial-gradient(ellipse at 50% 46%,rgba(255,255,255,.72),rgba(255,255,255,.22) 48%,transparent 78%),radial-gradient(ellipse at 50% 74%,rgba(116,90,255,.20),transparent 68%)!important;box-shadow:inset 0 0 80px rgba(255,255,255,.42),0 0 90px rgba(111,61,255,.08)!important;z-index:-5!important;pointer-events:none!important}
.service-card{min-height:184px!important;border-radius:28px!important;padding:28px 23px 24px!important;background:radial-gradient(circle at 50% 6%,rgba(255,255,255,.96),rgba(255,255,255,.42) 42%,rgba(255,255,255,.24) 75%),linear-gradient(180deg,rgba(255,255,255,.66),rgba(244,240,255,.34))!important;border:1px solid rgba(255,255,255,.86)!important;box-shadow:inset 0 0 0 1px rgba(116,90,255,.14),inset 0 1px 0 rgba(255,255,255,.98),inset 0 -22px 42px rgba(125,93,255,.06),0 20px 54px rgba(49,91,255,.08)!important;backdrop-filter:blur(20px) saturate(155%)!important;-webkit-backdrop-filter:blur(20px) saturate(155%)!important}
.service-card::before{content:""!important;position:absolute!important;inset:8px!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.82)!important;box-shadow:inset 0 0 34px rgba(255,255,255,.36),0 0 22px rgba(255,255,255,.20)!important;pointer-events:none!important;z-index:1!important}
.service-card::after{content:""!important;position:absolute!important;inset:0!important;border-radius:28px!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.86),transparent) 50% 0/54% 1px no-repeat,linear-gradient(180deg,transparent,rgba(255,255,255,.62),transparent) 0 50%/1px 64% no-repeat,linear-gradient(180deg,transparent,rgba(255,255,255,.62),transparent) 100% 50%/1px 64% no-repeat!important;filter:drop-shadow(0 0 10px rgba(255,255,255,.55))!important;pointer-events:none!important;z-index:2!important}
.services-grid::before{content:""!important;position:absolute!important;inset:52px 34px!important;z-index:1!important;pointer-events:none!important;background:linear-gradient(90deg,transparent 0 2.5%,rgba(107,185,255,.42) 2.5% 97.5%,transparent 97.5% 100%) 50% 27%/100% 1px no-repeat,linear-gradient(90deg,transparent 0 2.5%,rgba(107,185,255,.38) 2.5% 97.5%,transparent 97.5% 100%) 50% 73%/100% 1px no-repeat,linear-gradient(180deg,transparent 0 5%,rgba(107,185,255,.32) 5% 95%,transparent 95% 100%) 32.8% 50%/1px 100% no-repeat,linear-gradient(180deg,transparent 0 5%,rgba(107,185,255,.32) 5% 95%,transparent 95% 100%) 67.2% 50%/1px 100% no-repeat,linear-gradient(30deg,transparent 0 47%,rgba(124,84,255,.22) 47% 53%,transparent 53% 100%) 50% 50%/52% 52% no-repeat,linear-gradient(-30deg,transparent 0 47%,rgba(65,164,255,.18) 47% 53%,transparent 53% 100%) 50% 50%/52% 52% no-repeat!important;filter:drop-shadow(0 0 8px rgba(72,166,255,.24))!important}
.services-grid::after{content:""!important;position:absolute!important;inset:0!important;z-index:5!important;pointer-events:none!important;background:linear-gradient(45deg,transparent 0 26%,#34aaff 26% 74%,transparent 74% 100%) 33% 31%/10px 10px no-repeat,linear-gradient(45deg,transparent 0 26%,#34aaff 26% 74%,transparent 74% 100%) 67% 31%/10px 10px no-repeat,linear-gradient(45deg,transparent 0 26%,#34aaff 26% 74%,transparent 74% 100%) 33% 69%/10px 10px no-repeat,linear-gradient(45deg,transparent 0 26%,#34aaff 26% 74%,transparent 74% 100%) 67% 69%/10px 10px no-repeat,linear-gradient(45deg,transparent 0 26%,#8257ff 26% 74%,transparent 74% 100%) 16.2% 50%/10px 10px no-repeat,linear-gradient(45deg,transparent 0 26%,#8257ff 26% 74%,transparent 74% 100%) 50% 50%/10px 10px no-repeat,linear-gradient(45deg,transparent 0 26%,#8257ff 26% 74%,transparent 74% 100%) 83.8% 50%/10px 10px no-repeat!important;filter:drop-shadow(0 0 5px rgba(54,170,255,.8)) drop-shadow(0 0 12px rgba(130,87,255,.32))!important}
.service-card i{width:48px!important;height:48px!important;border-radius:17px!important;margin:0 auto 16px!important;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.92),rgba(255,255,255,0) 52%),linear-gradient(135deg,rgba(111,61,255,.09),rgba(190,123,255,.045))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 10px 24px rgba(111,61,255,.07)!important}
.service-card i svg{width:31px!important;height:31px!important;display:block!important;margin:auto!important;fill:none!important;stroke:#6737ff!important;stroke-width:4.2!important;stroke-linecap:round!important;stroke-linejoin:round!important;filter:drop-shadow(0 0 3px rgba(103,55,255,.18))!important}
.service-card h3{font-size:16.8px!important;margin-bottom:8px!important}.service-card p{font-size:11.8px!important;line-height:1.88!important}
@media(max-width:980px){.services-section{padding-left:22px!important;padding-right:22px!important;grid-template-columns:1fr!important}.services-grid .service-card:nth-child(2)::after,.services-grid::before,.services-grid::after{display:none!important}}



/* FIX PASS 31 - services reference attempt */
.services-section{min-height:635px!important;grid-template-columns:minmax(330px,.72fr) minmax(760px,1.28fr)!important;gap:32px!important;padding-left:285px!important;padding-right:52px!important}
.services-grid{width:850px!important;max-width:850px!important;gap:9px!important;padding:18px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;isolation:isolate!important}
.services-grid .service-card:first-child::after{content:""!important;position:absolute!important;inset:-66px -560px -275px -40px!important;border-radius:58px!important;background:radial-gradient(ellipse at 48% 38%,rgba(255,255,255,.82),rgba(255,255,255,.30) 42%,rgba(255,255,255,0) 76%),radial-gradient(ellipse at 52% 68%,rgba(129,98,255,.20),rgba(129,98,255,0) 70%)!important;box-shadow:inset 0 0 95px rgba(255,255,255,.50),0 0 100px rgba(111,61,255,.09)!important;z-index:-4!important;pointer-events:none!important}
.service-card{min-height:190px!important;border-radius:30px!important;padding:30px 24px 24px!important;background:radial-gradient(circle at 50% 4%,rgba(255,255,255,.98),rgba(255,255,255,.52) 44%,rgba(255,255,255,.25) 76%),linear-gradient(180deg,rgba(255,255,255,.72),rgba(246,242,255,.36))!important;border:1px solid rgba(255,255,255,.92)!important;box-shadow:inset 0 0 0 1px rgba(117,88,255,.16),inset 0 1px 0 #fff,inset 0 -28px 54px rgba(132,102,255,.075),0 22px 60px rgba(41,67,145,.09)!important;backdrop-filter:blur(22px) saturate(165%)!important;-webkit-backdrop-filter:blur(22px) saturate(165%)!important;overflow:visible!important}
.service-card::before{content:""!important;position:absolute!important;inset:8px!important;border-radius:23px!important;border:1px solid rgba(255,255,255,.88)!important;box-shadow:inset 0 0 38px rgba(255,255,255,.40),0 0 26px rgba(255,255,255,.24)!important;pointer-events:none!important;z-index:1!important}
.service-card:not(:first-child)::after{content:""!important;position:absolute!important;inset:0!important;border-radius:30px!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent) 50% 0/60% 1px no-repeat,linear-gradient(180deg,transparent,rgba(255,255,255,.72),transparent) 0 50%/1px 70% no-repeat,linear-gradient(180deg,transparent,rgba(255,255,255,.72),transparent) 100% 50%/1px 70% no-repeat!important;filter:drop-shadow(0 0 12px rgba(255,255,255,.58))!important;pointer-events:none!important;z-index:2!important}
.services-grid::before{content:""!important;position:absolute!important;inset:52px 30px!important;z-index:1!important;pointer-events:none!important;background:linear-gradient(90deg,transparent 0 1.8%,rgba(93,176,255,.52) 1.8% 98.2%,transparent 98.2%) 50% 27%/100% 1px no-repeat,linear-gradient(90deg,transparent 0 1.8%,rgba(93,176,255,.47) 1.8% 98.2%,transparent 98.2%) 50% 73%/100% 1px no-repeat,linear-gradient(180deg,transparent 0 4%,rgba(93,176,255,.40) 4% 96%,transparent 96%) 32.9% 50%/1px 100% no-repeat,linear-gradient(180deg,transparent 0 4%,rgba(93,176,255,.40) 4% 96%,transparent 96%) 67.1% 50%/1px 100% no-repeat,linear-gradient(30deg,transparent 0 47%,rgba(126,86,255,.27) 47% 53%,transparent 53%) 50% 50%/50% 50% no-repeat,linear-gradient(-30deg,transparent 0 47%,rgba(75,170,255,.23) 47% 53%,transparent 53%) 50% 50%/50% 50% no-repeat!important;filter:drop-shadow(0 0 10px rgba(72,166,255,.34))!important}
.services-grid::after{content:""!important;position:absolute!important;inset:0!important;z-index:6!important;pointer-events:none!important;background:linear-gradient(45deg,transparent 0 22%,#37aeff 22% 78%,transparent 78%) 33.2% 30.7%/11px 11px no-repeat,linear-gradient(45deg,transparent 0 22%,#37aeff 22% 78%,transparent 78%) 66.8% 30.7%/11px 11px no-repeat,linear-gradient(45deg,transparent 0 22%,#37aeff 22% 78%,transparent 78%) 33.2% 69.3%/11px 11px no-repeat,linear-gradient(45deg,transparent 0 22%,#37aeff 22% 78%,transparent 78%) 66.8% 69.3%/11px 11px no-repeat,linear-gradient(45deg,transparent 0 22%,#8a5cff 22% 78%,transparent 78%) 16.1% 50%/11px 11px no-repeat,linear-gradient(45deg,transparent 0 22%,#8a5cff 22% 78%,transparent 78%) 50% 50%/11px 11px no-repeat,linear-gradient(45deg,transparent 0 22%,#8a5cff 22% 78%,transparent 78%) 83.9% 50%/11px 11px no-repeat!important;filter:drop-shadow(0 0 5px rgba(55,174,255,.95)) drop-shadow(0 0 14px rgba(138,92,255,.38))!important}
.service-card i{width:50px!important;height:50px!important;border-radius:18px!important;margin:0 auto 17px!important;background:radial-gradient(circle at 35% 24%,rgba(255,255,255,.96),rgba(255,255,255,0) 52%),linear-gradient(135deg,rgba(111,61,255,.105),rgba(190,123,255,.055))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 12px 28px rgba(111,61,255,.08)!important}
.service-card i svg{width:32px!important;height:32px!important;display:block!important;margin:auto!important;fill:none!important;stroke:#6737ff!important;stroke-width:4.4!important;stroke-linecap:round!important;stroke-linejoin:round!important;filter:drop-shadow(0 0 4px rgba(103,55,255,.22))!important}
.service-card h3{font-size:17px!important;margin-bottom:8px!important}.service-card p{font-size:11.8px!important;line-height:1.9!important}
@media(max-width:980px){.services-section{padding-left:22px!important;padding-right:22px!important;grid-template-columns:1fr!important}.services-grid{width:auto!important;max-width:100%!important}.services-grid::before,.services-grid::after,.services-grid .service-card:first-child::after{display:none!important}}



/* =====================================================
   FIX PASS 32 - Rebuild services grid from reference logic
   Scope: Services only
===================================================== */

.services-section{
  min-height:610px !important;
  grid-template-columns:820px 410px !important;
  gap:52px !important;
  padding-left:245px !important; /* reserved empty area for future Neural Orb */
  padding-right:58px !important;
  align-items:center !important;
}

.services-grid{
  grid-column:1 !important;
  grid-row:1 !important;
  width:820px !important;
  max-width:820px !important;
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:12px !important;
  padding:24px 22px !important;
  justify-self:end !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate !important;
  position:relative !important;
}

.services-copy{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:start !important;
  max-width:410px !important;
  text-align:right !important;
}

/* حذف تزئینات قبلی که خروجی را شلخته می‌کرد */
.services-grid::before,
.services-grid::after,
.services-grid .service-card:first-child::after,
.services-grid .service-card:nth-child(2)::after{
  display:none !important;
}

/* SVG mesh واقعی پشت کارت‌ها */
.service-mesh{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:2 !important;
  pointer-events:none !important;
  overflow:visible !important;
}

.service-mesh .mesh-lines{
  fill:none !important;
  stroke:rgba(88,173,255,.36) !important;
  stroke-width:1.25 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.service-mesh .mesh-nodes rect{
  fill:#4db7ff !important;
  stroke:rgba(255,255,255,.8) !important;
  stroke-width:1 !important;
  filter:drop-shadow(0 0 5px rgba(77,183,255,.8)) !important;
}

.service-mesh .mesh-nodes rect:nth-child(1),
.service-mesh .mesh-nodes rect:nth-child(5),
.service-mesh .mesh-nodes rect:nth-child(7){
  fill:#8c58ff !important;
  filter:drop-shadow(0 0 7px rgba(140,88,255,.75)) !important;
}

.service-mesh .mesh-nodes circle{
  fill:#63beff !important;
  filter:drop-shadow(0 0 6px rgba(99,190,255,.75)) !important;
}

/* depth zone پشت کارت‌ها، نه قاب مادر */
.services-grid .service-card:nth-child(3)::before{
  content:"" !important;
  position:absolute !important;
  inset:-62px -28px -250px -560px !important;
  border-radius:58px !important;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.62), rgba(255,255,255,.20) 50%, transparent 78%),
    radial-gradient(ellipse at 50% 75%, rgba(126,92,255,.16), transparent 72%) !important;
  box-shadow:inset 0 0 88px rgba(255,255,255,.36),0 0 90px rgba(90,80,255,.07) !important;
  z-index:-3 !important;
  pointer-events:none !important;
}

/* کارت‌ها: نزدیک، گلاسی، عمیق‌تر */
.service-card{
  min-height:174px !important;
  border-radius:28px !important;
  padding:26px 21px 22px !important;
  position:relative !important;
  z-index:4 !important;
  background:
    radial-gradient(circle at 50% 6%, rgba(255,255,255,.98), rgba(255,255,255,.52) 42%, rgba(255,255,255,.24) 72%),
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(246,242,255,.34)) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:
    inset 0 0 0 1px rgba(118,92,255,.15),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -24px 48px rgba(126,92,255,.06),
    0 18px 50px rgba(47,69,145,.08) !important;
  backdrop-filter:blur(20px) saturate(165%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(165%) !important;
  overflow:hidden !important;
}

/* قاب داخلی کارت */
.service-card > *{
  position:relative !important;
  z-index:3 !important;
}

.service-card::before{
  content:"" !important;
  position:absolute !important;
  inset:8px !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.86) !important;
  box-shadow:inset 0 0 34px rgba(255,255,255,.38),0 0 24px rgba(255,255,255,.22) !important;
  pointer-events:none !important;
  z-index:2 !important;
}

/* هایلایت دور کارت */
.service-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:28px !important;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent) 50% 0/58% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent) 50% 100%/50% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.72), transparent) 0 50%/1px 68% no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.72), transparent) 100% 50%/1px 68% no-repeat !important;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.55)) !important;
  pointer-events:none !important;
  z-index:2 !important;
}

.service-card i{
  width:48px !important;
  height:48px !important;
  border-radius:17px !important;
  margin:0 auto 15px !important;
  color:#6737ff !important;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.96), rgba(255,255,255,0) 52%),
    linear-gradient(135deg, rgba(111,61,255,.105), rgba(190,123,255,.055)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 12px 28px rgba(111,61,255,.08) !important;
}

.service-card i svg{
  width:31px !important;
  height:31px !important;
  fill:none !important;
  stroke:#6737ff !important;
  stroke-width:4.2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  display:block !important;
  margin:auto !important;
}

.service-card h3{
  font-size:16.6px !important;
  margin:0 0 7px !important;
}

.service-card p{
  font-size:11.5px !important;
  line-height:1.85 !important;
}

/* ترتیب در موبایل */
@media(max-width:980px){
  .services-section{
    padding-left:22px !important;
    padding-right:22px !important;
    grid-template-columns:1fr !important;
  }
  .services-grid{
    width:auto !important;
    max-width:100% !important;
  }
  .service-mesh{
    display:none !important;
  }
}



/* =====================================================
   FIX PASS 33 - Services: correct text/cards position + stronger glass
   Scope: Services only.
===================================================== */

/* در RTL، ستون 1 سمت راست است. پس متن ستون 1، کارت‌ها ستون 2 */
.services-section{
  grid-template-columns:410px 820px !important;
  gap:52px !important;
  padding-left:245px !important;   /* فضای رزرو Orb سمت چپ */
  padding-right:58px !important;
  min-height:620px !important;
  align-items:center !important;
}

.services-copy{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  max-width:410px !important;
  text-align:right !important;
}

.services-grid{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:end !important;
  width:820px !important;
  max-width:820px !important;
  gap:10px !important;
  padding:24px 22px !important;
}

/* کارت‌ها گلاسی‌تر و نزدیک‌تر به رفرنس */
.service-card{
  min-height:178px !important;
  border-radius:29px !important;
  padding:27px 22px 23px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.98), rgba(255,255,255,.62) 35%, rgba(255,255,255,.30) 72%),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(244,240,255,.38)) !important;
  border:1px solid rgba(255,255,255,.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(120,88,255,.16),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -30px 58px rgba(126,92,255,.085),
    0 18px 54px rgba(42,69,145,.10),
    0 0 34px rgba(255,255,255,.18) !important;
  backdrop-filter:blur(24px) saturate(175%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(175%) !important;
}

/* قاب داخلی روشن‌تر، همان حس فریم گلاسی رفرنس */
.service-card::before{
  inset:7px !important;
  border-radius:23px !important;
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:
    inset 0 0 42px rgba(255,255,255,.44),
    0 0 26px rgba(255,255,255,.28) !important;
}

/* هایلایت‌های دور کارت بیشتر شوند */
.service-card::after{
  border-radius:29px !important;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent) 50% 0 / 64% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent) 50% 100% / 58% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.82), transparent) 0 50% / 1px 72% no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.82), transparent) 100% 50% / 1px 72% no-repeat !important;
  filter:drop-shadow(0 0 13px rgba(255,255,255,.62)) !important;
}

/* عمق پشت کارت‌ها تقویت شود، بدون قاب مادر */
.services-grid .service-card:nth-child(3)::before{
  inset:-66px -34px -255px -560px !important;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.74), rgba(255,255,255,.26) 48%, transparent 78%),
    radial-gradient(ellipse at 50% 74%, rgba(126,92,255,.20), transparent 70%) !important;
  box-shadow:
    inset 0 0 95px rgba(255,255,255,.44),
    0 0 105px rgba(90,80,255,.09) !important;
}

/* خطوط و نودهای اتصال واضح‌تر، نه محو و مرده */
.service-mesh .mesh-lines{
  stroke:rgba(78,168,255,.48) !important;
  stroke-width:1.45 !important;
}

.service-mesh .mesh-nodes rect{
  width:11px !important;
  height:11px !important;
  fill:#35adff !important;
  stroke:rgba(255,255,255,.95) !important;
  stroke-width:1.1 !important;
  filter:
    drop-shadow(0 0 5px rgba(53,173,255,.95))
    drop-shadow(0 0 10px rgba(53,173,255,.35)) !important;
}

.service-mesh .mesh-nodes rect:nth-child(1),
.service-mesh .mesh-nodes rect:nth-child(5),
.service-mesh .mesh-nodes rect:nth-child(7){
  fill:#8a55ff !important;
  filter:
    drop-shadow(0 0 6px rgba(138,85,255,.95))
    drop-shadow(0 0 12px rgba(138,85,255,.42)) !important;
}

.service-mesh .mesh-nodes circle{
  fill:#42b6ff !important;
  filter:drop-shadow(0 0 7px rgba(66,182,255,.85)) !important;
}

/* آیکون‌ها کمی برجسته‌تر و شبیه‌تر به رفرنس */
.service-card i{
  width:50px !important;
  height:50px !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,1), rgba(255,255,255,0) 54%),
    linear-gradient(135deg, rgba(111,61,255,.12), rgba(190,123,255,.06)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 28px rgba(111,61,255,.10) !important;
}

.service-card i svg{
  stroke:#6536ff !important;
  stroke-width:4.35 !important;
  filter:drop-shadow(0 0 4px rgba(101,54,255,.24)) !important;
}

@media(max-width:980px){
  .services-section{
    grid-template-columns:1fr !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .services-copy,
  .services-grid{
    grid-column:auto !important;
    grid-row:auto !important;
    justify-self:stretch !important;
  }
}


/* FIX PASS 34 - network first rebuild */
.services-grid{
 gap:4px !important;
 padding:18px !important;
}
.service-card{
 border-radius:26px !important;
 backdrop-filter:blur(34px) saturate(190%) !important;
 -webkit-backdrop-filter:blur(34px) saturate(190%) !important;
 background:
 radial-gradient(circle at 50% 0%,rgba(255,255,255,.98),rgba(255,255,255,.70) 38%,rgba(255,255,255,.30) 72%),
 linear-gradient(180deg,rgba(255,255,255,.78),rgba(248,245,255,.34)) !important;
 box-shadow:
 inset 0 0 0 1px rgba(255,255,255,.95),
 inset 0 0 60px rgba(255,255,255,.35),
 inset 0 -30px 60px rgba(140,110,255,.08),
 0 12px 35px rgba(90,80,180,.06) !important;
}
.service-card::before{
 border-color:rgba(255,255,255,.98)!important;
 box-shadow:inset 0 0 50px rgba(255,255,255,.55)!important;
}
.service-mesh .mesh-lines{
 stroke:rgba(140,170,255,.22)!important;
 stroke-width:.9!important;
}
.service-mesh .mesh-nodes rect{
 transform-box:fill-box;
 fill:#7f67ff!important;
 filter:drop-shadow(0 0 3px rgba(127,103,255,.5))!important;
}
.service-mesh .mesh-nodes circle{
 r:2!important;
 opacity:.8!important;
}
.services-grid .service-card:nth-child(3)::before{
 background:
 radial-gradient(ellipse at center,rgba(255,255,255,.85),rgba(255,255,255,.25) 55%,transparent 80%),
 radial-gradient(ellipse at center,rgba(150,120,255,.12),transparent 70%) !important;
}



/* FIX PASS 35 - Services compact reference rebuild */
.services-section{
  min-height:455px !important;
  margin-top:42px !important;
  padding:0 54px !important;
  grid-template-columns:760px 390px !important;
  gap:44px !important;
  align-items:center !important;
}
.services-copy{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:start !important;
  max-width:390px !important;
  text-align:right !important;
}
.services-copy h2{
  font-size:39px !important;
  line-height:1.32 !important;
  margin:10px 0 16px !important;
}
.services-copy p{
  font-size:13.5px !important;
  line-height:2.05 !important;
  max-width:380px !important;
}
.services-grid{
  grid-column:1 !important;
  grid-row:1 !important;
  width:760px !important;
  max-width:760px !important;
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:8px !important;
  padding:16px !important;
  justify-self:end !important;
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.services-grid::before,
.services-grid::after{
  display:none !important;
}
.services-grid .service-card:first-child::before{
  content:"" !important;
  position:absolute !important;
  inset:-42px -515px -220px -24px !important;
  border-radius:45px !important;
  background:
    radial-gradient(ellipse at 42% 40%, rgba(255,255,255,.88), rgba(255,255,255,.32) 48%, transparent 76%),
    radial-gradient(ellipse at 55% 65%, rgba(118,90,255,.18), transparent 70%) !important;
  box-shadow:
    inset 0 0 90px rgba(255,255,255,.46),
    0 0 100px rgba(90,90,200,.07) !important;
  z-index:-5 !important;
  pointer-events:none !important;
}
.service-mesh{
  position:absolute !important;
  inset:-8px -8px !important;
  width:calc(100% + 16px) !important;
  height:calc(100% + 16px) !important;
  z-index:2 !important;
  pointer-events:none !important;
  overflow:visible !important;
}
.service-mesh .mesh-lines{
  fill:none !important;
  stroke:rgba(88,174,255,.42) !important;
  stroke-width:1.35 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  filter:drop-shadow(0 0 6px rgba(88,174,255,.22)) !important;
}
.service-mesh .mesh-nodes rect{
  width:8px !important;
  height:8px !important;
  fill:#39b3ff !important;
  stroke:rgba(255,255,255,.85) !important;
  stroke-width:.8 !important;
  filter:drop-shadow(0 0 4px rgba(57,179,255,.75)) !important;
}
.service-mesh .mesh-nodes rect:nth-child(1),
.service-mesh .mesh-nodes rect:nth-child(5),
.service-mesh .mesh-nodes rect:nth-child(7){
  fill:#8b57ff !important;
  filter:drop-shadow(0 0 5px rgba(139,87,255,.75)) !important;
}
.service-mesh .mesh-nodes circle{
  fill:#45baff !important;
  opacity:.95 !important;
  filter:drop-shadow(0 0 4px rgba(69,186,255,.7)) !important;
}
.service-card{
  min-height:155px !important;
  border-radius:26px !important;
  padding:24px 20px 19px !important;
  z-index:5 !important;
  background:
    radial-gradient(circle at 50% 2%, rgba(255,255,255,.98), rgba(255,255,255,.62) 36%, rgba(255,255,255,.28) 72%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(246,243,255,.34)) !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124,93,255,.13),
    inset 0 1px 0 #fff,
    inset 0 -24px 48px rgba(125,92,255,.07),
    0 16px 44px rgba(50,76,145,.075),
    0 0 30px rgba(255,255,255,.22) !important;
  backdrop-filter:blur(26px) saturate(170%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(170%) !important;
  overflow:hidden !important;
}
.service-card::before{
  content:"" !important;
  position:absolute !important;
  inset:7px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.90) !important;
  box-shadow:
    inset 0 0 36px rgba(255,255,255,.42),
    0 0 20px rgba(255,255,255,.22) !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:transparent !important;
}
.service-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:26px !important;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.96), transparent) 50% 0 / 62% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent) 50% 100% / 52% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.72), transparent) 0 50% / 1px 68% no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.72), transparent) 100% 50% / 1px 68% no-repeat !important;
  filter:drop-shadow(0 0 11px rgba(255,255,255,.6)) !important;
  z-index:2 !important;
  pointer-events:none !important;
}
.service-card > *{
  position:relative !important;
  z-index:3 !important;
}
.service-card i{
  width:43px !important;
  height:43px !important;
  border-radius:16px !important;
  margin:0 auto 12px !important;
}
.service-card i svg{
  width:30px !important;
  height:30px !important;
  display:block !important;
  margin:auto !important;
  fill:none !important;
  stroke:#6536ff !important;
  stroke-width:4.3 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  filter:drop-shadow(0 0 3px rgba(101,54,255,.25)) !important;
}
.service-card h3{
  font-size:16px !important;
  line-height:1.35 !important;
  margin:0 0 7px !important;
}
.service-card p{
  font-size:11.3px !important;
  line-height:1.78 !important;
  max-width:165px !important;
}
.stats-panel{
  margin-top:36px !important;
}
@media(max-width:980px){
  .services-section{
    grid-template-columns:1fr !important;
    padding:0 22px !important;
    min-height:auto !important;
  }
  .services-copy,
  .services-grid{
    grid-column:auto !important;
    grid-row:auto !important;
    width:auto !important;
    max-width:100% !important;
    justify-self:stretch !important;
  }
  .service-mesh,
  .services-grid .service-card:first-child::before{
    display:none !important;
  }
}



/* =====================================================
   FIX PASS 36 - Requested final tune
   Scope: Services only
   - swap text/cards
   - lower card opacity
   - remove the three useless top diamonds
===================================================== */

/* Swap positions: text right, cards left */
.services-copy{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  text-align:right !important;
}

.services-grid{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:end !important;
}

/* Lower card opacity while keeping glass depth */
.service-card{
  background:
    radial-gradient(circle at 50% 2%, rgba(255,255,255,.82), rgba(255,255,255,.42) 36%, rgba(255,255,255,.18) 72%),
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(246,243,255,.24)) !important;
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124,93,255,.10),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -22px 42px rgba(125,92,255,.055),
    0 14px 38px rgba(50,76,145,.055),
    0 0 24px rgba(255,255,255,.16) !important;
}

.service-card::before{
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.30),
    0 0 16px rgba(255,255,255,.16) !important;
}

/* Remove the three floating diamonds above the cards */
.service-mesh .mesh-nodes rect:nth-child(1),
.service-mesh .mesh-nodes rect:nth-child(2),
.service-mesh .mesh-nodes rect:nth-child(3){
  display:none !important;
}

/* If any top decorative nodes still leak from SVG rendering, clip only the very top band */
.service-mesh{
  clip-path:inset(34px 0 0 0) !important;
}


/* =====================================================
   FIX PASS 37 - Process Section Rebuild
===================================================== */

.process-section{
  display:grid !important;
  grid-template-columns:320px 1fr !important;
  gap:48px !important;
  align-items:center !important;
  padding:40px 60px !important;
  margin-top:36px !important;
}

.process-intro h2{
  font-size:48px !important;
  line-height:1.25 !important;
}

.process-intro p{
  font-size:14px !important;
  line-height:2 !important;
  opacity:.75;
}

.process-timeline{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:10px !important;
}

.process-timeline:before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:42px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,#8b57ff,#47b7ff,#8b57ff);
  opacity:.8;
}

.process-step{
  text-align:center;
  position:relative;
}

.process-icon{
  width:84px;
  height:84px;
  margin:0 auto 12px;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 10px 30px rgba(120,90,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}

.process-number{
  color:#7c55ff;
  font-weight:700;
  margin-bottom:8px;
}



/* =====================================================
   FIX PASS 38 - Process Section V2
   Scope: Process only
===================================================== */

.process-section{
  display:grid !important;
  grid-template-columns:280px 1fr !important;
  gap:42px !important;
  align-items:start !important;
  padding:28px 58px 38px !important;
  margin-top:28px !important;
}

.process-copy,
.process-intro{
  max-width:280px !important;
  text-align:right !important;
  padding-top:6px !important;
}

.process-copy h2,
.process-intro h2{
  font-size:38px !important;
  line-height:1.34 !important;
  margin:10px 0 14px !important;
  letter-spacing:-1px !important;
}

.process-copy p,
.process-intro p{
  font-size:13px !important;
  line-height:2.05 !important;
  color:#667085 !important;
  max-width:260px !important;
}

.steps-line,
.process-timeline{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:20px !important;
  width:100% !important;
  padding-top:0 !important;
}

/* خط اصلی تایم‌لاین */
.steps-line::before,
.process-timeline::before{
  content:"" !important;
  position:absolute !important;
  top:48px !important;
  left:7% !important;
  right:7% !important;
  height:4px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#8d5bff 0%,#cf5dff 34%,#4aa7ff 68%,#7d58ff 100%) !important;
  box-shadow:0 0 14px rgba(137,91,255,.25) !important;
  z-index:0 !important;
}

/* نودهای بین مرحله‌ها */
.steps-line::after,
.process-timeline::after{
  content:"" !important;
  position:absolute !important;
  top:43px !important;
  left:7% !important;
  right:7% !important;
  height:14px !important;
  pointer-events:none !important;
  z-index:1 !important;
  background:
    radial-gradient(circle,#7d58ff 0 4px,rgba(125,88,255,.22) 4px 8px,transparent 9px) 25% 50%/16px 16px no-repeat,
    radial-gradient(circle,#4aa7ff 0 4px,rgba(74,167,255,.22) 4px 8px,transparent 9px) 50% 50%/16px 16px no-repeat,
    radial-gradient(circle,#d45cff 0 4px,rgba(212,92,255,.20) 4px 8px,transparent 9px) 75% 50%/16px 16px no-repeat !important;
}

/* هر مرحله */
.step,
.process-step{
  text-align:center !important;
  position:relative !important;
  z-index:2 !important;
}

/* دایره آیکون‌ها */
.step div,
.process-icon{
  width:95px !important;
  height:95px !important;
  border-radius:50% !important;
  margin:0 auto 13px !important;
  display:grid !important;
  place-items:center !important;
  font-size:34px !important;
  color:#6f3dff !important;
  background:
    radial-gradient(circle at 35% 20%,rgba(255,255,255,.95),rgba(255,255,255,.46) 45%,rgba(255,255,255,.18) 100%) !important;
  border:1px solid rgba(255,255,255,.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -18px 38px rgba(125,92,255,.055),
    0 12px 34px rgba(80,72,170,.08) !important;
  backdrop-filter:blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%) !important;
}

/* شماره مرحله */
.step b,
.process-number{
  display:block !important;
  color:#714cff !important;
  font-size:14px !important;
  font-weight:900 !important;
  margin:0 0 8px !important;
}

.step h3,
.process-step h3{
  font-size:14.5px !important;
  font-weight:900 !important;
  color:#07132f !important;
  line-height:1.55 !important;
  margin:0 0 6px !important;
}

.step p,
.process-step p{
  font-size:11.5px !important;
  line-height:1.85 !important;
  color:#667085 !important;
  margin:0 auto !important;
  max-width:135px !important;
}

/* جایگزینی آیکون‌های متنی با ظاهر نزدیک‌تر */
.steps-line .step:nth-child(1) div,
.process-timeline .process-step:nth-child(1) .process-icon{font-size:0 !important;}
.steps-line .step:nth-child(1) div::before,
.process-timeline .process-step:nth-child(1) .process-icon::before{content:"⌕";font-size:34px;}

.steps-line .step:nth-child(2) div,
.process-timeline .process-step:nth-child(2) .process-icon{font-size:0 !important;}
.steps-line .step:nth-child(2) div::before,
.process-timeline .process-step:nth-child(2) .process-icon::before{content:"✎";font-size:34px;}

.steps-line .step:nth-child(3) div,
.process-timeline .process-step:nth-child(3) .process-icon{font-size:0 !important;}
.steps-line .step:nth-child(3) div::before,
.process-timeline .process-step:nth-child(3) .process-icon::before{content:"</>";font-size:27px;font-weight:800;}

.steps-line .step:nth-child(4) div,
.process-timeline .process-step:nth-child(4) .process-icon{font-size:0 !important;}
.steps-line .step:nth-child(4) div::before,
.process-timeline .process-step:nth-child(4) .process-icon::before{content:"☑";font-size:33px;}

.steps-line .step:nth-child(5) div,
.process-timeline .process-step:nth-child(5) .process-icon{font-size:0 !important;}
.steps-line .step:nth-child(5) div::before,
.process-timeline .process-step:nth-child(5) .process-icon::before{content:"☏";font-size:34px;}

@media(max-width:980px){
  .process-section{
    grid-template-columns:1fr !important;
    padding:28px 22px !important;
  }
  .process-copy,
  .process-intro{
    max-width:100% !important;
    text-align:center !important;
    margin:0 auto !important;
  }
  .steps-line,
  .process-timeline{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .steps-line::before,
  .steps-line::after,
  .process-timeline::before,
  .process-timeline::after{
    display:none !important;
  }
}



/* =====================================================
   FIX PASS 39 - Stats Bar Art Direction
   Scope: Stats panel only
===================================================== */

.stats-panel{
  position:relative !important;
  min-height:98px !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 18% 15%, rgba(100,87,255,.28), transparent 24%),
    radial-gradient(circle at 88% 70%, rgba(236,77,255,.22), transparent 28%),
    linear-gradient(135deg,#070d2b 0%,#101153 48%,#25115e 100%) !important;
  box-shadow:
    0 18px 55px rgba(10,12,55,.20),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* star/noise + lower light waves */
.stats-panel::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle,rgba(255,255,255,.42) 0 1px,transparent 1.4px) 10% 28%/42px 28px,
    radial-gradient(circle,rgba(162,137,255,.45) 0 1px,transparent 1.5px) 40% 20%/58px 34px,
    radial-gradient(circle,rgba(255,255,255,.30) 0 1px,transparent 1.5px) 80% 35%/46px 30px,
    linear-gradient(172deg,transparent 0 58%,rgba(100,95,255,.18) 59%,rgba(236,77,255,.33) 63%,transparent 69%),
    radial-gradient(ellipse at 74% 105%,rgba(242,90,255,.42),transparent 42%),
    radial-gradient(ellipse at 42% 112%,rgba(56,112,255,.34),transparent 38%) !important;
  opacity:.82 !important;
}

.stats-panel::after{
  content:"" !important;
  position:absolute !important;
  left:-4% !important;
  right:-4% !important;
  bottom:-20px !important;
  height:72px !important;
  pointer-events:none !important;
  background:
    linear-gradient(8deg,transparent 32%,rgba(105,110,255,.36) 38%,rgba(245,85,255,.55) 45%,transparent 56%),
    linear-gradient(-7deg,transparent 38%,rgba(74,132,255,.32) 44%,rgba(255,255,255,.38) 49%,transparent 59%) !important;
  filter:blur(.2px) drop-shadow(0 0 12px rgba(185,95,255,.45)) !important;
  opacity:.9 !important;
}

.stat{
  position:relative !important;
  z-index:2 !important;
  gap:18px !important;
  border-left:1px solid rgba(255,255,255,.18) !important;
}

.stat:last-child{
  border-left:0 !important;
}

.stat strong{
  font-size:42px !important;
  font-weight:900 !important;
  letter-spacing:-1px !important;
  color:#fff !important;
  text-shadow:0 0 18px rgba(255,255,255,.18) !important;
}

.stat small{
  font-size:12.5px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,.88) !important;
  margin-top:7px !important;
}

.stat i{
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  font-size:0 !important;
  color:#b78cff !important;
  border-radius:50% !important;
  background:rgba(125,86,255,.07) !important;
  box-shadow:0 0 22px rgba(151,91,255,.14) !important;
}

.stat i svg{
  width:32px !important;
  height:32px !important;
  fill:none !important;
  stroke:#b88bff !important;
  stroke-width:3.2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  filter:drop-shadow(0 0 6px rgba(184,139,255,.45)) !important;
}



/* =====================================================
   FIX PASS 40 - Stats Bar Premium Reference Tune
   Scope: Stats panel only
   - slightly taller
   - less star noise
   - remove middle glow band
   - move wave/light energy to bottom
   - show SVG icons clearly
===================================================== */

.stats-panel{
  min-height:118px !important;
  padding:26px 38px !important;
  border-radius:19px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(70,80,190,.18), transparent 23%),
    radial-gradient(circle at 88% 64%, rgba(160,70,220,.18), transparent 28%),
    linear-gradient(135deg,#07102f 0%,#0e1049 48%,#25115e 100%) !important;
  box-shadow:
    0 20px 58px rgba(10,12,55,.20),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
}

/* subtle star texture + bottom-only wave, because apparently the galaxy can calm down */
.stats-panel::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.30) 0 1px, transparent 1.5px) 8% 22%/84px 56px,
    radial-gradient(circle, rgba(150,135,255,.28) 0 1px, transparent 1.5px) 38% 26%/110px 64px,
    radial-gradient(circle, rgba(255,255,255,.22) 0 1px, transparent 1.5px) 82% 24%/94px 58px,
    radial-gradient(ellipse at 78% 112%, rgba(235,84,255,.34), transparent 38%),
    radial-gradient(ellipse at 34% 112%, rgba(56,112,255,.28), transparent 36%) !important;
  opacity:.62 !important;
}

/* wave must stay down, not slap the numbers in the face */
.stats-panel::after{
  content:"" !important;
  position:absolute !important;
  left:-4% !important;
  right:-4% !important;
  bottom:-8px !important;
  height:58px !important;
  pointer-events:none !important;
  background:
    linear-gradient(7deg, transparent 34%, rgba(82,98,255,.30) 42%, rgba(230,80,255,.50) 48%, transparent 62%),
    linear-gradient(-6deg, transparent 42%, rgba(55,120,255,.26) 48%, rgba(255,255,255,.30) 53%, transparent 65%) !important;
  filter:drop-shadow(0 0 12px rgba(180,90,255,.40)) !important;
  opacity:.72 !important;
}

.stat{
  z-index:3 !important;
  gap:18px !important;
  border-left:1px solid rgba(255,255,255,.20) !important;
}

.stat strong{
  font-size:44px !important;
  font-weight:900 !important;
  color:#fff !important;
  text-shadow:
    0 0 12px rgba(255,255,255,.14),
    0 0 20px rgba(150,120,255,.12) !important;
}

.stat small{
  font-size:12.8px !important;
  color:rgba(255,255,255,.88) !important;
  font-weight:850 !important;
}

.stat i{
  width:46px !important;
  height:46px !important;
  opacity:1 !important;
  background:rgba(122,86,255,.08) !important;
  box-shadow:
    0 0 22px rgba(151,91,255,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.stat i svg{
  width:34px !important;
  height:34px !important;
  stroke:#b98cff !important;
  stroke-width:3.15 !important;
  opacity:1 !important;
  filter:
    drop-shadow(0 0 5px rgba(184,139,255,.48))
    drop-shadow(0 0 10px rgba(110,85,255,.22)) !important;
}



/* =====================================================
   FIX PASS 41 - Stats icons visibility fix
   Scope: Stats icons only
===================================================== */

.stats-panel .stat i{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  opacity:1 !important;
  visibility:visible !important;
  font-size:0 !important;
  color:#b98cff !important;
  background:rgba(130,90,255,.10) !important;
  border:1px solid rgba(185,140,255,.18) !important;
  box-shadow:
    0 0 22px rgba(151,91,255,.28),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  overflow:visible !important;
}

.stats-panel .stat i svg{
  display:block !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  fill:none !important;
  stroke:#c39aff !important;
  stroke-width:3.4 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:
    drop-shadow(0 0 5px rgba(195,154,255,.75))
    drop-shadow(0 0 12px rgba(110,85,255,.35)) !important;
}

.stats-panel .stat{
  overflow:visible !important;
}



/* =====================================================
   FIX PASS 42 - Process compact reference tune
   Scope: Process section only
   - wider timeline, narrower text
   - smaller circles/icons
   - shorter total height
   - thinner purple-dominant line
   - clearer connector nodes
===================================================== */

.process-section{
  display:grid !important;
  grid-template-columns:240px 1fr !important;
  gap:34px !important;
  align-items:start !important;
  padding:20px 58px 26px !important;
  margin-top:22px !important;
}

.process-copy,
.process-intro{
  max-width:240px !important;
  text-align:right !important;
  padding-top:2px !important;
}

.process-copy h2,
.process-intro h2{
  font-size:34px !important;
  line-height:1.28 !important;
  margin:8px 0 10px !important;
  letter-spacing:-1px !important;
}

.process-copy p,
.process-intro p{
  font-size:12px !important;
  line-height:1.9 !important;
  max-width:235px !important;
  color:#667085 !important;
}

.steps-line,
.process-timeline{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:18px !important;
  width:100% !important;
  padding-top:0 !important;
  position:relative !important;
}

.steps-line::before,
.process-timeline::before{
  content:"" !important;
  position:absolute !important;
  top:38px !important;
  left:7.5% !important;
  right:7.5% !important;
  height:3px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#8d5bff 0%,#c75dff 38%,#5c8dff 68%,#8d5bff 100%) !important;
  box-shadow:0 0 10px rgba(137,91,255,.22) !important;
  z-index:0 !important;
}

.steps-line::after,
.process-timeline::after{
  content:"" !important;
  position:absolute !important;
  top:33px !important;
  left:7.5% !important;
  right:7.5% !important;
  height:13px !important;
  pointer-events:none !important;
  z-index:1 !important;
  background:
    radial-gradient(circle,#8d5bff 0 3.5px,rgba(141,91,255,.26) 3.5px 7px,transparent 8px) 25% 50%/15px 15px no-repeat,
    radial-gradient(circle,#5c8dff 0 3.5px,rgba(92,141,255,.24) 3.5px 7px,transparent 8px) 50% 50%/15px 15px no-repeat,
    radial-gradient(circle,#c75dff 0 3.5px,rgba(199,93,255,.22) 3.5px 7px,transparent 8px) 75% 50%/15px 15px no-repeat !important;
}

.step,
.process-step{
  text-align:center !important;
  position:relative !important;
  z-index:2 !important;
}

.step div,
.process-icon{
  width:76px !important;
  height:76px !important;
  border-radius:50% !important;
  margin:0 auto 9px !important;
  display:grid !important;
  place-items:center !important;
  font-size:28px !important;
  color:#6f3dff !important;
  background:
    radial-gradient(circle at 35% 18%,rgba(255,255,255,.96),rgba(255,255,255,.54) 42%,rgba(255,255,255,.18) 100%) !important;
  border:1px solid rgba(255,255,255,.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -14px 30px rgba(125,92,255,.045),
    0 10px 28px rgba(80,72,170,.07) !important;
  backdrop-filter:blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(145%) !important;
}

.step b,
.process-number{
  display:block !important;
  color:#714cff !important;
  font-size:13px !important;
  font-weight:900 !important;
  margin:0 0 6px !important;
}

.step h3,
.process-step h3{
  font-size:13.5px !important;
  font-weight:900 !important;
  color:#07132f !important;
  line-height:1.45 !important;
  margin:0 0 5px !important;
}

.step p,
.process-step p{
  font-size:10.7px !important;
  line-height:1.7 !important;
  color:#667085 !important;
  margin:0 auto !important;
  max-width:125px !important;
}

/* icon size correction */
.steps-line .step:nth-child(1) div::before,
.process-timeline .process-step:nth-child(1) .process-icon::before{font-size:28px !important;}

.steps-line .step:nth-child(2) div::before,
.process-timeline .process-step:nth-child(2) .process-icon::before{font-size:28px !important;}

.steps-line .step:nth-child(3) div::before,
.process-timeline .process-step:nth-child(3) .process-icon::before{font-size:23px !important;}

.steps-line .step:nth-child(4) div::before,
.process-timeline .process-step:nth-child(4) .process-icon::before{font-size:27px !important;}

.steps-line .step:nth-child(5) div::before,
.process-timeline .process-step:nth-child(5) .process-icon::before{font-size:28px !important;}

@media(max-width:980px){
  .process-section{
    grid-template-columns:1fr !important;
    padding:24px 22px !important;
  }
  .process-copy,
  .process-intro{
    max-width:100% !important;
    text-align:center !important;
  }
  .steps-line,
  .process-timeline{
    grid-template-columns:1fr !important;
  }
  .steps-line::before,
  .steps-line::after,
  .process-timeline::before,
  .process-timeline::after{
    display:none !important;
  }
}



/* =====================================================
   FIX PASS 43 - Stats order/numbers + Process column swap
   Scope:
   1) Stats text/numbers only, icons preserved
   2) Process: text left, timeline right
===================================================== */

/* Process columns swap:
   In RTL grid, column 1 renders on the right, column 2 on the left.
   So timeline = column 1, text = column 2. */
.process-section{
  grid-template-columns:1fr 240px !important;
}

.steps-line,
.process-timeline{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:stretch !important;
}

.process-copy,
.process-intro{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:start !important;
  text-align:right !important;
}

/* Keep mobile sane, because apparently layouts enjoy falling apart for sport */
@media(max-width:980px){
  .process-section{
    grid-template-columns:1fr !important;
  }
  .steps-line,
  .process-timeline,
  .process-copy,
  .process-intro{
    grid-column:auto !important;
    grid-row:auto !important;
  }
}



/* =====================================================
   FIX PASS 44 - Process layout tune only
   Scope: Process section only
   Notes:
   - Stats numbers/order are untouched.
   - Text stays left, timeline stays right.
   - Process ratio tuned closer to reference.
===================================================== */

.process-section{
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap:42px !important;
  padding:28px 58px 34px !important;
  margin-top:28px !important;
  align-items:start !important;
}

/* RTL grid: column 1 is right, column 2 is left */
.steps-line,
.process-timeline{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:stretch !important;
  width:100% !important;
  gap:20px !important;
}

.process-copy,
.process-intro{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:start !important;
  max-width:360px !important;
  text-align:right !important;
  padding-top:4px !important;
}

.process-copy h2,
.process-intro h2{
  font-size:36px !important;
  line-height:1.32 !important;
  margin:9px 0 13px !important;
}

.process-copy p,
.process-intro p{
  font-size:12.8px !important;
  line-height:2.05 !important;
  max-width:330px !important;
}

/* restore a little breathing room */
.step div,
.process-icon{
  width:80px !important;
  height:80px !important;
  margin-bottom:11px !important;
}

.steps-line::before,
.process-timeline::before{
  top:40px !important;
  left:7% !important;
  right:7% !important;
  height:3px !important;
}

.steps-line::after,
.process-timeline::after{
  top:35px !important;
  left:7% !important;
  right:7% !important;
}

.step b,
.process-number{
  margin-bottom:7px !important;
}

.step h3,
.process-step h3{
  font-size:13.8px !important;
  line-height:1.5 !important;
  margin-bottom:6px !important;
}

.step p,
.process-step p{
  font-size:11px !important;
  line-height:1.82 !important;
  max-width:132px !important;
}

@media(max-width:980px){
  .process-section{
    grid-template-columns:1fr !important;
    padding:24px 22px !important;
  }
  .steps-line,
  .process-timeline,
  .process-copy,
  .process-intro{
    grid-column:auto !important;
    grid-row:auto !important;
    max-width:100% !important;
  }
}



/* =====================================================
   FIX PASS 45 - Projects section layout tune
   Scope: Projects section only
   - text column narrower
   - cards area wider
   - section height reduced
   - cards smaller
   - left arrow closer to panel edge
===================================================== */

.projects-section,
.portfolio-section,
.cases-section{
  min-height:360px !important;
  padding:28px 38px !important;
  border-radius:24px !important;
}

/* common project wrapper possibilities */
.projects-inner,
.projects-wrapper,
.portfolio-inner,
.cases-inner{
  display:grid !important;
  grid-template-columns:25% 75% !important;
  gap:26px !important;
  align-items:center !important;
}

/* text side */
.projects-copy,
.projects-intro,
.portfolio-copy,
.cases-copy{
  max-width:270px !important;
  justify-self:end !important;
}

.projects-copy h2,
.projects-intro h2,
.portfolio-copy h2,
.cases-copy h2{
  font-size:38px !important;
  line-height:1.28 !important;
  margin-bottom:14px !important;
}

.projects-copy p,
.projects-intro p,
.portfolio-copy p,
.cases-copy p{
  font-size:13px !important;
  line-height:1.95 !important;
}

/* cards side */
.projects-slider,
.projects-grid,
.portfolio-slider,
.cases-slider{
  gap:24px !important;
  align-items:center !important;
}

.project-card,
.portfolio-card,
.case-card{
  min-height:255px !important;
  height:255px !important;
  border-radius:18px !important;
}

.project-card img,
.portfolio-card img,
.case-card img{
  height:175px !important;
  object-fit:cover !important;
}

.project-card h3,
.portfolio-card h3,
.case-card h3{
  font-size:16px !important;
  margin-top:12px !important;
}

/* navigation arrow: sit on panel edge, not orbiting Saturn */
.projects-nav,
.project-nav,
.slider-nav,
.projects-arrow{
  left:-22px !important;
}

.projects-nav.next,
.project-nav.next,
.slider-nav.next,
.projects-arrow.next{
  right:-22px !important;
  left:auto !important;
}

/* If current layout is flex instead of grid */
.projects-section > .container,
.portfolio-section > .container,
.cases-section > .container{
  max-width:1280px !important;
}

@media(max-width:980px){
  .projects-inner,
  .projects-wrapper,
  .portfolio-inner,
  .cases-inner{
    grid-template-columns:1fr !important;
  }

  .projects-copy,
  .projects-intro,
  .portfolio-copy,
  .cases-copy{
    max-width:100% !important;
    justify-self:stretch !important;
  }

  .project-card,
  .portfolio-card,
  .case-card{
    height:auto !important;
    min-height:240px !important;
  }
}


/* FIX 47 - real image test on first project card */

.project-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.project-card{
    overflow:hidden;
    position:relative;
}

.project-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(to top,
      rgba(2,8,30,.92) 0%,
      rgba(2,8,30,.45) 35%,
      rgba(2,8,30,.05) 100%);
    pointer-events:none;
}

.project-card h3,
.project-card span{
    position:absolute;
    z-index:3;
}



/* FIX 48 - project artworks */
.project-card img,
.portfolio-card img,
.case-card img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

.project-card::after,
.portfolio-card::after,
.case-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
      rgba(2,8,30,.92) 0%,
      rgba(2,8,30,.35) 35%,
      rgba(2,8,30,0) 70%);
    pointer-events:none;
}

.project-card h3,
.project-card .tag,
.portfolio-card h3,
.case-card h3{
    text-shadow:none !important;
    box-shadow:none !important;
    filter:none !important;
}


/* FIX49 project cards redesign */
.projects-panel{align-items:stretch!important}
.project-card{
display:flex!important;flex-direction:column!important;
height:360px!important;overflow:hidden!important;position:relative!important;
padding:0!important;
}
.project-card img{
width:100%!important;height:78%!important;object-fit:cover!important;display:block!important;
}
.project-card .project-content{
height:22%!important;background:#06102d!important;
display:flex!important;flex-direction:column!important;justify-content:center!important;
align-items:center!important;gap:6px;padding:10px!important;
}
.project-card h3{position:static!important;margin:0!important;text-shadow:none!important}
.project-card span{position:static!important;box-shadow:none!important;text-shadow:none!important;background:transparent!important;color:#9f8cff!important}
.project-card::after{
content:"";position:absolute;left:0;right:0;top:58%;height:20%;
background:linear-gradient(to bottom,transparent,rgba(6,16,45,.95));
pointer-events:none;
}



/* =====================================================
   FIX 50 - Clean projects cards
   Scope: Projects section only
   - taller project cards
   - remove purple labels/categories
   - remove slider arrows and controls
   - keep only image + project title
===================================================== */

/* Taller cards */
.project-card,
.portfolio-card,
.case-card{
  height:460px !important;
  min-height:460px !important;
  border-radius:20px !important;
  overflow:hidden !important;
  position:relative !important;
}

/* Image fills the visual area */
.project-card img,
.portfolio-card img,
.case-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Dark bottom gradient for title readability */
.project-card::after,
.portfolio-card::after,
.case-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(to top,
      rgba(2,8,30,.92) 0%,
      rgba(2,8,30,.62) 18%,
      rgba(2,8,30,.18) 46%,
      rgba(2,8,30,0) 78%) !important;
  pointer-events:none !important;
  z-index:1 !important;
}

/* Keep project title only */
.project-card h3,
.portfolio-card h3,
.case-card h3{
  position:absolute !important;
  right:22px !important;
  left:22px !important;
  bottom:28px !important;
  z-index:3 !important;
  margin:0 !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1.5 !important;
  text-shadow:none !important;
  filter:none !important;
  box-shadow:none !important;
}

/* Remove purple labels/categories under titles */
.project-card .tag,
.project-card .category,
.project-card span,
.project-card small,
.portfolio-card .tag,
.portfolio-card .category,
.portfolio-card span,
.portfolio-card small,
.case-card .tag,
.case-card .category,
.case-card span,
.case-card small{
  display:none !important;
}

/* Remove slider arrows and derivatives */
.projects-nav,
.project-nav,
.slider-nav,
.projects-arrow,
.swiper-button-prev,
.swiper-button-next,
.carousel-arrow,
.project-arrow,
.projects-controls,
.slider-controls,
.swiper-pagination,
.projects-pagination{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* If there are loose arrow buttons inside the projects section */
.projects-section button[class*="arrow"],
.projects-section button[class*="nav"],
.portfolio-section button[class*="arrow"],
.portfolio-section button[class*="nav"],
.cases-section button[class*="arrow"],
.cases-section button[class*="nav"]{
  display:none !important;
}

/* Give the section enough vertical room for the taller cards */
.projects-section,
.portfolio-section,
.cases-section{
  min-height:540px !important;
  padding-top:34px !important;
  padding-bottom:34px !important;
}

/* Make sure the cards area aligns nicely */
.projects-slider,
.projects-grid,
.portfolio-slider,
.cases-slider{
  align-items:stretch !important;
}



/* =====================================================
   FIX 51 - Projects polish
   Scope: Projects section only
   - remove dark haze from top of cards
   - remove side arrow and bottom navigation
   - vertically center right text block
===================================================== */

/* Remove the full-card haze. Keep only a small bottom gradient for title readability. */
.project-card::after,
.portfolio-card::after,
.case-card::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:0 !important;
  height:34% !important;
  background:linear-gradient(
    to top,
    rgba(2,8,30,.88) 0%,
    rgba(2,8,30,.42) 45%,
    rgba(2,8,30,0) 100%
  ) !important;
  pointer-events:none !important;
  z-index:1 !important;
}

/* Make sure images are not darkened by inherited filters or overlays. */
.project-card img,
.portfolio-card img,
.case-card img{
  filter:none !important;
  opacity:1 !important;
}

/* Remove big side arrow and all slider/navigation controls. */
.projects-nav,
.project-nav,
.slider-nav,
.projects-arrow,
.project-arrow,
.carousel-arrow,
.swiper-button-prev,
.swiper-button-next,
.swiper-pagination,
.projects-pagination,
.projects-controls,
.slider-controls,
.carousel-controls,
.slick-arrow,
.slick-dots{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Catch loose arrow/control buttons inside projects area. */
.projects-section button,
.portfolio-section button,
.cases-section button{
  /* keep CTA buttons visible by restoring them below */
}

.projects-section button[class*="arrow"],
.projects-section button[class*="nav"],
.projects-section button[class*="prev"],
.projects-section button[class*="next"],
.projects-section .arrow,
.projects-section .prev,
.projects-section .next,
.portfolio-section button[class*="arrow"],
.portfolio-section button[class*="nav"],
.cases-section button[class*="arrow"],
.cases-section button[class*="nav"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Restore CTA button if it was accidentally affected by generic button rules. */
.projects-copy a,
.projects-intro a,
.portfolio-copy a,
.cases-copy a,
.projects-copy .btn,
.projects-intro .btn,
.portfolio-copy .btn,
.cases-copy .btn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Vertically center the right text column relative to the cards. */
.projects-inner,
.projects-wrapper,
.portfolio-inner,
.cases-inner{
  align-items:center !important;
}

.projects-copy,
.projects-intro,
.portfolio-copy,
.cases-copy{
  align-self:center !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  height:100% !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* Keep only project title, no category/tag labels. */
.project-card .tag,
.project-card .category,
.project-card small,
.project-card span,
.portfolio-card .tag,
.portfolio-card .category,
.portfolio-card small,
.portfolio-card span,
.case-card .tag,
.case-card .category,
.case-card small,
.case-card span{
  display:none !important;
}

/* Title positioning remains clean and readable. */
.project-card h3,
.portfolio-card h3,
.case-card h3{
  bottom:28px !important;
  z-index:3 !important;
}



/* =====================================================
   FIX 52 - HARD REMOVE projects controls
   Scope: Projects / Portfolio section only
   Purpose:
   - remove big side arrow
   - remove bottom nav/pagination arrows
   - remove arrow/icon inside CTA button
   - keep CTA text/button visible
===================================================== */

/* 1) Remove every absolute/floating control inside projects area */
.projects-section .projects-nav,
.projects-section .project-nav,
.projects-section .slider-nav,
.projects-section .projects-arrow,
.projects-section .project-arrow,
.projects-section .carousel-arrow,
.projects-section .swiper-button-prev,
.projects-section .swiper-button-next,
.projects-section .swiper-pagination,
.projects-section .swiper-pagination-bullet,
.projects-section .projects-pagination,
.projects-section .project-pagination,
.projects-section .slider-pagination,
.projects-section .projects-controls,
.projects-section .project-controls,
.projects-section .slider-controls,
.projects-section .carousel-controls,
.projects-section .owl-nav,
.projects-section .owl-prev,
.projects-section .owl-next,
.projects-section .owl-dots,
.projects-section .slick-arrow,
.projects-section .slick-prev,
.projects-section .slick-next,
.projects-section .slick-dots,
.portfolio-section .projects-nav,
.portfolio-section .project-nav,
.portfolio-section .slider-nav,
.portfolio-section .projects-arrow,
.portfolio-section .project-arrow,
.portfolio-section .carousel-arrow,
.portfolio-section .swiper-button-prev,
.portfolio-section .swiper-button-next,
.portfolio-section .swiper-pagination,
.portfolio-section .swiper-pagination-bullet,
.portfolio-section .projects-pagination,
.portfolio-section .project-pagination,
.portfolio-section .slider-pagination,
.portfolio-section .projects-controls,
.portfolio-section .project-controls,
.portfolio-section .slider-controls,
.portfolio-section .carousel-controls,
.portfolio-section .owl-nav,
.portfolio-section .owl-prev,
.portfolio-section .owl-next,
.portfolio-section .owl-dots,
.portfolio-section .slick-arrow,
.portfolio-section .slick-prev,
.portfolio-section .slick-next,
.portfolio-section .slick-dots,
.cases-section .projects-nav,
.cases-section .project-nav,
.cases-section .slider-nav,
.cases-section .projects-arrow,
.cases-section .project-arrow,
.cases-section .carousel-arrow,
.cases-section .swiper-button-prev,
.cases-section .swiper-button-next,
.cases-section .swiper-pagination,
.cases-section .swiper-pagination-bullet,
.cases-section .projects-pagination,
.cases-section .project-pagination,
.cases-section .slider-pagination,
.cases-section .projects-controls,
.cases-section .project-controls,
.cases-section .slider-controls,
.cases-section .carousel-controls,
.cases-section .owl-nav,
.cases-section .owl-prev,
.cases-section .owl-next,
.cases-section .owl-dots,
.cases-section .slick-arrow,
.cases-section .slick-prev,
.cases-section .slick-next,
.cases-section .slick-dots{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* 2) Catch the large round side arrow even when it has generic classes */
.projects-section > a[aria-label*="بعد"],
.projects-section > a[aria-label*="قبل"],
.projects-section > button[aria-label*="بعد"],
.projects-section > button[aria-label*="قبل"],
.projects-section a[class*="arrow"],
.projects-section button[class*="arrow"],
.projects-section a[class*="prev"],
.projects-section button[class*="prev"],
.projects-section a[class*="next"],
.projects-section button[class*="next"],
.projects-section a[class*="slider"],
.projects-section button[class*="slider"],
.portfolio-section a[class*="arrow"],
.portfolio-section button[class*="arrow"],
.portfolio-section a[class*="prev"],
.portfolio-section button[class*="prev"],
.portfolio-section a[class*="next"],
.portfolio-section button[class*="next"],
.cases-section a[class*="arrow"],
.cases-section button[class*="arrow"],
.cases-section a[class*="prev"],
.cases-section button[class*="prev"],
.cases-section a[class*="next"],
.cases-section button[class*="next"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 3) Restore the main CTA button itself, then remove only its arrow/icon */
.projects-copy a,
.projects-intro a,
.portfolio-copy a,
.cases-copy a,
.projects-copy .btn,
.projects-intro .btn,
.portfolio-copy .btn,
.cases-copy .btn,
.projects-section a.btn,
.portfolio-section a.btn,
.cases-section a.btn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  width:auto !important;
  height:auto !important;
  min-width:auto !important;
  min-height:auto !important;
  overflow:visible !important;
}

.projects-copy a svg,
.projects-intro a svg,
.portfolio-copy a svg,
.cases-copy a svg,
.projects-copy a i,
.projects-intro a i,
.portfolio-copy a i,
.cases-copy a i,
.projects-copy a .icon,
.projects-intro a .icon,
.portfolio-copy a .icon,
.cases-copy a .icon,
.projects-copy a .arrow,
.projects-intro a .arrow,
.portfolio-copy a .arrow,
.cases-copy a .arrow,
.projects-copy a .btn-arrow,
.projects-intro a .btn-arrow,
.portfolio-copy a .btn-arrow,
.cases-copy a .btn-arrow,
.projects-section a.btn svg,
.projects-section a.btn i,
.projects-section a.btn .icon,
.projects-section a.btn .arrow,
.projects-section a.btn .btn-arrow{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  margin:0 !important;
}

/* 4) Hide loose Persian/Latin arrow glyphs in projects control wrappers */
.projects-section .controls,
.projects-section .navigation,
.projects-section .nav,
.projects-section .pagination,
.portfolio-section .controls,
.portfolio-section .navigation,
.portfolio-section .nav,
.portfolio-section .pagination,
.cases-section .controls,
.cases-section .navigation,
.cases-section .nav,
.cases-section .pagination{
  display:none !important;
}

/* 5) Vertical centering for right text block remains enforced */
.projects-inner,
.projects-wrapper,
.portfolio-inner,
.cases-inner{
  align-items:center !important;
}

.projects-copy,
.projects-intro,
.portfolio-copy,
.cases-copy{
  align-self:center !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  height:100% !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* 6) Ensure card top image is clean, no dark haze over the top */
.project-card::after,
.portfolio-card::after,
.case-card::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:0 !important;
  height:28% !important;
  background:linear-gradient(
    to top,
    rgba(2,8,30,.86) 0%,
    rgba(2,8,30,.38) 50%,
    rgba(2,8,30,0) 100%
  ) !important;
  pointer-events:none !important;
  z-index:1 !important;
}


/* FIX 53 - Remove CTA arrow/icon aggressively */
a.btn svg,
a.btn i,
a.btn .icon,
a.btn .arrow,
a.btn .btn-arrow,
button.btn svg,
button.btn i,
button.btn .icon,
button.btn .arrow,
button.btn .btn-arrow{
  display:none !important;
  width:0 !important;
  margin:0 !important;
  padding:0 !important;
}


/* FIX 54 - Force remove CTA arrow */
a.btn::before,
a.btn::after,
button.btn::before,
button.btn::after,
.btn-primary::before,
.btn-primary::after,
[class*="btn"] svg,
[class*="btn"] i,
[class*="btn"] .icon,
[class*="btn"] .arrow,
[class*="btn"] [class*="arrow"]{
    display:none !important;
    content:none !important;
    width:0 !important;
    margin:0 !important;
    padding:0 !important;
}


/* =====================================================
   FIX 55 REAL - CTA + Footer actual rebuild
   This targets the real classes in index.html:
   .cta-panel, .cta-art, .cta-copy, .footer
===================================================== */

/* CTA card: glass panel, image left, text right */
.cta-panel{
  width:calc(100% - 26px) !important;
  min-height:205px !important;
  height:205px !important;
  margin:48px auto 0 !important;
  border-radius:30px !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:45% 55% !important;
  align-items:center !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.78),rgba(245,242,255,.48)) !important;
  border:1px solid rgba(255,255,255,.86) !important;
  box-shadow:
    0 22px 56px rgba(60,54,135,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 70px rgba(255,255,255,.25) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}

.cta-panel::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(137,91,255,.16),transparent 34%),
    radial-gradient(circle at 74% 72%,rgba(75,120,255,.11),transparent 32%) !important;
  pointer-events:none !important;
}

.cta-art{
  grid-column:1 !important;
  grid-row:1 !important;
  height:100% !important;
  width:100% !important;
  overflow:hidden !important;
}

.cta-art img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  opacity:.95 !important;
}

.cta-copy{
  grid-column:2 !important;
  grid-row:1 !important;
  position:relative !important;
  z-index:2 !important;
  text-align:center !important;
  padding:0 58px !important;
}

.cta-copy h2{
  font-size:36px !important;
  line-height:1.35 !important;
  margin:0 0 8px !important;
  color:#07132f !important;
}

.cta-copy p{
  margin:0 0 20px !important;
  color:#667085 !important;
  font-size:14px !important;
  line-height:1.9 !important;
}

.cta-copy .btn,
.cta-copy a.btn{
  height:46px !important;
  min-width:235px !important;
  justify-content:center !important;
  gap:0 !important;
}

.cta-copy .btn::before,
.cta-copy .btn::after,
.cta-copy .btn svg,
.cta-copy .btn i,
.cta-copy .btn .icon,
.cta-copy .btn .arrow{
  display:none !important;
  content:none !important;
}

/* Footer: real 5-column glass island */
.footer.rhb-footer,
.footer{
  position:relative !important;
  width:calc(100% - 30px) !important;
  margin:22px auto 70px !important;
  border-radius:30px !important;
  padding:34px 38px 18px !important;
  display:grid !important;
  grid-template-columns:1.05fr 1fr 1fr 1fr 1.45fr !important;
  gap:0 !important;
  align-items:start !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.78),rgba(247,244,255,.58)) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:
    0 24px 60px rgba(62,58,135,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 70px rgba(255,255,255,.26) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
}

.footer::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 8% 95%,rgba(139,91,255,.10),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(95,120,255,.08),transparent 30%) !important;
  pointer-events:none !important;
}

.footer-col{
  position:relative !important;
  z-index:2 !important;
  min-height:150px !important;
  padding:0 28px !important;
}

.footer-col:not(:last-of-type)::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:10px !important;
  bottom:8px !important;
  width:1px !important;
  background:linear-gradient(to bottom,transparent,rgba(111,61,255,.16),transparent) !important;
}

.footer h4{
  font-size:15px !important;
  line-height:1.7 !important;
  margin:0 0 14px !important;
  color:#07132f !important;
  font-weight:900 !important;
}

.footer p,
.footer a{
  display:block !important;
  color:#667085 !important;
  font-size:13px !important;
  line-height:1.9 !important;
  margin:7px 0 !important;
  text-decoration:none !important;
}

.footer-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  text-align:right !important;
}

.footer-brand img{
  width:205px !important;
  height:auto !important;
  margin:0 0 14px !important;
}

.footer-brand p{
  max-width:310px !important;
  margin:0 0 16px !important;
}

.footer-social{
  display:flex !important;
  flex-direction:row !important;
  gap:16px !important;
  margin-top:6px !important;
}

.footer-social a{
  width:30px !important;
  height:30px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  color:#07132f !important;
  font-weight:800 !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.42) !important;
  border:1px solid rgba(111,61,255,.12) !important;
}

.copyright{
  grid-column:1/-1 !important;
  position:relative !important;
  z-index:2 !important;
  text-align:center !important;
  border-top:1px solid rgba(111,61,255,.13) !important;
  padding-top:16px !important;
  margin-top:22px !important;
  color:#98a2b3 !important;
  font-size:12px !important;
}

.back-to-top{
  position:absolute !important;
  z-index:5 !important;
  left:22px !important;
  bottom:72px !important;
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  color:#07132f !important;
  font-size:24px !important;
  text-decoration:none !important;
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(111,61,255,.14) !important;
  box-shadow:0 12px 28px rgba(62,58,135,.13), inset 0 1px 0 #fff !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

/* calm down the busy footer background area */
body::after,
.page::after,
.footer-bg,
.footer-waves{
  opacity:.18 !important;
}

/* Responsive footer */
@media(max-width:1100px){
  .cta-panel{
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:190px !important;
    padding:28px !important;
  }
  .cta-art{
    display:none !important;
  }
  .cta-copy{
    grid-column:1 !important;
    padding:0 !important;
  }
  .footer.rhb-footer,
  .footer{
    grid-template-columns:1fr 1fr !important;
    gap:24px !important;
  }
  .footer-col::after{
    display:none !important;
  }
}

@media(max-width:720px){
  .footer.rhb-footer,
  .footer{
    grid-template-columns:1fr !important;
    width:100% !important;
    margin-bottom:34px !important;
  }
  .footer-col{
    padding:0 !important;
  }
  .back-to-top{
    left:18px !important;
    bottom:60px !important;
  }
}


/* =====================================================
   FIX 56 - Footer final layout correction
   Scope: CTA + Footer only
===================================================== */

/* CTA closer to reference */
.cta-panel{
  width:calc(100% - 26px) !important;
  height:180px !important;
  min-height:180px !important;
  margin:44px auto 0 !important;
  border-radius:26px !important;
  grid-template-columns:55% 45% !important;
  overflow:hidden !important;
}

.cta-art{
  grid-column:1 !important;
  height:100% !important;
}

.cta-art img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

.cta-copy{
  grid-column:2 !important;
  padding:0 42px !important;
  text-align:center !important;
}

.cta-copy h2{
  font-size:33px !important;
  line-height:1.35 !important;
  margin:0 0 8px !important;
}

.cta-copy p{
  font-size:13.5px !important;
  margin:0 0 17px !important;
}

.cta-copy .btn,
.cta-copy a.btn{
  height:44px !important;
  min-width:220px !important;
  justify-content:center !important;
}

/* Footer compact, correct 5-column island */
.footer.rhb-footer,
footer.footer{
  direction:rtl !important;
  width:calc(100% - 30px) !important;
  min-height:260px !important;
  margin:22px auto 54px !important;
  padding:34px 38px 16px !important;
  border-radius:28px !important;
  display:grid !important;
  grid-template-columns:1.1fr 1fr 1fr 1fr 1.35fr !important;
  grid-template-areas:
    "contact solutions services links brand"
    "copyright copyright copyright copyright copyright" !important;
  gap:0 !important;
  align-items:start !important;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(248,245,255,.62)) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:
    0 22px 54px rgba(62,58,135,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
}

.footer-contact{grid-area:contact !important;}
.footer-solutions{grid-area:solutions !important;}
.footer-services{grid-area:services !important;}
.footer-links{grid-area:links !important;}
.footer-brand{grid-area:brand !important;}

.footer-col{
  position:relative !important;
  z-index:2 !important;
  min-height:150px !important;
  padding:0 26px !important;
  text-align:right !important;
}

.footer-col::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:8px !important;
  bottom:10px !important;
  width:1px !important;
  background:linear-gradient(to bottom,transparent,rgba(111,61,255,.16),transparent) !important;
}

.footer-contact::after{
  display:none !important;
}

.footer h4{
  font-size:15px !important;
  margin:0 0 13px !important;
  color:#07132f !important;
  font-weight:900 !important;
}

.footer p,
.footer a{
  display:block !important;
  font-size:13px !important;
  line-height:1.85 !important;
  margin:7px 0 !important;
  color:#667085 !important;
  text-decoration:none !important;
}

.footer-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}

.footer-brand img{
  width:190px !important;
  margin:0 0 12px !important;
}

.footer-brand p{
  max-width:300px !important;
  margin:0 0 14px !important;
}

.footer-social{
  display:flex !important;
  gap:14px !important;
  margin-top:4px !important;
}

.footer-social a{
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  background:rgba(255,255,255,.42) !important;
  border:1px solid rgba(111,61,255,.12) !important;
  color:#07132f !important;
}

.copyright{
  grid-area:copyright !important;
  text-align:center !important;
  border-top:1px solid rgba(111,61,255,.13) !important;
  padding-top:15px !important;
  margin-top:22px !important;
  font-size:12px !important;
  color:#98a2b3 !important;
}

.back-to-top{
  position:absolute !important;
  left:24px !important;
  bottom:72px !important;
  width:50px !important;
  height:50px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  font-size:24px !important;
  text-decoration:none !important;
  color:#07132f !important;
  background:rgba(255,255,255,.64) !important;
  border:1px solid rgba(111,61,255,.14) !important;
  box-shadow:0 12px 28px rgba(62,58,135,.13), inset 0 1px 0 #fff !important;
}

/* Reduce purple background dominance near footer */
body::after,
.page::after,
.footer-bg,
.footer-waves{
  opacity:.12 !important;
}

@media(max-width:1100px){
  .cta-panel{
    grid-template-columns:1fr !important;
    height:auto !important;
    padding:28px !important;
  }
  .cta-art{display:none !important;}
  .cta-copy{
    grid-column:1 !important;
    padding:0 !important;
  }
  .footer.rhb-footer,
  footer.footer{
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "brand brand"
      "links services"
      "solutions contact"
      "copyright copyright" !important;
  }
  .footer-col::after{display:none !important;}
}

@media(max-width:720px){
  .footer.rhb-footer,
  footer.footer{
    width:100% !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "brand"
      "links"
      "services"
      "solutions"
      "contact"
      "copyright" !important;
  }
}

/* FIX57 actual footer repair */
.footer.rhb-footer, footer.footer{
min-height:auto!important;
padding:28px 36px 14px!important;
grid-template-columns:1.6fr 1fr 1fr 1fr 1fr!important;
align-items:start!important;
}

.footer-brand{
grid-column:1!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
text-align:center!important;
min-height:auto!important;
}
.footer-brand img{width:140px!important;margin-bottom:12px!important}
.footer-brand p{max-width:280px!important;margin:0 auto 12px!important}
.footer-social{justify-content:center!important}

.footer-col{min-height:auto!important}

.back-to-top{
width:34px!important;
height:34px!important;
left:18px!important;
bottom:18px!important;
font-size:16px!important;
}

.copyright{
margin-top:10px!important;
padding-top:10px!important;
}

.footer::before{opacity:.25!important}


/* =====================================================
   FIX 58 - Integrated footer island + header logo reuse
   Scope: CTA + Footer only
===================================================== */

/* One island around CTA + footer */
.footer-island{
  position:relative !important;
  width:calc(100% - 30px) !important;
  margin:46px auto 58px !important;
  padding:0 0 18px !important;
  border-radius:30px !important;
  overflow:hidden !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.78),rgba(248,245,255,.58)) !important;
  border:1px solid rgba(255,255,255,.90) !important;
  box-shadow:
    0 24px 60px rgba(62,58,135,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
}

/* CTA is now nested inside footer island, not a separate lonely rectangle */
.footer-island .cta-panel{
  width:100% !important;
  margin:0 !important;
  height:185px !important;
  min-height:185px !important;
  border-radius:30px 30px 0 0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.56),rgba(247,244,255,.30)) !important;
  display:grid !important;
  grid-template-columns:55% 45% !important;
  overflow:hidden !important;
}

.footer-island .cta-panel::after{
  content:"" !important;
  position:absolute !important;
  left:28px !important;
  right:28px !important;
  bottom:0 !important;
  height:1px !important;
  background:rgba(111,61,255,.12) !important;
}

.footer-island .cta-art{
  grid-column:1 !important;
  height:100% !important;
}

.footer-island .cta-art img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

.footer-island .cta-copy{
  grid-column:2 !important;
  padding:0 44px !important;
  text-align:center !important;
}

.footer-island .cta-copy h2{
  font-size:33px !important;
  line-height:1.35 !important;
}

.footer-island .cta-copy .btn{
  min-width:220px !important;
}

/* Footer lives inside same glass island */
.footer-island .footer,
.footer-island footer.footer{
  width:100% !important;
  margin:0 !important;
  min-height:235px !important;
  padding:30px 38px 14px !important;
  border:0 !important;
  border-radius:0 0 30px 30px !important;
  box-shadow:none !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Enforce compact real 5 columns */
.footer-island .footer.rhb-footer,
.footer-island footer.footer{
  display:grid !important;
  grid-template-columns:1.1fr 1fr 1fr 1fr 1.35fr !important;
  grid-template-areas:
    "contact solutions services links brand"
    "copyright copyright copyright copyright copyright" !important;
  gap:0 !important;
  align-items:start !important;
}

.footer-island .footer-brand{grid-area:brand !important;}
.footer-island .footer-links{grid-area:links !important;}
.footer-island .footer-services{grid-area:services !important;}
.footer-island .footer-solutions{grid-area:solutions !important;}
.footer-island .footer-contact{grid-area:contact !important;}

.footer-island .footer-col{
  min-height:145px !important;
  padding:0 26px !important;
}

.footer-island .footer-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:right !important;
}

.footer-island .footer-brand img{
  width:210px !important;
  max-width:210px !important;
  height:auto !important;
  margin:0 0 12px !important;
  object-fit:contain !important;
}

.footer-island .footer-brand p{
  max-width:310px !important;
  margin:0 0 12px !important;
}

.footer-island .footer-social{
  display:flex !important;
  gap:14px !important;
  margin-top:4px !important;
}

.footer-island .back-to-top{
  left:24px !important;
  bottom:68px !important;
  width:46px !important;
  height:46px !important;
  font-size:22px !important;
  background:rgba(255,255,255,.62) !important;
}

/* Lower footer height and empty vertical space */
.footer-island .copyright{
  margin-top:16px !important;
  padding-top:13px !important;
}

/* Dim the outside purple background, because it was yelling */
body::after,
.page::after,
.footer-bg,
.footer-waves{
  opacity:.10 !important;
}

@media(max-width:1100px){
  .footer-island .cta-panel{
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:170px !important;
    padding:26px !important;
  }
  .footer-island .cta-art{display:none !important;}
  .footer-island .cta-copy{
    grid-column:1 !important;
    padding:0 !important;
  }
  .footer-island .footer.rhb-footer,
  .footer-island footer.footer{
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "brand brand"
      "links services"
      "solutions contact"
      "copyright copyright" !important;
  }
}

@media(max-width:720px){
  .footer-island{
    width:100% !important;
  }
  .footer-island .footer.rhb-footer,
  .footer-island footer.footer{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "brand"
      "links"
      "services"
      "solutions"
      "contact"
      "copyright" !important;
  }
}

/* FIX59 */
.footer-island{padding-bottom:0!important}
.footer-island .cta-panel{grid-template-columns:45% 55%!important;height:170px!important;min-height:170px!important}
.footer-island .cta-copy{order:2!important}
.footer-island .cta-art{order:1!important}
.footer-island .footer{min-height:170px!important;padding:20px 35px 8px!important}
.footer-island .footer-brand{align-self:start!important}
.footer-island .footer-brand img{width:260px!important}
.footer-island .footer-col{min-height:90px!important}
.footer-island .footer-brand p{font-size:14px!important;line-height:2!important}
.back-to-top{left:auto!important;right:20px!important;bottom:20px!important;width:44px!important;height:44px!important}
.footer-social{margin-top:12px!important}



/* =====================================================
   FIX 60 - Final CTA background integration
   Scope: CTA only
===================================================== */

.footer-island .cta-panel,
.cta-panel{
  position:relative !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.78) 34%,
      rgba(255,255,255,.36) 58%,
      rgba(255,255,255,0) 100%),
    url("../img/cta-bg.webp") center center / cover no-repeat !important;
  overflow:hidden !important;
}

.footer-island .cta-art,
.cta-art{
  display:none !important;
}

.footer-island .cta-copy,
.cta-copy{
  position:relative !important;
  z-index:3 !important;
  grid-column:1 / span 1 !important;
  width:46% !important;
  max-width:620px !important;
  padding:0 52px !important;
  text-align:center !important;
  background:transparent !important;
}

.footer-island .cta-copy h2,
.cta-copy h2{
  color:#07132f !important;
  text-shadow:none !important;
}

.footer-island .cta-copy p,
.cta-copy p{
  color:#667085 !important;
}

.footer-island .cta-copy .btn,
.cta-copy .btn{
  margin:0 auto !important;
}

.footer-island .cta-copy .btn::before,
.footer-island .cta-copy .btn::after,
.cta-copy .btn::before,
.cta-copy .btn::after,
.footer-island .cta-copy .btn svg,
.footer-island .cta-copy .btn i,
.cta-copy .btn svg,
.cta-copy .btn i{
  display:none !important;
  content:none !important;
}

@media(max-width:1100px){
  .footer-island .cta-copy,
  .cta-copy{
    width:100% !important;
    padding:0 20px !important;
  }
}


/* FIX 61 - raw CTA background */
.footer-island .cta-panel,
.cta-panel{
    background-image:url('../img/footer-island-image.webp') !important;
    background-size:100% 100% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.footer-island .cta-panel::before,
.footer-island .cta-panel::after,
.cta-panel::before,
.cta-panel::after{
    display:none !important;
    content:none !important;
    background:none !important;
}

.footer-island .cta-copy,
.cta-copy{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

.footer-island .cta-art,
.cta-art{
    display:none !important;
}


/* =====================================================
   FIX 62 - Premium unified CTA + Footer island
   Scope: only real classes in index.html
   .footer-island, .cta-panel, .cta-copy, .cta-art, .footer
===================================================== */

.footer-island{
  position:relative !important;
  width:calc(100% - 28px) !important;
  margin:54px auto 64px !important;
  padding:14px !important;
  border-radius:36px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.60) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:
    0 30px 90px rgba(59,46,130,.14),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter:blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(150%) !important;
}

.footer-island::before{
  content:"" !important;
  position:absolute !important;
  inset:auto -12% -18% -12% !important;
  height:240px !important;
  background:radial-gradient(circle at 50% 100%,rgba(119,75,255,.16),rgba(255,255,255,0) 62%) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

.footer-island > *{
  position:relative !important;
  z-index:1 !important;
}

/* CTA: image is the whole background. No overlay or gradient on the image. Humanity survives one instruction at a time. */
.cta-panel,
.footer-island .cta-panel{
  width:100% !important;
  height:310px !important;
  min-height:310px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  background-image:url('../img/footer-island-image.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:0 24px 70px rgba(49,36,110,.12) !important;
}

.cta-panel::before,
.cta-panel::after,
.footer-island .cta-panel::before,
.footer-island .cta-panel::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

.cta-art,
.footer-island .cta-art{
  display:none !important;
}

.cta-copy,
.footer-island .cta-copy{
  position:relative !important;
  z-index:2 !important;
  width:min(520px,calc(100% - 44px)) !important;
  margin-right:auto !important;
  margin-left:34px !important;
  padding:30px 34px 32px !important;
  text-align:right !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:0 18px 50px rgba(27,20,78,.14), inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}

.cta-copy h2,
.footer-island .cta-copy h2{
  margin:0 0 10px !important;
  color:#111827 !important;
  font-size:34px !important;
  line-height:1.42 !important;
  letter-spacing:-.8px !important;
}

.cta-copy p,
.footer-island .cta-copy p{
  max-width:430px !important;
  margin:0 0 22px !important;
  color:#5f6878 !important;
  font-size:14px !important;
  line-height:2 !important;
}

.cta-copy .btn,
.cta-copy a.btn,
.footer-island .cta-copy .btn{
  height:48px !important;
  min-width:220px !important;
  padding:0 28px !important;
  justify-content:center !important;
  border-radius:999px !important;
  box-shadow:0 14px 32px rgba(111,61,255,.22) !important;
}

/* Footer: one island continuation, same logo as Header */
.footer.rhb-footer,
.footer-island .footer{
  width:100% !important;
  margin:14px 0 0 !important;
  padding:34px 34px 18px !important;
  border-radius:28px !important;
  display:grid !important;
  grid-template-columns:1.55fr 1fr 1fr 1fr 1.25fr !important;
  gap:24px !important;
  align-items:start !important;
  background:rgba(255,255,255,.52) !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 18px 48px rgba(62,52,130,.08) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}

.footer.rhb-footer::before,
.footer-island .footer::before,
.footer.rhb-footer::after,
.footer-island .footer::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

.footer-col,
.footer-island .footer-col{
  min-height:0 !important;
  padding:0 6px !important;
  position:relative !important;
}

.footer-col:not(:last-of-type)::after{
  display:none !important;
}

.footer-brand img,
.footer-island .footer-brand img{
  width:190px !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 0 16px !important;
  display:block !important;
}

.footer-brand p,
.footer-island .footer-brand p{
  max-width:320px !important;
  color:#667085 !important;
  font-size:13px !important;
  line-height:2.05 !important;
  margin:0 !important;
}

.footer h4,
.footer-island .footer h4{
  margin:7px 0 16px !important;
  color:#141827 !important;
  font-size:15px !important;
  font-weight:900 !important;
}

.footer p,
.footer a,
.footer-island .footer p,
.footer-island .footer a{
  color:#687386 !important;
  font-size:13px !important;
  line-height:1.95 !important;
  margin:7px 0 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  transition:color .2s ease, transform .2s ease !important;
}

.footer a:hover,
.footer-island .footer a:hover{
  color:#6f3dff !important;
  transform:translateX(-3px) !important;
}

.footer-social,
.footer-island .footer-social{
  display:flex !important;
  gap:10px !important;
  margin-top:20px !important;
}

.footer-social a,
.footer-island .footer-social a{
  width:34px !important;
  height:34px !important;
  margin:0 !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  color:#6f3dff !important;
  background:rgba(111,61,255,.08) !important;
  border:1px solid rgba(111,61,255,.13) !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.footer-social a:hover{
  transform:translateY(-3px) !important;
  background:#6f3dff !important;
  color:#fff !important;
}

.back-to-top,
.footer-island .back-to-top{
  position:absolute !important;
  left:24px !important;
  bottom:22px !important;
  width:40px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,#7c3cff,#a855f7) !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(111,61,255,.22) !important;
}

.copyright,
.footer-island .copyright{
  grid-column:1/-1 !important;
  margin-top:20px !important;
  padding-top:16px !important;
  border-top:1px solid rgba(111,61,255,.10) !important;
  color:#98a2b3 !important;
  text-align:center !important;
  font-size:12px !important;
}

@media(max-width:1100px){
  .footer.rhb-footer,
  .footer-island .footer{
    grid-template-columns:1.4fr 1fr 1fr !important;
  }
  .cta-copy,
  .footer-island .cta-copy{
    margin-left:24px !important;
  }
}

@media(max-width:720px){
  .footer-island{
    width:100% !important;
    margin:36px auto 42px !important;
    padding:10px !important;
    border-radius:28px !important;
  }
  .cta-panel,
  .footer-island .cta-panel{
    height:430px !important;
    min-height:430px !important;
    align-items:flex-end !important;
    justify-content:center !important;
    border-radius:24px !important;
    background-position:center center !important;
  }
  .cta-copy,
  .footer-island .cta-copy{
    width:calc(100% - 24px) !important;
    margin:0 12px 12px !important;
    padding:24px 22px !important;
    text-align:center !important;
  }
  .cta-copy h2,
  .footer-island .cta-copy h2{
    font-size:27px !important;
  }
  .cta-copy p,
  .footer-island .cta-copy p{
    max-width:none !important;
  }
  .footer.rhb-footer,
  .footer-island .footer{
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:28px 22px 18px !important;
  }
  .footer-brand p,
  .footer-island .footer-brand p{
    max-width:none !important;
  }
  .back-to-top,
  .footer-island .back-to-top{
    position:static !important;
    margin-top:8px !important;
  }
}

/* =====================================================
   FIX 65 - Precise CTA/Footer correction from fixed62 baseline
   Scope locked: .footer-island, .cta-panel, .cta-copy, .footer only
===================================================== */

/* CTA: move copy to right, remove the card behind it, keep image raw */
.footer-island .cta-panel,
.cta-panel{
  height:190px !important;
  min-height:190px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  direction:rtl !important;
  background-image:url('../img/footer-island-image.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.footer-island .cta-copy,
.cta-copy{
  width:48% !important;
  max-width:560px !important;
  margin:0 42px 0 auto !important;
  padding:0 !important;
  text-align:right !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.footer-island .cta-copy h2,
.cta-copy h2{
  margin:0 0 8px !important;
  font-size:31px !important;
  line-height:1.35 !important;
  max-width:430px !important;
}

.footer-island .cta-copy p,
.cta-copy p{
  margin:0 0 16px !important;
  max-width:520px !important;
  font-size:13px !important;
  line-height:1.9 !important;
}

.footer-island .cta-copy .btn,
.cta-copy .btn{
  margin:0 !important;
  min-width:210px !important;
  height:44px !important;
}

/* Footer: four columns only, with reference-style dividers */
.footer-island .footer.rhb-footer,
.footer-island footer.footer,
.footer.rhb-footer,
footer.footer{
  display:grid !important;
  grid-template-columns:1.55fr 1fr 1fr 1.45fr !important;
  grid-template-areas:
    "brand links services contact"
    "copyright copyright copyright copyright" !important;
  gap:0 !important;
  padding:30px 42px 18px !important;
  min-height:0 !important;
}

.footer-island .footer-brand{grid-area:brand !important;}
.footer-island .footer-links{grid-area:links !important;}
.footer-island .footer-services{grid-area:services !important;}
.footer-island .footer-contact{grid-area:contact !important;}
.footer-solutions{display:none !important;}

.footer-island .footer-col,
.footer-col{
  min-height:150px !important;
  padding:0 30px !important;
  position:relative !important;
}

.footer-island .footer-col:not(.footer-contact)::after,
.footer-col:not(.footer-contact)::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:6px !important;
  bottom:8px !important;
  left:0 !important;
  width:1px !important;
  background:linear-gradient(180deg,rgba(111,61,255,0),rgba(111,61,255,.18),rgba(111,61,255,0)) !important;
}

/* Footer logo must visually match Header logo: icon + exact text stack */
.footer-brand img{display:initial !important;}
.footer-island .footer-brand .footer-logo,
.footer-brand .footer-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  width:max-content !important;
  max-width:260px !important;
  margin:0 0 18px !important;
  color:#07112d !important;
  text-align:right !important;
  text-decoration:none !important;
  transform:none !important;
}

.footer-island .footer-brand .footer-logo .brand-icon,
.footer-brand .footer-logo .brand-icon{
  width:54px !important;
  height:54px !important;
  min-width:54px !important;
  margin:0 !important;
  object-fit:contain !important;
  display:block !important;
}

.footer-island .footer-brand .footer-logo .brand-copy,
.footer-brand .footer-logo .brand-copy{
  display:flex !important;
  flex-direction:column !important;
  line-height:1.05 !important;
  color:#07112d !important;
  white-space:nowrap !important;
}

.footer-island .footer-brand .footer-logo .brand-copy strong,
.footer-brand .footer-logo .brand-copy strong{
  font-size:18px !important;
  font-weight:950 !important;
  color:#07112d !important;
  letter-spacing:-.4px !important;
}

.footer-island .footer-brand .footer-logo .brand-copy small,
.footer-brand .footer-logo .brand-copy small{
  margin-top:5px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.8px !important;
  color:#07112d !important;
}

.footer-island .footer-brand p,
.footer-brand p{
  max-width:310px !important;
  margin:0 0 18px !important;
}

/* Social icons: minimal like reference, not purple glass buttons */
.footer-island .footer-social,
.footer-social{
  display:flex !important;
  gap:22px !important;
  margin-top:14px !important;
  align-items:center !important;
}

.footer-island .footer-social a,
.footer-social a{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#1f2430 !important;
  font-size:23px !important;
  font-weight:800 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.footer-island .footer-social svg,
.footer-social svg{
  width:22px !important;
  height:22px !important;
  stroke:currentColor !important;
  fill:none !important;
  stroke-width:1.9 !important;
}

.footer-island .footer-social a:hover,
.footer-social a:hover{
  color:#6f3dff !important;
  transform:translateY(-2px) !important;
  background:transparent !important;
}

/* Contact data + icons */
.footer-contact .contact-item{
  position:relative !important;
  padding-right:28px !important;
  margin:12px 0 !important;
  line-height:1.9 !important;
}

.footer-contact .contact-item::before{
  position:absolute !important;
  right:0 !important;
  top:.08em !important;
  color:#7c3cff !important;
  font-size:18px !important;
  line-height:1 !important;
}
.footer-contact .contact-phone::before{content:"☎" !important;}
.footer-contact .contact-mail::before{content:"✉" !important;}
.footer-contact .contact-address::before{content:"⌖" !important;}

/* Back to top: force visible arrow */
.footer-island .back-to-top,
.back-to-top{
  font-size:0 !important;
  color:#fff !important;
}
.footer-island .back-to-top::before,
.back-to-top::before{
  content:"↑" !important;
  font-size:24px !important;
  font-weight:900 !important;
  line-height:1 !important;
  color:#fff !important;
}

@media(max-width:1100px){
  .footer-island .footer.rhb-footer,
  .footer-island footer.footer,
  .footer.rhb-footer,
  footer.footer{
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "brand links"
      "services contact"
      "copyright copyright" !important;
  }
  .footer-island .cta-copy,
  .cta-copy{width:56% !important;margin-right:28px !important;}
}

@media(max-width:720px){
  .footer-island .cta-panel,
  .cta-panel{
    height:360px !important;
    min-height:360px !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }
  .footer-island .cta-copy,
  .cta-copy{
    width:calc(100% - 32px) !important;
    margin:0 16px 24px !important;
    text-align:center !important;
  }
  .footer-island .footer.rhb-footer,
  .footer-island footer.footer,
  .footer.rhb-footer,
  footer.footer{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "brand"
      "links"
      "services"
      "contact"
      "copyright" !important;
  }
  .footer-island .footer-col::after,
  .footer-col::after{display:none !important;}
}


/* =====================================================
   FIX 66 - Fine CTA/Footer corrections only
   Scope: CTA + Footer only
===================================================== */

/* 1) Remove contact-column icons completely */
.footer-island .footer-contact .contact-item,
.footer-contact .contact-item{
  padding-right:0 !important;
  margin:10px 0 !important;
}
.footer-island .footer-contact .contact-item::before,
.footer-contact .contact-item::before,
.footer-island .footer-contact .contact-phone::before,
.footer-contact .contact-phone::before,
.footer-island .footer-contact .contact-mail::before,
.footer-contact .contact-mail::before,
.footer-island .footer-contact .contact-address::before,
.footer-contact .contact-address::before{
  content:none !important;
  display:none !important;
}

/* 2) Give the CTA a little more height without touching other sections */
.footer-island .cta-panel,
.cta-panel{
  height:220px !important;
  min-height:220px !important;
}

/* 3) Make CTA button use the same visual language as the header CTA */
.footer-island .cta-copy .cta-header-btn,
.cta-copy .cta-header-btn{
  height:50px !important;
  min-height:50px !important;
  min-width:0 !important;
  padding:0 22px !important;
  border-radius:14px !important;
  gap:10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  color:#fff !important;
  background:linear-gradient(90deg,#2F4CA8 0%,#6A4DA8 55%,#C25AA5 100%) !important;
  box-shadow:0 14px 35px rgba(111,61,255,.28) !important;
}
.footer-island .cta-copy .cta-header-btn i,
.cta-copy .cta-header-btn i{
  width:18px !important;
  height:18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}
.footer-island .cta-copy .cta-header-btn svg,
.cta-copy .cta-header-btn svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:4.5 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.footer-island .cta-copy .cta-header-btn:hover,
.cta-copy .cta-header-btn:hover{
  transform:translateY(-3px) !important;
}

@media(max-width:1100px){
  .footer-island .cta-panel,
  .cta-panel{
    height:auto !important;
    min-height:220px !important;
  }
}


/* FIX67 CTA gradient */
.cta-copy .btn,
.cta-panel .btn,
.cta-copy .btn-primary{
background: linear-gradient(90deg,#6675FF 0%,#7B61FF 45%,#D96BDB 100%) !important;
box-shadow:none !important;
border:none !important;
}


/* =====================================================
   FIX 71 - Strong glass back-to-top button override
   Scope: Footer back-to-top only
   Reason: previous rule was overridden by the purple gradient rule
===================================================== */
.footer-island .back-to-top,
.footer-island a.back-to-top,
.back-to-top{
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.48) 0%,
      rgba(255,255,255,.22) 48%,
      rgba(255,255,255,.12) 100%) !important;
  background-color:rgba(255,255,255,.24) !important;
  background-image:
    linear-gradient(135deg,
      rgba(255,255,255,.52) 0%,
      rgba(255,255,255,.24) 48%,
      rgba(255,255,255,.12) 100%) !important;
  border:1px solid rgba(255,255,255,.62) !important;
  box-shadow:
    0 14px 38px rgba(88,66,185,.18),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter:blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(165%) !important;
  color:#6f3dff !important;
  overflow:hidden !important;
}

.footer-island .back-to-top::before,
.footer-island a.back-to-top::before,
.back-to-top::before{
  color:#6f3dff !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
}

.footer-island .back-to-top::after,
.footer-island a.back-to-top::after,
.back-to-top::after{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:inherit !important;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.58) 0%,
      rgba(255,255,255,.18) 34%,
      rgba(255,255,255,0) 68%) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

.footer-island .back-to-top:hover,
.footer-island a.back-to-top:hover,
.back-to-top:hover{
  background-image:
    linear-gradient(135deg,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.30) 48%,
      rgba(255,255,255,.16) 100%) !important;
  box-shadow:
    0 18px 46px rgba(88,66,185,.24),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(255,255,255,.22) !important;
  transform:translateY(-2px) !important;
}

/* =====================================================
   FIX PASS 73 - Real after-hero background opacity
   Previous change targeted .site-bg, but the visible after-hero
   background is actually .page::before. Keep the layer, reduce it.
===================================================== */
.page::before{
  opacity:.50 !important;
}

/* =====================================================
   FIX75 - Process/Stats reference pass
   هدف: آیکون‌های تایم‌لاین به SVG Outline نزدیک به رفرنس تبدیل شوند
   اعداد Stats دست‌نخورده‌اند.
===================================================== */
.process-section{
  grid-template-columns:minmax(0,1fr) 370px !important;
  gap:38px !important;
  padding:32px 58px 38px !important;
  align-items:start !important;
}

.process-copy,
.process-intro{
  grid-column:2 !important;
  max-width:370px !important;
  padding-top:8px !important;
}

.process-copy .eyebrow,
.process-intro .eyebrow{
  font-size:13px !important;
  font-weight:900 !important;
  color:#6f3dff !important;
  margin-bottom:8px !important;
}

.process-copy h2,
.process-intro h2{
  font-size:42px !important;
  line-height:1.28 !important;
  letter-spacing:-.6px !important;
  margin:10px 0 14px !important;
}

.process-copy p,
.process-intro p{
  font-size:13.5px !important;
  line-height:2.05 !important;
  color:#667085 !important;
  max-width:345px !important;
}

.steps-line,
.process-timeline{
  grid-column:1 !important;
  gap:16px !important;
  align-items:start !important;
}

.steps-line::before,
.process-timeline::before{
  top:52px !important;
  right:8% !important;
  left:8% !important;
  height:4px !important;
  background:linear-gradient(90deg,#7559ff 0%,#c15cff 36%,#4aa9ff 70%,#8b5cf6 100%) !important;
  box-shadow:0 0 18px rgba(111,61,255,.28),0 0 34px rgba(74,169,255,.12) !important;
}

.steps-line::after,
.process-timeline::after{
  top:47px !important;
  right:8% !important;
  left:8% !important;
  height:14px !important;
  opacity:.95 !important;
}

.step div,
.process-icon,
.process-svg-icon{
  width:104px !important;
  height:104px !important;
  min-width:104px !important;
  min-height:104px !important;
  border-radius:999px !important;
  margin:0 auto 14px !important;
  display:grid !important;
  place-items:center !important;
  font-size:0 !important;
  color:#7c3aed !important;
  background:
    radial-gradient(circle at 34% 22%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.72) 38%,rgba(255,255,255,.34) 100%) !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -20px 38px rgba(124,58,237,.07),
    0 16px 42px rgba(60,70,180,.10),
    0 0 0 8px rgba(255,255,255,.24) !important;
  backdrop-filter:blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(160%) !important;
}

.step div::before,
.process-icon::before,
.process-svg-icon::before{
  content:none !important;
  display:none !important;
}

.process-svg-icon svg,
.step div svg,
.process-icon svg{
  width:42px !important;
  height:42px !important;
  display:block !important;
  overflow:visible !important;
}

.process-svg-icon svg *,
.step div svg *,
.process-icon svg *{
  fill:none !important;
  stroke:#7c3aed !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
  filter:drop-shadow(0 0 7px rgba(124,58,237,.18)) !important;
}

.step b,
.process-number{
  color:#6f3dff !important;
  font-size:14px !important;
  font-weight:900 !important;
  margin-bottom:8px !important;
}

.step h3,
.process-step h3{
  font-size:14.5px !important;
  font-weight:900 !important;
  color:#07132f !important;
  margin:0 0 7px !important;
}

.step p,
.process-step p{
  font-size:11.5px !important;
  line-height:1.82 !important;
  color:#667085 !important;
  max-width:136px !important;
}

.stats-panel{
  min-height:142px !important;
  border-radius:28px !important;
  padding:30px 42px !important;
  background:
    radial-gradient(circle at 50% 110%,rgba(111,61,255,.50),transparent 42%),
    radial-gradient(circle at 82% 0%,rgba(232,83,218,.40),transparent 30%),
    linear-gradient(135deg,#050b27 0%,#09185d 54%,#33126e 100%) !important;
  box-shadow:0 28px 78px rgba(15,18,70,.30) !important;
}

.stats-panel .stat,
.stat{
  border-left:1px solid rgba(255,255,255,.22) !important;
  gap:13px !important;
}

.stats-panel .stat i,
.stat i{
  font-size:38px !important;
  color:#d9b0ff !important;
  text-shadow:0 0 22px rgba(192,132,252,.58) !important;
}

@media(max-width:980px){
  .process-section{grid-template-columns:1fr !important;padding:26px 22px 32px !important;}
  .process-copy,.process-intro,.steps-line,.process-timeline{grid-column:auto !important;max-width:100% !important;}
  .steps-line::before,.process-timeline::before,.steps-line::after,.process-timeline::after{display:none !important;}
}


/* fixed80: rebuild Services neural orb as a fixed network sphere, not drifting molecules */
.services-section{
  overflow:visible!important;
  isolation:isolate!important;
}
.services-section .molecule-bg{
  display:none!important;
}
.neural-orb{
  position:absolute!important;
  left:calc((100vw - 100%) / -2 - 44px)!important;
  top:-16px!important;
  width:560px!important;
  height:560px!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:.96!important;
  filter:saturate(1.08)!important;
}
.neural-orb::before{
  content:"";
  position:absolute;
  inset:-80px -50px -70px -80px;
  background:
    radial-gradient(circle at 32% 34%,rgba(255,255,255,.50),transparent 9%),
    radial-gradient(circle at 43% 48%,rgba(139,92,246,.30),transparent 30%),
    radial-gradient(circle at 42% 50%,rgba(76,154,255,.18),transparent 42%),
    radial-gradient(circle at 10% 50%,rgba(168,85,247,.16),transparent 40%);
  filter:blur(18px);
  opacity:.92;
  z-index:-1;
}
.neural-orb-svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.orb-aura{
  fill:url(#orbSoftCore);
  opacity:.72;
}
.orb-core-haze{
  fill:url(#orbSoftCore);
  opacity:.42;
}
.orb-lines line{
  stroke:url(#orbLineGrad);
  stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.28));
}
.orb-node{
  filter:drop-shadow(0 0 6px rgba(139,92,246,.55));
}
.orb-node.major{
  filter:drop-shadow(0 0 10px rgba(255,255,255,.75)) drop-shadow(0 0 18px rgba(139,92,246,.52));
}
.orb-starbursts circle{
  fill:#fff;
  opacity:.78;
}
.orb-dust{
  fill:#fff;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.55));
  animation:orbDustPulse 7s ease-in-out infinite;
}
.orb-orbits{
  transform-box:fill-box;
  transform-origin:center;
  opacity:.58;
  filter:drop-shadow(0 0 7px rgba(139,92,246,.42));
}
.orb-orbits ellipse{
  fill:none;
  stroke:url(#orbRingGrad);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:330 95 72 180;
}
.orbit-a{
  transform:rotate(-24deg);
  animation:orbRingA 42s linear infinite;
}
.orbit-b{
  transform:rotate(61deg);
  opacity:.44;
  animation:orbRingB 64s linear infinite reverse;
}
.orbit-b ellipse{
  stroke-width:1.15;
  stroke-dasharray:190 115 80 170;
}
.orb-pulse{
  stroke:#fff;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-dasharray:1 220;
  stroke-dashoffset:220;
  opacity:.0;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.9)) drop-shadow(0 0 13px rgba(139,92,246,.70));
  animation:orbPulse 7.8s linear infinite;
}
.orb-pulse.p2{animation-delay:-1.1s}.orb-pulse.p3{animation-delay:-2.2s}.orb-pulse.p4{animation-delay:-3.3s}.orb-pulse.p5{animation-delay:-4.4s}.orb-pulse.p6{animation-delay:-5.5s}
.services-grid,.services-copy{position:relative!important;z-index:2!important;}
@keyframes orbPulse{
  0%{stroke-dashoffset:220;opacity:0}
  10%{opacity:.95}
  46%{opacity:.85}
  62%{stroke-dashoffset:0;opacity:0}
  100%{stroke-dashoffset:0;opacity:0}
}
@keyframes orbRingA{
  from{transform:rotate(-24deg)}
  to{transform:rotate(336deg)}
}
@keyframes orbRingB{
  from{transform:rotate(61deg)}
  to{transform:rotate(421deg)}
}
@keyframes orbDustPulse{
  0%,100%{opacity:.20;transform:scale(.92)}
  50%{opacity:.62;transform:scale(1.2)}
}
@media(max-width:1100px){
  .neural-orb{left:-170px!important;top:18px!important;width:430px!important;height:430px!important;opacity:.55!important;}
}
@media(max-width:720px){
  .neural-orb{display:none!important;}
}


/* fixed81: orb color/scale correction - nodes unified, white fine connections, electron-like pulses */
.neural-orb{
  width:448px!important;
  height:448px!important;
  left:calc((100vw - 100%) / -2 - 34px)!important;
  top:34px!important;
  opacity:.94!important;
  filter:saturate(.96) brightness(1.03)!important;
}
.neural-orb::before{
  inset:-72px -48px -66px -72px!important;
  background:
    radial-gradient(circle at 32% 34%,rgba(255,255,255,.38),transparent 8%),
    radial-gradient(circle at 46% 48%,rgba(124,92,255,.22),transparent 31%),
    radial-gradient(circle at 46% 50%,rgba(176,160,255,.14),transparent 46%)!important;
  filter:blur(20px)!important;
  opacity:.78!important;
}
.orb-lines line{
  stroke:rgba(255,255,255,.78)!important;
  stroke-width:.95!important;
  opacity:.42!important;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.30))!important;
}
.orb-node,
.orb-node.major{
  fill:#7657f4!important;
  opacity:.88!important;
  filter:drop-shadow(0 0 5px rgba(118,87,244,.58)) drop-shadow(0 0 10px rgba(255,255,255,.28))!important;
}
.orb-node.major{
  opacity:.92!important;
  filter:drop-shadow(0 0 8px rgba(118,87,244,.72)) drop-shadow(0 0 15px rgba(255,255,255,.38))!important;
}
.orb-pulse{
  stroke:#fff7ff!important;
  stroke-width:6.2!important;
  stroke-linecap:round!important;
  stroke-dasharray:.01 230!important;
  stroke-dashoffset:230;
  opacity:0;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 0 13px rgba(150,105,255,.72))!important;
  animation:orbElectronPulse 7.8s linear infinite!important;
}
.orb-pulse.p2{animation-delay:-1.1s!important}.orb-pulse.p3{animation-delay:-2.2s!important}.orb-pulse.p4{animation-delay:-3.3s!important}.orb-pulse.p5{animation-delay:-4.4s!important}.orb-pulse.p6{animation-delay:-5.5s!important}
.orb-orbits ellipse{
  stroke:rgba(255,255,255,.72)!important;
  stroke-width:1.25!important;
  filter:drop-shadow(0 0 8px rgba(139,92,246,.55))!important;
}
.orbit-b ellipse{stroke-width:1px!important;opacity:.76!important;}
@keyframes orbElectronPulse{
  0%{stroke-dashoffset:230;opacity:0}
  8%{opacity:0}
  15%{opacity:1}
  48%{opacity:.92}
  62%{stroke-dashoffset:0;opacity:0}
  100%{stroke-dashoffset:0;opacity:0}
}
@media(max-width:1100px){
  .neural-orb{left:-130px!important;top:32px!important;width:344px!important;height:344px!important;opacity:.56!important;}
}


/* fixed82: orb density, variable connections, stronger halo */
.neural-orb::before{
  inset:-92px -64px -84px -92px!important;
  background:
    radial-gradient(circle at 35% 36%,rgba(255,255,255,.48),transparent 8%),
    radial-gradient(circle at 45% 50%,rgba(139,92,246,.34),transparent 34%),
    radial-gradient(circle at 46% 52%,rgba(92,168,255,.22),transparent 48%),
    radial-gradient(circle at 14% 52%,rgba(168,85,247,.22),transparent 45%)!important;
  filter:blur(18px)!important;
  opacity:.98!important;
}
.orb-aura{
  opacity:.92!important;
  filter:drop-shadow(0 0 24px rgba(139,92,246,.34)) drop-shadow(0 0 42px rgba(92,168,255,.18))!important;
}
.orb-core-haze{
  opacity:.56!important;
}
.orb-lines line{
  stroke:rgba(255,255,255,.82)!important;
  stroke-width:1.15!important;
  opacity:.48!important;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.34))!important;
}
.orb-lines line.medium{
  stroke-width:1.55!important;
  opacity:.55!important;
}
.orb-lines line.bold{
  stroke-width:2px!important;
  opacity:.62!important;
}
.orb-lines line.thin{
  stroke-width:1px!important;
  opacity:.42!important;
}
.orb-node,
.orb-node.major{
  fill:#8f7cff!important;
  filter:drop-shadow(0 0 6px rgba(143,124,255,.70)) drop-shadow(0 0 12px rgba(255,255,255,.24))!important;
}
.orb-pulse{
  stroke:#fff!important;
  stroke-width:7.4!important;
  stroke-linecap:round!important;
  stroke-dasharray:.01 230!important;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.98)) drop-shadow(0 0 18px rgba(150,105,255,.86))!important;
}


/* fixed83: glossy spherical nodes, fewer nodes, heavier/depth-aware network lines */
.orb-node,
.orb-node.major{
  fill:url(#orbNodeSphereGloss)!important;
  opacity:.90!important;
  filter:
    drop-shadow(-1px -1px 1px rgba(255,255,255,.95))
    drop-shadow(0 0 7px rgba(143,124,255,.68))
    drop-shadow(0 0 14px rgba(255,255,255,.28))!important;
}
.orb-node.major{
  opacity:.95!important;
  filter:
    drop-shadow(-1px -1px 1.4px rgba(255,255,255,1))
    drop-shadow(0 0 10px rgba(143,124,255,.82))
    drop-shadow(0 0 18px rgba(255,255,255,.36))!important;
}
/* 10٪ کاهش بصری نودها، بدون کوچک کردن گستردگی Orb */
.orb-nodes circle:nth-child(10n){
  opacity:0!important;
  visibility:hidden!important;
}
/* Depth: نودهای عقب کم‌رنگ‌تر و نودهای جلو براق‌تر */
.orb-nodes circle:nth-child(7n+2),
.orb-nodes circle:nth-child(8n+4){
  fill:url(#orbNodeSphereBack)!important;
  opacity:.38!important;
  filter:drop-shadow(0 0 4px rgba(143,124,255,.32))!important;
}
.orb-nodes circle:nth-child(5n+1){
  opacity:.64!important;
}
.orb-nodes circle:nth-child(6n+3){
  opacity:.78!important;
}
.orb-nodes circle.major:nth-child(3n+1){
  opacity:.98!important;
}
/* قطر اتصالات تقریباً دو برابر نسخه قبل، با تنوع ضخامت برای عمق */
.orb-lines line{
  stroke:rgba(255,255,255,.88)!important;
  stroke-width:2.3!important;
  opacity:.52!important;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.42))!important;
}
.orb-lines line.thin{
  stroke-width:2px!important;
  opacity:.44!important;
}
.orb-lines line.medium{
  stroke-width:3.1px!important;
  opacity:.58!important;
}
.orb-lines line.bold{
  stroke-width:4px!important;
  opacity:.68!important;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.52))!important;
}
/* هاله کلی واضح‌تر اما همچنان نرم */
.neural-orb::before{
  opacity:1!important;
  filter:blur(16px)!important;
}
.orb-aura{
  opacity:1!important;
  filter:drop-shadow(0 0 30px rgba(139,92,246,.42)) drop-shadow(0 0 58px rgba(92,168,255,.24))!important;
}


/* fixed84: purple glossy nodes + luminous orb pulses */
.orb-node,
.orb-node.major{
  fill:url(#orbNodeSphereGloss)!important;
  opacity:.92!important;
  filter:
    drop-shadow(-1px -1px 1.6px rgba(255,255,255,.95))
    drop-shadow(0 0 8px rgba(168,85,247,.78))
    drop-shadow(0 0 16px rgba(139,92,246,.42))!important;
}
.orb-node.major{
  opacity:.98!important;
  filter:
    drop-shadow(-1.2px -1.2px 2px rgba(255,255,255,1))
    drop-shadow(0 0 12px rgba(168,85,247,.90))
    drop-shadow(0 0 24px rgba(139,92,246,.50))!important;
}
/* عمق داخلی: چند نود عقب‌تر بنفش کم‌نورتر می‌شوند */
.orb-nodes circle:nth-child(7n+2),
.orb-nodes circle:nth-child(8n+4){
  fill:url(#orbNodeSphereBack)!important;
  opacity:.34!important;
  filter:drop-shadow(0 0 5px rgba(168,85,247,.28))!important;
}
.orb-nodes circle:nth-child(5n+1){opacity:.68!important;}
.orb-nodes circle:nth-child(6n+3){opacity:.82!important;}
.orb-nodes circle.major:nth-child(3n+1){opacity:1!important;}
/* پالس‌ها مثل گوی نورانی: مرکز سفید، هاله سفید/بنفش، نه خط ساده */
.orb-pulse{
  stroke:#fffaff!important;
  stroke-width:12px!important;
  stroke-linecap:round!important;
  stroke-dasharray:.001 245!important;
  stroke-dashoffset:245;
  opacity:0;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,1))
    drop-shadow(0 0 12px rgba(255,255,255,.95))
    drop-shadow(0 0 24px rgba(168,85,247,.78))
    drop-shadow(0 0 36px rgba(139,92,246,.46))!important;
  animation:orbLightSpherePulse 8.2s linear infinite!important;
}
.orb-pulse.p2{animation-delay:-1.15s!important}
.orb-pulse.p3{animation-delay:-2.35s!important}
.orb-pulse.p4{animation-delay:-3.55s!important}
.orb-pulse.p5{animation-delay:-4.75s!important}
.orb-pulse.p6{animation-delay:-5.95s!important}
@keyframes orbLightSpherePulse{
  0%{stroke-dashoffset:245;opacity:0;stroke-width:9px;}
  10%{opacity:0;}
  18%{opacity:1;stroke-width:13px;}
  46%{opacity:.96;stroke-width:12px;}
  60%{stroke-dashoffset:0;opacity:0;stroke-width:8px;}
  100%{stroke-dashoffset:0;opacity:0;stroke-width:8px;}
}


/* fixed85: reference-matched purple nodes, brighter energy projectiles, wider mesh, denser connections */
.orb-lines,
.orb-pulses,
.orb-nodes,
.orb-starbursts,
.orb-orbits{
  transform-box:fill-box;
  transform-origin:310px 310px;
}
.orb-node,
.orb-node.major{
  fill:url(#orbNodeSphereGloss)!important;
  opacity:.94!important;
  filter:
    drop-shadow(-1.2px -1.2px 1.8px rgba(255,255,255,.98))
    drop-shadow(0 0 7px rgba(192,132,252,.88))
    drop-shadow(0 0 18px rgba(109,40,217,.48))!important;
}
.orb-node.major{
  opacity:1!important;
  filter:
    drop-shadow(-1.5px -1.5px 2.2px rgba(255,255,255,1))
    drop-shadow(0 0 10px rgba(216,180,254,.96))
    drop-shadow(0 0 24px rgba(124,58,237,.56))!important;
}
.orb-nodes circle:nth-child(7n+2),
.orb-nodes circle:nth-child(8n+4){
  fill:url(#orbNodeSphereBack)!important;
  opacity:.46!important;
  filter:drop-shadow(0 0 6px rgba(139,92,246,.38))!important;
}
.orb-nodes circle:nth-child(5n+1){opacity:.74!important;}
.orb-nodes circle:nth-child(6n+3){opacity:.86!important;}
.orb-nodes circle.major:nth-child(3n+1){opacity:1!important;}
.orb-lines line{
  stroke:#fffafc!important;
  stroke-linecap:round!important;
  opacity:.46!important;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.55)) drop-shadow(0 0 8px rgba(167,139,250,.22))!important;
}
.orb-lines line.thin{stroke-width:2.05px!important;opacity:.34!important;}
.orb-lines line.medium{stroke-width:2.55px!important;opacity:.42!important;}
.orb-lines line.bold{stroke-width:3.15px!important;opacity:.52!important;}
.orb-pulse{
  stroke:url(#orbPulseGrad)!important;
  stroke-width:16px!important;
  stroke-linecap:round!important;
  stroke-dasharray:24 245!important;
  stroke-dashoffset:245;
  opacity:0;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,1))
    drop-shadow(0 0 16px rgba(255,255,255,.95))
    drop-shadow(0 0 30px rgba(216,180,254,.80))
    drop-shadow(0 0 46px rgba(168,85,247,.52))!important;
  animation:orbProjectilePulse 7.4s linear infinite!important;
}
.orb-pulse.p1{animation-delay:-.25s!important}.orb-pulse.p2{animation-delay:-.95s!important}.orb-pulse.p3{animation-delay:-1.65s!important}.orb-pulse.p4{animation-delay:-2.35s!important}.orb-pulse.p5{animation-delay:-3.05s!important}.orb-pulse.p6{animation-delay:-3.75s!important}.orb-pulse.p7{animation-delay:-4.45s!important}.orb-pulse.p8{animation-delay:-5.15s!important}.orb-pulse.p9{animation-delay:-5.85s!important}.orb-pulse.p10{animation-delay:-6.55s!important}
@keyframes orbProjectilePulse{
  0%{stroke-dashoffset:245;opacity:0;stroke-width:11px;}
  8%{opacity:0;}
  16%{opacity:1;stroke-width:17px;}
  43%{opacity:.98;stroke-width:16px;}
  58%{stroke-dashoffset:0;opacity:0;stroke-width:10px;}
  100%{stroke-dashoffset:0;opacity:0;stroke-width:10px;}
}
.orb-aura{opacity:.48!important;filter:drop-shadow(0 0 28px rgba(168,85,247,.30))!important;}
.orb-core-haze{opacity:.34!important;}


/* fixed86: true spread, right shift, doubled fine connections */
.neural-orb{
  left:calc((100vw - 100%) / -2 + 16px)!important; /* +50px نسبت به fixed85 */
}
.orb-lines line.extra{
  stroke:#fffafc!important;
  stroke-width:1.8px!important;
  opacity:.30!important;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.40))!important;
}
.orb-lines line.thin{
  stroke-width:2.35px!important;
  opacity:.38!important;
}
.orb-lines line.medium{
  stroke-width:2.85px!important;
  opacity:.46!important;
}
.orb-lines line.bold{
  stroke-width:3.35px!important;
  opacity:.56!important;
}
.orb-orbits ellipse{
  opacity:.82!important;
}


/* FIX 88 - Official X logo replacement for Hero + Footer
   Keeps social layout intact, fixes SVG fill/stroke conflict. */
.social-side .social-link svg.x-official,
.footer-social svg.x-official,
.footer-island .footer-social svg.x-official{
  display:block !important;
  width:19px !important;
  height:19px !important;
  fill:currentColor !important;
  stroke:none !important;
  stroke-width:0 !important;
  overflow:visible !important;
}

.footer-social svg.x-official,
.footer-island .footer-social svg.x-official{
  width:21px !important;
  height:21px !important;
}

.social-side .social-link svg.x-official path,
.footer-social svg.x-official path,
.footer-island .footer-social svg.x-official path{
  fill:currentColor !important;
  stroke:none !important;
  stroke-width:0 !important;
}

.social-side a[aria-label="X"],
.footer-social a[aria-label="X"],
.footer-island .footer-social a[aria-label="X"]{
  font-family:Arial, sans-serif !important;
  color:inherit !important;
}


/* FIX 89 - scroll down interaction smoothing */
.scroll-down,
.scroll-down-btn,
.hero-scroll,
.scroll-indicator,
.mouse-scroll,
.hero__scroll,
.down-scroll,
[data-scroll-down],
[data-scroll="down"]{
  cursor: pointer;
}

/* fixed98: force RHB logo palette on header nav hover and header CTA only */
.header .nav a:hover,
.nav a:hover{
  color:#253F91 !important;
}
.header .nav a:hover::after,
.nav a:hover::after{
  background:linear-gradient(90deg,#253F91 0%,#654AA4 55%,#C456A3 100%) !important;
}
.header .header-btn,
.header-btn{
  background:linear-gradient(90deg,#253F91 0%,#654AA4 55%,#C456A3 100%) !important;
  border-color:rgba(255,255,255,.58) !important;
  box-shadow:0 12px 28px rgba(37,63,145,.22), inset 0 1px 0 rgba(255,255,255,.26) !important;
}
.header .header-btn:hover,
.header-btn:hover{
  background:linear-gradient(90deg,#1F357F 0%,#5C439A 55%,#B94D99 100%) !important;
  box-shadow:0 14px 30px rgba(37,63,145,.26), inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* fixed99: make Hero primary CTA visually match Header CTA. Scope: Hero CTA appearance only. */
.hero-actions .btn-primary{
  color:#fff !important;
  background:linear-gradient(90deg,#253F91 0%,#654AA4 55%,#C456A3 100%) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  box-shadow:0 12px 28px rgba(37,63,145,.22), inset 0 1px 0 rgba(255,255,255,.26) !important;
  backdrop-filter:blur(16px) saturate(125%) !important;
  border-radius:14px !important;
  font-weight:700 !important;
}
.hero-actions .btn-primary:hover{
  background:linear-gradient(90deg,#1F357F 0%,#5C439A 55%,#B94D99 100%) !important;
  box-shadow:0 14px 30px rgba(37,63,145,.26), inset 0 1px 0 rgba(255,255,255,.30) !important;
}


/* fixed105: Services corrections only. Network/mesh behind cards is intentionally untouched. */
#services .services-copy{
  transform:translateX(50px) !important;
}
#services .services-copy .eyebrow,
#services .services-copy h2{
  color:#253F91 !important;
}
#services .services-copy .eyebrow span{
  background:linear-gradient(135deg,#253F91 0%,#3E57A7 58%,#654AA4 100%) !important;
  box-shadow:0 0 18px rgba(37,63,145,.34) !important;
}
#services .services-grid{
  gap:26px !important;
}
#services .service-card{
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.16)) !important;
  border-color:rgba(255,255,255,.70) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82), inset 0 -18px 34px rgba(255,255,255,.08), 0 14px 40px rgba(37,63,145,.045) !important;
  backdrop-filter:blur(24px) saturate(128%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(128%) !important;
}
#services .service-card:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,.25)) !important;
}
#services .service-card i{
  width:60px !important;
  height:60px !important;
  color:#253F91 !important;
  background:rgba(37,63,145,.055) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 12px 26px rgba(37,63,145,.07) !important;
}
#services .service-card i svg{
  width:42px !important;
  height:42px !important;
  stroke:#253F91 !important;
  stroke-width:3.6 !important;
  filter:drop-shadow(0 0 2px rgba(37,63,145,.12)) !important;
}
@media(max-width:980px){
  #services .services-copy{transform:none !important;}
}

/* =====================================================
   FIX PASS 38 - Services targeted corrections
   Scope: Services only
   - move cards + existing mesh 50px right
   - keep services title color unchanged
   - darken only the texts below it
   - make cards visibly more transparent/glassy
   - keep mesh visual styling untouched
===================================================== */
#services .services-grid{
  transform:translateX(50px) !important;
}
#services .services-copy h2,
#services .services-copy p{
  color:var(--ink) !important;
}
#services .service-card{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.58), rgba(255,255,255,.30) 38%, rgba(255,255,255,.12) 72%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(246,243,255,.14)) !important;
  border-color:rgba(255,255,255,.58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.40),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -18px 38px rgba(125,92,255,.035),
    0 14px 36px rgba(50,76,145,.045),
    0 0 22px rgba(255,255,255,.12) !important;
  backdrop-filter:blur(30px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(30px) saturate(145%) !important;
}
#services .service-card::before{
  border-color:rgba(255,255,255,.54) !important;
  box-shadow:
    inset 0 0 28px rgba(255,255,255,.22),
    0 0 14px rgba(255,255,255,.12) !important;
}
#services .service-card::after{
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.76), transparent) 50% 0 / 62% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.46), transparent) 50% 100% / 52% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.46), transparent) 0 50% / 1px 68% no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.46), transparent) 100% 50% / 1px 68% no-repeat !important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.35)) !important;
}
#services .service-card i svg{
  stroke:#2F4CA8 !important;
  filter:drop-shadow(0 0 3px rgba(47,76,168,.20)) !important;
}
@media(max-width:980px){
  #services .services-grid{
    transform:none !important;
  }
}

/* =====================================================
   FIX 107 - Services cards glass transparency only
   Scope: #services .service-card normal state only.
   Mesh/network, positions, icons, text and hover behavior are untouched.
===================================================== */
#services .service-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.055)) !important;
  border-color:rgba(255,255,255,.50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -18px 34px rgba(255,255,255,.035),
    0 14px 34px rgba(37,63,145,.035) !important;
  backdrop-filter:blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(120%) !important;
}
#services .service-card::before{
  background:transparent !important;
  border-color:rgba(255,255,255,.42) !important;
  box-shadow:inset 0 0 18px rgba(255,255,255,.12) !important;
}
#services .service-card::after{
  opacity:.55 !important;
}


/* =====================================================
   FIX PASS 109 - Stats bar 3 items only
   Scope: Stats panel layout only
   - Removed "سال تجربه" item from HTML
   - Remaining three stats share the bar evenly
===================================================== */
.stats-panel{
  grid-template-columns:repeat(3,1fr) !important;
}
.stats-panel .stat:last-child{
  border-left:0 !important;
}

/* =====================================================
   FIX 111 - Process step icons navy only
   Scope: icons inside process steps only.
   Timeline line, numbers, cards, titles and text are untouched.
===================================================== */
.process-section .steps-line .step .process-svg-icon,
.process-section .steps-line .step .process-svg-icon::before,
.process-section .steps-line .step .process-svg-icon svg,
.process-section .steps-line .step .process-svg-icon svg *,
.process-section .steps-line .step > div,
.process-section .steps-line .step > div::before{
  color:#2F4CA8 !important;
  stroke:#2F4CA8 !important;
  fill:none !important;
}
.process-section .steps-line .step .process-svg-icon svg,
.process-section .steps-line .step .process-svg-icon path,
.process-section .steps-line .step .process-svg-icon circle,
.process-section .steps-line .step .process-svg-icon rect,
.process-section .steps-line .step .process-svg-icon line,
.process-section .steps-line .step .process-svg-icon polyline{
  stroke:#2F4CA8 !important;
  fill:none !important;
}

/* FIX 112 - Projects: 4th project + three-card autoplay carousel only */
.projects-panel > .project-card[data-project-slide]{
  transition: opacity .42s ease, transform .42s ease !important;
  will-change: opacity, transform !important;
}
.projects-panel > .project-card[data-project-slide].project-slide-hidden{
  display:none !important;
}
.projects-panel > .project-card[data-project-slide].project-slide-fading{
  opacity:.18 !important;
  transform:translateY(8px) scale(.985) !important;
}
.projects-panel > .project-card[data-project-slide].project-slide-visible{
  opacity:1 !important;
  transform:none !important;
}
@media(max-width:1100px){
  .projects-panel > .project-card[data-project-slide].project-slide-hidden{
    display:none !important;
  }
}


/* =====================================================
   FIX 114 - Projects smooth three-card carousel
   Source: fixed112
   Scope: #projects only
   - keep panel/card dimensions stable
   - remove "مشاهده همه پروژه‌ها" CTA from HTML
   - smooth horizontal movement + soft fade on outgoing/incoming cards
===================================================== */
#projects.projects-panel{
  grid-template-columns:285px minmax(0,1fr) !important;
  gap:24px !important;
  align-items:stretch !important;
  overflow:hidden !important;
}

#projects .projects-copy .btn,
#projects .projects-copy a.btn{
  display:none !important;
}

#projects .projects-carousel{
  grid-column:2 / 3 !important;
  min-width:0 !important;
  width:100% !important;
  overflow:hidden !important;
  direction:ltr !important;
  position:relative !important;
  border-radius:22px !important;
}

#projects .projects-carousel::before,
#projects .projects-carousel::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:46px !important;
  z-index:6 !important;
  pointer-events:none !important;
}

#projects .projects-carousel::before{
  left:0 !important;
  background:linear-gradient(90deg,#071025 0%,rgba(7,16,37,0) 100%) !important;
}

#projects .projects-carousel::after{
  right:0 !important;
  background:linear-gradient(270deg,#071025 0%,rgba(7,16,37,0) 100%) !important;
}

#projects .projects-track{
  height:100% !important;
  display:flex !important;
  gap:24px !important;
  align-items:stretch !important;
  will-change:transform !important;
  transform:translateX(0) !important;
}

#projects .projects-track.is-sliding{
  transition:transform 1250ms cubic-bezier(.22,.72,.18,1) !important;
}

#projects .projects-track .project-card{
  flex:0 0 calc((100% - 48px) / 3) !important;
  width:calc((100% - 48px) / 3) !important;
  max-width:calc((100% - 48px) / 3) !important;
  display:flex !important;
  opacity:1 !important;
  transform:none !important;
  direction:rtl !important;
}

#projects .projects-track .project-card.project-slide-hidden,
#projects .projects-track .project-card.project-slide-visible,
#projects .projects-track .project-card.project-slide-fading{
  display:flex !important;
}

#projects .projects-track .project-card.project-slide-out{
  opacity:.18 !important;
  transform:translateX(-10px) scale(.985) !important;
  transition:opacity 1250ms ease, transform 1250ms cubic-bezier(.22,.72,.18,1) !important;
}

#projects .projects-track .project-card.project-slide-in{
  opacity:.20 !important;
  transform:translateX(10px) scale(.985) !important;
}

#projects .projects-track.is-sliding .project-card.project-slide-in{
  opacity:1 !important;
  transform:translateX(0) scale(1) !important;
  transition:opacity 1250ms ease, transform 1250ms cubic-bezier(.22,.72,.18,1) !important;
}

@media(max-width:1100px){
  #projects.projects-panel{
    grid-template-columns:1fr !important;
  }
  #projects .projects-carousel{
    grid-column:auto !important;
  }
  #projects .projects-track .project-card{
    flex-basis:calc((100% - 24px) / 2) !important;
    width:calc((100% - 24px) / 2) !important;
    max-width:calc((100% - 24px) / 2) !important;
  }
}

@media(max-width:720px){
  #projects .projects-track .project-card{
    flex-basis:100% !important;
    width:100% !important;
    max-width:100% !important;
  }
}


/* =====================================================
   FIX 115 - Projects carousel soft motion + 7s rhythm
   Scope: #projects only. Dimensions/layout from FIX 114 are preserved.
===================================================== */
#projects .projects-track.is-sliding{
  transition:transform 1900ms cubic-bezier(.16,.84,.22,1) !important;
}
#projects .projects-track .project-card.project-slide-out{
  opacity:.52 !important;
  transform:translateX(-4px) scale(.995) !important;
  transition:opacity 1900ms ease, transform 1900ms cubic-bezier(.16,.84,.22,1) !important;
}
#projects .projects-track .project-card.project-slide-in{
  opacity:.42 !important;
  transform:translateX(12px) scale(.995) !important;
}
#projects .projects-track.is-sliding .project-card.project-slide-in{
  opacity:1 !important;
  transform:translateX(0) scale(1) !important;
  transition:opacity 1900ms ease, transform 1900ms cubic-bezier(.16,.84,.22,1) !important;
}

/* =====================================================
   FIX 120 - Final polish v1
   Scope: small visual polish only. No layout rebuilds.
   - Project tags
   - Service/process/partners hover polish
   - Footer trust line
   - Unified section reveal
   - CTA hover polish
===================================================== */

/* Project tags: restore the small category pills removed in earlier cleanup */
#projects .project-card .project-content .project-tag,
#projects .project-card span.project-tag{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:absolute !important;
  right:22px !important;
  bottom:84px !important;
  z-index:4 !important;
  min-height:28px !important;
  padding:5px 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.1px !important;
  color:#dfe8ff !important;
  background:rgba(47,76,168,.24) !important;
  border:1px solid rgba(112,137,213,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px rgba(0,0,0,.16) !important;
  backdrop-filter:blur(10px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(135%) !important;
}

/* Services hover polish: only hover response, not normal layout */
#services .service-card:hover{
  transform:translateY(-8px) !important;
  border-color:rgba(47,76,168,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -18px 34px rgba(255,255,255,.04),
    0 20px 46px rgba(37,63,145,.085) !important;
}

/* Process hover polish: icon and number only */
.process-section .steps-line .step .process-svg-icon,
.process-section .steps-line .step > div,
.process-section .steps-line .step b{
  transition:transform .28s ease, opacity .28s ease, color .28s ease, text-shadow .28s ease !important;
}
.process-section .steps-line .step:hover .process-svg-icon,
.process-section .steps-line .step:hover > div{
  transform:scale(1.08) !important;
}
.process-section .steps-line .step:hover b{
  font-weight:900 !important;
  color:#1f3b8f !important;
  text-shadow:0 0 14px rgba(47,76,168,.18) !important;
}

/* Partners hover: keep normal state, add tiny life on hover */
.brand-logos img,
.brand-logos span{
  transition:transform .28s ease, filter .28s ease, opacity .28s ease !important;
}
.brand-logos img:hover,
.brand-logos span:hover{
  filter:grayscale(0) !important;
  opacity:1 !important;
  transform:scale(1.03) !important;
}

/* Footer/CTA trust line */
.footer-trust-line{
  max-width:560px !important;
  margin:0 0 16px !important;
  color:#6b7280 !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.9 !important;
}

/* CTA hover polish: shadow softer, gradient a touch brighter */
.btn-primary:hover,
.header-btn:hover,
.cta-header-btn:hover{
  background:linear-gradient(90deg,#2f4ca8 0%,#6a4da8 55%,#c25aa5 100%) !important;
  box-shadow:0 18px 42px rgba(47,76,168,.24),0 8px 18px rgba(194,90,165,.14) !important;
}
#hero .btn-ghost:hover,
.hero-actions .btn-ghost:hover,
.btn-ghost:hover{
  box-shadow:0 14px 30px rgba(47,76,168,.12) !important;
}

/* Unified reveal motion for page sections */
.rhb-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
  will-change:opacity, transform;
}
.rhb-reveal.rhb-reveal-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .rhb-reveal{opacity:1 !important;transform:none !important;transition:none !important;}
}
.brand-logos{transition:filter .28s ease, opacity .28s ease !important;}
.brand-logos:hover{filter:grayscale(0) !important;opacity:1 !important;}

/* FIX 122 - prevent section reveal transitions from adding jitter during credit-roll scroll */
body.rhb-credit-rolling .rhb-reveal,
body.rhb-credit-rolling .rhb-reveal.rhb-reveal-visible{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  will-change:auto !important;
}
body.rhb-credit-rolling{
  scroll-behavior:auto !important;
}
body.rhb-credit-rolling *{
  scroll-behavior:auto !important;
}

/* FIX 132 - About section rebuilt from approved visual reference */
.rhb-about-section{
  position:relative;
  margin:76px auto 0;
  width:calc(100% - 36px);
  min-height:720px;
  border-radius:28px;
  overflow:hidden;
  display:grid;
  grid-template-columns: 47.5% 52.5%;
  align-items:center;
  padding:64px 70px 64px 80px;
  direction:ltr;
  background:
    linear-gradient(112deg,rgba(255,255,255,.92) 0%,rgba(248,250,255,.92) 44%,rgba(255,255,255,.97) 100%);
  border:1px solid rgba(17,22,121,.08);
  box-shadow:0 26px 70px rgba(17,22,121,.09);
  isolation:isolate;
}
.rhb-about-section:before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 5% 5%,rgba(139,92,246,.18),transparent 22%),
    linear-gradient(112deg,transparent 0 58%,rgba(17,22,121,.04) 58% 62%,transparent 62%),
    linear-gradient(130deg,rgba(245,247,255,.1),rgba(233,236,255,.45));
  pointer-events:none;z-index:-2;
}
.rhb-about-section:after{
  content:"";position:absolute;inset:auto 0 0 0;height:90px;
  background:repeating-radial-gradient(ellipse at 35% 100%,rgba(17,22,121,.11) 0 1px,transparent 1.5px 6px);
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,transparent 54%);
  opacity:.38;pointer-events:none;z-index:-1;
}
.rhb-about-wave{position:absolute;left:0;right:0;bottom:0;height:78px;opacity:.3;background:repeating-radial-gradient(ellipse at 34% 110%,rgba(17,22,121,.11) 0 1px,transparent 2px 8px);mask-image:linear-gradient(90deg,transparent,#000 20%,transparent 52%);pointer-events:none}
.rhb-about-bg-dots{position:absolute;width:74px;height:54px;background-image:radial-gradient(circle,rgba(17,22,121,.48) 1.6px,transparent 2px);background-size:18px 18px;opacity:.55;pointer-events:none}
.rhb-about-bg-dots-top{top:36px;left:34px;filter:drop-shadow(0 6px 9px rgba(17,22,121,.18));}
.rhb-about-bg-dots-bottom{right:132px;bottom:40px;background-image:radial-gradient(circle,rgba(17,22,121,.38) 1.6px,transparent 2px)}

.rhb-about-visual{direction:rtl;display:flex;justify-content:flex-start;align-items:center;height:100%;}
.rhb-about-card-shell{width:580px;height:790px;max-height:calc(100% - 10px);border-radius:42px;padding:18px;background:rgba(255,255,255,.62);box-shadow:0 22px 80px rgba(17,22,121,.12), inset 0 0 0 1px rgba(255,255,255,.82)}
.rhb-about-card-inner{position:relative;width:100%;height:100%;overflow:hidden;border-radius:34px;background:
  radial-gradient(circle at 23% 9%,rgba(255,255,255,.38),transparent 24%),
  radial-gradient(circle at 2% 95%,rgba(139,92,246,.76),transparent 30%),
  radial-gradient(circle at 80% 12%,rgba(255,255,255,.18),transparent 34%),
  linear-gradient(135deg,#070d3f 0%,#121a57 48%,#050b32 100%);
  border:1px solid rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -32px 70px rgba(118,78,255,.12)}
.rhb-about-card-inner:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.08),transparent 38%,rgba(255,255,255,.22));pointer-events:none}
.rhb-about-mini-dots{position:absolute;width:98px;height:58px;background-image:radial-gradient(circle,rgba(255,255,255,.72) 1.6px,transparent 2px);background-size:16px 16px;opacity:.7}.rhb-about-mini-dots.dots-a{top:24px;right:58px}.rhb-about-mini-dots.dots-b{top:118px;left:82px;opacity:.42}
.rhb-watermark{position:absolute;top:88px;left:50%;transform:translateX(-50%);font-family:Arial, sans-serif;font-weight:900;font-size:112px;letter-spacing:-10px;color:rgba(255,255,255,.11);line-height:1;direction:ltr;user-select:none}
.rhb-about-network .node{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(222,230,255,.88);box-shadow:0 0 24px rgba(158,175,255,.70)}
.rhb-about-network .n1{right:78px;top:190px}.rhb-about-network .n2{right:26px;top:324px}.rhb-about-network .n3{right:90px;bottom:72px}.rhb-about-network .n4{left:72px;bottom:48px}
.rhb-about-network .line{position:absolute;height:1px;background:rgba(195,207,255,.34);transform-origin:left center;box-shadow:0 0 12px rgba(128,119,255,.18)}.rhb-about-network .l1{width:205px;right:-40px;top:260px;transform:rotate(62deg)}.rhb-about-network .l2{width:260px;right:-26px;top:380px;transform:rotate(146deg)}.rhb-about-network .l3{width:320px;right:18px;bottom:110px;transform:rotate(169deg)}.rhb-about-network .l4{width:220px;left:40px;bottom:85px;transform:rotate(-8deg)}.rhb-about-network .l5{width:230px;right:78px;top:190px;transform:rotate(72deg)}.rhb-about-network .l6{width:260px;right:26px;top:324px;transform:rotate(102deg)}
/* About visual card - rebuilt to match approved source card */
.rhb-capability-list{position:absolute;right:58px;left:58px;bottom:78px;display:flex;flex-direction:column;gap:18px}
.rhb-capability{height:122px;border-radius:20px;padding:21px 34px 18px 126px;display:flex;align-items:center;justify-content:flex-start;text-align:left;direction:ltr;color:#fff;position:relative;overflow:hidden;background:linear-gradient(96deg,rgba(255,255,255,.075),rgba(45,55,136,.54));border:1px solid rgba(255,255,255,.19);box-shadow:0 18px 42px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -22px 55px rgba(17,22,121,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.rhb-capability:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.12),transparent 36%,rgba(255,255,255,.055));opacity:.72;pointer-events:none}
.rhb-capability:first-child{background:linear-gradient(96deg,rgba(255,255,255,.065),rgba(36,47,118,.50))}
.rhb-capability:nth-child(2){background:linear-gradient(96deg,rgba(80,82,205,.52),rgba(36,48,124,.58))}
.rhb-capability:nth-child(3){background:linear-gradient(96deg,rgba(126,82,255,.62),rgba(35,47,122,.57))}
.rhb-capability .cap-icon{position:absolute;left:22px;right:auto;top:50%;transform:translateY(-50%);width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),rgba(255,255,255,.07) 55%,rgba(17,22,121,.18));border:1.5px solid rgba(179,160,255,.70);box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 0 32px rgba(139,92,246,.23)}
.rhb-capability svg{width:39px;height:39px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:.94}
.rhb-capability h3{position:relative;z-index:1;margin:0 0 13px;font-size:20px;line-height:1;font-weight:900;letter-spacing:-.2px;text-shadow:0 0 18px rgba(255,255,255,.22)}
.rhb-capability p{position:relative;z-index:1;margin:0;font-size:11.7px;line-height:1.9;color:rgba(255,255,255,.88);direction:rtl;text-align:right;max-width:365px}

.rhb-about-content{direction:rtl;text-align:right;align-self:center;padding:0 0 0 16px;max-width:650px;justify-self:end;color:#0f172a}.rhb-about-kicker{position:relative;display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:900;color:#0f172a;margin-bottom:34px}.rhb-about-kicker span{width:8px;height:8px;border-radius:50%;background:#111679;box-shadow:0 0 16px rgba(17,22,121,.32);order:-1}.rhb-about-kicker:after{content:"";position:absolute;right:0;bottom:-18px;width:74px;height:2px;background:#111679;border-radius:4px}.rhb-about-title{margin:18px 0 18px;font-size:56px;line-height:1.18;font-weight:950;letter-spacing:-2.2px;white-space:nowrap}.rhb-about-title .title-dark{color:#0f172a}.rhb-about-title .title-navy{color:#111679;background:linear-gradient(90deg,#2447b8 0%,#1a2f9a 48%,#111679 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-fill-color:transparent}.rhb-about-divider{height:16px;display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 28px;direction:ltr}.rhb-about-divider i{display:block;width:92px;height:1px;background:linear-gradient(90deg,transparent,rgba(17,22,121,.22),transparent)}.rhb-about-divider b{display:block;width:13px;height:13px;background:#111679;transform:rotate(45deg);box-shadow:none}.rhb-about-intro{max-width:612px;margin:0 auto 40px;color:#4b5563;font-size:17px;line-height:2.18;text-align:center;font-weight:500}.rhb-about-features{display:flex;flex-direction:column;gap:0}.rhb-about-feature{position:relative;min-height:132px;border-bottom:1px solid rgba(100,116,139,.14);display:grid;grid-template-columns:92px 46px minmax(0,1fr);align-items:center;column-gap:0;direction:rtl}.rhb-about-feature:last-child{border-bottom:0}.rhb-about-feature .feature-icon{grid-column:1;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;color:#111679;background:rgba(255,255,255,.92);border:1px solid rgba(17,22,121,.06);box-shadow:0 14px 32px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9)}.rhb-about-feature .feature-icon svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.rhb-about-feature .feature-dot{grid-column:2;width:8px;height:8px;border-radius:50%;background:#111679;justify-self:center;box-shadow:0 0 12px rgba(17,22,121,.32)}.rhb-about-feature .feature-copy{grid-column:3;text-align:right;padding-right:2px}.rhb-about-feature h3{margin:0 0 12px;font-size:20px;line-height:1.55;color:#0f172a;font-weight:950}.rhb-about-feature p{margin:0;color:#64748b;font-size:14.2px;line-height:2.05;font-weight:500;max-width:480px}

@media(max-width:980px){.rhb-about-section{grid-template-columns:1fr;padding:42px 24px;gap:28px}.rhb-about-visual{justify-content:center}.rhb-about-card-shell{width:min(580px,100%);height:690px}.rhb-about-content{justify-self:center;text-align:center;padding:0}.rhb-about-title{font-size:38px;white-space:normal}.rhb-about-feature{grid-template-columns:80px 28px minmax(0,1fr)}.rhb-about-feature .feature-icon{width:72px;height:72px}.rhb-about-feature h3{font-size:17px}.rhb-about-feature p{font-size:13px}.rhb-capability-list{right:34px;left:34px}.rhb-capability{padding-right:90px}}


/* fixed134: About visual uses the approved exported left-card image */
.rhb-about-image-shell{
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
}
.rhb-about-card-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border:0;
  border-radius:42px;
}

/* =====================================================
   FIX138 - Hero source reset from fixed136
   Only two requested changes:
   1) Remove initial top gap so page starts with Hero.
   2) Replace Hero background image with supplied 9.webp.
   Keep all sizing, zoom, position, layout and other sections unchanged.
===================================================== */
.page{
  margin-top:0 !important;
}
.hero-bg{
  background-image:url('../img/9.webp') !important;
}


/* =====================================================
   FIX140 - Hero brand logotype SVG only
   Replace the typed hero title with the supplied vector logotype.
   This affects only the hero brand mark and no global typography.
===================================================== */
.hero-brand-logo{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin:24px auto 0 !important;
  width:190px !important;
  max-width:62% !important;
  line-height:0 !important;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.10)) !important;
}
.hero-brand-logo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}
@media(max-width:720px){
  .hero-brand-logo{width:138px !important;margin-top:18px !important;}
}

/* =====================================================
   FIX142 - Hero layout polish only
   - Remove visual dominance of hero CTA area
   - Give the brand logotype more breathing room
   - Make the hero eyebrow orb navy
   No hero image sizing/zoom/position changes.
===================================================== */
.hero-content{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}
.hero-content .eyebrow span{
  background:#24408f !important;
  box-shadow:0 0 16px rgba(36,64,143,.28) !important;
}
.hero-brand-logo{
  margin-top:34px !important;
  margin-bottom:0 !important;
}
.hero-content p{
  margin-top:30px !important;
  margin-bottom:0 !important;
}
.hero-actions{
  display:none !important;
}
@media(max-width:720px){
  .hero-brand-logo{margin-top:26px !important;}
  .hero-content p{margin-top:24px !important;}
}

/* =====================================================
   FIX146 - Responsive QA final pass
   Scope: mobile/tablet only. Desktop visual freeze is preserved.
   Goals:
   - No horizontal overflow
   - Stable header/nav on tablet and mobile
   - Hero keeps artwork sizing while content breathes
   - Services/About/Stats/Process/Projects/Footer stack cleanly
   - No changes above 1180px
===================================================== */
@media (max-width:1180px){
  html,body{max-width:100% !important;overflow-x:hidden !important;}
  *,*::before,*::after{box-sizing:border-box;}
  .page{width:100% !important;max-width:100% !important;padding-left:14px !important;padding-right:14px !important;overflow-x:hidden !important;}
  .panel,.glass{max-width:100% !important;}
  img,svg,video{max-width:100%;}

  /* Header: keep layout calm on tablet widths */
  .header{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:minmax(190px,220px) minmax(0,1fr) auto !important;
    gap:16px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .nav{gap:16px !important;min-width:0 !important;}
  .nav a{white-space:nowrap !important;font-size:13px !important;}
  .header-btn{min-width:132px !important;white-space:nowrap !important;}

  /* Hero tablet: avoid cramped title/content without scaling the hero image */
  .hero{height:760px !important;}
  .hero-content{
    top:168px !important;
    right:54px !important;
    left:auto !important;
    width:420px !important;
    transform:none !important;
  }
  .hero-brand-logo{width:168px !important;max-width:58% !important;}
  .hero-content p{width:min(390px,100%) !important;font-size:15px !important;line-height:2.05 !important;}
  .tech-list{left:48px !important;gap:34px !important;}
  .social-side{left:44px !important;}
  .scroll-note{left:42px !important;bottom:96px !important;}
  .brand-strip{right:32px !important;left:32px !important;}

  /* Services tablet: remove desktop forced width/padding that can overflow */
  .services-section{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:42px 22px 28px !important;
    gap:34px !important;
  }
  .services-copy{order:-1 !important;text-align:center !important;margin:0 auto !important;max-width:680px !important;}
  .services-copy p{margin-left:auto !important;margin-right:auto !important;max-width:610px !important;}
  .services-grid{
    width:100% !important;
    max-width:860px !important;
    margin:0 auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
    padding:14px !important;
  }
  .services-grid::before,.services-grid::after,.services-grid .service-card:first-child::before,.services-grid .service-card:first-child::after,.services-grid .service-card:nth-child(2)::after,.services-grid .service-card:nth-child(3)::before{display:none !important;}
  .neural-orb,.molecule-bg{display:none !important;}

  /* About tablet */
  .rhb-about-section{
    width:calc(100% - 28px) !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:46px 26px !important;
    gap:34px !important;
  }
  .rhb-about-visual{order:2 !important;justify-content:center !important;width:100% !important;}
  .rhb-about-content{order:1 !important;justify-self:center !important;text-align:center !important;max-width:720px !important;padding:0 !important;}
  .rhb-about-title{font-size:44px !important;white-space:normal !important;letter-spacing:-1.4px !important;}
  .rhb-about-intro{max-width:650px !important;}
  .rhb-about-card-shell{width:min(520px,100%) !important;height:auto !important;aspect-ratio:580/790 !important;max-height:none !important;}
  .rhb-about-feature{grid-template-columns:82px 30px minmax(0,1fr) !important;min-height:118px !important;text-align:right !important;}

  /* Stats tablet: 2x2 instead of tight 4 columns */
  .stats-panel{
    width:calc(100% - 28px) !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:0 !important;
    padding:26px 22px !important;
  }
  .stat{min-height:96px !important;border-left:0 !important;border-bottom:1px solid rgba(255,255,255,.18) !important;}
  .stat:nth-last-child(-n+2){border-bottom:0 !important;}

  /* Process tablet: readable rows, timeline hidden */
  .process-section{
    width:100% !important;
    grid-template-columns:1fr !important;
    padding:34px 22px 0 !important;
    gap:24px !important;
  }
  .process-copy,.process-intro{text-align:center !important;max-width:680px !important;margin:0 auto !important;}
  .process-copy h2,.process-intro h2{font-size:42px !important;}
  .steps-line{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:22px 18px !important;
  }
  .steps-line::before{display:none !important;}
  .step{padding:18px 14px !important;border-radius:22px !important;background:rgba(255,255,255,.44) !important;border:1px solid rgba(47,76,168,.08) !important;}

  /* Projects tablet */
  .projects-panel{
    width:calc(100% - 28px) !important;
    grid-template-columns:1fr 1fr !important;
    padding:28px !important;
    gap:20px !important;
  }
  .projects-copy{grid-column:1/-1 !important;text-align:center !important;max-width:650px !important;margin:0 auto !important;}
  .project-card{min-height:260px !important;}

  /* CTA/Footer tablet */
  .cta-panel{width:calc(100% - 28px) !important;height:auto !important;min-height:168px !important;grid-template-columns:1fr !important;padding:28px !important;}
  .cta-art{display:none !important;}
  .cta-copy{text-align:center !important;padding:0 !important;}
  .footer{width:calc(100% - 28px) !important;grid-template-columns:1fr 1fr !important;gap:28px !important;padding:34px 28px 18px !important;}
}

@media (max-width:760px){
  .page{padding-left:10px !important;padding-right:10px !important;}
  .section{margin-top:52px !important;}

  /* Mobile header */
  .header{
    height:auto !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:14px 12px !important;
    border-radius:0 0 24px 24px !important;
  }
  .brand{justify-self:center !important;}
  .brand-icon{width:44px !important;height:44px !important;}
  .brand-copy strong{font-size:14px !important;}
  .brand-copy small{font-size:9px !important;}
  .nav{
    width:100% !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:8px 12px !important;
  }
  .nav a{font-size:12px !important;padding:6px 4px !important;}
  .header-btn{justify-self:center !important;height:38px !important;min-width:132px !important;font-size:12px !important;}

  /* Mobile hero: keep background image unchanged, move text to safe readable block */
  .hero{height:760px !important;border-radius:0 0 28px 28px !important;}
  .hero-bg{background-position:72% center !important;background-size:cover !important;}
  .hero-fade{background:linear-gradient(180deg,rgba(247,248,252,.90) 0%,rgba(247,248,252,.58) 43%,rgba(247,248,252,.10) 100%) !important;}
  .hero-content{
    top:118px !important;
    right:18px !important;
    left:18px !important;
    width:auto !important;
    transform:none !important;
    padding:0 8px !important;
  }
  .hero-content .eyebrow{font-size:12px !important;line-height:1.9 !important;justify-content:center !important;}
  .hero-brand-logo{width:132px !important;margin-top:24px !important;}
  .hero-content p{width:100% !important;max-width:330px !important;font-size:13px !important;line-height:2.05 !important;margin-top:22px !important;}
  .social-side,.tech-list,.scroll-note{display:none !important;}
  .brand-strip{
    right:14px !important;
    left:14px !important;
    bottom:14px !important;
    height:auto !important;
    min-height:96px !important;
    flex-direction:column !important;
  }
  .brand-badge{width:100% !important;height:34px !important;border-radius:24px 24px 0 0 !important;font-size:12px !important;}
  .brand-logos{gap:10px !important;padding:10px !important;flex-wrap:wrap !important;justify-content:center !important;}
  .brand-logos img{max-width:86px !important;}

  /* Mobile services */
  .services-section{padding:34px 8px 20px !important;gap:24px !important;}
  .services-copy h2,.section-copy h2{font-size:31px !important;line-height:1.45 !important;}
  .services-copy p,.section-copy p{font-size:13px !important;line-height:2.05 !important;}
  .services-grid{grid-template-columns:1fr !important;gap:14px !important;padding:0 !important;}
  .service-card{min-height:auto !important;padding:22px 18px !important;border-radius:22px !important;}

  /* Mobile about */
  .rhb-about-section{width:100% !important;margin-top:52px !important;padding:34px 16px !important;border-radius:24px !important;gap:26px !important;}
  .rhb-about-kicker{font-size:14px !important;margin-bottom:26px !important;}
  .rhb-about-title{font-size:31px !important;line-height:1.45 !important;letter-spacing:-.8px !important;}
  .rhb-about-divider{margin:4px 0 22px !important;gap:12px !important;}
  .rhb-about-divider i{width:62px !important;}
  .rhb-about-intro{font-size:13.5px !important;line-height:2.15 !important;margin-bottom:22px !important;text-align:center !important;}
  .rhb-about-feature{
    grid-template-columns:62px 20px minmax(0,1fr) !important;
    min-height:auto !important;
    padding:16px 0 !important;
  }
  .rhb-about-feature .feature-icon{width:56px !important;height:56px !important;}
  .rhb-about-feature .feature-icon svg{width:30px !important;height:30px !important;}
  .rhb-about-feature h3{font-size:15px !important;line-height:1.7 !important;margin-bottom:7px !important;}
  .rhb-about-feature p{font-size:12.5px !important;line-height:2 !important;}
  .rhb-about-card-shell{width:min(330px,100%) !important;}

  /* Mobile stats */
  .stats-panel{width:100% !important;grid-template-columns:1fr !important;border-radius:22px !important;padding:18px !important;}
  .stat{border-bottom:1px solid rgba(255,255,255,.18) !important;justify-content:center !important;min-height:86px !important;}
  .stat:nth-last-child(-n+2){border-bottom:1px solid rgba(255,255,255,.18) !important;}
  .stat:last-child{border-bottom:0 !important;}
  .stat strong{font-size:32px !important;}
  .stat i{font-size:30px !important;}

  /* Mobile process */
  .process-section{padding:28px 8px 0 !important;}
  .process-copy h2,.process-intro h2{font-size:32px !important;line-height:1.45 !important;}
  .steps-line{grid-template-columns:1fr !important;gap:14px !important;}
  .step div{width:82px !important;height:82px !important;font-size:27px !important;}

  /* Mobile projects */
  .projects-panel{width:100% !important;margin-top:54px !important;grid-template-columns:1fr !important;padding:22px !important;border-radius:24px !important;}
  .projects-copy h2{font-size:28px !important;}
  .projects-copy p{font-size:13px !important;}
  .project-card{min-height:285px !important;}
  .slider-next{display:none !important;}

  /* Mobile CTA/Footer */
  .cta-panel{width:100% !important;margin-top:46px !important;padding:24px 18px !important;border-radius:24px !important;}
  .cta-copy h2{font-size:26px !important;line-height:1.5 !important;}
  .cta-copy p{font-size:13px !important;}
  .footer{width:100% !important;grid-template-columns:1fr !important;text-align:center !important;padding:30px 22px 16px !important;border-radius:24px 24px 0 0 !important;}
  .footer img{margin-left:auto !important;margin-right:auto !important;max-width:190px !important;}
  .footer-social{justify-content:center !important;}
  .footer-trust-line{margin-left:auto !important;margin-right:auto !important;}
}

@media (max-width:390px){
  .hero{height:740px !important;}
  .hero-content{top:106px !important;}
  .hero-brand-logo{width:118px !important;}
  .hero-content p{font-size:12.5px !important;max-width:300px !important;}
  .brand-logos img{max-width:78px !important;}
  .rhb-about-title{font-size:28px !important;}
  .services-copy h2,.section-copy h2,.process-copy h2,.process-intro h2{font-size:28px !important;}
  .projects-copy h2{font-size:25px !important;}
}


/* ============================================================
   CONSULTATION MODAL
   Purpose: Premium consultation form UI. Backend-ready, no visual impact on existing sections.
   ============================================================ */
.rhb-consultation-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:18px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .32s ease, visibility .32s ease;
}
.rhb-consultation-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.rhb-consultation-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(18px);
}
.rhb-consultation-dialog{
  position:relative;
  width:min(820px,calc(100vw - 36px));
  max-height:min(86vh,760px);
  overflow:auto;
  border-radius:30px;
  padding:28px;
  background:
    radial-gradient(circle at 14% 12%,rgba(47,76,168,.18),transparent 34%),
    radial-gradient(circle at 88% 8%,rgba(107,83,255,.12),transparent 30%),
    rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 34px 110px rgba(15,23,42,.28);
  transform:translateY(18px) scale(.985);
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.rhb-consultation-modal.is-open .rhb-consultation-dialog{transform:translateY(0) scale(1);}
.rhb-consultation-close{
  position:absolute;
  top:18px;
  left:18px;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  color:#1f3b8f;
  background:rgba(255,255,255,.78);
  box-shadow:0 12px 30px rgba(15,23,42,.12);
  font-size:28px;
  line-height:1;
}
.rhb-consultation-head{max-width:680px;margin:0 auto 20px;text-align:center;}
.rhb-consultation-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#1f3b8f;
  font-weight:800;
  font-size:14px;
  margin-bottom:12px;
}
.rhb-consultation-kicker::before,.rhb-consultation-kicker::after{
  content:"";
  width:28px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#2f4ca8,#1f3b8f);
}
.rhb-consultation-head h2{
  margin:0 0 12px;
  font-size:clamp(28px,3.3vw,40px);
  line-height:1.35;
  color:#0f172a;
  letter-spacing:-1px;
}
.rhb-consultation-head p{
  margin:0 auto;
  max-width:720px;
  color:#4b5563;
  font-size:15px;
  line-height:1.95;
}
.rhb-consultation-form{display:grid;gap:12px;}
.rhb-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.rhb-consultation-form label{display:grid;gap:8px;}
.rhb-consultation-form label span{
  color:#1f2937;
  font-size:13px;
  font-weight:800;
}
.rhb-consultation-form input,
.rhb-consultation-form textarea{
  width:100%;
  border:1px solid rgba(47,76,168,.16);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  color:#111827;
  outline:none;
  padding:11px 14px;
  font:inherit;
  line-height:1.7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.rhb-consultation-form textarea{resize:vertical;min-height:104px;}
.rhb-consultation-form input:focus,
.rhb-consultation-form textarea:focus{
  border-color:rgba(47,76,168,.55);
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 4px rgba(47,76,168,.10);
}
.rhb-form-full{grid-column:1/-1;}
.rhb-hp-field{position:absolute !important;opacity:0 !important;pointer-events:none !important;width:1px !important;height:1px !important;}
.rhb-consultation-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:2px;
}
.rhb-consultation-submit{border:0;cursor:pointer;min-width:208px;background:linear-gradient(90deg,#253F91 0%,#654AA4 55%,#C456A3 100%) !important;box-shadow:0 12px 28px rgba(37,63,145,.22), inset 0 1px 0 rgba(255,255,255,.26) !important;}
.rhb-consultation-actions small{
  max-width:460px;
  color:#6b7280;
  font-size:12px;
  line-height:1.9;
}
.rhb-consultation-status{
  border:1px solid rgba(47,76,168,.16);
  background:rgba(47,76,168,.08);
  border-radius:20px;
  padding:16px 18px;
  color:#1f3b8f;
  line-height:1.9;
}
.rhb-consultation-status strong{display:block;font-size:15px;margin-bottom:2px;}
.rhb-consultation-status span{display:block;color:#334155;font-size:13px;}

.rhb-consultation-submit:hover{
  background:linear-gradient(90deg,#2f4ca8 0%,#6a4da8 55%,#c25aa5 100%) !important;
  box-shadow:0 18px 42px rgba(47,76,168,.24),0 8px 18px rgba(194,90,165,.14) !important;
}
@media (max-width:480px){
  .rhb-consultation-modal{padding:8px;}
  .rhb-consultation-dialog{max-height:94vh;padding:22px 14px 16px;border-radius:24px 24px 0 0;}
  .rhb-consultation-kicker{font-size:12.5px;margin-bottom:8px;}
  .rhb-consultation-kicker::before,.rhb-consultation-kicker::after{width:20px;}
  .rhb-consultation-form{gap:10px;}
  .rhb-form-grid{gap:10px;}
  .rhb-consultation-form textarea{min-height:92px;}
}
@media (min-width:761px) and (max-height:760px){
  .rhb-consultation-dialog{max-height:92vh;padding:24px;}
  .rhb-consultation-head{margin-bottom:14px;}
  .rhb-consultation-head h2{font-size:32px;margin-bottom:8px;}
  .rhb-consultation-head p{font-size:14px;line-height:1.85;}
  .rhb-consultation-form textarea{min-height:88px;}
}

body.rhb-modal-open{overflow:hidden;}
body.rhb-modal-open .rhb-consultation-modal{direction:rtl;}

@media (max-width:760px){
  .rhb-consultation-modal{padding:12px;align-items:end;}
  .rhb-consultation-dialog{width:100%;max-height:92vh;border-radius:26px 26px 0 0;padding:24px 16px 18px;}
  .rhb-consultation-close{top:12px;left:12px;width:38px;height:38px;font-size:25px;}
  .rhb-consultation-head{margin-bottom:16px;}
  .rhb-consultation-head h2{font-size:25px;}
  .rhb-consultation-head p{font-size:12.8px;line-height:1.9;}
  .rhb-form-grid{grid-template-columns:1fr;gap:12px;}
  .rhb-consultation-form input,.rhb-consultation-form textarea{border-radius:15px;padding:10px 12px;font-size:13px;}
  .rhb-consultation-actions{display:grid;gap:10px;}
  .rhb-consultation-submit{width:100%;min-width:0;}

}

/* =====================================================
   FIX 152 - Correct local after-hero and footer island imagery
   Scope: self-contained visual assets only.
   - Uses exact uploaded after-Hero background.
   - Uses exact uploaded footer island image.
   No external URLs.
===================================================== */
.page::before{
  background:
    linear-gradient(180deg, rgba(247,248,255,.60) 0%, rgba(247,248,255,.46) 36%, rgba(239,234,255,.62) 68%, rgba(141,114,255,.18) 100%),
    url('../img/after-hero-background.webp') top center / cover no-repeat,
    linear-gradient(180deg, #f7f8ff 0%, #f4f1ff 52%, #efeaff 100%) !important;
}

.cta-panel,
.footer-island .cta-panel{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.02)),
    url('../img/footer-island-image.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.footer-island::before{
  background:
    radial-gradient(circle at 50% 100%,rgba(119,75,255,.16),rgba(255,255,255,0) 62%),
    url('../img/after-hero-background.webp') center bottom / cover no-repeat !important;
  opacity:.42 !important;
}

/* =====================================================
   FIX 153 - Footer glass surface isolation
   هدف: بکگراند موج‌دار 55.jpg فقط پشت فوتر دیده شود، نه داخل کارت فوتر.
   - CTA island image remains footer-island-image.webp.
   - Footer content panel gets a clean glass/white surface.
   - Layout, height, spacing and content are not changed.
===================================================== */
.footer-island{
  isolation:isolate !important;
}

.footer-island::before{
  z-index:0 !important;
  pointer-events:none !important;
}

.footer-island > .cta-panel,
.footer-island > .footer,
.footer-island > footer.footer{
  position:relative !important;
  z-index:2 !important;
}

.footer-island .footer.rhb-footer,
.footer-island footer.footer,
.footer.rhb-footer{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.72) 100%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(145%) !important;
  backdrop-filter:blur(24px) saturate(145%) !important;
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:
    0 26px 74px rgba(54,54,120,.10),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
  overflow:hidden !important;
}

.footer-island .footer.rhb-footer::before,
.footer-island footer.footer::before,
.footer.rhb-footer::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.56), rgba(255,255,255,.76)) !important;
  opacity:1 !important;
  pointer-events:none !important;
}

.footer-island .footer.rhb-footer::after,
.footer-island footer.footer::after,
.footer.rhb-footer::after{
  content:"" !important;
  position:absolute !important;
  inset:auto 36px 48px 36px !important;
  height:1px !important;
  z-index:1 !important;
  background:linear-gradient(90deg, transparent, rgba(47,76,168,.14), transparent) !important;
  pointer-events:none !important;
}

.footer-island .footer.rhb-footer > *,
.footer-island footer.footer > *,
.footer.rhb-footer > *{
  position:relative !important;
  z-index:2 !important;
}

/* =====================================================
   FIX 154 - Final footer visual lock
   هدف: فوتر دقیقاً مثل نمونه مرجع باشد؛ بدون هیچ لایه/نوار/افکت اضافه.
   - after-hero-background.webp فقط پشت فوتر استفاده می‌شود.
   - footer-island-image.webp فقط داخل CTA بالای فوتر استفاده می‌شود.
   - کارت فوتر سطح شیشه‌ای تمیز و مستقل دارد.
===================================================== */
.footer-island{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg, rgba(247,248,255,.54) 0%, rgba(244,240,255,.40) 42%, rgba(160,126,255,.18) 100%),
    url('../img/after-hero-background.webp') center bottom / cover no-repeat !important;
}
.footer-island::before,
.footer-island::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
.footer-island .cta-panel{
  position:relative !important;
  z-index:2 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    url('../img/footer-island-image.webp') center center / cover no-repeat !important;
  overflow:hidden !important;
}
.footer-island .cta-panel::before,
.footer-island .cta-panel::after{
  content:none !important;
  display:none !important;
}
.footer-island .footer.rhb-footer,
.footer-island footer.footer,
.footer.rhb-footer{
  position:relative !important;
  z-index:2 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.68) 100%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(135%) !important;
  backdrop-filter:blur(22px) saturate(135%) !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:0 26px 76px rgba(70,64,130,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
  overflow:hidden !important;
}
.footer-island .footer.rhb-footer::before,
.footer-island footer.footer::before,
.footer.rhb-footer::before,
.footer-island .footer.rhb-footer::after,
.footer-island footer.footer::after,
.footer.rhb-footer::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
.footer-island .footer.rhb-footer > *,
.footer-island footer.footer > *,
.footer.rhb-footer > *{
  position:relative !important;
  z-index:2 !important;
}
.footer-island .copyright{
  border-top:1px solid rgba(111,61,255,.12) !important;
  background:transparent !important;
}


/* =====================================
   FIX155 - Logo spacing polish
   Scope: Header + Footer brand logo only.
   Purpose: increase only the gap between logo icon and text.
   Do not change icon, text, size, color, or placement.
===================================== */
.header .brand,
.footer-island .footer-brand .footer-logo,
.footer-brand .footer-logo{
  gap:22px !important;
}


/* ============================================================
FIX 164 - CPU idle / Lighthouse safe performance pass
Purpose:
Stop continuous decorative animation loops that can keep Lighthouse
from finding an idle CPU window. This does not change layout, copy,
colors or imagery; it only makes decorative motion static by default.
============================================================ */
.hero-bg,
.mouse:after,
.orb,
.orb *,
[class*="orb"],
[class*="Orb"]{
  animation-play-state: paused !important;
}

/* Keep user-triggered transitions and hovers intact, but avoid endless paint loops. */
@media (prefers-reduced-motion: no-preference){
  .project-card,
  .service-card,
  .process-step,
  .rhb-consultation-dialog{
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* FIX 166 - restore approved neural orb neuron animation after performance polish.
   The CPU-safe pass paused generic [class*="orb"] animations too aggressively.
   Keep JS idle fixes intact; restore only CSS-only neural orb pulses/rings. */
.neural-orb,
.neural-orb *,
.neural-orb::before,
.neural-orb::after{
  animation-play-state: running !important;
}
.neural-orb .orb-pulse{
  animation: orbProjectilePulse 7.4s linear infinite !important;
}
.neural-orb .orbit-a{
  animation: orbRingA 42s linear infinite !important;
}
.neural-orb .orbit-b{
  animation: orbRingB 64s linear infinite reverse !important;
}
.neural-orb .orb-dust{
  animation: orbDustPulse 7s ease-in-out infinite !important;
}
.neural-orb .orb-pulse.p1{animation-delay:-.25s!important}
.neural-orb .orb-pulse.p2{animation-delay:-.95s!important}
.neural-orb .orb-pulse.p3{animation-delay:-1.65s!important}
.neural-orb .orb-pulse.p4{animation-delay:-2.35s!important}
.neural-orb .orb-pulse.p5{animation-delay:-3.05s!important}
.neural-orb .orb-pulse.p6{animation-delay:-3.75s!important}
.neural-orb .orb-pulse.p7{animation-delay:-4.45s!important}
.neural-orb .orb-pulse.p8{animation-delay:-5.15s!important}
.neural-orb .orb-pulse.p9{animation-delay:-5.85s!important}
.neural-orb .orb-pulse.p10{animation-delay:-6.55s!important}

/* ============================================================
   FIX167 - Mobile Experience Pass
   Scope: max-width 760px only. Desktop RC1 remains visually frozen.
   Purpose: dedicated mobile layout, not a crushed desktop layout.
============================================================ */
.rhb-mobile-menu-toggle{display:none;}
@media (max-width:760px){
  html,body{width:100% !important;max-width:100% !important;overflow-x:hidden !important;}
  body{background:#f5f3ff !important;}
  .page{padding:0 !important;width:100% !important;max-width:100% !important;}
  .section{margin-top:56px !important;}
  .panel,.glass{max-width:100% !important;}

  /* Header: compact branded mobile bar + drawer menu */
  .hero-wrap{padding:0 10px !important;}
  .header{
    position:relative !important;
    top:auto !important;
    width:100% !important;
    min-height:74px !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:12px 14px !important;
    margin:10px auto 0 !important;
    border-radius:24px !important;
    z-index:50 !important;
    overflow:visible !important;
  }
  .header .brand{grid-column:3 !important;justify-self:end !important;gap:12px !important;min-width:0 !important;}
  .header .brand-icon{width:44px !important;height:44px !important;flex:0 0 44px !important;}
  .header .brand-copy strong{font-size:13px !important;line-height:1.2 !important;white-space:nowrap !important;}
  .header .brand-copy small{font-size:8px !important;letter-spacing:.2px !important;white-space:nowrap !important;}
  .rhb-mobile-menu-toggle{
    display:flex !important;
    grid-column:1 !important;
    width:44px !important;
    height:44px !important;
    border:1px solid rgba(47,76,168,.12) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.74) !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
    box-shadow:0 12px 32px rgba(47,76,168,.08) !important;
    cursor:pointer !important;
  }
  .rhb-mobile-menu-toggle span{display:block;width:18px;height:2px;border-radius:99px;background:#07112d;transition:.22s ease;}
  .header.is-mobile-menu-open .rhb-mobile-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .header.is-mobile-menu-open .rhb-mobile-menu-toggle span:nth-child(2){opacity:0;}
  .header.is-mobile-menu-open .rhb-mobile-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .header .header-btn{
    grid-column:2 !important;
    justify-self:center !important;
    height:42px !important;
    min-width:122px !important;
    padding:0 18px !important;
    font-size:12px !important;
    border-radius:16px !important;
  }
  .header .header-btn i{display:none !important;}
  .header .nav{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    right:0 !important;
    left:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    padding:10px !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(255,255,255,.78) !important;
    box-shadow:0 24px 70px rgba(15,18,70,.14) !important;
    -webkit-backdrop-filter:blur(18px) saturate(150%) !important;
    backdrop-filter:blur(18px) saturate(150%) !important;
    opacity:0 !important;
    transform:translateY(-10px) !important;
    pointer-events:none !important;
    transition:.22s ease !important;
  }
  .header.is-mobile-menu-open .nav{opacity:1 !important;transform:translateY(0) !important;pointer-events:auto !important;}
  .header .nav a{font-size:14px !important;text-align:center !important;padding:12px !important;border-radius:14px !important;}
  .header .nav a:hover{background:rgba(47,76,168,.07) !important;}

  /* Hero: mobile-first composition */
  .hero.panel,.hero{
    height:calc(100vh - 94px) !important;
    min-height:680px !important;
    max-height:820px !important;
    margin-top:10px !important;
    border-radius:28px !important;
    overflow:hidden !important;
  }
  .hero-bg{
    background-image:url('../img/hero-final.webp') !important;
    background-position:center center !important;
    background-size:cover !important;
    transform:none !important;
    animation:none !important;
  }
  .hero-fade{
    background:linear-gradient(180deg,rgba(247,248,252,.70) 0%,rgba(247,248,252,.48) 38%,rgba(247,248,252,.12) 100%) !important;
  }
  .hero-content{
    top:88px !important;
    right:18px !important;
    left:18px !important;
    width:auto !important;
    padding:0 !important;
    transform:none !important;
    text-align:center !important;
  }
  .hero-content .eyebrow{font-size:12px !important;line-height:1.9 !important;justify-content:center !important;margin-bottom:18px !important;}
  .hero-brand-logo{width:138px !important;max-width:138px !important;margin:10px auto 0 !important;}
  .hero-content p{width:100% !important;max-width:330px !important;margin:22px auto 0 !important;font-size:13px !important;line-height:2.1 !important;color:#2f3a56 !important;}
  .social-side,.tech-list,.scroll-note{display:none !important;}
  .brand-strip{
    right:18px !important;left:18px !important;bottom:18px !important;width:auto !important;
    height:auto !important;min-height:118px !important;flex-direction:column !important;border-radius:24px !important;overflow:hidden !important;
  }
  .brand-badge{width:100% !important;height:34px !important;border-radius:0 !important;font-size:12px !important;}
  .brand-logos{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:8px 14px !important;padding:12px !important;place-items:center !important;}
  .brand-logos img{max-width:112px !important;max-height:46px !important;object-fit:contain !important;}

  /* Services: heading first, one clean column */
  .services-section{display:flex !important;flex-direction:column !important;padding:58px 18px 18px !important;gap:22px !important;min-height:auto !important;}
  .services-copy{order:1 !important;text-align:center !important;max-width:360px !important;margin:0 auto !important;}
  .services-copy h2,.section-copy h2{font-size:30px !important;line-height:1.45 !important;letter-spacing:-.5px !important;}
  .services-copy p,.section-copy p{font-size:13px !important;line-height:2.05 !important;max-width:330px !important;margin:0 auto !important;}
  .services-grid{order:2 !important;width:100% !important;display:grid !important;grid-template-columns:1fr !important;gap:14px !important;padding:0 !important;}
  .service-card{width:100% !important;min-height:180px !important;padding:24px 20px !important;border-radius:24px !important;}
  .service-card i{width:64px !important;height:64px !important;border-radius:22px !important;margin-bottom:16px !important;}
  .service-card h3{font-size:18px !important;line-height:1.55 !important;}
  .service-card p{font-size:13px !important;line-height:2 !important;}
  .neural-orb,.molecule-bg,.service-mesh{display:none !important;}

  /* Stats */
  .stats-panel{width:calc(100% - 36px) !important;margin:48px auto 0 !important;grid-template-columns:1fr !important;border-radius:24px !important;padding:18px 20px !important;}
  .stat{min-height:84px !important;border-left:0 !important;border-bottom:1px solid rgba(255,255,255,.2) !important;justify-content:center !important;gap:16px !important;}
  .stat:last-child{border-bottom:0 !important;}
  .stat strong{font-size:34px !important;}
  .stat small{font-size:13px !important;}

  /* About: text then image */
  .rhb-about-section{width:calc(100% - 20px) !important;margin:58px auto 0 !important;display:flex !important;flex-direction:column !important;padding:38px 18px 24px !important;border-radius:28px !important;gap:26px !important;min-height:auto !important;overflow:hidden !important;}
  .rhb-about-content{order:1 !important;text-align:center !important;max-width:100% !important;padding:0 !important;}
  .rhb-about-visual{order:2 !important;width:100% !important;justify-content:center !important;}
  .rhb-about-kicker{justify-content:center !important;font-size:14px !important;margin-bottom:18px !important;}
  .rhb-about-title{font-size:31px !important;line-height:1.55 !important;letter-spacing:-.7px !important;white-space:normal !important;}
  .rhb-about-intro{font-size:13.5px !important;line-height:2.25 !important;text-align:center !important;margin-bottom:22px !important;}
  .rhb-about-feature{grid-template-columns:1fr !important;text-align:center !important;padding:22px 4px !important;gap:10px !important;border-top:1px solid rgba(47,76,168,.10) !important;}
  .rhb-about-feature .feature-dot{display:none !important;}
  .rhb-about-feature .feature-icon{width:64px !important;height:64px !important;margin:0 auto 8px !important;}
  .rhb-about-feature h3{font-size:17px !important;line-height:1.75 !important;}
  .rhb-about-feature p{font-size:13px !important;line-height:2.05 !important;margin:0 auto !important;}
  .rhb-about-card-shell{width:min(350px,100%) !important;height:auto !important;aspect-ratio:720/978 !important;margin:0 auto !important;}

  /* Process: vertical timeline-like cards */
  .process-section{display:flex !important;flex-direction:column !important;padding:52px 18px 0 !important;gap:24px !important;}
  .process-copy{text-align:center !important;max-width:360px !important;margin:0 auto !important;}
  .process-copy h2{font-size:31px !important;line-height:1.55 !important;}
  .steps-line{display:grid !important;grid-template-columns:1fr !important;gap:14px !important;position:relative !important;}
  .steps-line:before{display:none !important;}
  .step{background:rgba(255,255,255,.54) !important;border:1px solid rgba(47,76,168,.09) !important;border-radius:26px !important;padding:26px 18px !important;box-shadow:0 18px 52px rgba(47,76,168,.06) !important;}
  .step div{width:88px !important;height:88px !important;margin-bottom:14px !important;}
  .step h3{font-size:18px !important;line-height:1.7 !important;}
  .step p{font-size:13px !important;line-height:2 !important;max-width:260px !important;margin:0 auto !important;}

  /* Projects: mobile swipe cards */
  .projects-panel{width:calc(100% - 20px) !important;margin:58px auto 0 !important;display:block !important;padding:34px 18px 22px !important;border-radius:28px !important;min-height:auto !important;overflow:hidden !important;}
  .projects-copy{text-align:center !important;max-width:330px !important;margin:0 auto 26px !important;}
  .projects-copy h2{font-size:30px !important;line-height:1.45 !important;}
  .projects-copy p{font-size:13px !important;line-height:2.05 !important;}
  .projects-carousel{width:100% !important;overflow-x:auto !important;overflow-y:hidden !important;scroll-snap-type:x mandatory !important;-webkit-overflow-scrolling:touch !important;padding-bottom:8px !important;}
  .projects-track{display:flex !important;gap:16px !important;transform:none !important;transition:none !important;width:max-content !important;}
  .projects-track .project-card{flex:0 0 min(292px,78vw) !important;width:min(292px,78vw) !important;min-height:390px !important;scroll-snap-align:center !important;border-radius:24px !important;}
  .projects-carousel::-webkit-scrollbar{display:none !important;}
  .project-arrows,.slider-next{display:none !important;}

  /* Footer CTA */
  .footer-island{margin-top:58px !important;padding:0 10px 18px !important;border-radius:30px 30px 0 0 !important;background-position:center bottom !important;}
  .footer-island .cta-panel,.cta-panel{width:100% !important;height:auto !important;min-height:260px !important;margin:0 auto !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:28px 18px !important;border-radius:26px !important;background-position:30% center !important;}
  .cta-copy{text-align:center !important;padding:0 !important;max-width:340px !important;margin:0 auto !important;}
  .cta-copy h2{font-size:28px !important;line-height:1.55 !important;margin-bottom:12px !important;}
  .cta-copy p{font-size:13px !important;line-height:2 !important;}
  .cta-copy .btn{height:48px !important;min-width:190px !important;font-size:13px !important;}
  .cta-art{display:none !important;}

  /* Footer: compact stacked layout */
  .footer-island .footer.rhb-footer,.footer.rhb-footer,.footer{width:100% !important;margin:14px auto 0 !important;display:grid !important;grid-template-columns:1fr !important;gap:22px !important;text-align:center !important;padding:30px 22px 18px !important;border-radius:26px !important;}
  .footer-logo{justify-content:center !important;gap:16px !important;}
  .footer .brand-icon{width:58px !important;height:58px !important;}
  .footer p,.footer a{font-size:13px !important;line-height:2 !important;}
  .footer h4{font-size:17px !important;margin-bottom:10px !important;}
  .footer-social{justify-content:center !important;margin-top:16px !important;}
  .footer-col{padding:0 !important;}
  .copyright{font-size:11.5px !important;line-height:2 !important;padding-top:14px !important;}
  .back-to-top{left:50% !important;right:auto !important;transform:translateX(-50%) !important;bottom:58px !important;}
}

@media (max-width:390px){
  .header .brand-copy strong{font-size:12px !important;}
  .header .brand-copy small{font-size:7.5px !important;}
  .header .header-btn{min-width:112px !important;padding:0 14px !important;}
  .hero.panel,.hero{min-height:650px !important;}
  .hero-brand-logo{width:124px !important;}
  .hero-content p{font-size:12.5px !important;max-width:300px !important;}
  .brand-logos img{max-width:96px !important;}
  .services-copy h2,.section-copy h2,.process-copy h2,.rhb-about-title,.projects-copy h2{font-size:28px !important;}
}

/* ============================================================
   FIX168 - Mobile Redesign V2
   Real mobile-first visual system. Desktop remains frozen.
============================================================ */
.mobile-hero-orb,.mobile-hero-cta{display:none;}

@media (max-width: 760px){
  :root{
    --m-bg:#f4f2ff;
    --m-ink:#07122f;
    --m-muted:#5f6b84;
    --m-blue:#244aa7;
    --m-purple:#b64ac2;
    --m-radius:28px;
  }
  html,body{overflow-x:hidden!important;background:var(--m-bg)!important;}
  body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:
    radial-gradient(circle at 18% 7%,rgba(178,118,255,.20),transparent 30%),
    radial-gradient(circle at 85% 22%,rgba(38,85,190,.12),transparent 34%),
    linear-gradient(180deg,#fbfaff 0%,#f4f2ff 55%,#eeeaff 100%);}

  /* Real mobile header */
  .hero-wrap{padding:0!important;margin:0!important;min-height:auto!important;}
  .header{
    position:sticky!important;top:8px!important;z-index:999!important;
    width:calc(100% - 24px)!important;margin:8px auto 0!important;padding:10px 12px!important;
    height:68px!important;min-height:68px!important;border-radius:24px!important;
    display:grid!important;grid-template-columns:52px 1fr 52px!important;align-items:center!important;
    background:rgba(255,255,255,.78)!important;border:1px solid rgba(255,255,255,.92)!important;
    box-shadow:0 16px 46px rgba(20,22,70,.10)!important;
    -webkit-backdrop-filter:blur(20px) saturate(155%)!important;backdrop-filter:blur(20px) saturate(155%)!important;
  }
  .header .brand{grid-column:2!important;justify-self:center!important;display:flex!important;flex-direction:row-reverse!important;align-items:center!important;gap:10px!important;min-width:0!important;transform:none!important;}
  .header .brand-icon{width:42px!important;height:42px!important;display:block!important;flex:0 0 42px!important;}
  .header .brand-copy{display:block!important;text-align:right!important;line-height:1.15!important;}
  .header .brand-copy strong{display:block!important;font-size:13px!important;font-weight:900!important;color:#07122f!important;white-space:nowrap!important;}
  .header .brand-copy small{display:block!important;font-size:7.5px!important;font-weight:800!important;color:#07122f!important;letter-spacing:.25px!important;white-space:nowrap!important;margin-top:2px!important;}
  .rhb-mobile-menu-toggle{grid-column:3!important;justify-self:end!important;display:flex!important;width:46px!important;height:46px!important;border-radius:17px!important;background:rgba(255,255,255,.88)!important;border:1px solid rgba(18,38,90,.10)!important;box-shadow:0 10px 28px rgba(24,34,90,.08)!important;}
  .header .header-btn{display:none!important;}
  .header .nav{
    top:calc(100% + 10px)!important;right:0!important;left:0!important;padding:12px!important;border-radius:24px!important;
    background:rgba(255,255,255,.96)!important;box-shadow:0 26px 70px rgba(15,18,70,.18)!important;
  }
  .header .nav:after{content:"مشاوره تخصصی";display:block;margin-top:8px;padding:13px 16px;border-radius:16px;text-align:center;color:#fff;font-weight:900;font-size:13px;background:linear-gradient(135deg,#244aa7,#c24ab0);box-shadow:0 14px 30px rgba(91,67,180,.22);}
  .header .nav a{font-size:15px!important;font-weight:800!important;color:#101a36!important;padding:13px!important;}

  /* New mobile hero: no crushed desktop image */
  .hero.panel,.hero{
    width:calc(100% - 24px)!important;margin:14px auto 0!important;height:auto!important;min-height:620px!important;max-height:none!important;
    border-radius:32px!important;padding:38px 20px 170px!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;
    background:
      radial-gradient(circle at 50% 34%,rgba(139,92,246,.18),transparent 32%),
      radial-gradient(circle at 15% 12%,rgba(255,255,255,.9),transparent 28%),
      linear-gradient(180deg,rgba(255,255,255,.86),rgba(242,239,255,.72))!important;
    box-shadow:0 22px 70px rgba(47,76,168,.10)!important;overflow:hidden!important;
  }
  .hero:before{content:"";position:absolute;inset:0;background-image:url('../img/hero-final.webp');background-size:cover;background-position:center 58%;opacity:.16;filter:blur(.2px) saturate(105%);transform:scale(1.04);}
  .hero:after{content:"";position:absolute;inset:auto -12% -20% -12%;height:260px;background:radial-gradient(ellipse at 50% 50%,rgba(115,74,255,.18),transparent 65%);pointer-events:none;}
  .hero-bg,.hero-fade{display:none!important;}
  .hero-content{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;text-align:center!important;padding:0!important;z-index:2!important;display:flex!important;flex-direction:column!important;align-items:center!important;}
  .hero-content .eyebrow{margin:0 auto 18px!important;font-size:12px!important;line-height:1.9!important;font-weight:900!important;color:#244aa7!important;justify-content:center!important;}
  .hero-brand-logo{width:155px!important;max-width:155px!important;margin:0 auto 18px!important;filter:drop-shadow(0 12px 22px rgba(11,19,50,.06));}
  .hero-content p{max-width:330px!important;margin:0 auto!important;font-size:14px!important;line-height:2.15!important;font-weight:700!important;color:#25304a!important;}
  .mobile-hero-orb{display:block!important;position:relative;width:172px;height:172px;margin:30px auto 24px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0 8%,#eadcff 24%,rgba(100,72,230,.46) 52%,rgba(36,74,167,.26) 70%,transparent 72%);box-shadow:0 0 0 1px rgba(255,255,255,.78),0 28px 70px rgba(99,80,210,.22),inset 0 0 44px rgba(255,255,255,.65);}
  .mobile-hero-orb:before,.mobile-hero-orb:after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(36,74,167,.14);animation:rhbMobileOrbSpin 11s linear infinite;}
  .mobile-hero-orb:after{inset:35px;border-color:rgba(178,74,194,.18);animation-duration:7.5s;animation-direction:reverse;}
  .mobile-hero-orb span{position:absolute;inset:50%;width:58px;height:58px;margin:-29px;border-radius:18px;background:linear-gradient(135deg,#244aa7,#b64ac2);box-shadow:0 12px 34px rgba(74,50,190,.28);}
  .mobile-hero-orb span:after{content:"AI";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:900;font-size:22px;letter-spacing:.5px;}
  .mobile-hero-orb i,.mobile-hero-orb b{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 18px #8b5cf6;}
  .mobile-hero-orb i{top:26px;right:46px}.mobile-hero-orb b{bottom:34px;left:42px}
  @keyframes rhbMobileOrbSpin{to{transform:rotate(360deg)}}
  .mobile-hero-cta{display:inline-flex!important;height:52px!important;min-width:218px!important;align-items:center!important;justify-content:center!important;border-radius:18px!important;font-size:14px!important;font-weight:900!important;margin:0 auto!important;box-shadow:0 18px 42px rgba(91,67,180,.24)!important;}
  .social-side,.tech-list,.scroll-note{display:none!important;}
  .brand-strip{position:absolute!important;right:16px!important;left:16px!important;bottom:18px!important;width:auto!important;min-height:128px!important;border-radius:26px!important;background:rgba(255,255,255,.82)!important;box-shadow:0 20px 60px rgba(47,76,168,.12)!important;}
  .brand-badge{background:rgba(255,255,255,.70)!important;color:#667085!important;font-weight:700!important;}
  .brand-logos{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px 12px!important;padding:12px 16px!important;}
  .brand-logos span{display:grid!important;place-items:center!important;min-height:44px!important;}
  .brand-logos img{max-width:110px!important;max-height:44px!important;}

  /* Section rhythm */
  .section{margin-top:42px!important;}
  .services-section,.process-section{padding:54px 18px 0!important;}
  .section-copy,.services-copy,.process-copy,.projects-copy{text-align:center!important;margin-left:auto!important;margin-right:auto!important;}
  .section-copy h2,.services-copy h2,.process-copy h2,.projects-copy h2{font-size:29px!important;line-height:1.55!important;letter-spacing:-.4px!important;color:#08132f!important;}
  .section-copy p,.services-copy p,.process-copy p,.projects-copy p{font-size:13.5px!important;line-height:2.15!important;color:#667085!important;}

  /* Services as polished app cards */
  .services-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;width:100%!important;}
  .service-card{min-height:168px!important;border-radius:28px!important;padding:26px 18px!important;background:rgba(255,255,255,.58)!important;border:1px solid rgba(255,255,255,.78)!important;box-shadow:0 18px 56px rgba(47,76,168,.07)!important;}
  .service-card i{width:64px!important;height:64px!important;border-radius:22px!important;background:rgba(255,255,255,.72)!important;box-shadow:0 14px 38px rgba(47,76,168,.09)!important;}
  .service-card h3{font-size:18px!important}.service-card p{font-size:13px!important;line-height:2!important;}

  /* About mobile editorial */
  .rhb-about-section{width:calc(100% - 24px)!important;margin:48px auto 0!important;border-radius:32px!important;padding:38px 18px 24px!important;background:rgba(255,255,255,.64)!important;box-shadow:0 18px 58px rgba(47,76,168,.08)!important;}
  .rhb-about-title{font-size:30px!important;line-height:1.55!important;}
  .rhb-about-intro{font-size:13.5px!important;line-height:2.25!important;color:#47526a!important;}
  .rhb-about-feature{padding:22px 4px!important;}
  .rhb-about-feature .feature-icon{width:64px!important;height:64px!important;}
  .rhb-about-card-shell{max-width:345px!important;border-radius:26px!important;}

  /* Stats */
  .stats-panel{width:calc(100% - 36px)!important;margin:44px auto 0!important;border-radius:28px!important;overflow:hidden!important;background:linear-gradient(145deg,#07132f,#23106b 58%,#8b3fe0)!important;box-shadow:0 22px 65px rgba(32,27,115,.22)!important;}
  .stat{display:grid!important;grid-template-columns:88px 1fr auto!important;text-align:right!important;padding:16px 8px!important;min-height:92px!important;}
  .stat i{width:58px!important;height:58px!important;grid-column:1!important;grid-row:1!important;place-self:center!important;opacity:.72!important;}
  .stat small{grid-column:2!important;grid-row:1!important;align-self:center!important;font-size:14px!important;color:#fff!important;font-weight:800!important;}
  .stat strong{grid-column:3!important;grid-row:1!important;align-self:center!important;font-size:34px!important;color:#fff!important;}

  /* Process timeline */
  .steps-line{position:relative!important;display:grid!important;gap:16px!important;}
  .steps-line:after{content:"";position:absolute;top:34px;bottom:34px;right:34px;width:2px;background:linear-gradient(180deg,rgba(36,74,167,.0),rgba(36,74,167,.20),rgba(182,74,194,.0));display:block!important;}
  .step{position:relative!important;text-align:right!important;padding:22px 86px 22px 18px!important;border-radius:28px!important;background:rgba(255,255,255,.58)!important;box-shadow:0 18px 50px rgba(47,76,168,.07)!important;}
  .step div{position:absolute!important;right:16px!important;top:22px!important;width:54px!important;height:54px!important;margin:0!important;border-radius:18px!important;z-index:2!important;}
  .step b{font-size:13px!important;color:#244aa7!important;}
  .step h3{font-size:18px!important;margin-top:6px!important;line-height:1.55!important;}
  .step p{font-size:13px!important;line-height:2!important;margin:4px 0 0!important;max-width:none!important;}

  /* Projects: one full mobile story card */
  .projects-panel{width:calc(100% - 24px)!important;margin:48px auto 0!important;padding:34px 18px 24px!important;border-radius:32px!important;background:#071127!important;box-shadow:0 20px 60px rgba(5,13,35,.22)!important;}
  .projects-copy h2{font-size:30px!important;color:#fff!important;}
  .projects-copy p{color:rgba(255,255,255,.72)!important;}
  .projects-copy small{color:#c084fc!important;font-weight:900!important;}
  .projects-carousel{overflow-x:auto!important;scroll-snap-type:x mandatory!important;padding:2px 0 12px!important;margin:0!important;}
  .projects-track{display:flex!important;gap:18px!important;width:max-content!important;transform:none!important;transition:none!important;padding:0 4px!important;}
  .projects-track .project-card{flex:0 0 calc(100vw - 82px)!important;width:calc(100vw - 82px)!important;max-width:330px!important;min-height:440px!important;border-radius:26px!important;scroll-snap-align:center!important;overflow:hidden!important;}
  .project-card img{width:100%!important;height:100%!important;object-fit:cover!important;}
  .project-content{padding:20px 16px!important;text-align:center!important;}
  .project-content h3{font-size:18px!important;line-height:1.7!important;}
  .project-tag{font-size:12px!important;}

  /* CTA and footer */
  .footer-island{width:100%!important;margin-top:48px!important;padding:0 10px 18px!important;background-image:url('../img/after-hero-background.webp')!important;background-size:cover!important;background-position:center bottom!important;}
  .cta-panel{min-height:250px!important;border-radius:30px!important;padding:28px 18px!important;background-image:linear-gradient(90deg,rgba(255,255,255,.90),rgba(255,255,255,.58)),url('../img/footer-island-image.webp')!important;background-size:cover!important;background-position:31% center!important;}
  .cta-copy h2{font-size:28px!important;line-height:1.55!important;}
  .footer.rhb-footer{border-radius:30px!important;background:rgba(255,255,255,.74)!important;box-shadow:0 18px 58px rgba(47,76,168,.10)!important;}
  .footer-links,.footer-services,.footer-contact{padding-top:14px!important;border-top:1px solid rgba(47,76,168,.08)!important;}
  .back-to-top{position:fixed!important;left:18px!important;right:auto!important;bottom:18px!important;transform:none!important;width:48px!important;height:48px!important;border-radius:16px!important;z-index:80!important;}
}

@media (max-width:390px){
  .hero.panel,.hero{min-height:600px!important;padding-top:32px!important;padding-bottom:160px!important;}
  .hero-brand-logo{width:140px!important;}
  .mobile-hero-orb{width:152px;height:152px;margin:24px auto 20px;}
  .mobile-hero-cta{min-width:200px!important;height:50px!important;font-size:13px!important;}
  .section-copy h2,.services-copy h2,.process-copy h2,.projects-copy h2,.rhb-about-title{font-size:27px!important;}
  .projects-track .project-card{flex-basis:calc(100vw - 72px)!important;width:calc(100vw - 72px)!important;min-height:420px!important;}
}


/* =========================================================
   RHB Mobile Hero First Pass - v169
   Purpose: rebuild the first mobile impression without touching desktop.
   Desktop is intentionally frozen. Humanity survives one breakpoint at a time.
   ========================================================= */
.mobile-hero-headline,.mobile-hero-points{display:none;}
@media (max-width: 767px){
  html,body{overflow-x:hidden!important;}
  .page{background:#f6f3ff!important;}
  .hero-wrap{min-height:auto!important;padding:10px 10px 26px!important;background:
    radial-gradient(circle at 18% 8%,rgba(182,74,194,.18),transparent 34%),
    linear-gradient(180deg,#f8f6ff 0%,#f1eeff 100%)!important;}

  /* Header: branded, calm, app-like. */
  .header.glass{position:sticky!important;top:10px!important;z-index:999!important;display:grid!important;grid-template-columns:46px 1fr!important;align-items:center!important;gap:10px!important;width:calc(100% - 20px)!important;min-height:64px!important;margin:0 auto 12px!important;padding:8px 10px!important;border-radius:24px!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(255,255,255,.78)!important;box-shadow:0 18px 45px rgba(28,30,80,.10)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;}
  .header .brand{grid-column:2!important;justify-self:end!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;min-width:0!important;transform:none!important;}
  .header .brand-icon{width:48px!important;height:48px!important;object-fit:contain!important;filter:none!important;}
  .header .brand-copy{display:block!important;text-align:right!important;line-height:1.15!important;white-space:nowrap!important;}
  .header .brand-copy strong{display:block!important;font-size:15px!important;font-weight:950!important;color:#07112d!important;letter-spacing:0!important;}
  .header .brand-copy small{display:block!important;margin-top:2px!important;font-size:8px!important;font-weight:800!important;letter-spacing:.4px!important;color:#07112d!important;opacity:.78!important;}
  .rhb-mobile-menu-toggle{grid-column:1!important;grid-row:1!important;justify-self:start!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:5px!important;width:46px!important;height:46px!important;border-radius:17px!important;background:rgba(255,255,255,.92)!important;border:1px solid rgba(14,28,70,.10)!important;box-shadow:0 12px 26px rgba(12,20,60,.08)!important;}
  .rhb-mobile-menu-toggle span{width:19px!important;height:2px!important;background:#07112d!important;border-radius:9px!important;}
  .header .header-btn{display:none!important;}
  .header .nav{position:absolute!important;left:10px!important;right:10px!important;top:72px!important;width:auto!important;padding:16px!important;border-radius:22px!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(255,255,255,.8)!important;box-shadow:0 26px 70px rgba(12,20,60,.16)!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;opacity:0!important;pointer-events:none!important;transform:translateY(-8px)!important;transition:.24s ease!important;}
  .header.is-mobile-menu-open .nav{opacity:1!important;pointer-events:auto!important;transform:translateY(0)!important;}
  .header .nav a{height:44px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(246,244,255,.72)!important;color:#07112d!important;font-weight:850!important;font-size:13px!important;}

  /* Mobile hero: its own identity, same DNA. */
  .hero.panel{position:relative!important;overflow:hidden!important;display:block!important;min-height:calc(100svh - 102px)!important;margin:0 auto!important;padding:28px 18px 26px!important;border-radius:34px!important;background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.98) 0 20%,rgba(236,230,255,.90) 48%,rgba(213,203,255,.62) 100%),
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(238,232,255,.96))!important;border:1px solid rgba(255,255,255,.86)!important;box-shadow:0 26px 80px rgba(61,43,150,.15), inset 0 0 0 1px rgba(255,255,255,.58)!important;}
  .hero.panel:before{content:"";position:absolute;inset:12px;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.70),rgba(255,255,255,0) 46%),radial-gradient(circle at 14% 18%,rgba(123,92,246,.16),transparent 34%);pointer-events:none!important;}
  .hero.panel:after{content:"";position:absolute;width:260px;height:260px;right:-98px;top:142px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.65),rgba(132,89,255,.15) 46%,transparent 72%);filter:blur(.2px);opacity:.9;pointer-events:none!important;}
  .hero-bg{position:absolute!important;inset:0!important;background-image:url('../img/hero-final.webp')!important;background-size:cover!important;background-position:65% 45%!important;opacity:.13!important;mix-blend-mode:multiply!important;transform:scale(1.05)!important;}
  .hero-fade,.social-side,.tech-list,.scroll-note{display:none!important;}
  .hero-content{position:relative!important;z-index:2!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;}
  .hero-content .eyebrow{order:1!important;display:inline-flex!important;align-items:center!important;gap:8px!important;margin:6px auto 16px!important;color:#244aa7!important;font-size:12px!important;font-weight:850!important;letter-spacing:0!important;}
  .hero-content .eyebrow span{display:block!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#244aa7!important;box-shadow:0 0 18px rgba(75,83,230,.45)!important;}
  .hero-brand-logo{order:2!important;display:block!important;margin:0 auto 14px!important;width:auto!important;max-width:245px!important;height:auto!important;filter:none!important;}
  .hero-brand-logo img{display:block!important;width:230px!important;height:auto!important;margin:0 auto!important;object-fit:contain!important;}
  .mobile-hero-headline{order:3!important;display:block!important;margin:0 auto 14px!important;color:#07112d!important;}
  .mobile-hero-headline span,.mobile-hero-headline strong{display:block!important;line-height:1.2!important;font-weight:950!important;letter-spacing:-.6px!important;}
  .mobile-hero-headline span{font-size:25px!important;color:#244aa7!important;}
  .mobile-hero-headline strong{font-size:32px!important;color:#07112d!important;margin-top:4px!important;}
  .hero-content p{order:4!important;max-width:320px!important;margin:0 auto 18px!important;font-size:14.5px!important;line-height:2.05!important;font-weight:700!important;color:#1e2943!important;text-align:center!important;}
  .mobile-hero-points{order:5!important;display:flex!important;gap:8px!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;margin:0 auto 20px!important;}
  .mobile-hero-points span{height:30px!important;padding:0 12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:99px!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(36,74,167,.10)!important;color:#244aa7!important;font-weight:850!important;font-size:11px!important;box-shadow:0 10px 22px rgba(48,42,120,.06)!important;}
  .mobile-hero-orb{order:6!important;display:block!important;position:relative!important;width:178px!important;height:178px!important;margin:2px auto 22px!important;border-radius:50%!important;background:radial-gradient(circle at 35% 25%,#fff 0 10%,#f4edff 24%,rgba(183,74,194,.42) 48%,rgba(36,74,167,.28) 66%,transparent 70%)!important;box-shadow:0 0 0 1px rgba(255,255,255,.85),0 30px 70px rgba(100,80,220,.24),inset 0 0 48px rgba(255,255,255,.75)!important;}
  .mobile-hero-orb:before,.mobile-hero-orb:after{content:""!important;position:absolute!important;inset:14px!important;border-radius:50%!important;border:1px solid rgba(36,74,167,.14)!important;animation:rhbMobileOrbSpin 12s linear infinite!important;}
  .mobile-hero-orb:after{inset:35px!important;border-color:rgba(178,74,194,.18)!important;animation-duration:8s!important;animation-direction:reverse!important;}
  .mobile-hero-orb span{position:absolute!important;inset:50%!important;width:62px!important;height:62px!important;margin:-31px!important;border-radius:20px!important;background:linear-gradient(135deg,#244aa7,#b64ac2)!important;box-shadow:0 16px 36px rgba(77,54,190,.30)!important;}
  .mobile-hero-orb span:after{content:"AI"!important;position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;color:#fff!important;font-size:24px!important;font-weight:950!important;}
  .mobile-hero-orb i,.mobile-hero-orb b{position:absolute!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 0 20px rgba(139,92,246,.8)!important;}
  .mobile-hero-orb i{top:28px!important;right:46px!important}.mobile-hero-orb b{bottom:35px!important;left:42px!important}
  .mobile-hero-cta{order:7!important;display:inline-flex!important;width:min(100%,258px)!important;height:54px!important;align-items:center!important;justify-content:center!important;border-radius:19px!important;background:linear-gradient(135deg,#244aa7 0%,#4f63d9 48%,#b64ac2 100%)!important;color:#fff!important;font-size:14px!important;font-weight:950!important;box-shadow:0 18px 44px rgba(76,61,190,.27)!important;margin:0 auto!important;text-decoration:none!important;}

  /* Trust logos: compact support, not a second hero. */
  .brand-strip.glass{position:relative!important;z-index:2!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;width:100%!important;margin:26px auto 0!important;padding:12px!important;border-radius:24px!important;background:rgba(255,255,255,.78)!important;border:1px solid rgba(255,255,255,.82)!important;box-shadow:0 18px 42px rgba(52,44,120,.10)!important;}
  .brand-badge{height:auto!important;margin:0 0 10px!important;padding:0!important;background:transparent!important;color:#6b7280!important;font-size:12px!important;font-weight:800!important;text-align:center!important;}
  .brand-logos{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;align-items:center!important;justify-items:center!important;}
  .brand-logos span{height:54px!important;min-width:0!important;width:100%!important;border-radius:16px!important;background:rgba(255,255,255,.52)!important;display:grid!important;place-items:center!important;box-shadow:none!important;border:1px solid rgba(10,20,60,.04)!important;}
  .brand-logos img{max-width:90%!important;max-height:38px!important;object-fit:contain!important;filter:grayscale(1) contrast(.86)!important;opacity:.82!important;}
}
@media (max-width: 390px){
  .hero.panel{padding:24px 14px 22px!important;border-radius:30px!important;}
  .hero-brand-logo img{width:205px!important;}
  .mobile-hero-headline span{font-size:23px!important;}
  .mobile-hero-headline strong{font-size:29px!important;}
  .hero-content p{font-size:13.5px!important;line-height:2!important;max-width:292px!important;}
  .mobile-hero-orb{width:158px!important;height:158px!important;}
}

/* =========================================================
   FIXED170 REAL PATCH - MOBILE HERO V2 / RHB ORB
   Scope: mobile only. Desktop remains untouched.
   ========================================================= */
@media (max-width: 720px){
  body{background:#f7f8ff!important;}
  .hero-wrap{padding:86px 12px 18px!important;background:radial-gradient(circle at 50% 0%,rgba(182,74,194,.16),transparent 42%),linear-gradient(180deg,#f9faff,#f4f2ff)!important;}
  .header.glass{position:fixed!important;top:10px!important;left:12px!important;right:12px!important;z-index:999!important;height:64px!important;min-height:64px!important;padding:8px 12px!important;display:grid!important;grid-template-columns:52px 1fr!important;align-items:center!important;border-radius:24px!important;background:rgba(255,255,255,.82)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;border:1px solid rgba(255,255,255,.88)!important;box-shadow:0 18px 50px rgba(31,38,84,.12)!important;}
  .header .brand{grid-column:2!important;justify-self:end!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;margin:0!important;padding:0!important;text-decoration:none!important;}
  .header .brand-icon{width:42px!important;height:42px!important;display:block!important;}
  .header .brand-copy strong{font-size:14px!important;font-weight:950!important;color:#07112d!important;}
  .header .brand-copy small{font-size:7px!important;letter-spacing:.35px!important;color:#293655!important;opacity:.68!important;}
  .rhb-mobile-menu-toggle{grid-column:1!important;justify-self:start!important;width:44px!important;height:44px!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,240,255,.88))!important;border:1px solid rgba(36,74,167,.10)!important;box-shadow:0 12px 28px rgba(36,74,167,.11)!important;}
  .rhb-mobile-menu-toggle span{background:#07112d!important;width:18px!important;height:2px!important;border-radius:99px!important;}
  .header .nav{top:72px!important;left:0!important;right:0!important;border-radius:26px!important;padding:14px!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 26px 70px rgba(16,24,70,.18)!important;}

  .hero.panel{height:auto!important;min-height:calc(100svh - 112px)!important;border-radius:34px!important;padding:20px 16px 18px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;overflow:hidden!important;background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.94) 0 18%,rgba(229,221,255,.82) 42%,rgba(198,190,255,.54) 67%,rgba(255,255,255,.84) 100%),
    linear-gradient(180deg,#ffffff 0%,#f4f1ff 100%)!important;border:1px solid rgba(255,255,255,.92)!important;box-shadow:0 26px 80px rgba(63,54,150,.14),inset 0 0 0 1px rgba(255,255,255,.64)!important;}
  .hero.panel:before{content:""!important;position:absolute!important;inset:14px!important;border-radius:28px!important;background:
    linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,255,255,0) 48%),
    radial-gradient(circle at 18% 18%,rgba(182,74,194,.16),transparent 36%),
    radial-gradient(circle at 82% 68%,rgba(36,74,167,.14),transparent 38%)!important;pointer-events:none!important;}
  .hero.panel:after{content:""!important;position:absolute!important;left:50%!important;top:242px!important;transform:translateX(-50%)!important;width:260px!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(36,74,167,.22),rgba(182,74,194,.26),transparent)!important;box-shadow:0 0 34px rgba(120,88,245,.28)!important;}
  .hero-bg{display:none!important;}
  .hero-fade,.social-side,.tech-list,.scroll-note{display:none!important;}
  .hero-content{position:relative!important;z-index:2!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;}
  .hero-content .eyebrow{order:1!important;margin:6px 0 12px!important;display:inline-flex!important;height:34px!important;align-items:center!important;gap:8px!important;padding:0 13px!important;border-radius:99px!important;background:rgba(255,255,255,.68)!important;border:1px solid rgba(36,74,167,.10)!important;color:#244aa7!important;font-size:11px!important;font-weight:900!important;box-shadow:0 12px 26px rgba(63,54,150,.07)!important;}
  .hero-content .eyebrow span{width:7px!important;height:7px!important;border-radius:99px!important;background:#244aa7!important;box-shadow:0 0 18px rgba(36,74,167,.48)!important;}
  .hero-brand-logo{order:2!important;width:228px!important;max-width:72vw!important;margin:0 auto 8px!important;display:block!important;filter:drop-shadow(0 14px 22px rgba(7,17,45,.08))!important;}
  .hero-brand-logo img{width:100%!important;height:auto!important;display:block!important;}
  .mobile-hero-orb{order:3!important;display:grid!important;place-items:center!important;position:relative!important;width:218px!important;height:218px!important;margin:8px auto 18px!important;border-radius:50%!important;background:
    radial-gradient(circle at 35% 24%,#ffffff 0 8%,#f8f3ff 16%,rgba(219,199,255,.82) 32%,rgba(148,107,255,.54) 52%,rgba(36,74,167,.35) 68%,rgba(36,74,167,0) 73%)!important;box-shadow:0 0 0 1px rgba(255,255,255,.92),0 34px 78px rgba(95,74,220,.26),inset 0 0 60px rgba(255,255,255,.78)!important;animation:rhbMobileOrbBreathe 5.8s ease-in-out infinite!important;}
  .mobile-hero-orb:before{content:""!important;position:absolute!important;inset:10px!important;border-radius:50%!important;border:1px solid rgba(36,74,167,.20)!important;box-shadow:inset 0 0 28px rgba(255,255,255,.48)!important;animation:rhbMobileOrbSpin 13s linear infinite!important;}
  .mobile-hero-orb:after{content:""!important;position:absolute!important;inset:32px!important;border-radius:50%!important;border:1px dashed rgba(182,74,194,.30)!important;animation:rhbMobileOrbSpin 9s linear infinite reverse!important;}
  .mobile-hero-orb span{position:absolute!important;inset:50%!important;width:78px!important;height:78px!important;margin:-39px!important;border-radius:26px!important;background:linear-gradient(135deg,#244aa7 0%,#4f63d9 44%,#b64ac2 100%)!important;box-shadow:0 18px 42px rgba(76,61,190,.32),inset 0 1px 0 rgba(255,255,255,.28)!important;display:grid!important;place-items:center!important;}
  .mobile-hero-orb span:after{content:"RHB"!important;color:#fff!important;font-family:Arial,sans-serif!important;font-size:22px!important;font-weight:950!important;letter-spacing:.8px!important;}
  .mobile-hero-orb i,.mobile-hero-orb b{position:absolute!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 0 22px rgba(139,92,246,.95),0 0 44px rgba(36,74,167,.26)!important;}
  .mobile-hero-orb i{top:34px!important;right:55px!important;animation:rhbFloatNode 4.2s ease-in-out infinite!important;}
  .mobile-hero-orb b{bottom:38px!important;left:48px!important;animation:rhbFloatNode 4.6s ease-in-out infinite reverse!important;}
  .mobile-hero-headline{order:4!important;margin:0 auto 10px!important;display:block!important;}
  .mobile-hero-headline span{display:block!important;color:#244aa7!important;font-size:24px!important;line-height:1.18!important;font-weight:950!important;letter-spacing:-.35px!important;}
  .mobile-hero-headline strong{display:block!important;color:#07112d!important;font-size:34px!important;line-height:1.18!important;font-weight:950!important;letter-spacing:-.7px!important;margin-top:2px!important;}
  .hero-content p{order:5!important;max-width:326px!important;margin:0 auto 14px!important;font-size:14px!important;line-height:2!important;color:#27324a!important;font-weight:750!important;}
  .mobile-hero-points{order:6!important;display:flex!important;justify-content:center!important;gap:8px!important;flex-wrap:wrap!important;margin:0 auto 16px!important;}
  .mobile-hero-points span{height:31px!important;padding:0 12px!important;border-radius:99px!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(36,74,167,.10)!important;color:#244aa7!important;font-size:11px!important;font-weight:900!important;box-shadow:0 10px 26px rgba(63,54,150,.06)!important;}
  .mobile-hero-cta{order:7!important;display:inline-flex!important;width:min(100%,270px)!important;height:56px!important;align-items:center!important;justify-content:center!important;border-radius:20px!important;background:linear-gradient(135deg,#244aa7 0%,#4f63d9 50%,#b64ac2 100%)!important;color:#fff!important;font-size:14px!important;font-weight:950!important;text-decoration:none!important;box-shadow:0 20px 50px rgba(76,61,190,.28)!important;}
  .brand-strip.glass{position:relative!important;order:20!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;width:100%!important;margin:18px auto 0!important;padding:12px!important;border-radius:24px!important;background:rgba(255,255,255,.70)!important;border:1px solid rgba(255,255,255,.88)!important;box-shadow:0 16px 42px rgba(52,44,120,.09)!important;}
  .brand-badge{height:auto!important;padding:0!important;margin:0 0 9px!important;background:transparent!important;color:#6b7280!important;font-size:11px!important;font-weight:850!important;text-align:center!important;}
  .brand-logos{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .brand-logos span{width:100%!important;height:50px!important;border-radius:16px!important;background:rgba(255,255,255,.52)!important;display:grid!important;place-items:center!important;border:1px solid rgba(7,17,45,.04)!important;}
  .brand-logos img{max-width:88%!important;max-height:36px!important;object-fit:contain!important;filter:grayscale(1) contrast(.90)!important;opacity:.82!important;}
}
@media (max-width:390px){
  .hero-wrap{padding-left:10px!important;padding-right:10px!important;}
  .hero.panel{padding:18px 13px 16px!important;border-radius:30px!important;}
  .hero-brand-logo{width:205px!important;}
  .mobile-hero-orb{width:190px!important;height:190px!important;margin-bottom:16px!important;}
  .mobile-hero-orb span{width:68px!important;height:68px!important;margin:-34px!important;border-radius:22px!important;}
  .mobile-hero-orb span:after{font-size:19px!important;}
  .mobile-hero-headline span{font-size:22px!important;}
  .mobile-hero-headline strong{font-size:30px!important;}
  .hero-content p{max-width:292px!important;font-size:13.2px!important;}
}
@keyframes rhbMobileOrbSpin{to{transform:rotate(360deg)}}
@keyframes rhbMobileOrbBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.025)}}
@keyframes rhbFloatNode{0%,100%{transform:translate(0,0);opacity:.85}50%{transform:translate(6px,-8px);opacity:1}}

/* ============================================================
   RHB Mobile Hero v3 polish
   Scope: mobile only. Fixes header logo containment, floating glass menu,
   and replaces the old abstract orb with a neural network sphere carrying RHB.
   Desktop stays untouched.
============================================================ */
@media (max-width:760px){
  .header.glass{
    top:12px!important;left:16px!important;right:16px!important;height:66px!important;min-height:66px!important;
    padding:8px 12px!important;display:grid!important;grid-template-columns:48px 1fr!important;align-items:center!important;
    border-radius:24px!important;overflow:visible!important;background:rgba(255,255,255,.72)!important;
    -webkit-backdrop-filter:blur(28px) saturate(180%)!important;backdrop-filter:blur(28px) saturate(180%)!important;
    border:1px solid rgba(255,255,255,.82)!important;box-shadow:0 18px 52px rgba(17,25,76,.14),inset 0 1px 0 rgba(255,255,255,.72)!important;
  }
  .header .brand{
    grid-column:2!important;justify-self:end!important;display:flex!important;align-items:center!important;gap:10px!important;
    min-width:0!important;height:50px!important;max-height:50px!important;padding:0!important;margin:0!important;overflow:hidden!important;
  }
  .header .brand-icon{
    width:38px!important;height:38px!important;min-width:38px!important;flex:0 0 38px!important;object-fit:contain!important;
    display:block!important;margin:0!important;transform:none!important;filter:drop-shadow(0 8px 14px rgba(104,45,165,.15))!important;
  }
  .header .brand-copy{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;min-width:0!important;height:40px!important;line-height:1!important;transform:translateY(1px)!important;}
  .header .brand-copy strong{font-size:13.5px!important;line-height:1.15!important;white-space:nowrap!important;color:#07112d!important;font-weight:950!important;}
  .header .brand-copy small{font-size:7px!important;line-height:1.15!important;letter-spacing:.25px!important;white-space:nowrap!important;color:#07112d!important;opacity:.72!important;margin-top:2px!important;}
  .rhb-mobile-menu-toggle{
    grid-column:1!important;justify-self:start!important;width:44px!important;height:44px!important;border-radius:18px!important;
    background:rgba(255,255,255,.70)!important;border:1px solid rgba(255,255,255,.88)!important;
    -webkit-backdrop-filter:blur(22px) saturate(170%)!important;backdrop-filter:blur(22px) saturate(170%)!important;
    box-shadow:0 14px 34px rgba(17,25,76,.14),inset 0 1px 0 rgba(255,255,255,.72)!important;
  }
  .rhb-mobile-menu-toggle span{width:18px!important;height:2px!important;border-radius:99px!important;background:#07112d!important;}
  .header .header-btn{display:none!important;}
  .header .nav{
    position:fixed!important;top:88px!important;left:18px!important;right:auto!important;width:min(82vw,318px)!important;
    display:grid!important;grid-template-columns:1fr!important;gap:6px!important;padding:14px!important;border-radius:28px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(244,239,255,.56))!important;
    -webkit-backdrop-filter:blur(34px) saturate(185%)!important;backdrop-filter:blur(34px) saturate(185%)!important;
    border:1px solid rgba(255,255,255,.84)!important;box-shadow:0 30px 90px rgba(18,25,76,.22),inset 0 1px 0 rgba(255,255,255,.76)!important;
    opacity:0!important;transform:translate3d(-10px,-8px,0) scale(.985)!important;pointer-events:none!important;transition:opacity .22s ease,transform .22s ease!important;
  }
  .header.is-mobile-menu-open .nav{opacity:1!important;transform:translate3d(0,0,0) scale(1)!important;pointer-events:auto!important;}
  .header .nav a{
    min-height:44px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;padding:0 16px!important;
    border-radius:17px!important;background:rgba(255,255,255,.34)!important;border:1px solid rgba(255,255,255,.34)!important;
    color:#07112d!important;font-size:14px!important;font-weight:850!important;text-align:right!important;text-decoration:none!important;
  }
  .header .nav a:hover,.header .nav a:focus{background:rgba(36,74,167,.08)!important;}

  .hero.panel{padding-top:84px!important;}
  .mobile-hero-orb{
    order:3!important;width:236px!important;height:236px!important;margin:6px auto 18px!important;display:grid!important;place-items:center!important;
    border-radius:50%!important;background:#06133c none!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.50),0 26px 78px rgba(41,47,150,.34),0 0 90px rgba(145,84,255,.25),inset 0 0 48px rgba(255,255,255,.18)!important;
    overflow:visible!important;animation:rhbMobileNeuralBreath 6.5s ease-in-out infinite!important;
  }
  .mobile-hero-orb:before{
    content:""!important;position:absolute!important;inset:-13px!important;border-radius:50%!important;
    background:conic-gradient(from 20deg,transparent 0 12%,rgba(88,142,255,.56) 18%,transparent 29%,rgba(220,92,255,.46) 44%,transparent 60%,rgba(80,230,255,.38) 72%,transparent 100%)!important;
    -webkit-mask:radial-gradient(circle,transparent 68%,#000 70%,#000 73%,transparent 76%)!important;mask:radial-gradient(circle,transparent 68%,#000 70%,#000 73%,transparent 76%)!important;
    filter:blur(.2px) drop-shadow(0 0 16px rgba(137,90,255,.35))!important;animation:rhbMobileOrbSpin 16s linear infinite!important;
  }
  .mobile-hero-orb:after{
    content:""!important;position:absolute!important;inset:9px!important;border-radius:50%!important;
    background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.08),transparent 35%),radial-gradient(circle at 52% 49%,rgba(255,80,255,.35) 0 3%,transparent 17%),radial-gradient(circle at 46% 40%,rgba(84,179,255,.24),transparent 34%)!important;
    box-shadow:inset 0 0 35px rgba(255,255,255,.18),inset 0 0 70px rgba(103,82,255,.22)!important;pointer-events:none!important;
  }
  .mobile-hero-orb span{
    position:absolute!important;inset:50%!important;width:78px!important;height:78px!important;margin:-39px!important;border-radius:28px!important;
    background:linear-gradient(135deg,rgba(20,43,118,.86),rgba(108,76,222,.78),rgba(182,74,194,.86))!important;
    border:1px solid rgba(255,255,255,.38)!important;box-shadow:0 18px 46px rgba(21,33,128,.35),0 0 50px rgba(189,92,255,.25),inset 0 1px 0 rgba(255,255,255,.42)!important;
    display:grid!important;place-items:center!important;z-index:3!important;
  }
  .mobile-hero-orb span:after{content:"RHB"!important;color:#fff!important;font-family:Arial,sans-serif!important;font-size:21px!important;font-weight:950!important;letter-spacing:.9px!important;text-shadow:0 0 18px rgba(255,255,255,.38)!important;}
  .mobile-hero-orb i,.mobile-hero-orb b{
    position:absolute!important;width:9px!important;height:9px!important;border-radius:50%!important;background:#fff!important;z-index:4!important;
    box-shadow:0 0 16px rgba(255,255,255,.9),0 0 38px rgba(137,90,255,.9)!important;
  }
  .mobile-hero-orb i{top:36px!important;right:42px!important;animation:rhbFloatNode 4.2s ease-in-out infinite!important;}
  .mobile-hero-orb b{bottom:42px!important;left:36px!important;animation:rhbFloatNode 4.8s ease-in-out infinite reverse!important;}
}
@media (max-width:390px){
  .header.glass{left:12px!important;right:12px!important;height:62px!important;min-height:62px!important;border-radius:22px!important;}
  .header .brand-icon{width:35px!important;height:35px!important;min-width:35px!important;flex-basis:35px!important;}
  .header .brand-copy strong{font-size:12.5px!important;}
  .header .brand-copy small{font-size:6.6px!important;}
  .rhb-mobile-menu-toggle{width:42px!important;height:42px!important;}
  .mobile-hero-orb{width:206px!important;height:206px!important;}
  .mobile-hero-orb span{width:68px!important;height:68px!important;margin:-34px!important;border-radius:24px!important;}
  .mobile-hero-orb span:after{font-size:18px!important;}
}
@keyframes rhbMobileNeuralBreath{0%,100%{transform:translateY(0) scale(1);filter:saturate(1.05)}50%{transform:translateY(-6px) scale(1.025);filter:saturate(1.18)}}


/* RHB mobile neural orb v4 - HTML/CSS/SVG/Canvas, no image asset */
@media (max-width: 768px){
  .hero-content .eyebrow{margin-bottom:34px!important;}
  .hero-brand-logo{max-width:280px!important;margin-bottom:16px!important;transform:scale(.88)!important;transform-origin:center!important;}
  .mobile-hero-orb.rhb-neural-orb{order:3!important;position:relative!important;display:block!important;width:258px!important;height:258px!important;margin:2px auto 18px!important;border-radius:50%!important;background:radial-gradient(circle at 50% 50%,#071a5a 0%,#06164d 34%,#030b2e 67%,#02071d 100%)!important;box-shadow:0 0 0 1px rgba(101,180,255,.20),0 0 36px rgba(49,105,255,.35),0 0 82px rgba(169,72,255,.25),0 26px 72px rgba(7,15,60,.35)!important;overflow:visible!important;isolation:isolate!important;animation:rhbMobileNeuralBreath 6.5s ease-in-out infinite!important;contain:layout paint!important;}
  .mobile-hero-orb.rhb-neural-orb:before{content:""!important;position:absolute!important;inset:-18px!important;border-radius:50%!important;background:radial-gradient(circle,rgba(78,133,255,.20),rgba(174,73,255,.16) 34%,transparent 70%)!important;filter:blur(8px)!important;z-index:-2!important;animation:rhbOrbHaloPulse 4.8s ease-in-out infinite!important;}
  .mobile-hero-orb.rhb-neural-orb:after{content:""!important;position:absolute!important;inset:-6px!important;border-radius:50%!important;background:conic-gradient(from 25deg,transparent 0 8%,rgba(78,226,255,.72) 12%,transparent 18%,rgba(155,91,255,.70) 37%,transparent 48%,rgba(70,119,255,.70) 63%,transparent 76%,rgba(255,92,255,.48) 86%,transparent 100%)!important;-webkit-mask:radial-gradient(circle,transparent 66%,#000 70%,#000 72%,transparent 77%)!important;mask:radial-gradient(circle,transparent 66%,#000 70%,#000 72%,transparent 77%)!important;filter:drop-shadow(0 0 14px rgba(80,170,255,.7))!important;animation:rhbMobileOrbSpin 18s linear infinite!important;z-index:4!important;}
  .rhb-orb-canvas,.rhb-orb-svg{position:absolute!important;inset:-18px!important;width:calc(100% + 36px)!important;height:calc(100% + 36px)!important;display:block!important;overflow:visible!important;}
  .rhb-orb-canvas{z-index:2!important;mix-blend-mode:screen!important;opacity:.9!important;}
  .rhb-orb-svg{z-index:3!important;filter:saturate(1.22) contrast(1.05)!important;}
  .rhb-orb-deep{fill:rgba(3,10,39,.68)!important;stroke:rgba(112,190,255,.18)!important;stroke-width:1!important;}
  .rhb-orb-shell{fill:url(#rhbOrbShell)!important;stroke:rgba(174,224,255,.86)!important;stroke-width:2!important;filter:url(#rhbOrbGlow)!important;mix-blend-mode:screen!important;}
  .rhb-orb-ring{fill:none!important;stroke:rgba(120,210,255,.44)!important;stroke-width:.9!important;transform-origin:180px 180px!important;filter:url(#rhbOrbGlow)!important;}
  .rhb-orb-ring.r1{transform:rotate(-18deg);animation:rhbOrbRingOne 12s linear infinite!important;}
  .rhb-orb-ring.r2{stroke:rgba(218,86,255,.38)!important;transform:rotate(58deg);animation:rhbOrbRingTwo 9s linear infinite reverse!important;}
  .rhb-orb-line{stroke:#75c9ff!important;stroke-linecap:round!important;mix-blend-mode:screen!important;filter:drop-shadow(0 0 3px rgba(93,178,255,.62))!important;}
  .rhb-orb-line.hot{stroke:#f05dff!important;filter:drop-shadow(0 0 5px rgba(240,93,255,.85))!important;}
  .rhb-orb-pulse-lines .rhb-orb-line{stroke:#fff!important;stroke-dasharray:4 220!important;stroke-dashoffset:0!important;opacity:.72!important;animation:rhbOrbDash 3.8s linear infinite!important;}
  .rhb-orb-core-glow{fill:url(#rhbOrbCore)!important;filter:url(#rhbOrbMegaGlow)!important;animation:rhbOrbCorePulse 3.4s ease-in-out infinite!important;}
  .rhb-orb-node{fill:#dff6ff!important;stroke:#ffffff!important;stroke-width:.7!important;filter:drop-shadow(0 0 5px rgba(107,190,255,.96))!important;animation:rhbNodeBlink 3.6s ease-in-out infinite!important;transform-origin:center!important;}
  .rhb-orb-node.major{fill:url(#rhbOrbBubble)!important;stroke:rgba(226,247,255,.95)!important;stroke-width:1!important;filter:drop-shadow(0 0 8px rgba(116,208,255,.98)) drop-shadow(0 0 10px rgba(225,79,255,.42))!important;}
  .rhb-orb-bubble{fill:url(#rhbOrbBubble)!important;stroke:rgba(255,255,255,.70)!important;stroke-width:.9!important;animation:rhbBubbleFloat 5.5s ease-in-out infinite!important;transform-origin:center!important;}
  .rhb-orb-bubble:nth-child(2n){animation-duration:6.8s!important;animation-direction:reverse!important;}
  .rhb-orb-stars path{stroke:#ffffff!important;stroke-width:1.2!important;stroke-linecap:round!important;opacity:.52!important;}
  .rhb-orb-stars circle{fill:#fff!important;opacity:.96!important;}
  .rhb-orb-brand{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:62px!important;height:62px!important;border-radius:50%!important;display:grid!important;place-items:center!important;z-index:6!important;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.90),rgba(255,95,255,.78) 18%,rgba(79,99,255,.88) 48%,rgba(6,27,105,.96) 100%)!important;color:white!important;font-family:Arial,sans-serif!important;font-size:19px!important;font-weight:950!important;letter-spacing:.9px!important;text-shadow:0 0 14px rgba(255,255,255,.8)!important;border:1px solid rgba(255,255,255,.58)!important;box-shadow:0 0 26px rgba(255,83,255,.75),0 0 48px rgba(76,155,255,.42),inset 0 1px 0 rgba(255,255,255,.78)!important;}
  .mobile-hero-orb.rhb-neural-orb > span,.mobile-hero-orb.rhb-neural-orb > i,.mobile-hero-orb.rhb-neural-orb > b{display:none!important;}
}
@media (max-width:390px){.mobile-hero-orb.rhb-neural-orb{width:232px!important;height:232px!important}.rhb-orb-brand{width:56px!important;height:56px!important;font-size:17px!important}}
@keyframes rhbOrbHaloPulse{0%,100%{opacity:.65;transform:scale(.98)}50%{opacity:1;transform:scale(1.05)}}
@keyframes rhbOrbRingOne{to{transform:rotate(342deg)}}
@keyframes rhbOrbRingTwo{to{transform:rotate(-302deg)}}
@keyframes rhbOrbDash{to{stroke-dashoffset:-224}}
@keyframes rhbOrbCorePulse{0%,100%{opacity:.82;transform:scale(.92);transform-origin:180px 180px}50%{opacity:1;transform:scale(1.1)}}
@keyframes rhbNodeBlink{0%,100%{opacity:.72}45%{opacity:1}70%{opacity:.55}}
@keyframes rhbBubbleFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.06)}}

/* RHB mobile portal replacement - image based, no generated orb component */
.mobile-hero-portal{display:none;}
@media (max-width:768px){
  .mobile-hero-orb,.rhb-neural-orb{display:none!important;}
  .mobile-hero-portal{
    order:3!important;display:block!important;position:relative!important;width:min(108%,354px)!important;max-width:354px!important;
    margin:4px auto 20px!important;border-radius:30px!important;overflow:hidden!important;isolation:isolate!important;
    background:radial-gradient(circle at 50% 66%,rgba(255,255,255,.42),transparent 28%),linear-gradient(180deg,rgba(242,237,255,.28),rgba(11,20,74,.92) 44%,rgba(28,15,93,.96) 100%)!important;
    box-shadow:0 28px 82px rgba(48,47,160,.22),0 0 86px rgba(137,82,255,.20),inset 0 1px 0 rgba(255,255,255,.45)!important;
    transform:translateZ(0)!important;
  }
  .mobile-hero-portal:before{display:none!important;}
  .mobile-hero-portal:after{display:none!important;}
  .mobile-hero-portal img{display:block!important;width:100%!important;height:auto!important;border-radius:30px!important;object-fit:cover!important;filter:saturate(1.08) contrast(1.04) drop-shadow(0 18px 45px rgba(83,72,210,.24))!important;}
  .hero-content .eyebrow{order:0!important;margin-bottom:30px!important;}
  .hero-brand-logo{order:1!important;max-width:258px!important;width:258px!important;margin:0 auto 14px!important;transform:scale(.88)!important;}
  .mobile-hero-headline{order:2!important;margin:0 auto 10px!important;}
  .hero-content p{order:2!important;max-width:310px!important;margin:0 auto 14px!important;font-size:13px!important;line-height:2.05!important;color:#34405f!important;}
  .mobile-hero-points{display:none!important;}
  .mobile-hero-cta{order:4!important;margin:0 auto 2px!important;position:relative!important;z-index:5!important;}
}
@media (max-width:390px){
  .mobile-hero-portal{width:min(110%,330px)!important;margin-top:0!important;border-radius:28px!important;}
  .mobile-hero-portal img{border-radius:28px!important;}
  .hero-brand-logo{max-width:238px!important;width:238px!important;}
}

/* ============================================================
   FIX176 - Mobile Hero Portal placement correction
   Scope: mobile hero only. Matches approved portal reference layout.
============================================================ */
@media (max-width:768px){
  .header.glass{
    direction:ltr!important;
    grid-template-columns:54px minmax(0,1fr) 54px!important;
    width:calc(100% - 22px)!important;
    left:auto!important;right:auto!important;
    margin:8px auto 0!important;
    top:8px!important;
    height:66px!important;min-height:66px!important;
    padding:8px 10px!important;
    overflow:visible!important;
  }
  .header .brand{
    direction:rtl!important;
    grid-column:2!important;
    justify-self:center!important;
    align-self:center!important;
    height:50px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    overflow:visible!important;
    transform:none!important;
  }
  .header .brand-icon{
    width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;
    object-fit:contain!important;display:block!important;margin:0!important;transform:translateY(0)!important;
  }
  .header .brand-copy{
    height:auto!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
    transform:none!important;line-height:1.1!important;overflow:visible!important;
  }
  .header .brand-copy strong{font-size:13.5px!important;line-height:1.15!important;white-space:nowrap!important;}
  .header .brand-copy small{font-size:7px!important;line-height:1.1!important;margin-top:3px!important;white-space:nowrap!important;}
  .rhb-mobile-menu-toggle{grid-column:3!important;justify-self:end!important;align-self:center!important;}

  .hero.panel{
    padding:34px 18px 0!important;
    min-height:auto!important;
    overflow:hidden!important;
  }
  .hero-content{display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;}
  .hero-content .eyebrow{order:1!important;margin:0 auto 34px!important;}
  .hero-brand-logo{
    order:2!important;
    width:230px!important;max-width:72vw!important;
    margin:0 auto 4px!important;
    transform:none!important;
  }
  .mobile-hero-portal{
    order:3!important;
    display:block!important;
    width:calc(100% + 36px)!important;
    max-width:none!important;
    margin:0 -18px 0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .mobile-hero-portal:before{display:none!important;}
  .mobile-hero-portal:after{display:none!important;}
  .mobile-hero-portal img{
    width:100%!important;height:auto!important;display:block!important;border-radius:0!important;
    object-fit:cover!important;filter:saturate(1.08) contrast(1.04)!important;
  }
  .mobile-hero-after-card{
    order:4!important;
    width:calc(100% + 36px)!important;
    margin:-2px -18px 0!important;
    padding:28px 18px 30px!important;
    border-radius:34px 34px 0 0!important;
    background:linear-gradient(180deg,rgba(248,246,255,.94),rgba(245,242,255,.82))!important;
    border-top:1px solid rgba(255,255,255,.82)!important;
    box-shadow:0 -22px 55px rgba(105,87,220,.10)!important;
    text-align:center!important;
  }
  .mobile-hero-headline{display:block!important;margin:0 auto 8px!important;}
  .mobile-hero-headline span{display:block!important;color:#244aa7!important;font-size:28px!important;line-height:1.25!important;font-weight:950!important;}
  .mobile-hero-headline strong{display:block!important;color:#07112d!important;font-size:29px!important;line-height:1.25!important;font-weight:950!important;margin-top:2px!important;}
  .hero-content .mobile-hero-after-card p{
    display:block!important;max-width:330px!important;margin:0 auto!important;color:#5c6580!important;font-size:13.5px!important;line-height:2!important;font-weight:700!important;
  }
  .mobile-hero-after-card .mobile-hero-cta{display:none!important;}
  .mobile-hero-points{display:none!important;}
}
@media (max-width:390px){
  .header .brand-icon{width:39px!important;height:39px!important;min-width:39px!important;flex-basis:39px!important;}
  .header .brand-copy strong{font-size:12.5px!important;}
  .header .brand-copy small{font-size:6.4px!important;}
  .hero-brand-logo{width:218px!important;}
  .mobile-hero-headline span{font-size:26px!important;}
  .mobile-hero-headline strong{font-size:27px!important;}
}

/* ============================================================
   FIX177 - Mobile Hero source-reference placement
   Scope: mobile hero only. Uses the provided portal image as an asset.
   Desktop remains untouched.
============================================================ */
@media (max-width:768px){
  .header.glass{
    direction:ltr!important;
    grid-template-columns:56px minmax(0,1fr) 56px!important;
    align-items:center!important;
    width:calc(100% - 24px)!important;
    left:12px!important;right:12px!important;top:14px!important;margin:0 auto!important;
    height:72px!important;min-height:72px!important;
    padding:9px 10px!important;
    border-radius:30px!important;
    overflow:visible!important;
  }
  .header .brand{
    direction:rtl!important;
    grid-column:2!important;
    justify-self:center!important;align-self:center!important;
    position:relative!important;right:auto!important;left:auto!important;top:auto!important;bottom:auto!important;
    width:auto!important;min-width:0!important;max-width:100%!important;height:52px!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
    gap:10px!important;margin:0!important;padding:0!important;transform:none!important;overflow:visible!important;
  }
  .header .brand-icon{
    order:2!important;width:48px!important;height:48px!important;min-width:48px!important;flex:0 0 48px!important;
    display:block!important;object-fit:contain!important;margin:0!important;transform:none!important;
  }
  .header .brand-copy{
    order:1!important;height:auto!important;min-width:0!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1!important;transform:none!important;
  }
  .header .brand-copy strong{font-size:14px!important;line-height:1.15!important;font-weight:950!important;white-space:nowrap!important;color:#07112d!important;}
  .header .brand-copy small{font-size:7.6px!important;line-height:1.15!important;margin-top:4px!important;letter-spacing:.45px!important;white-space:nowrap!important;color:#07112d!important;opacity:.72!important;}
  .rhb-mobile-menu-toggle{
    grid-column:3!important;justify-self:end!important;align-self:center!important;position:relative!important;right:auto!important;left:auto!important;top:auto!important;
    margin:0!important;width:50px!important;height:50px!important;border-radius:20px!important;
  }

  .hero.panel{
    padding:0 18px!important;
    border-radius:32px!important;
    overflow:hidden!important;
    min-height:0!important;height:auto!important;
    background:linear-gradient(180deg,#f5f1ff 0%,#f4f0ff 38%,#f8f6ff 100%)!important;
  }
  .hero-bg{display:none!important;}
  .hero-fade{display:none!important;}
  .hero-content{
    position:relative!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;
    width:100%!important;max-width:none!important;min-height:0!important;
    padding:128px 0 0!important;margin:0 auto!important;transform:none!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;z-index:5!important;
  }
  .hero-content .eyebrow{
    order:1!important;margin:0 auto 42px!important;height:46px!important;min-width:0!important;width:auto!important;max-width:88%!important;
    padding:0 24px!important;border-radius:999px!important;font-size:14px!important;line-height:46px!important;font-weight:850!important;
    background:rgba(255,255,255,.72)!important;box-shadow:0 14px 34px rgba(72,70,170,.10),inset 0 1px 0 rgba(255,255,255,.82)!important;
  }
  .hero-brand-logo{
    order:2!important;width:min(76vw,330px)!important;max-width:330px!important;margin:0 auto -6px!important;
    transform:none!important;filter:none!important;
  }
  .hero-brand-logo img{width:100%!important;height:auto!important;display:block!important;}

  .mobile-hero-orb,.rhb-neural-orb{display:none!important;}
  .mobile-hero-portal{
    order:3!important;display:block!important;position:relative!important;
    width:calc(100% + 36px)!important;max-width:none!important;
    margin:0 -18px 0!important;border-radius:0!important;overflow:hidden!important;isolation:isolate!important;
    background:transparent!important;box-shadow:none!important;line-height:0!important;
  }
  .mobile-hero-portal:before{display:none!important;}
  .mobile-hero-portal:after{display:none!important;}
  .mobile-hero-portal img{
    width:100%!important;height:auto!important;display:block!important;border-radius:0!important;object-fit:cover!important;object-position:center top!important;
    filter:saturate(1.08) contrast(1.03)!important;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.15) 10%, #000 24%, #000 88%, transparent 100%),linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%)!important;
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.15) 10%, #000 24%, #000 88%, transparent 100%),linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%)!important;transform:translateZ(0)!important;
  }

  .mobile-hero-after-card{
    order:4!important;position:relative!important;z-index:6!important;
    width:calc(100% + 36px)!important;margin:-74px -18px 0!important;
    padding:42px 18px 30px!important;border-radius:38px 38px 0 0!important;
    background:linear-gradient(180deg,rgba(248,246,255,.96),rgba(244,240,255,.88))!important;
    border-top:1px solid rgba(255,255,255,.9)!important;
    box-shadow:0 -24px 60px rgba(79,70,180,.12),inset 0 1px 0 rgba(255,255,255,.92)!important;
    text-align:center!important;
  }
  .mobile-hero-after-card:before{
    content:"⌄"!important;position:absolute!important;left:50%!important;top:-76px!important;transform:translateX(-50%)!important;
    width:40px!important;height:40px!important;display:grid!important;place-items:center!important;color:#fff!important;font-size:38px!important;line-height:1!important;
    text-shadow:0 2px 16px rgba(20,20,80,.35)!important;z-index:8!important;font-family:Arial,sans-serif!important;font-weight:300!important;
  }
  .mobile-hero-headline{display:block!important;margin:0 auto 10px!important;text-align:center!important;}
  .mobile-hero-headline span{display:block!important;color:#2d45d8!important;font-size:30px!important;line-height:1.25!important;font-weight:950!important;letter-spacing:-.5px!important;}
  .mobile-hero-headline strong{display:none!important;}
  .hero-content .mobile-hero-after-card p{
    display:block!important;width:auto!important;max-width:340px!important;margin:0 auto 18px!important;color:#66708c!important;
    font-size:13.6px!important;line-height:2!important;font-weight:700!important;text-align:center!important;
  }
  .mobile-hero-after-card .mobile-hero-cta{display:inline-flex!important;margin:2px auto 0!important;min-height:44px!important;}
  .mobile-hero-points{display:none!important;}
  .brand-strip{position:relative!important;order:5!important;right:auto!important;left:auto!important;bottom:auto!important;width:calc(100% + 36px)!important;margin:0 -18px!important;}
}
@media (max-width:390px){
  .header.glass{height:66px!important;min-height:66px!important;border-radius:26px!important;top:12px!important;}
  .header .brand-icon{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important;}
  .header .brand-copy strong{font-size:12.8px!important;}
  .header .brand-copy small{font-size:6.7px!important;letter-spacing:.3px!important;}
  .rhb-mobile-menu-toggle{width:46px!important;height:46px!important;}
  .hero-content{padding-top:120px!important;}
  .hero-content .eyebrow{font-size:12.5px!important;height:42px!important;line-height:42px!important;margin-bottom:36px!important;padding:0 18px!important;}
  .hero-brand-logo{width:min(78vw,292px)!important;margin-bottom:-4px!important;}
  .mobile-hero-after-card{margin-top:-66px!important;padding-top:38px!important;}
  .mobile-hero-headline span{font-size:27px!important;}
  .hero-content .mobile-hero-after-card p{font-size:12.8px!important;max-width:306px!important;}
}

/* ============================================================
   FIX178 - Mobile hero precise reference corrections
   Scope: mobile only. Desktop remains untouched.
============================================================ */
@media (max-width:768px){
  /* Menu: glass only on outer panel, centered drawer, readable centered items */
  .header .nav{
    width:min(270px, calc(100vw - 56px))!important;
    max-width:min(270px, calc(100vw - 56px))!important;
    left:50%!important;
    right:auto!important;
    top:calc(100% + 12px)!important;
    transform:translate(-50%,-10px)!important;
    padding:12px!important;
    gap:7px!important;
    justify-items:stretch!important;
    align-items:center!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.58)!important;
    border:1px solid rgba(255,255,255,.76)!important;
    box-shadow:0 26px 70px rgba(30,28,90,.18), inset 0 1px 0 rgba(255,255,255,.84)!important;
    -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
    backdrop-filter:blur(22px) saturate(150%)!important;
  }
  .header.is-mobile-menu-open .nav{
    transform:translate(-50%,0)!important;
  }
  .header .nav a{
    width:100%!important;
    margin:0 auto!important;
    padding:11px 12px!important;
    text-align:center!important;
    justify-content:center!important;
    align-items:center!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.20)!important;
    border:1px solid rgba(255,255,255,.20)!important;
    color:#07112d!important;
    font-size:14px!important;
    font-weight:850!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:blur(7px)!important;
    backdrop-filter:blur(7px)!important;
  }
  .header .nav a:hover{background:rgba(255,255,255,.28)!important;}

  /* Header brand: keep real logo/copy, locked optically in center */
  .header.glass{
    grid-template-columns:56px minmax(0,1fr) 56px!important;
  }
  .header .brand{
    grid-column:2!important;
    justify-self:center!important;
    align-self:center!important;
    transform:none!important;
  }
  .header .brand-icon{transform:none!important;}

  /* Hero reference spacing: label 20px from panel top, typography 20px after label */
  .hero-content{
    padding-top:20px!important;
    overflow:visible!important;
  }
  .hero-content .eyebrow{
    margin:0 auto 20px!important;
    position:relative!important;
    z-index:8!important;
  }

  /* Brand typography: preserve asset, reduce to about half and keep above portal */
  .hero-brand-logo{
    width:min(48vw,165px)!important;
    max-width:165px!important;
    margin:0 auto 0!important;
    position:relative!important;
    z-index:9!important;
    transform:none!important;
  }
  .hero-brand-logo img{width:100%!important;height:auto!important;display:block!important;}

  /* Portal: keep exact width, move under typography with soft top fade */
  .mobile-hero-portal{
    width:calc(100% + 36px)!important;
    max-width:none!important;
    margin:-16px -18px 0!important;
    position:relative!important;
    z-index:3!important;
    overflow:hidden!important;
  }
  .mobile-hero-portal:before{display:none!important;}
  .mobile-hero-portal:after{display:none!important;}
  .mobile-hero-portal img{
    width:100%!important;
    height:auto!important;
    display:block!important;
    object-fit:cover!important;
    object-position:center top!important;
    border-radius:0!important;
    filter:saturate(1.08) contrast(1.03)!important;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.15) 10%, #000 24%, #000 88%, transparent 100%),linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%)!important;
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.15) 10%, #000 24%, #000 88%, transparent 100%),linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%)!important;
  }

  /* After hero text must begin at the end of the image, not over its middle */
  .mobile-hero-after-card{
    margin:-1px -18px 0!important;
    padding:34px 18px 30px!important;
    position:relative!important;
    z-index:7!important;
  }
  .mobile-hero-after-card:before{
    top:-62px!important;
  }
}

@media (max-width:390px){
  .hero-content{padding-top:20px!important;}
  .hero-content .eyebrow{margin-bottom:20px!important;}
  .hero-brand-logo{width:min(48vw,150px)!important;max-width:150px!important;margin-bottom:0!important;}
  .mobile-hero-portal{margin-top:-14px!important;}
  .mobile-hero-after-card{margin-top:-1px!important;padding-top:32px!important;}
}

/* ============================================================
   FIX180 - Mobile hero reference visibility, drawer readability,
   header brand match, and partners bottom spacing.
   Scope: mobile hero/header/menu only. Desktop and later sections untouched.
============================================================ */
@media (max-width:768px){
  /* Header brand typography: match desktop brand lockup proportions and spacing */
  .header .brand{
    grid-column:2!important;
    justify-self:center!important;
    align-self:center!important;
    position:relative!important;
    right:auto!important;left:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    color:#07112d!important;
    text-align:right!important;
  }
  .header .brand-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    flex:0 0 42px!important;
    object-fit:contain!important;
    margin:0!important;
    transform:none!important;
    order:0!important;
  }
  .header .brand-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    text-align:right!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    color:#07112d!important;
    order:1!important;
  }
  .header .brand-copy strong{
    display:block!important;
    font-size:16px!important;
    line-height:1.05!important;
    font-weight:950!important;
    letter-spacing:-.4px!important;
    color:#07112d!important;
    white-space:nowrap!important;
  }
  .header .brand-copy small{
    display:block!important;
    margin-top:5px!important;
    font-size:8.8px!important;
    line-height:1.05!important;
    font-weight:800!important;
    letter-spacing:.8px!important;
    direction:ltr!important;
    color:#07112d!important;
    opacity:1!important;
    white-space:nowrap!important;
  }

  /* Drawer: same size/position, much less see-through so text behind does not fight menu text */
  .header .nav{
    background:rgba(247,249,255,.94)!important;
    border-color:rgba(255,255,255,.88)!important;
    box-shadow:0 26px 72px rgba(11,18,58,.28), inset 0 1px 0 rgba(255,255,255,.92)!important;
    -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
    backdrop-filter:blur(16px) saturate(120%)!important;
  }
  .header .nav a{
    background:rgba(255,255,255,.78)!important;
    border-color:rgba(8,18,56,.08)!important;
    color:#07112d!important;
    text-shadow:none!important;
    box-shadow:0 8px 22px rgba(12,20,60,.05)!important;
  }
  .header .nav a:hover{background:rgba(255,255,255,.90)!important;}

  
/* FIX183 - reference positioning/fade */
  .mobile-hero-portal{
    margin:20px -18px 0!important;
    position:relative!important;
  }
  .mobile-hero-portal::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:0;right:0;top:0;
    height:120px!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,#f7f4ff 0%,rgba(247,244,255,.82) 25%,rgba(247,244,255,.35) 60%,rgba(247,244,255,0) 100%)!important;
    z-index:2!important;
  }
  .mobile-hero-portal::after{
    width:100%!important;
    left:0!important;
    background:
      linear-gradient(90deg,#f7f4ff 0%,rgba(247,244,255,0) 6%,rgba(247,244,255,0) 94%,#f7f4ff 100%),
      linear-gradient(180deg,rgba(20,18,78,0) 0%,rgba(242,238,255,.18) 72%,rgba(247,244,255,.45) 100%)!important;
  }

/* Reference image: keep approved width, reveal more top and bottom */
  .mobile-hero-portal{
    width:calc(100% + 36px)!important;
    max-width:none!important;
    margin:24px -18px 0!important;
    overflow:visible!important;
  }
  .mobile-hero-portal:before{display:none!important;}
  .mobile-hero-portal:after{display:none!important;}
  .mobile-hero-portal img{
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  .mobile-hero-after-card{
    margin:0 -18px 0!important;
    padding-top:28px!important;
  }
  .mobile-hero-after-card:before{top:-48px!important;}

  /* Partners strip: detach from the bottom of the hero frame */
  .hero.panel{
    padding-bottom:28px!important;
    overflow:hidden!important;
  }
  .brand-strip.glass,
  .brand-strip{
    position:relative!important;
    order:5!important;
    right:auto!important;left:auto!important;bottom:auto!important;
    width:calc(100% + 36px)!important;
    margin:18px -18px 24px!important;
  }
}

@media (max-width:390px){
  .header .brand{gap:9px!important;}
  .header .brand-icon{width:38px!important;height:38px!important;min-width:38px!important;}
  .header .brand-copy strong{font-size:14.5px!important;}
  .header .brand-copy small{font-size:7.8px!important;margin-top:4px!important;letter-spacing:.65px!important;}
  .mobile-hero-portal{margin-top:-26px!important;}
  .mobile-hero-after-card{margin-top:0!important;padding-top:26px!important;}
  .brand-strip.glass,.brand-strip{margin-bottom:24px!important;}
}

/* ============================================================
   FIX185 - Mobile hero reference seamless fade correction
   Scope: Mobile Hero reference only. Header/Menu locked, Desktop untouched.
============================================================ */
@media (max-width:768px){
  .mobile-hero-portal{
    width:calc(100% + 36px)!important;
    max-width:none!important;
    margin:28px -18px 0!important;
    position:relative!important;
    z-index:3!important;
    overflow:hidden!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    line-height:0!important;
    isolation:isolate!important;
  }
  .mobile-hero-portal img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
    border-radius:0!important;
    filter:saturate(1.08) contrast(1.03)!important;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.15) 10%, #000 24%, #000 88%, transparent 100%),linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%)!important;
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.15) 10%, #000 24%, #000 88%, transparent 100%),linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%)!important;
  }
  .mobile-hero-portal:before{display:none!important;}
  .mobile-hero-portal:after{display:none!important;}
  .mobile-hero-after-card{
    margin:-108px -18px 0!important;
    padding-top:64px!important;
    position:relative!important;
    z-index:9!important;
  }
  .mobile-hero-after-card:before{
    top:-72px!important;
    z-index:10!important;
  }
}

@media (max-width:390px){
  .mobile-hero-portal{margin-top:4px!important;}
  .mobile-hero-portal:before{height:215px!important;}
  .mobile-hero-after-card{margin-top:-98px!important;padding-top:58px!important;}
  .mobile-hero-after-card:before{top:-68px!important;}
}

/* ============================================================
   FIX189 - Mobile hero reference position correction
   Scope: Mobile Hero reference only. Header/Menu locked.
   Only move the approved reference image upward; keep fades/scale/crop unchanged.
============================================================ */
@media (max-width:768px){
  .mobile-hero-portal{
    margin-top:-22px!important;
  }
}
@media (max-width:390px){
  .mobile-hero-portal{
    margin-top:-26px!important;
  }
}

/* ============================================================
   FIX191 - Mobile hero small corrections
   Scope: Mobile Hero only. Header/Menu/Desktop and later sections locked.
============================================================ */
@media (max-width:768px){
  /* Reveal more of the lower part of the approved reference image by starting the after text lower. */
  .mobile-hero-after-card{
    margin-top:-64px!important;
    padding-top:64px!important;
  }

  /* Remove the down arrow / scroll cue that sits on the reference image. */
  .hero.panel .scroll-note,
  .hero .scroll-note,
  .scroll-note{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  /* Center the partners strip inside the hero frame instead of sticking to the right edge. */
  .hero.panel .brand-strip.glass,
  .hero.panel .brand-strip{
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:calc(100% - 0px)!important;
    max-width:100%!important;
    margin:20px auto 24px!important;
    align-self:center!important;
    justify-self:center!important;
  }
}

@media (max-width:390px){
  .mobile-hero-after-card{
    margin-top:-58px!important;
    padding-top:58px!important;
  }
  .hero.panel .brand-strip.glass,
  .hero.panel .brand-strip{
    width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
/* ============================================================
   FIX192 - Remove remaining mobile hero scroll down arrow
   Scope: Mobile Hero only. Final close of hero phase.
   Header/Menu/Fades/Reference image/Partners strip locked.
============================================================ */
@media (max-width:768px){
  .hero.panel .scroll-note,
  .hero.panel .scroll-note *,
  .hero.panel .scroll-note::before,
  .hero.panel .scroll-note::after,
  .hero.panel .mouse,
  .hero.panel .mouse::before,
  .hero.panel .mouse::after,
  .hero .scroll-note,
  .hero .scroll-note *,
  .hero .scroll-note::before,
  .hero .scroll-note::after,
  .hero .mouse,
  .hero .mouse::before,
  .hero .mouse::after,
  .scroll-note,
  .scroll-note *,
  .scroll-note::before,
  .scroll-note::after,
  .mouse,
  .mouse::before,
  .mouse::after{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    pointer-events:none!important;
    content:none!important;
    animation:none!important;
  }
}

/* ============================================================
   FIX193 - Force-hide remaining mobile hero down arrow glyph
   Scope: Mobile Hero only. Keeps header/menu/reference/fades/spacing locked.
============================================================ */
@media (max-width:768px){
  .hero.panel .mobile-hero-after-card::before,
  .hero.panel .mobile-hero-after-card:before,
  .mobile-hero-after-card::before,
  .mobile-hero-after-card:before{
    content:""!important;
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    width:0!important;
    height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
    z-index:-999!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
  }
}

/* =====================================================
   FIX194 - Mobile Services premium list redesign
   Scope: Mobile Services only. Hero/Header/Menu/Desktop locked.
   - inspired by approved 10/10 mobile direction
   - no side arrows
   - no bottom CTA added
===================================================== */
@media (max-width:720px){
  .services-section{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:24px !important;
    width:100% !important;
    margin-top:72px !important;
    padding:0 18px !important;
    min-height:auto !important;
    overflow:visible !important;
  }

  .services-copy{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    padding:0 8px !important;
    margin:0 auto !important;
  }

  .services-copy .eyebrow{
    justify-content:center !important;
    align-items:center !important;
    gap:9px !important;
    margin:0 auto 22px !important;
    font-size:13px !important;
    color:#244aa7 !important;
  }

  .services-copy .eyebrow span{
    width:10px !important;
    height:10px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#2f6bff,#b246ff) !important;
    box-shadow:0 0 16px rgba(111,61,255,.34) !important;
  }

  .services-copy h2{
    font-size:31px !important;
    line-height:1.45 !important;
    letter-spacing:-.6px !important;
    margin:0 auto 18px !important;
    color:#07112d !important;
  }

  .services-copy p{
    max-width:330px !important;
    margin:0 auto !important;
    font-size:13.2px !important;
    line-height:2.1 !important;
    color:#30384e !important;
  }

  .services-grid{
    order:2 !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    gap:14px !important;
    padding:0 !important;
    margin:4px auto 0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  .service-mesh,
  .services-grid::before,
  .services-grid::after,
  .services-grid .service-card::marker{
    display:none !important;
  }

  .services-grid .service-card,
  .service-card{
    width:100% !important;
    min-height:126px !important;
    display:grid !important;
    grid-template-columns:74px 1fr !important;
    grid-template-areas:
      "icon title"
      "icon text" !important;
    column-gap:16px !important;
    row-gap:6px !important;
    align-items:center !important;
    align-content:center !important;
    text-align:right !important;
    direction:rtl !important;
    border-radius:25px !important;
    padding:20px 20px 20px 22px !important;
    background:
      radial-gradient(circle at 84% 18%,rgba(255,255,255,.96),rgba(255,255,255,.52) 42%,rgba(255,255,255,.22) 72%),
      linear-gradient(180deg,rgba(255,255,255,.74),rgba(246,242,255,.34)) !important;
    border:1px solid rgba(255,255,255,.88) !important;
    box-shadow:
      inset 0 0 0 1px rgba(118,92,255,.10),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -24px 44px rgba(126,92,255,.055),
      0 14px 34px rgba(49,73,145,.065),
      0 0 28px rgba(255,255,255,.18) !important;
    backdrop-filter:blur(24px) saturate(170%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(170%) !important;
    overflow:hidden !important;
  }

  .service-card::before{
    content:"" !important;
    position:absolute !important;
    inset:7px !important;
    border-radius:20px !important;
    background:transparent !important;
    border:1px solid rgba(255,255,255,.78) !important;
    box-shadow:inset 0 0 30px rgba(255,255,255,.34) !important;
    pointer-events:none !important;
    z-index:1 !important;
  }

  .service-card::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:25px !important;
    background:
      linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent) 50% 0/62% 1px no-repeat,
      linear-gradient(180deg,transparent,rgba(255,255,255,.70),transparent) 100% 50%/1px 68% no-repeat,
      linear-gradient(180deg,transparent,rgba(255,255,255,.52),transparent) 0 50%/1px 52% no-repeat !important;
    filter:drop-shadow(0 0 10px rgba(255,255,255,.42)) !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  .service-card > *{
    position:relative !important;
    z-index:3 !important;
  }

  .service-card i{
    grid-area:icon !important;
    width:58px !important;
    height:58px !important;
    border-radius:18px !important;
    margin:0 !important;
    justify-self:center !important;
    align-self:center !important;
    display:grid !important;
    place-items:center !important;
    background:
      radial-gradient(circle at 35% 24%,rgba(255,255,255,.98),rgba(255,255,255,0) 54%),
      linear-gradient(135deg,rgba(111,61,255,.115),rgba(190,123,255,.055)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 12px 28px rgba(111,61,255,.09) !important;
  }

  .service-card i svg{
    width:34px !important;
    height:34px !important;
    stroke:#6536ff !important;
    stroke-width:4.15 !important;
    filter:drop-shadow(0 0 4px rgba(101,54,255,.22)) !important;
  }

  .service-card h3{
    grid-area:title !important;
    margin:0 !important;
    font-size:18px !important;
    line-height:1.45 !important;
    color:#07112d !important;
    font-weight:900 !important;
    align-self:end !important;
  }

  .service-card p{
    grid-area:text !important;
    max-width:none !important;
    margin:0 !important;
    font-size:12.9px !important;
    line-height:1.95 !important;
    color:#4f586b !important;
    align-self:start !important;
  }

  .services-section .cta-panel,
  .services-section .btn,
  .services-grid .service-arrow,
  .services-grid .card-arrow,
  .services-grid .service-card .arrow{
    display:none !important;
  }
}

/* =====================================================
   FIX195 - Mobile Stats + Process Premium Redesign
   Scope: Mobile Stats and Mobile Process only
   - Desktop, Hero, Services, About are intentionally untouched
===================================================== */
.mobile-stats-intro,
.mobile-stat-extra{
  display:none;
}

@media(max-width:720px){
  .stats-panel{
    width:calc(100% - 38px) !important;
    min-height:0 !important;
    margin:58px auto 0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
    align-items:stretch !important;
    color:#07132f !important;
    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .stats-panel::before,
  .stats-panel::after{
    display:none !important;
    content:none !important;
  }
  .mobile-stats-intro{
    display:block !important;
    grid-column:1/-1 !important;
    text-align:center !important;
    margin:0 0 18px !important;
  }
  .mobile-stats-intro .eyebrow{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:9px !important;
    color:#3157a8 !important;
    font-size:12.5px !important;
    font-weight:900 !important;
    margin:0 0 15px !important;
  }
  .mobile-stats-intro .eyebrow span{
    width:9px !important;
    height:9px !important;
    border-radius:50% !important;
    background:linear-gradient(135deg,#3157a8,#a642ff) !important;
    box-shadow:0 0 14px rgba(120,75,255,.26) !important;
  }
  .mobile-stats-intro h2{
    margin:0 0 13px !important;
    font-size:28px !important;
    line-height:1.45 !important;
    font-weight:950 !important;
    letter-spacing:-.5px !important;
    color:#07132f !important;
  }
  .mobile-stats-intro p{
    margin:0 auto !important;
    max-width:310px !important;
    color:#667085 !important;
    font-size:13px !important;
    line-height:2.05 !important;
  }
  .stats-panel .stat,
  .stats-panel .mobile-stat-extra{
    display:flex !important;
  }
  .stats-panel .stat{
    position:relative !important;
    min-height:170px !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:5px !important;
    padding:20px 10px 18px !important;
    border:1px solid rgba(255,255,255,.86) !important;
    border-left:1px solid rgba(255,255,255,.86) !important;
    border-radius:27px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.95), rgba(255,255,255,.54) 43%, rgba(250,247,255,.33) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -22px 42px rgba(125,92,255,.045),
      0 16px 44px rgba(60,68,150,.06),
      0 0 26px rgba(255,255,255,.55) !important;
    backdrop-filter:blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(150%) !important;
    overflow:hidden !important;
  }
  .stats-panel .stat::before{
    content:"" !important;
    position:absolute !important;
    inset:10px !important;
    border-radius:22px !important;
    border:1px solid rgba(255,255,255,.62) !important;
    pointer-events:none !important;
  }
  .stats-panel .stat i{
    order:1 !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    margin:0 0 9px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.45) !important;
    border:1px solid rgba(255,255,255,.78) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 10px 24px rgba(93,77,180,.08) !important;
  }
  .stats-panel .stat i svg{
    width:28px !important;
    height:28px !important;
    stroke:#6536ff !important;
    stroke-width:3.1 !important;
    filter:drop-shadow(0 0 5px rgba(101,54,255,.22)) !important;
  }
  .stats-panel .stat strong{
    order:2 !important;
    font-size:34px !important;
    line-height:1.05 !important;
    font-weight:950 !important;
    letter-spacing:-1px !important;
    color:#6a38ff !important;
    text-shadow:0 0 16px rgba(106,56,255,.12) !important;
  }
  .stats-panel .stat small{
    order:3 !important;
    display:block !important;
    margin:7px 0 0 !important;
    color:#07132f !important;
    font-size:13px !important;
    line-height:1.6 !important;
    font-weight:900 !important;
  }
  .stats-panel .stat em{
    order:4 !important;
    display:block !important;
    font-style:normal !important;
    color:#8a90a3 !important;
    font-size:10.8px !important;
    line-height:1.7 !important;
    margin-top:1px !important;
  }

  .process-section{
    display:block !important;
    width:calc(100% - 38px) !important;
    margin:62px auto 0 !important;
    padding:0 !important;
  }
  .process-copy,
  .process-intro{
    max-width:100% !important;
    text-align:center !important;
    padding:0 !important;
    margin:0 0 28px !important;
  }
  .process-copy .eyebrow,
  .process-intro .eyebrow{
    justify-content:center !important;
    margin-bottom:14px !important;
  }
  .process-copy h2,
  .process-intro h2{
    font-size:28px !important;
    line-height:1.55 !important;
    margin:0 0 12px !important;
    letter-spacing:-.5px !important;
    color:#07132f !important;
  }
  .process-copy p,
  .process-intro p{
    max-width:315px !important;
    margin:0 auto !important;
    font-size:12.8px !important;
    line-height:2.05 !important;
    color:#8a90a3 !important;
  }
  .steps-line,
  .process-timeline{
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    width:100% !important;
    padding:0 0 0 18px !important;
  }
  .steps-line::before,
  .process-timeline::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:38px !important;
    bottom:38px !important;
    left:17px !important;
    right:auto !important;
    width:2px !important;
    height:auto !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,rgba(107,56,255,.18),rgba(107,56,255,.72),rgba(107,56,255,.18)) !important;
    box-shadow:0 0 14px rgba(107,56,255,.18) !important;
    z-index:0 !important;
  }
  .steps-line::after,
  .process-timeline::after{
    display:none !important;
    content:none !important;
  }
  .step,
  .process-step{
    position:relative !important;
    min-height:118px !important;
    display:block !important;
    text-align:right !important;
    padding:24px 96px 22px 26px !important;
    border-radius:26px !important;
    background:
      linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent) 50% 0/68% 1px no-repeat,
      radial-gradient(circle at 85% 50%, rgba(255,255,255,.86), rgba(255,255,255,.45) 48%, rgba(250,247,255,.22) 100%) !important;
    border:1px solid rgba(255,255,255,.82) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -18px 40px rgba(125,92,255,.04),
      0 13px 34px rgba(60,68,150,.055),
      0 0 22px rgba(255,255,255,.42) !important;
    backdrop-filter:blur(20px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(145%) !important;
    overflow:visible !important;
    z-index:1 !important;
  }
  .step div,
  .process-icon{
    position:absolute !important;
    right:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:62px !important;
    height:62px !important;
    margin:0 !important;
    border-radius:18px !important;
    display:grid !important;
    place-items:center !important;
    background:rgba(255,255,255,.52) !important;
    border:1px solid rgba(255,255,255,.86) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 10px 24px rgba(77,74,170,.07) !important;
  }
  .step div::before,
  .process-icon::before{
    content:none !important;
    display:none !important;
  }
  .step div svg,
  .process-icon svg{
    display:block !important;
    width:32px !important;
    height:32px !important;
    fill:none !important;
    stroke:#6536ff !important;
    stroke-width:3.2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    filter:drop-shadow(0 0 5px rgba(101,54,255,.20)) !important;
  }
  .step b,
  .process-number{
    position:absolute !important;
    left:-18px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
    color:#6536ff !important;
    font-size:18px !important;
    font-weight:950 !important;
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(255,255,255,.88) !important;
    box-shadow:
      0 10px 24px rgba(80,72,170,.08),
      0 0 0 6px rgba(239,235,255,.78) !important;
    z-index:4 !important;
  }
  .step h3,
  .process-step h3{
    margin:0 0 8px !important;
    font-size:15.5px !important;
    line-height:1.55 !important;
    font-weight:950 !important;
    color:#07132f !important;
  }
  .step h3::before,
  .process-step h3::before{
    content:"" !important;
    display:inline-block !important;
    width:7px !important;
    height:7px !important;
    border-radius:50% !important;
    margin-left:8px !important;
    background:linear-gradient(135deg,#3157a8,#a642ff) !important;
    box-shadow:0 0 12px rgba(106,56,255,.25) !important;
    vertical-align:middle !important;
  }
  .step p,
  .process-step p{
    max-width:100% !important;
    margin:0 !important;
    color:#7b8194 !important;
    font-size:11.5px !important;
    line-height:1.95 !important;
  }
}

/* =====================================================
   FIX196 - Mobile Process icon size + remove hover
   Scope: Mobile Process only
   - Match reference icon box size
   - Remove process hover/scale behavior
===================================================== */
@media(max-width:720px){
  .process-section .steps-line .step .process-svg-icon,
  .process-section .steps-line .step > div,
  .process-section .steps-line .step .process-icon,
  .process-timeline .process-step .process-svg-icon,
  .process-timeline .process-step .process-icon,
  .step div,
  .process-icon,
  .process-svg-icon{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    right:18px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    border-radius:17px !important;
    margin:0 !important;
    transition:none !important;
    will-change:auto !important;
    background:rgba(255,255,255,.54) !important;
    border:1px solid rgba(255,255,255,.86) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 8px 20px rgba(77,74,170,.055) !important;
  }

  .process-section .steps-line .step .process-svg-icon svg,
  .process-section .steps-line .step > div svg,
  .process-section .steps-line .step .process-icon svg,
  .process-timeline .process-step .process-svg-icon svg,
  .process-timeline .process-step .process-icon svg,
  .step div svg,
  .process-icon svg,
  .process-svg-icon svg{
    width:28px !important;
    height:28px !important;
    stroke:#3157a8 !important;
    stroke-width:2.8 !important;
    filter:none !important;
    transition:none !important;
  }

  .process-section .steps-line .step,
  .process-timeline .process-step{
    padding-right:86px !important;
  }

  .process-section .steps-line .step:hover .process-svg-icon,
  .process-section .steps-line .step:hover > div,
  .process-section .steps-line .step:hover .process-icon,
  .process-timeline .process-step:hover .process-svg-icon,
  .process-timeline .process-step:hover .process-icon{
    transform:translateY(-50%) !important;
    opacity:1 !important;
  }

  .process-section .steps-line .step b,
  .process-section .steps-line .step:hover b,
  .process-timeline .process-step .process-number,
  .process-timeline .process-step:hover .process-number{
    transition:none !important;
    color:#3157a8 !important;
    text-shadow:none !important;
  }
}


/* FIX197 */
.process-copy{
 text-align:center!important;
 align-items:center!important;
 margin-left:auto!important;
 margin-right:auto!important;
 max-width:680px!important;
}
.process-copy .eyebrow,
.process-copy h2,
.process-copy p{
 text-align:center!important;
 margin-left:auto!important;
 margin-right:auto!important;
}
.stats-panel .stat strong{
 color:#4b3f8f!important;
 background:linear-gradient(135deg,#4b3f8f,#6c5ce7,#304b8f)!important;
 -webkit-background-clip:text!important;
 -webkit-text-fill-color:transparent!important;
}

/* =====================================================
   FIX198 - Mobile Projects single-card premium carousel
   Scope: Mobile Projects only
   - One card visible at a time
   - 4 cards rotate automatically every 5s
   - Soft side fade/blur edges
   - Desktop projects carousel untouched
===================================================== */
@media(max-width:720px){
  #projects.projects-panel{
    width:calc(100% - 36px) !important;
    margin:70px auto 0 !important;
    padding:38px 18px 44px !important;
    min-height:auto !important;
    display:block !important;
    border-radius:30px !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 50% 100%, rgba(111,61,255,.20), transparent 42%),
      linear-gradient(180deg,#071025 0%,#061026 100%) !important;
    box-shadow:0 24px 70px rgba(7,16,37,.22) !important;
  }

  #projects .projects-copy{
    max-width:100% !important;
    margin:0 auto 30px !important;
    text-align:center !important;
    justify-self:center !important;
  }

  #projects .projects-copy small,
  #projects .projects-copy h2,
  #projects .projects-copy p{
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #projects .projects-copy h2{
    font-size:34px !important;
    line-height:1.55 !important;
    margin-top:14px !important;
    margin-bottom:20px !important;
  }

  #projects .projects-copy p{
    max-width:300px !important;
    font-size:13px !important;
    line-height:2.15 !important;
    color:rgba(255,255,255,.72) !important;
  }

  #projects .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:445px !important;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:28px !important;
    isolation:isolate !important;
  }

  #projects .projects-carousel::before,
  #projects .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:54px !important;
    z-index:9 !important;
    pointer-events:none !important;
    backdrop-filter:blur(6px) !important;
    -webkit-backdrop-filter:blur(6px) !important;
  }

  #projects .projects-carousel::before{
    right:-1px !important;
    background:linear-gradient(90deg, rgba(7,16,37,0), rgba(7,16,37,.88)) !important;
  }

  #projects .projects-carousel::after{
    left:-1px !important;
    background:linear-gradient(270deg, rgba(7,16,37,0), rgba(7,16,37,.88)) !important;
  }

  #projects .projects-track{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    transform:none !important;
    transition:none !important;
    gap:0 !important;
  }

  #projects .project-card{
    position:absolute !important;
    top:0 !important;
    right:50% !important;
    width:86% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    border-radius:28px !important;
    overflow:hidden !important;
    opacity:0 !important;
    transform:translateX(50%) translateX(30px) scale(.96) !important;
    transform-origin:center center !important;
    background:#071025 !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 18px 44px rgba(0,0,0,.22),
      0 0 30px rgba(111,61,255,.18) !important;
    will-change:opacity,transform !important;
    animation:rhbProjectMobileSingle 20s cubic-bezier(.22,.78,.22,1) infinite !important;
  }

  #projects .project-card:nth-child(1){animation-delay:0s !important;}
  #projects .project-card:nth-child(2){animation-delay:5s !important;}
  #projects .project-card:nth-child(3){animation-delay:10s !important;}
  #projects .project-card:nth-child(4){animation-delay:15s !important;}

  #projects .project-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    opacity:.94 !important;
    display:block !important;
  }

  #projects .project-card::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg, rgba(2,8,24,.16) 0%, rgba(2,8,24,.02) 42%, rgba(2,8,24,.92) 100%),
      radial-gradient(circle at 50% 90%, rgba(111,61,255,.34), transparent 34%) !important;
  }

  #projects .project-card .project-content{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:18px !important;
    height:auto !important;
    z-index:3 !important;
    display:flex !important;
    flex-direction:column-reverse !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
    padding:0 !important;
    background:transparent !important;
  }

  #projects .project-card h3{
    position:static !important;
    max-width:92% !important;
    margin:0 !important;
    color:#fff !important;
    font-size:19px !important;
    font-weight:950 !important;
    line-height:1.8 !important;
    text-align:center !important;
    text-shadow:0 8px 22px rgba(0,0,0,.40) !important;
  }

  #projects .project-card .project-tag,
  #projects .project-card span{
    position:static !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:34px !important;
    padding:6px 18px !important;
    border-radius:999px !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.1 !important;
    background:rgba(111,61,255,.28) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 8px 24px rgba(111,61,255,.26) !important;
    backdrop-filter:blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
  }
}

@keyframes rhbProjectMobileSingle{
  0%,20%{
    opacity:1;
    transform:translateX(50%) translateX(0) scale(1);
    z-index:4;
  }
  24%{
    opacity:0;
    transform:translateX(50%) translateX(-34px) scale(.965);
    z-index:3;
  }
  25%,95%{
    opacity:0;
    transform:translateX(50%) translateX(34px) scale(.965);
    z-index:1;
  }
  100%{
    opacity:1;
    transform:translateX(50%) translateX(0) scale(1);
    z-index:4;
  }
}

@media(max-width:420px){
  #projects .projects-carousel{height:425px !important;}
  #projects .project-card{width:88% !important;}
  #projects .projects-carousel::before,
  #projects .projects-carousel::after{width:44px !important;}
}

/* =====================================================
   FIX 199 - Mobile projects carousel centered single card
   - one large centered project card
   - soft side fade only on container edges
   - no two-card mobile grid
   - desktop untouched
===================================================== */
@media(max-width:720px){
  #projects.projects-panel{
    width:calc(100% - 36px) !important;
    margin:70px auto 0 !important;
    padding:38px 18px 46px !important;
    min-height:auto !important;
    display:block !important;
    border-radius:30px !important;
    overflow:hidden !important;
  }

  #projects .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:452px !important;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:30px !important;
    isolation:isolate !important;
  }

  #projects .projects-carousel::before,
  #projects .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:32px !important;
    z-index:20 !important;
    pointer-events:none !important;
    backdrop-filter:blur(5px) !important;
    -webkit-backdrop-filter:blur(5px) !important;
  }

  #projects .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg, rgba(7,16,37,.92), rgba(7,16,37,.36) 44%, rgba(7,16,37,0)) !important;
  }

  #projects .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg, rgba(7,16,37,.92), rgba(7,16,37,.36) 44%, rgba(7,16,37,0)) !important;
  }

  #projects .projects-track{
    position:relative !important;
    direction:ltr !important;
    width:max-content !important;
    height:100% !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:14px !important;
    transform:translateX(0) !important;
    transition:transform 760ms cubic-bezier(.22,.61,.36,1) !important;
    will-change:transform !important;
  }

  #projects .project-card{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    flex:0 0 calc((100vw - 36px - 36px) * .88) !important;
    width:calc((100vw - 36px - 36px) * .88) !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    border-radius:28px !important;
    overflow:hidden !important;
    opacity:.45 !important;
    transform:scale(.955) !important;
    transform-origin:center center !important;
    animation:none !important;
    transition:
      opacity 760ms cubic-bezier(.22,.61,.36,1),
      transform 760ms cubic-bezier(.22,.61,.36,1),
      box-shadow 760ms cubic-bezier(.22,.61,.36,1) !important;
    background:#071025 !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 14px 34px rgba(0,0,0,.15) !important;
  }

  #projects .project-card.is-active{
    opacity:1 !important;
    transform:scale(1) !important;
    z-index:5 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 20px 48px rgba(0,0,0,.24),
      0 0 34px rgba(111,61,255,.20) !important;
  }

  #projects .project-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:.95 !important;
  }
}

@media(max-width:420px){
  #projects .projects-carousel{height:438px !important;}
  #projects .project-card{
    flex-basis:calc((100vw - 36px - 36px) * .895) !important;
    width:calc((100vw - 36px - 36px) * .895) !important;
  }
  #projects .projects-carousel::before,
  #projects .projects-carousel::after{width:28px !important;}
}


/* =====================================================
   FIX200 - Mobile Projects true single-card carousel
   Scope: Mobile Projects only
   - Independent mobile layout, no compressed multi-card row
   - One full project card active at a time
   - Tiny side previews behind container fade
   - Track transform disabled, JS only switches states
===================================================== */
@media(max-width:720px){
  #projects.projects-panel{
    width:calc(100% - 36px) !important;
    margin:70px auto 0 !important;
    padding:38px 18px 48px !important;
    display:block !important;
    overflow:hidden !important;
    border-radius:30px !important;
    background:
      radial-gradient(circle at 50% 100%, rgba(111,61,255,.18), transparent 44%),
      linear-gradient(180deg,#071025 0%,#071025 58%,#0a0f33 100%) !important;
  }

  #projects .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:450px !important;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:30px !important;
    isolation:isolate !important;
  }

  #projects .projects-track{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    transition:none !important;
    direction:rtl !important;
    gap:0 !important;
  }

  #projects .projects-carousel::before,
  #projects .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:42px !important;
    z-index:30 !important;
    pointer-events:none !important;
    -webkit-backdrop-filter:blur(7px) saturate(125%) !important;
    backdrop-filter:blur(7px) saturate(125%) !important;
  }
  #projects .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg, rgba(7,16,37,.96), rgba(7,16,37,.50) 52%, rgba(7,16,37,0)) !important;
  }
  #projects .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg, rgba(7,16,37,.96), rgba(7,16,37,.50) 52%, rgba(7,16,37,0)) !important;
  }

  #projects .projects-track .project-card,
  #projects .project-card{
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    width:88% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    flex:none !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:28px !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-50%) translateX(28px) scale(.965) !important;
    transform-origin:center center !important;
    animation:none !important;
    transition:
      opacity 760ms cubic-bezier(.22,.61,.36,1),
      transform 760ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 760ms,
      box-shadow 760ms cubic-bezier(.22,.61,.36,1) !important;
    background:#071025 !important;
    border:1px solid rgba(255,255,255,.15) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 14px 34px rgba(0,0,0,.16) !important;
    will-change:opacity,transform !important;
  }

  #projects .project-card.is-active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateX(0) scale(1) !important;
    z-index:12 !important;
    transition:
      opacity 760ms cubic-bezier(.22,.61,.36,1),
      transform 760ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s,
      box-shadow 760ms cubic-bezier(.22,.61,.36,1) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 20px 50px rgba(0,0,0,.25),
      0 0 34px rgba(111,61,255,.20) !important;
  }

  #projects .project-card.is-prev,
  #projects .project-card.is-next{
    opacity:.42 !important;
    visibility:visible !important;
    z-index:5 !important;
    transition:
      opacity 760ms cubic-bezier(.22,.61,.36,1),
      transform 760ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s !important;
  }
  #projects .project-card.is-prev{
    transform:translateX(-50%) translateX(-84%) scale(.94) !important;
  }
  #projects .project-card.is-next{
    transform:translateX(-50%) translateX(84%) scale(.94) !important;
  }

  #projects .project-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:.95 !important;
    display:block !important;
  }

  #projects .project-card .project-content{
    left:18px !important;
    right:18px !important;
    bottom:18px !important;
    z-index:4 !important;
  }
}

@media(max-width:420px){
  #projects .projects-carousel{height:438px !important;}
  #projects .projects-track .project-card,
  #projects .project-card{width:89% !important;}
  #projects .projects-carousel::before,
  #projects .projects-carousel::after{width:34px !important;}
}

/* =====================================================
   FIX201 - Mobile Projects carousel polish
   Scope: Mobile Projects only
   - stronger card/background separation
   - exact centered active card on every slide
   - quieter side previews
   - remove top haze, unify tag/title alignment
===================================================== */
@media(max-width:720px){
  #projects .projects-carousel{
    width:100% !important;
    max-width:100% !important;
    margin-inline:auto !important;
    overflow:hidden !important;
  }

  #projects .projects-track .project-card,
  #projects .project-card{
    left:50% !important;
    right:auto !important;
    width:84% !important;
    max-width:84% !important;
    transform:translateX(-50%) translateX(28px) scale(.965) !important;
    border:1px solid rgba(255,255,255,.30) !important;
    background:linear-gradient(180deg,#0b1632 0%,#060d25 100%) !important;
    box-shadow:
      0 0 0 1px rgba(134,104,255,.18),
      0 22px 58px rgba(0,0,0,.38),
      0 0 44px rgba(111,61,255,.18),
      inset 0 1px 0 rgba(255,255,255,.22) !important;
  }

  #projects .project-card.is-active{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) translateX(0) scale(1) !important;
    opacity:1 !important;
    filter:none !important;
    border-color:rgba(255,255,255,.42) !important;
    box-shadow:
      0 0 0 1px rgba(168,132,255,.28),
      0 26px 68px rgba(0,0,0,.46),
      0 0 54px rgba(126,76,255,.26),
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -42px 90px rgba(36,15,96,.16) !important;
  }

  #projects .project-card.is-prev,
  #projects .project-card.is-next{
    opacity:.28 !important;
    filter:blur(2.4px) brightness(.58) saturate(.9) !important;
    z-index:4 !important;
  }

  #projects .project-card.is-prev{
    transform:translateX(-50%) translateX(-104%) scale(.92) !important;
  }

  #projects .project-card.is-next{
    transform:translateX(-50%) translateX(104%) scale(.92) !important;
  }

  #projects .projects-carousel::before,
  #projects .projects-carousel::after{
    width:40px !important;
    z-index:28 !important;
    -webkit-backdrop-filter:blur(9px) saturate(130%) !important;
    backdrop-filter:blur(9px) saturate(130%) !important;
  }

  #projects .project-card::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    height:30% !important;
    background:linear-gradient(
      to top,
      rgba(2,7,24,.86) 0%,
      rgba(2,7,24,.46) 46%,
      rgba(2,7,24,0) 100%
    ) !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  #projects .project-card img{
    object-position:center center !important;
    opacity:.98 !important;
    filter:none !important;
  }

  #projects .project-card:nth-of-type(3) img{
    object-position:center 48% !important;
  }

  #projects .project-card:nth-of-type(4) img{
    object-position:center 50% !important;
  }

  #projects .project-card .project-content{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:24px !important;
    z-index:5 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    text-align:center !important;
    gap:8px !important;
  }

  #projects .project-card .project-content h3,
  #projects .project-card h3{
    position:static !important;
    order:2 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
    font-size:20px !important;
    line-height:1.55 !important;
    font-weight:900 !important;
    text-align:center !important;
    text-shadow:0 8px 22px rgba(0,0,0,.35) !important;
  }

  #projects .project-card .project-tag,
  #projects .project-card span.project-tag,
  #projects .project-card .project-content span{
    order:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    width:auto !important;
    max-width:92% !important;
    margin:0 !important;
    padding:7px 16px !important;
    border-radius:999px !important;
    color:#fff !important;
    font-size:13px !important;
    line-height:1 !important;
    font-weight:800 !important;
    text-align:center !important;
    background:linear-gradient(135deg,rgba(55,103,255,.58),rgba(169,65,255,.68)) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    box-shadow:0 12px 26px rgba(84,45,180,.25), inset 0 1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    visibility:visible !important;
    opacity:1 !important;
    position:static !important;
    z-index:6 !important;
  }
}

@media(max-width:420px){
  #projects .projects-track .project-card,
  #projects .project-card{
    width:84% !important;
    max-width:84% !important;
  }
  #projects .project-card.is-prev{transform:translateX(-50%) translateX(-105%) scale(.92) !important;}
  #projects .project-card.is-next{transform:translateX(-50%) translateX(105%) scale(.92) !important;}
  #projects .projects-carousel::before,
  #projects .projects-carousel::after{width:38px !important;}
}

/* =====================================================
   FIX202 - Mobile Projects real carousel geometry polish
   Scope: Mobile Projects only
   - active card must always be visually centered
   - side cards return as tiny soft previews, not removed
   - stronger separation between active card and dark background
   - unified centered tag/title with tight spacing
===================================================== */
@media(max-width:720px){
  #projects .projects-carousel{
    width:100% !important;
    height:450px !important;
    overflow:hidden !important;
    border-radius:30px !important;
  }

  #projects .projects-track{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    transform:none !important;
    transition:none !important;
  }

  #projects .projects-track .project-card,
  #projects .project-card{
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    width:82% !important;
    max-width:82% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:28px !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-50%) scale(.965) !important;
    background:linear-gradient(180deg,#101b3e 0%,#071025 100%) !important;
    border:1px solid rgba(225,232,255,.34) !important;
    outline:1px solid rgba(130,98,255,.18) !important;
    outline-offset:0 !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08),
      0 30px 70px rgba(0,0,0,.42),
      0 0 42px rgba(111,61,255,.20),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
    filter:none !important;
    transition:
      opacity 760ms cubic-bezier(.22,.61,.36,1),
      transform 760ms cubic-bezier(.22,.61,.36,1),
      filter 760ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 760ms !important;
  }

  #projects .project-card.is-active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    left:50% !important;
    transform:translateX(-50%) translateX(0) scale(1) !important;
    z-index:14 !important;
    border-color:rgba(255,255,255,.48) !important;
    outline-color:rgba(168,132,255,.30) !important;
    box-shadow:
      0 0 0 1px rgba(210,220,255,.12),
      0 32px 78px rgba(0,0,0,.52),
      0 0 58px rgba(126,76,255,.30),
      0 0 22px rgba(47,76,168,.20),
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 0 -34px 72px rgba(37,18,91,.12) !important;
    filter:none !important;
    transition:
      opacity 760ms cubic-bezier(.22,.61,.36,1),
      transform 760ms cubic-bezier(.22,.61,.36,1),
      filter 760ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s !important;
  }

  #projects .project-card.is-prev,
  #projects .project-card.is-next{
    opacity:.34 !important;
    visibility:visible !important;
    pointer-events:none !important;
    z-index:5 !important;
    filter:blur(2.8px) brightness(.58) saturate(.92) !important;
    border-color:rgba(255,255,255,.16) !important;
    box-shadow:0 16px 38px rgba(0,0,0,.30) !important;
    transition:
      opacity 760ms cubic-bezier(.22,.61,.36,1),
      transform 760ms cubic-bezier(.22,.61,.36,1),
      filter 760ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s !important;
  }

  /* Show only a slim 24px hint from each side card. */
  #projects .project-card.is-prev{
    transform:translateX(-50%) translateX(calc(-111% + 24px)) scale(.92) !important;
  }
  #projects .project-card.is-next{
    transform:translateX(-50%) translateX(calc(111% - 24px)) scale(.92) !important;
  }

  #projects .projects-carousel::before,
  #projects .projects-carousel::after{
    width:30px !important;
    z-index:28 !important;
    pointer-events:none !important;
    -webkit-backdrop-filter:blur(7px) saturate(128%) !important;
    backdrop-filter:blur(7px) saturate(128%) !important;
  }
  #projects .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg,rgba(7,16,37,.92),rgba(7,16,37,.34) 58%,rgba(7,16,37,0)) !important;
  }
  #projects .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg,rgba(7,16,37,.92),rgba(7,16,37,.34) 58%,rgba(7,16,37,0)) !important;
  }

  /* Keep only the bottom readability fade, never a top black haze. */
  #projects .project-card::after{
    content:"" !important;
    position:absolute !important;
    inset:auto 0 0 0 !important;
    height:31% !important;
    background:linear-gradient(to top,rgba(2,7,24,.84) 0%,rgba(2,7,24,.42) 48%,rgba(2,7,24,0) 100%) !important;
    z-index:2 !important;
    pointer-events:none !important;
  }

  #projects .project-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:.98 !important;
    filter:none !important;
    display:block !important;
  }

  #projects .project-card .project-content{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:24px !important;
    z-index:6 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    text-align:center !important;
    direction:rtl !important;
  }

  #projects .project-card .project-content h3,
  #projects .project-card h3{
    order:2 !important;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    color:#fff !important;
    font-size:19px !important;
    line-height:1.55 !important;
    font-weight:950 !important;
    text-shadow:0 8px 24px rgba(0,0,0,.42) !important;
  }

  #projects .project-card .project-content .project-tag,
  #projects .project-card span.project-tag,
  #projects .project-card .project-content span{
    order:1 !important;
    position:static !important;
    align-self:center !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:92% !important;
    margin:0 !important;
    padding:6px 14px !important;
    min-height:27px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    color:#fff !important;
    background:linear-gradient(135deg,rgba(47,76,168,.64),rgba(140,75,255,.72)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 10px 24px rgba(64,35,150,.24),inset 0 1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter:blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(145%) !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}

@media(max-width:420px){
  #projects .projects-track .project-card,
  #projects .project-card{
    width:82% !important;
    max-width:82% !important;
  }
  #projects .project-card.is-prev{
    transform:translateX(-50%) translateX(calc(-111% + 22px)) scale(.92) !important;
  }
  #projects .project-card.is-next{
    transform:translateX(-50%) translateX(calc(111% - 22px)) scale(.92) !important;
  }
  #projects .projects-carousel::before,
  #projects .projects-carousel::after{width:28px !important;}
}

/* =====================================================
   FIX204 - Mobile Projects rollback light polish
   Scope: Mobile Projects only
   Base: FIX202, without the heavy FIX203 blur/lag
   - Automation card active position inherits exact center
   - Side previews are visible again as slim hints
   - Smoother but lighter transition
===================================================== */
@media (max-width:720px){
  #projects .projects-carousel{
    overflow:hidden !important;
    isolation:isolate !important;
  }

  #projects .projects-track{
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  #projects .projects-track .project-card,
  #projects .project-card{
    left:50% !important;
    right:auto !important;
    width:82% !important;
    max-width:82% !important;
    transform:translate3d(-50%,0,0) scale(.965) !important;
    transform-origin:center center !important;
    will-change:transform,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    filter:none !important;
    transition:
      opacity 680ms cubic-bezier(.22,.61,.36,1),
      transform 680ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 680ms !important;
  }

  #projects .project-card.is-active,
  #projects .project-card:nth-of-type(2).is-active{
    left:50% !important;
    right:auto !important;
    transform:translate3d(-50%,0,0) scale(1) !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:14 !important;
    filter:none !important;
    transition:
      opacity 680ms cubic-bezier(.22,.61,.36,1),
      transform 680ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s !important;
  }

  #projects .project-card.is-prev,
  #projects .project-card.is-next{
    visibility:visible !important;
    opacity:.30 !important;
    z-index:5 !important;
    pointer-events:none !important;
    filter:brightness(.62) saturate(.92) !important;
    box-shadow:0 14px 32px rgba(0,0,0,.24) !important;
    transition:
      opacity 680ms cubic-bezier(.22,.61,.36,1),
      transform 680ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s !important;
  }

  #projects .project-card.is-prev{
    transform:translate3d(-50%,0,0) translateX(-97%) scale(.92) !important;
  }

  #projects .project-card.is-next{
    transform:translate3d(-50%,0,0) translateX(97%) scale(.92) !important;
  }

  #projects .projects-carousel::before,
  #projects .projects-carousel::after{
    width:16px !important;
    z-index:28 !important;
    pointer-events:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  #projects .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg,rgba(7,16,37,.86),rgba(7,16,37,.22) 62%,rgba(7,16,37,0)) !important;
  }

  #projects .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg,rgba(7,16,37,.86),rgba(7,16,37,.22) 62%,rgba(7,16,37,0)) !important;
  }
}

@media (max-width:420px){
  #projects .project-card.is-prev{
    transform:translate3d(-50%,0,0) translateX(-96%) scale(.92) !important;
  }

  #projects .project-card.is-next{
    transform:translate3d(-50%,0,0) translateX(96%) scale(.92) !important;
  }

  #projects .projects-carousel::before,
  #projects .projects-carousel::after{
    width:14px !important;
  }
}


/* =====================================================
   FIX205 - Mobile Projects clean carousel rebuild
   Scope: Mobile Projects only
   - Neutralizes stacked mobile carousel overrides
   - Active card centered by JS-calculated pixel geometry
   - Side previews visible as slim lightweight hints
   - No heavy blur/filter lag
===================================================== */
@media (max-width:720px){
  #projects.projects-panel.rhb-projects-mobile-clean{
    width:calc(100% - 36px) !important;
    margin:70px auto 0 !important;
    padding:38px 18px 44px !important;
    display:block !important;
    overflow:hidden !important;
    border-radius:30px !important;
    background:
      radial-gradient(circle at 50% 100%, rgba(111,61,255,.18), transparent 44%),
      linear-gradient(180deg,#071025 0%,#061026 100%) !important;
  }

  #projects.rhb-projects-mobile-clean .projects-copy{
    text-align:center !important;
    max-width:320px !important;
    margin:0 auto 30px !important;
  }

  #projects.rhb-projects-mobile-clean .projects-copy small,
  #projects.rhb-projects-mobile-clean .projects-copy h2,
  #projects.rhb-projects-mobile-clean .projects-copy p{
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #projects.rhb-projects-mobile-clean .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:448px !important;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:30px !important;
    isolation:isolate !important;
    contain:layout paint !important;
  }

  #projects.rhb-projects-mobile-clean .projects-track{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    transform:none !important;
    transition:none !important;
    gap:0 !important;
    direction:rtl !important;
  }

  #projects.rhb-projects-mobile-clean .projects-track .project-card{
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    width:82% !important;
    max-width:82% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    flex:none !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:28px !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#101b3e 0%,#071025 100%) !important;
    border:1px solid rgba(225,232,255,.34) !important;
    outline:1px solid rgba(130,98,255,.18) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08),
      0 30px 70px rgba(0,0,0,.42),
      0 0 42px rgba(111,61,255,.20),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    filter:none !important;
    transform:translate3d(calc(-50% + var(--rhb-project-x,0px)),0,0) scale(var(--rhb-project-scale,.94)) !important;
    transform-origin:center center !important;
    transition:
      transform 920ms cubic-bezier(.22,.61,.28,1),
      opacity 920ms cubic-bezier(.22,.61,.28,1),
      visibility 0s linear 920ms !important;
    will-change:transform,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  #projects.rhb-projects-mobile-clean .projects-track .project-card.is-active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:14 !important;
    --rhb-project-x:0px;
    --rhb-project-scale:1;
    border-color:rgba(255,255,255,.50) !important;
    outline-color:rgba(168,132,255,.30) !important;
    box-shadow:
      0 0 0 1px rgba(210,220,255,.12),
      0 32px 78px rgba(0,0,0,.52),
      0 0 58px rgba(126,76,255,.30),
      0 0 22px rgba(47,76,168,.20),
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 0 -34px 72px rgba(37,18,91,.12) !important;
    transition:
      transform 920ms cubic-bezier(.22,.61,.28,1),
      opacity 920ms cubic-bezier(.22,.61,.28,1),
      visibility 0s linear 0s !important;
  }

  #projects.rhb-projects-mobile-clean .projects-track .project-card.is-prev,
  #projects.rhb-projects-mobile-clean .projects-track .project-card.is-next{
    opacity:.34 !important;
    visibility:visible !important;
    pointer-events:none !important;
    z-index:5 !important;
    --rhb-project-scale:.92;
    filter:brightness(.66) saturate(.94) !important;
    box-shadow:0 16px 38px rgba(0,0,0,.30) !important;
    transition:
      transform 920ms cubic-bezier(.22,.61,.28,1),
      opacity 920ms cubic-bezier(.22,.61,.28,1),
      visibility 0s linear 0s !important;
  }

  #projects.rhb-projects-mobile-clean .projects-carousel::before,
  #projects.rhb-projects-mobile-clean .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:18px !important;
    z-index:30 !important;
    pointer-events:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  #projects.rhb-projects-mobile-clean .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg,rgba(7,16,37,.84),rgba(7,16,37,.18) 64%,rgba(7,16,37,0)) !important;
  }
  #projects.rhb-projects-mobile-clean .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg,rgba(7,16,37,.84),rgba(7,16,37,.18) 64%,rgba(7,16,37,0)) !important;
  }

  #projects.rhb-projects-mobile-clean .project-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:.98 !important;
    filter:none !important;
    display:block !important;
  }

  #projects.rhb-projects-mobile-clean .project-card::after{
    content:"" !important;
    position:absolute !important;
    inset:auto 0 0 0 !important;
    height:31% !important;
    background:linear-gradient(to top,rgba(2,7,24,.84) 0%,rgba(2,7,24,.42) 48%,rgba(2,7,24,0) 100%) !important;
    z-index:2 !important;
    pointer-events:none !important;
  }

  #projects.rhb-projects-mobile-clean .project-card .project-content{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:24px !important;
    z-index:6 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    text-align:center !important;
    direction:rtl !important;
    padding:0 !important;
    background:transparent !important;
  }

  #projects.rhb-projects-mobile-clean .project-card h3{
    order:2 !important;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    color:#fff !important;
    font-size:19px !important;
    line-height:1.55 !important;
    font-weight:950 !important;
    text-shadow:0 8px 24px rgba(0,0,0,.42) !important;
  }

  #projects.rhb-projects-mobile-clean .project-card .project-tag{
    order:1 !important;
    position:static !important;
    align-self:center !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:92% !important;
    margin:0 !important;
    padding:6px 14px !important;
    min-height:27px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    color:#fff !important;
    background:linear-gradient(135deg,rgba(47,76,168,.64),rgba(140,75,255,.72)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 10px 24px rgba(64,35,150,.24),inset 0 1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter:blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(145%) !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}

@media (max-width:420px){
  #projects.rhb-projects-mobile-clean .projects-carousel{height:438px !important;}
  #projects.rhb-projects-mobile-clean .projects-track .project-card{
    width:82% !important;
    max-width:82% !important;
  }
  #projects.rhb-projects-mobile-clean .projects-carousel::before,
  #projects.rhb-projects-mobile-clean .projects-carousel::after{width:16px !important;}
}


/* =====================================================
   FIX206 - Mobile Projects final alignment + clearer side peeks
   Scope: Mobile Projects only
===================================================== */
@media (max-width:720px){
  #projects.rhb-projects-mobile-clean .projects-track .project-card.is-prev,
  #projects.rhb-projects-mobile-clean .projects-track .project-card.is-next{
    opacity:.52 !important;
    --rhb-project-scale:.93 !important;
    filter:brightness(.82) saturate(1.04) contrast(1.02) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.34) !important;
  }

  #projects.rhb-projects-mobile-clean .projects-carousel::before,
  #projects.rhb-projects-mobile-clean .projects-carousel::after{
    width:12px !important;
  }

  #projects.rhb-projects-mobile-clean .projects-carousel::before{
    background:linear-gradient(90deg,rgba(7,16,37,.64),rgba(7,16,37,.10) 68%,rgba(7,16,37,0)) !important;
  }

  #projects.rhb-projects-mobile-clean .projects-carousel::after{
    background:linear-gradient(270deg,rgba(7,16,37,.64),rgba(7,16,37,.10) 68%,rgba(7,16,37,0)) !important;
  }

  #projects.rhb-projects-mobile-clean .projects-track .project-card.is-active.is-industry-ai-card{
    z-index:15 !important;
  }
}

@media (max-width:420px){
  #projects.rhb-projects-mobile-clean .projects-carousel::before,
  #projects.rhb-projects-mobile-clean .projects-carousel::after{
    width:10px !important;
  }
}


/* =====================================================
   FIX207 - Mobile Projects deterministic alignment rebuild
   Scope: Mobile Projects only
   Notes: overrides old mobile carousel geometry. No heavy blur/filter.
===================================================== */
@media (max-width:720px){
  #projects.rhb-projects-mobile-207.projects-panel{
    overflow:hidden !important;
  }

  #projects.rhb-projects-mobile-207 .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:438px !important;
    overflow:hidden !important;
    border-radius:30px !important;
    isolation:isolate !important;
    contain:layout paint !important;
  }

  #projects.rhb-projects-mobile-207 .projects-track{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    transition:none !important;
    gap:0 !important;
    direction:ltr !important;
  }

  #projects.rhb-projects-mobile-207 .projects-track .project-card{
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    width:82% !important;
    max-width:82% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    flex:none !important;
    border-radius:28px !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#101b3e 0%,#071025 100%) !important;
    border:1px solid rgba(225,232,255,.40) !important;
    outline:1px solid rgba(130,98,255,.20) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08),
      0 30px 72px rgba(0,0,0,.46),
      0 0 48px rgba(111,61,255,.22),
      inset 0 1px 0 rgba(255,255,255,.25) !important;
    filter:none !important;
    will-change:transform,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    transform-origin:center center !important;
    transition:
      transform 860ms cubic-bezier(.22,.61,.36,1),
      opacity 860ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 860ms !important;
  }

  #projects.rhb-projects-mobile-207 .projects-track .project-card.is-active{
    visibility:visible !important;
    opacity:1 !important;
    z-index:20 !important;
    pointer-events:auto !important;
    transition:
      transform 860ms cubic-bezier(.22,.61,.36,1),
      opacity 860ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s !important;
  }

  #projects.rhb-projects-mobile-207 .projects-track .project-card.is-prev,
  #projects.rhb-projects-mobile-207 .projects-track .project-card.is-next{
    visibility:visible !important;
    opacity:.58 !important;
    z-index:8 !important;
    pointer-events:none !important;
    filter:brightness(.92) saturate(1.02) contrast(1.01) !important;
    box-shadow:0 16px 40px rgba(0,0,0,.34) !important;
    transition:
      transform 860ms cubic-bezier(.22,.61,.36,1),
      opacity 860ms cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s !important;
  }

  #projects.rhb-projects-mobile-207 .projects-track .project-card.is-hidden{
    visibility:hidden !important;
    opacity:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  #projects.rhb-projects-mobile-207 .projects-carousel::before,
  #projects.rhb-projects-mobile-207 .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:9px !important;
    z-index:30 !important;
    pointer-events:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  #projects.rhb-projects-mobile-207 .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg,rgba(7,16,37,.46),rgba(7,16,37,.10) 65%,rgba(7,16,37,0)) !important;
  }

  #projects.rhb-projects-mobile-207 .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg,rgba(7,16,37,.46),rgba(7,16,37,.10) 65%,rgba(7,16,37,0)) !important;
  }

  #projects.rhb-projects-mobile-207 .project-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:.98 !important;
    filter:none !important;
  }
}

@media (max-width:420px){
  #projects.rhb-projects-mobile-207 .projects-carousel{height:432px !important;}
  #projects.rhb-projects-mobile-207 .projects-track .project-card{
    width:82% !important;
    max-width:82% !important;
  }
}

/* =====================================================
   FIX208 - Mobile Projects independent side halos
   Scope: Mobile Projects only
   Notes: side visuals are decorative halos, not prev/next cards.
===================================================== */
@media (max-width:720px){
  #projects.rhb-projects-mobile-207.rhb-projects-side-halo-208 .projects-track .project-card.is-prev,
  #projects.rhb-projects-mobile-207.rhb-projects-side-halo-208 .projects-track .project-card.is-next{
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translate3d(calc(-50% + 0px),0,0) scale(.94) !important;
  }

  #projects.rhb-projects-mobile-207.rhb-projects-side-halo-208 .projects-carousel::before,
  #projects.rhb-projects-mobile-207.rhb-projects-side-halo-208 .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:34px !important;
    bottom:34px !important;
    width:54px !important;
    z-index:9 !important;
    pointer-events:none !important;
    border-radius:999px !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    opacity:.86 !important;
  }

  #projects.rhb-projects-mobile-207.rhb-projects-side-halo-208 .projects-carousel::before{
    left:-24px !important;
    background:
      radial-gradient(ellipse at center, rgba(144,110,255,.34) 0%, rgba(88,120,255,.22) 34%, rgba(9,18,43,.22) 60%, rgba(9,18,43,0) 78%) !important;
  }

  #projects.rhb-projects-mobile-207.rhb-projects-side-halo-208 .projects-carousel::after{
    right:-24px !important;
    background:
      radial-gradient(ellipse at center, rgba(72,154,255,.30) 0%, rgba(134,90,255,.24) 36%, rgba(9,18,43,.22) 60%, rgba(9,18,43,0) 78%) !important;
  }

  #projects.rhb-projects-mobile-207.rhb-projects-side-halo-208 .projects-track .project-card.is-active{
    z-index:20 !important;
  }
}

/* =====================================================
   FIX209 - Mobile Projects expandable 2x2 grid spotlight
   Scope: Mobile Projects only
   Rest: 4 compact cards in 2x2 grid. Active: one large card + real prev/next ghost halos.
===================================================== */
@media (max-width:720px){
  #projects.rhb-projects-expand-grid-209.projects-panel{
    width:100% !important;
    margin-top:54px !important;
    grid-template-columns:1fr !important;
    padding:22px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }

  #projects.rhb-projects-expand-grid-209 .projects-copy{
    text-align:center !important;
    max-width:330px !important;
    margin:0 auto 18px !important;
  }

  #projects.rhb-projects-expand-grid-209 .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:var(--rhb-project-stage-h,430px) !important;
    overflow:hidden !important;
    border-radius:30px !important;
    isolation:isolate !important;
    contain:layout paint !important;
    background:
      radial-gradient(circle at 50% 12%,rgba(117,86,255,.18),transparent 38%),
      linear-gradient(180deg,rgba(9,18,43,.28),rgba(9,18,43,.10)) !important;
  }

  #projects.rhb-projects-expand-grid-209 .projects-track{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    transition:none !important;
    direction:ltr !important;
    gap:0 !important;
  }

  #projects.rhb-projects-expand-grid-209 .projects-track .project-card{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    width:var(--rhb-card-w,160px) !important;
    max-width:none !important;
    height:var(--rhb-card-h,205px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    flex:none !important;
    border-radius:26px !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#101b3e 0%,#071025 100%) !important;
    border:1px solid rgba(225,232,255,.38) !important;
    outline:1px solid rgba(130,98,255,.18) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.07),
      0 22px 54px rgba(0,0,0,.34),
      0 0 34px rgba(111,61,255,.14),
      inset 0 1px 0 rgba(255,255,255,.22) !important;
    opacity:var(--rhb-card-opacity,0) !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:
      translate3d(-50%,-50%,0)
      translate3d(var(--rhb-card-x,0px),var(--rhb-card-y,0px),0)
      scale(var(--rhb-card-scale,1)) !important;
    transform-origin:center center !important;
    transition:
      width 780ms cubic-bezier(.2,.74,.22,1),
      height 780ms cubic-bezier(.2,.74,.22,1),
      transform 780ms cubic-bezier(.2,.74,.22,1),
      opacity 560ms ease,
      border-color 560ms ease,
      box-shadow 560ms ease !important;
    will-change:transform,width,height,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:.98 !important;
    filter:none !important;
    display:block !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card::after{
    content:"" !important;
    position:absolute !important;
    inset:auto 0 0 0 !important;
    height:36% !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:linear-gradient(to top,rgba(2,7,24,.84) 0%,rgba(2,7,24,.34) 54%,rgba(2,7,24,0) 100%) !important;
    opacity:.82 !important;
    transition:opacity 520ms ease,height 720ms cubic-bezier(.2,.74,.22,1) !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card .project-content{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:24px !important;
    z-index:6 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    text-align:center !important;
    direction:rtl !important;
    padding:0 !important;
    background:transparent !important;
    opacity:0 !important;
    transform:translateY(8px) !important;
    transition:opacity 360ms ease 160ms, transform 480ms cubic-bezier(.2,.74,.22,1) 120ms !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card h3{
    order:2 !important;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    color:#fff !important;
    font-size:19px !important;
    line-height:1.55 !important;
    font-weight:950 !important;
    text-shadow:0 8px 24px rgba(0,0,0,.44) !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card .project-tag{
    order:1 !important;
    position:static !important;
    align-self:center !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:92% !important;
    margin:0 !important;
    padding:6px 14px !important;
    min-height:27px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    color:#fff !important;
    background:linear-gradient(135deg,rgba(47,76,168,.64),rgba(140,75,255,.72)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 10px 24px rgba(64,35,150,.24),inset 0 1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter:blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(145%) !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card.is-rhb-grid{
    filter:brightness(.82) saturate(.98) contrast(1.02) !important;
    border-color:rgba(225,232,255,.26) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.26),
      0 0 22px rgba(111,61,255,.10),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card.is-rhb-grid::after{
    height:100% !important;
    opacity:.26 !important;
    background:linear-gradient(180deg,rgba(7,16,37,.10),rgba(7,16,37,.46)) !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card.is-rhb-active{
    pointer-events:auto !important;
    filter:none !important;
    border-color:rgba(255,255,255,.52) !important;
    outline-color:rgba(168,132,255,.32) !important;
    box-shadow:
      0 0 0 1px rgba(210,220,255,.13),
      0 32px 78px rgba(0,0,0,.52),
      0 0 58px rgba(126,76,255,.30),
      0 0 22px rgba(47,76,168,.20),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card.is-rhb-active .project-content{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card.is-rhb-prevghost,
  #projects.rhb-projects-expand-grid-209 .project-card.is-rhb-nextghost{
    filter:brightness(.70) saturate(1.05) blur(3px) !important;
    border-color:rgba(225,232,255,.18) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.30),0 0 26px rgba(111,61,255,.16) !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card.is-rhb-prevghost .project-content,
  #projects.rhb-projects-expand-grid-209 .project-card.is-rhb-nextghost .project-content{
    display:none !important;
  }

  #projects.rhb-projects-expand-grid-209 .project-card.is-rhb-hidden{
    visibility:hidden !important;
  }

  #projects.rhb-projects-expand-grid-209 .projects-carousel::before,
  #projects.rhb-projects-expand-grid-209 .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:18px !important;
    z-index:30 !important;
    pointer-events:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  #projects.rhb-projects-expand-grid-209 .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg,rgba(7,16,37,.66),rgba(7,16,37,.12) 70%,rgba(7,16,37,0)) !important;
  }
  #projects.rhb-projects-expand-grid-209 .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg,rgba(7,16,37,.66),rgba(7,16,37,.12) 70%,rgba(7,16,37,0)) !important;
  }
}

@media (max-width:390px){
  #projects.rhb-projects-expand-grid-209 .project-card h3{font-size:17px !important;}
  #projects.rhb-projects-expand-grid-209 .project-card .project-tag{font-size:11px !important;padding:6px 12px !important;}
}

/* =====================================================
   FIX211 - Mobile Projects premium grid spotlight rebuild
   Scope: Mobile Projects only
   Stable 2x2 rest state + centered active card + real prev/next ghost halos.
===================================================== */
@media (max-width:720px){
  #projects.rhb-projects-spotlight-211.projects-panel{
    width:100% !important;
    margin-top:54px !important;
    grid-template-columns:1fr !important;
    padding:22px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }

  #projects.rhb-projects-spotlight-211 .projects-copy{
    text-align:center !important;
    max-width:330px !important;
    margin:0 auto 18px !important;
  }

  #projects.rhb-projects-spotlight-211 .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:var(--rhb-project-stage-h,430px) !important;
    overflow:hidden !important;
    border-radius:30px !important;
    isolation:isolate !important;
    contain:layout paint !important;
    background:
      radial-gradient(circle at 50% 12%,rgba(117,86,255,.18),transparent 38%),
      linear-gradient(180deg,rgba(9,18,43,.30),rgba(9,18,43,.10)) !important;
  }

  #projects.rhb-projects-spotlight-211 .projects-track{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    transition:none !important;
    direction:ltr !important;
    gap:0 !important;
  }

  #projects.rhb-projects-spotlight-211 .projects-track .project-card{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    width:var(--rhb-card-w,160px) !important;
    max-width:none !important;
    height:var(--rhb-card-h,205px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    flex:none !important;
    border-radius:26px !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#101b3e 0%,#071025 100%) !important;
    border:1px solid rgba(225,232,255,.40) !important;
    outline:1px solid rgba(130,98,255,.20) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.07),
      0 22px 54px rgba(0,0,0,.34),
      0 0 34px rgba(111,61,255,.14),
      inset 0 1px 0 rgba(255,255,255,.22) !important;
    opacity:var(--rhb-card-opacity,0) !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:
      translate3d(-50%,-50%,0)
      translate3d(var(--rhb-card-x,0px),var(--rhb-card-y,0px),0)
      scale(var(--rhb-card-scale,1)) !important;
    transform-origin:center center !important;
    transition:
      width 920ms cubic-bezier(.18,.74,.18,1),
      height 920ms cubic-bezier(.18,.74,.18,1),
      transform 920ms cubic-bezier(.18,.74,.18,1),
      opacity 620ms ease,
      border-color 620ms ease,
      box-shadow 620ms ease,
      filter 620ms ease !important;
    will-change:transform,width,height,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:.98 !important;
    filter:none !important;
    display:block !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card::after{
    content:"" !important;
    position:absolute !important;
    inset:auto 0 0 0 !important;
    height:38% !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:linear-gradient(to top,rgba(2,7,24,.84) 0%,rgba(2,7,24,.34) 54%,rgba(2,7,24,0) 100%) !important;
    opacity:.82 !important;
    transition:opacity 620ms ease,height 980ms cubic-bezier(.16,.78,.18,1) !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card .project-content{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:24px !important;
    z-index:6 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    text-align:center !important;
    direction:rtl !important;
    padding:0 !important;
    background:transparent !important;
    opacity:0 !important;
    transform:translateY(8px) !important;
    transition:opacity 440ms ease 260ms, transform 680ms cubic-bezier(.16,.78,.18,1) 220ms !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card h3{
    order:2 !important;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    color:#fff !important;
    font-size:18px !important;
    line-height:1.52 !important;
    font-weight:950 !important;
    text-shadow:0 8px 24px rgba(0,0,0,.44) !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card .project-tag{
    order:1 !important;
    position:static !important;
    align-self:center !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:92% !important;
    margin:0 !important;
    padding:6px 14px !important;
    min-height:27px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    color:#fff !important;
    background:linear-gradient(135deg,rgba(47,76,168,.64),rgba(140,75,255,.72)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 10px 24px rgba(64,35,150,.24),inset 0 1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter:blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(145%) !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card.is-rhb-grid{
    filter:brightness(.84) saturate(.98) contrast(1.02) !important;
    border-color:rgba(225,232,255,.28) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.26),
      0 0 22px rgba(111,61,255,.10),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card.is-rhb-grid::after{
    height:100% !important;
    opacity:.24 !important;
    background:linear-gradient(180deg,rgba(7,16,37,.08),rgba(7,16,37,.42)) !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card.is-rhb-active{
    pointer-events:auto !important;
    filter:none !important;
    border-color:rgba(255,255,255,.54) !important;
    outline-color:rgba(168,132,255,.34) !important;
    box-shadow:
      0 0 0 1px rgba(210,220,255,.14),
      0 32px 78px rgba(0,0,0,.52),
      0 0 58px rgba(126,76,255,.30),
      0 0 22px rgba(47,76,168,.20),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card.is-rhb-active .project-content{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card.is-rhb-prevghost,
  #projects.rhb-projects-spotlight-211 .project-card.is-rhb-nextghost{
    filter:brightness(.76) saturate(1.05) blur(1.2px) !important;
    border-color:rgba(225,232,255,.24) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 28px rgba(111,61,255,.20) !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card.is-rhb-prevghost .project-content,
  #projects.rhb-projects-spotlight-211 .project-card.is-rhb-nextghost .project-content{
    display:none !important;
  }

  #projects.rhb-projects-spotlight-211 .project-card.is-rhb-hidden{
    visibility:hidden !important;
  }

  #projects.rhb-projects-spotlight-211 .projects-carousel::before,
  #projects.rhb-projects-spotlight-211 .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:18px !important;
    z-index:40 !important;
    pointer-events:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  #projects.rhb-projects-spotlight-211 .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg,rgba(7,16,37,.58),rgba(7,16,37,.10) 70%,rgba(7,16,37,0)) !important;
  }

  #projects.rhb-projects-spotlight-211 .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg,rgba(7,16,37,.58),rgba(7,16,37,.10) 70%,rgba(7,16,37,0)) !important;
  }
}

@media (max-width:390px){
  #projects.rhb-projects-spotlight-211 .project-card h3{font-size:16.5px !important;line-height:1.5 !important;}
  #projects.rhb-projects-spotlight-211 .project-card .project-tag{font-size:11px !important;padding:6px 12px !important;}
}

/* =====================================================
   FIX212 - Mobile Projects stage breathing + stable ghosts
   Scope: Mobile Projects only
   - fixes top clipping in grid/active states
   - keeps active cards centered with deterministic JS vars
   - makes prev/next ghost halos actually visible
   - keeps animation, increases active hold via JS
===================================================== */
@media (max-width:720px){
  #projects.rhb-projects-spotlight-212.projects-panel{
    width:100% !important;
    margin-top:54px !important;
    grid-template-columns:1fr !important;
    padding:24px 22px 30px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }

  #projects.rhb-projects-spotlight-212 .projects-copy{
    text-align:center !important;
    max-width:330px !important;
    margin:0 auto 18px !important;
  }

  #projects.rhb-projects-spotlight-212 .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:var(--rhb-project-stage-h,520px) !important;
    overflow:hidden !important;
    padding-top:0 !important;
    border-radius:30px !important;
    isolation:isolate !important;
    contain:layout paint !important;
    background:
      radial-gradient(circle at 50% 6%,rgba(117,86,255,.18),transparent 36%),
      linear-gradient(180deg,rgba(9,18,43,.30),rgba(9,18,43,.10)) !important;
  }

  #projects.rhb-projects-spotlight-212 .projects-track{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    transition:none !important;
    direction:ltr !important;
    gap:0 !important;
    overflow:visible !important;
  }

  #projects.rhb-projects-spotlight-212 .projects-track .project-card{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    width:var(--rhb-card-w,160px) !important;
    max-width:none !important;
    height:var(--rhb-card-h,205px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    flex:none !important;
    border-radius:26px !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#101b3e 0%,#071025 100%) !important;
    border:1px solid rgba(225,232,255,.42) !important;
    outline:1px solid rgba(130,98,255,.22) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.07),
      0 22px 54px rgba(0,0,0,.34),
      0 0 34px rgba(111,61,255,.14),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
    opacity:var(--rhb-card-opacity,0) !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:
      translate3d(-50%,-50%,0)
      translate3d(var(--rhb-card-x,0px),var(--rhb-card-y,0px),0)
      scale(var(--rhb-card-scale,1)) !important;
    transform-origin:center center !important;
    transition:
      width 1180ms cubic-bezier(.16,.78,.18,1),
      height 1180ms cubic-bezier(.16,.78,.18,1),
      transform 1180ms cubic-bezier(.16,.78,.18,1),
      opacity 640ms ease,
      border-color 640ms ease,
      box-shadow 640ms ease !important;
    will-change:transform,width,height,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:.98 !important;
    filter:none !important;
    display:block !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card::after{
    content:"" !important;
    position:absolute !important;
    inset:auto 0 0 0 !important;
    height:38% !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:linear-gradient(to top,rgba(2,7,24,.84) 0%,rgba(2,7,24,.34) 54%,rgba(2,7,24,0) 100%) !important;
    opacity:.82 !important;
    transition:opacity 620ms ease,height 980ms cubic-bezier(.16,.78,.18,1) !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card .project-content{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:24px !important;
    z-index:6 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    text-align:center !important;
    direction:rtl !important;
    padding:0 !important;
    background:transparent !important;
    opacity:0 !important;
    transform:translateY(8px) !important;
    transition:opacity 440ms ease 260ms, transform 680ms cubic-bezier(.16,.78,.18,1) 220ms !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card h3{
    order:2 !important;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    color:#fff !important;
    font-size:18px !important;
    line-height:1.52 !important;
    font-weight:950 !important;
    text-shadow:0 8px 24px rgba(0,0,0,.44) !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card .project-tag{
    order:1 !important;
    position:static !important;
    align-self:center !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:92% !important;
    margin:0 !important;
    padding:6px 14px !important;
    min-height:27px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    color:#fff !important;
    background:linear-gradient(135deg,rgba(47,76,168,.64),rgba(140,75,255,.72)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 10px 24px rgba(64,35,150,.24),inset 0 1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter:blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(145%) !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card.is-rhb-grid{
    filter:brightness(.86) saturate(.98) contrast(1.02) !important;
    border-color:rgba(225,232,255,.30) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.26),
      0 0 22px rgba(111,61,255,.10),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card.is-rhb-grid::after{
    height:100% !important;
    opacity:.24 !important;
    background:linear-gradient(180deg,rgba(7,16,37,.08),rgba(7,16,37,.42)) !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card.is-rhb-active{
    pointer-events:auto !important;
    filter:none !important;
    border-color:rgba(255,255,255,.56) !important;
    outline-color:rgba(168,132,255,.36) !important;
    box-shadow:
      0 0 0 1px rgba(210,220,255,.14),
      0 32px 78px rgba(0,0,0,.52),
      0 0 58px rgba(126,76,255,.30),
      0 0 22px rgba(47,76,168,.20),
      inset 0 1px 0 rgba(255,255,255,.32) !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card.is-rhb-active .project-content{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card.is-rhb-prevghost,
  #projects.rhb-projects-spotlight-212 .project-card.is-rhb-nextghost{
    filter:brightness(.82) saturate(1.08) blur(.5px) !important;
    border-color:rgba(225,232,255,.28) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 28px rgba(111,61,255,.22) !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card.is-rhb-prevghost .project-content,
  #projects.rhb-projects-spotlight-212 .project-card.is-rhb-nextghost .project-content{
    display:none !important;
  }

  #projects.rhb-projects-spotlight-212 .project-card.is-rhb-hidden{
    visibility:hidden !important;
  }

  #projects.rhb-projects-spotlight-212 .projects-carousel::before,
  #projects.rhb-projects-spotlight-212 .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:14px !important;
    z-index:40 !important;
    pointer-events:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  #projects.rhb-projects-spotlight-212 .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg,rgba(7,16,37,.42),rgba(7,16,37,.08) 70%,rgba(7,16,37,0)) !important;
  }

  #projects.rhb-projects-spotlight-212 .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg,rgba(7,16,37,.42),rgba(7,16,37,.08) 70%,rgba(7,16,37,0)) !important;
  }
}

@media (max-width:390px){
  #projects.rhb-projects-spotlight-212 .project-card h3{font-size:16.5px !important;line-height:1.5 !important;}
  #projects.rhb-projects-spotlight-212 .project-card .project-tag{font-size:11px !important;padding:6px 12px !important;}
}


/* =====================================================
   FIX214 - Mobile Projects stable anchor + smoother transitions
   Scope: Mobile Projects only
   - fixes top clipping in grid/active states
   - keeps active cards centered with deterministic JS vars
   - makes prev/next ghost halos actually visible
   - keeps animation, increases active hold via JS
===================================================== */
@media (max-width:720px){
  #projects.rhb-projects-spotlight-214.projects-panel{
    width:100% !important;
    margin-top:54px !important;
    grid-template-columns:1fr !important;
    padding:24px 22px 30px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }

  #projects.rhb-projects-spotlight-214 .projects-copy{
    text-align:center !important;
    max-width:330px !important;
    margin:0 auto 18px !important;
  }

  #projects.rhb-projects-spotlight-214 .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:var(--rhb-project-stage-h,520px) !important;
    overflow:hidden !important;
    padding-top:0 !important;
    border-radius:30px !important;
    isolation:isolate !important;
    contain:layout paint !important;
    background:
      radial-gradient(circle at 50% 6%,rgba(117,86,255,.18),transparent 36%),
      linear-gradient(180deg,rgba(9,18,43,.30),rgba(9,18,43,.10)) !important;
  }

  #projects.rhb-projects-spotlight-214 .projects-track{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    transition:none !important;
    direction:ltr !important;
    gap:0 !important;
    overflow:visible !important;
  }

  #projects.rhb-projects-spotlight-214 .projects-track .project-card{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    width:var(--rhb-card-w,160px) !important;
    max-width:none !important;
    height:var(--rhb-card-h,205px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    flex:none !important;
    border-radius:26px !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#101b3e 0%,#071025 100%) !important;
    border:1px solid rgba(225,232,255,.42) !important;
    outline:1px solid rgba(130,98,255,.22) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.07),
      0 22px 54px rgba(0,0,0,.34),
      0 0 34px rgba(111,61,255,.14),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
    opacity:var(--rhb-card-opacity,0) !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:
      translate3d(-50%,-50%,0)
      translate3d(var(--rhb-card-x,0px),var(--rhb-card-y,0px),0)
      scale(var(--rhb-card-scale,1)) !important;
    transform-origin:center center !important;
    transition:
      width 1520ms cubic-bezier(.18,.74,.16,1),
      height 1520ms cubic-bezier(.18,.74,.16,1),
      transform 1520ms cubic-bezier(.18,.74,.16,1),
      opacity 760ms ease,
      border-color 760ms ease,
      box-shadow 760ms ease !important;
    will-change:transform,width,height,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:.98 !important;
    filter:none !important;
    display:block !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card::after{
    content:"" !important;
    position:absolute !important;
    inset:auto 0 0 0 !important;
    height:38% !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:linear-gradient(to top,rgba(2,7,24,.84) 0%,rgba(2,7,24,.34) 54%,rgba(2,7,24,0) 100%) !important;
    opacity:.82 !important;
    transition:opacity 620ms ease,height 980ms cubic-bezier(.16,.78,.18,1) !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card .project-content{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:24px !important;
    z-index:6 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    text-align:center !important;
    direction:rtl !important;
    padding:0 !important;
    background:transparent !important;
    opacity:0 !important;
    transform:translateY(8px) !important;
    transition:opacity 440ms ease 260ms, transform 680ms cubic-bezier(.16,.78,.18,1) 220ms !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card h3{
    order:2 !important;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    color:#fff !important;
    font-size:18px !important;
    line-height:1.52 !important;
    font-weight:950 !important;
    text-shadow:0 8px 24px rgba(0,0,0,.44) !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card .project-tag{
    order:1 !important;
    position:static !important;
    align-self:center !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:92% !important;
    margin:0 !important;
    padding:6px 14px !important;
    min-height:27px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    color:#fff !important;
    background:linear-gradient(135deg,rgba(47,76,168,.64),rgba(140,75,255,.72)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 10px 24px rgba(64,35,150,.24),inset 0 1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter:blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(145%) !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card.is-rhb-grid{
    filter:brightness(.86) saturate(.98) contrast(1.02) !important;
    border-color:rgba(225,232,255,.30) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.26),
      0 0 22px rgba(111,61,255,.10),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card.is-rhb-grid::after{
    height:100% !important;
    opacity:.24 !important;
    background:linear-gradient(180deg,rgba(7,16,37,.08),rgba(7,16,37,.42)) !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card.is-rhb-active{
    pointer-events:auto !important;
    filter:none !important;
    border-color:rgba(255,255,255,.56) !important;
    outline-color:rgba(168,132,255,.36) !important;
    box-shadow:
      0 0 0 1px rgba(210,220,255,.14),
      0 32px 78px rgba(0,0,0,.52),
      0 0 58px rgba(126,76,255,.30),
      0 0 22px rgba(47,76,168,.20),
      inset 0 1px 0 rgba(255,255,255,.32) !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card.is-rhb-active .project-content{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card.is-rhb-prevghost,
  #projects.rhb-projects-spotlight-214 .project-card.is-rhb-nextghost{
    filter:brightness(.82) saturate(1.08) blur(.5px) !important;
    border-color:rgba(225,232,255,.28) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 28px rgba(111,61,255,.22) !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card.is-rhb-prevghost .project-content,
  #projects.rhb-projects-spotlight-214 .project-card.is-rhb-nextghost .project-content{
    display:none !important;
  }

  #projects.rhb-projects-spotlight-214 .project-card.is-rhb-hidden{
    visibility:hidden !important;
  }

  #projects.rhb-projects-spotlight-214 .projects-carousel::before,
  #projects.rhb-projects-spotlight-214 .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:14px !important;
    z-index:40 !important;
    pointer-events:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  #projects.rhb-projects-spotlight-214 .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg,rgba(7,16,37,.42),rgba(7,16,37,.08) 70%,rgba(7,16,37,0)) !important;
  }

  #projects.rhb-projects-spotlight-214 .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg,rgba(7,16,37,.42),rgba(7,16,37,.08) 70%,rgba(7,16,37,0)) !important;
  }
}

@media (max-width:390px){
  #projects.rhb-projects-spotlight-214 .project-card h3{font-size:16.5px !important;line-height:1.5 !important;}
  #projects.rhb-projects-spotlight-214 .project-card .project-tag{font-size:11px !important;padding:6px 12px !important;}
}

/* =====================================================
   FIX215 - Mobile Projects unified animation stabilizer
   Scope: Mobile Projects only
   - transform-only grid/active transition to remove double lag
   - keeps FIX214 ghosts unchanged
===================================================== */
@media (max-width:720px){
  #projects.rhb-projects-spotlight-215 .projects-carousel{
    overflow:hidden !important;
    contain:paint !important;
  }

  #projects.rhb-projects-spotlight-215 .projects-track .project-card{
    transition:
      transform 1880ms cubic-bezier(.16,.78,.14,1),
      opacity 860ms ease,
      border-color 760ms ease,
      box-shadow 760ms ease,
      filter 760ms ease !important;
    will-change:transform,opacity !important;
    transform-origin:center center !important;
  }

  #projects.rhb-projects-spotlight-215 .project-card .project-content{
    transition:opacity 520ms ease 360ms, transform 860ms cubic-bezier(.16,.78,.14,1) 300ms !important;
  }

  #projects.rhb-projects-spotlight-215.is-grid-phase .project-card .project-content,
  #projects.rhb-projects-spotlight-215.is-activating-phase .project-card:not(.is-rhb-active) .project-content{
    opacity:0 !important;
    transform:translateY(8px) !important;
  }

  #projects.rhb-projects-spotlight-215 .project-card.is-rhb-hidden{
    visibility:visible !important;
    pointer-events:none !important;
  }
}

/* =====================================================
   FIX216 - Mobile Projects deep isolated stage rebuild
   Scope: Mobile Projects only
   - Original desktop/mobile track is hidden only under this class.
   - The animated mobile experience uses an isolated fixed stage.
   - Card motion is transform/opacity only to avoid reflow, jump, and lag.
===================================================== */
@media (max-width:720px){
  #projects.rhb-projects-spotlight-216.projects-panel{
    width:100% !important;
    margin-top:54px !important;
    grid-template-columns:1fr !important;
    padding:24px 22px 34px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }

  #projects.rhb-projects-spotlight-216 .projects-copy{
    text-align:center !important;
    max-width:330px !important;
    margin:0 auto 18px !important;
  }

  #projects.rhb-projects-spotlight-216 .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:var(--rhb-project-stage-h,558px) !important;
    overflow:hidden !important;
    border-radius:30px !important;
    isolation:isolate !important;
    contain:paint !important;
    background:
      radial-gradient(circle at 50% 7%,rgba(117,86,255,.18),transparent 37%),
      linear-gradient(180deg,rgba(9,18,43,.30),rgba(9,18,43,.10)) !important;
  }

  #projects.rhb-projects-spotlight-216 .projects-track{
    display:none !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage216{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    direction:ltr !important;
    overflow:hidden !important;
    transform:translateZ(0) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage216.is-rhb-no-transition .rhb-project-stage-card{
    transition:none !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    width:var(--rhb-card-w,338px) !important;
    max-width:none !important;
    height:var(--rhb-card-h,460px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    flex:none !important;
    border-radius:26px !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#101b3e 0%,#071025 100%) !important;
    border:1px solid rgba(225,232,255,.42) !important;
    outline:1px solid rgba(130,98,255,.22) !important;
    opacity:var(--rhb-card-opacity,0) !important;
    pointer-events:none !important;
    transform:
      translate3d(-50%,-50%,0)
      translate3d(var(--rhb-card-x,0px),var(--rhb-card-y,0px),0)
      scale(var(--rhb-card-scale,1)) !important;
    transform-origin:center center !important;
    transition:
      transform var(--rhb-transition-ms,2050ms) cubic-bezier(.16,.82,.12,1),
      opacity 920ms ease,
      border-color 900ms ease,
      box-shadow 900ms ease,
      filter 900ms ease !important;
    will-change:transform,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    filter:none !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.07),
      0 22px 54px rgba(0,0,0,.34),
      0 0 34px rgba(111,61,255,.14),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:.98 !important;
    filter:none !important;
    display:block !important;
    transform:translateZ(0) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card::after{
    content:"" !important;
    position:absolute !important;
    inset:auto 0 0 0 !important;
    height:38% !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:linear-gradient(to top,rgba(2,7,24,.84) 0%,rgba(2,7,24,.34) 54%,rgba(2,7,24,0) 100%) !important;
    opacity:.82 !important;
    transition:opacity 760ms ease,height 1200ms cubic-bezier(.16,.82,.12,1) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card .project-content{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:24px !important;
    z-index:6 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    text-align:center !important;
    direction:rtl !important;
    padding:0 !important;
    background:transparent !important;
    opacity:0 !important;
    visibility:visible !important;
    transform:translateY(10px) !important;
    transition:opacity 620ms ease, transform 900ms cubic-bezier(.16,.82,.12,1) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card h3{
    order:2 !important;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    color:#fff !important;
    font-size:18px !important;
    line-height:1.52 !important;
    font-weight:950 !important;
    text-shadow:0 8px 24px rgba(0,0,0,.44) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card .project-tag{
    order:1 !important;
    position:static !important;
    align-self:center !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:92% !important;
    margin:0 !important;
    padding:6px 14px !important;
    min-height:27px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    color:#fff !important;
    background:linear-gradient(135deg,rgba(47,76,168,.64),rgba(140,75,255,.72)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 10px 24px rgba(64,35,150,.24),inset 0 1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter:blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(145%) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card.is-rhb-grid{
    filter:brightness(.86) saturate(.98) contrast(1.02) !important;
    border-color:rgba(225,232,255,.30) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.26),
      0 0 22px rgba(111,61,255,.10),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card.is-rhb-grid::after{
    height:100% !important;
    opacity:.24 !important;
    background:linear-gradient(180deg,rgba(7,16,37,.08),rgba(7,16,37,.42)) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card.is-rhb-active{
    pointer-events:auto !important;
    filter:none !important;
    border-color:rgba(255,255,255,.56) !important;
    outline-color:rgba(168,132,255,.36) !important;
    box-shadow:
      0 0 0 1px rgba(210,220,255,.14),
      0 32px 78px rgba(0,0,0,.52),
      0 0 58px rgba(126,76,255,.30),
      0 0 22px rgba(47,76,168,.20),
      inset 0 1px 0 rgba(255,255,255,.32) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card.is-rhb-active-ready .project-content{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card.is-rhb-prevghost,
  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card.is-rhb-nextghost{
    filter:brightness(.82) saturate(1.08) blur(.5px) !important;
    border-color:rgba(225,232,255,.28) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 28px rgba(111,61,255,.22) !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card.is-rhb-prevghost .project-content,
  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card.is-rhb-nextghost .project-content{
    display:none !important;
  }

  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card.is-rhb-hidden{
    visibility:visible !important;
    opacity:0 !important;
  }

  #projects.rhb-projects-spotlight-216 .projects-carousel::before,
  #projects.rhb-projects-spotlight-216 .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:14px !important;
    z-index:80 !important;
    pointer-events:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  #projects.rhb-projects-spotlight-216 .projects-carousel::before{
    left:0 !important;
    background:linear-gradient(90deg,rgba(7,16,37,.42),rgba(7,16,37,.08) 70%,rgba(7,16,37,0)) !important;
  }

  #projects.rhb-projects-spotlight-216 .projects-carousel::after{
    right:0 !important;
    background:linear-gradient(270deg,rgba(7,16,37,.42),rgba(7,16,37,.08) 70%,rgba(7,16,37,0)) !important;
  }
}

@media (max-width:390px){
  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card h3{font-size:16.5px !important;line-height:1.5 !important;}
  #projects.rhb-projects-spotlight-216 .rhb-project-stage-card .project-tag{font-size:11px !important;padding:6px 12px !important;}
}

/* =====================================================
   FIX217 - Mobile Projects active card visibility + stable stage
   Scope: Mobile Projects only
   - replaces FIX216 class with a cleaner isolated stage
   - active card image stays visible
   - overlay is bottom-only in active mode
   - no layout properties are animated
===================================================== */
@media (max-width:760px){
  #projects.rhb-projects-spotlight-217.projects-panel{
    width:100% !important;
    margin-top:54px !important;
    grid-template-columns:1fr !important;
    padding:24px 22px 34px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }

  #projects.rhb-projects-spotlight-217 .projects-copy{
    text-align:center !important;
    max-width:330px !important;
    margin:0 auto 18px !important;
  }

  #projects.rhb-projects-spotlight-217 .projects-carousel{
    position:relative !important;
    width:100% !important;
    height:var(--rhb-project-stage-h,550px) !important;
    overflow:hidden !important;
    border-radius:30px !important;
    isolation:isolate !important;
    contain:paint !important;
    background:radial-gradient(circle at 50% 8%,rgba(117,86,255,.18),transparent 38%),linear-gradient(180deg,rgba(9,18,43,.28),rgba(9,18,43,.10)) !important;
  }

  #projects.rhb-projects-spotlight-217 .projects-track{
    display:none !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage217{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    direction:ltr !important;
    overflow:hidden !important;
    transform:translateZ(0) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage217.is-no-transition .rhb-project-stage-card217{
    transition:none !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    width:var(--rhb-card-w,320px) !important;
    height:var(--rhb-card-h,435px) !important;
    min-height:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    flex:none !important;
    border-radius:26px !important;
    overflow:hidden !important;
    background:#071025 !important;
    border:1px solid rgba(225,232,255,.42) !important;
    outline:1px solid rgba(130,98,255,.22) !important;
    pointer-events:none !important;
    opacity:var(--rhb-card-opacity,0) !important;
    transform:translate3d(-50%,-50%,0) translate3d(var(--rhb-card-x,0px),var(--rhb-card-y,0px),0) scale(var(--rhb-card-scale,1)) !important;
    transform-origin:center center !important;
    transition:transform var(--rhb-transition-ms,1900ms) cubic-bezier(.18,.78,.16,1),opacity 760ms ease,border-color 760ms ease,box-shadow 760ms ease !important;
    will-change:transform,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    filter:none !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.07),0 22px 54px rgba(0,0,0,.34),0 0 34px rgba(111,61,255,.14),inset 0 1px 0 rgba(255,255,255,.24) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217 img{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:1 !important;
    visibility:visible !important;
    display:block !important;
    filter:none !important;
    transform:translateZ(0) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:40% !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:linear-gradient(to top,rgba(2,7,24,.86) 0%,rgba(2,7,24,.36) 54%,rgba(2,7,24,0) 100%) !important;
    opacity:.82 !important;
    transition:opacity 760ms ease,height 760ms ease,background 760ms ease !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217 .project-content{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:24px !important;
    z-index:6 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    text-align:center !important;
    direction:rtl !important;
    padding:0 !important;
    background:transparent !important;
    opacity:0 !important;
    visibility:visible !important;
    transform:translateY(9px) !important;
    transition:opacity 520ms ease,transform 760ms cubic-bezier(.18,.78,.16,1) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217 h3{
    order:2 !important;
    position:static !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    color:#fff !important;
    font-size:18px !important;
    line-height:1.52 !important;
    font-weight:950 !important;
    text-shadow:0 8px 24px rgba(0,0,0,.44) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217 .project-tag{
    order:1 !important;
    position:static !important;
    align-self:center !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:92% !important;
    margin:0 !important;
    padding:6px 14px !important;
    min-height:27px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    color:#fff !important;
    background:linear-gradient(135deg,rgba(47,76,168,.64),rgba(140,75,255,.72)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 10px 24px rgba(64,35,150,.24),inset 0 1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter:blur(10px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(145%) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217.is-grid{
    filter:none !important;
    border-color:rgba(225,232,255,.30) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.26),0 0 22px rgba(111,61,255,.10),inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217.is-grid::after{
    height:100% !important;
    opacity:.28 !important;
    background:linear-gradient(180deg,rgba(7,16,37,.08),rgba(7,16,37,.46)) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217.is-active{
    pointer-events:auto !important;
    filter:none !important;
    border-color:rgba(255,255,255,.58) !important;
    outline-color:rgba(168,132,255,.36) !important;
    box-shadow:0 0 0 1px rgba(210,220,255,.14),0 32px 78px rgba(0,0,0,.52),0 0 58px rgba(126,76,255,.30),0 0 22px rgba(47,76,168,.20),inset 0 1px 0 rgba(255,255,255,.32) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217.is-active img{
    opacity:1 !important;
    visibility:visible !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217.is-active .project-content{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217.is-prevghost,
  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217.is-nextghost{
    filter:brightness(.84) saturate(1.07) !important;
    border-color:rgba(225,232,255,.28) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 28px rgba(111,61,255,.22) !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217.is-prevghost .project-content,
  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217.is-nextghost .project-content{
    display:none !important;
  }

  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217.is-hidden{
    opacity:0 !important;
    visibility:visible !important;
  }

  #projects.rhb-projects-spotlight-217 .projects-carousel::before,
  #projects.rhb-projects-spotlight-217 .projects-carousel::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:12px !important;
    z-index:80 !important;
    pointer-events:none !important;
  }
  #projects.rhb-projects-spotlight-217 .projects-carousel::before{left:0 !important;background:linear-gradient(90deg,rgba(7,16,37,.35),rgba(7,16,37,0)) !important;}
  #projects.rhb-projects-spotlight-217 .projects-carousel::after{right:0 !important;background:linear-gradient(270deg,rgba(7,16,37,.35),rgba(7,16,37,0)) !important;}
}

@media (max-width:390px){
  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217 h3{font-size:16.5px !important;line-height:1.5 !important;}
  #projects.rhb-projects-spotlight-217 .rhb-project-stage-card217 .project-tag{font-size:11px !important;padding:6px 12px !important;}
}


/* =====================================================
   FIX218 - Mobile Projects automation vertical placement + ghost layer
   Scope: Mobile Projects only
   Base: FIX217
   - do not change other active cards
   - fix automation card vertical clipping/placement only
   - keep ghosts visually the same but behind active card
===================================================== */
@media (max-width:760px){
  #projects.rhb-projects-spotlight-218 .rhb-project-stage-card217.is-active{
    z-index:70 !important;
  }

  #projects.rhb-projects-spotlight-218 .rhb-project-stage-card217.is-prevghost,
  #projects.rhb-projects-spotlight-218 .rhb-project-stage-card217.is-nextghost{
    z-index:14 !important;
  }

  #projects.rhb-projects-spotlight-218 .projects-carousel::before,
  #projects.rhb-projects-spotlight-218 .projects-carousel::after{
    z-index:18 !important;
  }

  #projects.rhb-projects-spotlight-218 .rhb-project-stage-card217.is-automation-card.is-active{
    top:50% !important;
    bottom:auto !important;
    --rhb-card-y:0px !important;
    transform:translate3d(-50%,-50%,0) translate3d(var(--rhb-card-x,0px),0,0) scale(var(--rhb-card-scale,1)) !important;
    transform-origin:center center !important;
    z-index:72 !important;
  }

  #projects.rhb-projects-spotlight-218 .rhb-project-stage-card217.is-automation-card.is-active img{
    object-position:center center !important;
    transform:translateZ(0) !important;
  }
}


/* =====================================================
   FIX221 - Mobile Projects layer lock + smoother motion pass
   Base: FIX219 positioning is preserved
   - do not change card positions, ghost placement, or transition timing
   - only lock layer order during each full card cycle
   - active hold reduced to 4s in JS
===================================================== */
@media (max-width:760px){
  #projects.rhb-projects-spotlight-221 .rhb-project-stage217,
  #projects.rhb-projects-spotlight-221 .rhb-project-stage-card217{
    transform-style:preserve-3d !important;
    -webkit-font-smoothing:antialiased !important;
  }

  #projects.rhb-projects-spotlight-221 .rhb-project-stage-card217{
    transition:
      transform var(--rhb-transition-ms,1900ms) cubic-bezier(.18,.78,.16,1),
      opacity 760ms ease !important;
    will-change:transform,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    perspective:1000px !important;
    contain:layout paint style !important;
  }

  #projects.rhb-projects-spotlight-221 .rhb-project-stage-card217::after,
  #projects.rhb-projects-spotlight-221 .rhb-project-stage-card217 .project-content{
    will-change:opacity,transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }

  #projects.rhb-projects-spotlight-221 .rhb-project-stage-card217[data-rhb-layer-lock],
  #projects.rhb-projects-spotlight-221 .rhb-project-stage-card217.is-active{
    z-index:72 !important;
  }

  #projects.rhb-projects-spotlight-221 .rhb-project-stage-card217.is-prevghost,
  #projects.rhb-projects-spotlight-221 .rhb-project-stage-card217.is-nextghost{
    z-index:14 !important;
  }

  #projects.rhb-projects-spotlight-221 .rhb-project-stage-card217.is-hidden{
    z-index:1 !important;
  }

  #projects.rhb-projects-spotlight-221 .projects-carousel::before,
  #projects.rhb-projects-spotlight-221 .projects-carousel::after{
    z-index:18 !important;
  }
}


/* =====================================================
   FIX222 - Mobile Projects full layer transaction + grid-to-active smoothing
   Base: FIX219/221 positioning, ghosts, card sizes, active hold and transition durations are preserved.
   This pass only stabilizes layer order and removes Grid → Active micro-jitter.
===================================================== */
@media (max-width:760px){
  #projects.rhb-projects-spotlight-222 .rhb-project-stage217{
    transform:translateZ(0) !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    contain:layout paint style !important;
    isolation:isolate !important;
  }

  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217{
    z-index:var(--rhb-layer-z,1) !important;
    transform:translate3d(-50%,-50%,0) translate3d(var(--rhb-card-x,0px),var(--rhb-card-y,0px),0) scale(var(--rhb-card-scale,1)) translateZ(0) !important;
    transition:
      transform var(--rhb-transition-ms,1900ms) cubic-bezier(.22,.70,.14,1),
      opacity 760ms ease !important;
    will-change:transform,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    contain:layout paint style !important;
  }

  #projects.rhb-projects-spotlight-222.is-rhb-grid-to-active .rhb-project-stage-card217{
    transition:
      transform var(--rhb-transition-ms,1900ms) cubic-bezier(.24,.72,.16,1),
      opacity 760ms ease !important;
  }

  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217[data-rhb-layer-role="active"],
  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217[data-rhb-layer-lock="active"],
  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217.is-active{
    z-index:72 !important;
  }

  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217[data-rhb-layer-role="ghost"],
  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217.is-prevghost,
  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217.is-nextghost{
    z-index:14 !important;
  }

  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217[data-rhb-layer-role="background"],
  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217.is-hidden{
    z-index:1 !important;
  }

  #projects.rhb-projects-spotlight-222 .projects-carousel::before,
  #projects.rhb-projects-spotlight-222 .projects-carousel::after{
    z-index:18 !important;
  }

  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217 img,
  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217::after,
  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217 .project-content{
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    transform:translateZ(0) !important;
  }
}

/* =====================================================
   FIX 225 - Mobile CTA approved portal background only
   Scope: Mobile CTA only. Desktop/Footer/other sections untouched.
===================================================== */
@media (max-width:720px){
  .footer-island .cta-panel,
  .cta-panel{
    min-height:360px !important;
    height:360px !important;
    background-image:
      linear-gradient(180deg, rgba(5, 9, 30, 0.10) 0%, rgba(5, 9, 30, 0.05) 42%, rgba(5, 9, 30, 0.58) 100%),
      radial-gradient(circle at 50% 92%, rgba(111,61,255,0.18), rgba(5,9,30,0) 48%),
      url('../img/cta-mobile-portal.webp') !important;
    background-size:cover, cover, cover !important;
    background-position:center center, center center, center right !important;
    background-repeat:no-repeat !important;
    overflow:hidden !important;
  }

  .footer-island .cta-art,
  .cta-art{
    display:none !important;
  }

  .footer-island .cta-copy,
  .cta-copy{
    position:relative !important;
    z-index:3 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .footer-island .cta-copy h2,
  .cta-copy h2{
    color:#ffffff !important;
    text-shadow:0 10px 28px rgba(3,7,24,.42) !important;
  }

  .footer-island .cta-copy p,
  .cta-copy p{
    color:rgba(255,255,255,.82) !important;
    text-shadow:0 8px 24px rgba(3,7,24,.32) !important;
  }
}

/* =========================================================
   FIX226 - Mobile Footer Premium + Header Dock
   Scope: mobile footer only. Desktop remains untouched.
   Baseline: fixed225 mobile CTA / current approved mobile flow.
========================================================= */
@media (max-width: 767px){
  .footer-island .footer.rhb-footer,
  .footer.rhb-footer{
    position:relative!important;
    width:calc(100% - 20px)!important;
    margin:20px auto 0!important;
    padding:32px 22px 18px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:0!important;
    text-align:center!important;
    border-radius:34px!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 0%,rgba(178,74,194,.08),transparent 38%),
      linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.74))!important;
    border:1px solid rgba(255,255,255,.82)!important;
    box-shadow:0 22px 70px rgba(32,44,120,.11), inset 0 1px 0 rgba(255,255,255,.82)!important;
    -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
  }

  .footer-island .footer.rhb-footer::before,
  .footer.rhb-footer::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.42),transparent 36%),
      radial-gradient(circle at 50% 18%,rgba(47,76,168,.055),transparent 42%)!important;
    z-index:0!important;
  }

  .footer-island .footer.rhb-footer > *,
  .footer.rhb-footer > *{position:relative!important;z-index:1!important;}

  .footer-island .footer-brand,
  .footer-brand{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    padding:0!important;
  }

  .footer-island .footer-brand .footer-logo,
  .footer-brand .footer-logo{
    display:flex!important;
    flex-direction:row-reverse!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    margin:0 auto 18px!important;
    text-decoration:none!important;
  }

  .footer-island .footer-brand .footer-logo .brand-icon,
  .footer-brand .footer-logo .brand-icon{
    width:58px!important;
    height:58px!important;
    flex:0 0 58px!important;
    object-fit:contain!important;
  }

  .footer-island .footer-brand .footer-logo .brand-copy,
  .footer-brand .footer-logo .brand-copy{
    display:block!important;
    text-align:right!important;
    line-height:1.12!important;
  }

  .footer-island .footer-brand .footer-logo .brand-copy strong,
  .footer-brand .footer-logo .brand-copy strong{
    display:block!important;
    color:#07122f!important;
    font-size:19px!important;
    font-weight:950!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
  }

  .footer-island .footer-brand .footer-logo .brand-copy small,
  .footer-brand .footer-logo .brand-copy small{
    display:block!important;
    margin-top:4px!important;
    color:#07122f!important;
    font-size:10px!important;
    font-weight:850!important;
    letter-spacing:.6px!important;
    white-space:nowrap!important;
  }

  .footer-island .footer-brand > p,
  .footer-brand > p{
    max-width:315px!important;
    margin:0 auto 22px!important;
    color:#5f6678!important;
    font-size:13px!important;
    line-height:2.05!important;
    font-weight:650!important;
  }

  .footer-island .footer-social,
  .footer-social{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:18px!important;
    margin:0 auto 28px!important;
  }

  .footer-island .footer-social a,
  .footer-social a{
    width:52px!important;
    height:52px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.78)!important;
    border:1px solid rgba(11,18,47,.06)!important;
    color:#050812!important;
    font-size:22px!important;
    font-weight:950!important;
    box-shadow:0 14px 30px rgba(25,36,92,.10), inset 0 1px 0 rgba(255,255,255,.78)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    backdrop-filter:blur(12px)!important;
  }

  .footer-island .footer-social a svg,
  .footer-social a svg{width:24px!important;height:24px!important;stroke-width:2.1!important;}

  .footer-island .footer-links,
  .footer-island .footer-services,
  .footer-links,
  .footer-services{
    display:none!important;
  }

  .footer-island .footer-contact,
  .footer-contact{
    width:100%!important;
    margin:0!important;
    padding:24px 0 0!important;
    border-top:1px solid rgba(7,18,47,.08)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
  }

  .footer-island .footer-contact h4,
  .footer-contact h4{
    position:relative!important;
    margin:0 0 18px!important;
    color:#07122f!important;
    font-size:18px!important;
    font-weight:950!important;
    line-height:1.5!important;
  }

  .footer-island .footer-contact h4::after,
  .footer-contact h4::after{
    content:""!important;
    display:block!important;
    width:34px!important;
    height:3px!important;
    margin:8px auto 0!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#244aa7,#b64ac2)!important;
    opacity:.92!important;
  }

  .footer-island .footer-contact .contact-item,
  .footer-contact .contact-item{
    width:100%!important;
    max-width:315px!important;
    min-height:48px!important;
    margin:0 auto 10px!important;
    padding:11px 14px!important;
    border-radius:17px!important;
    display:flex!important;
    flex-direction:row-reverse!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    background:rgba(255,255,255,.52)!important;
    border:1px solid rgba(47,76,168,.07)!important;
    box-shadow:0 10px 26px rgba(35,48,115,.055)!important;
    color:#505a72!important;
    font-size:13px!important;
    line-height:1.6!important;
    font-weight:750!important;
  }

  .footer-island .footer-contact .contact-item::before,
  .footer-contact .contact-item::before{
    width:28px!important;
    height:28px!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 28px!important;
    border-radius:10px!important;
    background:linear-gradient(135deg,rgba(36,74,167,.10),rgba(182,74,194,.10))!important;
    color:#244aa7!important;
    font-size:14px!important;
    font-weight:900!important;
  }

  .footer-island .footer-contact .contact-phone::before,
  .footer-contact .contact-phone::before{content:"☎"!important;}
  .footer-island .footer-contact .contact-mail::before,
  .footer-contact .contact-mail::before{content:"✉"!important;}
  .footer-island .footer-contact .contact-web::before,
  .footer-contact .contact-web::before{content:"⌁"!important;}

  .footer-island .footer-contact .contact-address,
  .footer-contact .contact-address{display:none!important;}

  .footer-island .copyright,
  .copyright{
    width:100%!important;
    margin:16px auto 0!important;
    padding:14px 0 0!important;
    border-top:1px solid rgba(7,18,47,.08)!important;
    color:#697187!important;
    font-size:11.5px!important;
    line-height:1.9!important;
    font-weight:700!important;
  }

  .footer-island .back-to-top,
  .back-to-top{display:none!important;}

  /* Premium footer dock: the sticky header visually sits on the footer logo zone. */
  .header.glass,
  .header{
    transition:transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease, background-color .26s ease, opacity .26s ease!important;
    will-change:transform!important;
  }

  body.rhb-footer-docking .header.glass,
  body.rhb-footer-docking .header{
    transform:translate3d(0,var(--rhb-footer-dock-y,0px),0)!important;
    box-shadow:0 10px 30px rgba(28,30,80,.07)!important;
    background:rgba(255,255,255,.74)!important;
  }
}


/* =========================================================
   FIX227 - Mobile Footer Final Polish
   Scope: mobile footer only. Desktop remains untouched.
   Baseline: fixed226 footer layout. Header dock canceled.
========================================================= */
@media (max-width: 767px){
  /* Header/footer merge animation canceled: keep approved sticky header behavior untouched. */
  body.rhb-footer-docking .header.glass,
  body.rhb-footer-docking .header,
  .header.glass,
  .header{
    transform:none!important;
  }

  /* Make footer the actual visual end of the mobile page. */
  .footer-island{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }
  .footer-island .footer.rhb-footer,
  .footer.rhb-footer{
    margin-bottom:0!important;
    padding-bottom:14px!important;
  }
  body,
  html,
  .site,
  main{
    margin-bottom:0!important;
  }

  /* Social buttons: keep layout, add softer glass depth. */
  .footer-island .footer-social a,
  .footer-social a{
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.68))!important;
    border:1px solid rgba(255,255,255,.82)!important;
    box-shadow:
      0 16px 34px rgba(28,36,88,.115),
      0 3px 10px rgba(182,74,194,.055),
      inset 0 1px 0 rgba(255,255,255,.92)!important;
    -webkit-backdrop-filter:blur(16px) saturate(145%)!important;
    backdrop-filter:blur(16px) saturate(145%)!important;
  }

  /* Contact rows: less input-like, more compact contact cards. */
  .footer-island .footer-contact .contact-item,
  .footer-contact .contact-item{
    max-width:310px!important;
    min-height:42px!important;
    margin:0 auto 8px!important;
    padding:7px 10px 7px 14px!important;
    border-radius:15px!important;
    gap:9px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.46))!important;
    border:1px solid rgba(255,255,255,.72)!important;
    box-shadow:
      0 10px 24px rgba(31,43,107,.06),
      inset 0 1px 0 rgba(255,255,255,.82)!important;
    color:#475068!important;
    font-size:13px!important;
    font-weight:850!important;
    letter-spacing:.01em!important;
  }

  .footer-island .footer-contact .contact-item::before,
  .footer-contact .contact-item::before{
    width:31px!important;
    height:31px!important;
    flex:0 0 31px!important;
    border-radius:12px!important;
    font-size:15px!important;
    background:linear-gradient(145deg,rgba(36,74,167,.13),rgba(182,74,194,.13))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.74)!important;
  }

  /* Lighter, cleaner copyright area. */
  .footer-island .copyright,
  .copyright{
    max-width:260px!important;
    margin:14px auto 0!important;
    padding:12px 8px 0!important;
    border-top:1px solid rgba(7,18,47,.045)!important;
    font-size:10.8px!important;
    line-height:1.9!important;
    font-weight:650!important;
    color:#71798d!important;
    text-align:center!important;
    white-space:normal!important;
  }

  .footer-island .footer-contact,
  .footer-contact{
    border-top-color:rgba(7,18,47,.045)!important;
  }
}

/* =========================================================
   FIX228 - Mobile Footer visible contact polish + true page end
   Scope: mobile footer only. Desktop untouched.
   Baseline: fixed227 / approved footer layout.
========================================================= */
@media (max-width: 767px){
  /* keep dock/merge cancelled */
  body.rhb-footer-docking .header,
  body.rhb-footer-docking .header.glass,
  .header,
  .header.glass{transform:none!important;}

  /* make the footer the final visual stop of the mobile page */
  html,body{margin-bottom:0!important;padding-bottom:0!important;}
  .page{margin-bottom:0!important;padding-bottom:0!important;}
  .footer-island{margin-bottom:0!important;padding-bottom:0!important;}
  .footer-island .footer.rhb-footer,
  footer.footer.rhb-footer,
  .footer.rhb-footer{
    margin-bottom:0!important;
    padding-bottom:12px!important;
  }
  .footer-island + *,
  footer.footer.rhb-footer + *{margin-top:0!important;}

  /* social buttons: more premium glass depth, not flat */
  .footer-island .footer-social a,
  .footer-social a{
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.68))!important;
    border:1px solid rgba(255,255,255,.92)!important;
    box-shadow:
      0 18px 34px rgba(23,31,77,.16),
      0 6px 16px rgba(130,75,210,.08),
      inset 0 1px 0 rgba(255,255,255,.96)!important;
    -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
    backdrop-filter:blur(18px) saturate(150%)!important;
  }
  .footer-island .footer-social a svg,
  .footer-social a svg{filter:drop-shadow(0 4px 7px rgba(16,24,55,.08))!important;}

  /* contact area: shorter cards, less input-like, stronger text/icon */
  .footer-island .footer-contact,
  .footer-contact{
    padding-top:18px!important;
    border-top-color:rgba(7,18,47,.045)!important;
  }
  .footer-island .footer-contact h4,
  .footer-contact h4{margin-bottom:14px!important;}

  .footer-island .footer-contact .contact-item,
  .footer-contact .contact-item{
    width:100%!important;
    max-width:292px!important;
    min-height:38px!important;
    height:38px!important;
    margin:0 auto 7px!important;
    padding:5px 9px 5px 12px!important;
    border-radius:14px!important;
    display:flex!important;
    flex-direction:row-reverse!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,.34))!important;
    border:1px solid rgba(255,255,255,.62)!important;
    box-shadow:
      0 8px 20px rgba(31,43,107,.045),
      inset 0 1px 0 rgba(255,255,255,.74)!important;
    color:#3f485f!important;
    font-size:13.4px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
    text-align:center!important;
  }

  .footer-island .footer-contact .contact-item::before,
  .footer-contact .contact-item::before{
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    font-size:16px!important;
    font-weight:950!important;
    background:linear-gradient(145deg,rgba(36,74,167,.15),rgba(182,74,194,.15))!important;
    color:#244aa7!important;
    box-shadow:
      0 7px 14px rgba(36,74,167,.055),
      inset 0 1px 0 rgba(255,255,255,.78)!important;
  }

  /* copyright: lighter, intentionally two-line-friendly */
  .footer-island .copyright,
  .copyright{
    max-width:230px!important;
    margin:12px auto 0!important;
    padding:10px 6px 0!important;
    border-top:1px solid rgba(7,18,47,.04)!important;
    color:#737b8f!important;
    font-size:10.4px!important;
    line-height:1.85!important;
    font-weight:650!important;
    text-align:center!important;
    white-space:normal!important;
  }
}


/* =========================================================
   FIX229 - Mobile Footer contact icons + final page end
   Scope: mobile footer only. Desktop untouched.
   Baseline: fixed228 approved mobile footer.
========================================================= */
@media (max-width: 767px){
  /* Final mobile footer contact value */
  .footer-island .footer-contact .contact-web,
  .footer-contact .contact-web{direction:ltr!important;unicode-bidi:embed!important;}

  /* Replace contact icons with a clean outline icon system. */
  .footer-island .footer-contact .contact-item::before,
  .footer-contact .contact-item::before{
    content:""!important;
    background-color:#244aa7!important;
    background-image:none!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:18px 18px!important;
    mask-size:18px 18px!important;
    box-shadow:none!important;
    border-radius:0!important;
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    opacity:.96!important;
  }

  .footer-island .footer-contact .contact-phone::before,
  .footer-contact .contact-phone::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.92.33 1.82.62 2.68a2 2 0 0 1-.45 2.11L8 9.79a16 16 0 0 0 6.2 6.2l1.27-1.27a2 2 0 0 1 2.11-.45c.86.29 1.76.5 2.68.62A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.92.33 1.82.62 2.68a2 2 0 0 1-.45 2.11L8 9.79a16 16 0 0 0 6.2 6.2l1.27-1.27a2 2 0 0 1 2.11-.45c.86.29 1.76.5 2.68.62A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E")!important;
  }

  .footer-island .footer-contact .contact-mail::before,
  .footer-contact .contact-mail::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")!important;
  }

  .footer-island .footer-contact .contact-web::before,
  .footer-contact .contact-web::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 0 20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 0 0 20'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 0 20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 0 0 20'/%3E%3C/svg%3E")!important;
  }

  /* Force the footer to be the visual end of the mobile site. */
  html,
  body,
  .site,
  .page,
  main{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }

  .footer-island{
    margin-bottom:0!important;
    padding-bottom:0!important;
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
  }

  .footer-island::before,
  .footer-island::after{display:none!important;}

  .footer-island .footer.rhb-footer,
  footer.footer.rhb-footer,
  .footer.rhb-footer{
    margin-bottom:0!important;
    padding-bottom:max(14px, env(safe-area-inset-bottom))!important;
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
  }

  .rhb-consultation-modal[aria-hidden="true"]{display:none!important;}
}


/* =========================================================
   FIX232 - Mobile footer scroll-safe end + website alignment
   Scope: mobile footer only. Desktop untouched.
   Baseline: fixed229 approved footer/icons. No scroll lock hacks.
========================================================= */
@media (max-width: 767px){
  /* Do NOT lock page scrolling. Undo any mobile footer/end-lock attempts safely. */
  html,
  body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    height:auto!important;
    min-height:auto!important;
    max-height:none!important;
    touch-action:auto!important;
    overscroll-behavior-y:auto!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
    background:#f5f3ff!important;
  }

  body.rhb-modal-open .rhb-consultation-modal[aria-hidden="true"] ~ *,
  body.rhb-modal-open .rhb-consultation-modal[hidden] ~ *{
    pointer-events:auto!important;
  }

  body:not(.rhb-modal-visible){
    overflow-y:auto!important;
  }

  body:not(.rhb-modal-visible).rhb-modal-open{
    overflow-y:auto!important;
  }

  .site,
  .page,
  main,
  .rhb-page,
  .site-main,
  .main-content,
  #page,
  #content{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }

  /* Keep the approved curved footer-card ending. */
  .footer-island{
    margin-bottom:0!important;
    padding-bottom:0!important;
    border-bottom-left-radius:30px!important;
    border-bottom-right-radius:30px!important;
    overflow:hidden!important;
  }

  .footer-island::before,
  .footer-island::after{
    display:block!important;
  }

  .footer-island .footer.rhb-footer,
  footer.footer.rhb-footer,
  .footer.rhb-footer{
    margin-bottom:0!important;
    padding-bottom:max(14px, env(safe-area-inset-bottom))!important;
    border-bottom-left-radius:30px!important;
    border-bottom-right-radius:30px!important;
    overflow:hidden!important;
  }

  /* Keep approved icons exactly as they are. Website row only: icon right, value left. */
  .footer-island .footer-contact .contact-web,
  .footer-contact .contact-web{
    direction:ltr!important;
    unicode-bidi:embed!important;
    text-align:left!important;
    justify-content:space-between!important;
  }

  /* Hidden consultation modal must not create bottom scroll space, but visible modal can still work. */
  .rhb-consultation-modal[aria-hidden="true"],
  .rhb-consultation-modal[hidden]{
    display:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .rhb-consultation-modal:not([aria-hidden="true"]):not([hidden]){
    position:fixed!important;
    inset:0!important;
  }
}

/* =========================================================
   FIX233 - Mobile footer root-cause patch
   Scope: mobile footer only. Desktop and all approved mobile sections untouched.
   Goals:
   1) keep current approved footer design and icons
   2) place rhb.co.ir correctly as LTR text on the left side of its contact card
   3) remove real bottom scroll gap without scroll locks or overflow-y hacks
========================================================= */
@media (max-width: 767px){
  /* Never lock vertical scrolling while fixing the footer end. */
  html,
  body{
    overflow-y:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    touch-action:auto!important;
    overscroll-behavior-y:auto!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
  }

  .page,
  main,
  .site,
  .site-main,
  .rhb-page,
  .main-content,
  #page,
  #content{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }

  /* Keep the approved curved footer-card ending. Do not flatten the design. */
  .footer-island{
    margin-bottom:0!important;
    padding-bottom:0!important;
    border-bottom-left-radius:30px!important;
    border-bottom-right-radius:30px!important;
    overflow:hidden!important;
  }

  .footer-island .footer.rhb-footer,
  footer.footer.rhb-footer,
  .footer.rhb-footer{
    margin-bottom:0!important;
    padding-bottom:max(14px, env(safe-area-inset-bottom))!important;
    border-bottom-left-radius:30px!important;
    border-bottom-right-radius:30px!important;
    overflow:hidden!important;
  }

  /* Hidden modal must not create layout height after footer. */
  .rhb-consultation-modal[aria-hidden="true"],
  .rhb-consultation-modal[hidden]{
    display:none!important;
    position:fixed!important;
    inset:auto!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .rhb-consultation-modal:not([aria-hidden="true"]):not([hidden]){
    position:fixed!important;
    inset:0!important;
  }

  /* Website contact row: icon stays right, LTR address sits cleanly on the left. */
  .footer-island .footer-contact .contact-web,
  .footer-contact .contact-web{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 34px!important;
    align-items:center!important;
    column-gap:8px!important;
    direction:ltr!important;
    unicode-bidi:isolate!important;
    text-align:left!important;
    justify-content:normal!important;
  }

  .footer-island .footer-contact .contact-web::before,
  .footer-contact .contact-web::before{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
  }

  .footer-island .footer-contact .contact-web .contact-value,
  .footer-contact .contact-web .contact-value{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    min-width:0!important;
    direction:ltr!important;
    unicode-bidi:isolate!important;
    text-align:left!important;
    white-space:nowrap!important;
  }

  /* Remove accidental real whitespace after footer without changing scroll behavior. */
  .footer-island + .rhb-consultation-modal[aria-hidden="true"],
  .footer-island + .rhb-consultation-modal[hidden]{
    display:none!important;
  }

  .footer-island:last-of-type{
    margin-bottom:0!important;
  }
}

/* =========================================================
   FIX234 - Mobile footer final visual end guard + website row
   Scope: mobile footer only. Desktop untouched.
   Notes: keeps existing footer design and icons. Does not lock normal scrolling.
========================================================= */
@media (max-width: 767px){
  /* Keep the approved rounded footer ending. */
  .footer-island,
  .footer-island .footer.rhb-footer,
  footer.footer.rhb-footer,
  .footer.rhb-footer{
    border-bottom-left-radius:30px!important;
    border-bottom-right-radius:30px!important;
    overflow:hidden!important;
  }

  .footer-island::before,
  .footer-island::after{
    display:block!important;
  }

  /* Website contact card: icon stays on the right, rhb.co.ir sits cleanly on the left. */
  .footer-island .footer-contact .contact-web,
  .footer-contact .contact-web{
    display:flex!important;
    flex-direction:row-reverse!important;
    align-items:center!important;
    justify-content:space-between!important;
    direction:ltr!important;
    unicode-bidi:isolate!important;
    text-align:left!important;
    gap:10px!important;
  }

  .footer-island .footer-contact .contact-web::before,
  .footer-contact .contact-web::before{
    order:2!important;
    margin:0!important;
    flex:0 0 34px!important;
  }

  .footer-island .footer-contact .contact-web .contact-value,
  .footer-contact .contact-web .contact-value{
    order:1!important;
    flex:1 1 auto!important;
    min-width:0!important;
    display:block!important;
    margin:0 auto 0 0!important;
    direction:ltr!important;
    unicode-bidi:isolate!important;
    text-align:left!important;
    white-space:nowrap!important;
  }

  /* Do not create mobile scroll locks. The JS guard only clamps beyond the footer end. */
  html, body{
    overflow-y:auto!important;
    height:auto!important;
    max-height:none!important;
    touch-action:auto!important;
  }
}

/* =========================================================
   FIX239 - Mobile physical page end at footer
   Scope: mobile only. Keeps footer design. Does not block wheel/touch scroll.
   It caps the real <main> height to the measured bottom pixel of .footer-island,
   so no post-footer white area can become part of the mobile scroll range.
========================================================= */
@media (max-width: 767px){
  body.rhb-mobile-page-end-capped main{
    height:var(--rhb-mobile-page-end)!important;
    max-height:var(--rhb-mobile-page-end)!important;
    min-height:0!important;
    overflow:hidden!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
  }

  body.rhb-mobile-page-end-capped,
  body.rhb-mobile-page-end-capped html{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }

  body.rhb-mobile-page-end-capped .footer-island{
    margin-bottom:0!important;
  }

  /* Hidden modal remains non-layout; visible modal is released by JS before opening. */
  body.rhb-mobile-page-end-capped .rhb-consultation-modal[aria-hidden="true"],
  body.rhb-mobile-page-end-capped .rhb-consultation-modal[hidden]{
    display:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
}


/* FIX PASS 248 - Mobile hero image teardown baseline
   Base: fixed241. Remove the mobile hero image layer and every visual derivative of that image.
   This is intentionally mobile-only and does not alter desktop, header, CTA, trust logos, footer, or other sections. */
@media (max-width:720px){
  .hero-bg,
  .hero-fade,
  .mobile-hero-portal,
  .mobile-hero-orb,
  .rhb-neural-orb{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    max-width:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    filter:none!important;
    backdrop-filter:none!important;
    background:none!important;
    background-image:none!important;
    transform:none!important;
    animation:none!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  .hero-bg::before,
  .hero-bg::after,
  .hero-fade::before,
  .hero-fade::after,
  .mobile-hero-portal::before,
  .mobile-hero-portal::after,
  .mobile-hero-orb::before,
  .mobile-hero-orb::after,
  .rhb-neural-orb::before,
  .rhb-neural-orb::after,
  .hero.panel::before,
  .hero.panel::after{
    content:none!important;
    display:none!important;
    opacity:0!important;
    width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    filter:none!important;
    background:none!important;
    background-image:none!important;
    transform:none!important;
    animation:none!important;
    pointer-events:none!important;
  }
  .hero.panel{
    background-image:none!important;
    filter:none!important;
    backdrop-filter:none!important;
  }
}

/* FIX PASS 249 - Mobile hero brand title color only
   Base: fixed248. Keep exact dimensions and layout; change only the visible title color to white. */
@media (max-width:720px){
  .hero-brand-logo img{
    filter:brightness(0) invert(1)!important;
  }
}

/* FIX PASS 250 - Mobile hero approved image only
   Base: fixed249. Restore only the mobile hero image layer using the approved web asset.
   All existing header, badge, title sizing, CTA, partner card, spacing, and desktop styles remain untouched. */
@media (max-width:720px){
  .hero-bg{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    filter:none!important;
    backdrop-filter:none!important;
    background-color:#03062a!important;
    background-image:url('../img/mobile-hero-rhb-neon-city.webp')!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center top!important;
    transform:none!important;
    animation:none!important;
    overflow:hidden!important;
    pointer-events:none!important;
    z-index:0!important;
  }
}

/* FIX PASS 251 - Mobile hero composition + layer integration
   Base: fixed250. Integrates the approved image composition corrections with a strict layer stack.
   Mobile only: header/badge/title stay above the image; image remains a background layer;
   the white content card starts lower so the full branded hero visual can breathe. */
@media (max-width:720px){
  .hero.panel{
    position:relative!important;
    isolation:isolate!important;
  }

  .hero-bg{
    z-index:0!important;
    height:clamp(610px,160vw,760px)!important;
    bottom:auto!important;
    background-position:center top!important;
  }

  .hero-content{
    position:relative!important;
    z-index:10!important;
    isolation:isolate!important;
  }

  .hero-content .eyebrow{
    position:relative!important;
    z-index:40!important;
    opacity:1!important;
    background:#fff!important;
    filter:none!important;
    -webkit-filter:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    mix-blend-mode:normal!important;
  }

  .hero-brand-logo{
    position:relative!important;
    z-index:39!important;
    opacity:1!important;
    filter:none!important;
    -webkit-filter:none!important;
    mix-blend-mode:normal!important;
  }

  .hero-brand-logo img{
    position:relative!important;
    z-index:1!important;
    opacity:1!important;
    mix-blend-mode:normal!important;
  }

  .mobile-hero-after-card{
    position:relative!important;
    z-index:20!important;
    margin-top:clamp(250px,68vw,330px)!important;
  }

  .brand-strip,
  .brand-strip.glass{
    position:relative!important;
    z-index:20!important;
  }
}

/* FIX PASS 252 - Mobile hero top extension + softer under-card image + shorter copy card
   Base: fixed251. Mobile only. No header, badge, title, CTA, partners, desktop, or other section changes. */
@media (max-width:720px){
  /* Extend only the image layer 20px upward; all foreground elements stay exactly where they are. */
  .hero-bg{
    top:-20px!important;
    height:calc(clamp(610px,160vw,760px) + 20px)!important;
    background-image:url('../img/mobile-hero-rhb-neon-city-top20.webp')!important;
    background-position:center top!important;
  }

  /* Keep the same overlap and position, but make the image beneath the white card less legible. */
  .mobile-hero-after-card{
    background:linear-gradient(180deg,rgba(248,246,255,.985),rgba(244,240,255,.96))!important;
    padding-bottom:6px!important;
  }
}

/* FIX PASS 256 - Mobile hero real image height, no vertical crop
   Base: fixed255. Show the complete 1000x1900 mobile hero asset at its natural aspect ratio.
   Scope: image layer only; no header, content, card, CTA, partner, footer, desktop, or other layout changes. */
@media (max-width:720px){
  .hero-bg{
    top:0!important;
    bottom:auto!important;
    width:100%!important;
    height:190vw!important;
    min-height:0!important;
    max-height:none!important;
    background-size:100% auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
  }
}

/* FIX PASS 261 - Desktop stats text hierarchy
   Base: fixed260. Desktop-only. Recompose the existing four stat elements into a stable
   three-column/two-row layout so the new secondary labels read as supporting copy.
   No changes to stats artwork, colors, dimensions, mobile layout, Orb, or scroll behavior. */
@media (min-width:1025px){
  .stats-panel .stat:not(.mobile-stat-extra){
    display:grid !important;
    grid-template-columns:48px minmax(112px,1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:15px !important;
    row-gap:2px !important;
    align-items:center !important;
    justify-content:stretch !important;
    padding:0 28px !important;
    direction:ltr !important;
  }

  .stats-panel .stat:not(.mobile-stat-extra) i{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    justify-self:start !important;
    margin:0 !important;
  }

  .stats-panel .stat:not(.mobile-stat-extra) small{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:end !important;
    justify-self:stretch !important;
    display:block !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.35 !important;
    font-weight:850 !important;
    color:rgba(255,255,255,.94) !important;
    text-align:right !important;
    direction:rtl !important;
    white-space:nowrap !important;
  }

  .stats-panel .stat:not(.mobile-stat-extra) em{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    justify-self:stretch !important;
    display:block !important;
    margin:0 !important;
    font-style:normal !important;
    font-size:11px !important;
    line-height:1.45 !important;
    font-weight:500 !important;
    color:rgba(226,222,255,.68) !important;
    text-align:right !important;
    direction:rtl !important;
    white-space:nowrap !important;
  }

  .stats-panel .stat:not(.mobile-stat-extra) strong{
    grid-column:3 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    justify-self:end !important;
    margin:0 !important;
    font-size:43px !important;
    line-height:1 !important;
    direction:ltr !important;
    white-space:nowrap !important;
  }
}

/* FIX PASS 262 - Desktop stats tighter grouping and stronger typography
   Base: fixed261. Desktop-only. Keep each icon, label stack, and number as one compact visual unit,
   while preserving the spacing between the three stat sections. No mobile, artwork, Orb, or scroll changes. */
@media (min-width:1025px){
  .stats-panel .stat:not(.mobile-stat-extra){
    grid-template-columns:48px max-content auto !important;
    column-gap:10px !important;
    row-gap:3px !important;
    justify-content:center !important;
    justify-items:start !important;
    padding:0 20px !important;
  }

  .stats-panel .stat:not(.mobile-stat-extra) small{
    justify-self:start !important;
    font-size:15px !important;
    line-height:1.3 !important;
    font-weight:850 !important;
  }

  .stats-panel .stat:not(.mobile-stat-extra) em{
    justify-self:start !important;
    font-size:12.5px !important;
    line-height:1.35 !important;
    font-weight:550 !important;
    color:rgba(235,232,255,.76) !important;
  }

  .stats-panel .stat:not(.mobile-stat-extra) strong{
    justify-self:start !important;
    font-size:46px !important;
  }
}


/* =====================================================
   FIX 263 - Desktop Projects continuous three-card motion
   Scope: #projects desktop only. No dimensions, card styling or side-card visuals changed.
===================================================== */
@media (min-width:761px){
  #projects .projects-track{
    transform:translate3d(0,0,0) !important;
    backface-visibility:hidden;
  }

  #projects .projects-track.is-sliding{
    transform:translate3d(calc(-1 * var(--project-slide-step, 0px)),0,0) !important;
    transition:transform 1350ms cubic-bezier(.22,.72,.18,1) !important;
  }

  #projects .projects-track.is-resetting{
    transform:translate3d(0,0,0) !important;
    transition:none !important;
  }

  #projects .projects-track .project-card.project-slide-out{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  #projects .projects-track .project-card.project-slide-in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   FIX264 - Mobile menu actions + anchor offset + modal spacing
   Scope: mobile only. Desktop and approved visual sections untouched.
========================================================= */
.rhb-mobile-consultation-link{display:none;}
@media (max-width:760px){
  /* Replace the old decorative pseudo CTA with a real, accessible trigger. */
  .header .nav::after{content:none!important;display:none!important;}
  .header .nav .rhb-mobile-consultation-link{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin-top:8px!important;
    padding:13px 16px!important;
    border-radius:16px!important;
    color:#fff!important;
    font-weight:900!important;
    font-size:13px!important;
    background:linear-gradient(135deg,#244aa7,#c24ab0)!important;
    border:0!important;
    box-shadow:0 14px 30px rgba(91,67,180,.22)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  /* Keep the mobile modal clear of every viewport edge and preserve four rounded corners. */
  .rhb-consultation-modal:not([aria-hidden="true"]):not([hidden]){
    inset:0!important;
    padding:max(18px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom))!important;
    align-items:center!important;
    justify-items:center!important;
  }
  .rhb-consultation-dialog{
    width:100%!important;
    max-height:calc(100dvh - max(36px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px))!important;
    border-radius:26px!important;
    overflow:auto!important;
  }
}

/* =========================================================
   FIX265 - Mobile menu tap/focus highlight cleanup
   Scope: mobile menu controls only. Pointer taps stay visually clean;
   keyboard focus remains visible for accessibility.
========================================================= */
@media (max-width:760px){
  .rhb-mobile-menu-toggle,
  .header .nav a{
    -webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none;
  }

  .rhb-mobile-menu-toggle:focus:not(:focus-visible),
  .header .nav a:focus:not(:focus-visible){
    outline:none!important;
    box-shadow:inherit;
  }

  .rhb-mobile-menu-toggle:focus-visible,
  .header .nav a:focus-visible{
    outline:2px solid rgba(36,74,167,.72)!important;
    outline-offset:3px!important;
  }
}

/* =========================================================
   FIX266 - Mobile consultation triggers + modal opening polish
   Scope: mobile only. Keeps approved visuals unchanged while
   removing browser tap states and stabilising modal compositing.
========================================================= */
@media (max-width:760px){
  [data-consultation-trigger],
  .rhb-consultation-close,
  .rhb-consultation-submit{
    -webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none!important;
  }

  [data-consultation-trigger]:focus:not(:focus-visible),
  .rhb-consultation-close:focus:not(:focus-visible),
  .rhb-consultation-submit:focus:not(:focus-visible){
    outline:none!important;
  }

  /* Prevent the mobile menu CTA from flashing to the browser's active white state. */
  .header .nav .rhb-mobile-consultation-link,
  .header .nav .rhb-mobile-consultation-link:hover,
  .header .nav .rhb-mobile-consultation-link:active,
  .header .nav .rhb-mobile-consultation-link:focus{
    color:#fff!important;
    background:linear-gradient(135deg,#244aa7,#c24ab0)!important;
    border-color:transparent!important;
    box-shadow:0 14px 30px rgba(91,67,180,.22)!important;
  }

  /* Promote the modal layers before animation so opening remains smooth. */
  .rhb-consultation-modal{
    will-change:opacity;
    transform:translateZ(0);
    backface-visibility:hidden;
    contain:layout paint style;
  }
  .rhb-consultation-backdrop{
    transform:translateZ(0);
    backface-visibility:hidden;
    will-change:opacity;
  }
  .rhb-consultation-dialog{
    transform:translate3d(0,18px,0) scale(.985);
    backface-visibility:hidden;
    will-change:transform;
    contain:layout paint style;
  }
  .rhb-consultation-modal.is-open .rhb-consultation-dialog{
    transform:translate3d(0,0,0) scale(1);
  }
}

/* FIX PASS 267 - Mobile partners card separation and logo presence
   Base: fixed266. Mobile-only. Preserve the existing 2x2 layout and container geometry;
   only strengthen card separation and enlarge partner logos. */
@media (max-width:720px){
  .hero.panel .brand-strip .brand-logos,
  .brand-strip.glass .brand-logos{
    gap:12px!important;
  }

  .hero.panel .brand-strip .brand-logos span,
  .brand-strip.glass .brand-logos span{
    height:56px!important;
    min-height:56px!important;
    padding:4px 7px!important;
    background:rgba(255,255,255,.80)!important;
    border:1px solid rgba(61,76,142,.12)!important;
    box-shadow:
      0 6px 16px rgba(54,63,125,.07),
      inset 0 1px 0 rgba(255,255,255,.92)!important;
  }

  .hero.panel .brand-strip .brand-logos img,
  .brand-strip.glass .brand-logos img{
    max-width:94%!important;
    max-height:42px!important;
  }
}
\n\n/* =====================================================\n   FIX268 - Mobile Projects ultra-smooth timing only\n   Scope: Mobile Projects only. No size, position, spacing,\n   color, radius, image, typography, or layer changes.\n===================================================== */\n@media (max-width:720px){\n  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217{\n    transition:\n      transform var(--rhb-transition-ms,2200ms) cubic-bezier(.20,.64,.16,1),\n      opacity 1300ms cubic-bezier(.22,.61,.36,1) !important;\n  }\n\n  #projects.rhb-projects-spotlight-222.is-rhb-grid-to-active .rhb-project-stage-card217{\n    transition:\n      transform var(--rhb-transition-ms,2200ms) cubic-bezier(.18,.66,.14,1),\n      opacity 1300ms cubic-bezier(.22,.61,.36,1) !important;\n  }\n\n  #projects.rhb-projects-spotlight-222 .rhb-project-stage-card217 .project-content{\n    transition:\n      opacity 900ms cubic-bezier(.22,.61,.36,1),\n      transform 1300ms cubic-bezier(.18,.66,.14,1) !important;\n  }\n}\n

/* =====================================================
   FIX271 - Mobile Projects isolated motion compositor
   Base: fixed268. Mobile Projects only.
   The outer slot exclusively owns transform/opacity/z-index;
   the approved visual card remains paint-stable and unchanged.
===================================================== */
@media (max-width:760px){
  #projects.rhb-projects-spotlight-222 .rhb-project-stage217{
    transform:none !important;
    will-change:auto !important;
    contain:layout paint !important;
    isolation:isolate !important;
  }

  #projects.rhb-projects-spotlight-222 .rhb-project-motion-slot271{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    width:var(--rhb-card-w,320px) !important;
    height:var(--rhb-card-h,435px) !important;
    margin:0 !important;
    padding:0 !important;
    opacity:var(--rhb-card-opacity,0) !important;
    z-index:var(--rhb-layer-z,1) !important;
    transform:translate3d(-50%,-50%,0)
              translate3d(var(--rhb-card-x,0px),var(--rhb-card-y,0px),0)
              scale(var(--rhb-card-scale,1)) !important;
    transform-origin:center center !important;
    transition:
      transform var(--rhb-transition-ms,2200ms) cubic-bezier(.20,.64,.16,1),
      opacity 1300ms cubic-bezier(.22,.61,.36,1) !important;
    will-change:transform,opacity !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    contain:layout paint style !important;
    isolation:isolate !important;
    pointer-events:none !important;
  }

  #projects.rhb-projects-spotlight-222.is-rhb-grid-to-active .rhb-project-motion-slot271{
    transition:
      transform var(--rhb-transition-ms,2200ms) cubic-bezier(.18,.66,.14,1),
      opacity 1300ms cubic-bezier(.22,.61,.36,1) !important;
  }

  /* The 1→4 path gets its own slightly gentler compositor curve without changing timing or geometry. */
  #projects.rhb-projects-spotlight-222.is-rhb-active-to-grid .rhb-project-motion-slot271{
    transition:
      transform var(--rhb-transition-ms,2200ms) cubic-bezier(.16,.67,.14,1),
      opacity 1300ms cubic-bezier(.22,.61,.36,1) !important;
  }

  #projects.rhb-projects-spotlight-222 .rhb-project-stage217.is-no-transition .rhb-project-motion-slot271{
    transition:none !important;
  }

  #projects.rhb-projects-spotlight-222 .rhb-project-motion-slot271 > .rhb-project-stage-card217{
    position:absolute !important;
    inset:0 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:1 !important;
    z-index:1 !important;
    transform:none !important;
    transition:border-color 760ms ease,box-shadow 760ms ease !important;
    will-change:auto !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    contain:paint style !important;
  }

  #projects.rhb-projects-spotlight-222 .rhb-project-motion-slot271 > .rhb-project-stage-card217.is-hidden,
  #projects.rhb-projects-spotlight-222 .rhb-project-motion-slot271 > .rhb-project-stage-card217.is-grid,
  #projects.rhb-projects-spotlight-222 .rhb-project-motion-slot271 > .rhb-project-stage-card217.is-active,
  #projects.rhb-projects-spotlight-222 .rhb-project-motion-slot271 > .rhb-project-stage-card217.is-prevghost,
  #projects.rhb-projects-spotlight-222 .rhb-project-motion-slot271 > .rhb-project-stage-card217.is-nextghost,
  #projects.rhb-projects-spotlight-222 .rhb-project-motion-slot271 > .rhb-project-stage-card217.is-automation-card.is-active{
    transform:none !important;
    opacity:1 !important;
  }

  #projects.rhb-projects-spotlight-222 .rhb-project-motion-slot271:has(> .rhb-project-stage-card217.is-active){
    pointer-events:auto !important;
  }
}

/* FIX 274 - Mobile fast-scroll rendering stability
   Mobile sections remain in the render tree from the first frame. This does not alter
   geometry, spacing, colors, or internal component animations. */
@media (max-width:767px){
  .services-section,
  .stats-panel,
  .process-section,
  .projects-panel,
  .footer-island,
  .footer,
  .rhb-reveal,
  .rhb-reveal.rhb-reveal-visible{
    content-visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  /* Keep major section surfaces paint-contained, while preserving their exact layout. */
  .services-section,
  .stats-panel,
  .process-section,
  .projects-panel,
  .footer-island{
    contain:paint !important;
  }
}


/* =========================================================
   FIX279 - Desktop consultation modal backdrop prewarm
   Scope: desktop only. Prepare the blur layer one frame before
   revealing the dialog so both are visible from the first painted frame.
========================================================= */
@media (min-width:761px){
  .rhb-consultation-modal.is-preparing{
    visibility:visible!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .rhb-consultation-modal,
  .rhb-consultation-backdrop,
  .rhb-consultation-dialog{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  .rhb-consultation-backdrop{
    transform:translateZ(0);
    will-change:backdrop-filter, opacity;
  }
}

/* FIX 281 - Consultation form bidirectional text integrity */
.rhb-consultation-form input[dir="ltr"] {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}
.rhb-consultation-form input[dir="auto"],
.rhb-consultation-form textarea[dir="auto"] {
  text-align: start !important;
  unicode-bidi: plaintext !important;
}
.rhb-consultation-form textarea {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ============================================================
   FIX 297 - ONE CONTINUOUS INTERMEDIATE HEADER + HERO SYSTEM
   Scope: 625px–1249px ONLY.
   One composition across the entire interval. No structural sub-breakpoints.
   Desktop >=1250 and Mobile <=624 are intentionally untouched.
============================================================ */
.intermediate-hero-title{display:none}

@media not all{
  .hero-wrap{
    --ih-visual-h:clamp(350px,55vw,600px);
    --ih-content-h:clamp(350px,30vw,390px);
    position:relative!important;
    width:100%!important;
    margin:0!important;
    padding:clamp(10px,1.5vw,18px)!important;
    background:linear-gradient(180deg,#f4f2ff 0%,#eeebff 100%)!important;
    overflow:visible!important;
  }

  /* Header: one identical structure through the whole intermediate interval. */
  .hero-wrap .header,
  .hero-wrap .header.glass{
    position:relative!important;
    inset:auto!important;
    z-index:80!important;
    width:min(100%,1060px)!important;
    height:clamp(62px,7.2vw,78px)!important;
    min-height:62px!important;
    margin:0 auto clamp(7px,.9vw,11px)!important;
    padding:0 clamp(14px,2.2vw,26px)!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 48px!important;
    align-items:center!important;
    gap:0!important;
    border:1px solid rgba(255,255,255,.96)!important;
    border-radius:clamp(20px,2.4vw,28px)!important;
    background:rgba(255,255,255,.80)!important;
    box-shadow:0 14px 42px rgba(56,45,132,.08)!important;
    -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
    backdrop-filter:blur(18px) saturate(140%)!important;
    transform:none!important;
  }
  .hero-wrap .header .brand{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(6px,.8vw,9px)!important;
    direction:rtl!important;
    min-width:0!important;
    margin:0!important;
    transform:none!important;
  }
  .hero-wrap .header .brand-icon{
    display:block!important;
    width:clamp(38px,4.4vw,50px)!important;
    height:clamp(38px,4.4vw,50px)!important;
    object-fit:contain!important;
    flex:none!important;
  }
  .hero-wrap .header .brand-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    line-height:1.04!important;
  }
  .hero-wrap .header .brand-copy strong{
    font-size:clamp(11px,1.4vw,15px)!important;
    font-weight:900!important;
    color:#111834!important;
  }
  .hero-wrap .header .brand-copy small{
    margin-top:3px!important;
    font-size:clamp(6px,.7vw,8px)!important;
    font-weight:800!important;
    color:#111834!important;
    letter-spacing:.04px!important;
  }
  .hero-wrap .header-btn{display:none!important}
  .hero-wrap .rhb-mobile-menu-toggle{
    display:flex!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    padding:10px!important;
    border:0!important;
    border-radius:13px!important;
    background:transparent!important;
    box-shadow:none!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:5px!important;
  }
  .hero-wrap .rhb-mobile-menu-toggle span{
    display:block!important;
    width:19px!important;
    height:2px!important;
    margin:0!important;
    border-radius:4px!important;
    background:#17234e!important;
  }
  .hero-wrap .header.is-mobile-menu-open .rhb-mobile-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
  .hero-wrap .header.is-mobile-menu-open .rhb-mobile-menu-toggle span:nth-child(2){opacity:0!important}
  .hero-wrap .header.is-mobile-menu-open .rhb-mobile-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}
  .hero-wrap .header .nav{
    position:absolute!important;
    z-index:100!important;
    top:calc(100% + 8px)!important;
    right:0!important;
    left:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:2px!important;
    padding:10px!important;
    border:1px solid rgba(255,255,255,.96)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 22px 55px rgba(24,28,85,.16)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    backdrop-filter:blur(18px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-6px)!important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;
  }
  .hero-wrap .header.is-mobile-menu-open .nav{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  .hero-wrap .header .nav a{
    padding:10px 13px!important;
    border-radius:12px!important;
    text-align:center!important;
    font-size:13px!important;
    font-weight:800!important;
    color:#111a38!important;
  }
  .hero-wrap .header .nav .rhb-mobile-consultation-link{
    display:block!important;
    margin-top:4px!important;
    color:#fff!important;
    background:linear-gradient(135deg,#244aa7,#c24ab0)!important;
  }

  /* Hero shell: a single fluid composition. */
  .hero-wrap .hero.panel,
  .hero-wrap .hero{
    position:relative!important;
    isolation:isolate!important;
    width:min(100%,1060px)!important;
    height:calc(var(--ih-visual-h) + var(--ih-content-h))!important;
    min-height:720px!important;
    max-height:990px!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:clamp(22px,2.7vw,30px)!important;
    background:linear-gradient(180deg,#f3f1ff 0%,#f8f7ff 61%,#eeeaff 100%)!important;
    background-image:none!important;
    box-shadow:0 22px 65px rgba(64,50,150,.11)!important;
    filter:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .hero-wrap .hero.panel::before,
  .hero-wrap .hero.panel::after,
  .hero-wrap .hero::before,
  .hero-wrap .hero::after{
    content:none!important;
    display:none!important;
  }

  /* Visual image: force it back on even where historical mobile CSS hides it. */
  .hero-wrap .hero.panel .hero-bg,
  .hero-wrap .hero .hero-bg,
  .hero-wrap .hero-bg{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:1!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100%!important;
    height:var(--ih-visual-h)!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background-color:#f1efff!important;
    background-image:url('../img/hero-intermediate.webp')!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center 52%!important;
    box-shadow:none!important;
    filter:none!important;
    mix-blend-mode:normal!important;
    transform:none!important;
    animation:none!important;
    overflow:hidden!important;
    pointer-events:none!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.78) 92%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.78) 92%,transparent 100%)!important;
  }
  .hero-wrap .hero.panel .hero-fade,
  .hero-wrap .hero .hero-fade,
  .hero-wrap .hero-fade{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:2!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    background:linear-gradient(180deg,transparent 0 calc(var(--ih-visual-h) - 90px),rgba(247,246,255,.30) calc(var(--ih-visual-h) - 55px),rgba(247,246,255,.94) var(--ih-visual-h),rgba(239,235,255,.98) 100%)!important;
    pointer-events:none!important;
  }

  /* AI / DATA / CLOUD remains anchored inside the image at every intermediate width. */
  .hero-wrap .hero.panel .tech-list,
  .hero-wrap .hero .tech-list,
  .hero-wrap .tech-list{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:8!important;
    top:calc(var(--ih-visual-h) * .22)!important;
    right:clamp(16px,3.7vw,44px)!important;
    bottom:auto!important;
    left:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    flex-direction:column!important;
    gap:clamp(20px,3.1vw,34px)!important;
    direction:ltr!important;
    text-align:left!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  .hero-wrap .tech-item{
    position:relative!important;
    padding-right:17px!important;
  }
  .hero-wrap .tech-item::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    right:0!important;
    top:5px!important;
    width:6px!important;
    height:6px!important;
    border-radius:50%!important;
    background:#fff!important;
    border:1px solid rgba(80,75,220,.24)!important;
    box-shadow:0 0 0 5px rgba(255,255,255,.22),0 0 14px rgba(83,71,255,.25)!important;
  }
  .hero-wrap .tech-item b{
    display:block!important;
    font-size:clamp(12px,1.45vw,17px)!important;
    line-height:1!important;
    color:#111834!important;
  }
  .hero-wrap .tech-item small{
    display:block!important;
    margin-top:4px!important;
    font-size:clamp(8px,.9vw,10px)!important;
    color:#65708a!important;
  }

  /* Scroll cue stays on the visual and never disappears inside this interval. */
  .hero-wrap .hero.panel .scroll-note,
  .hero-wrap .hero .scroll-note,
  .hero-wrap .scroll-note{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:9!important;
    top:calc(var(--ih-visual-h) - clamp(72px,7vw,86px))!important;
    right:clamp(16px,3vw,34px)!important;
    bottom:auto!important;
    left:auto!important;
    width:22px!important;
    height:38px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  .hero-wrap .hero.panel .scroll-note .mouse,
  .hero-wrap .hero .scroll-note .mouse,
  .hero-wrap .scroll-note .mouse{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    width:20px!important;
    height:34px!important;
    min-width:20px!important;
    min-height:34px!important;
    margin:0!important;
    padding:0!important;
    border:1.5px solid #3353d2!important;
    border-radius:13px!important;
    background:transparent!important;
    animation:none!important;
  }

  /* Copy block: same order and position for 625 through 1249. */
  .hero-wrap .hero.panel .hero-content,
  .hero-wrap .hero .hero-content,
  .hero-wrap .hero-content{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:7!important;
    top:calc(var(--ih-visual-h) + clamp(10px,1.4vw,18px))!important;
    right:clamp(24px,6vw,78px)!important;
    bottom:auto!important;
    left:clamp(24px,6vw,78px)!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
    transform:none!important;
  }
  .hero-wrap .hero-content .eyebrow{
    order:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    height:auto!important;
    margin:0 0 clamp(7px,1vw,10px)!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#2350bf!important;
    font-size:clamp(10px,1.1vw,12px)!important;
    line-height:1.6!important;
    font-weight:900!important;
  }
  .hero-wrap .hero-content .eyebrow span{
    display:block!important;
    width:6px!important;
    height:6px!important;
    border-radius:50%!important;
    background:#2350bf!important;
    box-shadow:0 0 10px rgba(35,80,191,.22)!important;
  }
  .hero-wrap .hero-brand-logo{display:none!important}
  .hero-wrap .intermediate-hero-title{
    order:2!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
    color:#070d2b!important;
    font-size:clamp(38px,5.4vw,62px)!important;
    line-height:1.08!important;
    font-weight:900!important;
    letter-spacing:-1.5px!important;
    white-space:nowrap!important;
    text-shadow:none!important;
  }
  .hero-wrap .hero-content .mobile-hero-after-card{
    order:3!important;
    display:block!important;
    position:relative!important;
    z-index:auto!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
  .hero-wrap .mobile-hero-headline,
  .hero-wrap .mobile-hero-cta,
  .hero-wrap .mobile-hero-points{
    display:none!important;
    visibility:hidden!important;
  }
  .hero-wrap .hero-content .mobile-hero-after-card p,
  .hero-wrap .hero-content p{
    display:block!important;
    width:min(100%,620px)!important;
    max-width:620px!important;
    margin:clamp(9px,1.2vw,13px) auto 0!important;
    padding:0!important;
    color:#26324d!important;
    font-size:clamp(11.5px,1.3vw,14.5px)!important;
    line-height:1.95!important;
    font-weight:700!important;
    text-align:center!important;
  }

  /* Partners: always pinned near the bottom; never jumps into normal flow. */
  .hero-wrap .hero.panel .brand-strip.glass,
  .hero-wrap .hero.panel .brand-strip,
  .hero-wrap .hero .brand-strip.glass,
  .hero-wrap .hero .brand-strip,
  .hero-wrap .brand-strip.glass,
  .hero-wrap .brand-strip{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:10!important;
    top:auto!important;
    right:clamp(16px,4vw,48px)!important;
    bottom:48px!important;
    left:clamp(16px,4vw,48px)!important;
    width:auto!important;
    max-width:none!important;
    height:clamp(60px,7.2vw,76px)!important;
    min-height:60px!important;
    margin:0!important;
    padding:0!important;
    flex-direction:row!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    align-self:auto!important;
    justify-self:auto!important;
    direction:ltr!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.95)!important;
    border-radius:clamp(17px,2vw,22px)!important;
    background:rgba(255,255,255,.84)!important;
    box-shadow:0 12px 36px rgba(50,44,130,.08)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    backdrop-filter:blur(14px)!important;
    transform:none!important;
  }
  .hero-wrap .brand-strip .brand-badge,
  .hero-wrap .brand-strip.glass .brand-badge{
    order:0!important;
    flex:0 0 clamp(90px,14vw,145px)!important;
    width:auto!important;
    height:100%!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    padding:0 clamp(6px,1vw,10px)!important;
    border-radius:0!important;
    background:rgba(255,255,255,.36)!important;
    color:#65708a!important;
    font-size:clamp(8px,.95vw,10.5px)!important;
    line-height:1.5!important;
    font-weight:700!important;
    text-align:center!important;
  }
  .hero-wrap .brand-strip .brand-logos,
  .hero-wrap .brand-strip.glass .brand-logos{
    order:1!important;
    flex:1 1 auto!important;
    min-width:0!important;
    height:100%!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:clamp(5px,1.4vw,16px)!important;
    margin:0!important;
    padding:6px clamp(6px,1.5vw,17px)!important;
    filter:grayscale(1)!important;
    opacity:.78!important;
  }
  .hero-wrap .brand-strip .brand-logos span,
  .hero-wrap .brand-strip.glass .brand-logos span{
    display:grid!important;
    place-items:center!important;
    min-width:0!important;
    width:auto!important;
    height:100%!important;
  }
  .hero-wrap .brand-strip .brand-logos img,
  .hero-wrap .brand-strip.glass .brand-logos img{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:clamp(30px,4.4vw,48px)!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }

  /* Social row: one fixed bottom position for all intermediate widths. */
  .hero-wrap .hero.panel .social-side,
  .hero-wrap .hero .social-side,
  .hero-wrap .social-side{
    display:flex!important;
    visibility:visible!important;
    opacity:.94!important;
    position:absolute!important;
    z-index:11!important;
    top:auto!important;
    right:auto!important;
    bottom:13px!important;
    left:50%!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:20px!important;
    direction:rtl!important;
    color:#10172f!important;
    transform:translateX(-50%)!important;
    pointer-events:auto!important;
  }
  .hero-wrap .social-side .side-line{display:none!important}
  .hero-wrap .social-side a{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    place-items:center!important;
    width:20px!important;
    height:20px!important;
    margin:0!important;
    padding:0!important;
    font-size:15px!important;
  }
}

/* The explicit Intermediate-only line break must not affect locked layouts. */
br.intermediate-copy-break{display:none}

/* ============================================================
   FIX 302 - INTERMEDIATE HERO TRUE FULL-BLEED + ORB HEADROOM
   Scope: 625px–1249px ONLY.
   Desktop >=1250 and Mobile <=624 remain untouched.
   One structure across the full intermediate range; only fluid sizing changes.
============================================================ */
@media (min-width:625px) and (max-width:1249px){
  /* Historical page rules clip the full-bleed hero at 761px. Keep every
     following section on its existing page width, but let this child escape. */
  main.page{
    overflow-x:visible!important;
  }

  .hero-wrap{
    --rhb-i-hero-visual-h:clamp(340px,46vw,570px);
    --rhb-i-shell-w:min(calc(100% - clamp(28px,6vw,76px)),1100px);
    position:relative!important;
    /* RTL over-constrained blocks place excess width on the left. This offset
       cancels exactly half the viewport/parent delta at every page gutter. */
    left:calc(50vw - 50%)!important;
    right:auto!important;
    width:100vw!important;
    max-width:none!important;
    margin:0!important;
    padding:clamp(10px,1.35vw,18px)!important;
    overflow:visible!important;
    background:linear-gradient(180deg,#f4f2ff 0%,#efecff 100%)!important;
    transform:none!important;
  }

  /* HEADER: CTA LEFT / BRAND EXACTLY CENTER / HAMBURGER RIGHT */
  .hero-wrap .header,
  .hero-wrap .header.glass{
    position:relative!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    z-index:90!important;
    width:var(--rhb-i-shell-w)!important;
    height:clamp(66px,7vw,82px)!important;
    min-height:66px!important;
    margin:0 auto clamp(8px,1vw,12px)!important;
    padding:0 clamp(14px,2.1vw,26px)!important;
    display:grid!important;
    direction:ltr!important;
    grid-template-columns:minmax(145px,1fr) auto minmax(145px,1fr)!important;
    align-items:center!important;
    gap:0!important;
    overflow:visible!important;
    border:1px solid rgba(255,255,255,.96)!important;
    border-radius:clamp(22px,2.4vw,30px)!important;
    background:rgba(255,255,255,.84)!important;
    box-shadow:0 14px 42px rgba(56,45,132,.08)!important;
    -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
    backdrop-filter:blur(18px) saturate(140%)!important;
    transform:none!important;
  }
  .hero-wrap .header .brand{
    position:static!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(6px,.8vw,9px)!important;
    direction:rtl!important;
    width:max-content!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    flex-direction:row!important;
    transform:none!important;
  }
  .hero-wrap .header .brand-icon{
    display:block!important;
    width:clamp(38px,4.15vw,50px)!important;
    height:clamp(38px,4.15vw,50px)!important;
    object-fit:contain!important;
    flex:none!important;
    filter:none!important;
    transform:none!important;
  }
  .hero-wrap .header .brand-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    line-height:1.02!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    text-align:center!important;
    transform:none!important;
  }
  .hero-wrap .header .brand-copy strong{
    color:#111834!important;
    font-size:clamp(11px,1.35vw,15px)!important;
    font-weight:900!important;
  }
  .hero-wrap .header .brand-copy small{
    margin-top:3px!important;
    color:#111834!important;
    font-size:clamp(6px,.68vw,8px)!important;
    font-weight:800!important;
    letter-spacing:.02em!important;
    opacity:1!important;
  }
  .hero-wrap .header .header-btn{
    position:static!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    display:flex!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    width:auto!important;
    min-width:clamp(124px,14vw,164px)!important;
    height:clamp(42px,4.6vw,50px)!important;
    margin:0!important;
    padding:0 clamp(14px,1.8vw,20px)!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:clamp(13px,1.4vw,16px)!important;
    background:linear-gradient(135deg,#244aa7 0%,#7b4dff 50%,#c84ab2 100%)!important;
    box-shadow:0 10px 24px rgba(76,67,196,.18)!important;
    color:#fff!important;
    font-size:clamp(10px,1.05vw,12.5px)!important;
    font-weight:900!important;
    white-space:nowrap!important;
    direction:rtl!important;
    line-height:1!important;
    transform:none!important;
  }
  .hero-wrap .header .header-btn:hover,
  .hero-wrap .header .header-btn:focus,
  .hero-wrap .header .header-btn:active{transform:none!important}
  .hero-wrap .header .header-btn span{
    display:inline!important;
    font-size:clamp(10px,1.05vw,12.5px)!important;
    line-height:1!important;
  }
  .hero-wrap .header .header-btn span::after{
    content:none!important;
    display:none!important;
  }
  .hero-wrap .header .header-btn i{display:none!important}
  .hero-wrap .rhb-mobile-menu-toggle{
    position:static!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    display:flex!important;
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    width:clamp(42px,4.4vw,48px)!important;
    height:clamp(42px,4.4vw,48px)!important;
    margin:0!important;
    padding:10px!important;
    border:0!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.32)!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    transform:none!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:5px!important;
    cursor:pointer!important;
    transition:background-color .18s ease,box-shadow .18s ease!important;
  }
  .hero-wrap .rhb-mobile-menu-toggle span{
    display:block!important;
    width:20px!important;
    height:2px!important;
    margin:0!important;
    border-radius:99px!important;
    background:#17234e!important;
  }
  .hero-wrap .header.is-mobile-menu-open .rhb-mobile-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
  .hero-wrap .header.is-mobile-menu-open .rhb-mobile-menu-toggle span:nth-child(2){opacity:0!important}
  .hero-wrap .header.is-mobile-menu-open .rhb-mobile-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}

  /* Dropdown remains an overlay; it never changes hero geometry. */
  .hero-wrap .header .nav{
    position:absolute!important;
    z-index:110!important;
    top:calc(100% + 8px)!important;
    right:0!important;
    left:0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:2px!important;
    padding:10px!important;
    border:1px solid rgba(255,255,255,.96)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 22px 55px rgba(24,28,85,.16)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    backdrop-filter:blur(18px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-6px)!important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;
    direction:rtl!important;
    white-space:normal!important;
  }
  .hero-wrap .header.is-mobile-menu-open .nav{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  .hero-wrap .header .nav a{
    display:block!important;
    width:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:10px 13px!important;
    border:0!important;
    border-radius:12px!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:center!important;
    text-decoration:none!important;
    font-size:13px!important;
    line-height:1.6!important;
    font-weight:800!important;
    color:#111a38!important;
  }
  .hero-wrap .header .nav a:hover,
  .hero-wrap .header .nav a:focus-visible{background:rgba(47,76,168,.07)!important}
  .hero-wrap .header .nav .rhb-mobile-consultation-link{display:none!important}

  /* HERO: one document flow from image -> copy -> partners -> socials -> end. */
  .hero-wrap .hero.panel,
  .hero-wrap .hero{
    position:relative!important;
    isolation:isolate!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    width:var(--rhb-i-shell-w)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:var(--rhb-i-hero-visual-h) 0 clamp(24px,3vw,38px)!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .hero-wrap .hero.panel::before,
  .hero-wrap .hero.panel::after,
  .hero-wrap .hero::before,
  .hero-wrap .hero::after{content:none!important;display:none!important}

  /* IMAGE with a soft elliptical/radial perimeter fade like the approved reference. */
  .hero-wrap .hero.panel .hero-bg,
  .hero-wrap .hero .hero-bg,
  .hero-wrap .hero-bg{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:1!important;
    top:0!important;
    right:auto!important;
    left:50%!important;
    bottom:auto!important;
    width:min(112%,1180px)!important;
    min-width:0!important;
    max-width:1180px!important;
    height:calc(var(--rhb-i-hero-visual-h) + clamp(18px,3vw,36px))!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background-color:transparent!important;
    background-image:url('../img/hero-intermediate.webp')!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    /* Preserve the source's clean space above the orb instead of cropping it. */
    background-position:center 32%!important;
    border-radius:0!important;
    overflow:visible!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    mix-blend-mode:normal!important;
    transform:translateX(-50%)!important;
    animation:none!important;
    pointer-events:none!important;
    -webkit-mask-image:radial-gradient(ellipse 72% 76% at 50% 44%,#000 0%,#000 50%,rgba(0,0,0,.96) 62%,rgba(0,0,0,.72) 74%,rgba(0,0,0,.25) 88%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 72% 76% at 50% 44%,#000 0%,#000 50%,rgba(0,0,0,.96) 62%,rgba(0,0,0,.72) 74%,rgba(0,0,0,.25) 88%,transparent 100%)!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:100% 100%!important;
    mask-size:100% 100%!important;
  }
  .hero-wrap .hero.panel .hero-fade,
  .hero-wrap .hero .hero-fade,
  .hero-wrap .hero-fade{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:2!important;
    top:0!important;
    right:auto!important;
    left:50%!important;
    width:min(112%,1180px)!important;
    min-width:0!important;
    max-width:1180px!important;
    height:calc(var(--rhb-i-hero-visual-h) + clamp(18px,3vw,36px))!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:0!important;
    overflow:visible!important;
    border:0!important;
    box-shadow:none!important;
    filter:none!important;
    background:radial-gradient(ellipse 72% 76% at 50% 44%,transparent 0 56%,rgba(244,242,255,.15) 68%,rgba(244,242,255,.62) 84%,rgba(244,242,255,.95) 95%,#f4f2ff 100%)!important;
    transform:translateX(-50%)!important;
    pointer-events:none!important;
  }

  /* AI / DATA / CLOUD remain on the image, unchanged structurally. */
  .hero-wrap .hero.panel .tech-list,
  .hero-wrap .hero .tech-list,
  .hero-wrap .tech-list{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:8!important;
    top:calc(var(--rhb-i-hero-visual-h) * .22)!important;
    right:clamp(18px,4.2vw,50px)!important;
    left:auto!important;
    bottom:auto!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    flex-direction:column!important;
    gap:clamp(22px,3vw,36px)!important;
    direction:ltr!important;
    text-align:left!important;
    transform:none!important;
  }
  .hero-wrap .tech-item{position:relative!important;padding-right:18px!important}
  .hero-wrap .tech-item::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    right:0!important;
    top:5px!important;
    width:6px!important;
    height:6px!important;
    border-radius:50%!important;
    background:#fff!important;
    border:1px solid rgba(80,75,220,.24)!important;
    box-shadow:0 0 0 5px rgba(255,255,255,.22),0 0 14px rgba(83,71,255,.25)!important;
  }
  .hero-wrap .tech-item b{display:block!important;font-size:clamp(12px,1.4vw,17px)!important;line-height:1!important;color:#111834!important}
  .hero-wrap .tech-item small{display:block!important;margin-top:4px!important;font-size:clamp(8px,.9vw,10px)!important;color:#65708a!important}

  /* Optional mouse stays on the image edge and does not participate in flow. */
  .hero-wrap .hero.panel .scroll-note,
  .hero-wrap .hero .scroll-note,
  .hero-wrap .scroll-note{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:9!important;
    top:calc(var(--rhb-i-hero-visual-h) - clamp(76px,7vw,90px))!important;
    right:clamp(18px,3.4vw,38px)!important;
    bottom:auto!important;
    left:auto!important;
    width:22px!important;
    height:38px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }
  .hero-wrap .scroll-note .mouse{
    display:block!important;
    width:20px!important;
    height:34px!important;
    margin:0!important;
    border:1.5px solid #3353d2!important;
    border-radius:13px!important;
    background:transparent!important;
    animation:none!important;
  }

  /* COPY begins immediately after the image fade and remains centered. */
  .hero-wrap .hero.panel .hero-content,
  .hero-wrap .hero .hero-content,
  .hero-wrap .hero-content{
    order:1!important;
    position:relative!important;
    z-index:7!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:0!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    margin:clamp(-28px,-2vw,-14px) auto 0!important;
    padding:0 clamp(22px,5vw,66px)!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    opacity:1!important;
    visibility:visible!important;
    text-align:center!important;
    transform:none!important;
  }
  .hero-wrap .hero-content .eyebrow{
    order:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    width:max-content!important;
    max-width:94%!important;
    margin:0 auto clamp(10px,1.2vw,14px)!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#2350bf!important;
    font-size:clamp(10px,1.05vw,12.5px)!important;
    line-height:1.55!important;
    font-weight:900!important;
    text-align:center!important;
  }
  .hero-wrap .hero-content .eyebrow span{
    display:block!important;
    width:6px!important;
    height:6px!important;
    flex:none!important;
    border-radius:50%!important;
    background:#2350bf!important;
    box-shadow:0 0 10px rgba(35,80,191,.22)!important;
  }

  /* Approved brand typography asset, same visual language as desktop/mobile. */
  .hero-wrap .hero-brand-logo{
    order:2!important;
    position:relative!important;
    z-index:auto!important;
    display:block!important;
    visibility:visible!important;
    width:clamp(410px,68vw,760px)!important;
    max-width:88%!important;
    height:auto!important;
    margin:0 auto!important;
    padding:0!important;
    filter:none!important;
    -webkit-filter:none!important;
    mix-blend-mode:normal!important;
    transform:none!important;
  }
  .hero-wrap .hero-brand-logo img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    margin:0 auto!important;
    object-fit:contain!important;
    opacity:1!important;
    filter:none!important;
    -webkit-filter:none!important;
    mix-blend-mode:normal!important;
    transform:none!important;
  }
  .hero-wrap .hero-brand-logo picture{display:block!important;width:100%!important;height:auto!important}
  .hero-wrap .intermediate-hero-title{display:none!important}

  .hero-wrap .hero-content .mobile-hero-after-card{
    order:3!important;
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .hero-wrap .mobile-hero-headline,
  .hero-wrap .mobile-hero-cta,
  .hero-wrap .mobile-hero-points{display:none!important;visibility:hidden!important}
  .hero-wrap .hero-content .mobile-hero-after-card p,
  .hero-wrap .hero-content p{
    display:block!important;
    width:min(94%,760px)!important;
    max-width:94%!important;
    margin:clamp(18px,2vw,24px) auto 0!important;
    padding:0!important;
    color:#26324d!important;
    font-size:clamp(11.5px,1.22vw,15px)!important;
    line-height:1.85!important;
    font-weight:700!important;
    text-align:center!important;
    text-wrap:balance!important;
  }
  .hero-wrap br.intermediate-copy-break{display:inline!important}

  /* PARTNERS: label on RIGHT, logos on LEFT, desktop-like single row. */
  .hero-wrap .hero.panel .brand-strip.glass,
  .hero-wrap .hero.panel .brand-strip,
  .hero-wrap .hero .brand-strip.glass,
  .hero-wrap .hero .brand-strip,
  .hero-wrap .brand-strip.glass,
  .hero-wrap .brand-strip{
    order:2!important;
    position:relative!important;
    z-index:10!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    direction:rtl!important;
    width:calc(100% - clamp(32px,8vw,96px))!important;
    max-width:980px!important;
    height:clamp(62px,7vw,78px)!important;
    min-height:62px!important;
    margin:clamp(22px,2.8vw,32px) auto 0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.96)!important;
    border-radius:clamp(18px,2vw,24px)!important;
    background:rgba(255,255,255,.84)!important;
    box-shadow:0 12px 36px rgba(50,44,130,.08)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    backdrop-filter:blur(14px)!important;
    transform:none!important;
  }
  .hero-wrap .brand-strip .brand-badge,
  .hero-wrap .brand-strip.glass .brand-badge{
    order:0!important;
    flex:0 0 clamp(110px,15vw,170px)!important;
    width:auto!important;
    height:100%!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    padding:0 clamp(8px,1.2vw,14px)!important;
    border-radius:0!important;
    background:rgba(255,255,255,.34)!important;
    color:#535f78!important;
    font-size:clamp(9px,.95vw,11px)!important;
    line-height:1.5!important;
    font-weight:700!important;
    text-align:center!important;
  }
  .hero-wrap .brand-strip .brand-logos,
  .hero-wrap .brand-strip.glass .brand-logos{
    order:1!important;
    flex:1 1 auto!important;
    min-width:0!important;
    height:100%!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:clamp(6px,1.6vw,18px)!important;
    margin:0!important;
    padding:7px clamp(8px,1.7vw,20px)!important;
    direction:ltr!important;
    filter:grayscale(1)!important;
    opacity:.80!important;
  }
  .hero-wrap .brand-strip .brand-logos span,
  .hero-wrap .brand-strip.glass .brand-logos span{
    display:grid!important;
    place-items:center!important;
    min-width:0!important;
    min-height:0!important;
    width:auto!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .hero-wrap .brand-strip .brand-logos img,
  .hero-wrap .brand-strip.glass .brand-logos img{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:clamp(30px,4.2vw,50px)!important;
    margin:0 auto!important;
    object-fit:contain!important;
    opacity:1!important;
    filter:none!important;
    transform:none!important;
  }

  /* SOCIALS: exact horizontal center after partners; then hero ends after clean breathing room. */
  .hero-wrap .hero.panel .social-side,
  .hero-wrap .hero .social-side,
  .hero-wrap .social-side{
    order:3!important;
    position:relative!important;
    z-index:11!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    display:flex!important;
    visibility:visible!important;
    opacity:.96!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:center!important;
    width:max-content!important;
    height:auto!important;
    margin:clamp(15px,1.8vw,22px) auto 0!important;
    padding:0!important;
    gap:clamp(18px,2vw,24px)!important;
    direction:rtl!important;
    color:#10172f!important;
    transform:none!important;
  }
  .hero-wrap .social-side .side-line{display:none!important}
  .hero-wrap .social-side a{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    place-items:center!important;
    width:20px!important;
    height:20px!important;
    margin:0!important;
    padding:0!important;
    font-size:15px!important;
  }
}

/* ============================================================
   FIX 308 - STATS TABLET "WHY US" COMPOSITION
   Scope: 721px-1180px ONLY.
   Reuses the mobile Why Us content and glass-card language in a tablet 2x2
   composition. The approved 625px-720px and 1181px-1250px layouts are isolated.
============================================================ */
@media (min-width:721px) and (max-width:1180px){
  .stats-panel{
    box-sizing:border-box !important;
    width:min(calc(100% - 40px),1060px) !important;
    min-height:0 !important;
    margin:clamp(56px,6vw,72px) auto 0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:auto !important;
    gap:clamp(16px,2vw,22px) !important;
    align-items:stretch !important;
    color:#07132f !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .stats-panel::before,
  .stats-panel::after{
    display:none !important;
    content:none !important;
  }

  .stats-panel > .mobile-stats-intro{
    display:block !important;
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:680px !important;
    margin:0 auto clamp(14px,2vw,22px) !important;
    padding:0 clamp(10px,2vw,22px) !important;
    text-align:center !important;
  }

  .stats-panel > .mobile-stats-intro .eyebrow{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    margin:0 0 14px !important;
    color:#3157a8 !important;
    font-size:13px !important;
    line-height:1.5 !important;
    font-weight:900 !important;
  }

  .stats-panel > .mobile-stats-intro .eyebrow span{
    width:9px !important;
    height:9px !important;
    flex:0 0 9px !important;
    border-radius:50% !important;
    background:linear-gradient(135deg,#3157a8,#a642ff) !important;
    box-shadow:0 0 14px rgba(120,75,255,.26) !important;
  }

  .stats-panel > .mobile-stats-intro h2{
    margin:0 0 12px !important;
    color:#07132f !important;
    font-size:clamp(30px,3.5vw,38px) !important;
    line-height:1.42 !important;
    font-weight:950 !important;
    letter-spacing:-.65px !important;
  }

  .stats-panel > .mobile-stats-intro p{
    max-width:570px !important;
    margin:0 auto !important;
    color:#667085 !important;
    font-size:clamp(13px,1.35vw,14px) !important;
    line-height:2.05 !important;
  }

  .stats-panel > .stat:not(.mobile-stats-intro){
    box-sizing:border-box !important;
    position:relative !important;
    display:grid !important;
    grid-template-columns:clamp(54px,6vw,62px) minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:clamp(13px,1.7vw,19px) !important;
    row-gap:4px !important;
    align-items:center !important;
    justify-content:stretch !important;
    min-width:0 !important;
    min-height:clamp(142px,15vw,164px) !important;
    padding:clamp(20px,2.4vw,27px) clamp(18px,2.5vw,30px) !important;
    direction:rtl !important;
    text-align:right !important;
    border:1px solid rgba(255,255,255,.88) !important;
    border-radius:clamp(25px,2.8vw,30px) !important;
    background:
      radial-gradient(circle at 78% 0%,rgba(255,255,255,.98),rgba(255,255,255,.54) 46%,rgba(250,247,255,.34) 100%) !important;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -24px 48px rgba(125,92,255,.045),
      0 18px 48px rgba(60,68,150,.075),
      0 0 28px rgba(255,255,255,.52) !important;
    backdrop-filter:blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(150%) !important;
    overflow:hidden !important;
  }

  .stats-panel > .stat:not(.mobile-stats-intro)::before{
    content:"" !important;
    position:absolute !important;
    display:block !important;
    inset:10px !important;
    border:1px solid rgba(255,255,255,.64) !important;
    border-radius:clamp(19px,2.2vw,24px) !important;
    pointer-events:none !important;
  }

  .stats-panel > .stat:not(.mobile-stats-intro) i{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    justify-self:center !important;
    display:grid !important;
    place-items:center !important;
    width:clamp(54px,6vw,62px) !important;
    height:clamp(54px,6vw,62px) !important;
    min-width:0 !important;
    margin:0 !important;
    color:#6536ff !important;
    border:1px solid rgba(255,255,255,.8) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.48) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 10px 26px rgba(93,77,180,.09) !important;
    text-shadow:none !important;
  }

  .stats-panel > .stat:not(.mobile-stats-intro) i svg{
    display:block !important;
    width:clamp(29px,3.2vw,34px) !important;
    height:clamp(29px,3.2vw,34px) !important;
    fill:none !important;
    stroke:#6536ff !important;
    stroke-width:3 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    filter:drop-shadow(0 0 5px rgba(101,54,255,.2)) !important;
  }

  .stats-panel > .stat:not(.mobile-stats-intro) small{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:end !important;
    justify-self:stretch !important;
    display:block !important;
    min-width:0 !important;
    margin:0 !important;
    color:#07132f !important;
    font-size:clamp(13.5px,1.45vw,15px) !important;
    line-height:1.45 !important;
    font-weight:900 !important;
    direction:rtl !important;
    text-align:right !important;
    white-space:normal !important;
  }

  .stats-panel > .stat:not(.mobile-stats-intro) em{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    justify-self:stretch !important;
    display:block !important;
    min-width:0 !important;
    margin:0 !important;
    color:#858ca0 !important;
    font-size:clamp(10.8px,1.15vw,12px) !important;
    line-height:1.55 !important;
    font-weight:550 !important;
    font-style:normal !important;
    direction:rtl !important;
    text-align:right !important;
    white-space:normal !important;
  }

  .stats-panel > .stat:not(.mobile-stats-intro) strong{
    grid-column:3 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    justify-self:end !important;
    display:block !important;
    margin:0 !important;
    color:#6536ff !important;
    background:linear-gradient(135deg,#4b3f8f,#6c5ce7,#304b8f) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    font-size:clamp(36px,4.2vw,44px) !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:-1px !important;
    direction:ltr !important;
    text-align:left !important;
    white-space:nowrap !important;
    text-shadow:none !important;
  }
}

/* ============================================================
   FIX 307 - ABOUT RESPONSIVE CONTINUITY
   Scope: About only.
   - Keep the approved single-column tablet composition through 1250px.
   - Prevent legacy mobile rules from undersizing the About artwork on tablets.
============================================================ */
@media (min-width:1181px) and (max-width:1250px){
  .rhb-about-section{
    width:calc(100% - 28px) !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:46px 26px !important;
    gap:34px !important;
  }

  .rhb-about-visual{
    order:2 !important;
    justify-content:center !important;
    width:100% !important;
  }

  .rhb-about-content{
    order:1 !important;
    justify-self:center !important;
    text-align:center !important;
    max-width:720px !important;
    padding:0 !important;
  }

  .rhb-about-title{
    font-size:44px !important;
    white-space:normal !important;
    letter-spacing:-1.4px !important;
  }

  .rhb-about-intro{
    max-width:650px !important;
  }

  .rhb-about-card-shell{
    width:min(520px,100%) !important;
    height:auto !important;
    aspect-ratio:580/790 !important;
    max-height:none !important;
  }

  .rhb-about-feature{
    grid-template-columns:82px 30px minmax(0,1fr) !important;
    min-height:118px !important;
    text-align:right !important;
  }
}

@media (min-width:625px) and (max-width:760px){
  .rhb-about-card-shell{
    width:min(520px,100%) !important;
    max-width:520px !important;
  }
}

/* ============================================================
   FIX 305 - INTERMEDIATE SERVICES REFERENCE LAYOUT
   Scope: #services at 625px-1249px ONLY.
   Header, hero, mobile (<=624px), desktop (>=1250px), and later sections stay locked.
============================================================ */
@media (min-width:625px) and (max-width:1249px){
  #services.services-section{
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    max-width:1180px !important;
    min-height:0 !important;
    margin:clamp(54px,6vw,76px) auto 0 !important;
    overflow:visible !important;
    background:transparent !important;
    isolation:isolate !important;
  }

  #services > .molecule-bg,
  #services > .neural-orb,
  #services .service-mesh{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  #services .services-copy,
  #services .services-grid{
    position:relative !important;
    z-index:2 !important;
    float:none !important;
    transform:none !important;
  }

  #services .services-copy .eyebrow{
    display:flex !important;
    align-items:center !important;
    color:#3154ad !important;
    font-size:13px !important;
    line-height:1.7 !important;
    font-weight:900 !important;
  }

  #services .services-copy .eyebrow span{
    display:block !important;
    flex:0 0 auto !important;
    width:9px !important;
    height:9px !important;
    border:0 !important;
    border-radius:50% !important;
    background:#4965bd !important;
    box-shadow:none !important;
  }

  #services .services-copy h2{
    color:#07122f !important;
    font-weight:900 !important;
    letter-spacing:-1.15px !important;
    white-space:normal !important;
  }

  #services .services-copy p{
    color:#17233f !important;
    font-weight:500 !important;
  }

  #services .services-grid{
    box-sizing:border-box !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  #services .services-grid::before,
  #services .services-grid::after{
    content:none !important;
    display:none !important;
  }

  #services .service-card{
    position:relative !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
    text-align:center !important;
    direction:rtl !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 50% 7%,rgba(255,255,255,.94),rgba(255,255,255,.46) 48%,rgba(249,248,255,.36) 100%),
      linear-gradient(180deg,rgba(255,255,255,.64),rgba(246,245,253,.44)) !important;
    border:1px solid rgba(255,255,255,.92) !important;
    box-shadow:
      inset 0 0 0 1px rgba(76,99,177,.035),
      inset 0 1px 0 rgba(255,255,255,1),
      0 18px 46px rgba(52,69,132,.055) !important;
    -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
    backdrop-filter:blur(18px) saturate(125%) !important;
    transition:transform .24s ease,box-shadow .24s ease,background .24s ease !important;
  }

  #services .service-card::before{
    content:"" !important;
    position:absolute !important;
    inset:7px !important;
    z-index:1 !important;
    display:block !important;
    border:1px solid rgba(255,255,255,.76) !important;
    background:transparent !important;
    box-shadow:inset 0 0 26px rgba(255,255,255,.20) !important;
    pointer-events:none !important;
  }

  #services .service-card::after{
    content:none !important;
    display:none !important;
  }

  #services .service-card > *{
    position:relative !important;
    z-index:2 !important;
  }

  #services .service-card:hover{
    transform:translateY(-4px) !important;
    background:
      radial-gradient(circle at 50% 7%,rgba(255,255,255,1),rgba(255,255,255,.58) 50%,rgba(249,248,255,.44) 100%),
      linear-gradient(180deg,rgba(255,255,255,.72),rgba(246,245,253,.50)) !important;
    box-shadow:inset 0 0 0 1px rgba(76,99,177,.045),0 22px 52px rgba(52,69,132,.085) !important;
  }

  #services .service-card i{
    flex:0 0 auto !important;
    display:grid !important;
    place-items:center !important;
    width:62px !important;
    height:62px !important;
    margin:0 auto 17px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:18px !important;
    color:#3157bd !important;
    background:
      radial-gradient(circle at 35% 25%,rgba(255,255,255,.98),rgba(255,255,255,0) 58%),
      linear-gradient(145deg,rgba(235,238,250,.92),rgba(246,245,253,.56)) !important;
    box-shadow:0 10px 26px rgba(48,72,158,.075),inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  #services .service-card i svg{
    display:block !important;
    width:36px !important;
    height:36px !important;
    max-width:none !important;
    margin:auto !important;
    fill:none !important;
    stroke:#3157bd !important;
    stroke-width:3.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    filter:drop-shadow(0 0 3px rgba(49,87,189,.14)) !important;
  }

  #services .service-card h3{
    width:100% !important;
    min-height:0 !important;
    margin:0 0 8px !important;
    color:#0b1734 !important;
    font-size:17px !important;
    line-height:1.45 !important;
    font-weight:900 !important;
    text-align:center !important;
  }

  #services .service-card p{
    width:100% !important;
    max-width:210px !important;
    margin:0 auto !important;
    color:#657087 !important;
    font-size:12px !important;
    line-height:1.9 !important;
    font-weight:500 !important;
    text-align:center !important;
  }
}

/* Reference composition: copy on the right, a 3 by 2 card grid on the left.
   The tracks are sized from the real inner width so the layout never clips at
   the 900px boundary and keeps balanced physical gutters through 1249px. */
@media (min-width:900px) and (max-width:1249px){
  #services.services-section{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,760px) clamp(240px,22.5vw,280px) !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    justify-content:center !important;
    column-gap:clamp(28px,3vw,38px) !important;
    row-gap:0 !important;
    direction:ltr !important;
    padding:clamp(46px,4.2vw,54px) clamp(32px,4vw,50px) clamp(48px,4.5vw,58px) !important;
  }

  #services .services-grid{
    grid-column:1 !important;
    grid-row:1 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:none !important;
    grid-auto-rows:minmax(232px,auto) !important;
    gap:clamp(20px,2vw,25px) clamp(18px,2vw,24px) !important;
    width:100% !important;
    max-width:760px !important;
    min-width:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    direction:rtl !important;
  }

  #services .services-copy{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:stretch !important;
    order:initial !important;
    width:100% !important;
    max-width:280px !important;
    margin:0 !important;
    padding:0 !important;
    direction:rtl !important;
    text-align:right !important;
  }

  #services .services-copy .eyebrow{
    justify-content:flex-start !important;
    gap:10px !important;
    margin:0 0 clamp(18px,2vw,24px) !important;
    text-align:right !important;
  }

  #services .services-copy h2{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 clamp(18px,2vw,24px) !important;
    font-size:clamp(36px,3.55vw,44px) !important;
    line-height:1.26 !important;
    letter-spacing:-.85px !important;
    text-align:right !important;
    text-wrap:balance !important;
  }

  #services .services-copy p{
    width:100% !important;
    max-width:280px !important;
    margin:0 !important;
    font-size:clamp(13px,1.15vw,14px) !important;
    line-height:2.08 !important;
    text-align:right !important;
  }

  #services .service-card{
    min-height:232px !important;
    padding:clamp(22px,2vw,26px) clamp(13px,1.5vw,18px) 20px !important;
    border-radius:clamp(25px,2.5vw,30px) !important;
  }

  #services .service-card::before{
    border-radius:clamp(19px,2vw,24px) !important;
  }

  #services .service-card i{
    width:clamp(56px,5.2vw,64px) !important;
    height:clamp(56px,5.2vw,64px) !important;
    margin-bottom:14px !important;
  }

  #services .service-card i svg{
    width:clamp(32px,3vw,36px) !important;
    height:clamp(32px,3vw,36px) !important;
  }

  #services .service-card h3{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:48px !important;
    margin-bottom:7px !important;
    font-size:clamp(15px,1.45vw,17px) !important;
    line-height:1.55 !important;
  }

  #services .service-card p{
    max-width:220px !important;
    font-size:clamp(11.3px,1.05vw,12px) !important;
    line-height:1.9 !important;
  }
}

/* Tablet composition: the same content and card language in a balanced 2 by 3 grid. */
@media (min-width:625px) and (max-width:899px){
  #services.services-section{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:34px !important;
    padding:clamp(42px,6vw,56px) clamp(18px,4vw,34px) clamp(48px,6vw,62px) !important;
    direction:rtl !important;
  }

  #services .services-copy{
    order:1 !important;
    width:100% !important;
    max-width:680px !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
  }

  #services .services-copy .eyebrow{
    justify-content:center !important;
    gap:9px !important;
    margin:0 auto 18px !important;
    text-align:center !important;
  }

  #services .services-copy h2{
    width:100% !important;
    max-width:620px !important;
    margin:0 auto 16px !important;
    font-size:clamp(34px,5.2vw,42px) !important;
    line-height:1.38 !important;
    text-align:center !important;
  }

  #services .services-copy p{
    max-width:570px !important;
    margin:0 auto !important;
    font-size:13.5px !important;
    line-height:2.05 !important;
    text-align:center !important;
  }

  #services .services-grid{
    order:2 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:auto !important;
    grid-auto-rows:auto !important;
    gap:18px !important;
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
    padding:0 !important;
    direction:rtl !important;
  }

  #services .service-card{
    min-height:186px !important;
    padding:23px 18px 19px !important;
    border-radius:27px !important;
  }

  #services .service-card::before{
    border-radius:21px !important;
  }
}

/* ============================================================
   FIX 303 - INTERMEDIATE VIEWPORT CENTER + ASYMMETRIC HERO FADE
   Scope: 625px–1249px ONLY.
   Keeps the orb clear at the top while restoring strong side/bottom blending.
============================================================ */
@media (min-width:1181px) and (max-width:1249px){
  /* Center the 100vw shell against the viewport itself. Unlike the former
     gutter-delta offset, this stays correct when .page changes at 1181px. */
  .hero-wrap{
    left:50%!important;
    right:auto!important;
    width:100vw!important;
    max-width:none!important;
    transform:translateX(-50%)!important;
  }
}

/* ============================================================
   FIX 304 - INTERMEDIATE EDGE-TO-EDGE SHELL + ROUNDED HERO END
   Scope: 625px–1249px ONLY.
   Uses equal physical viewport margins so RTL and parent gutters cannot
   introduce a left/right strip at 761px or 1181px.
============================================================ */
@media (min-width:625px) and (max-width:1249px){
  .hero-wrap{
    left:auto!important;
    right:auto!important;
    width:100vw!important;
    max-width:none!important;
    margin-top:0!important;
    margin-right:calc(50% - 50vw)!important;
    margin-bottom:0!important;
    margin-left:calc(50% - 50vw)!important;
    border-radius:0 0 clamp(28px,3.2vw,42px) clamp(28px,3.2vw,42px)!important;
    overflow:hidden!important;
    transform:none!important;
  }
}

@media (min-width:625px) and (max-width:1249px){
  /* Preserve the complete upper arc; fade the artwork decisively before the
     copy begins. Side blending is supplied by the independent overlay below. */
  .hero-wrap .hero.panel .hero-bg,
  .hero-wrap .hero .hero-bg,
  .hero-wrap .hero-bg{
    -webkit-mask-image:linear-gradient(180deg,
      #000 0%,
      #000 54%,
      rgba(0,0,0,.94) 63%,
      rgba(0,0,0,.72) 74%,
      rgba(0,0,0,.28) 88%,
      transparent 100%)!important;
    mask-image:linear-gradient(180deg,
      #000 0%,
      #000 54%,
      rgba(0,0,0,.94) 63%,
      rgba(0,0,0,.72) 74%,
      rgba(0,0,0,.28) 88%,
      transparent 100%)!important;
  }

  .hero-wrap .hero.panel .hero-fade,
  .hero-wrap .hero .hero-fade,
  .hero-wrap .hero-fade{
    background:
      linear-gradient(180deg,
        transparent 0%,
        transparent 53%,
        rgba(244,242,255,.10) 61%,
        rgba(244,242,255,.34) 70%,
        rgba(244,242,255,.74) 82%,
        rgba(244,242,255,.96) 93%,
        #f4f2ff 100%),
      linear-gradient(90deg,
        #f4f2ff 0%,
        rgba(244,242,255,.88) 4%,
        rgba(244,242,255,.44) 11%,
        rgba(244,242,255,.10) 19%,
        transparent 28%,
        transparent 72%,
        rgba(244,242,255,.10) 81%,
        rgba(244,242,255,.44) 89%,
        rgba(244,242,255,.88) 96%,
        #f4f2ff 100%),
      linear-gradient(180deg,
        rgba(244,242,255,.08) 0%,
        rgba(244,242,255,.025) 9%,
        transparent 18%)!important;
  }
}

/* ============================================================
   FIX 309 - INTERMEDIATE PROCESS RESPONSIVE CARD FLOW
   Scope: #solutions at 721px-1249px ONLY.
   Keeps 625px-720px and desktop from 1250px unchanged.
============================================================ */
@media (min-width:721px) and (max-width:1249px){
  #solutions.process-section{
    position:relative !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:calc(100% - clamp(34px,5.4vw,68px)) !important;
    max-width:1180px !important;
    min-height:0 !important;
    margin:clamp(58px,6vw,76px) auto 0 !important;
    padding:clamp(34px,4.2vw,50px) clamp(16px,3vw,32px) clamp(42px,4.8vw,58px) !important;
    gap:clamp(30px,3.5vw,42px) !important;
    direction:rtl !important;
    overflow:visible !important;
  }

  #solutions .process-copy,
  #solutions .process-intro{
    order:1 !important;
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
  }

  #solutions .process-copy .eyebrow,
  #solutions .process-intro .eyebrow{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    margin:0 auto 14px !important;
    color:#3157a8 !important;
    font-size:13px !important;
    line-height:1.7 !important;
    font-weight:900 !important;
    text-align:center !important;
  }

  #solutions .process-copy .eyebrow span,
  #solutions .process-intro .eyebrow span{
    flex:0 0 auto !important;
    width:9px !important;
    height:9px !important;
    border:0 !important;
    border-radius:50% !important;
    background:linear-gradient(135deg,#3157a8,#9b4de2) !important;
    box-shadow:0 0 13px rgba(98,67,204,.20) !important;
  }

  #solutions .process-copy h2,
  #solutions .process-intro h2{
    width:100% !important;
    max-width:720px !important;
    margin:0 auto 13px !important;
    color:#07132f !important;
    font-size:clamp(36px,4vw,46px) !important;
    line-height:1.35 !important;
    font-weight:950 !important;
    letter-spacing:-.8px !important;
    text-align:center !important;
    text-wrap:balance !important;
  }

  #solutions .process-copy p,
  #solutions .process-intro p{
    width:100% !important;
    max-width:570px !important;
    margin:0 auto !important;
    color:#687287 !important;
    font-size:clamp(13px,1.25vw,14px) !important;
    line-height:2.05 !important;
    font-weight:500 !important;
    text-align:center !important;
  }

  #solutions .steps-line,
  #solutions .process-timeline{
    order:2 !important;
    grid-column:auto !important;
    grid-row:auto !important;
    position:relative !important;
    box-sizing:border-box !important;
    display:grid !important;
    width:100% !important;
    max-width:1080px !important;
    margin:0 auto !important;
    padding:0 !important;
    gap:clamp(15px,1.8vw,21px) !important;
    align-items:stretch !important;
    direction:rtl !important;
  }

  #solutions .steps-line::before,
  #solutions .steps-line::after,
  #solutions .process-timeline::before,
  #solutions .process-timeline::after{
    content:none !important;
    display:none !important;
  }

  #solutions .steps-line .step,
  #solutions .process-timeline .process-step{
    position:relative !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    min-height:clamp(184px,17vw,206px) !important;
    margin:0 !important;
    padding:clamp(22px,2.4vw,28px) clamp(16px,2vw,23px) 21px !important;
    border:1px solid rgba(255,255,255,.90) !important;
    border-radius:clamp(24px,2.4vw,29px) !important;
    text-align:center !important;
    background:
      linear-gradient(90deg,transparent,rgba(255,255,255,.94),transparent) 50% 0/66% 1px no-repeat,
      radial-gradient(circle at 50% 4%,rgba(255,255,255,.96),rgba(255,255,255,.52) 48%,rgba(248,247,255,.30) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -22px 44px rgba(98,74,190,.035),
      0 16px 42px rgba(52,67,137,.06) !important;
    -webkit-backdrop-filter:blur(19px) saturate(145%) !important;
    backdrop-filter:blur(19px) saturate(145%) !important;
    overflow:hidden !important;
    transition:transform .24s ease,box-shadow .24s ease !important;
    z-index:1 !important;
  }

  #solutions .steps-line .step::before,
  #solutions .process-timeline .process-step::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    right:22% !important;
    left:22% !important;
    height:3px !important;
    display:block !important;
    border-radius:0 0 999px 999px !important;
    background:linear-gradient(90deg,rgba(49,87,168,0),#3157a8 48%,rgba(155,77,226,.72) 75%,rgba(155,77,226,0)) !important;
    opacity:.48 !important;
  }

  #solutions .steps-line .step:hover,
  #solutions .process-timeline .process-step:hover{
    transform:translateY(-3px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -22px 44px rgba(98,74,190,.045),
      0 21px 48px rgba(52,67,137,.085) !important;
  }

  #solutions .steps-line .step .process-svg-icon,
  #solutions .steps-line .step > div,
  #solutions .process-timeline .process-step .process-icon{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    flex:0 0 auto !important;
    display:grid !important;
    place-items:center !important;
    width:clamp(58px,6vw,68px) !important;
    height:clamp(58px,6vw,68px) !important;
    min-width:clamp(58px,6vw,68px) !important;
    min-height:clamp(58px,6vw,68px) !important;
    margin:0 auto 13px !important;
    border:1px solid rgba(255,255,255,.90) !important;
    border-radius:21px !important;
    color:#3157a8 !important;
    background:
      radial-gradient(circle at 32% 24%,rgba(255,255,255,1),rgba(255,255,255,.50) 58%,rgba(237,239,250,.52)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 10px 25px rgba(61,77,151,.075) !important;
    transform:none !important;
    transition:none !important;
  }

  #solutions .steps-line .step .process-svg-icon::before,
  #solutions .steps-line .step > div::before,
  #solutions .process-timeline .process-step .process-icon::before{
    content:none !important;
    display:none !important;
  }

  #solutions .steps-line .step .process-svg-icon svg,
  #solutions .steps-line .step > div svg,
  #solutions .process-timeline .process-step .process-icon svg{
    display:block !important;
    width:clamp(31px,3.2vw,36px) !important;
    height:clamp(31px,3.2vw,36px) !important;
    overflow:visible !important;
    fill:none !important;
    stroke:#3157a8 !important;
    stroke-width:2.7 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    filter:drop-shadow(0 0 4px rgba(49,87,168,.14)) !important;
  }

  #solutions .steps-line .step b,
  #solutions .process-timeline .process-step .process-number{
    position:absolute !important;
    top:16px !important;
    left:16px !important;
    display:grid !important;
    place-items:center !important;
    width:40px !important;
    height:40px !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.90) !important;
    border-radius:14px !important;
    color:#3157a8 !important;
    background:rgba(255,255,255,.64) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 8px 20px rgba(64,76,147,.06) !important;
    font-size:13px !important;
    line-height:1 !important;
    font-weight:950 !important;
    transform:none !important;
    z-index:2 !important;
  }

  #solutions .steps-line .step h3,
  #solutions .process-timeline .process-step h3{
    width:100% !important;
    margin:0 0 7px !important;
    color:#0a1633 !important;
    font-size:clamp(15.5px,1.45vw,17px) !important;
    line-height:1.55 !important;
    font-weight:950 !important;
    text-align:center !important;
  }

  #solutions .steps-line .step h3::before,
  #solutions .process-timeline .process-step h3::before{
    content:none !important;
    display:none !important;
  }

  #solutions .steps-line .step p,
  #solutions .process-timeline .process-step p{
    width:100% !important;
    max-width:245px !important;
    margin:0 auto !important;
    color:#687287 !important;
    font-size:clamp(11.5px,1.05vw,12.4px) !important;
    line-height:1.95 !important;
    font-weight:500 !important;
    text-align:center !important;
  }
}

/* Tablet: two balanced columns with the final support phase centered below. */
@media (min-width:721px) and (max-width:899px){
  #solutions.process-section{
    width:calc(100% - 30px) !important;
    padding-right:clamp(14px,2.8vw,22px) !important;
    padding-left:clamp(14px,2.8vw,22px) !important;
  }

  #solutions .steps-line,
  #solutions .process-timeline{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #solutions .steps-line .step:nth-child(5),
  #solutions .process-timeline .process-step:nth-child(5){
    grid-column:1 / -1 !important;
    justify-self:center !important;
    width:calc(50% - 8px) !important;
  }
}

/* Wider intermediate: a deliberate 3 + 2 sequence with equal rows. */
@media (min-width:900px) and (max-width:1249px){
  #solutions .steps-line,
  #solutions .process-timeline{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }

  #solutions .steps-line .step:nth-child(-n+3),
  #solutions .process-timeline .process-step:nth-child(-n+3){
    grid-column:span 2 !important;
  }

  #solutions .steps-line .step:nth-child(n+4),
  #solutions .process-timeline .process-step:nth-child(n+4){
    grid-column:span 3 !important;
  }
}

/* ============================================================
   FIX 310 - PROJECTS INTERMEDIATE BOUNDARY + FULL-WIDTH CAROUSEL
   Scope: #projects only.
   - 721px-760px continues the existing mobile stage used by JavaScript.
   - 761px-1100px stays exactly on the established layout.
   - 1101px-1250px uses top copy plus three rotating cards below.
============================================================ */
@media (min-width:1101px) and (max-width:1250px){
  #projects.projects-panel{
    --rhb-projects-gap:clamp(18px,2vw,24px);
    position:relative !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    align-items:start !important;
    width:calc(100% - clamp(28px,4vw,56px)) !important;
    max-width:1180px !important;
    min-height:0 !important;
    margin:clamp(68px,6vw,80px) auto 0 !important;
    padding:clamp(30px,3vw,40px) clamp(28px,3.4vw,44px) clamp(32px,3.2vw,42px) !important;
    gap:clamp(25px,2.8vw,34px) !important;
    border-radius:clamp(26px,2.5vw,32px) !important;
    overflow:hidden !important;
  }

  #projects .projects-copy{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:center !important;
    width:100% !important;
    max-width:720px !important;
    margin:0 auto !important;
    padding:0 clamp(10px,2vw,24px) !important;
    text-align:center !important;
  }

  #projects .projects-copy small{
    display:inline-block !important;
    margin:0 0 10px !important;
    font-size:13px !important;
    line-height:1.7 !important;
  }

  #projects .projects-copy h2{
    margin:0 0 12px !important;
    font-size:clamp(34px,3.15vw,40px) !important;
    line-height:1.4 !important;
    letter-spacing:-.8px !important;
    text-align:center !important;
  }

  #projects .projects-copy p{
    width:100% !important;
    max-width:640px !important;
    margin:0 auto !important;
    font-size:clamp(13px,1.15vw,14px) !important;
    line-height:2.05 !important;
    text-align:center !important;
  }

  #projects .project-arrows,
  #projects .slider-next{
    display:none !important;
  }

  #projects .projects-carousel{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:stretch !important;
    width:100% !important;
    min-width:0 !important;
    height:clamp(300px,27vw,340px) !important;
    min-height:300px !important;
    margin:0 !important;
    border-radius:clamp(22px,2vw,26px) !important;
    overflow:hidden !important;
  }

  #projects .projects-track{
    display:flex !important;
    width:auto !important;
    height:100% !important;
    gap:var(--rhb-projects-gap) !important;
    padding:0 !important;
    align-items:stretch !important;
  }

  #projects .projects-track .project-card{
    flex:0 0 calc((100% - var(--rhb-projects-gap) - var(--rhb-projects-gap)) / 3) !important;
    width:calc((100% - var(--rhb-projects-gap) - var(--rhb-projects-gap)) / 3) !important;
    max-width:calc((100% - var(--rhb-projects-gap) - var(--rhb-projects-gap)) / 3) !important;
    min-width:0 !important;
    min-height:0 !important;
    height:100% !important;
    padding:clamp(15px,1.6vw,19px) !important;
    border-radius:clamp(21px,2vw,25px) !important;
  }

  #projects .projects-track .project-card h3{
    margin-bottom:10px !important;
    font-size:clamp(15px,1.45vw,17px) !important;
    line-height:1.65 !important;
  }

  #projects .projects-track .project-card .project-tag{
    font-size:11px !important;
    line-height:1.25 !important;
    padding:6px 11px !important;
  }
}

/* ============================================================
   FIX 311 - CTA TABLET ART + INTERMEDIATE FOOTER ORDER
   Scope: CTA at 625px-760px; Footer at 768px-1100px only.
   Locked sections and the 761px-767px gap remain untouched.
============================================================ */

/* Tablet CTA: a dedicated wide continuation of the approved mobile portal. */
@media (min-width:625px) and (max-width:760px){
  .footer-island .cta-panel,
  .cta-panel{
    box-sizing:border-box !important;
    width:100% !important;
    height:clamp(360px,54vw,400px) !important;
    min-height:clamp(360px,54vw,400px) !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:clamp(24px,3.8vw,30px) !important;
    overflow:hidden !important;
    background-image:
      linear-gradient(90deg,rgba(3,6,24,.28) 0%,rgba(3,6,24,.42) 48%,rgba(3,6,24,.24) 100%),
      radial-gradient(circle at 50% 56%,rgba(25,18,78,.08),rgba(3,6,24,.18) 78%),
      url('../img/cta-tablet-portal.webp') !important;
    background-size:cover,cover,cover !important;
    background-position:center center,center center,center center !important;
    background-repeat:no-repeat !important;
  }

  .footer-island .cta-copy,
  .cta-copy{
    box-sizing:border-box !important;
    position:relative !important;
    inset:auto !important;
    z-index:3 !important;
    width:min(560px,calc(100% - 56px)) !important;
    max-width:560px !important;
    margin:0 auto !important;
    padding:clamp(20px,3.4vw,26px) clamp(18px,3.8vw,30px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  .footer-island .cta-copy h2,
  .cta-copy h2{
    max-width:520px !important;
    margin:0 auto 10px !important;
    color:#fff !important;
    font-size:clamp(27px,4.4vw,32px) !important;
    line-height:1.48 !important;
    letter-spacing:-.55px !important;
    text-align:center !important;
    text-shadow:0 10px 30px rgba(1,3,16,.52) !important;
  }

  .footer-island .cta-copy p,
  .cta-copy p{
    width:100% !important;
    max-width:500px !important;
    margin:0 auto 18px !important;
    color:rgba(255,255,255,.86) !important;
    font-size:clamp(12.5px,1.85vw,13.5px) !important;
    line-height:2 !important;
    text-align:center !important;
    text-shadow:0 8px 24px rgba(1,3,16,.42) !important;
  }

  .footer-island .cta-copy .btn,
  .footer-island .cta-copy .cta-header-btn,
  .cta-copy .btn,
  .cta-copy .cta-header-btn{
    margin:0 auto !important;
    align-self:center !important;
  }
}

/* Intermediate footer: four clear blocks, then centered socials, then copyright. */
@media (min-width:768px) and (max-width:1100px){
  .footer-island .footer.rhb-footer,
  .footer-island footer.footer,
  .footer.rhb-footer,
  footer.footer{
    position:relative !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "brand links"
      "services contact"
      "copyright copyright" !important;
    gap:clamp(16px,2.4vw,24px) !important;
    align-items:stretch !important;
    width:100% !important;
    min-height:0 !important;
    margin:14px 0 0 !important;
    padding:clamp(26px,3.2vw,34px) clamp(22px,3.5vw,38px) 18px !important;
    border-radius:28px !important;
  }

  .footer-island .footer-brand,
  .footer-brand{grid-area:brand !important;position:static !important;}
  .footer-island .footer-links,
  .footer-links{grid-area:links !important;}
  .footer-island .footer-services,
  .footer-services{grid-area:services !important;}
  .footer-island .footer-contact,
  .footer-contact{grid-area:contact !important;}

  .footer-island .footer-col,
  .footer-col{
    box-sizing:border-box !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:clamp(20px,2.7vw,28px) !important;
    border:1px solid rgba(255,255,255,.72) !important;
    border-radius:22px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.38)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 12px 32px rgba(50,62,130,.055) !important;
    text-align:right !important;
  }

  .footer-island .footer-col::after,
  .footer-island .footer-col:not(.footer-contact)::after,
  .footer-col::after,
  .footer-col:not(.footer-contact)::after{
    content:none !important;
    display:none !important;
  }

  .footer-island .footer-brand .footer-logo,
  .footer-brand .footer-logo{
    margin:0 0 16px !important;
  }

  .footer-island .footer-brand > p,
  .footer-brand > p{
    max-width:390px !important;
    margin:0 !important;
  }

  .footer-island .footer h4,
  .footer h4{
    margin:0 0 14px !important;
  }

  .footer-island .footer-social,
  .footer-social{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:82px !important;
    z-index:3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:16px !important;
    width:max-content !important;
    margin:0 !important;
    transform:translateX(-50%) !important;
  }

  .footer-island .footer-social a,
  .footer-social a{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(255,255,255,.82) !important;
    border-radius:15px !important;
    color:#111827 !important;
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.60)) !important;
    box-shadow:0 12px 28px rgba(35,45,104,.10),inset 0 1px 0 rgba(255,255,255,.92) !important;
    -webkit-backdrop-filter:blur(14px) saturate(145%) !important;
    backdrop-filter:blur(14px) saturate(145%) !important;
  }

  .footer-island .footer-social a:hover,
  .footer-social a:hover{
    color:#6f3dff !important;
    background:rgba(255,255,255,.94) !important;
    transform:translateY(-2px) !important;
  }

  .footer-island .copyright,
  .copyright{
    grid-area:copyright !important;
    width:100% !important;
    margin:78px 0 0 !important;
    padding:16px 54px 0 !important;
    border-top:1px solid rgba(111,61,255,.11) !important;
    text-align:center !important;
  }

  .footer-island .back-to-top,
  .back-to-top{
    left:22px !important;
    right:auto !important;
    bottom:18px !important;
  }
}

/* ============================================================
   FIX 312 - CTA/FOOTER REFERENCE ALIGNMENT
   Scope: CTA + shared island at 625px-760px; Footer at 768px-1100px.
   All previously locked sections and boundary gaps remain untouched.
============================================================ */

/* Keep the standalone social row exclusive to the intermediate footer.
   The nested brand social group remains active on desktop. */
.footer-social-tablet{
  display:none !important;
}

.footer-back-to-top-slot{
  display:contents;
}

@media (min-width:625px) and (max-width:760px){
  .footer-island{
    box-sizing:border-box !important;
    width:calc(100% - 8px) !important;
    margin:clamp(42px,7vw,54px) auto 0 !important;
    padding:clamp(10px,1.8vw,14px) clamp(10px,1.8vw,14px) 0 !important;
    border:1px solid rgba(255,255,255,.96) !important;
    border-radius:clamp(28px,4.5vw,34px) !important;
    overflow:hidden !important;
    isolation:isolate !important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.76) 0%,rgba(249,247,255,.67) 48%,rgba(233,226,255,.54) 100%),
      radial-gradient(circle at 50% 100%,rgba(125,88,255,.18),transparent 58%) !important;
    box-shadow:
      0 26px 72px rgba(54,49,125,.13),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
    -webkit-backdrop-filter:blur(22px) saturate(145%) !important;
    backdrop-filter:blur(22px) saturate(145%) !important;
  }

  .footer-island > .cta-panel,
  .footer-island .cta-panel,
  .cta-panel{
    width:100% !important;
    margin:0 !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
    place-items:center !important;
    border:1px solid rgba(255,255,255,.88) !important;
    border-radius:clamp(23px,3.8vw,29px) !important;
    box-shadow:
      0 20px 54px rgba(17,15,65,.17),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
  }

  .footer-island .cta-copy,
  .cta-copy{
    position:relative !important;
    inset:auto !important;
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    width:min(540px,calc(100% - 48px)) !important;
    max-width:540px !important;
    margin:0 auto !important;
    padding:clamp(19px,3.2vw,25px) clamp(16px,3.4vw,26px) !important;
    transform:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .footer-island .cta-copy h2,
  .footer-island .cta-copy p,
  .cta-copy h2,
  .cta-copy p{
    width:100% !important;
    margin-right:auto !important;
    margin-left:auto !important;
    text-align:center !important;
  }

  .footer-island .cta-copy .btn,
  .footer-island .cta-copy .cta-header-btn,
  .cta-copy .btn,
  .cta-copy .cta-header-btn{
    position:static !important;
    inset:auto !important;
    width:max-content !important;
    max-width:100% !important;
    margin-right:auto !important;
    margin-left:auto !important;
    align-self:center !important;
    justify-self:center !important;
    transform:none !important;
  }

  .footer-island > .footer.rhb-footer,
  .footer-island > footer.footer{
    width:calc(100% - clamp(16px,2.8vw,20px)) !important;
    margin:clamp(16px,2.6vw,20px) auto 0 !important;
  }
}

@media (min-width:768px) and (max-width:1100px){
  .footer-island .footer.rhb-footer,
  .footer-island footer.footer,
  .footer.rhb-footer,
  footer.footer{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "brand links"
      "services contact"
      "social social"
      "copyright copyright" !important;
    grid-template-rows:auto auto 54px auto !important;
    column-gap:clamp(16px,2.4vw,24px) !important;
    row-gap:clamp(16px,2.2vw,22px) !important;
    align-items:stretch !important;
    padding:clamp(26px,3.2vw,34px) clamp(22px,3.5vw,38px) 18px !important;
  }

  .footer-island .footer-col,
  .footer-col{
    width:100% !important;
    height:clamp(260px,25vw,278px) !important;
    min-height:clamp(260px,25vw,278px) !important;
    max-height:clamp(260px,25vw,278px) !important;
    align-self:stretch !important;
    overflow:hidden !important;
  }

  .footer-island .footer-brand > .footer-social,
  .footer-brand > .footer-social{
    display:none !important;
  }

  .footer-island .footer-social-tablet,
  .footer-social-tablet{
    grid-area:social !important;
    position:static !important;
    inset:auto !important;
    z-index:3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:center !important;
    align-self:center !important;
    gap:16px !important;
    width:max-content !important;
    height:44px !important;
    margin:0 auto !important;
    transform:none !important;
  }

  .footer-island .footer-social-tablet a,
  .footer-social-tablet a{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(255,255,255,.82) !important;
    border-radius:15px !important;
    color:#111827 !important;
    font-size:23px !important;
    font-weight:800 !important;
    line-height:1 !important;
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.60)) !important;
    box-shadow:0 12px 28px rgba(35,45,104,.10),inset 0 1px 0 rgba(255,255,255,.92) !important;
    -webkit-backdrop-filter:blur(14px) saturate(145%) !important;
    backdrop-filter:blur(14px) saturate(145%) !important;
  }

  .footer-island .footer-social-tablet a:hover,
  .footer-social-tablet a:hover{
    color:#6f3dff !important;
    background:rgba(255,255,255,.94) !important;
    transform:translateY(-2px) !important;
  }

  .footer-island .footer-social-tablet svg,
  .footer-social-tablet svg{
    width:22px !important;
    height:22px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
  }

  .footer-island .footer-social-tablet svg.x-official,
  .footer-social-tablet svg.x-official{
    display:block !important;
    width:21px !important;
    height:21px !important;
    fill:currentColor !important;
    stroke:none !important;
    stroke-width:0 !important;
    overflow:visible !important;
  }

  .footer-island .footer-social-tablet svg.x-official path,
  .footer-social-tablet svg.x-official path{
    fill:currentColor !important;
    stroke:none !important;
    stroke-width:0 !important;
  }

  .footer-island .copyright,
  .copyright{
    grid-area:copyright !important;
    margin:0 !important;
    padding:16px 54px 0 !important;
  }
}

/* ============================================================
   FIX 317 - DESKTOP FOOTER ACTION SLOT
   Scope: desktop footer only (>=1101px). Replace the duplicate
   lower social row with the existing back-to-top control.
============================================================ */
@media (min-width:1101px){
  .footer-island .footer-back-to-top-slot,
  .footer-back-to-top-slot{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:start !important;
    align-self:center !important;
    width:108px !important;
    min-height:40px !important;
    margin-top:14px !important;
  }

  .footer-island .footer-back-to-top-slot .back-to-top,
  .footer-back-to-top-slot .back-to-top{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    margin:0 !important;
    transform:none !important;
  }
}

/* FIX 313: below and including 768px, keep only the standalone footer social row. */
@media (max-width:768px){
  .footer-island .footer-brand > .footer-social,
  .footer-brand > .footer-social{
    display:none !important;
  }
}

/* ============================================================
   FIX 314 - MOBILE HEADER/HERO 425PX REFERENCE LOCK
   Scope: mobile only (<=624px). The 625px intermediate boundary
   and every later section remain untouched.

   The approved 425px composition is the vertical reference:
   viewport changes may alter width, but must not move the header,
   hero copy card, partner card, or the artwork's vertical landmarks.
============================================================ */
@media (max-width:624px){
  .hero-wrap{
    --rhb-mobile-art-layer-h:808px;
    --rhb-mobile-art-image-h:724px;
    --rhb-mobile-card-offset:289px;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    padding:10px 10px 26px !important;
  }

  /* Header keeps the approved 425px vertical geometry. Only its
     horizontal tracks and brand widths contract on narrow screens. */
  .hero-wrap .header,
  .hero-wrap .header.glass{
    box-sizing:border-box !important;
    position:sticky !important;
    top:14px !important;
    right:12px !important;
    left:12px !important;
    width:calc(100% - 24px) !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    margin:0 auto !important;
    padding:9px 10px !important;
    grid-template-columns:clamp(50px,13.18vw,56px) minmax(0,1fr) clamp(50px,13.18vw,56px) !important;
    align-items:center !important;
    gap:0 !important;
    border-radius:30px !important;
    transform:none !important;
  }

  .hero-wrap .header .brand{
    grid-column:2 !important;
    justify-self:center !important;
    align-self:center !important;
    width:auto !important;
    max-width:100% !important;
    height:52px !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 !important;
    gap:clamp(9px,2.83vw,12px) !important;
    transform:none !important;
  }

  .hero-wrap .header .brand-icon{
    width:clamp(38px,9.89vw,42px) !important;
    height:clamp(38px,9.89vw,42px) !important;
    min-width:clamp(38px,9.89vw,42px) !important;
    flex-basis:clamp(38px,9.89vw,42px) !important;
  }

  .hero-wrap .header .brand-copy strong{
    font-size:clamp(14.5px,3.77vw,16px) !important;
  }

  .hero-wrap .header .brand-copy small{
    margin-top:4px !important;
    font-size:clamp(7.8px,2.08vw,8.8px) !important;
    letter-spacing:clamp(.65px,.19vw,.8px) !important;
  }

  .hero-wrap .rhb-mobile-menu-toggle{
    grid-column:3 !important;
    width:clamp(46px,11.77vw,50px) !important;
    height:clamp(46px,11.77vw,50px) !important;
    min-width:clamp(46px,11.77vw,50px) !important;
    min-height:clamp(46px,11.77vw,50px) !important;
    margin:0 !important;
  }

  /* Hero shell and foreground use one common fluid width. */
  .hero-wrap .hero.panel,
  .hero-wrap .hero{
    box-sizing:border-box !important;
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 auto !important;
    padding:0 18px 28px !important;
    overflow:hidden !important;
  }

  /* At 425px these values equal the approved existing render.
     Their heights now stay fixed while only the artwork width changes. */
  .hero-wrap .hero.panel .hero-bg,
  .hero-wrap .hero .hero-bg,
  .hero-wrap .hero-bg{
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:0 !important;
    width:100% !important;
    height:var(--rhb-mobile-art-layer-h) !important;
    min-height:var(--rhb-mobile-art-layer-h) !important;
    max-height:var(--rhb-mobile-art-layer-h) !important;
    background-size:100% var(--rhb-mobile-art-image-h) !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    transform:none !important;
  }

  .hero-wrap .hero-content{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:20px 0 0 !important;
    transform:none !important;
  }

  .hero-wrap .hero-content .eyebrow{
    height:46px !important;
    min-height:46px !important;
    margin:0 auto 20px !important;
    padding:0 clamp(15px,5.65vw,24px) !important;
    font-size:clamp(11.5px,3.3vw,14px) !important;
    line-height:46px !important;
    white-space:nowrap !important;
  }

  /* Reserve the 425px logo height so narrower artwork never pulls
     the white copy card upward. */
  .hero-wrap .hero-brand-logo{
    display:grid !important;
    place-items:start center !important;
    width:min(48vw,165px) !important;
    max-width:165px !important;
    height:184px !important;
    min-height:184px !important;
    max-height:184px !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:none !important;
  }

  .hero-wrap .hero-brand-logo picture,
  .hero-wrap .hero-brand-logo img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 auto !important;
  }

  .hero-wrap .hero-content .mobile-hero-after-card{
    box-sizing:border-box !important;
    width:calc(100% + 36px) !important;
    min-height:250px !important;
    margin:var(--rhb-mobile-card-offset) -18px 0 !important;
    padding:64px 18px 6px !important;
  }

  .hero-wrap .mobile-hero-headline span{
    font-size:clamp(25px,7.06vw,30px) !important;
  }

  .hero-wrap .hero-content .mobile-hero-after-card p{
    width:100% !important;
    max-width:340px !important;
    margin:0 auto 18px !important;
    font-size:clamp(11.6px,3.2vw,13.6px) !important;
    line-height:2 !important;
  }

  .hero-wrap .mobile-hero-after-card .mobile-hero-cta{
    width:min(100%,270px) !important;
    min-width:0 !important;
    height:56px !important;
    min-height:56px !important;
    margin:2px auto 0 !important;
  }

  /* Partners stay one stable block directly after the fixed copy card. */
  .hero-wrap .hero.panel .brand-strip.glass,
  .hero-wrap .hero.panel .brand-strip,
  .hero-wrap .brand-strip.glass,
  .hero-wrap .brand-strip{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-height:174px !important;
    margin:20px auto 24px !important;
    transform:none !important;
  }
}