/* ═══════════════════════════════════════════════════════════
   WAZNET — style.css
   Adapted from Aivent / Designesia framework
   Primary accent : #00ddd0  (WazNet cyan)
   Dark bg         : #101435 (Aivent dark-1)
═══════════════════════════════════════════════════════════ */

/* ── Google Fonts loaded via <link> in index.html ─────────── */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --primary-color        : #00ddd0;
  --primary-color-rgb    : 0, 221, 208;
  --secondary-color      : #00aaa0;
  --secondary-color-rgb  : 0, 170, 160;

  --bg-dark-1            : #0e1218;
  --bg-dark-1-rgb        : 14, 18, 24;
  --bg-dark-2            : #131a22;
  --bg-dark-3            : #1a222c;
  --bg-card              : rgba(255,255,255,.04);
  --bg-card-border       : rgba(255,255,255,.07);

  --body-font            : 'Manrope', Helvetica, Arial, sans-serif;
  --body-font-size       : 16px;
  --body-font-weight     : 500;
  --body-color           : rgba(255,255,255,.65);

  --heading-font         : 'Manrope', Helvetica, Arial, sans-serif;
  --heading-color        : #ffffff;
  --heading-weight       : 800;

  --h1-size              : clamp(44px, 6vw, 80px);
  --h2-size              : clamp(32px, 4.5vw, 52px);
  --h3-size              : 24px;

  --nav-height           : 72px;
  --container            : 1200px;
  --rounded              : 6px;

  --btn-font-size        : 11px;
  --btn-font-weight      : 800;
  --btn-letter-spacing   : 2px;
  --btn-padding          : 14px 32px;
  --btn-radius           : 4px;
  --btn-text-transform   : uppercase;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family  : var(--body-font);
  font-size    : var(--body-font-size);
  font-weight  : var(--body-font-weight);
  color        : var(--body-color);
  background   : var(--bg-dark-1);
  overflow-x   : hidden;
  line-height  : 1.8;
}
img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; transition: color .3s; }
ul  { list-style: none; }

::-webkit-scrollbar              { width: 5px; }
::-webkit-scrollbar-track        { background: var(--bg-dark-1); }
::-webkit-scrollbar-thumb        { background: var(--primary-color); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════
   PRELOADER
═══════════════════════════════════════════════════════════ */
#preloader {
  position   : fixed;
  inset      : 0;
  background : var(--bg-dark-1);
  z-index    : 9999;
  display    : flex;
  align-items    : center;
  justify-content: center;
  transition : opacity .6s ease, visibility .6s ease;
}
#preloader.loaded { opacity: 0; visibility: hidden; }

.pre-dots { display: flex; gap: 10px; }
.pre-dots span {
  width           : 12px;
  height          : 12px;
  border-radius   : 50%;
  background      : var(--primary-color);
  animation       : sk-bounce 1.4s ease-in-out infinite both;
}
.pre-dots span:nth-child(1) { animation-delay: -.32s; }
.pre-dots span:nth-child(2) { animation-delay: -.16s; }

@keyframes sk-bounce {
  0%, 80%, 100% { transform: scale(0); opacity: .3; }
  40%           { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   HEADER / NAVBAR
═══════════════════════════════════════════════════════════ */
#header {
  position   : absolute;
  top        : 0;
  left       : 0;
  width      : 100%;
  height     : var(--nav-height);
  z-index    : 1001;
  transition : background .4s ease, height .4s ease, box-shadow .4s ease;
}
#header.smaller {
  position    : fixed;
  top         : 0;
  /* backdrop-filter moved to ::before — if kept on the element it creates a
     containing block for position:fixed children, collapsing the mobile menu */
  background  : transparent;
  border-bottom: 1px solid rgba(0, 221, 208, .1);
  box-shadow  : 0 2px 30px rgba(0,0,0,.4);
}
#header.smaller::before {
  content              : '';
  position             : absolute;
  inset                : 0;
  background           : rgba(14, 18, 24, .88);
  backdrop-filter      : blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index              : -1;
  pointer-events       : none;
}

.de-flex {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  height         : var(--nav-height);
  padding        : 0 40px;
}

/* Logo */
#logo img { height: 48px; }
#logo .logo-dark { display: none; }

/* Mainmenu */
#mainmenu {
  display    : flex;
  align-items: center;
  gap        : 6px;
  padding    : 0;
  margin     : 0;
}
#mainmenu > li > a {
  display       : inline-block;
  padding       : 6px 14px;
  font-size     : 13px;
  font-weight   : 700;
  letter-spacing: .5px;
  color         : rgba(255,255,255,.75);
  position      : relative;
  transition    : color .25s;
}
#mainmenu > li > a::after {
  content         : '';
  position        : absolute;
  bottom          : 0; left : 14px; right: 14px;
  height          : 1.5px;
  background      : var(--primary-color);
  transform       : scaleX(0);
  transform-origin: right;
  transition      : transform .3s ease;
}
#mainmenu > li > a:hover         { color: var(--primary-color); }
#mainmenu > li > a:hover::after  { transform: scaleX(1); transform-origin: left; }

/* CTA button */
.btn-main {
  display       : inline-flex;
  align-items   : center;
  justify-content: center;
  background    : var(--primary-color);
  color         : #000 !important;
  font-size     : var(--btn-font-size);
  font-weight   : var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  padding       : 11px 26px;
  border-radius : var(--btn-radius);
  border        : 1.5px solid var(--primary-color);
  transition    : background .25s, color .25s, transform .25s, box-shadow .25s;
  position      : relative;
  overflow      : hidden;
}
.btn-main:hover {
  background : transparent;
  color      : var(--primary-color) !important;
  transform  : translateY(-2px);
  box-shadow : 0 8px 28px rgba(var(--primary-color-rgb), .3);
}

.btn-border {
  display       : inline-flex;
  align-items   : center;
  justify-content: center;
  background    : transparent;
  color         : #fff !important;
  font-size     : var(--btn-font-size);
  font-weight   : var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  padding       : 11px 26px;
  border-radius : var(--btn-radius);
  border        : 1.5px solid rgba(255,255,255,.3);
  transition    : border-color .25s, color .25s, transform .25s;
}
.btn-border:hover {
  border-color : var(--primary-color);
  color        : var(--primary-color) !important;
  transform    : translateY(-2px);
}

/* Hamburger (mobile) */
#menu-btn {
  display    : none;
  cursor     : pointer;
  width      : 30px;
  flex-direction: column;
  gap        : 5px;
  z-index    : 1002;
}
#menu-btn span {
  display   : block;
  height    : 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .3s;
}

/* Close button inside mobile menu overlay */
#menu-close {
  display  : none; /* shown only when menu is open on mobile */
  position : absolute;
  top      : 18px;
  right    : 20px;
  width    : 40px;
  height   : 40px;
  background: transparent;
  border   : none;
  cursor   : pointer;
  padding  : 0;
  z-index  : 1101;
}
#menu-close span {
  display      : block;
  position     : absolute;
  width        : 22px;
  height       : 2px;
  background   : #fff;
  border-radius: 2px;
  left         : 50%;
  top          : 50%;
}
#menu-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
#menu-close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }
#mainmenu.open #menu-close   { display: block; }

/* ═══════════════════════════════════════════════════════════
   CONTAINER
═══════════════════════════════════════════════════════════ */
.container {
  max-width: var(--container);
  width    : 100%;
  margin   : 0 auto;
  padding  : 0 40px;
}
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
[class*="col-"] { padding: 0 15px; }

.col-12 { width: 100%; }
.col-6  { width: 50%; }
.col-4  { width: 33.333%; }
.col-3  { width: 25%; }

/* ═══════════════════════════════════════════════════════════
   SECTION BASE
═══════════════════════════════════════════════════════════ */
section { position: relative; overflow: hidden; }

.section-padding { padding: 100px 0; }
.section-padding-sm { padding: 70px 0; }

/* Section tag / label */
.de-label {
  display       : inline-flex;
  align-items   : center;
  gap           : 10px;
  font-size     : 11px;
  font-weight   : 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color         : var(--primary-color);
  margin-bottom : 16px;
}
.de-label::before {
  content    : '';
  width      : 28px;
  height     : 1.5px;
  background : var(--primary-color);
  flex-shrink: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family : var(--heading-font);
  color       : var(--heading-color);
  font-weight : var(--heading-weight);
  line-height : 1.15;
}
h1 { font-size: var(--h1-size); letter-spacing: -2px; }
h2 { font-size: var(--h2-size); letter-spacing: -1.5px; }
h3 { font-size: var(--h3-size); letter-spacing: -.5px; }

.text-primary  { color: var(--primary-color) !important; }
.text-muted    { color: rgba(255,255,255,.45); }

/* Small decorative divider */
.small-border-deco {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 0;
  margin         : 24px 0 40px;
}
.small-border-deco span {
  display   : block;
  height    : 2px;
  width     : 60px;
  background: var(--primary-color);
}
.small-border-deco::before,
.small-border-deco::after {
  content   : '';
  flex      : 1;
  height    : 1px;
  background: rgba(255,255,255,.08);
}

/* Overlay for parallax sections */
.de-overlay {
  position  : absolute;
  inset     : 0;
  background: rgba(var(--bg-dark-1-rgb), .78);
  z-index   : 0;
}
.de-gradient-overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(
    135deg,
    rgba(14,18,24,.96) 0%,
    rgba(14,18,24,.72) 100%
  );
  z-index   : 0;
}
.de-overlay-left {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(90deg, rgba(14,18,24,.98) 40%, rgba(14,18,24,.2) 100%);
  z-index   : 0;
}

.z-1 { position: relative; z-index: 1; }

/* Align helpers */
.text-center { text-align: center; }
.d-flex      { display: flex; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.flex-wrap   { flex-wrap: wrap; }
.gap-3       { gap: 12px; }
.mb-0        { margin-bottom: 0 !important; }
.mt-4        { margin-top: 24px; }
.mt-5        { margin-top: 40px; }

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════════════ */
#section-hero {
  min-height : 100vh;
  display    : flex;
  align-items: center;
  background-position: center;
  background-size    : cover;
}

.hero-grid {
  display              : grid;
  grid-template-columns: 3fr 2fr;
  gap                  : 60px;
  align-items          : center;
  padding              : 120px 0 100px;
}

.hero-logo-col {
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.hero-logo-large {
  width     : 100%;
  max-width : 380px;
  opacity   : 0.9;
  filter    : drop-shadow(0 0 60px rgba(0, 221, 208, 0.2));
}

.hero-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 8px;
  border       : 1px solid rgba(var(--primary-color-rgb), .35);
  border-radius: 3px;
  padding      : 7px 16px;
  font-size    : 11px;
  font-weight  : 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color        : var(--primary-color);
  margin-bottom: 30px;
}
.hero-badge .dot {
  width           : 6px;
  height          : 6px;
  border-radius   : 50%;
  background      : var(--primary-color);
  animation       : pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .4; transform: scale(.7); }
}

.hero-title {
  font-size  : var(--h1-size);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -2.5px;
  margin-bottom: 0;
  color      : #fff;
}
.hero-title .hero-line { display: block; }

/* Text rotator */
.text-rotate-wrap {
  display : inline-block;
  position: relative;
  color   : var(--primary-color);
}
.text-rotate-wrap .text-item {
  display: none;
}
.text-rotate-wrap .text-item:first-child {
  display: inline;
}

.hero-sub {
  font-size    : 17px;
  font-weight  : 500;
  color        : rgba(255,255,255,.6);
  max-width    : 540px;
  margin-top   : 28px;
  margin-bottom: 44px;
  line-height  : 1.85;
}

.hero-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Hero stats bar */
.hero-stats-bar {
  position  : absolute;
  bottom    : 0; left: 0; right: 0;
  z-index   : 1;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(14,18,24,.65);
  backdrop-filter: blur(12px);
}
.stats-inner {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 0;
  padding        : 0 40px;
  max-width      : var(--container);
  margin         : 0 auto;
}
.stat-block {
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-direction : column;
  padding        : 26px 60px;
  border-right   : 1px solid rgba(255,255,255,.07);
  flex           : 1;
  text-align     : center;
}
.stat-block:last-child { border-right: none; }
.stat-block .num {
  font-size    : 40px;
  font-weight  : 900;
  color        : var(--primary-color);
  letter-spacing: -1px;
  line-height  : 1;
}
.stat-block .lbl {
  font-size    : 10px;
  font-weight  : 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color        : rgba(255,255,255,.35);
  margin-top   : 5px;
}

/* Scroll indicator */
.scroll-down {
  position : absolute;
  bottom   : 110px;
  left     : 50%;
  transform: translateX(-50%);
  z-index  : 2;
  display  : flex;
  flex-direction: column;
  align-items: center;
  gap      : 8px;
  color    : rgba(255,255,255,.35);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.scroll-mouse {
  width        : 22px;
  height       : 36px;
  border       : 1.5px solid rgba(255,255,255,.2);
  border-radius: 12px;
  display      : flex;
  justify-content: center;
  padding-top  : 6px;
}
.scroll-mouse::before {
  content      : '';
  width        : 3px;
  height       : 7px;
  background   : var(--primary-color);
  border-radius: 2px;
  animation    : mouse-scroll 2s ease-in-out infinite;
}
@keyframes mouse-scroll {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   MARQUEE / BRAND STRIP
═══════════════════════════════════════════════════════════ */
.marquee-section {
  background   : var(--bg-dark-2);
  border-top   : 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding      : 18px 0;
  overflow     : hidden;
}
.marquee-track {
  display: flex;
  gap    : 60px;
  animation: marquee-scroll 18s linear infinite;
  white-space: nowrap;
  width  : max-content;
}
.marquee-item {
  font-size    : 11px;
  font-weight  : 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color        : rgba(255,255,255,.2);
  display      : flex;
  align-items  : center;
  gap          : 16px;
  flex-shrink  : 0;
}
.marquee-item .dot {
  width     : 4px;
  height    : 4px;
  border-radius: 50%;
  background: var(--primary-color);
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════
   WHY BLE SECTION
═══════════════════════════════════════════════════════════ */
#section-ble {
  background: var(--bg-dark-1);
}
.ble-image-wrap {
  position     : relative;
  border-radius: var(--rounded);
  overflow     : hidden;
}
.ble-image-wrap img {
  width       : 100%;
  aspect-ratio: 4 / 3;
  object-fit  : cover;
  border-radius: var(--rounded);
  display     : block;
}
.ble-image-wrap .img-frame {
  position     : absolute;
  inset        : 0;
  border       : 1px solid rgba(var(--primary-color-rgb), .3);
  border-radius: var(--rounded);
  pointer-events: none;
}
.ble-image-wrap .img-tag {
  position     : absolute;
  bottom       : 24px;
  left         : 24px;
  background   : rgba(14,18,24,.88);
  backdrop-filter: blur(10px);
  border       : 1px solid rgba(var(--primary-color-rgb), .3);
  border-radius: 4px;
  padding      : 12px 18px;
  font-size    : 12px;
  font-weight  : 800;
  letter-spacing: 1px;
  color        : var(--primary-color);
}
/* Glowing corner accents */
.ble-image-wrap::before,
.ble-image-wrap::after {
  content    : '';
  position   : absolute;
  width      : 24px;
  height     : 24px;
  z-index    : 2;
}
.ble-image-wrap::before {
  top    : -1px; left: -1px;
  border-top  : 2px solid var(--primary-color);
  border-left : 2px solid var(--primary-color);
}
.ble-image-wrap::after {
  bottom  : -1px; right: -1px;
  border-bottom: 2px solid var(--primary-color);
  border-right : 2px solid var(--primary-color);
}

.ble-text { padding-left: 50px; }
.ble-text p {
  font-size  : 15px;
  line-height: 1.9;
  color      : rgba(255,255,255,.6);
  margin-bottom: 18px;
}
.ble-text h2 { margin-bottom: 22px; }

/* ═══════════════════════════════════════════════════════════
   ADVANTAGES (parallax bg)
═══════════════════════════════════════════════════════════ */
#section-advantages .section-head { margin-bottom: 60px; }

/* Feature box style */
.feature-box-adv {
  background   : var(--bg-card);
  border       : 1px solid var(--bg-card-border);
  border-radius: var(--rounded);
  padding      : 36px 28px;
  position     : relative;
  overflow     : hidden;
  transition   : border-color .35s, transform .35s, box-shadow .35s;
  height       : 100%;
}
.feature-box-adv::before {
  content         : '';
  position        : absolute;
  top             : 0; left: 0; right: 0;
  height          : 2px;
  background      : var(--primary-color);
  transform       : scaleX(0);
  transform-origin: left;
  transition      : transform .4s ease;
}
.feature-box-adv:hover {
  border-color: rgba(var(--primary-color-rgb), .35);
  transform   : translateY(-8px);
  box-shadow  : 0 24px 60px rgba(0,0,0,.45),
                0 0 0 1px rgba(var(--primary-color-rgb), .18);
}
.feature-box-adv:hover::before { transform: scaleX(1); }

.fb-icon {
  width        : 56px;
  height       : 56px;
  border       : 1px solid rgba(var(--primary-color-rgb), .3);
  border-radius: 5px;
  background   : rgba(var(--primary-color-rgb), .08);
  display      : flex;
  align-items  : center;
  justify-content: center;
  margin-bottom: 24px;
  transition   : background .3s, border-color .3s;
}
.feature-box-adv:hover .fb-icon {
  background  : rgba(var(--primary-color-rgb), .18);
  border-color: rgba(var(--primary-color-rgb), .5);
}
.fb-icon svg { width: 26px; height: 26px; fill: var(--primary-color); }

.feature-box-adv h3 {
  font-size    : 17px;
  font-weight  : 800;
  margin-bottom: 12px;
  letter-spacing: -.3px;
}
.feature-box-adv p {
  font-size  : 14px;
  line-height: 1.8;
  color      : rgba(255,255,255,.55);
  margin     : 0;
}

/* ═══════════════════════════════════════════════════════════
   USE CASES (dark bg)
═══════════════════════════════════════════════════════════ */
#section-usages {
  background: var(--bg-dark-2);
}

.usage-card {
  background   : var(--bg-card);
  border       : 1px solid var(--bg-card-border);
  border-radius: var(--rounded);
  padding      : 32px 26px;
  display      : flex;
  gap          : 20px;
  align-items  : flex-start;
  transition   : border-color .3s, transform .3s, background .3s;
  height       : 100%;
}
.usage-card:hover {
  border-color: rgba(var(--primary-color-rgb), .3);
  transform   : translateY(-5px);
  background  : rgba(var(--primary-color-rgb), .04);
}

.usage-num {
  font-size    : 11px;
  font-weight  : 900;
  letter-spacing: 1px;
  color        : var(--primary-color);
  background   : rgba(var(--primary-color-rgb), .1);
  border       : 1px solid rgba(var(--primary-color-rgb), .25);
  border-radius: 3px;
  padding      : 5px 10px;
  flex-shrink  : 0;
  margin-top   : 2px;
}
.usage-card h4 {
  font-size    : 15px;
  font-weight  : 800;
  margin-bottom: 8px;
  letter-spacing: -.2px;
}
.usage-card p {
  font-size  : 13.5px;
  color      : rgba(255,255,255,.52);
  line-height: 1.75;
  margin     : 0;
}

/* ═══════════════════════════════════════════════════════════
   INDUSTRIES (parallax bg)
═══════════════════════════════════════════════════════════ */
#section-industries {
  background: var(--bg-dark-1);
}

.industry-item {
  display      : flex;
  align-items  : center;
  gap          : 18px;
  padding      : 20px 24px;
  background   : var(--bg-card);
  border       : 1px solid var(--bg-card-border);
  border-radius: 5px;
  margin-bottom: 14px;
  transition   : border-color .3s, transform .3s, background .3s;
  cursor       : default;
}
.industry-item:last-child { margin-bottom: 0; }
.industry-item:hover {
  border-color: rgba(var(--primary-color-rgb), .35);
  transform   : translateX(8px);
  background  : rgba(var(--primary-color-rgb), .04);
}
.ind-icon-wrap {
  width        : 46px;
  height       : 46px;
  background   : rgba(var(--primary-color-rgb), .08);
  border       : 1px solid rgba(var(--primary-color-rgb), .25);
  border-radius: 4px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  flex-shrink  : 0;
  transition   : background .3s;
}
.industry-item:hover .ind-icon-wrap { background: rgba(var(--primary-color-rgb), .18); }
.ind-icon-wrap svg { width: 20px; height: 20px; fill: var(--primary-color); }

.ind-text h4 {
  font-size    : 14px;
  font-weight  : 800;
  margin-bottom: 3px;
}
.ind-text p {
  font-size: 12.5px;
  color    : rgba(255,255,255,.4);
  margin   : 0;
}

/* Industries image side */
.ind-img-wrap {
  position     : relative;
  border-radius: var(--rounded);
  overflow     : hidden;
}
.ind-img-wrap img {
  width       : 100%;
  height      : 100%;
  object-fit  : cover;
  min-height  : 460px;
  border-radius: var(--rounded);
  display     : block;
}
.ind-img-wrap::before {
  content  : '';
  position : absolute;
  inset    : 0;
  border   : 1px solid rgba(var(--primary-color-rgb), .25);
  border-radius: var(--rounded);
  z-index  : 1;
  pointer-events: none;
}
.ind-img-caption {
  position  : absolute;
  bottom    : 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(14,18,24,.92) 0%, transparent 100%);
  padding   : 40px 28px 28px;
  z-index   : 2;
}
.ind-img-caption h4 {
  font-size    : 20px;
  margin-bottom: 8px;
}
.ind-img-caption p {
  font-size: 13px;
  color    : rgba(255,255,255,.6);
  margin   : 0;
}

/* ═══════════════════════════════════════════════════════════
   CTA SECTION (parallax)
═══════════════════════════════════════════════════════════ */
#section-cta {
  text-align: center;
}
#section-cta h2 {
  font-size    : clamp(36px, 5vw, 60px);
  font-weight  : 900;
  letter-spacing: -2px;
  margin-bottom: 20px;
}
#section-cta p {
  font-size    : 16px;
  color        : rgba(255,255,255,.6);
  max-width    : 520px;
  margin       : 0 auto 40px;
  line-height  : 1.8;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
#footer {
  background : #080b0f;
  border-top : 1px solid rgba(255,255,255,.05);
}
.footer-top {
  display  : grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap      : 60px;
  padding  : 70px 0 50px;
}
.footer-brand img { height: 90px; margin-bottom: 20px; }
.footer-brand p {
  font-size  : 13.5px;
  color      : rgba(255,255,255,.38);
  line-height: 1.8;
  max-width  : 260px;
}
.footer-col h5 {
  font-size    : 11px;
  font-weight  : 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color        : rgba(255,255,255,.6);
  margin-bottom: 22px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-link-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  align-items: start;
}
.footer-link-columns ul {
  min-width: 0;
}
.footer-col ul li a {
  font-size  : 13.5px;
  color      : rgba(255,255,255,.38);
  transition : color .2s;
}
.footer-col ul li a:hover { color: var(--primary-color); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.05);
  padding   : 24px 0;
  display   : flex;
  align-items: center;
  justify-content: space-between;
}
.footer-bottom p {
  font-size: 12px;
  color    : rgba(255,255,255,.25);
}
.footer-bottom .credit { font-size: 12px; color: rgba(255,255,255,.25); }
.footer-bottom .credit span { color: var(--primary-color); }

/* ═══════════════════════════════════════════════════════════
   WOW.js / ANIMATE.CSS OVERRIDES
   (ensures dark-scheme text stays white)
═══════════════════════════════════════════════════════════ */
.animated { animation-duration: .85s; animation-fill-mode: both; }

/* ═══════════════════════════════════════════════════════════
   JARALLAX
═══════════════════════════════════════════════════════════ */
.jarallax {
  position : relative;
  z-index  : 0;
  background-attachment: fixed; /* fallback */
}
.jarallax-img {
  position  : absolute;
  object-fit: cover;
  top       : 0; left: 0;
  width     : 100%; height: 100%;
  z-index   : -1;
}

/* ═══════════════════════════════════════════════════════════
   CIRCUIT / PARTICLE CANVAS (background layer)
═══════════════════════════════════════════════════════════ */
#bg-canvas {
  position  : fixed;
  inset     : 0;
  z-index   : 0;
  pointer-events: none;
  opacity   : .12;
}

/* ═══════════════════════════════════════════════════════════
   SMART LIFT INTRO SECTION
═══════════════════════════════════════════════════════════ */
#section-lift {
  background: var(--bg-dark-2);
}
.lift-intro-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 70px;
  align-items          : center;
}
.lift-intro-text .section-title { margin-bottom: 20px; }
.lift-intro-text p {
  font-size  : 15px;
  color      : rgba(255,255,255,.6);
  line-height: 1.9;
  margin-bottom: 16px;
}
.lift-tag {
  display      : inline-flex;
  align-items  : center;
  gap          : 8px;
  background   : rgba(var(--primary-color-rgb),.1);
  border       : 1px solid rgba(var(--primary-color-rgb),.3);
  border-radius: 3px;
  padding      : 8px 16px;
  font-size    : 11px;
  font-weight  : 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color        : var(--primary-color);
  margin-bottom: 28px;
}
.lift-img-wrap {
  position     : relative;
  border-radius: var(--rounded);
  overflow     : hidden;
}
.lift-img-wrap img {
  width        : 100%;
  aspect-ratio : 4/3;
  object-fit   : cover;
  display      : block;
  border-radius: var(--rounded);
}
.lift-img-wrap::before,
.lift-img-wrap::after {
  content  : '';
  position : absolute;
  width    : 26px; height: 26px;
  z-index  : 2;
}
.lift-img-wrap::before { top:-1px; left:-1px; border-top:2px solid var(--primary-color); border-left:2px solid var(--primary-color); }
.lift-img-wrap::after  { bottom:-1px; right:-1px; border-bottom:2px solid var(--primary-color); border-right:2px solid var(--primary-color); }

/* ═══════════════════════════════════════════════════════════
   HEALTH HAZARD SECTION (dark + stat callouts)
═══════════════════════════════════════════════════════════ */
#section-health {
  background: var(--bg-dark-1);
}
.health-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 70px;
  align-items          : center;
}
.health-stat-block {
  background   : var(--bg-card);
  border       : 1px solid var(--bg-card-border);
  border-radius: var(--rounded);
  padding      : 36px;
  text-align   : center;
  margin-bottom: 20px;
  position     : relative;
  overflow     : hidden;
  transition   : border-color .3s;
}
.health-stat-block:hover { border-color: rgba(var(--primary-color-rgb),.35); }
.health-stat-block::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: radial-gradient(ellipse at center, rgba(var(--primary-color-rgb),.06) 0%, transparent 70%);
}
.health-stat-num {
  font-size    : clamp(52px,7vw,88px);
  font-weight  : 900;
  color        : var(--primary-color);
  line-height  : 1;
  letter-spacing: -3px;
  display      : block;
}
.health-stat-label {
  font-size    : 13px;
  font-weight  : 700;
  color        : rgba(255,255,255,.6);
  margin-top   : 8px;
  line-height  : 1.6;
}
.health-source {
  font-size    : 10px;
  font-weight  : 600;
  letter-spacing: 1px;
  color        : rgba(255,255,255,.3);
  margin-top   : 10px;
  display      : block;
}
.health-text p {
  font-size    : 15px;
  color        : rgba(255,255,255,.6);
  line-height  : 1.9;
  margin-bottom: 18px;
}
.health-text h2 { margin-bottom: 20px; }
.health-pills {
  display  : flex;
  flex-wrap: wrap;
  gap      : 10px;
  margin-top: 28px;
}
.health-pill {
  display      : inline-flex;
  align-items  : center;
  gap          : 7px;
  background   : rgba(var(--primary-color-rgb),.08);
  border       : 1px solid rgba(var(--primary-color-rgb),.2);
  border-radius: 100px;
  padding      : 7px 16px;
  font-size    : 12px;
  font-weight  : 700;
  color        : var(--primary-color);
}
.health-pill::before {
  content      : '';
  width        : 5px; height: 5px;
  border-radius: 50%;
  background   : var(--primary-color);
  flex-shrink  : 0;
}

/* ═══════════════════════════════════════════════════════════
   USE CASES TABS (Corporate / Residential / Hospital)
═══════════════════════════════════════════════════════════ */
#section-usecases {
  background: var(--bg-dark-2);
  cursor: grab;
  user-select: none;
}
#section-usecases:active { cursor: grabbing; }
.usecase-tabs {
  display        : flex;
  gap            : 0;
  margin         : 0 auto 50px;
  background     : rgba(255,255,255,.04);
  border         : 1px solid rgba(255,255,255,.06);
  border-radius  : var(--rounded);
  padding        : 5px;
  max-width      : 420px;
}
.usecase-tab {
  flex        : 0 0 46px;
  min-width   : 0;
  overflow    : hidden;
  display     : flex;
  align-items : center;
  justify-content: center;
  padding     : 13px 14px;
  border-radius: 4px;
  cursor      : pointer;
  position    : relative;
  transition  : flex-basis .35s ease, background .25s;
}
.usecase-tab.active::after {
  content      : '';
  position     : absolute;
  bottom       : 0; left: 0; right: 0;
  height       : 3px;
  background   : rgba(0,0,0,.22);
  border-radius: 0 0 4px 4px;
  width        : 0;
  animation    : ucTabProgress 4s linear forwards;
}
@keyframes ucTabProgress {
  to { width: 100%; }
}
.usecase-tab.active {
  flex       : 1 1 0;
  background : var(--primary-color);
  justify-content: flex-start;
  padding-left: 18px;
}

/* Tab separator */
.tab-sep {
  flex-shrink : 0;
  width       : 1px;
  height      : 20px;
  align-self  : center;
  background  : var(--primary-color);
  opacity     : 0.35;
}

/* Number badge */
.tab-num {
  font-size     : 13px;
  font-weight   : 900;
  color         : var(--primary-color);
  flex-shrink   : 0;
  transition    : color .25s;
  letter-spacing: 0;
}
.usecase-tab.active .tab-num {
  color: #000;
}

/* Label — slides in when active */
.tab-label {
  max-width     : 0;
  overflow      : hidden;
  white-space   : nowrap;
  opacity       : 0;
  font-size     : 11px;
  font-weight   : 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color         : #000;
  margin-left   : 9px;
  transition    : max-width .35s ease, opacity .2s ease .1s;
}
.usecase-tab.active .tab-label {
  max-width : 240px;
  opacity   : 1;
}

/* RTL: label margin flips */
[dir="rtl"] .tab-label { margin-left: 0; margin-right: 9px; }
[dir="rtl"] .usecase-tab.active { justify-content: flex-end; padding-left: 14px; padding-right: 18px; }
.usecase-pane { display: none; }
.usecase-pane.active {
  display   : grid;
  grid-template-columns: 1fr 1fr;
  gap       : 60px;
  align-items: center;
  animation : ucSlideRight .42s cubic-bezier(.25,.46,.45,.94) both;
}
.usecase-pane.active.uc-from-left { animation-name: ucSlideLeft; }

@keyframes ucSlideRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes ucSlideLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0);     }
}

.usecase-pane-text h3 {
  font-size    : clamp(24px, 3vw, 36px);
  font-weight  : 900;
  margin-bottom: 18px;
  letter-spacing: -1px;
}
.usecase-pane-text p {
  font-size  : 15px;
  color      : rgba(255,255,255,.6);
  line-height: 1.9;
  margin-bottom: 16px;
}
.usecase-bullet {
  display      : flex;
  align-items  : flex-start;
  gap          : 12px;
  margin-bottom: 13px;
}
.usecase-bullet::before {
  content      : '';
  width        : 6px; height: 6px;
  border-radius: 50%;
  background   : var(--primary-color);
  flex-shrink  : 0;
  margin-top   : 8px;
}
.usecase-bullet p { margin: 0; font-size: 14px; color: rgba(255,255,255,.6); }

.usecase-pane-img {
  position     : relative;
  border-radius: var(--rounded);
  overflow     : hidden;
}
.usecase-pane-img img {
  width        : 100%;
  aspect-ratio : 3/4;
  object-fit   : cover;
  border-radius: var(--rounded);
  display      : block;
}
.usecase-pane-img::before {
  content      : '';
  position     : absolute;
  inset        : 0;
  border       : 1px solid rgba(var(--primary-color-rgb),.25);
  border-radius: var(--rounded);
  z-index      : 1;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   PLATFORM CAPABILITIES  (#section-capabilities)
═══════════════════════════════════════════════════════════ */
#section-capabilities {
  background: var(--bg-dark-2);
}
.capabilities-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 24px;
  margin-top           : 60px;
}
.cap-card {
  background   : var(--bg-card);
  border       : 1px solid var(--bg-card-border);
  border-radius: var(--rounded);
  padding      : 34px 28px;
  position     : relative;
  overflow     : hidden;
  transition   : border-color .3s, transform .3s;
}
.cap-card::before {
  content   : '';
  position  : absolute;
  top: 0; left: 0; right: 0;
  height    : 2px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  opacity   : 0;
  transition: opacity .4s;
}
.cap-card:hover { border-color: rgba(var(--primary-color-rgb),.3); transform: translateY(-6px); }
.cap-card:hover::before { opacity: 1; }
.cap-icon {
  width        : 52px; height: 52px;
  background   : rgba(var(--primary-color-rgb),.1);
  border       : 1px solid rgba(var(--primary-color-rgb),.25);
  border-radius: 12px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  margin-bottom: 20px;
}
.cap-icon svg { width: 24px; height: 24px; fill: var(--primary-color); }
.cap-card h3 {
  font-size    : 16px;
  font-weight  : 800;
  margin-bottom: 12px;
  color        : #fff;
}
.cap-card p {
  font-size  : 13px;
  color      : rgba(255,255,255,.55);
  line-height: 1.8;
  margin     : 0;
}

/* ═══════════════════════════════════════════════════════════
   INDUSTRIES  (#section-industries)
═══════════════════════════════════════════════════════════ */
#section-industries {
  position: relative;
}
#section-industries .container {
  position: relative;
  z-index : 1;
}
.industries-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 24px;
  margin-top           : 60px;
}
.ind-feature-card {
  background   : rgba(14,18,24,.75);
  border       : 1px solid rgba(var(--primary-color-rgb),.15);
  border-radius: var(--rounded);
  padding      : 30px 26px;
  backdrop-filter: blur(6px);
  transition   : border-color .3s, background .3s, transform .3s;
  text-align   : left;
}
.ind-feature-card:hover {
  border-color: rgba(var(--primary-color-rgb),.4);
  background  : rgba(0,221,208,.06);
  transform   : translateY(-5px);
}
.ind-feature-icon {
  width        : 48px; height: 48px;
  background   : rgba(var(--primary-color-rgb),.12);
  border       : 1px solid rgba(var(--primary-color-rgb),.25);
  border-radius: 10px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  margin-bottom: 18px;
}
.ind-feature-icon svg { width: 22px; height: 22px; fill: var(--primary-color); }
.ind-feature-card h4 {
  font-size    : 15px;
  font-weight  : 800;
  margin-bottom: 8px;
  color        : #fff;
}
.ind-feature-card p {
  font-size  : 13px;
  color      : rgba(255,255,255,.5);
  line-height: 1.75;
  margin     : 0;
}

/* ═══════════════════════════════════════════════════════════
   WHAT SETS US APART
═══════════════════════════════════════════════════════════ */
#section-apart {
  background: var(--bg-dark-1);
}
.apart-grid {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 24px;
  margin-top           : 60px;
}
.apart-card {
  background   : var(--bg-card);
  border       : 1px solid var(--bg-card-border);
  border-radius: var(--rounded);
  padding      : 34px 26px;
  text-align   : center;
  transition   : border-color .3s, transform .3s;
  position     : relative;
  overflow     : hidden;
}
.apart-card::after {
  content   : '';
  position  : absolute;
  bottom    : 0; left: 0; right: 0;
  height    : 2px;
  background: var(--primary-color);
  transform : scaleX(0);
  transform-origin: center;
  transition: transform .4s;
}
.apart-card:hover { border-color: rgba(var(--primary-color-rgb),.3); transform: translateY(-6px); }
.apart-card:hover::after { transform: scaleX(1); }
.apart-icon {
  width        : 58px; height: 58px;
  background   : rgba(var(--primary-color-rgb),.1);
  border       : 1px solid rgba(var(--primary-color-rgb),.25);
  border-radius: 50%;
  display      : flex;
  align-items  : center;
  justify-content: center;
  margin       : 0 auto 22px;
}
.apart-icon img {
  width      : 90%;
  height     : 90%;
  object-fit : contain;
  display    : block;
}
.apart-icon svg { width: 26px; height: 26px; fill: var(--primary-color); }
.apart-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.apart-card p  { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.75; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   SUCCESS STORY SECTION
═══════════════════════════════════════════════════════════ */
#section-success {
  background: var(--bg-dark-2);
}
.success-inner {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 70px;
  align-items          : center;
}
.success-text .section-title { margin-bottom: 18px; }
.success-text p {
  font-size  : 15px;
  color      : rgba(255,255,255,.6);
  line-height: 1.9;
  margin-bottom: 18px;
}
.success-location {
  display      : inline-flex;
  align-items  : center;
  gap          : 8px;
  background   : rgba(var(--primary-color-rgb),.08);
  border       : 1px solid rgba(var(--primary-color-rgb),.2);
  border-radius: 4px;
  padding      : 10px 18px;
  font-size    : 13px;
  font-weight  : 700;
  color        : var(--primary-color);
  margin-bottom: 28px;
}
.success-location svg { width:16px;height:16px;fill:var(--primary-color);flex-shrink:0; }
.success-single-img {
  overflow     : hidden;
  border-radius: 8px;
  border       : 1px solid rgba(var(--primary-color-rgb),.15);
  transition   : border-color .3s;
}
.success-single-img img {
  width        : 100%;
  aspect-ratio : 4/3;
  object-fit   : cover;
  display      : block;
  transition   : transform .3s;
}
.success-single-img:hover { border-color: rgba(var(--primary-color-rgb),.4); }
.success-single-img:hover img { transform: scale(1.03); }
.success-img-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 14px;
}
.success-img-grid img {
  width        : 100%;
  aspect-ratio : 1;
  object-fit   : cover;
  border-radius: 5px;
  border       : 1px solid rgba(var(--primary-color-rgb),.15);
  transition   : border-color .3s, transform .3s;
}
.success-img-grid img:hover { border-color: rgba(var(--primary-color-rgb),.4); transform: scale(1.02); }
.success-img-grid img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16/7;
}

/* ═══════════════════════════════════════════════════════════
   GRID HELPERS
═══════════════════════════════════════════════════════════ */
.g-4 { --gutter: 28px; }
.row.g-4 { margin: calc(var(--gutter) / -2); }
.row.g-4 > [class*="col-"] { padding: calc(var(--gutter) / 2); }

/* Header CTA — same height as lang-switcher */
header .header-cta {
  padding       : 5px 16px;
  font-size     : 11px;
  letter-spacing: 1px;
  gap           : 0;
}
.header-cta-icon { display: none; }

/* ═══════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
═══════════════════════════════════════════════════════════ */
.lang-switcher {
  display      : flex;
  align-items  : center;
  gap          : 2px;
  background   : rgba(255,255,255,.05);
  border       : 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding      : 4px 6px;
}
.lang-opt {
  background   : none;
  border       : none;
  color        : rgba(255,255,255,.45);
  font-family  : 'Cairo', 'Manrope', sans-serif;
  font-size    : 11px;
  font-weight  : 700;
  cursor       : pointer;
  padding      : 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  transition   : color .2s, background .2s;
  line-height  : 1;
}
.lang-opt.active {
  color      : var(--primary-color);
  background : rgba(var(--primary-color-rgb), .12);
}
.lang-opt:hover:not(.active) {
  color: rgba(255,255,255,.8);
}
.lang-sep {
  color    : rgba(255,255,255,.18);
  font-size: 11px;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   ARABIC / RTL OVERRIDES
   Applied when <html dir="rtl"> is set by i18n.js
═══════════════════════════════════════════════════════════ */

/* Arabic font stack */
[dir="rtl"] body {
  font-family: 'Cairo', Helvetica, Arial, sans-serif;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5 {
  font-family  : 'Cairo', Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

/* Arabic text needs slightly more line-height */
[dir="rtl"] p,
[dir="rtl"] li {
  line-height: 2;
}

/* Hero gradient overlay — flip to right in RTL */
[dir="rtl"] .de-overlay-left {
  background: linear-gradient(to left, rgba(14,18,24,.85) 40%, transparent 100%);
}

/* Hero content — right-align in RTL.
   No align-items override needed: flex-start automatically maps to
   the right edge in RTL (cross-axis start flips with writing direction). */
[dir="rtl"] .hero-content {
  text-align: right;
}

/* Section decorative border — start = right in RTL */
[dir="rtl"] .small-border-deco {
  justify-content: flex-end;
}

/* de-label chip — align right */
[dir="rtl"] .de-label {
  justify-content: flex-end;
}

[dir="rtl"] .why-band-intro,
[dir="rtl"] .why-point-body {
  text-align: right;
}

[dir="rtl"] .why-point {
  flex-direction: row-reverse;
}

[dir="rtl"] .why-point-num {
  border-right: 0;
  border-left: 1px solid rgba(255,255,255,.08);
}

[dir="rtl"] .about-meta {
  letter-spacing: 0;
}

[dir="rtl"] .legal-page-header,
[dir="rtl"] .legal-doc-top {
  text-align: right;
}

[dir="rtl"] .legal-doc-chips {
  justify-content: flex-start;
}

[dir="rtl"] .team-intro,
[dir="rtl"] .team-member {
  text-align: right;
}

[dir="rtl"] .team-member::before {
  inset: 0 0 0 auto;
}

/* Platform image tag — swap corner */
[dir="rtl"] .img-tag {
  right: auto;
  left : -12px;
}

/* Lift button margin flip */
[dir="rtl"] .mt-5 .btn-main {
  margin-right: 0;
  margin-left : 12px;
}

/* Use-case bullet — swap border side */
[dir="rtl"] .usecase-bullet {
  border-left : none;
  border-right: 2px solid var(--primary-color);
  padding-left : 0;
  padding-right: 14px;
}

/* Stats bar — keep numbers LTR (digits + suffix) */
[dir="rtl"] .stat-block .num {
  direction: ltr;
}

/* Health stat number — keep LTR for "40×" and "#1" */
[dir="rtl"] .health-stat-num {
  direction: ltr;
}

/* Footer bottom — column layout text centre on small */
[dir="rtl"] .footer-bottom {
  flex-direction: row-reverse;
}

/* Cap card number — keep LTR */
[dir="rtl"] .cap-num {
  direction: ltr;
}

/* ═══════════════════════════════════════════════════════════
   SCROLL PROGRESS INDICATOR
═══════════════════════════════════════════════════════════ */
#scroll-indicator {
  position       : fixed;
  left           : 22px;
  top            : 50%;
  transform      : translateY(-50%);
  z-index        : 200;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 14px;
  pointer-events : none;
}

/* Up-hint button — hidden until user scrolls down */
.si-up-btn {
  all            : unset;
  cursor         : pointer;
  pointer-events : all;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 8px;
  opacity        : 0;
  visibility     : hidden;
  transform      : translateY(10px);
  transition     : opacity .4s ease, visibility .4s ease, transform .4s ease;
}
.si-up-btn.visible {
  opacity    : 1;
  visibility : visible;
  transform  : translateY(0);
}

/* Three upward chevrons */
.si-arrows {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 4px;
}
.si-arrows span {
  display      : block;
  width        : 8px;
  height       : 8px;
  border-top   : 2px solid var(--primary-color);
  border-right : 2px solid var(--primary-color);
  transform    : rotate(-45deg);
  opacity      : 0;
}
/* When button is visible, animate chevrons bottom → middle → top */
.si-up-btn.visible .si-arrows span:nth-child(3) { animation: chevronUp 1.6s ease-in-out infinite 0s; }
.si-up-btn.visible .si-arrows span:nth-child(2) { animation: chevronUp 1.6s ease-in-out infinite .22s; }
.si-up-btn.visible .si-arrows span:nth-child(1) { animation: chevronUp 1.6s ease-in-out infinite .44s; }

@keyframes chevronUp {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}

/* "Scroll Up" label — reads bottom-to-top */
.si-text {
  font-size    : 9px;
  font-weight  : 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color        : rgba(255,255,255,.35);
  writing-mode : vertical-rl;
  transform    : rotate(180deg);
  white-space  : nowrap;
}

/* Track + thumb */
.si-track {
  width        : 2px;
  height       : 110px;
  background   : rgba(255,255,255,.1);
  border-radius: 2px;
  position     : relative;
  pointer-events: none;
}
.si-thumb {
  position     : absolute;
  left         : -1px;
  top          : 0;
  width        : 4px;
  height       : 30%;
  background   : var(--primary-color);
  border-radius: 2px;
  transition   : top .12s linear;
  box-shadow   : 0 0 8px rgba(0,221,208,.5);
}

/* RTL: keep on left side (it's a UI widget, not content) */

/* Scroll-to-top FAB — mobile only */
#scroll-top-fab {
  display        : none; /* shown only in mobile media query */
  position       : fixed;
  bottom         : 24px;
  right          : 24px;
  width          : 48px;
  height         : 48px;
  border-radius  : 50%;
  border         : none;
  background     : var(--primary-color);
  color          : #0e1218;
  cursor         : pointer;
  z-index        : 200;
  align-items    : center;
  justify-content: center;
  opacity        : 0;
  visibility     : hidden;
  transform      : translateY(14px);
  transition     : opacity .35s ease, visibility .35s ease, transform .35s ease;
  box-shadow     : 0 4px 20px rgba(0,221,208,.4);
}
#scroll-top-fab.visible {
  opacity   : 1;
  visibility: visible;
  transform : translateY(0);
}
#scroll-top-fab:hover {
  background: #fff;
}

/* Hide indicator, show FAB on mobile */
@media (max-width: 768px) {
  #scroll-indicator { display: none; }
  #scroll-top-fab   { display: flex; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .de-flex { padding: 0 24px; }
  .container { padding: 0 24px; }
  .ble-text { padding-left: 0; margin-top: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .col-6 { width: 100%; }
  .col-4 { width: 50%; }
  .col-3 { width: 50%; }
  .lift-intro-grid, .health-grid, .success-inner { grid-template-columns: 1fr; gap: 40px; }
  .success-single-img img { aspect-ratio: 16/9; }
  .usecase-pane.active { grid-template-columns: 1fr; }
  .apart-grid { grid-template-columns: repeat(2,1fr); }
  .usecase-tabs { flex-wrap: wrap; }
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-grid   { grid-template-columns: repeat(2, 1fr); }
  /* Stats bar — scale down on tablets */
  .stat-block         { padding: 18px 30px; }
  .stat-block .num    { font-size: 26px; }
  .stat-block .lbl    { font-size: 9px; letter-spacing: 1.5px; }
  /* Scroll-down indicator — sit above the shorter bar */
  .scroll-down        { bottom: 88px; }
}
@media (max-width: 768px) {
  :root { --nav-height: 60px; }
  #mainmenu { display: none; }
  #mainmenu.open {
    display    : flex;
    flex-direction: column;
    position   : fixed;
    inset      : 0;
    background : rgba(14,18,24,.97);
    align-items: center;
    justify-content: center;
    gap        : 16px;
    z-index    : 1100;
    padding-top: var(--nav-height);
  }
  #mainmenu.open > li         { width: 100%; text-align: center; }
  #mainmenu.open > li > a    { font-size: 22px; padding: 8px 0; display: block; width: 100%; }
  #menu-btn { display: flex; }
  .section-padding { padding: 70px 0; }
  .hero-grid { grid-template-columns: 1fr; padding: 100px 0 40px; }
  .hero-logo-col { display: none; }
  .hero-stats-bar { display: none; }
  /* No stats bar — drop scroll indicator to the true bottom */
  .scroll-down        { bottom: 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .col-3, .col-4 { width: 100%; }
  .apart-grid { grid-template-columns: 1fr; }
  .capabilities-grid { grid-template-columns: 1fr; }
  .industries-grid   { grid-template-columns: 1fr; }
  .success-img-grid { grid-template-columns: 1fr; }
  .success-img-grid img:first-child { aspect-ratio: 16/9; }
  .success-single-img img { aspect-ratio: 16/9; }
  h1 { letter-spacing: -1.5px; }
  h2 { letter-spacing: -1px; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .btn-main, .btn-border {
    width: 100%;
    padding: 12px 18px;
    font-size: 11px;
    letter-spacing: 1px;
  }
  /* Header CTA — icon only on mobile */
  header .header-cta {
    width        : 34px;
    height       : 34px;
    padding      : 0;
    border-radius: 8px;
    flex-shrink  : 0;
  }
  header .header-cta span   { display: none; }
  header .header-cta .header-cta-icon { display: block; }
  .ind-img-wrap { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   NAV DROPDOWN
═══════════════════════════════════════════════════════════ */
.menu-dropdown-wrap { position: relative; }
.menu-dropdown-trigger::after { content: ' ▾'; font-size: 9px; opacity: .6; }
.menu-dropdown {
  position     : absolute;
  top          : calc(100% + 12px);
  left         : 50%;
  transform    : translateX(-50%) translateY(6px);
  background   : #131a22;
  border       : 1px solid rgba(0,221,208,.15);
  border-radius: 10px;
  padding      : 8px 0;
  min-width    : 210px;
  opacity      : 0;
  visibility   : hidden;
  transition   : opacity .2s, visibility .2s, transform .2s;
  z-index      : 500;
  list-style   : none;
}
.menu-dropdown-wrap:hover .menu-dropdown,
.menu-dropdown-wrap:focus-within .menu-dropdown {
  opacity  : 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.menu-dropdown li a {
  display        : block;
  padding        : 10px 20px;
  color          : rgba(255,255,255,.7);
  font-size      : 13px;
  font-weight    : 700;
  letter-spacing : .5px;
  text-transform : uppercase;
  transition     : color .15s, background .15s;
}
.menu-dropdown li a:hover,
.menu-dropdown li a.active-page { color: var(--primary-color); background: rgba(0,221,208,.06); }
[dir="rtl"] .menu-dropdown { left: auto; right: 50%; transform: translateX(50%) translateY(6px); }
[dir="rtl"] .menu-dropdown-wrap:hover .menu-dropdown,
[dir="rtl"] .menu-dropdown-wrap:focus-within .menu-dropdown { transform: translateX(50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════
   HOME — SERVICES GRID
═══════════════════════════════════════════════════════════ */
.services-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 24px;
  margin-top            : 60px;
}
.service-card {
  background     : rgba(255,255,255,.04);
  border         : 1px solid rgba(255,255,255,.06);
  border-radius  : var(--rounded);
  padding        : 32px 28px;
  display        : flex;
  flex-direction : column;
  transition     : border-color .25s, transform .25s;
  text-decoration: none;
  color          : inherit;
}
.service-card:hover { border-color: rgba(0,221,208,.3); transform: translateY(-4px); }
.service-card-icon {
  width          : 52px; height: 52px;
  background     : rgba(0,221,208,.1);
  border-radius  : 12px;
  display        : flex; align-items: center; justify-content: center;
  margin-bottom  : 20px;
}
.service-card-icon svg { width: 26px; height: 26px; fill: var(--primary-color); }
.service-card h3 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 10px; letter-spacing: -.3px; }
.service-card p  { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.75; margin-bottom: 24px; flex: 1; }
.btn-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary-color); font-size: 11px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; transition: gap .2s;
}
.service-card:hover .btn-arrow { gap: 10px; }

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS — 3-STEP GRID
═══════════════════════════════════════════════════════════ */
.steps-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 28px;
  margin-top            : 56px;
}
.step-card {
  background         : rgba(14,18,24,.72);
  backdrop-filter    : blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border             : 1px solid rgba(0,221,208,.15);
  border-radius      : var(--rounded);
  padding            : 36px 28px;
  text-align         : center;
  transition         : border-color .25s, background .25s;
}
.step-card:hover { border-color: rgba(0,221,208,.4); background: rgba(14,18,24,.85); }
.step-num { display: block; font-size: 52px; font-weight: 900; color: rgba(0,221,208,.7); line-height: 1; margin-bottom: 16px; letter-spacing: -2px; }
.step-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; color: #fff; }
.step-card p  { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════
   FEATURE CARDS (4-up on service pages)
═══════════════════════════════════════════════════════════ */
.features-grid {
  display               : grid;
  grid-template-columns : repeat(2, 1fr);
  gap                   : 24px;
  margin-top            : 48px;
}
.feature-card {
  background   : rgba(255,255,255,.03);
  border       : 1px solid rgba(255,255,255,.06);
  border-radius: var(--rounded);
  padding      : 28px 24px;
  transition   : border-color .25s;
}
.feature-card:hover { border-color: rgba(0,221,208,.25); }
.feature-card-icon {
  width: 44px; height: 44px; background: rgba(0,221,208,.08); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.feature-card-icon svg { width: 22px; height: 22px; fill: var(--primary-color); }
.feature-card h4 { font-size: 15px; font-weight: 800; margin-bottom: 8px; color: #fff; }
.feature-card p  { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════
   STAT CARDS — ROI / metrics sections
═══════════════════════════════════════════════════════════ */
.stats-cards {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
  gap                   : 20px;
  margin-top            : 56px;
}
.stat-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--rounded); padding: 32px 24px; text-align: center;
}
.stat-card .stat-big { font-size: clamp(32px, 3.5vw, 48px); font-weight: 900; color: var(--primary-color); line-height: 1; margin-bottom: 8px; letter-spacing: -1px; display: block; }
.stat-card h4 { font-size: 14px; font-weight: 800; margin-bottom: 8px; color: #fff; }
.stat-card p  { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   COMPANY / ABOUT GRID (home page)
═══════════════════════════════════════════════════════════ */
.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.company-img-wrap { position: relative; border-radius: var(--rounded); overflow: hidden; }
.company-img-wrap img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.company-img-wrap::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(0,221,208,.2); border-radius: var(--rounded); pointer-events: none;
}
.about-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px 14px;
  border: 1px solid rgba(0,221,208,.18);
  border-radius: 999px;
  background: rgba(0,221,208,.06);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.about-meta::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-color);
  flex-shrink: 0;
}

/* Legal document pages */
.legal-page-section {
  padding: 120px 0 84px;
}
.legal-page-header {
  max-width: 860px;
  margin: 0 auto 34px;
  text-align: center;
}
.legal-page-header h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.12;
  color: #fff;
}
.legal-page-header p {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255,255,255,.62);
  font-size: 15px;
  line-height: 1.8;
}
.legal-page-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.legal-doc-shell {
  max-width: 1160px;
  margin: 0 auto;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.legal-doc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.legal-doc-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.legal-doc-top p {
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,.56);
  font-size: 13px;
  line-height: 1.8;
}
.legal-doc-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.legal-doc-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,221,208,.16);
  background: rgba(0,221,208,.06);
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.legal-doc-embed {
  background: #0b0f15;
  min-height: 980px;
}
.legal-doc-embed iframe {
  width: 100%;
  height: 980px;
  border: 0;
  display: block;
  background: #fff;
}

/* Team section */
.team-grid {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: 44px;
  align-items: start;
}
.team-intro p {
  max-width: 500px;
  margin-bottom: 0;
}
.team-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.team-member {
  min-height: 152px;
  padding: 24px 24px 22px;
  border-radius: calc(var(--rounded) - 2px);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.team-member::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(0,221,208,.95), rgba(0,221,208,.2));
  transition: width .22s ease, opacity .22s ease;
}
.team-role {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.6;
}
.team-member h3 {
  margin: 0;
  color: #fff;
  font-size: 23px;
  line-height: 1.25;
  transition: transform .22s ease;
}
.team-member:hover {
  transform: translateY(-4px);
  border-color: rgba(0,221,208,.18);
  background: linear-gradient(180deg, rgba(0,221,208,.08) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: 0 24px 56px rgba(0,0,0,.26);
}
.team-member:hover::before {
  width: 5px;
  opacity: 1;
}
.team-member:hover h3 {
  transform: translateX(2px);
}
[dir="rtl"] .team-member:hover h3 {
  transform: translateX(-2px);
}

/* WHY WAZNET — split band with stacked points */
.why-band {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  gap: 44px;
  align-items: start;
}
.why-band-intro {
  position: sticky;
  top: 110px;
}
.why-band-intro p {
  max-width: 500px;
  margin-bottom: 0;
}
.why-points {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: calc(var(--rounded) + 6px);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.why-point {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.why-point:last-child {
  border-bottom: 0;
}
.why-point-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-color);
  background: rgba(0,221,208,.06);
  border-right: 1px solid rgba(255,255,255,.08);
  letter-spacing: .08em;
}
.why-point-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px 28px;
}
.why-point-body h3 {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.3;
}
.why-point-body p {
  margin-bottom: 0;
  color: rgba(255,255,255,.68);
  font-size: 14px;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════
   INNER PAGE HERO (service detail pages — shorter)
═══════════════════════════════════════════════════════════ */
.hero-inner { padding: 155px 0 90px; min-height: auto; }
.hero-inner .hero-title { font-size: clamp(38px, 6vw, 72px); line-height: 1.3; }
.hero-inner .hero-title .hero-line { margin-bottom: 0.05em; }

/* SkyMedia showcase section */
.sm-showcase-grid {
  display              : grid;
  grid-template-columns: auto 1fr;
  gap                  : 64px;
  align-items          : center;
}
.sm-showcase-video {
  width        : 340px;
  flex-shrink  : 0;
  border-radius: 16px;
  overflow     : hidden;
  box-shadow   : 0 12px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(0,221,208,.12);
}
.sm-showcase-video video {
  display: block;
  width  : 100%;
  height : auto;
}
.sm-showcase-stats {
  display    : flex;
  align-items: center;
  gap        : 0;
  margin-top : 36px;
  padding    : 20px 24px;
  background : var(--bg-card);
  border     : 1px solid var(--bg-card-border);
  border-radius: var(--rounded);
}
.sm-stat {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  flex          : 1;
  gap           : 4px;
}
.sm-stat-val {
  font-size  : 22px;
  font-weight: 800;
  line-height: 1;
}
.sm-stat-lbl {
  font-size : 11px;
  color     : rgba(255,255,255,.45);
  text-align: center;
  letter-spacing: .4px;
}
.sm-stat-divider {
  width     : 1px;
  height    : 36px;
  background: var(--bg-card-border);
  flex-shrink: 0;
}
@media (max-width: 992px) {
  .sm-showcase-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sm-showcase-video {
    width    : 100%;
    max-width: 400px;
    margin   : 0 auto;
  }
}

/* Video hero background */
.hero-video   { position: relative; overflow: hidden; }
.hero-video-bg {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  object-position: center;
  z-index   : 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — new components
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid    { grid-template-columns: repeat(2, 1fr); }
  .stats-cards   { grid-template-columns: repeat(2, 1fr); }
  .company-grid  { grid-template-columns: 1fr; gap: 40px; }
  .team-grid     { grid-template-columns: 1fr; gap: 28px; }
  .why-band      { grid-template-columns: 1fr; gap: 28px; }
  .why-band-intro { position: static; }
  .legal-doc-top { flex-direction: column; }
  .legal-doc-chips { justify-content: flex-start; }
}
/* ═══════════════════════════════════════════════════════════
   REVERSED INTRO GRID  (image left, text right)
═══════════════════════════════════════════════════════════ */
.intro-reversed > *:first-child { order: 2; }
.intro-reversed > *:last-child  { order: 1; }
@media (max-width: 1024px) {
  .intro-reversed > *:first-child { order: unset; }
  .intro-reversed > *:last-child  { order: unset; }
}

/* Service bullet points (home page service sections) */
.svc-bullet {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  margin-bottom: 12px;
  font-size    : 14px;
  color        : rgba(255,255,255,.7);
  line-height  : 1.5;
  margin-top   : 0;
}
.svc-bullet::before {
  content      : '';
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  background   : var(--primary-color);
  flex-shrink  : 0;
}

.services-note {
  margin: 22px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.48);
}

/* ═══════════════════════════════════════════════════════════
   IMAGE SPEC BADGE (floats over .company-img-wrap)
═══════════════════════════════════════════════════════════ */
.img-spec-badge {
  position        : absolute;
  bottom          : 16px;
  left            : 16px;
  right           : 16px;
  display         : flex;
  align-items     : center;
  background      : rgba(14,18,24,.82);
  backdrop-filter : blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border          : 1px solid rgba(0,221,208,.25);
  border-radius   : 12px;
  padding         : 12px 20px;
}
.img-spec-item {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 3px;
}
.img-spec-val {
  font-size  : 16px;
  font-weight: 800;
  color      : var(--primary-color);
  line-height: 1;
}
.img-spec-lbl {
  font-size     : 11px;
  color         : rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.img-spec-divider {
  width      : 1px;
  height     : 36px;
  background : rgba(0,221,208,.2);
  flex-shrink: 0;
  margin     : 0 16px;
}

/* ═══════════════════════════════════════════════════════════
   DENKA SAVINGS CALCULATOR MODAL
═══════════════════════════════════════════════════════════ */
#dk-calc-modal {
  display         : none;
  position        : fixed;
  inset           : 0;
  z-index         : 9999;
  background      : rgba(10,14,20,.85);
  backdrop-filter : blur(6px);
  align-items     : center;
  justify-content : center;
  padding         : 20px;
}
#dk-calc-modal.open { display: flex; }
.dk-calc-box {
  background    : #131a22;
  border        : 1px solid rgba(0,221,208,.18);
  border-radius : 20px;
  padding       : 48px 44px;
  width         : 100%;
  max-width     : 520px;
  position      : relative;
  box-shadow    : 0 24px 80px rgba(0,0,0,.6);
}
.dk-calc-close {
  position   : absolute;
  top        : 16px;
  right      : 20px;
  background : none;
  border     : none;
  color      : rgba(255,255,255,.4);
  font-size  : 22px;
  cursor     : pointer;
  line-height: 1;
  transition : color .2s;
}
[dir="rtl"] .dk-calc-close { right: auto; left: 20px; }
.dk-calc-close:hover { color: var(--primary-color); }
.dk-calc-box h3 {
  font-size    : 22px;
  font-weight  : 700;
  color        : #fff;
  margin-bottom: 6px;
}
.dk-calc-box > p {
  font-size    : 13px;
  color        : rgba(255,255,255,.5);
  margin-bottom: 28px;
}
.dk-calc-row {
  display       : flex;
  gap           : 10px;
  margin-bottom : 24px;
}
.dk-calc-input-wrap { flex: 1; position: relative; }
.dk-calc-input-wrap input {
  width         : 100%;
  background    : rgba(255,255,255,.05);
  border        : 1px solid rgba(0,221,208,.2);
  border-radius : 10px;
  color         : #fff;
  font-size     : 18px;
  font-weight   : 600;
  padding       : 12px 16px;
  outline       : none;
  transition    : border-color .2s;
  font-family   : inherit;
}
.dk-calc-input-wrap input:focus { border-color: var(--primary-color); }
.dk-calc-input-wrap input::placeholder { color: rgba(255,255,255,.2); font-weight:400; }
.dk-calc-currency {
  background    : rgba(0,221,208,.08);
  border        : 1px solid rgba(0,221,208,.2);
  border-radius : 10px;
  color         : var(--primary-color);
  font-size     : 14px;
  font-weight   : 600;
  padding       : 0 14px;
  cursor        : pointer;
  outline       : none;
  font-family   : inherit;
}
.dk-calc-results {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 12px;
  margin-bottom        : 24px;
}
.dk-calc-card {
  background    : rgba(0,221,208,.06);
  border        : 1px solid rgba(0,221,208,.12);
  border-radius : 12px;
  padding       : 16px;
  text-align    : center;
}
.dk-calc-card .dk-val {
  display    : block;
  font-size  : 22px;
  font-weight: 800;
  color      : var(--primary-color);
  line-height: 1.1;
}
.dk-calc-card .dk-lbl {
  display    : block;
  font-size  : 11px;
  color      : rgba(255,255,255,.45);
  margin-top : 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dk-calc-payback {
  background    : rgba(0,221,208,.04);
  border        : 1px solid rgba(0,221,208,.1);
  border-radius : 10px;
  padding       : 12px 16px;
  font-size     : 13px;
  color         : rgba(255,255,255,.55);
  margin-bottom : 20px;
  text-align    : center;
}
.dk-calc-payback strong { color: var(--primary-color); }
.dk-calc-box .btn-main { width: 100%; justify-content: center; }

@media (max-width: 420px) {
  .dk-calc-box { padding: 32px 22px; }
  .dk-calc-results { grid-template-columns: 1fr; }
  .ble-cards-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .dk-calc-box { padding: 32px 22px; }
  .dk-calc-results { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr; }
  .steps-grid    { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .stats-cards   { grid-template-columns: repeat(2, 1fr); }
  .team-list     { grid-template-columns: 1fr; }
  .team-member   { min-height: auto; padding: 22px 20px 20px; }
  .team-member h3 { font-size: 20px; }
  .footer-link-columns { grid-template-columns: 1fr; gap: 10px; }
  .legal-page-section { padding: 110px 0 68px; }
  .legal-page-header p { font-size: 14px; }
  .legal-doc-top { padding: 18px; }
  .legal-doc-embed,
  .legal-doc-embed iframe { min-height: 72vh; height: 72vh; }
  .why-point-num { width: 48px; min-width: 48px; }
  .why-point-body { padding: 20px; }
  .why-point-body h3 { font-size: 16px; }
  /* Dropdown — collapsed by default, toggled by JS tap */
  .menu-dropdown {
    display: none;
    position: static; transform: none !important; opacity: 1; visibility: visible;
    background: rgba(0,221,208,.05); border-color: rgba(0,221,208,.1);
    border-radius: 8px; margin: 4px 0 8px; min-width: auto; width: 100%;
  }
  .menu-dropdown.open { display: block; }
  /* Kill desktop hover transform on touch — prevents left-shift on tap */
  .menu-dropdown-wrap:hover .menu-dropdown,
  .menu-dropdown-wrap:focus-within .menu-dropdown {
    transform: none !important;
  }
  .menu-dropdown li a { font-size: 15px; padding: 8px 16px; text-align: center; }
  /* Show chevron on mobile trigger, rotate when expanded */
  .menu-dropdown-trigger::after       { display: inline !important; content: ' ▾'; }
  .menu-dropdown-trigger.expanded::after { content: ' ▴'; }
}