:root {
  color-scheme: light;
  --bg: #f7f3f0;
  --bg-soft: #fffaf7;
  --card: #ffffff;
  --text: #2b1a1f;
  --muted: #6b5a61;
  --primary: #7a1e2c;
  --primary-2: #9a2b3b;
  --navy: #1c2a39;
  --gold: #c9a35b;
  --gold-soft: #ead49f;
  --line: rgba(122, 30, 44, 0.12);
  --shadow: 0 20px 55px rgba(60, 20, 30, 0.14);
  --shadow-soft: 0 12px 32px rgba(60, 20, 30, 0.09);
  --topbar-h: 86px;
}

* { box-sizing: border-box; min-width: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  forced-color-adjust: none;
  --topbar-accent: var(--company-main, var(--primary));
  --topbar-accent-2: var(--company-mid, var(--primary-2));
  --topbar-glass-bg:
    linear-gradient(135deg, color-mix(in srgb, var(--topbar-accent) 10%, rgba(255,250,247,.88) 90%), rgba(255,250,247,.84) 44%, color-mix(in srgb, var(--topbar-accent-2) 6%, rgba(255,250,247,.86) 94%)),
    rgba(255,250,247,.82);
  --topbar-border: color-mix(in srgb, var(--topbar-accent) 18%, rgba(255,255,255,.34) 82%);
  --topbar-nav-bg:
    linear-gradient(135deg, color-mix(in srgb, var(--topbar-accent) 11%, rgba(255,255,255,.68) 89%), rgba(255,255,255,.54)),
    rgba(255,250,247,.48);
  --topbar-nav-border: color-mix(in srgb, var(--topbar-accent) 18%, transparent);
  --topbar-lang-bg: color-mix(in srgb, var(--topbar-accent) 4%, rgba(255,255,255,.62) 96%);
  --topbar-lang-border: color-mix(in srgb, var(--topbar-accent) 30%, transparent);
  --topbar-lang-hover: color-mix(in srgb, var(--topbar-accent) 8%, rgba(255,255,255,.60) 92%);
  --topbar-shadow: 0 16px 34px color-mix(in srgb, var(--topbar-accent) 8%, transparent);
}

body.lang-ar { font-family: 'Cairo', sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

body.theme-delivery {
  --company-main: #1f4f9a;
  --company-mid: #2f6fc8;
  --company-deep: #061a38;
  --company-soft: #e7f0ff;
  --company-glow: rgba(31, 79, 154, .36);
}

body.theme-storage {
  --company-main: #23845a;
  --company-mid: #33a472;
  --company-deep: #103d2f;
  --company-soft: #e5f7ee;
  --company-glow: rgba(35, 132, 90, .34);
}

body.theme-cc {
  --company-main: #45308c;
  --company-mid: #6750c6;
  --company-deep: #151c42;
  --company-soft: #eeeafe;
  --company-glow: rgba(69, 48, 140, .36);
}

body.theme-order {
  --company-main: #d9671f;
  --company-mid: #f28b34;
  --company-deep: #82360e;
  --company-soft: #fff0e4;
  --company-glow: rgba(217, 103, 31, .35);
}

@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  body {
    --topbar-glass-bg:
      linear-gradient(135deg, rgba(255,250,247,.94), rgba(255,250,247,.90)),
      #fffaf7;
    --topbar-border: rgba(122,30,44,.16);
    --topbar-nav-bg:
      linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,250,247,.68)),
      #fffaf7;
    --topbar-nav-border: rgba(122,30,44,.14);
    --topbar-lang-bg: rgba(255,255,255,.78);
    --topbar-lang-border: rgba(122,30,44,.24);
    --topbar-lang-hover: rgba(122,30,44,.07);
    --topbar-shadow: 0 16px 34px rgba(122,30,44,.075);
  }

  body.theme-delivery {
    --topbar-border: rgba(31,79,154,.18);
    --topbar-nav-border: rgba(31,79,154,.16);
    --topbar-lang-border: rgba(31,79,154,.26);
    --topbar-shadow: 0 16px 34px rgba(31,79,154,.075);
  }

  body.theme-storage {
    --topbar-border: rgba(35,132,90,.18);
    --topbar-nav-border: rgba(35,132,90,.16);
    --topbar-lang-border: rgba(35,132,90,.26);
    --topbar-shadow: 0 16px 34px rgba(35,132,90,.075);
  }

  body.theme-cc {
    --topbar-border: rgba(69,48,140,.18);
    --topbar-nav-border: rgba(69,48,140,.16);
    --topbar-lang-border: rgba(69,48,140,.26);
    --topbar-shadow: 0 16px 34px rgba(69,48,140,.075);
  }

  body.theme-order {
    --topbar-border: rgba(217,103,31,.18);
    --topbar-nav-border: rgba(217,103,31,.16);
    --topbar-lang-border: rgba(217,103,31,.26);
    --topbar-shadow: 0 16px 34px rgba(217,103,31,.075);
  }
}

.container {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  max-width: 100%;
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: var(--topbar-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: var(--topbar-shadow), inset 0 -1px 0 rgba(201,163,91,.12);
  color: var(--text);
}

.topbar-inner {
  min-height: 110px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
  min-width: 0;
}

.brand-logo {
  height: 110px;
  width: auto;
  object-fit: cover;
  background: transparent;
  padding: 0;
  border-radius: 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}

.company-brand-logo {
  width: 280px;
  height: 140px;
  object-fit: contain;

  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;

  box-shadow: none;

  filter: drop-shadow(0 4px 8px rgba(0,0,0,.08));
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  min-width: 0;
}

.brand-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold), #9b6f26);
  color: #401022;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
}

.brand-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .16em;
  white-space: nowrap;
  line-height: 1.15;
  color: #3a1d27;
  margin: 0;
}

.brand-sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .20em;
  color: var(--gold);
  white-space: nowrap;
  line-height: 1.15;
  margin-top: 5px;
  font-weight: 700;
}

.nav {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--topbar-nav-bg);
  border: 1px solid var(--topbar-nav-border);
  flex-wrap: wrap;
  max-width: 100%;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--topbar-accent) 7%, transparent);
}

.nav a {
  color: color-mix(in srgb, var(--company-deep, #4a2832) 78%, #4a2832 22%);
  transition: .25s ease;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.nav a:hover,
.nav a.active,
.nav a:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--company-deep, var(--primary)), var(--company-main, var(--primary)), var(--company-mid, var(--primary-2)));
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--company-main, var(--primary)) 24%, transparent),
    0 0 0 1px color-mix(in srgb, var(--company-main, var(--primary)) 16%, rgba(255,255,255,.18)) inset;
  outline: none;
}

.lang-wrap { justify-self: end; }

.lang-toggle {
  border: 1px solid var(--topbar-lang-border);
  background: var(--topbar-lang-bg);
  color: var(--company-main, var(--primary));
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  background: var(--topbar-lang-hover);
  border-color: color-mix(in srgb, var(--company-main, var(--primary)) 42%, transparent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--company-main, var(--primary)) 14%, transparent);
  outline: none;
}

.lang-toggle:active {
  transform: translateY(1px) scale(.98);
  background: linear-gradient(135deg, var(--company-deep, var(--primary)), var(--company-main, var(--primary)));
  color: #fff;
}

main {
  background: var(--bg);
}

.page-hero {
  min-height: 660px;
  padding: calc(var(--topbar-h) + 70px) 0 72px;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--company-deep, #3a0209) 96%, #000 4%) 0%, color-mix(in srgb, var(--company-main, #7a1e2c) 78%, #111827 22%) 48%, rgba(28,42,57,.62) 100%),
    var(--hero-image) center/cover no-repeat;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.15), transparent 27%),
    radial-gradient(circle at 70% 22%, var(--company-glow, rgba(201,163,91,.24)), transparent 30%),
    linear-gradient(90deg, rgba(0,0,0,.14), transparent 62%);
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -28% 50%;
  height: 420px;
  background: radial-gradient(circle, rgba(201,163,91,.30), rgba(201,163,91,.07) 58%, transparent 60%);
  pointer-events: none;
  animation: heroOrbFloat 9s ease-in-out infinite;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(340px, .68fr);
  gap: 38px;
  align-items: center;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.hero-content::before {
  content: "";
  position: absolute;
  inset: -44px -34px -38px -44px;
  z-index: -1;
  border-radius: 42px;
  background: radial-gradient(circle at 28% 28%, var(--company-glow, rgba(201,163,91,.22)), transparent 64%);
  filter: blur(8px);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(234,212,159,.38);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--company-mid, var(--gold));
  box-shadow: 0 0 16px var(--company-glow, rgba(201,163,91,.5));
}

.page-hero h1 {
  margin: 18px 0 14px;
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.page-hero p {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: clamp(17px, 1.7vw, 20px);
  max-width: 720px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.btn {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #401022;
  box-shadow: 0 18px 34px rgba(201,163,91,.26);
}

.btn-secondary {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
}

.btn:hover { transform: translateY(-2px); }

.hero-visual {
  position: relative;
  z-index: 1;
  min-height: 396px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.20);
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06)),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 34%);
  box-shadow: 0 28px 90px rgba(0,0,0,.28), 0 0 60px var(--company-glow, rgba(201,163,91,.22));
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.hero-visual::before {
  width: 230px;
  height: 230px;
  right: -86px;
  top: -76px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  animation: heroShapeFloat 8s ease-in-out infinite;
}

.hero-visual::after {
  width: 150px;
  height: 150px;
  left: -54px;
  bottom: -48px;
  background: rgba(201,163,91,.16);
  border: 1px solid rgba(234,212,159,.22);
  animation: heroShapeFloat 7s ease-in-out infinite reverse;
}

.visual-card {
  position: absolute;
  z-index: 2;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  color: #24171e;
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 20px 45px rgba(0,0,0,.20);
  padding: 18px;
  min-width: 164px;
  animation: visualFloat 6.8s ease-in-out infinite;
}

.visual-card small {
  display: block;
  color: var(--company-main, var(--primary));
  font-weight: 900;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .08em;
}

.visual-card strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
  line-height: 1;
}

.visual-card span {
  display: block;
  margin-top: 6px;
  color: #6a5960;
  font-size: 13px;
}

.visual-main {
  left: 50%;
  top: 50%;
  width: min(72%, 330px);
  min-height: 210px;
  transform: translate(-50%, -50%);
  animation: none;
  display: grid;
  align-content: center;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.86)),
    linear-gradient(135deg, var(--company-soft, #fff6df), #fff);
}

.visual-main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--company-main, var(--primary)), var(--gold));
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.metric-pill {
  min-height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--company-main, var(--primary)) 10%, #ffffff 90%);
  color: var(--company-main, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
}

.visual-line {
  height: 8px;
  border-radius: 999px;
  background: rgba(35,25,31,.10);
  overflow: hidden;
}

.visual-line::before {
  content: "";
  display: block;
  width: var(--line-w, 70%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--company-main, var(--primary)), var(--gold));
}

.delivery-visual .route-line {
  position: absolute;
  inset: 68px 54px 88px 54px;
  z-index: 1;
  border: 2px dashed rgba(255,255,255,.38);
  border-radius: 44% 56% 52% 48%;
  transform: rotate(-12deg);
}

.route-node {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 7px rgba(201,163,91,.16), 0 0 26px rgba(201,163,91,.55);
}

.route-node.one { left: 20%; top: 26%; }
.route-node.two { right: 22%; top: 38%; }
.route-node.three { left: 46%; bottom: 24%; }

.delivery-visual .visual-card.one { left: 24px; top: 28px; }
.delivery-visual .visual-card.two { right: 24px; bottom: 28px; animation-delay: -2.4s; }

.storage-visual .shelf {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 76px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.storage-visual .pallet {
  height: 78px;
  border-radius: 12px 12px 6px 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.05)),
    linear-gradient(135deg, var(--company-mid), var(--company-deep));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 30px rgba(0,0,0,.18);
  animation: visualFloat 7s ease-in-out infinite;
}

.storage-visual .pallet:nth-child(2) { animation-delay: -1.5s; }
.storage-visual .pallet:nth-child(3) { animation-delay: -3s; }
.storage-visual .pallet:nth-child(4) { animation-delay: -4.5s; }
.storage-visual .visual-card.one { left: 24px; top: 30px; }
.storage-visual .visual-card.two { right: 24px; top: 92px; animation-delay: -2s; }

.cc-visual .chat {
  position: absolute;
  z-index: 2;
  max-width: 210px;
  border-radius: 20px 20px 20px 6px;
  padding: 16px;
  background: rgba(255,255,255,.92);
  color: #2b1a1f;
  box-shadow: 0 20px 44px rgba(0,0,0,.18);
  animation: visualFloat 6.4s ease-in-out infinite;
}

.cc-visual .chat.two {
  right: 26px;
  bottom: 34px;
  border-radius: 20px 20px 6px 20px;
  animation-delay: -2s;
}

.cc-visual .chat.one { left: 26px; top: 34px; }
.cc-visual .visual-main { width: min(70%, 310px); min-height: 184px; }

.order-visual .order-list {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 36px;
  z-index: 2;
  display: grid;
  gap: 10px;
}

.order-visual .order-row {
  min-height: 46px;
  border-radius: 16px;
  background: rgba(255,255,255,.90);
  color: #2b1a1f;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  box-shadow: 0 15px 35px rgba(0,0,0,.16);
  animation: visualFloat 7s ease-in-out infinite;
}

.order-visual .order-row:nth-child(2) { animation-delay: -1.7s; }
.order-visual .order-row:nth-child(3) { animation-delay: -3.4s; }
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(201,163,91,.16);
}

@keyframes heroOrbFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-18px,-22px,0); }
}

@keyframes heroShapeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@keyframes visualFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

section {
  padding: 76px 0;
  background: var(--bg);
}

.section-alt {
  background: linear-gradient(180deg, #fcf8f5 0%, #f3ebe6 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  margin-bottom: 28px;
  text-align: center;
}

.section-kicker {
  color: var(--company-main, var(--primary));
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.section-title {
  margin: 0;
  font-size: clamp(29px, 3.4vw, 44px);
  line-height: 1.1;
  color: #401f28;
  letter-spacing: 0;
}

.section-text {
  margin: 16px auto 0;
  color: #6e5a62;
  max-width: 850px;
  font-size: 18px;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, .76fr);
  gap: 28px;
  align-items: stretch;
}

.panel,
.info-card,
.service-card,
.process-step,
.stat-card {
  background: #fff;
  border: 1px solid rgba(122,30,44,.08);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}

.panel {
  padding: 34px;
}

.panel h2,
.panel h3,
.info-card h3,
.service-card h3,
.process-step h3,
.stat-card h3 {
  margin: 0 0 12px;
  color: var(--company-main, var(--primary));
  line-height: 1.18;
}

.panel p,
.info-card p,
.service-card p,
.process-step p,
.stat-card p {
  margin: 0;
  color: #604f56;
}

.content-stack {
  display: grid;
  gap: 18px;
}

.feature-list,
.check-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.feature-list li,
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #55434b;
}

.feature-list li::before,
.check-list li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-top: 9px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--company-main, var(--gold)), var(--gold));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--company-main, var(--gold)) 14%, transparent);
}

.info-grid,
.service-grid,
.why-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.service-grid.two,
.info-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-card,
.service-card,
.stat-card {
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.service-card::before,
.info-card::before,
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--company-main, var(--primary)), var(--gold));
}

.service-card:hover,
.info-card:hover,
.process-step:hover,
.stat-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--company-main, var(--primary)) 28%, rgba(122,30,44,.08));
  box-shadow: 0 24px 52px rgba(60,20,30,.13), 0 0 32px color-mix(in srgb, var(--company-main, var(--primary)) 14%, transparent);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.process-step {
  padding: 26px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.step-number,
.stat-value {
  color: var(--company-main, var(--gold));
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

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

.stat-value {
  font-size: 34px;
  margin-bottom: 10px;
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px 30px;
  align-items: center;
  padding: 28px 8px 38px;
}

.client-card {
  --base-x: 0px;
  --base-y: 0px;
  --float-y: 15px;
  min-height: 150px;
  padding: 22px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translate(var(--base-x), var(--base-y));
  animation: clientLogoFloat 7.2s ease-in-out infinite;
  transition: transform .32s ease, filter .32s ease;
  will-change: transform;
  isolation: isolate;
}

.client-card:nth-child(1) { --base-y: -10px; --base-x: 8px; --float-y: 17px; animation-delay: -.2s; }
.client-card:nth-child(2) { --base-y: 18px; --base-x: -10px; --float-y: 13px; animation-delay: -1.6s; }
.client-card:nth-child(3) { --base-y: -2px; --base-x: 12px; --float-y: 19px; animation-delay: -3.1s; }
.client-card:nth-child(4) { --base-y: 16px; --base-x: -6px; --float-y: 15px; animation-delay: -4.7s; }
.client-card:nth-child(5) { --base-y: -8px; --base-x: 4px; --float-y: 16px; animation-delay: -5.8s; }
.client-card:nth-child(6) { --base-y: 10px; --base-x: -8px; --float-y: 14px; animation-delay: -6.6s; }
.client-card:nth-child(7) { --base-y: -14px; --base-x: 10px; --float-y: 18px; animation-delay: -7.4s; }
.client-card:nth-child(8) { --base-y: 12px; --base-x: -4px; --float-y: 15px; animation-delay: -8.2s; }
.client-card:nth-child(9) { --base-y: -6px; --base-x: 8px; --float-y: 16px; animation-delay: -9s; }
.client-card:nth-child(10) { --base-y: 18px; --base-x: -8px; --float-y: 14px; animation-delay: -9.8s; }
.client-card:nth-child(11) { --base-y: -10px; --base-x: 6px; --float-y: 15px; animation-delay: -10.6s; }
.client-card:nth-child(12) { --base-y: 8px; --base-x: -6px; --float-y: 17px; animation-delay: -11.4s; }
.client-card:nth-child(13) { --base-y: -2px; --base-x: 10px; --float-y: 14px; animation-delay: -12.2s; }
.client-card:nth-child(14) { --base-y: 14px; --base-x: -4px; --float-y: 16px; animation-delay: -13s; }

.client-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(230px, 84%);
  height: 102px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.42), rgba(201,163,91,.18) 42%, transparent 72%);
  filter: blur(18px);
  opacity: .34;
  transform: translate(-50%, -50%);
  transition: opacity .32s ease, transform .32s ease;
  z-index: 0;
}

.client-card::after {
  content: "";
  position: absolute;
  width: min(190px, 74%);
  height: 28px;
  left: 50%;
  bottom: 18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(60,20,30,.20), transparent 70%);
  filter: blur(10px);
  opacity: .38;
  transform: translateX(-50%);
  transition: opacity .32s ease, transform .32s ease;
  z-index: 0;
}

.client-card:hover {
  animation-play-state: paused;
  transform: translate(var(--base-x), calc(var(--base-y) - 10px)) scale(1.075);
  filter: drop-shadow(0 0 22px rgba(201,163,91,.34));
}

.client-card:hover::before { opacity: .78; transform: translate(-50%, -50%) scale(1.12); }
.client-card:hover::after { opacity: .58; transform: translateX(-50%) scale(1.12); }

@keyframes clientLogoFloat {
  0%, 100% { transform: translate(var(--base-x), var(--base-y)) scale(1); }
  50% { transform: translate(var(--base-x), calc(var(--base-y) - var(--float-y))) scale(1.01); }
}

.client-card img {
  width: min(190px, 82%);
  max-height: 98px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  opacity: .94;
  filter: saturate(1) contrast(1.08) drop-shadow(0 12px 20px rgba(45,20,28,.14));
  transition: opacity .32s ease, filter .32s ease, transform .32s ease;
}

.client-card:hover img {
  opacity: 1;
  filter: saturate(1.08) contrast(1.12) drop-shadow(0 16px 24px rgba(45,20,28,.20));
  transform: scale(1.045);
}

.client-card:nth-child(2) img,
.client-card:nth-child(3) img {
  width: min(124px, 68%);
  max-height: 124px;
}

.client-card:nth-child(4) img {
  width: min(230px, 96%);
  max-height: 116px;
}

.client-card.shein img {
  width: min(188px, 86%);
  max-height: 62px;
}

.client-card.temu img {
  width: min(128px, 70%);
  max-height: 112px;
}

.client-card.keeta img {
  width: min(128px, 70%);
  max-height: 112px;
}

.client-card.boutiqaat img {
  width: min(230px, 96%);
  max-height: 116px;
}

.client-card.kdd img {
  width: min(178px, 86%);
  max-height: 96px;
}

.client-card.almulla img {
  width: min(164px, 86%);
  max-height: 104px;
}

.client-card.alhajri img {
  width: min(146px, 78%);
  max-height: 120px;
}

.client-card.amaron img {
  width: min(174px, 86%);
  max-height: 76px;
}

.client-card.bein img {
  width: min(174px, 84%);
  max-height: 82px;
}

.client-card.truevalue img {
  width: min(190px, 90%);
  max-height: 74px;
}

.client-card.hikvision img {
  width: min(208px, 92%);
  max-height: 74px;
}

.client-card.alhajery img {
  width: min(172px, 86%);
  max-height: 92px;
}

.client-card.almawashi img {
  width: min(168px, 84%);
  max-height: 112px;
}

.client-card.czar img {
  width: min(160px, 82%);
  max-height: 94px;
}

.client-card.bedbathliving img {
  width: min(146px, 76%);
  max-height: 118px;
}

.storage-services-experience {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fbf7f3 0%, #f4eee8 100%);
}

.storage-services-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(35,132,90,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(35,132,90,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
}

.storage-services-experience .container {
  position: relative;
  z-index: 1;
}

.storage-service-block {
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr);
  gap: 28px;
  align-items: stretch;
  margin-top: 34px;
}

.storage-service-block + .storage-service-block {
  margin-top: 42px;
}

.storage-service-block.logistics-services {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
}

.storage-service-visual,
.storage-service-content {
  min-height: 520px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.62);
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.34)),
    color-mix(in srgb, var(--company-main, #23845a) 8%, #ffffff);
  box-shadow:
    0 30px 80px rgba(40,27,32,.12),
    inset 0 1px 0 rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.storage-service-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow: hidden;
  perspective: 1000px;
}

.storage-service-visual::before {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 28px;
  border: 1px solid rgba(35,132,90,.12);
  background:
    linear-gradient(rgba(35,132,90,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,132,90,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: rotateX(64deg) translateY(42px);
  transform-origin: center bottom;
  opacity: .78;
}

.storage-service-content {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 28px;
}

.service-group-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--company-deep, #103d2f);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(35,132,90,.14);
  box-shadow: 0 12px 28px rgba(35,132,90,.08);
  font-size: 13px;
  font-weight: 900;
}

.service-group-label i {
  color: var(--company-main, #23845a);
}

.premium-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.premium-service-grid.compact {
  grid-template-columns: 1fr;
}

.logistics-grid .premium-service-card:last-child {
  grid-column: 1 / -1;
}

.premium-service-card {
  position: relative;
  min-height: 132px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.44));
  border: 1px solid rgba(35,132,90,.12);
  box-shadow: 0 18px 42px rgba(45,31,36,.08);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.premium-service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--company-main, #23845a), var(--gold));
  opacity: .82;
}

.premium-service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.34) 48%, transparent 62% 100%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}

.premium-service-card:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--company-main, #23845a) 34%, rgba(35,132,90,.12));
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.56));
  box-shadow:
    0 26px 56px rgba(45,31,36,.13),
    0 0 34px color-mix(in srgb, var(--company-main, #23845a) 12%, transparent);
}

.premium-service-card:hover::after {
  transform: translateX(120%);
}

.service-card-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--company-deep, #103d2f);
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.92), transparent 38%),
    linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 14px 26px rgba(35,132,90,.16), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .3s ease;
}

.premium-service-card:hover .service-card-icon {
  transform: translateY(-2px) rotate(-4deg) scale(1.04);
}

.premium-service-card h3,
.premium-service-card p {
  position: relative;
  z-index: 1;
}

.premium-service-card h3 {
  margin: 0;
  color: var(--company-deep, #103d2f);
  font-size: 18px;
  line-height: 1.16;
}

.premium-service-card p {
  margin: 8px 0 0;
  color: #64525a;
  font-size: 13.5px;
  line-height: 1.55;
}

.warehouse-scene,
.logistics-scene {
  position: relative;
  width: min(100%, 470px);
  height: 380px;
  transform-style: preserve-3d;
  animation: storageSceneFloat 7s ease-in-out infinite;
}

.warehouse-roof {
  position: absolute;
  left: 54px;
  top: 40px;
  width: 330px;
  height: 86px;
  transform: skewX(-16deg) rotateX(48deg);
  border-radius: 18px;
  background: linear-gradient(135deg, #1c6d4a, #2fa26e);
  box-shadow: 0 24px 48px rgba(16,61,47,.18);
}

.warehouse-wall {
  position: absolute;
  left: 68px;
  top: 108px;
  width: 330px;
  height: 188px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 20px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(218,235,225,.72));
  border: 1px solid rgba(35,132,90,.16);
  box-shadow: 0 34px 68px rgba(45,31,36,.12);
}

.warehouse-wall span {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(35,132,90,.16)),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.62) 48% 52%, transparent 52%);
  border: 1px solid rgba(35,132,90,.13);
}

.warehouse-floor {
  position: absolute;
  left: 34px;
  right: 22px;
  bottom: 36px;
  height: 110px;
  transform: rotateX(68deg);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(201,163,91,.26), rgba(35,132,90,.14)),
    rgba(255,255,255,.48);
  box-shadow: 0 30px 40px rgba(45,31,36,.10);
}

.warehouse-rack {
  position: absolute;
  width: 102px;
  height: 128px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(16,61,47,.88);
  box-shadow: 0 18px 34px rgba(16,61,47,.20);
}

.warehouse-rack span {
  border-radius: 9px;
  background: linear-gradient(90deg, var(--gold), #f2dcae);
  animation: rackGlow 3.8s ease-in-out infinite;
}

.warehouse-rack span:nth-child(2) { animation-delay: -.8s; }
.warehouse-rack span:nth-child(3) { animation-delay: -1.6s; }
.rack-a { left: 96px; top: 154px; }
.rack-b { right: 76px; top: 150px; transform: translateZ(12px) scale(.92); }

.warehouse-pallet {
  position: absolute;
  width: 86px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d89a35, #f3cf85);
  box-shadow: 0 18px 26px rgba(120,82,32,.18);
  animation: palletLift 5.8s ease-in-out infinite;
}

.pallet-a { left: 72px; bottom: 72px; }
.pallet-b { left: 178px; bottom: 56px; animation-delay: -1.4s; }
.pallet-c { right: 72px; bottom: 82px; animation-delay: -2.6s; }

.warehouse-lift {
  position: absolute;
  left: 244px;
  bottom: 76px;
  width: 80px;
  height: 68px;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(135deg, #23845a, #103d2f);
  box-shadow: 0 20px 34px rgba(16,61,47,.22);
}

.warehouse-lift::before {
  content: "";
  position: absolute;
  left: -24px;
  bottom: 12px;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: var(--gold);
}

.warehouse-lift::after {
  content: "";
  position: absolute;
  inset: 15px 18px auto auto;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  background: rgba(255,255,255,.62);
}

.dock-building {
  position: absolute;
  left: 36px;
  top: 72px;
  width: 272px;
  height: 194px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(220,237,227,.78));
  border: 1px solid rgba(35,132,90,.14);
  box-shadow: 0 30px 62px rgba(45,31,36,.12);
}

.dock-door {
  position: absolute;
  left: 38px;
  bottom: 0;
  width: 88px;
  height: 104px;
  border-radius: 18px 18px 0 0;
  background:
    repeating-linear-gradient(180deg, rgba(16,61,47,.88) 0 12px, rgba(35,132,90,.88) 12px 24px);
}

.dock-bay {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 92px;
  height: 64px;
  border-radius: 18px;
  background: rgba(35,132,90,.14);
  border: 1px solid rgba(35,132,90,.16);
}

.dock-signal {
  position: absolute;
  right: 38px;
  top: 32px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 8px rgba(201,163,91,.16), 0 0 24px rgba(201,163,91,.45);
  animation: storageSignal 1.8s ease-in-out infinite;
}

.barcode-panel {
  position: absolute;
  right: 52px;
  top: 46px;
  width: 126px;
  height: 78px;
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(35,132,90,.12);
  box-shadow: 0 18px 34px rgba(45,31,36,.10);
  transform: rotate(5deg);
}

.barcode-panel i {
  display: block;
  flex: 1;
  border-radius: 999px;
  background: var(--company-deep, #103d2f);
}

.barcode-panel i:nth-child(2),
.barcode-panel i:nth-child(4) {
  flex: .45;
}

.package-stack {
  position: absolute;
  left: 138px;
  bottom: 86px;
  width: 124px;
  height: 108px;
}

.package-stack span {
  position: absolute;
  width: 74px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #d89a35, #f3cf85);
  box-shadow: 0 18px 28px rgba(120,82,32,.18);
  animation: palletLift 5.6s ease-in-out infinite;
}

.package-stack span:nth-child(1) { left: 0; bottom: 0; }
.package-stack span:nth-child(2) { right: 0; bottom: 18px; animation-delay: -1.2s; }
.package-stack span:nth-child(3) { left: 24px; bottom: 58px; animation-delay: -2.4s; }

.fulfillment-belt {
  position: absolute;
  left: 36px;
  right: 38px;
  bottom: 54px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, #103d2f, #23845a);
  box-shadow: 0 18px 30px rgba(16,61,47,.16);
  overflow: hidden;
}

.fulfillment-belt span {
  position: absolute;
  top: 9px;
  width: 38px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  animation: beltMove 3.8s linear infinite;
}

.fulfillment-belt span:nth-child(2) { animation-delay: -1.2s; }
.fulfillment-belt span:nth-child(3) { animation-delay: -2.4s; }

.logistics-truck {
  position: absolute;
  right: 40px;
  bottom: 72px;
  width: 214px;
  height: 94px;
  animation: truckIdle 5.8s ease-in-out infinite;
}

.truck-box,
.truck-cab {
  position: absolute;
  bottom: 24px;
  display: block;
  background: linear-gradient(135deg, #23845a, #103d2f);
  box-shadow: 0 20px 34px rgba(16,61,47,.18);
}

.truck-box {
  left: 0;
  width: 132px;
  height: 62px;
  border-radius: 16px 10px 10px 16px;
}

.truck-cab {
  right: 0;
  width: 76px;
  height: 54px;
  border-radius: 12px 22px 12px 8px;
}

.truck-cab::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 10px;
  width: 28px;
  height: 18px;
  border-radius: 8px;
  background: rgba(255,255,255,.58);
}

.wheel {
  position: absolute;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #2f2529;
  border: 6px solid rgba(255,255,255,.72);
}

.wheel-a { left: 34px; }
.wheel-b { right: 26px; }

.delivery-route {
  position: absolute;
  right: 70px;
  bottom: 36px;
  width: 260px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .78;
}

@keyframes storageSceneFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(-2deg); }
  50% { transform: translateY(-10px) rotateX(1deg) rotateY(2deg); }
}

@keyframes rackGlow {
  0%, 100% { opacity: .76; }
  50% { opacity: 1; }
}

@keyframes palletLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes storageSignal {
  0%, 100% { transform: scale(.9); opacity: .72; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes beltMove {
  0% { transform: translateX(-60px); opacity: 0; }
  12%, 84% { opacity: .85; }
  100% { transform: translateX(420px); opacity: 0; }
}

@keyframes truckIdle {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

html[dir="rtl"] .premium-service-card {
  direction: rtl;
}

html[dir="rtl"] .premium-service-card:hover .service-card-icon {
  transform: translateY(-2px) rotate(4deg) scale(1.04);
}

@media (max-width: 1120px) {
  .storage-service-block,
  .storage-service-block.logistics-services {
    grid-template-columns: 1fr;
  }

  .logistics-services .storage-service-visual {
    order: -1;
  }

  .storage-service-visual,
  .storage-service-content {
    min-height: auto;
  }

  .storage-service-visual {
    min-height: 430px;
  }
}

@media (max-width: 760px) {
  .premium-service-grid,
  .premium-service-grid.logistics-grid {
    grid-template-columns: 1fr;
  }

  .storage-service-visual {
    min-height: 360px;
    padding: 18px;
    border-radius: 26px;
  }

  .storage-service-content {
    padding: 20px;
    border-radius: 26px;
  }

  .warehouse-scene,
  .logistics-scene {
    width: 470px;
    height: 380px;
    animation: none;
    transform: scale(.68);
  }

  .premium-service-card {
    min-height: 0;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 16px;
    border-radius: 20px;
  }

  .service-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }
}

@media (max-width: 650px) {
  .storage-service-block,
  .storage-service-block + .storage-service-block {
    margin-top: 24px;
  }

  .storage-service-visual {
    min-height: 310px;
  }

  .warehouse-scene,
  .logistics-scene {
    transform: scale(.62);
  }

  .warehouse-scene {
    transform: translateX(-34px) scale(.62);
  }

  .logistics-scene {
    transform: translateX(-34px) scale(.62);
  }

  .premium-service-card h3 {
    font-size: 16px;
  }

  .premium-service-card p {
    font-size: 13px;
  }
}

.theme-storage .storage-industries-section,
.theme-storage .storage-brands-section {
  position: relative;
  overflow: hidden;
}

.theme-storage .storage-industries-section {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--company-main) 14%, transparent), transparent 30%),
    radial-gradient(circle at 86% 78%, rgba(201,163,91,.16), transparent 34%),
    linear-gradient(180deg, #fffaf7 0%, #f6f0eb 100%);
}

.theme-storage .storage-industries-section::before,
.theme-storage .storage-brands-section::before {
  content: "";
  position: absolute;
  width: 420px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--company-main) 16%, transparent), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
}

.theme-storage .storage-industries-section::before {
  right: -140px;
  top: -130px;
}

.theme-storage .storage-brands-section::before {
  left: -150px;
  bottom: -170px;
}

.storage-industry-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.storage-industry-card {
  min-height: 172px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--company-main) 18%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border-color: color-mix(in srgb, var(--company-main) 15%, rgba(122,30,44,.08));
  isolation: isolate;
}

.storage-industry-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--company-main) 16%, transparent), rgba(201,163,91,.12));
  filter: blur(2px);
  opacity: .9;
  z-index: -1;
}

.storage-industry-card h3 {
  margin: 0;
  max-width: 14rem;
}

.storage-industry-card:hover {
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--company-main) 24%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
}

.storage-brand-showcase {
  position: relative;
  z-index: 1;
  padding: 28px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--company-main) 18%, transparent), transparent 30%),
    radial-gradient(circle at 86% 84%, rgba(201,163,91,.20), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
  border: 1px solid color-mix(in srgb, var(--company-main) 16%, rgba(122,30,44,.08));
  box-shadow: 0 30px 76px rgba(37,65,51,.12), inset 0 1px 0 rgba(255,255,255,.72);
  overflow: hidden;
}

.storage-brand-showcase::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.58);
  pointer-events: none;
}

.storage-brand-proof {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.proof-item {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.70);
  border: 1px solid color-mix(in srgb, var(--company-main) 14%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 14px 30px rgba(37,65,51,.08);
}

.proof-item i {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--company-main), var(--company-deep));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--company-main) 26%, transparent);
}

.proof-item span {
  color: var(--company-deep);
  font-weight: 900;
  line-height: 1.25;
}

.storage-brand-grid {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  padding-bottom: 20px;
}

html[dir="rtl"] .storage-industry-card,
html[dir="rtl"] .proof-item {
  text-align: right;
}

.story-section {
  position: relative;
  overflow: hidden;
}

.story-section::before,
.story-section::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(34px);
  opacity: .32;
}

.story-section::before {
  width: 330px;
  height: 330px;
  right: -120px;
  top: 12%;
  background: color-mix(in srgb, var(--company-main) 32%, transparent);
  animation: heroShapeFloat 8s ease-in-out infinite;
}

.story-section::after {
  width: 260px;
  height: 260px;
  left: -100px;
  bottom: 6%;
  background: rgba(201,163,91,.28);
  animation: heroOrbFloat 10s ease-in-out infinite;
}

.visual-split {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: 44px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.story-copy {
  max-width: 570px;
}

.story-copy .section-text {
  margin-inline: 0;
  max-width: none;
}

.micro-points {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.micro-points span,
.workflow-chips span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--company-deep);
  background: color-mix(in srgb, var(--company-soft) 80%, #fff 20%);
  border: 1px solid color-mix(in srgb, var(--company-main) 18%, transparent);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--company-main) 8%, transparent);
}

.visual-system,
.dashboard-panel-modern,
.workflow-visual-panel {
  border: 1px solid rgba(255,255,255,.42);
  background:
    linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08)),
    radial-gradient(circle at 22% 10%, color-mix(in srgb, var(--company-main) 26%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--company-deep) 92%, #101827 8%), color-mix(in srgb, var(--company-main) 82%, #151515 18%));
  border-radius: 30px;
  box-shadow: 0 30px 78px rgba(30,18,24,.22), 0 0 42px color-mix(in srgb, var(--company-main) 18%, transparent);
  position: relative;
  overflow: hidden;
}

.visual-system {
  min-height: 420px;
  padding: 20px;
  color: #fff;
}

.visual-system::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent),
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.20), transparent 24%);
  opacity: .76;
  pointer-events: none;
}

.system-topbar,
.dashboard-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.system-topbar {
  min-height: 40px;
}

.system-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
}

.system-topbar strong {
  margin-inline-start: 8px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.route-canvas,
.warehouse-canvas,
.commerce-canvas,
.support-canvas {
  position: relative;
  z-index: 1;
  min-height: 260px;
  margin: 22px 0;
  border-radius: 24px;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  border: 1px solid rgba(255,255,255,.16);
  overflow: hidden;
}

.route-track {
  position: absolute;
  width: 78%;
  height: 58%;
  left: 10%;
  top: 22%;
  border: 3px solid rgba(255,255,255,.44);
  border-left-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--gold) 78%, #fff 22%);
  border-radius: 46% 54% 48% 52%;
  transform: rotate(-10deg);
  animation: dashPulse 4.8s ease-in-out infinite;
}

.route-pin,
.route-vehicle,
.map-stop,
.map-vehicle {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 0 0 8px rgba(201,163,91,.16), 0 12px 24px rgba(0,0,0,.18);
}

.route-pin {
  width: 16px;
  height: 16px;
}

.pin-a { left: 18%; top: 28%; }
.pin-b { left: 58%; top: 18%; }
.pin-c { right: 18%; bottom: 24%; }

.route-vehicle,
.map-vehicle {
  width: 38px;
  height: 24px;
  border-radius: 10px;
  left: 36%;
  top: 55%;
  animation: vehicleDrift 6s ease-in-out infinite;
}

.route-vehicle::before,
.map-vehicle::before {
  content: "";
  position: absolute;
  inset: 7px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.72);
}

.ops-widget-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ops-widget {
  min-height: 112px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}

.ops-widget:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.18);
  box-shadow: 0 18px 34px rgba(0,0,0,.16);
}

.ops-widget small,
.dashboard-header small {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ops-widget strong {
  display: block;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  margin-top: 10px;
  direction: ltr;
  unicode-bidi: isolate;
}

.progress-line,
.signal-bars,
.driver-dots {
  margin-top: 14px;
}

.progress-line {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}

.progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
}

.driver-dots,
.signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.driver-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(201,163,91,.14);
}

.signal-bars span {
  width: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
}

.signal-bars span:nth-child(1) { height: 14px; }
.signal-bars span:nth-child(2) { height: 24px; }
.signal-bars span:nth-child(3) { height: 34px; }

.theme-cc .cc-capability-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.theme-cc .cc-capability-widget {
  position: relative;
  overflow: hidden;
  min-height: 122px;
}

.theme-cc .cc-capability-widget::before {
  content: "";
  position: absolute;
  inset: -35% auto auto -35%;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--company-main) 34%, transparent);
  filter: blur(18px);
  opacity: .55;
  animation: ccWidgetGlow 4.8s ease-in-out infinite;
}

.theme-cc .cc-capability-widget small,
.theme-cc .cc-capability-widget strong,
.theme-cc .cc-capability-widget > div {
  position: relative;
  z-index: 1;
}

.theme-cc .cc-capability-widget strong {
  font-size: 14px;
  line-height: 1.28;
  letter-spacing: 0;
  max-width: 130px;
}

.crm-flow,
.activity-pulse,
.quality-mini-ring,
.live-indicator {
  margin-top: 14px;
}

.crm-flow {
  display: grid;
  gap: 5px;
}

.crm-flow span {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), var(--gold-soft), rgba(255,255,255,.20));
  background-size: 190% 100%;
  animation: ccSignalScan 2.8s ease-in-out infinite;
}

.crm-flow span:nth-child(2) { width: 76%; animation-delay: -.55s; }
.crm-flow span:nth-child(3) { width: 52%; animation-delay: -1.1s; }

.activity-pulse,
.live-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
}

.activity-pulse span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201,163,91,.24);
  animation: ccDotPulse 1.8s ease-in-out infinite;
}

.activity-pulse span:nth-child(2) { animation-delay: .2s; }
.activity-pulse span:nth-child(3) { animation-delay: .4s; }

.quality-mini-ring {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, var(--gold), rgba(255,255,255,.18), var(--company-main), var(--gold));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: ccRingSpin 4s linear infinite;
}

.live-indicator span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,163,91,.14);
  animation: ccLivePulse 1.8s ease-in-out infinite;
}

.live-indicator em {
  display: block;
  width: 48px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), rgba(255,255,255,.24));
  background-size: 180% 100%;
  animation: ccSignalScan 2.4s ease-in-out infinite;
}

@keyframes ccWidgetGlow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.92); opacity: .40; }
  50% { transform: translate3d(22px, 16px, 0) scale(1.08); opacity: .72; }
}

@keyframes ccSignalScan {
  0%, 100% { background-position: 0% 50%; opacity: .72; }
  50% { background-position: 100% 50%; opacity: 1; }
}

@keyframes ccDotPulse {
  0%, 100% { transform: translateY(0) scale(.9); box-shadow: 0 0 0 0 rgba(201,163,91,.18); opacity: .72; }
  50% { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 7px rgba(201,163,91,0); opacity: 1; }
}

@keyframes ccRingSpin {
  to { transform: rotate(360deg); }
}

@keyframes ccLivePulse {
  0%, 100% { transform: scale(.92); box-shadow: 0 0 0 5px rgba(201,163,91,.16); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(201,163,91,0); }
}

@media (max-width: 1120px) {
  .theme-cc .cc-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .theme-cc .cc-capability-grid {
    grid-template-columns: 1fr;
  }
}

.warehouse-canvas {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 24px;
}

.rack-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

.rack-line span,
.warehouse-stack span {
  min-height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 -10px 22px rgba(0,0,0,.10);
}

.rack-line:nth-child(2) span:nth-child(2),
.rack-line:nth-child(3) span:nth-child(4),
.warehouse-stack span:nth-child(2n) {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

.forklift-path {
  position: absolute;
  width: 48%;
  height: 4px;
  left: 24%;
  bottom: 30px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: dashPulse 4s ease-in-out infinite;
}

.commerce-canvas {
  display: grid;
  grid-template-columns: .68fr 1fr;
  gap: 18px;
  padding: 22px;
  align-items: center;
}

.commerce-channel {
  min-height: 58px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}

.commerce-channel + .commerce-channel { margin-top: 12px; }

.commerce-channel strong {
  display: block;
  color: #fff;
  font-size: 13px;
}

.commerce-channel span {
  display: block;
  height: 7px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), rgba(255,255,255,.20));
}

.commerce-pipeline {
  display: grid;
  gap: 12px;
}

.commerce-pipeline span {
  height: 42px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  position: relative;
}

.commerce-pipeline span::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 58%;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.30);
}

.support-canvas {
  padding: 22px;
}

.support-thread {
  display: grid;
  gap: 14px;
  width: 72%;
}

.support-thread span,
.chat-window span,
.inbox-list span {
  display: block;
  min-height: 38px;
  border-radius: 16px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
}

.support-thread span:nth-child(2) {
  width: 76%;
  margin-inline-start: auto;
  background: color-mix(in srgb, var(--company-main) 48%, rgba(255,255,255,.18));
}

.ai-assistant-card {
  position: absolute;
  right: 22px;
  top: 28px;
  width: 190px;
  padding: 16px;
  border-radius: 20px;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
  animation: visualFloat 5.8s ease-in-out infinite;
}

.ai-assistant-card small {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--company-deep);
  font-weight: 900;
}

.ai-assistant-card strong {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.25;
}

.channel-stack {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.channel-stack span {
  padding: 8px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 900;
}

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

.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 22px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--company-main) 18%, transparent), transparent 42%),
    rgba(255,255,255,.84);
  border: 1px solid color-mix(in srgb, var(--company-main) 14%, rgba(122,30,44,.08));
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.metric-card::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -38px;
  width: 128px;
  height: 128px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--company-main) 14%, transparent);
  filter: blur(4px);
}

.metric-card:hover,
.modern-card:hover,
.usecase-card:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--company-main) 30%, rgba(122,30,44,.08));
  box-shadow: 0 26px 58px rgba(50,22,28,.14), 0 0 34px color-mix(in srgb, var(--company-main) 13%, transparent);
}

.metric-value {
  color: var(--company-main);
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.metric-card h3,
.modern-card h3,
.usecase-card h3 {
  margin: 16px 0 7px;
  color: var(--company-deep);
  line-height: 1.15;
}

.metric-card p,
.modern-card p,
.usecase-card p {
  margin: 0;
  color: #66535a;
}

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

.modern-card,
.usecase-card {
  position: relative;
  overflow: hidden;
  min-height: 214px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(122,30,44,.08);
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.modern-card::before,
.usecase-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--company-main), var(--gold));
}

.card-icon,
.usecase-card > span {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--company-deep);
  background: linear-gradient(135deg, color-mix(in srgb, var(--company-main) 14%, #fff 86%), var(--gold-soft));
  border: 1px solid color-mix(in srgb, var(--company-main) 18%, transparent);
  font-weight: 900;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--company-main) 12%, transparent);
}

.card-icon {
  color: var(--company-main);
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.88), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--company-main) 15%, #fff 85%), var(--gold-soft));
  box-shadow:
    0 16px 32px color-mix(in srgb, var(--company-main) 16%, transparent),
    0 0 24px color-mix(in srgb, var(--company-main) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.72);
  transition: transform .3s ease, box-shadow .3s ease, color .3s ease, background .3s ease;
}

.card-icon i {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--company-main) 22%, transparent));
  transition: transform .3s ease, filter .3s ease;
}

.modern-card:hover .card-icon {
  color: var(--company-deep);
  transform: translateY(-4px) scale(1.08) rotate(-2deg);
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.95), transparent 36%),
    linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow:
    0 18px 38px color-mix(in srgb, var(--company-main) 22%, transparent),
    0 0 34px color-mix(in srgb, var(--company-main) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.modern-card:hover .card-icon i {
  transform: scale(1.08);
  filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--company-main) 28%, transparent));
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.usecase-card > span::before {
  content: "";
  width: 19px;
  height: 19px;
  border-radius: 7px;
  border: 3px solid var(--company-main);
  border-top-color: var(--gold);
  transform: rotate(45deg);
}

.theme-cc .cc-enterprise-section,
.theme-cc .cc-business-section,
.theme-cc .cc-industries-section,
.theme-cc .cc-impact-section,
.theme-cc .cc-trust-section {
  position: relative;
  overflow: hidden;
}

.theme-cc .cc-enterprise-section {
  background:
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--company-main) 16%, transparent), transparent 32%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--company-deep) 18%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,244,248,.72));
}

.theme-cc .cc-business-section {
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--company-main) 14%, transparent), transparent 34%),
    radial-gradient(circle at 86% 72%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 34%),
    linear-gradient(180deg, #fffaf6 0%, #f6eff5 100%);
}

.theme-cc .cc-industries-section {
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--company-main) 12%, transparent), transparent 30%),
    radial-gradient(circle at 92% 76%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 34%),
    linear-gradient(180deg, #fffaf7 0%, #f7f0f7 100%);
}

.theme-cc .cc-impact-section {
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--company-main) 16%, transparent), transparent 34%),
    radial-gradient(circle at 88% 30%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,244,248,.76));
}

.theme-cc .cc-trust-section {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--company-main) 12%, transparent), transparent 32%),
    radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 34%),
    linear-gradient(180deg, #fffaf6 0%, #f5eef6 100%);
}

.theme-cc .cc-enterprise-section::before,
.theme-cc .cc-business-section::before,
.theme-cc .cc-industries-section::before,
.theme-cc .cc-impact-section::before,
.theme-cc .cc-trust-section::before {
  content: "";
  position: absolute;
  inset: 10% auto auto 7%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--company-main) 12%, transparent);
  filter: blur(18px);
  opacity: .75;
  animation: heroShapeFloat 8s ease-in-out infinite;
  pointer-events: none;
}

.theme-cc .cc-business-section::before {
  inset: auto 8% 10% auto;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  animation-delay: -2.4s;
}

.cc-industry-network {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  gap: 22px;
  min-height: 620px;
  margin-top: 36px;
  padding: 34px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--company-main) 18%, transparent), transparent 32%),
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.76), transparent 32%),
    radial-gradient(circle at 90% 78%, rgba(201,163,91,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.48));
  border: 1px solid color-mix(in srgb, var(--company-main) 15%, rgba(255,255,255,.82));
  box-shadow:
    0 30px 80px rgba(55, 34, 70, .11),
    inset 0 1px 0 rgba(255,255,255,.82);
  overflow: hidden;
}

.cc-industry-network::before,
.cc-industry-network::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cc-industry-network::before {
  width: min(68vw, 590px);
  height: min(68vw, 590px);
  border: 1px solid color-mix(in srgb, var(--company-main) 16%, transparent);
  box-shadow: inset 0 0 0 1px rgba(201,163,91,.12);
  opacity: .76;
}

.cc-industry-network::after {
  width: 330px;
  height: 330px;
  background: color-mix(in srgb, var(--company-main) 10%, transparent);
  filter: blur(36px);
  opacity: .9;
}

.industry-network-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.industry-network-lines .line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(26vw, 330px);
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(201,163,91,.76), color-mix(in srgb, var(--company-main) 52%, rgba(255,255,255,.34)), transparent);
  opacity: .62;
  overflow: hidden;
}

.industry-network-lines .line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  animation: ccBusinessSignal 3.9s ease-in-out infinite;
}

.industry-network-lines .line-gov { transform: rotate(-150deg); }
.industry-network-lines .line-finance { transform: rotate(-98deg); width: min(18vw, 240px); }
.industry-network-lines .line-health { transform: rotate(-43deg); }
.industry-network-lines .line-telecom { transform: rotate(0deg); width: min(20vw, 250px); }
.industry-network-lines .line-commerce { transform: rotate(43deg); }
.industry-network-lines .line-logistics { transform: rotate(98deg); width: min(18vw, 240px); }
.industry-network-lines .line-retail { transform: rotate(150deg); }
.industry-network-lines .line-finance::after { animation-delay: -.45s; }
.industry-network-lines .line-health::after { animation-delay: -.9s; }
.industry-network-lines .line-telecom::after { animation-delay: -1.35s; }
.industry-network-lines .line-commerce::after { animation-delay: -1.8s; }
.industry-network-lines .line-logistics::after { animation-delay: -2.25s; }
.industry-network-lines .line-retail::after { animation-delay: -2.7s; }

.cc-industry-core,
.cc-industry-node {
  position: relative;
  z-index: 1;
}

.cc-industry-core {
  grid-column: 5 / span 4;
  grid-row: 2 / span 2;
  align-self: center;
  justify-self: center;
  width: min(100%, 260px);
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px;
  border-radius: 34px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(135deg, var(--company-deep), color-mix(in srgb, var(--company-main) 78%, #111827 22%));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    0 28px 64px color-mix(in srgb, var(--company-deep) 24%, transparent),
    0 0 42px color-mix(in srgb, var(--company-main) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.cc-industry-core i {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 22px;
  color: var(--company-deep);
  font-size: 25px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
  animation: ccIconBreath 4.4s ease-in-out infinite;
}

.cc-industry-core strong {
  font-family: var(--display-font);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
}

.cc-industry-core span {
  color: rgba(255,255,255,.70);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cc-industry-node {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 150px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.58)),
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--company-main) 12%, transparent), transparent 40%);
  border: 1px solid color-mix(in srgb, var(--company-main) 18%, rgba(255,255,255,.8));
  box-shadow:
    0 22px 54px rgba(55, 34, 70, .10),
    inset 0 1px 0 rgba(255,255,255,.86);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  animation: ccIndustryFloat 7s ease-in-out infinite;
}

.cc-industry-node:nth-of-type(2) { animation-delay: -.5s; }
.cc-industry-node:nth-of-type(3) { animation-delay: -1s; }
.cc-industry-node:nth-of-type(4) { animation-delay: -1.5s; }
.cc-industry-node:nth-of-type(5) { animation-delay: -2s; }
.cc-industry-node:nth-of-type(6) { animation-delay: -2.5s; }
.cc-industry-node:nth-of-type(7) { animation-delay: -3s; }

.cc-industry-node:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--company-main) 35%, rgba(255,255,255,.8));
  box-shadow:
    0 30px 72px color-mix(in srgb, var(--company-main) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.cc-industry-node h3 {
  margin: 0;
  color: var(--company-deep);
  font-size: 18px;
  line-height: 1.16;
}

.cc-industry-node p {
  grid-column: 1 / -1;
  margin: 0;
  color: #66535a;
  font-size: 13.5px;
  line-height: 1.6;
}

.industry-government { grid-column: 1 / span 4; grid-row: 1; }
.industry-finance { grid-column: 5 / span 4; grid-row: 1; transform: translateY(-14px); }
.industry-healthcare { grid-column: 9 / span 4; grid-row: 1; }
.industry-telecom { grid-column: 9 / span 4; grid-row: 2 / span 2; align-self: center; }
.industry-commerce { grid-column: 9 / span 4; grid-row: 4; }
.industry-logistics { grid-column: 5 / span 4; grid-row: 4; transform: translateY(14px); }
.industry-retail { grid-column: 1 / span 4; grid-row: 4; }

@keyframes ccIndustryFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@media (max-width: 1120px) {
  .cc-industry-network {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
  }

  .industry-network-lines {
    display: none;
  }

  .cc-industry-network::before {
    width: min(72vw, 520px);
    height: min(72vw, 520px);
  }

  .cc-industry-core {
    grid-column: 1 / -1;
    grid-row: auto;
    width: min(100%, 360px);
    min-height: 185px;
    order: -1;
  }

  .cc-industry-node,
  .industry-government,
  .industry-finance,
  .industry-healthcare,
  .industry-telecom,
  .industry-commerce,
  .industry-logistics,
  .industry-retail {
    grid-column: auto;
    grid-row: auto;
    align-self: stretch;
    transform: none;
  }
}

@media (max-width: 650px) {
  .cc-industry-network {
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 16px;
    border-radius: 28px;
  }

  .cc-industry-core {
    min-height: 165px;
    padding: 24px;
    border-radius: 28px;
  }

  .cc-industry-node {
    min-height: 0;
    padding: 17px;
    border-radius: 22px;
  }

  .cc-industry-node h3 {
    font-size: 17px;
  }
}

.cc-industry-showcase {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px;
  margin-top: 36px;
  padding: 26px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--company-main) 13%, transparent), transparent 32%),
    radial-gradient(circle at 84% 78%, rgba(201,163,91,.16), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.50));
  border: 1px solid color-mix(in srgb, var(--company-main) 15%, rgba(255,255,255,.82));
  box-shadow:
    0 30px 80px rgba(55, 34, 70, .11),
    inset 0 1px 0 rgba(255,255,255,.82);
  overflow: hidden;
}

.cc-industry-showcase::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 30px;
  border: 1px solid rgba(201,163,91,.14);
  pointer-events: none;
}

.cc-industry-panel {
  position: relative;
  min-height: 238px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .62fr);
  gap: 22px;
  align-items: center;
  padding: 24px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.58)),
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--company-main) 13%, transparent), transparent 42%);
  border: 1px solid color-mix(in srgb, var(--company-main) 17%, rgba(255,255,255,.82));
  box-shadow:
    0 24px 64px rgba(55, 34, 70, .10),
    inset 0 1px 0 rgba(255,255,255,.86);
  overflow: hidden;
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}

.cc-industry-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-120%);
  opacity: 0;
  transition: opacity .32s ease;
  animation: ccPanelSweep 7.8s ease-in-out infinite;
}

.cc-industry-panel:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--company-main) 34%, rgba(255,255,255,.82));
  box-shadow:
    0 34px 82px color-mix(in srgb, var(--company-main) 15%, transparent),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.cc-industry-panel:hover::before {
  opacity: 1;
}

.cc-industry-panel > * {
  position: relative;
  z-index: 1;
}

.industry-government { grid-column: 1 / span 7; grid-row: auto; transform: none; }
.industry-finance { grid-column: 8 / span 5; grid-row: auto; transform: none; }
.industry-healthcare { grid-column: 1 / span 5; grid-row: auto; transform: none; }
.industry-telecom { grid-column: 6 / span 7; grid-row: auto; transform: none; align-self: stretch; }
.industry-commerce { grid-column: 1 / span 6; grid-row: auto; transform: none; }
.industry-logistics { grid-column: 7 / span 6; grid-row: auto; transform: none; }
.industry-retail { grid-column: 3 / span 8; grid-row: auto; transform: none; }

.industry-copy {
  display: grid;
  gap: 12px;
  align-content: center;
}

.industry-symbol {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  color: var(--company-main);
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.88), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.94), color-mix(in srgb, var(--company-main) 14%, #fff 86%));
  box-shadow: 0 16px 30px color-mix(in srgb, var(--company-main) 14%, transparent);
}

.industry-symbol i {
  font-size: 22px;
  animation: ccIconBreath 4.4s ease-in-out infinite;
}

.cc-industry-panel h3 {
  margin: 0;
  color: var(--company-deep);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.08;
}

.cc-industry-panel p {
  margin: 0;
  max-width: 560px;
  color: #66535a;
  font-size: 14px;
  line-height: 1.68;
}

.industry-visual {
  position: relative;
  min-height: 160px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.32), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--company-main) 24%, rgba(255,255,255,.28)), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.45);
  box-shadow:
    0 22px 48px color-mix(in srgb, var(--company-main) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.70);
  overflow: hidden;
}

.industry-visual > i {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: var(--company-deep);
  font-size: 30px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
  animation: ccIconBreath 4s ease-in-out infinite;
}

.industry-visual span {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(255,255,255,.52);
  box-shadow: 0 0 0 1px rgba(255,255,255,.24);
  animation: ccVisualSignal 4.8s ease-in-out infinite;
}

.industry-visual span:nth-child(1) {
  width: 72%;
  height: 8px;
  top: 26px;
  left: 14%;
}

.industry-visual span:nth-child(2) {
  width: 48%;
  height: 8px;
  left: 18%;
  bottom: 38px;
  animation-delay: -.8s;
}

.industry-visual span:nth-child(3) {
  width: 12px;
  height: 12px;
  right: 28px;
  bottom: 36px;
  background: var(--gold);
  box-shadow: 0 0 0 7px rgba(201,163,91,.13);
  animation-delay: -1.6s;
}

.service-desk::after,
.secure-ledger::after,
.patient-support::after,
.signal-support::after,
.order-support::after,
.dispatch-support::after,
.retail-support::after {
  content: "";
  position: absolute;
  inset: auto 24px 24px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--company-main) 28%, transparent), transparent);
  opacity: .72;
}

.secure-ledger span:nth-child(1) { width: 58%; }
.patient-support span:nth-child(1) { width: 52%; left: 24%; }
.signal-support span:nth-child(1) { height: 54px; width: 8px; top: auto; bottom: 30px; left: 28px; }
.signal-support span:nth-child(2) { height: 82px; width: 8px; bottom: 30px; left: 46px; }
.order-support span:nth-child(2) { width: 64%; }
.dispatch-support span:nth-child(1) { transform: rotate(-8deg); }
.retail-support span:nth-child(3) { right: 42px; }

@keyframes ccPanelSweep {
  0%, 38% { transform: translateX(-120%); opacity: 0; }
  48% { opacity: .72; }
  68%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes ccVisualSignal {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

@media (max-width: 1120px) {
  .cc-industry-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-industry-panel,
  .industry-government,
  .industry-finance,
  .industry-healthcare,
  .industry-telecom,
  .industry-commerce,
  .industry-logistics,
  .industry-retail {
    grid-column: auto;
  }

  .cc-industry-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .cc-industry-showcase {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
    border-radius: 28px;
  }

  .cc-industry-panel {
    min-height: 0;
    padding: 18px;
    border-radius: 24px;
  }

  .industry-visual {
    min-height: 132px;
    border-radius: 22px;
  }
}

.cc-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cc-impact-card {
  min-height: 230px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.62)),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--company-main) 15%, transparent), transparent 42%);
}

.cc-impact-card .card-icon {
  margin-bottom: 18px;
}

.cc-impact-card h3 {
  margin-top: 0;
}

.cc-impact-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--company-main), var(--gold));
}

.cc-trust-showcase {
  position: relative;
  padding: 28px;
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.52)),
    radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--company-main) 14%, transparent), transparent 34%),
    radial-gradient(circle at 86% 74%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 34%);
  border: 1px solid color-mix(in srgb, var(--company-main) 16%, rgba(255,255,255,.8));
  box-shadow:
    0 28px 70px rgba(55, 34, 70, .11),
    inset 0 1px 0 rgba(255,255,255,.82);
  overflow: hidden;
}

.cc-trust-showcase::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 28px;
  border: 1px solid rgba(201,163,91,.16);
  pointer-events: none;
}

.cc-trust-grid {
  position: relative;
  z-index: 1;
  padding: 16px 6px 22px;
}

.cc-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.cc-enterprise-card,
.cc-value-card {
  position: relative;
  min-height: 264px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.58)),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--company-main) 12%, transparent), transparent 38%);
  border-color: color-mix(in srgb, var(--company-main) 18%, rgba(255,255,255,.8));
  box-shadow:
    0 24px 58px rgba(55, 34, 70, .1),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.cc-enterprise-card::after,
.cc-value-card::after {
  content: "";
  position: absolute;
  inset: auto 22px 0 22px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--company-main), var(--gold));
  opacity: .72;
  transition: transform .3s ease, opacity .3s ease;
}

.cc-enterprise-card > *,
.cc-value-card > * {
  position: relative;
  z-index: 1;
}

.cc-enterprise-card:hover,
.cc-value-card:hover {
  border-color: color-mix(in srgb, var(--company-main) 34%, rgba(255,255,255,.8));
  box-shadow:
    0 30px 70px color-mix(in srgb, var(--company-main) 16%, transparent),
    0 0 34px color-mix(in srgb, var(--company-main) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.cc-enterprise-card:hover::after,
.cc-value-card:hover::after {
  transform: scaleX(.88);
  opacity: 1;
}

.theme-cc .cc-enterprise-card {
  isolation: isolate;
}

.theme-cc .cc-enterprise-card .card-icon {
  position: relative;
  overflow: visible;
}

.theme-cc .cc-enterprise-card .card-icon::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--company-main) 34%, transparent);
  opacity: .46;
  transform: scale(.92);
  animation: ccIconPulse 3.8s ease-in-out infinite;
  pointer-events: none;
}

.theme-cc .cc-enterprise-card .card-icon i {
  animation: ccIconBreath 4.2s ease-in-out infinite;
}

.theme-cc .cc-enterprise-card:nth-child(2) .card-icon::after,
.theme-cc .cc-enterprise-card:nth-child(2) .card-icon i { animation-delay: -.45s; }
.theme-cc .cc-enterprise-card:nth-child(3) .card-icon::after,
.theme-cc .cc-enterprise-card:nth-child(3) .card-icon i { animation-delay: -.9s; }
.theme-cc .cc-enterprise-card:nth-child(4) .card-icon::after,
.theme-cc .cc-enterprise-card:nth-child(4) .card-icon i { animation-delay: -1.35s; }
.theme-cc .cc-enterprise-card:nth-child(5) .card-icon::after,
.theme-cc .cc-enterprise-card:nth-child(5) .card-icon i { animation-delay: -1.8s; }
.theme-cc .cc-enterprise-card:nth-child(6) .card-icon::after,
.theme-cc .cc-enterprise-card:nth-child(6) .card-icon i { animation-delay: -2.25s; }

.theme-cc .cc-enterprise-card h3::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--company-main), var(--gold));
  opacity: .44;
  transform-origin: left center;
  transition: transform .3s ease, opacity .3s ease;
}

html[dir="rtl"] .theme-cc .cc-enterprise-card h3::after {
  transform-origin: right center;
}

.theme-cc .cc-enterprise-card:hover h3::after {
  transform: scaleX(1.55);
  opacity: .92;
}

.theme-cc .cc-enterprise-card:hover .card-icon::after {
  opacity: .82;
  border-color: color-mix(in srgb, var(--gold) 48%, transparent);
}

@keyframes ccIconPulse {
  0%, 100% { transform: scale(.88); opacity: .28; box-shadow: 0 0 0 0 color-mix(in srgb, var(--company-main) 16%, transparent); }
  50% { transform: scale(1.08); opacity: .72; box-shadow: 0 0 0 8px transparent; }
}

@keyframes ccIconBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.07); }
}

.cc-business-ecosystem {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 24px;
  min-height: 620px;
  margin-top: 34px;
  padding: 34px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--company-main) 20%, transparent), transparent 32%),
    radial-gradient(circle at 14% 14%, rgba(255,255,255,.78), transparent 30%),
    radial-gradient(circle at 88% 84%, rgba(201,163,91,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
  border: 1px solid color-mix(in srgb, var(--company-main) 15%, rgba(255,255,255,.82));
  box-shadow:
    0 30px 80px rgba(55, 34, 70, .12),
    inset 0 1px 0 rgba(255,255,255,.82);
  overflow: hidden;
}

.cc-business-ecosystem::before,
.cc-business-ecosystem::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.cc-business-ecosystem::before {
  width: 420px;
  height: 420px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--company-main) 18%, transparent);
  box-shadow: inset 0 0 0 1px rgba(201,163,91,.12);
  opacity: .72;
}

.cc-business-ecosystem::after {
  width: 260px;
  height: 260px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--company-main) 10%, transparent);
  filter: blur(34px);
  opacity: .9;
}

.cc-business-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cc-business-lines .line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(25vw, 310px);
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(201,163,91,.78), color-mix(in srgb, var(--company-main) 54%, rgba(255,255,255,.36)), transparent);
  opacity: .68;
  overflow: hidden;
}

.cc-business-lines .line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  animation: ccBusinessSignal 3.6s ease-in-out infinite;
}

.cc-business-lines .line-one { transform: rotate(-142deg); }
.cc-business-lines .line-two { transform: rotate(-91deg); width: min(18vw, 220px); }
.cc-business-lines .line-three { transform: rotate(-38deg); }
.cc-business-lines .line-four { transform: rotate(142deg); }
.cc-business-lines .line-five { transform: rotate(91deg); width: min(18vw, 220px); }
.cc-business-lines .line-six { transform: rotate(38deg); }
.cc-business-lines .line-two::after { animation-delay: -.45s; }
.cc-business-lines .line-three::after { animation-delay: -.9s; }
.cc-business-lines .line-four::after { animation-delay: -1.35s; }
.cc-business-lines .line-five::after { animation-delay: -1.8s; }
.cc-business-lines .line-six::after { animation-delay: -2.25s; }

.cc-business-hub,
.cc-business-node {
  position: relative;
  z-index: 1;
}

.cc-business-hub {
  grid-column: 5 / span 4;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: min(100%, 280px);
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 30px;
  border-radius: 34px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(135deg, var(--company-deep), color-mix(in srgb, var(--company-main) 76%, #111827 24%));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    0 28px 64px color-mix(in srgb, var(--company-deep) 26%, transparent),
    0 0 42px color-mix(in srgb, var(--company-main) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.cc-business-hub i {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 22px;
  color: var(--company-deep);
  font-size: 26px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
}

.cc-business-hub strong {
  font-family: var(--display-font);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1;
}

.cc-business-hub > span {
  color: rgba(255,255,255,.70);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hub-orbit,
.hub-orbit span {
  position: absolute;
  inset: 18px;
  border-radius: 32px;
  pointer-events: none;
}

.hub-orbit {
  border: 1px solid rgba(201,163,91,.22);
  animation: ccHubOrbit 10s linear infinite;
}

.hub-orbit span {
  inset: auto;
  width: 8px;
  height: 8px;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,163,91,.12);
}

.hub-orbit span:nth-child(1) { left: 16%; top: -4px; }
.hub-orbit span:nth-child(2) { right: -4px; top: 52%; }
.hub-orbit span:nth-child(3) { left: 50%; bottom: -4px; }

.cc-business-node {
  min-height: 188px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.58)),
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--company-main) 13%, transparent), transparent 40%);
  border: 1px solid color-mix(in srgb, var(--company-main) 18%, rgba(255,255,255,.8));
  box-shadow:
    0 22px 54px rgba(55, 34, 70, .10),
    inset 0 1px 0 rgba(255,255,255,.86);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.cc-business-node:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--company-main) 35%, rgba(255,255,255,.8));
  box-shadow:
    0 30px 72px color-mix(in srgb, var(--company-main) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.node-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: var(--company-main);
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.88), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.92), color-mix(in srgb, var(--company-main) 14%, #fff 86%));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--company-main) 13%, transparent);
}

.node-icon i {
  animation: ccIconBreath 4.4s ease-in-out infinite;
}

.cc-business-node h3 {
  margin: 4px 0 0;
  color: var(--company-deep);
  font-size: 19px;
  line-height: 1.16;
}

.cc-business-node p {
  margin: 0;
  color: #66535a;
  font-size: 14px;
  line-height: 1.65;
}

.node-satisfaction { grid-column: 1 / span 4; grid-row: 1; }
.node-acquisition { grid-column: 5 / span 4; grid-row: 1; transform: translateY(-18px); }
.node-growth { grid-column: 9 / span 4; grid-row: 1; }
.node-feedback { grid-column: 1 / span 4; grid-row: 3; }
.node-problems { grid-column: 5 / span 4; grid-row: 3; transform: translateY(18px); }
.node-journey { grid-column: 9 / span 4; grid-row: 3; }

@keyframes ccBusinessSignal {
  0%, 24% { transform: translateX(-110%); opacity: 0; }
  42% { opacity: .85; }
  72%, 100% { transform: translateX(230%); opacity: 0; }
}

@keyframes ccHubOrbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 1120px) {
  .cc-business-ecosystem {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
  }

  .cc-business-lines {
    display: none;
  }

  .cc-business-ecosystem::before {
    width: min(70vw, 420px);
    height: min(70vw, 420px);
  }

  .cc-business-hub {
    grid-column: 1 / -1;
    grid-row: auto;
    width: min(100%, 360px);
    min-height: 190px;
    order: -1;
  }

  .cc-business-node,
  .node-satisfaction,
  .node-acquisition,
  .node-growth,
  .node-feedback,
  .node-problems,
  .node-journey {
    grid-column: auto;
    grid-row: auto;
    transform: none;
  }
}

@media (max-width: 650px) {
  .cc-business-ecosystem {
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 16px;
    border-radius: 28px;
  }

  .cc-business-hub {
    min-height: 170px;
    padding: 24px;
    border-radius: 28px;
  }

  .cc-business-hub i {
    width: 58px;
    height: 58px;
    border-radius: 20px;
  }

  .cc-business-node {
    min-height: 0;
    padding: 18px;
    border-radius: 22px;
  }

  .cc-business-node h3 {
    font-size: 17px;
  }
}

.cc-bridge-callout {
  margin-top: 26px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 28px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, var(--company-deep), var(--company-main));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 28px 70px color-mix(in srgb, var(--company-deep) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.cc-bridge-callout i {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 22px;
  color: var(--company-deep);
  font-size: 25px;
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.92), transparent 38%),
    linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 18px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.68);
}

.cc-bridge-callout p {
  margin: 0;
  max-width: 920px;
  font-family: var(--display-font);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.24;
  font-weight: 900;
  letter-spacing: 0;
}

.workflow-showcase {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 24px;
  align-items: stretch;
}

.workflow-visual-panel,
.dashboard-panel-modern {
  min-height: 390px;
  padding: 22px;
  color: #fff;
}

.workflow-visual-panel {
  display: grid;
  place-items: center;
}

.mini-map,
.warehouse-stack,
.commerce-stack,
.support-console {
  position: relative;
  width: min(100%, 460px);
  min-height: 300px;
  border-radius: 24px;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    rgba(255,255,255,.08);
  background-size: 32px 32px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
}

.map-grid {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--company-main) 30%, transparent), transparent 48%);
}

.route-line-a,
.route-line-b {
  position: absolute;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform-origin: left center;
}

.route-line-a {
  width: 70%;
  left: 14%;
  top: 42%;
  transform: rotate(-18deg);
}

.route-line-b {
  width: 52%;
  left: 31%;
  top: 62%;
  transform: rotate(24deg);
}

.map-stop {
  width: 18px;
  height: 18px;
}

.stop-one { left: 18%; top: 35%; }
.stop-two { left: 55%; top: 24%; }
.stop-three { right: 15%; bottom: 26%; }
.map-vehicle { left: 42%; top: 55%; }

.dashboard-panel-modern {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 20px;
}

.dashboard-header {
  justify-content: space-between;
  gap: 18px;
}

.dashboard-header h3 {
  margin: 5px 0 0;
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
}

.dashboard-header > span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--company-deep);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  font-size: 12px;
  font-weight: 900;
}

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

.dashboard-kpis div {
  min-height: 108px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  transition: transform .25s ease, background .25s ease;
}

.dashboard-kpis div:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.17);
}

.dashboard-kpis strong {
  display: block;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.dashboard-kpis span {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.theme-cc .dashboard-kpis .cc-kpi {
  position: relative;
  overflow: hidden;
}

.theme-cc .dashboard-kpis .cc-kpi::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), var(--gold), rgba(255,255,255,.18));
  background-size: 180% 100%;
  opacity: .72;
  animation: ccSignalScan 2.8s ease-in-out infinite;
}

.theme-cc .dashboard-kpis .cc-kpi i {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,163,91,.14);
  animation: ccLivePulse 1.9s ease-in-out infinite;
}

.theme-cc .dashboard-kpis .cc-kpi:nth-child(2)::after,
.theme-cc .dashboard-kpis .cc-kpi:nth-child(2) i { animation-delay: -.35s; }
.theme-cc .dashboard-kpis .cc-kpi:nth-child(3)::after,
.theme-cc .dashboard-kpis .cc-kpi:nth-child(3) i { animation-delay: -.7s; }
.theme-cc .dashboard-kpis .cc-kpi:nth-child(4)::after,
.theme-cc .dashboard-kpis .cc-kpi:nth-child(4) i { animation-delay: -1.05s; }

html[dir="rtl"] .theme-cc .dashboard-kpis .cc-kpi i {
  right: auto;
  left: 14px;
}

.cc-workflow-board {
  position: relative;
  display: grid;
  gap: 16px;
}

.cc-channel-cloud {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.cc-channel-cloud span {
  position: relative;
  min-height: 62px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 16px;
  color: rgba(255,255,255,.86);
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.16), transparent 40%),
    rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 28px rgba(0,0,0,.10);
  transition: transform .28s ease, background .28s ease, border-color .28s ease;
  animation: ccChannelFloat 6.4s ease-in-out infinite;
}

.cc-channel-cloud span:nth-child(2) { animation-delay: -.7s; }
.cc-channel-cloud span:nth-child(3) { animation-delay: -1.4s; }
.cc-channel-cloud span:nth-child(4) { animation-delay: -2.1s; }
.cc-channel-cloud span:nth-child(5) { animation-delay: -2.8s; }

.cc-channel-cloud span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 2px;
  height: 10px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold), transparent);
  opacity: .62;
}

.cc-channel-cloud span:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.15);
  border-color: color-mix(in srgb, var(--gold) 42%, rgba(255,255,255,.16));
}

.cc-channel-cloud i {
  color: var(--gold-soft);
  font-size: 18px;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.18));
}

.cc-channel-cloud em {
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.cc-operation-flow {
  position: relative;
  display: grid;
  gap: 10px;
  padding-inline-start: 18px;
}

.cc-operation-flow::before,
.cc-operation-flow::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  bottom: 12px;
  border-radius: 999px;
}

.cc-operation-flow::before {
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(201,163,91,.78), color-mix(in srgb, var(--company-main) 64%, rgba(255,255,255,.18)), rgba(201,163,91,.72), transparent);
}

.cc-operation-flow::after {
  width: 8px;
  height: 8px;
  margin-inline-start: -3px;
  bottom: auto;
  background: var(--gold);
  box-shadow: 0 0 0 7px rgba(201,163,91,.12), 0 0 18px rgba(201,163,91,.42);
  animation: ccFlowTravel 6s ease-in-out infinite;
}

.cc-flow-stage {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 11px 13px;
  border-radius: 18px;
  color: rgba(255,255,255,.92);
  background:
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.08)),
    color-mix(in srgb, var(--company-deep) 58%, transparent);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 34px rgba(0,0,0,.12);
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.cc-flow-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-120%);
  animation: ccStageScan 5.8s ease-in-out infinite;
}

.cc-flow-stage:nth-child(2)::before { animation-delay: -.6s; }
.cc-flow-stage:nth-child(3)::before { animation-delay: -1.2s; }
.cc-flow-stage:nth-child(4)::before { animation-delay: -1.8s; }
.cc-flow-stage:nth-child(5)::before { animation-delay: -2.4s; }
.cc-flow-stage:nth-child(6)::before { animation-delay: -3s; }
.cc-flow-stage:nth-child(7)::before { animation-delay: -3.6s; }

.cc-flow-stage:hover {
  transform: translateX(6px);
  border-color: color-mix(in srgb, var(--gold) 45%, rgba(255,255,255,.16));
  background: color-mix(in srgb, var(--company-main) 34%, rgba(255,255,255,.12));
  box-shadow: 0 22px 42px rgba(0,0,0,.18);
}

.stage-icon {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--company-deep);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 12px 22px rgba(0,0,0,.16), 0 0 0 5px rgba(201,163,91,.10);
}

.cc-flow-stage strong,
.cc-flow-stage small {
  position: relative;
  z-index: 1;
  display: block;
}

.cc-flow-stage strong {
  font-size: 13px;
  line-height: 1.22;
}

.cc-flow-stage small {
  margin-top: 4px;
  color: rgba(255,255,255,.64);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
}

@keyframes ccChannelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes ccFlowTravel {
  0% { transform: translateY(0) scale(.85); opacity: .58; }
  12%, 88% { opacity: 1; }
  100% { transform: translateY(420px) scale(1); opacity: .28; }
}

@keyframes ccStageScan {
  0%, 38% { transform: translateX(-120%); opacity: 0; }
  52% { opacity: .72; }
  72%, 100% { transform: translateX(120%); opacity: 0; }
}

html[dir="rtl"] .cc-operation-flow {
  padding-inline-start: 0;
  padding-inline-end: 18px;
}

html[dir="rtl"] .cc-flow-stage {
  direction: rtl;
}

html[dir="rtl"] .cc-flow-stage:hover {
  transform: translateX(-6px);
}

@media (max-width: 1120px) {
  .cc-channel-cloud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .cc-channel-cloud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-channel-cloud span {
    min-height: 56px;
  }

  .cc-operation-flow {
    gap: 9px;
  }

  .cc-flow-stage {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .stage-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
}

.cc-capability-chips {
  align-self: start;
  gap: 8px;
}

.cc-capability-chips span {
  min-height: 30px;
  padding: 7px 10px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.workflow-chips {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.workflow-chips span {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.18);
  box-shadow: none;
}

.warehouse-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 26px;
  align-content: center;
}

.warehouse-stack span {
  min-height: 76px;
  animation: shelfLift 6s ease-in-out infinite;
}

.warehouse-stack span:nth-child(3n) { animation-delay: -1.5s; }
.warehouse-stack span:nth-child(2n) { animation-delay: -3s; }

.commerce-stack {
  display: grid;
  gap: 14px;
  padding: 28px;
  align-content: center;
}

.commerce-stack span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 900;
  position: relative;
}

.commerce-stack span:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 18px;
  left: 28px;
  bottom: -17px;
  border-radius: 999px;
  background: var(--gold);
}

.support-console {
  display: grid;
  grid-template-columns: .55fr 1fr;
  gap: 16px;
  padding: 22px;
}

.inbox-list,
.chat-window {
  display: grid;
  gap: 12px;
}

.chat-window span:nth-child(2) {
  width: 72%;
  margin-inline-start: auto;
  background: color-mix(in srgb, var(--company-main) 48%, rgba(255,255,255,.16));
}

.quality-ring {
  position: absolute;
  right: 26px;
  bottom: 24px;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: conic-gradient(var(--gold) 0 78%, rgba(255,255,255,.18) 78% 100%);
  box-shadow: 0 18px 34px rgba(0,0,0,.20);
}

.quality-ring::after {
  content: "QA";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: color-mix(in srgb, var(--company-deep) 88%, #111827 12%);
}

@keyframes dashPulse {
  0%, 100% { opacity: .64; filter: drop-shadow(0 0 0 rgba(201,163,91,0)); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(201,163,91,.42)); }
}

@keyframes vehicleDrift {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(46px,-24px,0); }
}

@keyframes shelfLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 34px;
}

.contact-grid::before {
  content: "";
  position: absolute;
  inset: 8% 6% auto;
  height: 220px;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 40%, color-mix(in srgb, var(--company-main, var(--primary)) 16%, transparent), transparent 42%),
    radial-gradient(circle at 78% 52%, rgba(201,163,91,.20), transparent 44%);
  filter: blur(14px);
  opacity: .9;
}

.contact-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.contact-card {
  position: relative;
  min-height: 154px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  overflow: hidden;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,250,247,.62)),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--company-main, var(--primary)) 13%, transparent), transparent 40%);
  border: 1px solid color-mix(in srgb, var(--company-main, var(--primary)) 16%, rgba(255,255,255,.44));
  box-shadow: 0 22px 54px rgba(50,22,28,.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.contact-card::after {
  content: "";
  position: absolute;
  inset: auto -34px -44px auto;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--company-main, var(--primary)) 14%, transparent);
  filter: blur(2px);
}

.contact-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--company-main, var(--primary)) 30%, rgba(255,255,255,.42));
  box-shadow:
    0 28px 68px rgba(50,22,28,.14),
    0 0 32px color-mix(in srgb, var(--company-main, var(--primary)) 12%, transparent);
}

.contact-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--company-deep, var(--primary)), var(--company-main, var(--primary)), var(--gold));
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--company-main, var(--primary)) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.contact-icon i {
  font-size: 22px;
  line-height: 1;
}

.contact-card strong {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--company-main, var(--primary));
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.contact-card span,
.contact-card a {
  position: relative;
  z-index: 1;
  color: #2f1e24;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.3;
}

.contact-list {
  display: grid;
  gap: 18px;
  margin: 24px 0 28px;
}

.contact-item strong {
  display: block;
  color: var(--company-main, var(--primary));
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.contact-item span,
.contact-item a {
  color: #2f1e24;
  font-size: 18px;
}

.contact-item .phone-value,
.contact-item a[href^="mailto:"],
.contact-card .phone-value,
.contact-card a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.panel.contact-form-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 38px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,250,247,.70)),
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--company-main, var(--primary)) 10%, transparent), transparent 42%);
  border: 1px solid color-mix(in srgb, var(--company-main, var(--primary)) 14%, rgba(255,255,255,.42));
  box-shadow:
    0 30px 74px rgba(50,22,28,.13),
    inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.contact-form-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--company-main, var(--primary)), var(--gold));
}

.contact-form-panel form {
  position: relative;
  z-index: 1;
}

.panel.contact-map-panel {
  position: relative;
  z-index: 1;
  padding: 10px;
  overflow: hidden;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,250,247,.56)),
    radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--company-main, var(--primary)) 10%, transparent), transparent 42%);
  border: 1px solid color-mix(in srgb, var(--company-main, var(--primary)) 14%, rgba(255,255,255,.42));
  box-shadow: 0 30px 76px rgba(50,22,28,.13);
}

.map-frame {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  border-radius: 24px;
  filter: saturate(1.05) contrast(1.02);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field,
.textarea {
  width: 100%;
  border: 1px solid rgba(122,30,44,.12);
  background: #fcf9f7;
  color: #2f1e24;
  border-radius: 16px;
  padding: 15px 16px;
  font: inherit;
  outline: none;
  transition: .2s ease;
}

.field:focus,
.textarea:focus {
  border-color: rgba(122,30,44,.28);
  background: #fff;
}

.textarea {
  min-height: 150px;
  resize: vertical;
  margin-top: 14px;
}

.form-note {
  color: #7b666e;
  font-size: 14px;
  margin: 14px 0 18px;
}

.message-counter {
  margin: 8px 0 0;
  font-size: 13px;
  text-align: end;
}

.message-counter.near-limit { color: #b8860b; }
.message-counter.at-limit { color: #b23347; font-weight: 700; }

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cta-section {
  background: linear-gradient(135deg, var(--company-deep, #3a0209), var(--company-main, var(--primary)));
  color: rgba(255,255,255,.86);
  text-align: center;
  padding: 64px 0;
}

.cta-section h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(29px, 3.4vw, 44px);
  line-height: 1.08;
}

.cta-section p {
  margin: 16px auto 0;
  max-width: 760px;
  font-size: 18px;
}

.cta-section .hero-actions {
  justify-content: center;
}

footer {
  background: linear-gradient(135deg, var(--company-deep, #3a0209), var(--company-main, var(--primary)));
  color: rgba(255,255,255,.86);
  padding: 34px 0;
  text-align: center;
}

.footer-title {
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.footer-links a {
  color: rgba(255,255,255,.82);
  font-weight: 800;
}

.footer-text {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255,255,255,.68);
}

.social-wrap {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.social-label {
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.social-link {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-soft);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,163,91,.28);
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.social-link svg {
  width: 20px;
  height: 20px;
}

.social-link:hover {
  transform: translateY(-3px);
  color: #3a0209;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  border-color: transparent;
  box-shadow: 0 14px 28px rgba(201,163,91,.28);
}

.reveal-target {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

.reveal-target.reveal-visible {
  opacity: 1;
  transform: none;
}

html[dir="rtl"] .brand { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .brand-text { text-align: right; }
html[dir="rtl"] .brand-title,
html[dir="rtl"] .brand-sub,
html[dir="rtl"] .section-kicker,
html[dir="rtl"] .contact-item strong,
html[dir="rtl"] .social-label {
  letter-spacing: 0;
}

html[dir="rtl"] .hero-content,
html[dir="rtl"] .panel,
html[dir="rtl"] .info-card,
html[dir="rtl"] .service-card,
html[dir="rtl"] .process-step {
  text-align: right;
}

html[dir="rtl"] .hero-actions { justify-content: flex-start; }
html[dir="rtl"] .feature-list li,
html[dir="rtl"] .check-list li { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .field,
html[dir="rtl"] .textarea { text-align: right; }
html[dir="rtl"] .message-counter { text-align: end; }
html[dir="rtl"] .cta-section,
html[dir="rtl"] footer {
  text-align: center;
}

html[dir="rtl"] .cta-section .container,
html[dir="rtl"] footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

html[dir="rtl"] .cta-section p,
html[dir="rtl"] .footer-title,
html[dir="rtl"] .footer-text,
html[dir="rtl"] footer .container > div {
  margin-left: auto;
  margin-right: auto;
}

html[dir="rtl"] .cta-section .hero-actions,
html[dir="rtl"] .footer-links,
html[dir="rtl"] .social-wrap,
html[dir="rtl"] .social-links {
  justify-content: center;
  align-items: center;
}

html[dir="rtl"] .cta-section .hero-actions {
  direction: rtl;
  align-self: center;
  width: auto;
  max-width: 100%;
}

html[dir="rtl"] .story-copy,
html[dir="rtl"] .modern-card,
html[dir="rtl"] .metric-card,
html[dir="rtl"] .usecase-card,
html[dir="rtl"] .dashboard-panel-modern,
html[dir="rtl"] .ops-widget {
  text-align: right;
}
html[dir="rtl"] .system-topbar,
html[dir="rtl"] .dashboard-header,
html[dir="rtl"] .workflow-chips,
html[dir="rtl"] .micro-points {
  direction: rtl;
}
html[dir="rtl"] .visual-map-layer {
  transform: scaleX(-1);
}
html[dir="rtl"] .visual-map-layer > * {
  transform: scaleX(-1);
}
html[dir="rtl"] .commerce-stack span:not(:last-child)::after {
  left: auto;
  right: 28px;
}
html[dir="rtl"] .channel-stack {
  left: auto;
  right: 24px;
}
html[dir="rtl"] .ai-assistant-card {
  right: auto;
  left: 22px;
}

@media (max-width: 1120px) {
  .info-grid,
  .service-grid,
  .why-grid,
  .stats-grid,
  .process-grid,
  .feature-grid,
  .usecase-grid,
  .cc-card-grid,
  .cc-industry-grid,
  .cc-impact-grid,
  .storage-industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .client-card,
  .client-card:nth-child(n) { grid-column: auto; }

  .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storage-brand-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1020px) {
  .nav { gap: 2px; padding: 5px; }
  .nav a { padding: 9px 12px; font-size: 13px; }
  .lang-toggle { padding: 10px 14px; }
  .brand-logo,
  .brand-fallback { height: 72px; width: 72px; }
  .company-brand-logo { width: 150px; height: 72px; }
  .brand-title { font-size: 13px; letter-spacing: .12em; }
  .brand-sub { font-size: 9px; letter-spacing: .16em; }
}

@media (max-width: 900px) {
  .topbar {
    background: var(--topbar-glass-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--topbar-border);
  }

  .nav {
    background: var(--topbar-nav-bg);
    border-color: var(--topbar-nav-border);
  }

  .nav a { color: color-mix(in srgb, var(--company-deep, #4a2832) 82%, #4a2832 18%); }
  .lang-toggle {
    color: var(--company-main, var(--primary));
    border-color: var(--topbar-lang-border);
    background: var(--topbar-lang-bg);
  }

  .topbar-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand lang"
      "nav nav";
    min-height: 0;
    padding: 3px 0 4px;
    gap: 2px 8px;
    direction: ltr;
  }

  .brand { grid-area: brand; justify-self: start; }
  .nav { grid-area: nav; justify-self: center; }
  .lang-wrap { grid-area: lang; justify-self: end; align-self: center; }

  .brand { flex-direction: row; text-align: start; gap: 8px; direction: ltr; }
  html[dir="rtl"] .brand { flex-direction: row; text-align: left; }
  html[dir="rtl"] .nav { direction: rtl; }
  html[dir="rtl"] .lang-wrap { direction: ltr; }

  .brand-logo,
  .brand-fallback {
    height: 64px;
    width: 64px;
  }

  .brand .company-brand-logo {
    width: clamp(132px, 36vw, 145px);
    height: 78px;
    object-fit: cover;
    object-position: center;
  }

  .nav {
    flex-wrap: nowrap;
    gap: 2px;
    padding: 3px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    padding: 5px 8px;
    font-size: 11.5px;
  }

  .lang-toggle {
    padding: 5px 9px;
    font-size: 11.5px;
  }

  .page-hero {
    min-height: auto;
    padding-top: calc(var(--topbar-h) + 42px);
    padding-bottom: 58px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .hero-visual {
    min-height: 320px;
  }

  .split-grid,
  .contact-grid,
  .visual-split,
  .workflow-showcase {
    grid-template-columns: 1fr;
  }

  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-card {
    min-height: 0;
  }

  .story-copy {
    max-width: none;
  }

  section { padding: 60px 0; }
}

@media (max-width: 760px) {
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-card,
  .client-card:nth-child(n) { grid-column: auto; }
  .client-card:nth-child(n) { --base-x: 0px; }
}

@media (max-width: 650px) {
  .container { width: min(100% - 24px, 1200px); }
  .page-hero h1 { font-size: clamp(31px, 9vw, 46px); }
  .page-hero p { font-size: 16px; }
  .hero-visual { min-height: 292px; border-radius: 22px; }
  .visual-card { min-width: 128px; padding: 12px; }
  .visual-card strong { font-size: 17px; }
  .visual-main { width: min(78%, 280px); }
  .client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 14px 4px 20px;
  }
  .client-card,
  .client-card:nth-child(n) { grid-column: auto; }
  .client-card {
    min-height: 112px;
    padding: 12px 6px;
  }
  .client-card:nth-child(n) {
    --base-x: 0px;
    --float-y: 9px;
  }
  .client-card img {
    width: min(150px, 84%);
    max-height: 76px;
  }
  .client-card:nth-child(2) img,
  .client-card:nth-child(3) img {
    width: min(104px, 70%);
    max-height: 92px;
  }
  .client-card:nth-child(4) img {
    width: min(172px, 96%);
    max-height: 86px;
  }
  .info-grid,
  .service-grid,
  .service-grid.two,
  .info-grid.two,
  .why-grid,
  .stats-grid,
  .process-grid,
  .feature-grid,
  .usecase-grid,
  .cc-card-grid,
  .cc-industry-grid,
  .cc-impact-grid,
  .storage-industry-grid,
  .metric-strip,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .storage-industry-card {
    min-height: 136px;
  }

  .cc-industry-card,
  .cc-industry-card:nth-child(n) {
    grid-column: auto;
    min-height: 0;
  }

  .cc-enterprise-card,
  .cc-value-card,
  .cc-impact-card {
    min-height: 0;
  }

  .cc-trust-showcase {
    padding: 18px;
    border-radius: 26px;
  }

  .cc-trust-showcase::before {
    inset: 14px;
    border-radius: 22px;
  }

  .cc-bridge-callout {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 22px;
    text-align: center;
    border-radius: 24px;
  }

  .cc-bridge-callout i {
    width: 56px;
    height: 56px;
    border-radius: 19px;
  }

  .storage-brand-showcase {
    padding: 18px;
    border-radius: 26px;
  }

  .storage-brand-showcase::before {
    inset: 14px;
    border-radius: 22px;
  }

  .storage-brand-proof {
    grid-template-columns: 1fr;
  }

  .proof-item {
    min-height: 0;
    padding: 13px 14px;
  }

  .panel,
  .info-card,
  .service-card,
  .process-step,
  .stat-card,
  .metric-card,
  .modern-card,
  .usecase-card {
    padding: 18px;
  }

  .visual-system,
  .workflow-visual-panel,
  .dashboard-panel-modern {
    min-height: auto;
    padding: 16px;
    border-radius: 22px;
  }

  .ops-widget-grid,
  .dashboard-kpis {
    grid-template-columns: 1fr;
  }

  .route-canvas,
  .warehouse-canvas,
  .commerce-canvas,
  .support-canvas,
  .mini-map,
  .warehouse-stack,
  .commerce-stack,
  .support-console {
    min-height: 248px;
  }

  .commerce-canvas,
  .support-console {
    grid-template-columns: 1fr;
  }

  .ai-assistant-card {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    margin-top: 16px;
  }

  html[dir="rtl"] .ai-assistant-card {
    left: auto;
  }

  .panel.contact-form-panel { padding: 24px; }
  .contact-card { padding: 20px; }
  .contact-icon { width: 52px; height: 52px; border-radius: 16px; }
  .map-frame { height: 300px; }
  .brand-title { font-size: 13px; }
  .brand-sub { font-size: 12.5px; }
  .footer-links { gap: 16px; }
  html[dir="rtl"] .hero-actions { flex-direction: column; align-items: stretch; }
  html[dir="rtl"] .hero-actions .btn { width: 100%; }
  html[dir="rtl"] .cta-section .hero-actions { align-items: center; }
  html[dir="rtl"] .cta-section .hero-actions .btn {
    width: min(100%, 280px);
  }
}

@media (max-width: 480px) {
  .container { width: min(100% - 20px, 1200px); }
  .topbar-inner { padding: 2px 0 3px; gap: 1px 5px; }
  .brand-logo,
  .brand-fallback { height: 58px; width: 58px; }
  .brand .company-brand-logo {
    width: clamp(132px, 36vw, 145px);
    height: 78px;
    object-fit: cover;
    object-position: center;
  }
  .nav a { padding: 4px 7px; font-size: 10.8px; }
  .lang-toggle { padding: 4px 8px; font-size: 11.2px; }
  .btn { padding: 0 16px; min-height: 48px; font-size: 13.5px; }
  .field,
  .textarea { padding: 13px 14px; }
  .textarea { min-height: 130px; }
  .contact-item span,
  .contact-item a { font-size: 16px; }
  .contact-card { align-items: flex-start; }
  .contact-card span,
  .contact-card a { font-size: 16px; }
  .map-frame { height: 280px; }
  .hero-visual { min-height: 270px; }
  .metric-row { grid-template-columns: 1fr; }
  .storage-visual .shelf { grid-template-columns: repeat(2, 1fr); bottom: 32px; }
  .delivery-visual .visual-card.one,
  .storage-visual .visual-card.one { left: 16px; top: 18px; }
  .delivery-visual .visual-card.two,
  .storage-visual .visual-card.two { right: 16px; bottom: 18px; top: auto; }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-inline: 4px; }
  html[dir="rtl"] .brand { gap: 10px; }
  html[dir="rtl"] .brand-title { font-size: 13px; }
  html[dir="rtl"] .brand-sub { font-size: 10px; }
}

/* Global scale refinement */
section {
  padding: 68px 0;
}

.page-hero {
  min-height: 600px;
  padding: calc(var(--topbar-h) + 54px) 0 58px;
}

.hero-layout {
  gap: 30px;
}

.eyebrow {
  padding: 7px 13px;
  font-size: 11px;
}

.page-hero h1 {
  margin: 16px 0 12px;
  font-size: clamp(34px, 4.7vw, 58px);
}

.page-hero p {
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.58;
}

.hero-actions {
  margin-top: 22px;
  gap: 10px;
}

.btn {
  min-height: 46px;
  padding: 0 20px;
}

.hero-visual {
  min-height: 360px;
  border-radius: 26px;
}

.visual-card {
  padding: 15px;
}

.visual-card strong {
  font-size: 20px;
}

.visual-main {
  min-height: 190px;
}

.metric-pill {
  min-height: 38px;
}

.section-head {
  margin-bottom: 24px;
}

.section-kicker {
  margin-bottom: 10px;
  font-size: 11px;
}

.section-title {
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.08;
}

.section-text {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.55;
}

.split-grid,
.visual-split,
.workflow-showcase,
.info-grid,
.service-grid,
.why-grid,
.stats-grid,
.process-grid,
.feature-grid,
.usecase-grid,
.cc-card-grid,
.cc-impact-grid,
.metric-strip {
  gap: 18px;
}

.panel {
  padding: 28px;
}

.info-card,
.service-card,
.process-step,
.stat-card,
.metric-card,
.modern-card,
.usecase-card {
  padding: 24px;
}

.content-stack,
.ops-widget-grid,
.dashboard-panel-modern,
.cc-workflow-board {
  gap: 16px;
}

.client-grid {
  gap: 22px;
  padding: 24px 10px 34px;
}

.client-card {
  min-height: 132px;
  padding: 16px 8px;
}

.visual-system,
.workflow-visual-panel,
.dashboard-panel-modern {
  min-height: 360px;
  padding: 20px;
  border-radius: 26px;
}

.route-canvas,
.warehouse-canvas,
.commerce-canvas,
.support-canvas,
.mini-map,
.warehouse-stack,
.commerce-stack,
.support-console {
  min-height: 280px;
}

.ops-widget {
  min-height: 88px;
  padding: 14px;
}

.metric-card {
  min-height: 150px;
}

.modern-card,
.usecase-card {
  min-height: 226px;
}

.storage-industry-grid,
.cc-industry-showcase {
  gap: 18px;
}

.storage-industry-card {
  min-height: 140px;
  padding: 22px;
}

.cc-industry-showcase {
  padding: 24px;
}

.cc-industry-panel {
  min-height: 246px;
  padding: 22px;
}

.industry-visual {
  min-height: 154px;
}

.cc-card-grid {
  gap: 20px;
}

.cc-enterprise-card,
.cc-value-card {
  min-height: 238px;
}

.cc-business-ecosystem {
  min-height: 560px;
  margin-top: 28px;
  padding: 30px;
  gap: 20px;
}

.cc-business-hub {
  min-height: 200px;
  padding: 26px;
}

.cc-business-node {
  min-height: 172px;
  padding: 20px;
}

.cc-impact-card {
  min-height: 205px;
}

.workflow-showcase {
  gap: 22px;
}

.workflow-visual-panel,
.dashboard-panel-modern {
  min-height: 360px;
}

.dashboard-header h3 {
  font-size: clamp(23px, 2.6vw, 32px);
}

.dashboard-kpis div {
  min-height: 96px;
  padding: 14px;
}

.dashboard-kpis strong {
  font-size: 25px;
}

.cc-channel-cloud span {
  min-height: 56px;
}

.cc-flow-stage {
  min-height: 52px;
  padding: 10px 12px;
}

.cc-bridge-callout {
  margin-top: 22px;
  padding: 24px;
}

.cc-bridge-callout p {
  font-size: clamp(21px, 2.6vw, 30px);
}

.contact-cards {
  gap: 18px;
}

.contact-card {
  padding: 22px;
}

.panel.contact-form-panel {
  padding: 32px;
}

.map-frame {
  height: 380px;
}

.cta-section {
  padding: 56px 0;
}

.cta-section h2 {
  font-size: clamp(27px, 3vw, 40px);
}

.cta-section p {
  font-size: 16px;
}

@media (max-width: 900px) {
  section {
    padding: 52px 0;
  }

  .topbar-inner {
    padding: 1px 0 3px;
    gap: 0 6px;
  }

  .page-hero {
    padding-top: calc(var(--topbar-h) + 28px);
    padding-bottom: 46px;
  }

  .hero-layout {
    gap: 22px;
  }

  .page-hero h1 {
    font-size: clamp(30px, 8.4vw, 44px);
  }

  .page-hero p {
    font-size: 15.5px;
  }

  .hero-visual {
    min-height: 292px;
  }

  .section-head {
    margin-bottom: 22px;
  }

  .section-title {
    font-size: clamp(25px, 7vw, 36px);
  }

  .section-text {
    font-size: 15.5px;
  }

  .visual-system,
  .workflow-visual-panel,
  .dashboard-panel-modern {
    min-height: 300px;
    padding: 16px;
  }

  .route-canvas,
  .warehouse-canvas,
  .commerce-canvas,
  .support-canvas,
  .mini-map,
  .warehouse-stack,
  .commerce-stack,
  .support-console {
    min-height: 238px;
  }

  .client-grid {
    gap: 16px;
  }

  .client-card {
    min-height: 104px;
  }
}

@media (max-width: 650px) {
  section {
    padding: 46px 0;
  }

  .container {
    width: min(100% - 22px, 1200px);
  }

  .page-hero {
    padding-top: calc(var(--topbar-h) + 22px);
    padding-bottom: 40px;
  }

  .eyebrow {
    padding: 6px 11px;
    font-size: 10px;
  }

  .page-hero h1 {
    font-size: clamp(29px, 8.2vw, 42px);
  }

  .page-hero p {
    font-size: 15px;
  }

  .btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: 13.5px;
  }

  .hero-visual {
    min-height: 250px;
  }

  .visual-card {
    padding: 10px;
  }

  .visual-card strong {
    font-size: 16px;
  }

  .section-head {
    margin-bottom: 20px;
  }

  .section-title {
    font-size: clamp(24px, 7.2vw, 34px);
  }

  .section-text {
    font-size: 15px;
  }

  .panel,
  .info-card,
  .service-card,
  .process-step,
  .stat-card,
  .metric-card,
  .modern-card,
  .usecase-card {
    padding: 16px;
  }

  .visual-system,
  .workflow-visual-panel,
  .dashboard-panel-modern {
    padding: 14px;
    min-height: auto;
  }

  .route-canvas,
  .warehouse-canvas,
  .commerce-canvas,
  .support-canvas,
  .mini-map,
  .warehouse-stack,
  .commerce-stack,
  .support-console {
    min-height: 220px;
  }

  .client-grid {
    gap: 14px;
    padding: 10px 2px 16px;
  }

  .client-card {
    min-height: 96px;
    padding: 9px 5px;
  }

  .storage-industry-card {
    min-height: 120px;
    padding: 18px;
  }

  .cc-industry-showcase,
  .cc-business-ecosystem {
    padding: 16px;
    gap: 14px;
  }

  .cc-industry-panel {
    padding: 16px;
  }

  .industry-visual {
    min-height: 116px;
  }

  .cc-business-hub {
    min-height: 154px;
    padding: 20px;
  }

  .cc-business-node {
    padding: 16px;
  }

  .cc-channel-cloud span {
    min-height: 50px;
  }

  .cc-flow-stage {
    min-height: 48px;
    padding: 9px;
  }

  .cc-bridge-callout {
    padding: 18px;
  }

  .panel.contact-form-panel {
    padding: 22px;
  }

  .contact-card {
    padding: 18px;
  }

  .map-frame {
    height: 260px;
  }

  .cta-section {
    padding: 46px 0;
  }
}

@media (max-width: 480px) {
  section {
    padding: 42px 0;
  }

  .topbar-inner {
    padding: 0 0 1px;
    gap: 0 4px;
  }

  .brand .company-brand-logo {
    width: clamp(124px, 34vw, 136px);
    height: 70px;
  }

  .page-hero {
    padding-top: calc(var(--topbar-h) + 18px);
    padding-bottom: 36px;
  }

  .hero-visual {
    min-height: 236px;
  }

  .client-card {
    min-height: 90px;
  }

  .dashboard-kpis div {
    min-height: 86px;
  }
}

/* Premium CC industry showcase enrichment */
.theme-cc .cc-industries-section .section-head {
  max-width: 780px;
  margin-inline: auto;
}

.theme-cc .cc-industry-showcase {
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--company-main) 20%, transparent), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(201,163,91,.22), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.48));
}

.theme-cc .cc-industry-showcase::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 0;
  border-radius: 28px;
  background:
    linear-gradient(rgba(69,48,140,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69,48,140,.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%);
  pointer-events: none;
  animation: ccIndustryGridDrift 16s linear infinite;
}

.theme-cc .cc-industry-panel {
  --industry-accent: var(--company-main);
  grid-template-columns: minmax(0, .92fr) minmax(170px, .72fr);
  min-height: 270px;
  align-items: stretch;
  background:
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--industry-accent) 22%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.58));
}

.theme-cc .cc-industry-panel::after {
  content: "";
  position: absolute;
  inset: auto 24px 18px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--industry-accent), var(--gold));
  opacity: .62;
  transform-origin: left center;
  transition: transform .32s ease, opacity .32s ease;
}

.theme-cc .cc-industry-panel:hover::after {
  opacity: .95;
  transform: scaleX(.82);
}

.theme-cc .industry-government { --industry-accent: #6955c4; }
.theme-cc .industry-finance { --industry-accent: #45308c; }
.theme-cc .industry-healthcare { --industry-accent: #7a4ec7; }
.theme-cc .industry-telecom { --industry-accent: #5141a6; }
.theme-cc .industry-commerce { --industry-accent: #6a3fc0; }
.theme-cc .industry-logistics { --industry-accent: #3f59b8; }
.theme-cc .industry-retail { --industry-accent: #7d56b8; }

.theme-cc .industry-copy {
  position: relative;
  z-index: 2;
  align-content: center;
  padding-block: 4px 18px;
}

.theme-cc .industry-copy::before {
  content: "";
  position: absolute;
  inset-inline-start: -24px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--industry-accent), var(--gold));
  opacity: .58;
}

html[dir="rtl"] .theme-cc .industry-copy::before {
  inset-inline-start: auto;
  inset-inline-end: -24px;
}

.theme-cc .industry-symbol {
  position: relative;
  color: var(--industry-accent);
  box-shadow:
    0 16px 30px color-mix(in srgb, var(--industry-accent) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.theme-cc .industry-symbol::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--industry-accent) 30%, transparent);
  opacity: .46;
  animation: ccIndustryPulse 3.8s ease-in-out infinite;
  pointer-events: none;
}

.industry-service-indicators {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}

.industry-service-indicators b {
  display: block;
  width: 30px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--industry-accent), color-mix(in srgb, var(--gold) 78%, #fff 22%));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--industry-accent) 18%, transparent);
  opacity: .58;
  animation: ccIndicatorLive 3.4s ease-in-out infinite;
}

.industry-service-indicators b:nth-child(2) {
  width: 18px;
  animation-delay: -.55s;
}

.industry-service-indicators b:nth-child(3) {
  width: 42px;
  animation-delay: -1.1s;
}

html[dir="rtl"] .industry-service-indicators {
  justify-content: flex-end;
}

.theme-cc .industry-visual {
  min-height: 178px;
  isolation: isolate;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--industry-accent) 30%, rgba(255,255,255,.20)), rgba(255,255,255,.10));
}

.theme-cc .industry-visual::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 0;
  border-radius: 20px;
  background:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--industry-accent) 22%, transparent), transparent 58%);
  background-size: 24px 24px, 24px 24px, auto;
  opacity: .7;
  animation: ccSceneDrift 12s linear infinite;
}

.theme-cc .industry-visual > i {
  color: color-mix(in srgb, var(--company-deep) 86%, var(--industry-accent) 14%);
  box-shadow:
    0 18px 36px rgba(0,0,0,.14),
    0 0 0 8px rgba(255,255,255,.10);
}

.theme-cc .industry-visual span {
  background: rgba(255,255,255,.62);
}

.theme-cc .service-desk span:nth-child(1) {
  width: 68%;
  height: 38px;
  top: 24px;
  left: 16%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.74), rgba(255,255,255,.28)),
    repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--industry-accent) 30%, transparent) 22px 24px);
}

.theme-cc .service-desk span:nth-child(2) {
  width: 56%;
  height: 28px;
  left: 22%;
  bottom: 32px;
  border-radius: 14px;
}

.theme-cc .service-desk span:nth-child(3) {
  width: 11px;
  height: 11px;
  right: 25px;
  top: 29px;
}

.theme-cc .secure-ledger span:nth-child(1),
.theme-cc .secure-ledger span:nth-child(2) {
  height: 34px;
  border-radius: 14px;
  left: 18%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,.22)),
    linear-gradient(90deg, var(--industry-accent), transparent 36%);
}

.theme-cc .secure-ledger span:nth-child(1) {
  top: 26px;
  width: 64%;
}

.theme-cc .secure-ledger span:nth-child(2) {
  bottom: 30px;
  width: 54%;
  left: 24%;
}

.theme-cc .secure-ledger span:nth-child(3) {
  right: 24px;
  bottom: 32px;
}

.theme-cc .patient-support span:nth-child(1) {
  width: 70%;
  height: 4px;
  left: 15%;
  top: 42%;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--gold), #fff, var(--gold), transparent);
  clip-path: polygon(0 50%, 18% 50%, 24% 10%, 31% 88%, 39% 50%, 60% 50%, 67% 14%, 76% 82%, 84% 50%, 100% 50%);
  animation: ccPulseLine 3.2s ease-in-out infinite;
}

.theme-cc .patient-support span:nth-child(2) {
  width: 46px;
  height: 46px;
  left: 22px;
  bottom: 24px;
  border-radius: 16px;
}

.theme-cc .patient-support span:nth-child(3) {
  right: 24px;
  top: 24px;
}

.theme-cc .signal-support span:nth-child(1),
.theme-cc .signal-support span:nth-child(2),
.theme-cc .signal-support span:nth-child(3) {
  width: 9px;
  border-radius: 999px 999px 8px 8px;
  bottom: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), color-mix(in srgb, var(--industry-accent) 40%, rgba(255,255,255,.28)));
  animation: ccSignalBars 2.6s ease-in-out infinite;
}

.theme-cc .signal-support span:nth-child(1) {
  height: 46px;
  left: 28px;
}

.theme-cc .signal-support span:nth-child(2) {
  height: 78px;
  left: 48px;
  animation-delay: -.4s;
}

.theme-cc .signal-support span:nth-child(3) {
  height: 104px;
  left: 68px;
  right: auto;
  animation-delay: -.8s;
}

.theme-cc .order-support span:nth-child(1),
.theme-cc .order-support span:nth-child(2) {
  height: 42px;
  left: 20%;
  border-radius: 16px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--industry-accent) 36%, rgba(255,255,255,.5)), rgba(255,255,255,.32)),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(255,255,255,.28) 28px 30px);
}

.theme-cc .order-support span:nth-child(1) {
  top: 24px;
  width: 62%;
}

.theme-cc .order-support span:nth-child(2) {
  bottom: 28px;
  width: 52%;
  left: 28%;
}

.theme-cc .order-support span:nth-child(3) {
  right: 28px;
  top: 32px;
}

.theme-cc .dispatch-support span:nth-child(1) {
  width: 74%;
  height: 4px;
  left: 13%;
  top: 52%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), rgba(255,255,255,.8), var(--industry-accent));
  transform: rotate(-10deg);
  animation: ccRouteDash 3.2s ease-in-out infinite;
}

.theme-cc .dispatch-support span:nth-child(2),
.theme-cc .dispatch-support span:nth-child(3) {
  width: 14px;
  height: 14px;
  bottom: auto;
  background: var(--gold);
}

.theme-cc .dispatch-support span:nth-child(2) {
  left: 22%;
  top: 34%;
}

.theme-cc .dispatch-support span:nth-child(3) {
  right: 24%;
  top: 58%;
}

.theme-cc .retail-support span:nth-child(1) {
  width: 70%;
  height: 28px;
  top: 24px;
  left: 15%;
  border-radius: 14px 14px 8px 8px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 18px, color-mix(in srgb, var(--industry-accent) 34%, rgba(255,255,255,.34)) 18px 36px);
}

.theme-cc .retail-support span:nth-child(2) {
  width: 54%;
  height: 44px;
  left: 23%;
  bottom: 28px;
  border-radius: 16px;
}

.theme-cc .retail-support span:nth-child(3) {
  right: 30px;
  top: 68px;
}

@keyframes ccIndustryGridDrift {
  to { background-position: 34px 34px, 34px 34px; }
}

@keyframes ccIndustryPulse {
  0%, 100% { transform: scale(.9); opacity: .28; }
  50% { transform: scale(1.08); opacity: .72; }
}

@keyframes ccIndicatorLive {
  0%, 100% { opacity: .38; transform: scaleX(.78); }
  50% { opacity: .9; transform: scaleX(1); }
}

@keyframes ccSceneDrift {
  to { background-position: 24px 24px, 24px 24px, center; }
}

@keyframes ccPulseLine {
  0%, 100% { opacity: .48; filter: drop-shadow(0 0 0 transparent); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(201,163,91,.45)); }
}

@keyframes ccSignalBars {
  0%, 100% { transform: scaleY(.82); opacity: .58; }
  50% { transform: scaleY(1); opacity: .95; }
}

@keyframes ccRouteDash {
  0%, 100% { opacity: .55; filter: drop-shadow(0 0 0 transparent); }
  50% { opacity: 1; filter: drop-shadow(0 0 14px rgba(201,163,91,.5)); }
}

@media (max-width: 1120px) {
  .theme-cc .cc-industry-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .theme-cc .industry-visual {
    min-height: 160px;
  }
}

@media (max-width: 650px) {
  .theme-cc .cc-industry-showcase::after {
    inset: 12px;
    background-size: 28px 28px;
  }

  .theme-cc .cc-industry-panel {
    gap: 14px;
    padding: 17px;
  }

  .theme-cc .industry-copy {
    padding-block: 0 10px;
  }

  .theme-cc .industry-copy::before {
    inset-inline-start: -17px;
  }

  html[dir="rtl"] .theme-cc .industry-copy::before {
    inset-inline-end: -17px;
  }

  .theme-cc .industry-symbol {
    width: 48px;
    height: 48px;
    border-radius: 17px;
  }

  .theme-cc .industry-visual {
    min-height: 130px;
  }
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
  html,
  body {
    background-color: #f7f3f0 !important;
    color: #2b1a1f !important;
  }

  section {
    background-color: #f7f3f0;
    color: #2b1a1f;
  }

  .topbar {
    background: var(--topbar-glass-bg) !important;
    color: #2b1a1f;
  }

  .nav {
    background: var(--topbar-nav-bg);
    border-color: var(--topbar-nav-border);
  }
  .nav a { color: color-mix(in srgb, var(--company-deep, #4a2832) 82%, #4a2832 18%); }
  .lang-toggle {
    background: var(--topbar-lang-bg);
    color: var(--company-main, var(--primary));
    border-color: var(--topbar-lang-border);
  }
  .panel,
  .info-card,
  .service-card,
  .process-step,
  .stat-card {
    background-color: #ffffff !important;
    color: #2b1a1f;
  }

  .client-card {
    background: transparent !important;
    color: #2b1a1f;
  }

  .field,
  .textarea {
    background-color: #fcf9f7;
    color: #2f1e24;
  }

  footer {
    background-color: var(--company-main, var(--primary));
    color: rgba(255,255,255,.86);
  }

  .cta-section {
    background-color: var(--company-main, var(--primary));
    color: rgba(255,255,255,.86);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar {
    background:
      linear-gradient(135deg, rgba(255,250,247,.96), rgba(255,250,247,.92)),
      #fffaf7 !important;
  }

  .nav,
  .lang-toggle,
  .hero-visual,
  .visual-card,
  .system-topbar,
  .metric-card,
  .modern-card,
  .usecase-card,
  .contact-card,
  .panel.contact-form-panel,
  .panel.contact-map-panel,
  .storage-service-visual,
  .storage-service-content,
  .premium-service-card,
  .storage-brand-showcase,
  .cc-industry-panel,
  .cc-business-node,
  .cc-business-hub {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .hero-visual,
  .visual-card,
  .system-topbar,
  .storage-service-visual,
  .storage-service-content,
  .premium-service-card,
  .storage-brand-showcase,
  .contact-card,
  .panel.contact-form-panel,
  .panel.contact-map-panel {
    background-color: rgba(255,255,255,.92);
  }

  .hero-visual {
    background-color: rgba(255,255,255,.12);
    color: #ffffff;
  }

  .visual-card,
  .system-topbar {
    background-color: rgba(255,255,255,.92);
    color: #24171e;
  }
}

html.browser-samsung body {
  color-scheme: light;
  background-color: #f7f3f0;
  -webkit-font-smoothing: antialiased;
  opacity: 1 !important;
  visibility: visible !important;
  overflow-x: hidden;
  overflow-y: auto;
}

html.browser-samsung .topbar {
  background:
    linear-gradient(135deg, rgba(255,250,247,.97), rgba(255,250,247,.93)),
    #fffaf7 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.browser-samsung .nav,
html.browser-samsung .lang-toggle {
  background-color: rgba(255,255,255,.88);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.browser-samsung .page-hero::before {
  background:
    linear-gradient(112deg, rgba(6,26,56,.86) 0%, rgba(31,79,154,.72) 48%, rgba(28,42,57,.50) 100%),
    rgba(6,26,56,.62);
}

html.browser-samsung .theme-storage .page-hero::before {
  background:
    linear-gradient(112deg, rgba(16,61,47,.86) 0%, rgba(35,132,90,.72) 48%, rgba(28,42,57,.48) 100%),
    rgba(16,61,47,.62);
}

html.browser-samsung .theme-order .page-hero::before {
  background:
    linear-gradient(112deg, rgba(130,54,14,.86) 0%, rgba(217,103,31,.72) 48%, rgba(28,42,57,.48) 100%),
    rgba(130,54,14,.62);
}

html.browser-samsung .theme-cc .page-hero::before {
  background:
    linear-gradient(112deg, rgba(21,28,66,.86) 0%, rgba(69,48,140,.72) 48%, rgba(28,42,57,.48) 100%),
    rgba(21,28,66,.62);
}

html.browser-samsung .hero-visual,
html.browser-samsung .visual-card,
html.browser-samsung .system-topbar,
html.browser-samsung .metric-card,
html.browser-samsung .modern-card,
html.browser-samsung .usecase-card,
html.browser-samsung .contact-card,
html.browser-samsung .panel.contact-form-panel,
html.browser-samsung .panel.contact-map-panel,
html.browser-samsung .storage-service-visual,
html.browser-samsung .storage-service-content,
html.browser-samsung .premium-service-card,
html.browser-samsung .storage-brand-showcase,
html.browser-samsung .cc-industry-panel,
html.browser-samsung .cc-business-node,
html.browser-samsung .cc-business-hub {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(255,255,255,.90);
}

html.browser-samsung .hero-visual {
  background-color: rgba(255,255,255,.12);
  color: #ffffff;
  box-shadow:
    0 24px 58px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
}

html.browser-samsung .visual-card,
html.browser-samsung .system-topbar {
  background-color: rgba(255,255,255,.92);
  color: #24171e;
  box-shadow: 0 18px 38px rgba(0,0,0,.16);
}

html.browser-samsung .hero-visual,
html.browser-samsung .visual-card,
html.browser-samsung .storage-service-visual,
html.browser-samsung .storage-service-content,
html.browser-samsung .premium-service-card,
html.browser-samsung .storage-brand-showcase,
html.browser-samsung .contact-card,
html.browser-samsung .panel.contact-form-panel,
html.browser-samsung .panel.contact-map-panel {
  box-shadow:
    0 18px 42px rgba(45,31,36,.10),
    inset 0 1px 0 rgba(255,255,255,.70);
}

html.browser-samsung .client-card::before,
html.browser-samsung .client-card::after,
html.browser-samsung .storage-services-experience::before,
html.browser-samsung .theme-storage .storage-industries-section::before,
html.browser-samsung .theme-storage .storage-brands-section::before {
  filter: none !important;
  opacity: .18;
}

html.browser-samsung img,
html.browser-samsung .brand-logo,
html.browser-samsung .client-card img,
html.browser-samsung .company-brand-logo {
  filter: none !important;
}