/* =========================================================================
   Kalmedia | Kalmedia Digital & Print Agency — Core Stylesheet
   Palette: Sky Blue / Ink Navy / White  — signature: orbiting-icon hero ring
   ========================================================================= */

:root {
  --sky-50: #F4FAFF;
  --sky-100: #E7F3FD;
  --sky-200: #D3E9FB;
  --sky-300: #AFD9F7;
  --blue-500: #1477D6;
  --blue-600: #0D62B8;
  --blue-700: #0A4C90;
  --ink-900: #0B2036;
  --ink-800: #12314F;
  --brand-navy: #050857;
  --brand-navy-light: #0B0E7A;
  --ink-600: #3C5876;
  --muted: #6B7E92;
  --line: #DCEAF7;
  --white: #FFFFFF;
  --amber: #FFB238;
  --success: #1FA971;

  --font-display: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Cairo', sans-serif;

  --space-1: .4rem;
  --space-2: .8rem;
  --space-3: 1.2rem;
  --space-4: 1.8rem;
  --space-5: 2.6rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8.8rem;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shadow-soft: 0 14px 34px -16px rgba(11, 32, 54, .18);
  --shadow-card: 0 8px 24px -12px rgba(11, 32, 54, .14);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-h: 88px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html[dir="ltr"] body {
  direction: ltr;
}

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink-900);
  direction: rtl;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.25;
  font-weight: 800;
  color: var(--ink-900);
}

.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

section {
  padding-block: var(--space-7);
}

.section-alt {
  background: var(--sky-50);
}

/* Homepage-only vertical rhythm: the default --space-7 scale above (used
   by other pages: portfolio, about, service pages) reads as too airy on
   a long single-scroll homepage. This scopes a tighter, uniform value to
   `.home-page` (present only on index.html) so the gap between any two
   adjacent sections stays in the 48–64px range on desktop and 32–48px
   on mobile — .trusted-tech and .portfolio need their own line since
   they carry higher-specificity padding rules elsewhere in this file. */
.home-page section {
  padding-block: 2rem;
}

.home-page .trusted-tech {
  padding-block: 2rem;
}

.home-page .portfolio {
  padding-block: 2rem;
}

@media (max-width:640px) {
  .home-page section {
    padding-block: 1.5rem;
  }

  .home-page .trusted-tech {
    padding-block: 1.5rem;
  }

  .home-page .portfolio {
    padding-block: 1.5rem;
  }
}

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

:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  :root {
    --header-h: 80px;
  }
}

@media (max-width: 600px) {
  :root {
    --header-h: 72px;
  }
}

[data-i18n],
[data-i18n-ph] {
  transition: opacity .18s var(--ease);
}

.fade-swap {
  opacity: 0;
}

/* =============================== Eyebrow / labels =========================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--blue-600);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
  margin-bottom: var(--space-2);
}

.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 0 4px var(--sky-200);
}

.section-head {
  max-width: 680px;
  margin-bottom: var(--space-6);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.section-head p {
  color: var(--muted);
  margin-top: var(--space-2);
  font-size: 1.02rem;
}

/* =============================== Buttons ==================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .98rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue-600);
  color: var(--white);
  box-shadow: 0 10px 24px -8px rgba(13, 98, 184, .55);
}

.btn-primary:hover {
  background: var(--blue-700);
  transform: translateY(-2px);
}

#contact .quote-form .btn-primary {
  background: var(--brand-navy);
  box-shadow: 0 10px 24px -8px rgba(5, 8, 87, .55);
}

#contact .quote-form .btn-primary:hover {
  background: var(--brand-navy-light);
}

.btn-outline {
  background: var(--white);
  color: var(--blue-600);
  border: 1.5px solid var(--sky-300);
}

.btn-outline:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 1.15rem 2.6rem;
  font-size: 1.05rem;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* =============================== Header ====================================== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 80;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: .9rem;
}

.header-start {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  padding: 8px;
  border-radius: 8px;
}

.hamburger span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease), background-color 0.4s var(--ease);
}

.hamburger:hover span {
  background: var(--blue-600);
}

.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--ink-900);
  transition: color 0.4s var(--ease), font-size 0.4s var(--ease);
}

.logo .dot-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue-500);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.logo strong {
  color: var(--blue-600);
}

.logo-text {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Dynamic site-logo-img responsive styling */
.logo img.site-logo-img {
  display: block;
  height: 44px;
  /* Mobile height */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: height 0.4s var(--ease);
}

@media (min-width: 600px) {
  .logo img.site-logo-img {
    height: 52px;
    /* Tablet height */
  }
}

@media (min-width: 900px) {
  .logo img.site-logo-img {
    height: 60px;
    /* Desktop height */
  }
}

/* Scrolled logo state adjustments */
.site-header.scrolled .logo img.site-logo-img {
  height: 38px;
  /* Mobile scrolled */
}

@media (min-width: 600px) {
  .site-header.scrolled .logo img.site-logo-img {
    height: 44px;
    /* Tablet scrolled */
  }
}

@media (min-width: 900px) {
  .site-header.scrolled .logo img.site-logo-img {
    height: 48px;
    /* Desktop scrolled */
  }
}

.header-end {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.store-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--ink-900);
  transition: border-color 0.25s var(--ease);
}

.store-cart-icon:hover {
  border-color: var(--blue-500);
}

.store-cart-icon .cart-count {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  background: var(--blue-600);
  color: var(--white);
  font-size: .65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.lang-switch {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  font-weight: 700;
  font-size: .88rem;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.lang-btn:hover {
  border-color: var(--blue-500);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  min-width: 150px;
  padding: .4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all .22s var(--ease);
}

.lang-switch.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-menu button {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .6rem .7rem;
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 600;
}

.lang-menu button:hover {
  background: var(--sky-100);
}

.lang-menu button.active {
  color: var(--blue-600);
}

.header-cta {
  display: none;
}

.desktop-nav {
  display: none;
}

.header-end .lang-switch {
  display: none;
}

@media (min-width:860px) {
  .header-cta {
    display: inline-flex;
  }

  .desktop-nav {
    display: block;
  }

  .header-end .lang-switch {
    display: block;
  }

  .desktop-nav-list {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .desktop-nav-link {
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink-800);
    transition: color .3s var(--ease);
    padding: .4rem .2rem;
  }

  .desktop-nav-link:hover {
    color: var(--blue-600);
  }
}

/* =============================== Homepage Transparent Header Override ============================== */
.home-page .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

.home-page .site-header .logo {
  color: #ffffff;
  font-size: 1.6rem;
}

.home-page .site-header .logo .dot-mark {
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

.home-page .site-header .desktop-nav-link {
  color: rgba(255, 255, 255, 0.88);
}

.home-page .site-header .desktop-nav-link:hover {
  color: #ffffff;
}

.home-page .site-header .hamburger span {
  background: #ffffff;
}

.home-page .site-header .lang-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.home-page .site-header .lang-btn:hover {
  border-color: #ffffff;
}

.home-page .site-header .header-cta {
  background: #ffffff;
  color: #1D4ED8;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.12);
  transition: all 0.3s var(--ease);
  border: 1.5px solid transparent;
}

.home-page .site-header .header-cta:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.22);
}

/* Homepage Scrolled Header State */
.home-page .site-header.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(219, 234, 254, 0.4);
  box-shadow: 0 4px 24px rgba(11, 32, 54, 0.04);
}

.home-page .site-header.scrolled .logo {
  color: var(--ink-900);
  font-size: 1.45rem;
}

.home-page .site-header.scrolled .logo .dot-mark {
  background: var(--blue-500);
  box-shadow: none;
}

.home-page .site-header.scrolled .desktop-nav-link {
  color: var(--ink-800);
}

.home-page .site-header.scrolled .desktop-nav-link:hover {
  color: var(--blue-600);
}

.home-page .site-header.scrolled .hamburger span {
  background: var(--ink-900);
}

.home-page .site-header.scrolled .lang-btn {
  color: var(--ink-800);
  border-color: var(--line);
}

.home-page .site-header.scrolled .lang-btn:hover {
  border-color: var(--blue-500);
}

.home-page .site-header.scrolled .header-cta {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(13, 98, 184, 0.2);
}

.home-page .site-header.scrolled .header-cta:hover {
  background: linear-gradient(135deg, #0B5ED7 0%, #1D4ED8 100%);
  transform: translateY(-2px);
}

/* =============================== Store Page Header ============================== */
/* Scoped to .store-page only — does not affect the header on any other page. */
.store-page .site-header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 18px rgba(11, 32, 54, .05);
}

.store-page .site-header.scrolled {
  box-shadow: 0 6px 24px rgba(11, 32, 54, .09);
}

.store-page .site-header .logo {
  font-size: 1.45rem;
}

.store-page .site-header .header-end {
  gap: .7rem;
}

.store-page .site-header .header-icons {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-inline-end: .8rem;
  margin-inline-end: .2rem;
  border-inline-end: 1px solid var(--line);
}

@media (max-width: 859px) {
  .store-page .site-header .header-icons {
    border-inline-end: none;
    padding-inline-end: 0;
    margin-inline-end: 0;
  }
}

.store-page .site-header .store-cart-icon {
  width: 42px;
  height: 42px;
}

.store-page .site-header .lang-btn {
  padding: .5rem .8rem;
}

/* =============================== Sidebar drawer ============================== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 32, 54, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease);
  z-index: 90;
}

.overlay.show {
  opacity: 1;
  visibility: visible;
}

.sidebar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  width: min(340px, 86vw);
  background: var(--white);
  z-index: 95;
  transform: translateX(-105%);
  transition: transform .38s var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: 24px 0 48px -24px rgba(11, 32, 54, .35);
}

html[dir="rtl"] .sidebar {
  transform: translateX(105%);
}

.sidebar.show {
  transform: translateX(0);
}

html[dir="rtl"] .sidebar.show {
  transform: translateX(0);
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem;
  border-bottom: 1px solid var(--line);
}

.sidebar-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sky-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.sidebar-nav {
  padding: 1rem 1.3rem;
  overflow-y: auto;
  flex: 1;
}

.sidebar-nav>li {
  border-bottom: 1px solid var(--sky-100);
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem .2rem;
  font-weight: 700;
  font-size: 1.02rem;
}

.sidebar-link:hover {
  color: var(--blue-600);
}

.sidebar-link .chev {
  transition: transform .3s var(--ease);
  color: var(--muted);
}

.sidebar-item.open .sidebar-link .chev {
  transform: rotate(180deg);
}

.sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease);
}

.sidebar-item.open .sub-menu {
  max-height: 600px;
}

.sub-menu li a {
  display: block;
  padding-block: .65rem;
  padding-inline: 1.4rem .4rem;
  color: var(--muted);
  font-size: .94rem;
}

.sub-menu li a:hover {
  color: var(--blue-600);
}

.sidebar-bottom {
  padding: 1.3rem;
  border-top: 1px solid var(--line);
}

.sidebar-lang {
  display: flex;
  gap: .5rem;
}

.sidebar-lang button {
  flex: 1;
  padding: .55rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: .85rem;
}

.sidebar-lang button.active {
  border-color: var(--blue-600);
  color: var(--blue-600);
  background: var(--sky-50);
}

/* =============================== Hero (Compact Modern Style) ========================================= */
.hero {
  position: relative;
  min-height: 650px;
  max-height: 720px;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 2.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, #EBF4FE 50%, #F8FAFC 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
}

@media (min-width: 900px) {
  .hero {
    height: 680px;
  }
}

.hero-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Glassy Transparent Blue Cubes Floating Background */
.blue-cube {
  position: absolute;
  border-radius: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.22), 0 10px 30px rgba(29, 78, 216, 0.08);
  pointer-events: none;
  animation: floatCube 15s ease-in-out infinite alternate;
  z-index: 0;
}

.cube-1 {
  width: 80px;
  height: 80px;
  top: 15%;
  inset-inline-start: 45%;
  transform: rotate(15deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(96, 165, 250, 0.16) 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation-duration: 12s;
}

.cube-2 {
  width: 55px;
  height: 55px;
  top: 68%;
  inset-inline-start: 35%;
  transform: rotate(-20deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(29, 78, 216, 0.12) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  animation-duration: 18s;
  animation-delay: -3s;
}

.cube-3 {
  width: 95px;
  height: 95px;
  top: 22%;
  inset-inline-end: 6%;
  transform: rotate(25deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(56, 189, 248, 0.15) 100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  animation-duration: 15s;
  animation-delay: -6s;
}

.cube-4 {
  width: 45px;
  height: 45px;
  bottom: 15%;
  inset-inline-end: 42%;
  transform: rotate(-10deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(13, 98, 184, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation-duration: 14s;
  animation-delay: -2s;
}

.cube-5 {
  width: 65px;
  height: 65px;
  top: 48%;
  inset-inline-start: 6%;
  transform: rotate(35deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(96, 165, 250, 0.14) 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation-duration: 20s;
  animation-delay: -8s;
}

@keyframes floatCube {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(-20px) rotate(15deg) scale(1.05);
  }

  100% {
    transform: translateY(10px) rotate(-10deg) scale(0.95);
  }
}

/* Homepage Connected Hero Section Override */
.home-page .hero {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 40%, #60A5FA 75%, #DBEAFE 92%, #FFFFFF 100%);
  color: #ffffff;
  padding-top: calc(var(--header-h) + 2.5rem);
}

.home-page .hero-main-title {
  color: #ffffff;
}

.home-page .hero-description {
  color: rgba(255, 255, 255, 0.88);
}

.home-page .hero-btn-main {
  background: #ffffff;
  color: #1D4ED8;
  box-shadow: 0 10px 25px -5px rgba(29, 78, 216, 0.35);
}

.home-page .hero-btn-main:hover {
  background: #f8fafc;
  color: #0B5ED7;
  box-shadow: 0 15px 30px -5px rgba(29, 78, 216, 0.5);
}

.home-page .hero-btn-sec {
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  background: transparent;
}

.home-page .hero-btn-sec:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.hero-grid-wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  width: 100%;
}

@media (min-width: 900px) {
  .hero-grid-wrapper {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.hero-content {
  text-align: start;
  animation: heroFadeIn 0.8s ease-out forwards;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-main-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}

.hero-description {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-600);
  margin-bottom: 1.8rem;
  max-width: 600px;
}

.hero-cta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.hero-btn-main {
  background: linear-gradient(135deg, var(--blue-600) 0%, #0284C7 100%);
  color: #fff;
  box-shadow: 0 10px 25px -5px rgba(13, 98, 184, 0.35);
  transition: all 0.3s var(--ease);
}

.hero-btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px -5px rgba(13, 98, 184, 0.5);
}

.hero-btn-sec {
  border: 1.5px solid var(--sky-300);
  color: var(--blue-600);
  transition: all 0.3s var(--ease);
}

.hero-btn-sec:hover {
  border-color: var(--blue-600);
  background: var(--sky-50);
  transform: translateY(-3px);
}

/* Hero Media & Floating Chips */
.hero-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-illustration {
  position: relative;
  width: 100%;
  max-width: 440px;
  animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.hero-visual-card {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.icon-chip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 10px 24px rgba(13, 98, 184, 0.12);
  animation: float 5s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.icon-chip:hover {
  animation-play-state: paused;
  transform: scale(1.15) translateY(-5px);
}

.icon-chip svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 899px) {
  .hero {
    min-height: auto;
    max-height: none;
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: 2rem;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* =============================== Logos strip ================================= */
.logos {
  padding-block: var(--space-5);
}

.logos .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 4vw, 3.6rem);
}

.logos img,
.logos .logo-glyph {
  height: 34px;
  opacity: .55;
  filter: grayscale(1);
  transition: opacity .25s var(--ease), filter .25s var(--ease);
}

.logos .logo-glyph:hover {
  opacity: 1;
  filter: none;
}

/* =============================== Why-us split ================================= */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width:900px) {
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.why-visual {
  background: var(--sky-100);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-list {
  display: grid;
  gap: var(--space-4);
}

.why-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.why-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--sky-100);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-icon svg {
  width: 26px;
  height: 26px;
}

.why-item h3 {
  font-size: 1.08rem;
  margin-bottom: .3rem;
}

.why-item p {
  color: var(--muted);
  font-size: .96rem;
}

/* =============================== Feature cards ================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.35rem;
  box-shadow: 0 4px 16px -10px rgba(11, 32, 54, .12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}

.feature-card .why-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  margin-bottom: .9rem;
}

.feature-card .why-icon svg {
  width: 22px;
  height: 22px;
}

.feature-card h3 {
  font-size: 1rem;
  margin-bottom: .35rem;
}

.feature-card p {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .features-grid {
    gap: .65rem;
  }

  .feature-card {
    padding: 1rem;
  }

  .feature-card .why-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    margin-bottom: .65rem;
  }

  .feature-card .why-icon svg {
    width: 19px;
    height: 19px;
  }

  .feature-card h3 {
    font-size: .92rem;
  }

  .feature-card p {
    font-size: .82rem;
  }
}

/* =============================== Mission ======================================= */
.mission {
  background: var(--brand-navy);
  color: var(--white);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
}

.mission::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(20, 119, 214, .35), transparent 60%);
}

.mission-inner {
  position: relative;
  max-width: 720px;
}

.mission .eyebrow {
  color: var(--sky-300);
}

.mission h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.mission p {
  color: #C7D7E6;
  margin-top: var(--space-3);
  font-size: 1.05rem;
}

/* =============================== Services grid ================================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-4);
}

.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--sky-300);
}

.service-card .why-icon {
  background: var(--blue-600);
  color: var(--white);
}

.service-card h3 {
  font-size: 1.1rem;
}

.service-card p {
  color: var(--muted);
  font-size: .94rem;
  flex: 1;
}

.service-card .readmore {
  color: var(--blue-600);
  font-weight: 700;
  font-size: .92rem;
}

/* =============== Homepage services section — visual grid (image-only cards, ===============
   same look & spacing language as .portfolio-grid / .portfolio-card, no title/desc). */
.services-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.service-visual-card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sky-50);
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  aspect-ratio: 4/3;
}

.service-visual-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}

/* Elegant hover — desktop / precise pointers only, so it never sticks on tap */
@media (hover: hover) and (pointer: fine) {
  .service-visual-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -16px rgba(13, 98, 184, .25);
  }

  .service-visual-card:hover .service-visual-card-img {
    transform: scale(1.08);
  }
}

/* Subtle press feedback on touch devices */
@media (hover: none), (pointer: coarse) {
  .service-visual-card:active {
    transform: scale(.96);
    box-shadow: 0 6px 16px -10px rgba(13, 98, 184, .3);
  }
}

@media (max-width:1024px) {
  .services-visual-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Phones — 2 compact columns instead of a single stacked column */
@media (max-width:640px) {
  .services .section-head,
  .portfolio .section-head {
    margin-bottom: var(--space-3);
  }

  .services-visual-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
    margin-top: 1.25rem;
  }

  .service-visual-card {
    aspect-ratio: 1/1;
    border-radius: var(--r-md);
  }

  .services .text-center[style*="margin-top"],
  .portfolio .text-center[style*="margin-top"] {
    margin-top: 1.5rem !important;
  }
}

/* =============================== Methodology (منهجية العمل) ================================ */
.methodology {
  position: relative;
  overflow: hidden;
}

/* Optional Background Image */
.methodology-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.08;
  pointer-events: none;
}

.methodology-bg-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content Layer */
.methodology-content {
  position: relative;
  z-index: 1;
}

.methodology .section-subtitle {
  max-width: 700px;
  margin: var(--space-3) auto 0;
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.7;
}

/* Steps Flow: circular icon orbs connected by curved arrows,
   numbered badges below — desktop horizontal, mobile vertical timeline.
   Each step's accent color is set via --step-c on [data-step]: a distinct,
   soft, professional hue per step (blue / green / purple / orange / teal)
   that drives the orb glow, border, badge tint and connecting line. */
.method-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: var(--space-7);
}

/* Soft gradient timeline line threading behind the orbs (desktop only) */
.method-row::before {
  content: "";
  position: absolute;
  top: 58px;
  left: 9%;
  right: 9%;
  height: 2px;
  background: linear-gradient(90deg, #4A8FF2, #2DAE73, #8B6CF0, #F0A24D, #1FB3A6);
  opacity: .22;
  border-radius: var(--r-pill);
  z-index: 0;
}

.method-step,
.method-arrow {
  position: relative;
  z-index: 1;
}

.method-step {
  --step-c: var(--blue-500);
  flex: 1 1 0;
  min-width: 0;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

.method-step[data-step="1"] {
  --step-c: #4A8FF2;
}

.method-step[data-step="2"] {
  --step-c: #2DAE73;
}

.method-step[data-step="3"] {
  --step-c: #8B6CF0;
}

.method-step[data-step="4"] {
  --step-c: #F0A24D;
}

.method-step[data-step="5"] {
  --step-c: #1FB3A6;
}

/* Icon Orb — soft glow + glass ring */
.method-orb {
  position: relative;
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.method-orb::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--step-c) 20%, transparent) 0%, transparent 72%);
  filter: blur(2px);
  transition: opacity .4s var(--ease);
  opacity: .85;
}

.method-orb-ring {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), color-mix(in srgb, var(--step-c) 12%, white));
  border: 1.5px solid color-mix(in srgb, var(--step-c) 34%, transparent);
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--step-c) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--step-c);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.method-step:hover .method-orb-ring {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--step-c) 55%, transparent);
  box-shadow: 0 24px 42px -16px color-mix(in srgb, var(--step-c) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, .75);
}

.method-step:hover .method-orb::before {
  opacity: 1;
}

.method-orb-ring svg {
  width: 38px;
  height: 38px;
  stroke: currentColor;
}

/* Connector dot beneath the orb */
.method-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--step-c);
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(11, 32, 54, .18);
  margin-top: -6px;
}

/* Number badge */
.method-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--step-c) 45%, transparent);
  background: color-mix(in srgb, var(--step-c) 7%, white);
  color: var(--step-c);
  font-weight: 800;
  font-size: .98rem;
  margin-top: var(--space-1);
  transition: background .4s var(--ease);
}

.method-step:hover .method-badge {
  background: color-mix(in srgb, var(--step-c) 14%, white);
}

.method-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: var(--space-1) 0 0;
}

.method-desc {
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  max-width: 190px;
}

/* Curved arrows between orbs */
.method-arrow {
  flex: 0 0 auto;
  width: 56px;
  padding-top: 40px;
  opacity: .9;
}

.method-arrow svg {
  width: 100%;
  height: 34px;
  display: block;
}

[dir="rtl"] .method-arrow svg {
  transform: scaleX(-1);
}

/* "Back to store / back to list" arrow: this icon is a directional UI glyph
   (not a product/content image), so it flips with reading direction — it
   should point toward where "back" actually is on screen in each direction.
   Used on pages/store/product.html, pages/blog/article.html and
   pages/portfolio/project.html. */
[dir="rtl"] .back-link svg {
  transform: scaleX(-1);
}

/* Responsive: Tablet — switch to a vertical timeline */
@media (max-width: 1024px) {
  .method-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .method-row::before {
    display: none;
  }

  .method-step {
    max-width: 360px;
  }

  .method-arrow {
    width: auto;
    padding-top: 0;
    transform: rotate(90deg);
  }

  .method-arrow svg {
    height: 44px;
  }
}

/* Responsive: Mobile */
@media (max-width: 640px) {
  .methodology .section-subtitle {
    font-size: .95rem;
  }

  .method-row {
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  .method-step {
    gap: .55rem;
  }

  .method-orb {
    width: 84px;
    height: 84px;
  }

  .method-orb-ring svg {
    width: 28px;
    height: 28px;
  }

  .method-badge {
    width: 36px;
    height: 36px;
    font-size: .86rem;
    margin-top: 0;
  }

  .method-title {
    font-size: .96rem;
    margin-top: .2rem;
  }

  .method-desc {
    font-size: .84rem;
    max-width: 240px;
  }

  .method-arrow {
    padding-top: 0;
  }

  .method-arrow svg {
    height: 26px;
  }
}

.methodology-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.value-prop {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.value-prop svg {
  width: 24px;
  height: 24px;
  color: var(--blue-600);
  flex-shrink: 0;
}

/* Responsive: Mobile — methodology footer */
@media (max-width: 640px) {
  .methodology-footer {
    gap: var(--space-3);
  }

  .value-prop {
    font-size: 0.85rem;
  }

  .value-prop svg {
    width: 20px;
    height: 20px;
  }
}

/* =============================== Portfolio (filter buttons used on listing page) ======================================= */
.portfolio-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: var(--space-5);
}

.portfolio-filter button {
  padding: .55rem 1.2rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  background: var(--white);
  transition: all .25s var(--ease);
}

.portfolio-filter button.active,
.portfolio-filter button:hover {
  background: var(--blue-600);
  color: var(--white);
  border-color: var(--blue-600);
}

/* =============================== Testimonials ==================================== */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.testi-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testi-stars {
  color: var(--amber);
  letter-spacing: .15em;
  margin-bottom: var(--space-2);
}

.testi-card p {
  color: var(--ink-600);
  font-size: .96rem;
  line-height: 1.6;
  flex: 1;
}

.testi-who {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.25rem;
}

.testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sky-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--blue-700);
  flex-shrink: 0;
}

.testi-who h4 {
  font-size: .95rem;
}

.testi-who span {
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 1024px) {
  .testi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
  }
}

@media (max-width: 640px) {
  .testi-grid {
    gap: .65rem;
  }

  .testi-card {
    padding: 1rem;
    border-radius: var(--r-md);
  }

  .testi-stars {
    font-size: .85rem;
  }

  .testi-card p {
    font-size: .82rem;
  }

  .testi-who {
    margin-top: .85rem;
    gap: .55rem;
  }

  .testi-avatar {
    width: 36px;
    height: 36px;
    font-size: .82rem;
  }

  .testi-who h4 {
    font-size: .82rem;
  }

  .testi-who span {
    font-size: .72rem;
  }
}

/* =============================== Blog ============================================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blog-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 4px 16px -10px rgba(11, 32, 54, .12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}

.blog-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.blog-body {
  padding: 1.15rem;
}

.blog-meta {
  color: var(--blue-600);
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .4rem;
}

.blog-body h3 {
  font-size: 1.02rem;
  margin-bottom: .6rem;
  line-height: 1.4;
}

.readmore {
  color: var(--blue-600);
  font-weight: 700;
  font-size: .9rem;
}

@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
  }
}

@media (max-width: 640px) {
  .blog-grid {
    gap: .65rem;
  }

  .blog-body {
    padding: .75rem;
  }

  .blog-meta {
    font-size: .68rem;
    margin-bottom: .3rem;
  }

  .blog-body h3 {
    font-size: .84rem;
    margin-bottom: .4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .readmore {
    font-size: .76rem;
  }
}

/* =============================== Stats ============================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  text-align: center;
}

@media (min-width:700px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--blue-600);
}

.stat-label {
  color: var(--muted);
  font-size: .92rem;
  margin-top: .3rem;
}

/* =============================== FAQ ================================================ */
.faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  background: var(--sky-50);
  border-radius: var(--r-md);
  padding: .3rem var(--space-4);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q .plus {
  color: var(--blue-600);
  font-size: 1.3rem;
  transition: transform .3s var(--ease);
}

details[open] .plus {
  transform: rotate(45deg);
}

.faq-a {
  color: var(--muted);
  padding-bottom: 1.1rem;
  font-size: .95rem;
}

/* =============================== CTA band ============================================ */
.cta-band {
  background: var(--brand-navy);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.cta-band p {
  color: var(--sky-100);
  margin-block: var(--space-2) var(--space-4);
}

.cta-band .btn-primary {
  background: var(--white);
  color: var(--blue-700);
}

.cta-band .btn-primary:hover {
  background: var(--sky-100);
}

/* =============================== Footer ============================================== */
.site-footer {
  background: var(--ink-900);
  color: #C7D7E6;
  padding-block: var(--space-6) var(--space-4);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width:800px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer-brand p {
  margin-top: var(--space-3);
  font-size: .92rem;
  color: #93A9BE;
  max-width: 320px;
}

.footer-grid h4 {
  color: var(--white);
  font-size: .98rem;
  margin-bottom: var(--space-3);
}

.footer-grid ul {
  display: grid;
  gap: .6rem;
}

.footer-grid a {
  font-size: .9rem;
  color: #93A9BE;
}

.footer-grid a:hover {
  color: var(--white);
}

.footer-bottom {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  font-size: .84rem;
  color: #6E859B;
}

/* =============================== Contact ============================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width:900px) {
  .contact-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

.quote-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width:560px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-row.full {
  grid-template-columns: 1fr;
}

.quote-form label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--ink-800);
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: .96rem;
  background: var(--white);
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--blue-500);
}

.contact-info {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.info-item h3 {
  font-size: 1rem;
  margin-bottom: .2rem;
}

.info-item p {
  color: var(--muted);
  font-size: .92rem;
}

.map-frame {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16/10;
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* =============================== Sticky mobile bar ===================================== */
.sticky-mobile {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  background: var(--white);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 70;
  box-shadow: 0 -8px 20px -12px rgba(11, 32, 54, .2);
}

@media (min-width:860px) {
  .sticky-mobile {
    display: none;
  }
}

.sticky-mobile ul {
  display: flex;
  width: 100%;
}

.sticky-mobile li {
  flex: 1;
}

.sticky-mobile a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .7rem .4rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--ink-800);
}

.sticky-mobile .quote {
  color: var(--blue-600);
}

/* =============================== Chatbot ================================================ */

.floating-controls {
  position: fixed;
  bottom: 88px;
  inset-inline-end: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  z-index: 75;
}

@media (min-width: 860px) {
  .floating-controls {
    bottom: 28px;
  }
}

.floating-controls .lang-switch {
  background: var(--white);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
}

.floating-controls .lang-menu {
  top: auto;
  bottom: calc(100% + 10px);
}

.chat-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.5s var(--ease);
}

.chat-wrapper.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.chat-fab {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--blue-600);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(13, 98, 184, .6);
  transition: transform .25s var(--ease);
  cursor: pointer;
  border: none;
}

/* Tooltip */
.chat-tooltip {
  position: absolute;
  bottom: calc(100% + 15px);
  inset-inline-end: 0;
  background: var(--white);
  color: var(--ink-800);
  padding: 10px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s var(--ease);
  pointer-events: none;
  border: 1px solid var(--line);
}

.chat-tooltip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.chat-tooltip-text {
  margin: 0;
}

.chat-tooltip-close {
  background: transparent;
  border: none;
  color: var(--slate-500);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.chat-tooltip-close:hover {
  color: var(--red-600);
}


.chat-fab:hover {
  transform: scale(1.08);
}

.chat-panel {
  position: fixed;
  bottom: 158px;
  inset-inline-end: 22px;
  width: min(320px, 86vw);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  z-index: 76;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all .3s var(--ease);
}

@media (min-width:860px) {
  .chat-panel {
    bottom: 98px;
  }
}

.chat-panel.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.chat-head {
  background: var(--blue-600);
  color: var(--white);
  padding: 1rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-head h4 {
  color: var(--white);
  font-size: .98rem;
}

.chat-body {
  padding: 1.2rem;
  max-height: 280px;
  overflow-y: auto;
}

.chat-msg {
  background: var(--sky-50);
  border-radius: var(--r-md);
  padding: .8rem 1rem;
  font-size: .9rem;
  margin-bottom: .7rem;
  color: var(--ink-800);
}

.chat-foot {
  display: flex;
  border-top: 1px solid var(--line);
}

.chat-foot input {
  flex: 1;
  border: 0;
  padding: .9rem 1rem;
  font-size: .9rem;
}

.chat-foot button {
  padding: 0 1.1rem;
  color: var(--blue-600);
  font-weight: 700;
}

/* =============================== Reveal-on-scroll ======================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* =============================== Utilities =============================================== */
.mt-0 {
  margin-top: 0;
}

.text-center {
  text-align: center;
}

@media (max-width:640px) {
  section {
    padding-block: var(--space-6);
  }

  /* Section-level classes below carry their own padding (higher
     specificity than the generic `section` rule), so each needs an
     explicit entry here to switch to the same compact scale at the
     same breakpoint as every other section. */
  .portfolio {
    padding-block: var(--space-6);
  }
}

/* =============================== Hero — Mobile-only compact layout =============================
   Scope: phones only (≤640px). Does NOT touch desktop/tablet rules above,
   and does not change text, colors, fonts, or the illustration itself —
   only spacing, stacking order and the image's width/centering.
   Height is kept content-driven (no min-height / no forced vh) rather than
   hard-capped with max-height, specifically so longer CMS-edited titles or
   descriptions on small phones are never clipped — but every spacing value
   below is cut to the minimum, so for the current content the section lands
   naturally in the ~85–100vh range on typical phone screens. */
@media (max-width: 640px) {
  .hero {
    min-height: unset;
    max-height: none;
    /* just enough to clear the fixed header — was calc(space-7 + 2rem) ≈ 128px */
    padding-top: calc(var(--header-h) + 12px);
    padding-bottom: 24px;
  }

  /* Content already flows title → description → buttons → image via
     natural DOM order inside the single-column grid. */
  .hero-grid-wrapper {
    gap: 0;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
  }

  .hero-main-title {
    margin-bottom: 0.7rem;
  }

  .hero-description {
    margin-bottom: 1.1rem;
  }

  .hero-cta-wrap {
    margin-bottom: 0;
  }

  /* Tight 24–40px gap between the buttons and the image, and no extra
     padding above/below it — the section ends right after the image
     plus the small 24px bottom padding set on .hero above. */
  .hero-media {
    width: 100%;
    margin-top: clamp(24px, 6vw, 40px);
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Image centered at ~70–80% of screen width, aspect ratio preserved
     (width-only scaling on an SVG/img keeps proportions intact). */
  .hero-illustration {
    width: 74%;
    max-width: 74%;
    margin: 0 auto;
    animation: none;
    /* remove the floating drift so it doesn't add visual "air" around it */
  }

  .hero-media img[data-role="hero-image"] {
    width: 74% !important;
    max-width: 74% !important;
    margin: 0 auto !important;
    display: block;
  }
}



/* =============================== Trusted Technologies Section (Infinite Marquee) ============================== */
.trusted-tech {
  background: var(--white);
  padding-block: var(--space-7);
  position: relative;
  overflow: hidden;
}

.tech-header {
  text-align: center;
  margin-bottom: var(--space-6);
  max-width: 740px;
  margin-inline: auto;
}

.tech-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}

.tech-subtitle {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 620px;
  margin-inline: auto;
}

/* Marquee Wrapper - Full width container
   direction: ltr is pinned here (and re-asserted on every descendant
   below) so this entire component is a self-contained, direction-
   isolated widget: nothing inside it -- layout, the mask fade, or the
   scroll transform -- is ever computed relative to the page's current
   RTL/LTR state. */
.tech-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-block: var(--space-5);
  direction: ltr;

  /* Subtle gradient fade on edges for premium look */
  mask-image: linear-gradient(to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%);
}

.tech-marquee {
  width: 100%;
  position: relative;
  direction: ltr;
}

/* Marquee Track - Infinite scrolling container
   The track holds exactly TWO identical groups (.tech-logo-set) with NO gap
   between them at this level, so both halves are pixel-perfect equal in width.
   The actual scrolling transform is now applied by assets/js/tech-marquee.js,
   which measures the real width of one set and wraps the position using that
   exact value every frame -- this removes any possibility of a jump, gap, or
   disappearing logos at the loop point, regardless of image loading timing or
   screen size. (See tech-marquee.js for details.) */
.tech-marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  min-width: 1px;

  /* Always lay out (and scroll) in a fixed physical direction, independent
     of the page's current dir="rtl"/"ltr". The JS animation in
     tech-marquee.js always moves the track by a negative translate3d(x),
     a physical-pixel operation with no concept of RTL/LTR — but without
     this rule, the flex items themselves would still be ordered by the
     inherited body direction, which is exactly the kind of RTL-only
     interaction that can make a fixed-direction animation look stalled
     or misaligned only in Arabic. Pinning it here removes that class of
     bug entirely, in both languages, permanently. */
  direction: ltr;

  will-change: transform;

  /* Hardware acceleration for buttery smooth performance */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Each set is an identical, self-contained group of all 27 logos, spaced
   closely and consistently. Because both .tech-logo-set groups are
   byte-for-byte identical, their rendered widths are always equal. */
.tech-logo-set {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-shrink: 0;
}

/* Logo Item Styling */
.tech-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.5rem;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  position: relative;
}

/* Logo Images - Always Full Color & Visible, large and clear */
.tech-logo-item img {
  height: 132px;
  width: auto;
  max-width: 280px;
  min-width: 160px;
  object-fit: contain;

  /* ALWAYS FULL COLOR - No grayscale */
  filter: none;
  opacity: 1;

  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  pointer-events: none;
  display: block;
}

/* Premium Hover Effect with Glow */
.tech-logo-item:hover {
  transform: scale(1.12);
  z-index: 10;
}

.tech-logo-item:hover img {
  filter: drop-shadow(0 8px 24px rgba(13, 98, 184, 0.25));
}

/* Subtle background glow on hover */
.tech-logo-item::before {
  content: '';
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle at center,
      rgba(13, 98, 184, 0.08) 0%,
      transparent 70%);
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.tech-logo-item:hover::before {
  opacity: 1;
}

/* Fade-in animation for section */
@keyframes techFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.trusted-tech.in {
  animation: techFadeIn 0.9s var(--ease) forwards;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .tech-logo-set {
    gap: 1.5rem;
  }

  .tech-logo-item img {
    height: 116px;
    max-width: 260px;
    min-width: 140px;
  }
}

@media (max-width: 900px) {
  .tech-logo-set {
    gap: 1.15rem;
  }

  .tech-logo-item {
    padding: 0.35rem 0.4rem;
  }

  .tech-logo-item img {
    height: 100px;
    max-width: 230px;
    min-width: 125px;
  }

  .tech-logo-item:hover {
    transform: scale(1.08);
  }
}

@media (max-width: 640px) {
  .trusted-tech {
    padding-block: var(--space-6);
  }

  .tech-marquee-wrapper {
    padding-block: var(--space-4);
  }

  .tech-logo-set {
    gap: 0.85rem;
  }

  .tech-logo-item {
    padding: 0.3rem 0.35rem;
  }

  .tech-logo-item img {
    height: 84px;
    max-width: 200px;
    min-width: 110px;
  }

  .tech-logo-item:hover {
    transform: scale(1.06);
  }

  .tech-title {
    font-size: 1.6rem;
  }

  .tech-subtitle {
    font-size: 0.95rem;
  }
}

/* Reduced motion is now handled by assets/js/tech-marquee.js, which checks
   this same media query and simply never starts the scrolling loop -- the
   first set of logos stays visible and static. This rule only keeps the
   hover/interaction transitions calm for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {

  .tech-logo-item,
  .tech-logo-item img,
  .tech-logo-item::before {
    transition: none;
  }
}


/* =========================================================================
   PORTFOLIO SECTION
   ========================================================================= */
.portfolio {
  padding-block: var(--space-7);
  background: var(--white);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.portfolio-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sky-50);
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  cursor: pointer;
  aspect-ratio: 4/3;
}

.portfolio-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

/* Elegant hover — desktop / precise pointers only, so it never sticks on tap */
@media (hover: hover) and (pointer: fine) {
  .portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -16px rgba(13, 98, 184, 0.25);
  }

  .portfolio-card:hover .portfolio-card-img {
    transform: scale(1.08);
  }
}

/* Subtle press feedback on touch devices */
@media (hover: none), (pointer: coarse) {
  .portfolio-card:active {
    transform: scale(.96);
    box-shadow: 0 6px 16px -10px rgba(13, 98, 184, .3);
  }
}

.portfolio-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 32, 54, 0.95) 0%, rgba(11, 32, 54, 0.6) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
}

.portfolio-card:hover .portfolio-card-overlay {
  opacity: 1;
}

.portfolio-card-category {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: var(--blue-600);
  color: var(--white);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  width: fit-content;
}

.portfolio-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.portfolio-card-desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portfolio-card-link {
  position: absolute;
  top: 1.5rem;
  inset-inline-start: 1.5rem;
  width: 48px;
  height: 48px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8) translateY(-10px);
  transition: all 0.4s var(--ease);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.portfolio-card:hover .portfolio-card-link {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.portfolio-card-link svg {
  width: 20px;
  height: 20px;
  color: var(--blue-600);
}

/* Responsive */
@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) and (min-width: 641px) {
  .portfolio-card {
    aspect-ratio: 16/10;
  }

  .portfolio-card-overlay {
    padding: 1.5rem;
  }

  .portfolio-card-title {
    font-size: 1.2rem;
  }
}

/* Phones — 2 compact columns, tighter spacing, always-on mini overlay
   (title only) since hover isn't a reliable interaction on touch). */
@media (max-width: 640px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
    margin-top: 1.25rem;
  }

  .portfolio-card {
    aspect-ratio: 1/1;
    border-radius: var(--r-md);
  }

  .portfolio-card-overlay {
    opacity: 1;
    padding: .6rem;
    background: linear-gradient(to top, rgba(11, 32, 54, .88) 0%, rgba(11, 32, 54, .15) 65%, transparent 100%);
  }

  .portfolio-card-category {
    padding: .2rem .55rem;
    font-size: .58rem;
    margin-bottom: .3rem;
    letter-spacing: .02em;
  }

  .portfolio-card-title {
    font-size: .82rem;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .portfolio-card-desc {
    display: none;
  }

  .portfolio-card-link {
    width: 30px;
    height: 30px;
    top: .5rem;
    inset-inline-start: .5rem;
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  .portfolio-card-link svg {
    width: 14px;
    height: 14px;
  }
}

/* =========================================================================
   PRODUCTS SECTION — Carousel
   ========================================================================= */
.products-section {
  padding-block: var(--space-7);
  background: var(--sky-50);
  overflow: hidden;
}

.products-carousel-wrap {
  position: relative;
  margin-top: 3rem;
}

.products-carousel-viewport {
  overflow: hidden;
  width: 100%;
}

.products-carousel-track {
  display: flex;
  will-change: transform;
  /* Always lay slides out in physical left-to-right order. The JS carousel
     (products-loader.js) positions slides with translateX() assuming a
     fixed physical order that matches DOM order; without this, inheriting
     direction:rtl from <html dir="rtl"> (Arabic) reverses the flex paint
     order and the transform math points at empty space, making every
     product invisible. Text direction inside each card is restored below
     so Arabic content still reads correctly. */
  direction: ltr;
  /* REQUIRED for the JS state machine, not just visual polish: the carousel
     (products-loader.js) advances slides by setting a new translateX() and
     then waits for the "transitionend" DOM event to clear its isAnimating
     lock and run the infinite-loop boundary check. Without a transition
     declared here, the browser applies transform changes instantly and
     "transitionend" never fires — isAnimating gets stuck "true" forever
     after the very first autoplay tick, permanently freezing the slider
     (autoplay, arrows, dots and swipe all become no-ops from that point on). */
  transition: transform 0.6s var(--ease);
}

html[dir="rtl"] .product-card {
  direction: rtl;
  text-align: right;
}

.products-carousel-track.no-transition {
  transition: none !important;
}

.product-slide {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding-inline: 0.9rem;
  box-sizing: border-box;
}

.product-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -16px rgba(13, 98, 184, 0.22);
}

.product-card-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--sky-100);
}

.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
  backface-visibility: hidden;
  will-change: transform;
}

.product-card:hover .product-card-img {
  transform: scale(1.06);
}

.product-card-category {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  padding: 0.35rem 0.9rem;
  background: rgba(11, 32, 54, 0.75);
  backdrop-filter: blur(4px);
  color: var(--white);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
}

.product-card-badges {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
  z-index: 2;
}

.product-card-badge-discount,
.product-card-badge-new,
.product-card-badge-sale,
.product-card-badge-featured,
.product-card-badge-outofstock {
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

.product-card-badge-discount {
  background: #e0473e;
}

.product-card-badge-new {
  background: var(--blue-600);
}

.product-card-badge-sale {
  background: #f59e0b;
}

.product-card-badge-featured {
  background: #8b5cf6;
}

.product-card-badge-outofstock {
  background: #6b7280;
}

.product-card-body {
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.product-card-old-price {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 500;
  font-size: 0.85rem;
  margin-inline-start: 0.4rem;
}

.product-card-swatches {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.product-card-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-block;
}

.product-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.35;
}

.product-card-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.4rem;
}

.product-card-price {
  font-weight: 800;
  color: var(--blue-700);
  font-size: 1.05rem;
  white-space: nowrap;
}

.product-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  background: var(--blue-600);
  color: var(--white);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.product-card-cta:hover {
  background: var(--blue-700);
  transform: translateY(-2px);
}

.product-card-cta.is-disabled {
  background: #94a3b8;
  color: #f1f5f9;
  pointer-events: none;
  cursor: not-allowed;
}

.product-card-cta.is-disabled:hover {
  background: #94a3b8;
  transform: none;
}

/* =============================== Store grid — card refinements ============================== */
/* Updated for Task 6 premium card redesign. The card shell and all inner
   elements are now fully styled in store.css; these rules only handle
   store-page-specific overrides that differ from the shared product card defaults. */

/* Show category in store grid */
.store-grid .product-card-category {
  display: block;
}

/* Grid layout */
.store-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 1.25rem;
}

@media (min-width: 1280px) {
  .store-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 1024px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
}

/* Mobile micro-adjustments */
@media (max-width: 640px) {
  .store-grid .product-card-body {
    padding: 0.8rem 0.85rem 1rem;
    gap: 0.35rem;
  }

  .store-grid .product-card-title {
    font-size: 0.82rem;
  }

  .store-grid .product-card-price {
    font-size: 0.95rem;
  }

  .store-grid .product-card-cta {
    padding: 0.55rem 0.75rem;
    font-size: 0.75rem;
  }

  .store-grid .product-card-rating {
    font-size: 0.72rem;
  }

  .store-grid .card-wishlist-btn {
    width: 30px;
    height: 30px;
  }
}


/* Arrows */
.products-carousel-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  border: 1px solid var(--line);
  transition: background 0.25s var(--ease), transform 0.2s var(--ease);
}

.products-carousel-arrow:hover {
  background: var(--blue-600);
}

.products-carousel-arrow:hover svg {
  stroke: var(--white);
}

.products-carousel-arrow svg {
  width: 20px;
  height: 20px;
  stroke: var(--ink-900);
  transition: stroke 0.25s var(--ease);
}

.products-carousel-arrow.prev {
  inset-inline-start: -23px;
}

.products-carousel-arrow.next {
  inset-inline-end: -23px;
}

html[dir="rtl"] .products-carousel-arrow.prev svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .products-carousel-arrow.next svg {
  transform: scaleX(-1);
}

/* Dots */
.products-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.products-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.products-carousel-dot.active {
  background: var(--blue-600);
  width: 26px;
  border-radius: var(--r-pill);
}

.products-empty-note {
  text-align: center;
  color: var(--muted);
  padding: 2rem 0;
}

@media (max-width: 1024px) {
  .product-slide {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .products-carousel-arrow.prev {
    inset-inline-start: 0.5rem;
  }

  .products-carousel-arrow.next {
    inset-inline-end: 0.5rem;
  }
}

@media (max-width: 640px) {
  .product-slide {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .products-carousel-arrow {
    width: 38px;
    height: 38px;
  }
}




.product-page {
  padding-block: calc(var(--header-h) + var(--space-6)) var(--space-7);
}

.product-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .product-page-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.product-gallery-main {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--sky-50);
  box-shadow: var(--shadow-card);
}

.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery-thumbs {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.product-gallery-thumbs img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s var(--ease);
}

.product-gallery-thumbs img.active {
  border-color: var(--blue-600);
}

.product-page-category {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: var(--sky-100);
  color: var(--blue-700);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.product-page-title {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 0.6rem;
}

.product-page-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue-700);
  margin-bottom: 1.2rem;
}

.product-page-desc {
  color: var(--ink-600);
  line-height: 1.9;
  margin-bottom: 1.4rem;
}

.product-page-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}

.product-page-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--ink-800);
  font-size: 0.95rem;
}

.product-page-features li svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--success);
  margin-top: 0.15rem;
}

.product-option-group {
  margin-bottom: 1.2rem;
}

.product-option-label {
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--ink-900);
  font-size: 0.92rem;
}

.product-option-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.product-option-chip {
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--white);
  transition: all 0.2s var(--ease);
}

.product-option-chip.active,
.product-option-chip:hover {
  border-color: var(--blue-600);
  background: var(--sky-50);
  color: var(--blue-700);
}

.product-qty-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.product-qty-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.product-qty-control button {
  width: 38px;
  height: 38px;
  background: var(--white);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
}

.product-qty-control button:hover {
  background: var(--sky-50);
}

.product-qty-control input {
  width: 44px;
  text-align: center;
  border: none;
  font-weight: 700;
}

.product-page-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.related-products {
  margin-top: var(--space-7);
}

/* ==========================================================================
   Company Logos Marquee Section (Task 4)
   ========================================================================== */
.company-logos-section {
  padding: 3.5rem 0 2.2rem 0;
  background: var(--bg-body, #F8FAFC);
  position: relative;
  overflow: hidden;
}

.company-logos-header {
  text-align: center;
  margin-bottom: 2rem;
}

.company-logos-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue-600, #0D62B8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(13, 98, 184, 0.08);
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  margin-bottom: 0.6rem;
}

.company-logos-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-600, #0D62B8);
}

.company-logos-title {
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 700;
  color: var(--navy-900, #0B2036);
  margin: 0;
}

.company-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0.85rem 0;
  /* Forced to an LTR layout context. The page itself is RTL, and an
     RTL flex/block box wider than its container anchors to its RIGHT edge
     with its local x=0 origin pushed off-screen to the left -- which
     flips the math a translateX(-50%) loop depends on. Isolating this
     component as LTR keeps box alignment and flex item order fully
     predictable (left-anchored, growing rightward), independent of the
     site's overall text direction, so the seamless-loop math below is
     always correct. Logo order has no inherent reading direction, so
     this has no visual downside. */
  direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* The track holds exactly two identical groups. Each group carries its own
   trailing spacing (padding-inline-end, equal to its internal item gap)
   instead of relying on a track-level "gap" between the two groups. That
   makes each group a fully self-contained, identically-sized repeating
   unit, so the two groups together are EXACTLY double the width of one
   group -- at every breakpoint, with any gap value. A plain translateX(-50%)
   is therefore always mathematically exact: no drift, no snap, no visible
   seam when the loop restarts, on desktop or mobile. Moving the track
   left (negative X) is what produces the required continuous
   right-to-left visual motion -- new logos enter from the right edge,
   older ones exit on the left. */
.company-marquee-track {
  display: flex;
  direction: ltr;
  width: max-content;
  animation: company-marquee-scroll 34s linear infinite;
  will-change: transform;
}

.company-marquee-wrapper:hover .company-marquee-track {
  animation-play-state: paused;
}

.company-marquee-group {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding-inline-end: 1.75rem;
  flex-shrink: 0;
}

.company-logo-card {
  min-width: 176px;
  max-width: 208px;
  padding: 0.9rem 1.1rem;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  box-shadow: 0 2px 10px -2px rgba(13, 98, 184, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  user-select: none;
}

.company-logo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px -3px rgba(13, 98, 184, 0.14);
  border-color: rgba(13, 98, 184, 0.35);
}

/* Fixed reference frame (1024 x 687 -- matches the source assets' intended
   aspect) that every logo card renders at, regardless of screen size. The
   frame itself scales responsively while always keeping this exact ratio;
   object-fit: contain scales each logo to fit fully inside it without ever
   cropping or distorting the original image proportions. */
.company-logo-frame {
  width: 100%;
  max-width: 138px;
  aspect-ratio: 1024 / 687;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.company-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(18%) opacity(0.9);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.company-logo-card:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

@keyframes company-marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    /* Exactly one full group-width (including its own trailing gap) to the
       left -- physically right-to-left motion, seamless regardless of dir. */
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 768px) {
  .company-logos-section {
    padding: 2.4rem 0 1.6rem 0;
  }
  .company-marquee-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .company-marquee-track {
    animation-duration: 26s;
  }
  .company-marquee-group {
    gap: 1.1rem;
    padding-inline-end: 1.1rem;
  }
  .company-logo-card {
    min-width: 132px;
    max-width: 156px;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
  }
  .company-logo-frame {
    max-width: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .company-marquee-track {
    animation: none !important;
  }
  .company-marquee-wrapper {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: thin;
  }
}

/* =========================================================================
   LTR (Left-to-Right) Direction Overrides
   Applied when dir="ltr" (French/English)
   ========================================================================= */

html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

/* Generic text alignment for LTR */
html[dir="ltr"] .product-card,
html[dir="ltr"] .hero-content,
html[dir="ltr"] .section-head,
html[dir="ltr"] .service-card,
html[dir="ltr"] .portfolio-card,
html[dir="ltr"] .blog-card,
html[dir="ltr"] .testi-card,
html[dir="ltr"] .faq-item,
html[dir="ltr"] .footer-brand,
html[dir="ltr"] .sidebar-nav {
  text-align: left;
  direction: ltr;
}