:root {
  --orange: #f04c23;
  --orange2: #ff6716;
  --orange3: #ff8a3d;
  --black: #121216;
  --ink: #1d1d22;
  --purple: #302746;
  --white: #fff;
  --muted: #6b6f7a;
  --soft: #fff5f0;
  --line: #ece8e5;
  --radius: 24px;
  --shadow: 0 24px 70px rgba(18, 18, 22, .12);
  --container: 1180px
}

/* Cairo can be hosted locally under assets/fonts in production. */

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: 'Cairo';
  color: var(--ink);
  background: #fff;
  line-height: 1.7
}

body[dir=rtl] {
  font-family: 'Cairo';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stronger rule to ensure Cairo applies across RTL pages */
html[dir="rtl"], body[dir="rtl"], body[dir="rtl"] * {
  font-family: 'Cairo' !important;
}

/* Ensure headings and buttons use heavier weights for Cairo */
body[dir=rtl] b, body[dir=rtl] .nav-drop-btn, body[dir=rtl] .nav-dropdown-menu a {
  font-weight: 700 !important;
}

a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%;
  display: block
}

.container {
  width: min(var(--container), calc(100% - 40px));
  margin: auto
}

.top-strip {
  background: var(--purple);
  color: #fff;
  font-size: 13px
}

.top-strip .container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 7px 0
}

.top-strip a {
  color: #fff
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(18, 18, 22, .06)
}

.nav {
  height: 86px;
  display: flex;
  align-items: center;
  gap: 28px
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-end: auto
}

.brand img {
  width: 138px;
  height: auto
}

.menu {
  display: flex;
  align-items: center;
  gap: 24px;
  font-weight: 800;
  font-size: 15px
}

.menu a {
  position: relative;
  color: #27272d
}

.menu a:hover, .menu a.active {
  color: var(--orange)
}

.menu a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transition: .25s
}

.menu a:hover:after, .menu a.active:after {
  transform: scaleX(1)
}

.actions {
  display: flex;
  align-items: center;
  gap: 14px
}

.phone {
  font-weight: 900;
  white-space: nowrap;
  color: var(--black)
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  padding: 13px 22px;
  font-weight: 900;
  cursor: pointer;
  transition: .25s
}

.btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff;
  box-shadow: 0 18px 38px rgba(240, 76, 35, .28)
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px rgba(240, 76, 35, .36)
}

.btn-dark {
  background: var(--black);
  color: #fff
}

.btn-outline {
  border: 1px solid rgba(240, 76, 35, .35);
  color: var(--orange);
  background: #fff
}

.btn-dash:before {
  content: "";
  width: 22px;
  border-top: 3px solid currentColor
}

.lang {
  border: 1px solid var(--line);
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 900;
  color: var(--orange);
  background: #fff
}

.mobile-toggle {
  display: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  font-size: 20px
}

.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 80% 10%, rgba(240, 76, 35, .20), transparent 32%), linear-gradient(135deg, #121216, #221c2f 58%, #312747);
  color: #fff;
  padding: 94px 0 76px
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .38
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 52px;
  align-items: center
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffd8ca;
  background: rgba(240, 76, 35, .14);
  border: 1px solid rgba(240, 76, 35, .28);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em
}

.hero h1, .page-hero h1 {
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1.02;
  margin: 20px 0 20px;
  letter-spacing: -.05em
}

.accent {
  color: var(--orange3)
}

.lead {
  font-size: clamp(17px, 2vw, 22px);
  color: rgba(255, 255, 255, .82);
  max-width: 740px
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px
}

.hero-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 34px;
  padding: 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .25)
}

.hero-card img {
  border-radius: 22px
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px
}

.trust {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .13);
  padding: 18px;
  border-radius: 18px
}

.trust b {
  font-size: 28px;
  color: #fff
}

.trust span {
  display: block;
  color: #ffd8ca;
  font-weight: 700;
  font-size: 13px
}

.section {
  padding: 86px 0
}

.section-soft {
  background: linear-gradient(180deg, #fff7f2, #fff)
}

.section-dark {
  background: #121216;
  color: #fff
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-bottom: 34px
}

.section-head h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -.04em
}

.section-head p {
  max-width: 590px;
  color: var(--muted);
  margin: 0
}

.section-dark .section-head p, .section-dark p {
  color: rgba(255, 255, 255, .72)
}

.grid {
  display: grid;
  gap: 24px
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr)
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr)
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 12px 35px rgba(18, 18, 22, .06);
  transition: .25s
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(240, 76, 35, .25)
}

.card.dark {
  background: #19191f;
  border-color: rgba(255, 255, 255, .10);
  color: #fff
}

.icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 18px
}

.card h3 {
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 12px
}

.card p {
  color: var(--muted);
  margin: 0 0 18px
}

.card ul, .feature-list {
  padding: 0;
  margin: 0;
  list-style: none
}

.card li, .feature-list li {
  position: relative;
  padding-inline-start: 26px;
  margin: 8px 0;
  color: #555b66
}

.card li:before, .feature-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%
}

body[dir=rtl] .card li:before, body[dir=rtl] .feature-list li:before {
  left: auto;
  right: 0
}

.split {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 44px;
  align-items: center
}

.visual {
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(240, 76, 35, .18)
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.kpi {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  text-align: center
}

.kpi b {
  font-size: 38px;
  color: var(--orange);
  display: block
}

.kpi span {
  font-weight: 800;
  color: #36363d
}

.process {
  counter-reset: step
}

.process .card {
  position: relative
}

.process .card:before {
  counter-increment: step;
  content: "0"counter(step);
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 42px;
  font-weight: 900;
  color: rgba(240, 76, 35, .15)
}

body[dir=rtl] .process .card:before {
  right: auto;
  left: 24px
}

.page-hero {
  background: radial-gradient(circle at 82% 12%, rgba(240, 76, 35, .18), transparent 34%), linear-gradient(135deg, #121216, #2b243b);
  color: #fff;
  padding: 78px 0
}

.breadcrumbs {
  color: #ffd8ca;
  font-weight: 800;
  margin-bottom: 10px
}

.page-hero .container {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 42px;
  align-items: center
}

.page-hero img {
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .14)
}

.content-block {
  max-width: 900px
}

.content-block h2 {
  font-size: 38px;
  line-height: 1.15;
  margin: 0 0 18px
}

.content-block p {
  color: #555b66
}

.feature-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px
}

.module {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px
}

.module h3 {
  margin: 0 0 14px;
  color: var(--black)
}

.module li {
  font-size: 15px
}

.quote {
  border-inline-start: 5px solid var(--orange);
  padding: 24px 28px;
  background: var(--soft);
  border-radius: 18px;
  font-weight: 700;
  color: #3a3130
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  background: linear-gradient(135deg, #19191f, #322746);
  color: #fff
}

.portfolio-card:before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -80px;
  top: -80px;
  border-radius: 50%;
  background: rgba(240, 76, 35, .22)
}

.portfolio-card>* {
  position: relative
}

.tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(240, 76, 35, .12);
  color: var(--orange);
  font-weight: 900;
  font-size: 12px
}

.contact-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px;
  box-shadow: var(--shadow)
}

.form {
  display: grid;
  gap: 14px
}

.form input, .form select, .form textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid #dcd6d2;
  border-radius: 14px;
  background: #fff;
  color: #111;
  font: inherit;
  outline: none
}

.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(240, 76, 35, .10)
}

.form textarea {
  min-height: 130px;
  resize: vertical
}

.site-footer {
  background: #111116;
  color: #fff;
  padding: 64px 0 22px
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 30px
}

.footer-logo {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  width: 170px;
  margin-bottom: 16px
}

.site-footer p, .site-footer a {
  color: rgba(255, 255, 255, .72)
}

.site-footer h3 {
  margin: 0 0 14px
}

.footer-links {
  display: grid;
  gap: 9px
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 34px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255, 255, 255, .65)
}

.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1100;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 18px 40px rgba(37, 211, 102, .35)
}

body[dir=rtl] .whatsapp-float {
  right: auto;
  left: 22px
}

.mini-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px
}

.mini-nav a {
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(240, 76, 35, .25);
  color: var(--orange);
  font-weight: 800;
  background: #fff
}

.two-col-text {
  columns: 2;
  column-gap: 36px
}

.note {
  font-size: 14px;
  color: var(--muted)
}

/* Professional mega-style service dropdown */
.menu a, .nav-drop-btn {
  white-space: nowrap
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center
}

.nav-drop-btn {
  border: 0;
  background: transparent;
  color: #27272d;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.2
}

.nav-dropdown:hover .nav-drop-btn, .nav-dropdown.active .nav-drop-btn {
  color: var(--orange)
}

.nav-dropdown:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transition: .25s
}

.nav-dropdown:hover:after, .nav-dropdown.active:after {
  transform: scaleX(1)
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 310px;
  background: #fff;
  border: 1px solid rgba(18, 18, 22, .10);
  border-top: 4px solid var(--orange);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(18, 18, 22, .18);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .22s;
  z-index: 2000
}

.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0)
}

.nav-dropdown-menu:before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 20px;
  height: 20px;
  background: #fff;
  border-left: 1px solid rgba(18, 18, 22, .10);
  border-top: 1px solid rgba(18, 18, 22, .10)
}

.nav-dropdown-menu a {
  display: flex;
  padding: 11px 13px;
  border-radius: 12px;
  color: #27272d;
  font-size: 14px;
  font-weight: 850
}

.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active {
  background: #fff3ed;
  color: var(--orange)
}

.nav-dropdown-menu a:after {
  display: none
}

.dropdown-note {
  margin: 10px 4px 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff7f2, #fff);
  border: 1px dashed rgba(240, 76, 35, .32);
  color: #7a3a24;
  font-size: 12px;
  font-weight: 800
}

body[dir=rtl] .nav-dropdown-menu {
  left: auto;
  right: 50%;
  transform: translateX(50%) translateY(10px);
  text-align: right
}

body[dir=rtl] .nav-dropdown:hover .nav-dropdown-menu, body[dir=rtl] .nav-dropdown.open .nav-dropdown-menu {
  transform: translateX(50%) translateY(0)
}

@media(max-width:1080px) {
  .menu, .actions .phone {
    display: none
  }

  .mobile-toggle {
    display: block
  }

  .actions {
    margin-inline-start: auto
  }

  .nav {
    height: 76px
  }

  .menu.open {
    display: flex;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 82px;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow)
  }

  .menu.open .nav-dropdown {
    display: block
  }

  .menu.open .nav-drop-btn {
    width: 100%;
    justify-content: space-between;
    padding: 10px 0
  }

  .menu.open .nav-dropdown:after {
    display: none
  }

  .menu.open .nav-dropdown-menu {
    position: static;
    width: 100%;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: 1px solid var(--line);
    border-top: 3px solid var(--orange);
    margin-top: 8px
  }

  .menu.open .nav-dropdown-menu:before {
    display: none
  }

  .hero .container, .page-hero .container, .split {
    grid-template-columns: 1fr
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr)
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .section-head {
    display: block
  }

  .section-head p {
    margin-top: 12px
  }

  .trust-row, .kpis {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:680px) {
  .container {
    width: min(100% - 26px, var(--container))
  }

  .grid-3, .grid-2, .feature-matrix, .footer-grid {
    grid-template-columns: 1fr
  }

  .hero {
    padding: 64px 0
  }

  .section {
    padding: 62px 0
  }

  .hero-actions {
    flex-direction: column
  }

  .btn {
    width: 100%
  }

  .top-strip .container, .copyright {
    display: block
  }

  .brand img {
    width: 120px
  }

  .trust-row, .kpis {
    grid-template-columns: 1fr
  }

  .two-col-text {
    columns: 1
  }

  .page-hero h1, .hero h1 {
    font-size: 42px
  }
}


/* === Menu stability and enterprise dropdowns update === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1200
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76px
}

.nav-dropdown:before {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: 100%;
  height: 28px;
  background: transparent;
  display: block
}

.nav-dropdown-menu {
  top: calc(100% + 8px) !important;
  margin-top: 0 !important;
  width: 360px;
  max-width: min(92vw, 420px)
}

.nav-dropdown-menu:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
  background: transparent
}

.nav-dropdown.wide .nav-dropdown-menu {
  width: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.nav-dropdown.wide .dropdown-note {
  grid-column: 1/-1
}

.nav-dropdown-menu a {
  gap: 10px;
  align-items: flex-start;
  line-height: 1.25
}

.nav-dropdown-menu a small {
  display: block;
  color: #73737a;
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px
}

.nav-dropdown-menu a:hover small {
  color: #9b3b1f
}

.menu.open .nav-dropdown {
  min-height: auto
}

.menu.open .nav-dropdown:before, .menu.open .nav-dropdown-menu:after {
  display: none
}

.menu.open .nav-dropdown.wide .nav-dropdown-menu {
  display: block;
  width: 100%
}

.service-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px
}

.service-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px
}

.service-chip b {
  display: block;
  color: var(--orange);
  margin-bottom: 7px
}

.conversion-panel {
  background: linear-gradient(135deg, #121216, #2b243b);
  color: #fff;
  border-radius: 30px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--shadow)
}

.conversion-panel p, .conversion-panel li {
  color: rgba(255, 255, 255, .78)
}

.conversion-panel .feature-list li:before {
  background: var(--orange2)
}

.comparison {
  overflow-x: auto
}

.comparison table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden
}

.comparison th, .comparison td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top
}

.comparison th {
  background: #fff3ed;
  color: #121216
}

.comparison tr:last-child td {
  border-bottom: 0
}

body[dir=rtl] .comparison th, body[dir=rtl] .comparison td {
  text-align: right
}

.mega-section-title {
  grid-column: 1/-1;
  color: #7a3a24;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 12px 0
}

.page-note {
  padding: 14px 18px;
  border-radius: 16px;
  background: #fff7f2;
  border: 1px solid rgba(240, 76, 35, .22);
  color: #63321f;
  font-weight: 800
}

@media(max-width:1080px) {
  .service-band {
    grid-template-columns: 1fr
  }

  .nav-dropdown {
    min-height: auto
  }

  .nav-dropdown-menu {
    max-width: none !important
  }
}

/* === Responsive header/menu refinement - May 2026 === */
.site-header {
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 10px 30px rgba(18, 18, 22, .04)
}

.nav {
  height: 74px !important;
  gap: 18px !important;
  position: relative
}

.brand img {
  width: 126px !important
}

.menu {
  gap: 18px !important;
  font-size: 14px !important
}

.nav-drop-btn {
  font-size: 14px !important
}

.actions {
  gap: 10px !important
}

.actions .btn {
  padding: 11px 18px !important;
  border-radius: 9px !important
}

.lang {
  padding: 8px 11px !important
}

.phone {
  font-size: 14px !important
}

.btn-dash:before {
  width: 16px !important
}

.nav-dropdown {
  min-height: 74px !important
}

.nav-dropdown:before {
  height: 34px !important;
  left: -22px !important;
  right: -22px !important
}

.nav-dropdown-menu {
  top: calc(100% + 6px) !important;
  border-radius: 16px !important;
  padding: 10px !important;
  box-shadow: 0 22px 55px rgba(18, 18, 22, .16) !important
}

.nav-dropdown-menu:after {
  top: -28px !important;
  height: 28px !important
}

.nav-dropdown-menu a {
  font-size: 13px !important;
  padding: 10px 11px !important
}

.nav-dropdown-menu a small {
  font-size: 10.5px !important;
  line-height: 1.35
}

.mega-section-title {
  font-size: 10.5px !important;
  padding: 6px 10px 2px !important
}

.nav-dropdown.wide .nav-dropdown-menu {
  width: 480px !important;
  max-width: min(92vw, 480px) !important;
  gap: 6px !important
}

.nav-dropdown:not(.wide) .nav-dropdown-menu {
  width: 290px !important;
  max-width: min(92vw, 290px) !important
}

@media (max-width:1320px) {
  .container {
    width: min(var(--container), calc(100% - 28px))
  }

  .menu {
    gap: 14px !important;
    font-size: 13.5px !important
  }

  .nav-drop-btn {
    font-size: 13.5px !important
  }

  .brand img {
    width: 118px !important
  }

  .actions .btn {
    padding: 10px 15px !important
  }

  .actions .phone {
    display: none !important
  }
}

@media (max-width:1180px) {
  .top-strip {
    display: none !important
  }

  .site-header {
    position: sticky !important;
    top: 0 !important
  }

  .nav {
    height: 68px !important
  }

  .brand img {
    width: 120px !important
  }

  .menu {
    display: none !important
  }

  .mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important
  }

  .actions {
    margin-inline-start: auto
  }

  .actions .btn, .actions .phone {
    display: none !important
  }

  .lang {
    font-size: 13px !important;
    padding: 8px 10px !important
  }

  .menu.open {
    display: flex !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 76px !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: #fff !important;
    border: 1px solid rgba(18, 18, 22, .10) !important;
    border-radius: 18px !important;
    padding: 12px !important;
    box-shadow: 0 24px 70px rgba(18, 18, 22, .20) !important;
    z-index: 2500 !important;
    gap: 4px !important
  }

  .menu.open>a, .menu.open .nav-drop-btn {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 10px !important;
    border-radius: 12px !important;
    color: #27272d !important;
    line-height: 1.25 !important
  }

  .menu.open>a:hover, .menu.open>a.active, .menu.open .nav-dropdown.active>.nav-drop-btn {
    background: #fff3ed !important;
    color: var(--orange) !important
  }

  .menu.open a:after, .menu.open .nav-dropdown:after {
    display: none !important
  }

  .menu.open .nav-dropdown {
    display: block !important;
    min-height: auto !important
  }

  .menu.open .nav-dropdown:before, .menu.open .nav-dropdown-menu:before, .menu.open .nav-dropdown-menu:after {
    display: none !important
  }

  .menu.open .nav-dropdown-menu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: 1px solid var(--line) !important;
    border-top: 3px solid var(--orange) !important;
    border-radius: 14px !important;
    margin: 4px 0 8px !important;
    padding: 8px !important;
    background: #fff !important
  }

  .menu.open .nav-dropdown.open>.nav-dropdown-menu {
    display: block !important
  }

  .menu.open .nav-dropdown.wide .nav-dropdown-menu {
    display: none !important;
    grid-template-columns: 1fr !important
  }

  .menu.open .nav-dropdown.wide.open>.nav-dropdown-menu {
    display: block !important
  }

  .menu.open .nav-dropdown-menu a {
    display: block !important;
    font-size: 13px !important;
    padding: 10px 11px !important
  }

  .menu.open .nav-dropdown-menu a small {
    font-size: 11px !important;
    margin-top: 3px !important
  }

  .menu.open .mega-section-title {
    padding: 7px 10px !important
  }

  .hero .container, .page-hero .container, .split {
    grid-template-columns: 1fr !important
  }

  .hero-card, .page-hero img {
    max-width: 680px
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important
  }

  .section-head {
    display: block !important
  }

  .section-head p {
    margin-top: 12px
  }

  .trust-row, .kpis {
    grid-template-columns: repeat(2, 1fr) !important
  }
}

@media (max-width:680px) {
  .container {
    width: calc(100% - 24px) !important
  }

  .nav {
    height: 64px !important
  }

  .brand img {
    width: 108px !important
  }

  .lang {
    font-size: 12px !important
  }

  .mobile-toggle {
    width: 42px;
    height: 42px
  }

  .menu.open {
    left: 10px !important;
    right: 10px !important;
    top: 70px !important;
    border-radius: 16px !important
  }

  .hero, .page-hero {
    padding: 48px 0 !important
  }

  .hero h1, .page-hero h1 {
    font-size: clamp(34px, 11vw, 44px) !important;
    letter-spacing: -.035em !important
  }

  .lead {
    font-size: 16px !important
  }

  .hero-actions {
    flex-direction: column
  }

  .btn {
    width: 100% !important
  }

  .section {
    padding: 54px 0 !important
  }

  .grid-3, .grid-2, .feature-matrix, .footer-grid, .service-band {
    grid-template-columns: 1fr !important
  }

  .trust-row, .kpis {
    grid-template-columns: 1fr !important
  }

  .card, .contact-box, .module {
    padding: 22px !important;
    border-radius: 20px !important
  }

  .two-col-text {
    columns: 1
  }

  .copyright {
    display: block
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    right: 14px;
    bottom: 14px
  }

  body[dir=rtl] .whatsapp-float {
    right: auto;
    left: 14px
  }
}


/* === AI experience + polished enterprise menu === */
body {
  overflow-x: hidden
}

.site-header {
  border-top: 0 !important
}

.nav {
  height: 76px !important
}

.brand {
  flex: 0 0 auto;
  margin-inline-end: 18px !important
}

.brand img {
  width: 132px !important
}

.menu {
  flex: 1;
  justify-content: center;
  gap: 16px !important
}

.actions {
  flex: 0 0 auto
}

.menu>a, .nav-drop-btn {
  height: 44px;
  display: inline-flex;
  align-items: center
}

.nav-drop-btn {
  background: transparent;
  border: 0;
  color: #27272d;
  font-weight: 900;
  cursor: pointer;
  gap: 6px;
  font-family: inherit
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76px !important
}

.nav-dropdown:after {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: 50px;
  height: 42px;
  background: transparent
}

.nav-dropdown-menu {
  position: absolute;
  top: 68px !important;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  border: 1px solid rgba(18, 18, 22, .10);
  border-top: 4px solid var(--orange);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(18, 18, 22, .18);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 5000
}

.nav-dropdown:hover>.nav-dropdown-menu, .nav-dropdown.open>.nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0)
}

.nav-dropdown-menu:before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 22px;
  height: 22px;
  background: #fff;
  border-left: 1px solid rgba(18, 18, 22, .10);
  border-top: 1px solid rgba(18, 18, 22, .10);
  transform: translateX(-50%) rotate(45deg)
}

.mega-menu-panel {
  width: min(420px, calc(100vw - 34px)) !important;
  max-width: calc(100vw - 34px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 8px !important;
}

.mega-menu-panel.compact {
  width: 880px !important;
  max-width: min(92vw, 880px) !important;
}

.single-panel {
  width: 310px !important;
  display: block
}

.mega-header {
  grid-column: 1/-1;
  padding: 9px 12px 11px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7f2, #fff);
  border: 1px solid rgba(240, 76, 35, .13);
  margin-bottom: 2px
}

.mega-header b {
  display: block;
  color: #7a2d16;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px
}

.mega-header small {
  display: block;
  color: #777;
  font-weight: 700;
  margin-top: 2px
}

.nav-dropdown-menu a {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  padding: 12px !important;
  border-radius: 14px !important;
  color: #25252b !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  min-height: 62px
}

.nav-dropdown-menu a:after {
  display: none !important
}

.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active {
  background: #fff0e9 !important;
  color: var(--orange) !important
}

.nav-dropdown-menu a small {
  display: block !important;
  margin-top: 4px;
  color: #73737a !important;
  font-size: 11px !important;
  font-weight: 800 !important
}

.nav-dropdown-menu a:hover small {
  color: #85331d !important
}

.nav-ai-pill {
  padding: 9px 12px !important;
  border-radius: 999px;
  background: linear-gradient(135deg, #191720, #302746);
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(240, 76, 35, .18)
}

.nav-ai-pill:hover, .nav-ai-pill.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--orange), var(--orange2))
}

.ai-link {
  background: linear-gradient(135deg, #181720, #2f2746) !important;
  color: #fff !important
}

.ai-link small {
  color: rgba(255, 255, 255, .75) !important
}

body[dir=rtl] .nav-dropdown-menu {
  left: 50% !important;
  right: auto !important;
  text-align: right;
  transform: translateX(-50%) translateY(8px) !important
}

body[dir=rtl] .nav-dropdown:hover>.nav-dropdown-menu, body[dir=rtl] .nav-dropdown.open>.nav-dropdown-menu {
  transform: translateX(-50%) translateY(0) !important
}

.ai-home-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #121216, #2c2540);
  color: #fff;
  border-radius: 34px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 90px rgba(18, 18, 22, .18)
}

.ai-home-panel:before {
  content: "";
  position: absolute;
  inset: -80px -30px auto auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 76, 35, .42), transparent 68%)
}

.ai-home-panel h2, .ai-home-panel h3 {
  color: #fff
}

.ai-home-panel p, .ai-home-panel li {
  color: rgba(255, 255, 255, .78)
}

.ai-orbit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px
}

.ai-orbit span {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  padding: 14px;
  font-weight: 900
}

.builder-shell {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: start
}

/* Make builder interactive above header dropdowns if they remain open */
.builder-shell {
  position: relative !important;
  z-index: 10001 !important;
}

.builder-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 26px;
  box-shadow: var(--shadow)
}

.builder-steps {
  display: grid;
  gap: 18px
}

.builder-step {
  display: none
}

.builder-step.active {
  display: block
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 18px
}

.choice {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  font-weight: 900;
  cursor: pointer;
  transition: .2s
}

.choice:hover, .choice.selected {
  border-color: var(--orange);
  background: #fff4ee;
  color: var(--orange);
  transform: translateY(-2px)
}

body[dir=rtl] .choice {
  text-align: right
}

.builder-progress {
  height: 8px;
  background: #f1eeec;
  border-radius: 999px;
  overflow: hidden;
  margin: 16px 0 8px
}

.builder-progress span {
  display: block;
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, var(--orange), var(--orange2));
  border-radius: 999px;
  transition: .25s
}

.builder-result {
  background: linear-gradient(135deg, #fff7f2, #fff);
  border: 1px solid rgba(240, 76, 35, .18);
  border-radius: 22px;
  padding: 22px
}

.builder-result h3 {
  margin-top: 0
}

.result-list {
  display: grid;
  gap: 9px;
  margin: 16px 0
}

.result-list span {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 800
}

.ai-terminal {
  background: #111217;
  color: #fff;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 24px 60px rgba(18, 18, 22, .28);
  position: sticky;
  top: 105px
}

.ai-terminal .screen {
  min-height: 360px;
  background: linear-gradient(180deg, #171821, #111217);
  border-radius: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .08)
}

.terminal-line {
  display: flex;
  gap: 10px;
  margin: 0 0 14px
}

.terminal-line:before {
  content: "✦";
  color: var(--orange)
}

.typing-dot {
  display: inline-flex;
  gap: 4px
}

.typing-dot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: dot 1s infinite alternate
}

.typing-dot i:nth-child(2) {
  animation-delay: .15s
}

.typing-dot i:nth-child(3) {
  animation-delay: .3s
}

@keyframes dot {
  from {
    opacity: .25;
    transform: translateY(0)
  }

  to {
    opacity: 1;
    transform: translateY(-4px)
  }
}

.ai-assistant {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 3500
}

.ai-assistant-toggle {
  width: 62px;
  height: 62px;
  border-radius: 22px;
  border: 0;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff;
  font-size: 25px;
  box-shadow: 0 20px 45px rgba(240, 76, 35, .35);
  cursor: pointer
}

.ai-assistant-toggle span {
  display: block;
  animation: pulseAi 2.2s infinite
}

@keyframes pulseAi {
  0%, 100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.16) rotate(8deg)
  }
}

.ai-assistant-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 350px;
  max-width: calc(100vw - 28px);
  background: #fff;
  border: 1px solid rgba(18, 18, 22, .12);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(18, 18, 22, .22);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .2s
}

.ai-assistant.open .ai-assistant-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.ai-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #15141c, #302746);
  color: #fff;
  padding: 15px 16px
}

.ai-panel-head button {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 23px;
  cursor: pointer
}

.ai-messages {
  padding: 15px;
  display: grid;
  gap: 10px;
  max-height: 250px;
  overflow: auto
}

.ai-msg {
  padding: 11px 12px;
  border-radius: 16px;
  font-weight: 700;
  line-height: 1.45
}

.ai-msg.bot {
  background: #f6f4f2;
  color: #222
}

.ai-msg.user {
  background: #fff0e9;
  color: #8c3219;
  margin-inline-start: 32px
}

.ai-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 15px 15px
}

.ai-quick button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 9px;
  font-weight: 900;
  cursor: pointer
}

.ai-quick button:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: #fff7f2
}

.ai-full-link {
  display: block;
  margin: 0 15px 15px;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff;
  text-align: center;
  font-weight: 900;
  border-radius: 14px;
  padding: 12px
}

.whatsapp-float {
  bottom: 20px !important
}

.ai-assistant+.whatsapp-float {
  bottom: 22px !important
}

body[dir=rtl] .ai-assistant {
  right: auto;
  left: 22px
}

body[dir=rtl] .ai-assistant-panel {
  right: auto;
  left: 0
}

@media(max-width:1240px) {
  .menu {
    gap: 12px !important
  }

  .actions .phone {
    display: none !important
  }

  .nav-ai-pill {
    display: none !important
  }

  .brand img {
    width: 120px !important
  }

  .actions .btn {
    padding: 10px 15px !important
  }
}

@media(max-width:1120px) {
  .menu {
    display: none !important
  }

  .mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center
  }

  .actions {
    margin-inline-start: auto
  }

  .actions .btn {
    display: none !important
  }

  .nav {
    height: 66px !important
  }

  .menu.open {
    display: flex !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: 72px !important;
    max-height: calc(100vh - 86px) !important;
    overflow: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: #fff !important;
    border: 1px solid rgba(18, 18, 22, .10) !important;
    border-radius: 18px !important;
    padding: 12px !important;
    box-shadow: 0 28px 80px rgba(18, 18, 22, .22) !important;
    z-index: 6000 !important;
    gap: 4px !important
  }

  .menu.open>a, .menu.open .nav-drop-btn {
    width: 100% !important;
    height: auto !important;
    justify-content: space-between !important;
    padding: 12px !important;
    border-radius: 12px !important
  }

  .menu.open a:after, .menu.open .nav-dropdown:after, .menu.open .nav-dropdown-menu:before {
    display: none !important
  }

  .menu.open .nav-dropdown {
    display: block !important;
    min-height: auto !important
  }

  .menu.open .nav-dropdown-menu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: 1px solid var(--line) !important;
    border-top: 3px solid var(--orange) !important;
    border-radius: 14px !important;
    margin: 5px 0 8px !important;
    padding: 8px !important;
    background: #fff !important
  }

  .menu.open .nav-dropdown.open>.nav-dropdown-menu {
    display: block !important
  }

  .menu.open .mega-menu-panel {
    grid-template-columns: 1fr !important
  }

  .menu.open .nav-dropdown-menu a {
    min-height: auto !important
  }

  .mega-header {
    padding: 10px !important
  }

  .builder-shell {
    grid-template-columns: 1fr
  }

  .ai-terminal {
    position: relative;
    top: auto
  }

  .ai-orbit {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:680px) {
  .brand img {
    width: 112px !important
  }

  .lang {
    display: inline-flex !important
  }

  .builder-card {
    padding: 20px;
    border-radius: 22px
  }

  .choice-grid, .ai-orbit {
    grid-template-columns: 1fr
  }

  .ai-assistant {
    right: 14px;
    bottom: 84px
  }

  .ai-assistant-toggle {
    width: 56px;
    height: 56px;
    border-radius: 18px
  }

  .ai-assistant-panel {
    width: 330px
  }

  .ai-quick {
    grid-template-columns: 1fr
  }

  .hero .container {
    gap: 24px
  }

  .top-strip {
    display: none !important
  }

  body[dir=rtl] .ai-assistant {
    left: 14px
  }
}

/* === Ascopes final AI/menu polishing - 2026-05 === */
.site-header {
  z-index: 9000 !important;
  background: #fff !important;
  backdrop-filter: none !important;
  box-shadow: 0 10px 28px rgba(18, 18, 22, .06)
}

.nav {
  gap: 18px !important
}

.menu {
  gap: 18px !important
}

.nav-drop-btn {
  white-space: nowrap !important
}

.nav-dropdown {
  min-height: 86px !important;
  padding: 0 2px !important
}

.nav-dropdown:before {
  content: "" !important;
  position: absolute !important;
  left: -28px !important;
  right: -28px !important;
  top: 54px !important;
  height: 54px !important;
  background: transparent !important;
  display: block !important;
  z-index: 1 !important
}

.nav-dropdown-menu {
  top: 76px !important;
  z-index: 9500 !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 30px 80px rgba(18, 18, 22, .22) !important;
  border: 1px solid rgba(18, 18, 22, .10) !important;
  border-top: 4px solid var(--orange) !important
}

.nav-dropdown-menu:before {
  top: -12px !important
}

.nav-dropdown:hover>.nav-dropdown-menu, .nav-dropdown.open>.nav-dropdown-menu {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important
}

.mega-menu-panel {
  width: min(420px, calc(100vw - 34px)) !important;
  max-width: calc(100vw - 34px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 8px !important;
  align-items: start !important;
}

.mega-menu-panel.compact {
  width: min(960px, calc(100vw - 34px)) !important;
  max-width: calc(100vw - 34px) !important;
}

.single-panel {
  width: min(420px, calc(100vw - 34px)) !important;
  display: block !important;
}

.mega-header {
  background: #fff7f2 !important;
  border: 1px solid rgba(240, 76, 35, .20) !important;
  color: #222 !important
}

.nav-dropdown-menu a {
  width: 100% !important;
  display: block !important;
  padding: 14px !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(18, 18, 22, .06) !important;
  box-shadow: 0 8px 22px rgba(18, 18, 22, .06) !important;
  color: #24242a !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
  overflow: hidden !important;
}

.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active {
  background: #fff6f1 !important;
  border-color: rgba(240, 76, 35, .18) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 40px rgba(18, 18, 22, .08) !important;
}

.nav-ai-pill {
  background: #211a34 !important;
  color: #fff !important
}

.nav-ai-pill:hover, .nav-ai-pill.active {
  background: linear-gradient(135deg, var(--orange), var(--orange2)) !important;
  color: #fff !important
}

.builder-shell {
  align-items: stretch !important;
  gap: 34px !important
}

.builder-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 36px !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, #fff, #fffaf7) !important;
  border: 1px solid rgba(18, 18, 22, .09) !important;
  box-shadow: 0 30px 90px rgba(18, 18, 22, .12) !important
}

.builder-card:before {
  content: "";
  position: absolute;
  inset: auto -120px -140px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 76, 35, .12), transparent 68%);
  pointer-events: none
}

.builder-card .eyebrow {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  opacity: 1 !important;
  color: #d94721 !important;
  background: #fff0e9 !important;
  border: 1px solid rgba(240, 76, 35, .32) !important;
  text-shadow: none !important;
  margin: 0 0 18px !important
}

.builder-card h2 {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 0 8px !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  color: #121216 !important
}

.builder-intro {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 0 16px !important;
  color: #6b6f7a !important;
  max-width: 780px !important
}

.builder-progress {
  position: relative !important;
  z-index: 2 !important;
  height: 9px !important;
  margin: 20px 0 28px !important;
  background: #ede9e6 !important
}

.builder-step h3 {
  margin: 0 0 12px !important;
  font-size: 21px !important;
  color: #121216 !important
}

.builder-step p {
  margin: 0 0 12px !important;
  color: #6b6f7a !important
}

.choice-grid {
  gap: 14px !important
}

.service-grid, .requirement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important
}

.choice {
  position: relative !important;
  min-height: 58px !important;
  padding: 16px 17px !important;
  border: 1px solid #e8e1dc !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: #121216 !important;
  text-align: start !important;
  box-shadow: 0 10px 24px rgba(18, 18, 22, .035) !important
}

.choice b {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.25 !important
}

.choice small {
  display: block !important;
  margin-top: 6px !important;
  color: #70727a !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important
}

.choice:hover, .choice.selected {
  background: #fff3ed !important;
  border-color: rgba(240, 76, 35, .70) !important;
  color: #d94721 !important;
  box-shadow: 0 16px 36px rgba(240, 76, 35, .12) !important
}

.choice.selected:after {
  content: "✓";
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff;
  font-size: 12px;
  font-weight: 900
}

.choice.selected small {
  color: #803018 !important
}

.builder-result {
  background: #fff !important;
  border: 1px solid rgba(240, 76, 35, .24) !important;
  box-shadow: 0 16px 40px rgba(240, 76, 35, .08) !important
}

.result-meta {
  display: grid;
  gap: 10px;
  margin: 16px 0
}

.result-meta span {
  display: block;
  background: #fff7f2;
  border: 1px solid rgba(240, 76, 35, .13);
  border-radius: 14px;
  padding: 12px 14px
}

.result-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important
}

.result-list span {
  border-color: #ece6e1 !important;
  background: #fff !important
}

.ai-terminal {
  height: 100% !important;
  min-height: 430px !important;
  border-radius: 30px !important;
  background: #111217 !important
}

.ai-terminal .screen {
  height: 100% !important;
  min-height: 390px !important;
  padding: 28px !important
}

.ai-terminal h3 {
  font-size: 22px !important;
  margin: 0 0 22px !important
}

.terminal-line {
  align-items: flex-start !important;
  font-size: 16px !important;
  line-height: 1.65 !important
}

.terminal-line:before {
  margin-top: 2px !important;
  flex: 0 0 auto !important
}

.section-soft#builder, .section-soft:has(.builder-shell) {
  background: linear-gradient(180deg, #fff7f2 0%, #fff 58%, #fff 100%) !important
}

@media(max-width:1240px) {
  .nav {
    gap: 12px !important
  }

  .menu {
    gap: 10px !important
  }

  .brand img {
    width: 120px !important
  }

  .actions .phone {
    display: none !important
  }

  .nav-ai-pill {
    display: none !important
  }

  .actions .btn {
    padding: 10px 14px !important
  }
}

@media(max-width:1120px) {
  .site-header {
    position: sticky !important
  }

  .nav {
    height: 68px !important
  }

  .menu.open {
    top: 74px !important;
    background: #fff !important;
    z-index: 9800 !important
  }

  .menu.open .nav-dropdown {
    min-height: auto !important;
    padding: 0 !important
  }

  .menu.open .nav-dropdown-menu {
    top: auto !important
  }

  .menu.open .nav-dropdown:before {
    display: none !important
  }

  .mega-menu-panel, .mega-menu-panel.compact, .single-panel {
    width: 100% !important;
    max-width: 100% !important
  }

  .builder-shell {
    grid-template-columns: 1fr !important
  }

  .ai-terminal {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: auto !important
  }

  .ai-terminal .screen {
    min-height: 300px !important
  }

  .builder-card {
    padding: 28px !important
  }
}

@media(max-width:760px) {
  .container {
    width: min(100% - 26px, var(--container)) !important
  }

  .section {
    padding: 58px 0 !important
  }

  .builder-card {
    padding: 22px !important;
    border-radius: 24px !important
  }

  .service-grid, .requirement-grid, .choice-grid, .result-list {
    grid-template-columns: 1fr !important
  }

  .choice {
    min-height: auto !important
  }

  .builder-card h2 {
    font-size: 29px !important
  }

  .ai-terminal .screen {
    padding: 20px !important
  }

  .nav-dropdown-menu a {
    min-height: auto !important
  }

  .page-hero h1, .hero h1 {
    font-size: clamp(34px, 11vw, 54px) !important
  }

  .lead {
    font-size: 16px !important
  }

  .hero-actions .btn {
    width: 100% !important
  }

  .actions {
    gap: 8px !important
  }

  .lang {
    padding: 8px 10px !important
  }
}

/* =========================================================
   Ascopes final header / mega-menu polish
   Fixes RTL dropdown shape, removes menu gaps, and improves mobile.
   ========================================================= */
.site-header {
  background: #fff !important;
  backdrop-filter: none !important;
  box-shadow: 0 10px 30px rgba(18, 18, 22, .06) !important
}

.site-header .nav {
  position: relative !important;
  gap: 16px !important
}

.menu {
  gap: 16px !important
}

.nav-drop-btn {
  height: 44px !important;
  padding: 0 4px !important;
  color: #202026 !important
}

.nav-dropdown {
  position: relative !important;
  min-height: 44px !important;
  padding: 0 !important
}

.nav-dropdown:after {
  bottom: -13px !important;
  height: 4px !important;
  border-radius: 999px !important
}

.nav-dropdown:before {
  content: "" !important;
  position: absolute !important;
  left: -18px !important;
  right: -18px !important;
  top: 38px !important;
  height: 22px !important;
  background: transparent !important;
  z-index: 9499 !important;
  display: block !important
}

.nav-dropdown-menu {
  top: 56px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: #fff !important;
  border: 1px solid rgba(18, 18, 22, .10) !important;
  border-top: 4px solid var(--orange) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(18, 18, 22, .18) !important;
  padding: 12px !important;
  z-index: 10000 !important;
  overflow: visible !important;
  text-align: inherit !important
}

/* Prevent text overflowing the mega-menu panel */
.nav-dropdown-menu {
  box-sizing: border-box !important;
  max-width: calc(100vw - 34px) !important;
  overflow: hidden !important;
  word-wrap: break-word !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  hyphens: auto !important;
}

.nav-dropdown-menu .mega-header,
.nav-dropdown-menu a,
.nav-dropdown-menu a span,
.nav-dropdown-menu a small {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.nav-dropdown-menu a span {
  display: block !important;
}

.nav-dropdown:hover>.nav-dropdown-menu, .nav-dropdown.open>.nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important
}

.nav-dropdown-menu:before {
  content: "" !important;
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  right: auto !important;
  width: 22px !important;
  height: 22px !important;
  background: #fff !important;
  border-left: 1px solid rgba(18, 18, 22, .10) !important;
  border-top: 1px solid rgba(18, 18, 22, .10) !important;
  transform: translateX(-50%) rotate(45deg) !important;
  z-index: -1 !important
}

.mega-menu-panel {
  width: min(420px, calc(100vw - 34px)) !important;
  max-width: calc(100vw - 34px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.mega-menu-panel.compact {
  width: min(860px, calc(100vw - 34px)) !important
}

.single-panel {
  width: min(420px, calc(100vw - 34px)) !important;
  display: block !important
}

.mega-header {
  grid-column: 1/-1 !important;
  margin: 0 0 4px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #fff6f1, #fff) !important;
  border: 1px solid rgba(240, 76, 35, .18) !important;
  color: #1d1d22 !important
}

.mega-header b {
  font-size: 12px !important;
  color: #8a2e16 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important
}

.mega-header small {
  font-size: 12px !important;
  color: #70727a !important;
  font-weight: 800 !important;
  margin-top: 4px !important
}

.nav-dropdown-menu a {
  min-height: 64px !important;
  padding: 13px 14px !important;
  border-radius: 15px !important;
  background: #fff !important;
  border: 1px solid rgba(18, 18, 22, .055) !important;
  box-shadow: none !important;
  color: #24242a !important;
  transition: .18s ease !important
}

.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active {
  background: #fff2ec !important;
  border-color: rgba(240, 76, 35, .22) !important;
  color: var(--orange) !important;
  transform: translateY(-1px) !important
}

.nav-dropdown-menu a small {
  font-size: 11.5px !important;
  color: #747780 !important;
  line-height: 1.45 !important;
  margin-top: 5px !important;
  font-weight: 800 !important
}

.nav-dropdown-menu a:hover small {
  color: #803018 !important
}

.nav-ai-pill {
  white-space: nowrap !important;
  min-width: max-content !important
}

body[dir=rtl] .menu, body[dir=rtl] .nav-dropdown-menu {
  direction: rtl !important;
  text-align: right !important
}

body[dir=rtl] .nav-dropdown-menu {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(8px) !important
}

body[dir=rtl] .nav-dropdown:hover>.nav-dropdown-menu, body[dir=rtl] .nav-dropdown.open>.nav-dropdown-menu {
  transform: translateX(-50%) translateY(0) !important
}

body[dir=rtl] .nav-dropdown-menu:before {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) rotate(45deg) !important
}

body[dir=rtl] .nav-dropdown-menu a {
  justify-content: flex-start !important;
  text-align: right !important
}

body[dir=rtl] .mega-header {
  text-align: right !important
}

@media(min-width:1121px) {
  .nav-dropdown:first-of-type .mega-menu-panel {
    margin-inline-start: 20px !important
  }

  body[dir=rtl] .nav-dropdown:first-of-type .mega-menu-panel {
    margin-inline-start: 0 !important;
    margin-inline-end: 20px !important
  }
}

@media(max-width:1120px) {
  .menu.open {
    top: 76px !important;
    left: 13px !important;
    right: 13px !important;
    border-radius: 20px !important;
    padding: 12px !important;
    gap: 6px !important;
    background: #fff !important;
    box-shadow: 0 28px 90px rgba(18, 18, 22, .24) !important
  }

  .menu.open .nav-dropdown:before, .menu.open .nav-dropdown:after, .menu.open .nav-dropdown-menu:before {
    display: none !important
  }

  .menu.open .nav-dropdown {
    min-height: auto !important;
    width: 100% !important
  }

  .menu.open .nav-drop-btn {
    height: auto !important;
    width: 100% !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
    background: #fff7f2 !important;
    justify-content: space-between !important
  }

  .menu.open .nav-dropdown-menu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin: 7px 0 10px !important;
    padding: 9px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    border: 1px solid rgba(240, 76, 35, .18) !important;
    border-top: 3px solid var(--orange) !important
  }

  .menu.open .nav-dropdown.open>.nav-dropdown-menu {
    display: grid !important
  }

  .menu.open .single-panel {
    display: block !important
  }

  .menu.open .mega-menu-panel {
    grid-template-columns: 1fr !important
  }
}

@media(max-width:760px) {
  .site-header .nav {
    height: 66px !important
  }

  .actions .phone {
    display: none !important
  }

  .brand img {
    width: 108px !important
  }

  .menu.open {
    top: 70px !important;
    max-height: calc(100vh - 82px) !important;
    overflow: auto !important
  }
}

/* Ascopes 2026 professional service expansion */
.business-menu-panel{width:min(980px,calc(100vw - 40px));padding:24px;background:#fff;box-shadow:0 30px 90px rgba(18,18,22,.18);border:1px solid rgba(240,76,35,.14);z-index:1500}
.mega-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mega-columns>div{background:#fff8f4;border:1px solid rgba(240,76,35,.12);border-radius:18px;padding:14px}
.mega-columns strong{display:block;margin:0 0 10px;color:var(--purple);font-size:14px}
.mega-columns a{display:block;border-radius:14px;padding:10px 12px;background:#fff;margin-bottom:8px;box-shadow:0 10px 28px rgba(18,18,22,.05)}
.mega-columns a small{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-top:2px}
.service-hero .container{align-items:center}.service-hero-panel{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid var(--line)}.service-hero-panel img{max-height:270px;margin:auto}.service-proof{margin-top:18px;padding:16px;border-radius:18px;background:#fff5f0;border:1px solid rgba(240,76,35,.18)}.service-proof b,.service-proof span{display:block}.service-proof span{color:var(--muted);font-size:14px}.service-side-card{position:relative;overflow:hidden}.service-side-card:before{content:"";position:absolute;inset:auto -40px -40px auto;width:120px;height:120px;border-radius:50%;background:rgba(240,76,35,.12)}.service-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service-tile{display:block;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 18px 45px rgba(18,18,22,.07);transition:.25s;min-height:225px}.service-tile:hover{transform:translateY(-5px);border-color:rgba(240,76,35,.4);box-shadow:0 28px 70px rgba(18,18,22,.12)}.service-tile span{display:inline-flex;background:#fff5f0;color:var(--orange);font-weight:900;border-radius:999px;padding:5px 11px;font-size:12px;margin-bottom:10px}.service-tile h3{margin:0 0 8px;color:var(--purple)}.service-tile p{margin:0;color:var(--muted);font-size:14px}.builder-contact-form{margin-top:18px;border-top:1px solid rgba(18,18,22,.08);padding-top:18px;background:#fff;border-radius:20px}.builder-contact-form h4{margin:0 0 6px;color:var(--purple)}.builder-contact-form p{margin:0 0 12px;color:var(--muted);font-size:14px}.builder-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.builder-contact-form input,.builder-contact-form textarea{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:12px 14px;font-family:'Cairo';outline:none}.builder-contact-form input:focus,.builder-contact-form textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(240,76,35,.08)}.builder-contact-form textarea{min-height:90px;margin-top:10px;resize:vertical}.builder-form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.builder-form-alert{color:#b3261e;font-weight:800;margin-top:8px}.nav-dropdown-menu,.mega-menu-panel,.single-panel{background:#fff!important;backdrop-filter:none!important}.nav-dropdown-menu a{background:#fff}
@media (max-width:1120px){.mega-columns,.service-directory{grid-template-columns:1fr}.business-menu-panel{width:100%;box-shadow:none}.builder-form-grid{grid-template-columns:1fr}.service-tile{min-height:auto}}

/* =====================================================================
   Ascopes hotfix: readable Business Systems mega menu
   Fixes narrow overflowing dropdown on EN/AR desktop and keeps mobile clean.
   ===================================================================== */
@media (min-width:1121px){
  .site-header{z-index:9999!important;}
  .site-header .nav{position:relative!important;}

  .nav-dropdown.business-mega{position:static!important;}

  .nav-dropdown.business-mega > .business-menu-panel{
    width:min(1080px, calc(100vw - 56px))!important;
    max-width:calc(100vw - 56px)!important;
    min-width:860px!important;
    top:calc(100% + 10px)!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%) translateY(12px)!important;
    padding:18px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    background:#fff!important;
    border:1px solid rgba(18,18,22,.10)!important;
    border-top:4px solid var(--orange)!important;
    border-radius:24px!important;
    box-shadow:0 30px 95px rgba(18,18,22,.22)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    max-height:calc(100vh - 118px)!important;
    z-index:10050!important;
  }

  .nav-dropdown.business-mega:hover > .business-menu-panel,
  .nav-dropdown.business-mega.open > .business-menu-panel{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateX(-50%) translateY(0)!important;
  }

  .business-menu-panel .mega-header{
    margin:0!important;
    padding:16px 18px!important;
    border-radius:18px!important;
  }

  .business-menu-panel .mega-columns{
    display:grid!important;
    grid-template-columns:repeat(3, minmax(0, 1fr))!important;
    gap:14px!important;
  }

  .business-menu-panel .mega-columns > div{
    min-width:0!important;
    background:#fff8f4!important;
    border:1px solid rgba(240,76,35,.14)!important;
    border-radius:18px!important;
    padding:14px!important;
  }

  .business-menu-panel .mega-columns strong{
    display:flex!important;
    align-items:center!important;
    min-height:30px!important;
    margin:0 0 10px!important;
    color:var(--purple)!important;
    font-size:14px!important;
    line-height:1.45!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  .business-menu-panel .mega-columns a{
    display:block!important;
    min-height:58px!important;
    padding:11px 13px!important;
    margin-bottom:8px!important;
    border-radius:14px!important;
    background:#fff!important;
    border:1px solid rgba(18,18,22,.07)!important;
    box-shadow:0 8px 22px rgba(18,18,22,.045)!important;
  }

  .business-menu-panel .mega-columns a span,
  .business-menu-panel .mega-columns a small,
  .business-menu-panel .mega-header b,
  .business-menu-panel .mega-header small{
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:manual!important;
    line-height:1.45!important;
  }

  .business-menu-panel .mega-columns a small{
    font-size:12px!important;
    margin-top:3px!important;
  }

  body[dir=rtl] .nav-dropdown.business-mega > .business-menu-panel{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%) translateY(12px)!important;
    direction:rtl!important;
    text-align:right!important;
  }

  body[dir=rtl] .nav-dropdown.business-mega:hover > .business-menu-panel,
  body[dir=rtl] .nav-dropdown.business-mega.open > .business-menu-panel{
    transform:translateX(-50%) translateY(0)!important;
  }
}

@media (min-width:1121px) and (max-width:1280px){
  .nav-dropdown.business-mega > .business-menu-panel{
    width:min(960px, calc(100vw - 42px))!important;
    min-width:760px!important;
  }
  .business-menu-panel .mega-columns{gap:12px!important;}
  .business-menu-panel .mega-columns > div{padding:12px!important;}
  .business-menu-panel .mega-columns a{padding:10px 11px!important;}
}

@media (max-width:1120px){
  .menu.open .business-menu-panel{
    max-height:none!important;
    overflow:visible!important;
    min-width:0!important;
  }
  .menu.open .business-menu-panel .mega-columns{
    grid-template-columns:1fr!important;
  }
}

/* =====================================================================
   Ascopes hotfix 2: stable dropdown hover + visible eyebrow labels
   ===================================================================== */
@media (min-width:1121px){
  .nav-dropdown > .nav-dropdown-menu{
    top:calc(100% + 0px)!important;
    margin-top:0!important;
  }
  .nav-dropdown.business-mega > .business-menu-panel{
    top:100%!important;
    margin-top:0!important;
  }
  .nav-dropdown::before{
    top:100%!important;
    height:20px!important;
  }
}

.eyebrow,
.hero .eyebrow,
.section .eyebrow,
.service-hero .eyebrow,
.content-section .eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  max-width:100%!important;
  opacity:1!important;
  visibility:visible!important;
  color:#f04c23!important;
  background:#fff3ed!important;
  border:1px solid rgba(240,76,35,.30)!important;
  border-radius:999px!important;
  padding:8px 14px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  line-height:1.35!important;
  text-shadow:none!important;
  box-shadow:0 10px 26px rgba(240,76,35,.08)!important;
}

.hero-dark .eyebrow,
.dark-section .eyebrow,
.page-hero .eyebrow{
  color:#fff!important;
  background:rgba(240,76,35,.20)!important;
  border-color:rgba(255,255,255,.18)!important;
}


/* Ascopes enterprise upgrade */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.enterprise-hero .container{align-items:center}
.enterprise-grid .enterprise-card{min-height:210px}
.enterprise-card h3{color:var(--black);margin-top:0}
.enterprise-note{background:linear-gradient(145deg,#fff,#fff5f0);border:1px solid rgba(240,76,35,.16)}
.enterprise-proof-section .card{border:1px solid rgba(240,76,35,.14);background:linear-gradient(180deg,#fff,#fffaf7)}
.form input,.form textarea,.form select,.builder-contact-form input,.builder-contact-form textarea{background:#fff!important;color:var(--ink)!important;border:1px solid rgba(18,18,22,.14)!important;box-shadow:0 10px 24px rgba(18,18,22,.04)!important;outline:none!important}
.form select{appearance:auto!important;position:relative!important;z-index:5!important}
.form input:focus,.form textarea:focus,.form select:focus,.builder-contact-form input:focus,.builder-contact-form textarea:focus{border-color:rgba(240,76,35,.55)!important;box-shadow:0 0 0 4px rgba(240,76,35,.10)!important}
.site-footer .footer-links a:hover{color:var(--orange)}
@media(max-width:760px){.enterprise-grid .enterprise-card{min-height:auto}.enterprise-proof-section .grid{gap:16px}.page-hero.enterprise-hero .container{grid-template-columns:1fr}}