/* =============================================================
   RGB SKYLINE — DESIGN SYSTEM
   ============================================================= */

:root{
  --b-50:  #E3F2FD;
  --b-100: #BBDEFB;
  --b-200: #90CAF9;
  --b-300: #64B5F6;
  --b-400: #42A5F5;
  --b-500: #2196F3; /* primary */
  --b-600: #1E88E5;
  --b-700: #1976D2;
  --b-800: #1565C0;
  --b-900: #0D47A1;

  /* ---- neutrals derived for navy surfaces ---- */
  --navy-950: #050B16;
  --navy-900: #071223;
  --navy-800: #0B1930;
  --navy-700: #10233F;
  --navy-600: #16304F;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-display: 'Cairo', 'Tajawal', sans-serif;
  --font-body: 'Tajawal', 'Cairo', sans-serif;
  --shadow-blue: 0 20px 60px -20px rgba(13, 71, 161, 0.55);
  --ease: cubic-bezier(.22,.61,.36,1);
  --rgb-header-h: 64px;

  color-scheme: dark;
}

/* ================= THEME: DARK (default) ================= */
:root,
html[data-theme="dark"]{
  --bg: var(--navy-950);
  --bg-soft: var(--navy-900);
  --surface: var(--navy-800);
  --surface-2: var(--navy-700);
  --border: rgba(144, 202, 249, 0.14);
  --border-strong: rgba(66, 165, 245, 0.35);

  --text-1: #F3F8FF;
  --text-2: #AEC6E8;
  --text-3: #7C93B5;

  --grid-line: rgba(66, 165, 245, 0.07);
  --glow-strong: rgba(33, 150, 243, 0.35);
  --glow-soft: rgba(13, 71, 161, 0.28);

  --grad-primary: linear-gradient(135deg, var(--b-800) 0%, var(--b-600) 50%, var(--b-400) 100%);
  --grad-hero: radial-gradient(circle at 30% 20%, rgba(66,165,245,0.16), transparent 55%),
               radial-gradient(circle at 80% 80%, rgba(13,71,161,0.35), transparent 50%);
}

/* ================= THEME: LIGHT ================= */
html[data-theme="light"]{
  color-scheme: light;
  --bg: #F7FBFF;
  --bg-soft: var(--b-50);
  --surface: #FFFFFF;
  --surface-2: var(--b-50);
  --border: rgba(21, 101, 192, 0.14);
  --border-strong: rgba(25, 118, 210, 0.3);

  --text-1: #0B1930;
  --text-2: #2C4667;
  --text-3: #5C7C9E;

  --grid-line: rgba(25, 118, 210, 0.06);
  --glow-strong: rgba(33, 150, 243, 0.18);
  --glow-soft: rgba(144, 202, 249, 0.35);

  --grad-primary: linear-gradient(135deg, var(--b-800) 0%, var(--b-600) 50%, var(--b-400) 100%);
  --grad-hero: radial-gradient(circle at 30% 15%, rgba(66,165,245,0.14), transparent 55%),
               radial-gradient(circle at 80% 80%, rgba(144,202,249,0.4), transparent 50%);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
  transition: background-color .35s var(--ease), color .35s var(--ease);
  overflow-x: hidden;
  overflow-wrap: break-word;
  /* Room for the fixed header */
  padding-top: var(--rgb-header-h);
}

section[id]{ scroll-margin-top: var(--rgb-header-h); }

h1, h2, h3, h4, .rgb-brand span{
  font-family: var(--font-display);
  color: var(--text-1);
  margin: 0;
}

p{ color: var(--text-2); margin: 0; }

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

img{ max-width: 100%; height: auto; display: block; }
/* <picture> is only a WebP wrapper; keep it out of the layout. */
picture{ display: contents; }
:root{ caret-color: transparent; }

input,
textarea,
select,
[contenteditable]:not([contenteditable="false"]){ caret-color: auto; }

:focus-visible{
  outline: 2px solid var(--b-400);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.container{ max-width: 1220px; }

/* ================= BUTTONS ================= */
.rgb-btn-primary{
  background: var(--grad-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: .7rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 12px 30px -10px rgba(25,118,210,.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.rgb-btn-primary:hover{ color:#fff; transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(25,118,210,.7); filter: brightness(1.06); }

.rgb-btn-outline{
  background: transparent;
  color: var(--text-1);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .7rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.rgb-btn-outline:hover{ color: var(--text-1); background: rgba(66,165,245,.08); border-color: var(--b-400); transform: translateY(-2px); }

.rgb-btn-lg{ padding: .9rem 2rem; font-size: 1.02rem; border-radius: var(--radius-md); }

.rgb-btn-nav{ padding: .55rem 1.3rem; font-size: .92rem; margin-inline-start: .9rem; white-space: nowrap; }

.rgb-btn-light{
  background:#fff; color: var(--b-900); border:none; border-radius: var(--radius-sm);
  padding:.9rem 2rem; font-family: var(--font-display); font-weight:800;
  transition: transform .25s var(--ease);
}
.rgb-btn-light:hover{ color: var(--b-900); transform: translateY(-2px); }

.rgb-btn-outline-light{
  background: transparent; color:#fff; border: 1.5px solid rgba(255,255,255,.55); border-radius: var(--radius-sm);
  padding:.9rem 2rem; font-family: var(--font-display); font-weight:700;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.rgb-btn-outline-light:hover{ color:#fff; background: rgba(255,255,255,.12); transform: translateY(-2px); }

/* ================= NAVBAR ================= */
.rgb-navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  padding: .5rem 0;
  min-height: var(--rgb-header-h);
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.rgb-navbar .navbar-toggler{
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(243,248,255,.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.rgb-navbar .navbar-toggler:hover{ border-color: var(--border-strong); }
.rgb-navbar .navbar-toggler:focus{ box-shadow: none; }
html[data-theme="light"] .rgb-navbar .navbar-toggler{
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(11,25,48,.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.rgb-brand{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.15rem;
  font-weight: 800;
}
.rgb-brand span{ font-weight: 800; letter-spacing: .2px; }
.rgb-brand em{ font-style: normal; color: var(--b-400); }

.rgb-brand img{
  width: 140px;
  height: 70px;
  object-fit: cover;
  object-position: center 55%;
}

.rgb-navbar .rgb-brand img{ width: 92px; height: 46px; }
.rgb-navbar .navbar-brand{ padding-block: 0; }

.rgb-nav-links{ gap: .3rem; }
.rgb-nav-links .nav-link{
  color: var(--text-2);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  padding: .5rem .9rem;
  border-radius: var(--radius-sm);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.rgb-nav-links .nav-link:hover,
.rgb-nav-links .nav-link:focus-visible{
  color: var(--text-1);
  background: rgba(66,165,245,.08);
}

.rgb-nav-actions{ gap:.25rem; }

.theme-toggle{
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  display: inline-flex; align-items:center; justify-content:center;
  position: relative;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.theme-toggle:hover{ border-color: var(--border-strong); }
.theme-toggle .theme-icon-sun{ display:none; color: var(--b-400); }
.theme-toggle .theme-icon-moon{ display:inline-block; color: var(--b-300); }
html[data-theme="light"] .theme-toggle .theme-icon-sun{ display:inline-block; }
html[data-theme="light"] .theme-toggle .theme-icon-moon{ display:none; }

/* ---- language switcher ---- */
.rgb-lang-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  height: 42px; padding: 0 .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 700; font-size: .85rem; line-height: 1;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.rgb-lang-btn:hover,
.rgb-lang-btn[aria-expanded="true"]{ border-color: var(--border-strong); }
.rgb-lang-btn .bi-translate{ color: var(--b-400); font-size: 1rem; }
.rgb-lang-current{ white-space: nowrap; }
.rgb-lang-code{ display: none; font-weight: 800; }
.rgb-lang-caret{ font-size:.7rem; color: var(--text-3); transition: transform .2s var(--ease); }
.rgb-lang-btn[aria-expanded="true"] .rgb-lang-caret{ transform: rotate(180deg); }

.rgb-lang-menu{
  min-width: 175px;
  margin-top: .5rem !important;
  padding: .35rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-blue);
}
.rgb-lang-menu .rgb-lang-option{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  width:100%; padding: .5rem .7rem;
  border:none; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-display); font-weight:600; font-size:.9rem;
  text-align: start;
}
.rgb-lang-menu .rgb-lang-option:hover,
.rgb-lang-menu .rgb-lang-option:focus-visible,
.rgb-lang-menu .rgb-lang-option:active{ background: rgba(66,165,245,.1); color: var(--text-1); }
.rgb-lang-menu .rgb-lang-option.is-active{ background: rgba(66,165,245,.08); color: var(--b-300); }
.rgb-lang-menu .rgb-lang-option .bi-check2{ color: var(--b-400); font-size:1rem; opacity: 0; }
.rgb-lang-menu .rgb-lang-option.is-active .bi-check2{ opacity: 1; }

/* ================= BACKGROUND GRID ================= */
.rgb-grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 20%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 65% at 50% 20%, #000 30%, transparent 80%);
  pointer-events: none;
}

/* ================= HERO ================= */
.rgb-hero{
  position: relative;
  padding: 6.5rem 0 5rem;
  background: var(--grad-hero), var(--bg);
  overflow: hidden;
}

.rgb-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--b-300);
  font-weight: 700;
  font-size: .85rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
.rgb-badge i{ color: var(--b-400); }

.rgb-hero-title{
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  font-weight: 900;
  line-height: 1.28;
  margin-bottom: 1.1rem;
}

.rgb-hero-desc{
  font-size: 1.08rem;
  color: var(--text-2);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.rgb-hero-actions{ display:flex; flex-wrap:wrap; gap: .9rem; margin-bottom: 2.2rem; }

.rgb-platform-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.rgb-platform-label{ color: var(--text-3); font-size:.88rem; font-weight:600; }
.rgb-platform-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--surface);
  border:1px solid var(--border);
  padding:.4rem .85rem;
  border-radius: 999px;
  font-size:.85rem;
  font-weight:600;
  color: var(--text-2);
}
.rgb-platform-chip i{ color: var(--b-400); }

/* ---- hero visual / image ---- */
.rgb-hero-visual{ position: relative; }

.rgb-hero-image-wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.rgb-hero-image-wrap .rgb-glow-orb{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 90%);
  aspect-ratio: 1;
  height: auto;
}

.rgb-hero-image{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  object-position: center;
}

/* ---- legacy device mockups ---- */
.rgb-device-stack{
  position: relative;
  min-height: 380px;
  display:flex; align-items:center; justify-content:center;
}

.rgb-glow-orb{
  position:absolute;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--glow-strong), transparent 70%);
  filter: blur(10px);
  border-radius: 50%;
  z-index: 0;
}

.rgb-laptop{ position: relative; z-index: 2; width: min(430px, 88%); }
.rgb-laptop-screen{
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px 14px 4px 4px;
  padding: 14px 16px 18px;
  box-shadow: var(--shadow-blue);
}
.rgb-laptop-base{
  height: 12px;
  background: linear-gradient(var(--surface-2), var(--navy-900));
  border-radius: 0 0 10px 10px;
  margin: 0 6%;
  border: 1px solid var(--border);
  border-top: none;
}

.rgb-phone{
  position:absolute; z-index: 3;
  left: -4%; bottom: -8%;
  width: 118px;
}
.rgb-phone-screen{
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 14px 12px;
  box-shadow: var(--shadow-blue);
}

.mock-topbar{ display:flex; gap:6px; margin-bottom: 12px; }
.mock-topbar span{ width:8px; height:8px; border-radius:50%; background: var(--border-strong); }
.mock-topbar span:first-child{ background: var(--b-500); }

.mock-kpis{ display:flex; gap:8px; margin-bottom: 12px; }
.mock-kpi{
  flex:1; background: var(--surface-2); border:1px solid var(--border);
  border-radius: 10px; padding: 8px 10px;
  display:flex; flex-direction:column; gap:2px;
}
.mock-kpi-label{ font-size: .62rem; color: var(--text-3); font-weight:600; }
.mock-kpi-value{ font-size: .92rem; color: var(--text-1); font-weight:800; font-family: var(--font-display); }

.mock-chart{ display:flex; align-items:flex-end; gap:6px; height: 70px; margin-bottom: 12px; }
.mock-chart.lg{ height: 130px; }
.mock-chart span{
  flex:1; height: var(--h);
  background: linear-gradient(180deg, var(--b-400), var(--b-800));
  border-radius: 4px 4px 0 0;
  opacity: .9;
}
/* Per-column heights of the dashboard mock chart */
.mock-chart span:nth-child(1){ --h: 45%; }
.mock-chart span:nth-child(2){ --h: 70%; }
.mock-chart span:nth-child(3){ --h: 55%; }
.mock-chart span:nth-child(4){ --h: 85%; }
.mock-chart span:nth-child(5){ --h: 60%; }
.mock-chart span:nth-child(6){ --h: 95%; }
.mock-chart span:nth-child(7){ --h: 75%; }
.mock-chart span:nth-child(8){ --h: 65%; }

.mock-rows{ display:flex; flex-direction:column; gap:6px; }
.mock-row{ height:8px; border-radius:5px; background: var(--surface-2); }
.mock-row:nth-child(2){ width: 80%; }
.mock-row:nth-child(3){ width: 60%; }

.mock-phone-header{
  display:flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; color: var(--text-2); margin-bottom: 14px;
}
.mock-phone-header i{ color: var(--b-400); }
.mock-phone-total{
  font-family: var(--font-display); font-weight:900; font-size:1.3rem;
  color: var(--text-1); margin-bottom: 14px;
}
.mock-phone-total small{ font-size:.7rem; color: var(--text-3); font-weight:600; }
.mock-phone-btn{
  background: var(--grad-primary); color:#fff; text-align:center;
  border-radius: 10px; padding: 8px; font-size:.75rem; font-weight:700;
}

/* ================= TRUST BAR ================= */
.rgb-trust-bar{ padding: 1.6rem 0; background: var(--bg-soft); border-block: 1px solid var(--border); }
.rgb-trust-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 1.2rem; }
.rgb-trust-item{ display:flex; align-items:center; gap:.6rem; color: var(--text-2); font-weight:700; font-size:.95rem; }
.rgb-trust-item i{ color: var(--b-400); font-size:1.2rem; }

/* ================= SECTION GENERIC ================= */
.rgb-section{ padding: 6rem 0; }
.rgb-section-alt{ background: var(--bg-soft); }

.rgb-section-head{ max-width: 640px; margin: 0 auto 2.8rem; text-align:center; }
.rgb-section-title{ font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; margin-bottom: .8rem; }
.rgb-section-desc{ font-size: 1.02rem; }

.rgb-section > .container > .row .rgb-section-title{ text-align: start; }
.rgb-section > .container > .row .rgb-section-desc{ text-align: start; }

/* reveal-on-scroll (single subtle entrance) */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ================= ABOUT ================= */
.rgb-check-list{ list-style:none; padding:0; margin: 1.6rem 0 0; display:flex; flex-direction:column; gap:.7rem; }
.rgb-check-list li{ display:flex; align-items:center; gap:.6rem; color: var(--text-2); font-weight:600; }
.rgb-check-list i{ color: var(--b-400); font-size:1.05rem; }

.rgb-about-visual{ position:relative; padding: 1rem; }
.rgb-about-glow{
  position:absolute; inset: 10% 10%;
  background: radial-gradient(circle, var(--glow-soft), transparent 70%);
  filter: blur(6px); z-index:0;
}
.rgb-about-image{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin-inline: auto;
}

.rgb-about-card{
  position:absolute; z-index:2; top: -14px; inset-inline-end: 6%;
  background: var(--grad-primary); color:#fff;
  border-radius: var(--radius-md);
  padding: .9rem 1.2rem;
  display:flex; align-items:center; gap:.7rem;
  box-shadow: 0 16px 34px -12px rgba(13,71,161,.6);
}
.rgb-about-card i{ font-size:1.4rem; }
.rgb-about-card-text{ display:flex; flex-direction:column; line-height:1.2; }
.rgb-about-card-text strong{ font-family: var(--font-display); font-size:1.15rem; }
.rgb-about-card-text span{ font-size:.72rem; opacity:.9; }

/* ================= ERP ================= */
.rgb-erp-modules{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rgb-erp-mod{
  display:flex; align-items:center; gap:.7rem;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-md); padding: 1rem 1.1rem;
  font-weight:700; color: var(--text-1); font-size:.92rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.rgb-erp-mod:hover{ border-color: var(--border-strong); transform: translateY(-3px); }
.rgb-erp-mod i{ color: var(--b-400); font-size:1.25rem; }

.rgb-dashboard-mockup{
  background: var(--surface); border:1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 1.4rem;
  box-shadow: var(--shadow-blue);
}
.rgb-dash-grid{ display:grid; grid-template-columns: 70px 1fr; gap: 1rem; }
.rgb-dash-side{ display:flex; flex-direction:column; gap:.6rem; }
.rgb-dash-side-item{ height: 34px; border-radius: 8px; background: var(--surface-2); }
.rgb-dash-side-item.active{ background: var(--grad-primary); }
.rgb-dash-cards{ display:flex; gap:.8rem; margin-bottom: 1rem; }
.rgb-dash-card{
  flex:1; background: var(--surface-2); border:1px solid var(--border);
  border-radius: 12px; padding: .8rem 1rem;
  display:flex; flex-direction:column; gap:.2rem;
}
.rgb-dash-card .dash-num{ font-family: var(--font-display); font-weight:800; font-size:1.15rem; color: var(--text-1); }
.rgb-dash-card span:last-child{ font-size:.75rem; color: var(--text-3); font-weight:600; }

/* ================= FEATURE / SERVICE CARDS ================= */
.rgb-feature-card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-md); padding: 1.8rem 1.6rem;
  height:100%;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.rgb-feature-card:hover{ border-color: var(--border-strong); transform: translateY(-4px); box-shadow: var(--shadow-blue); }
.rgb-feature-card i{ font-size: 1.7rem; color: var(--b-400); margin-bottom: 1rem; display:block; }
.rgb-feature-card h3{ font-size: 1.08rem; font-weight:800; margin-bottom:.5rem; }
.rgb-feature-card p{ font-size:.92rem; }

.rgb-service-card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-md); padding: 1.6rem 1.2rem;
  text-align:center; height:100%;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.rgb-service-card:hover{ border-color: var(--border-strong); transform: translateY(-4px); }
.rgb-service-card i{ font-size:1.8rem; color: var(--b-400); margin-bottom: .9rem; display:block; }
.rgb-service-card h3{ font-size: .95rem; font-weight:700; }

/* ================= PLATFORMS ================= */
.rgb-platforms{ position:relative; overflow:hidden; }
.rgb-platforms-glow{
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--glow-soft), transparent 70%);
  pointer-events:none;
}
.rgb-platform-card{
  position:relative; z-index:1; display:block;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.4rem 1.6rem;
  height:100%;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.rgb-platform-card:hover{ transform: translateY(-6px); border-color: var(--border-strong); }
.rgb-platform-card i{ font-size:2.4rem; color: var(--b-400); margin-bottom: 1rem; }
.rgb-platform-card h3{ font-size:1.15rem; font-weight:800; margin-bottom:.5rem; }
.rgb-platform-card p{ font-size:.9rem; }

/* ================= TESTIMONIALS ================= */
.rgb-testimonials{ padding-bottom: 2.5rem; }
.rgb-testimonial-card{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.4rem 2.2rem;
  text-align:center;
}
.rgb-stars{ color: var(--b-400); font-size:1rem; margin-bottom:1.1rem; display:flex; gap:.25rem; justify-content:center; }
.rgb-testimonial-card p{ font-size:1.08rem; color: var(--text-1); line-height:1.9; margin-bottom:1.4rem; }
.rgb-testimonial-author{ display:flex; flex-direction:column; gap:.15rem; }
.rgb-testimonial-author strong{ font-family: var(--font-display); font-weight:800; }
.rgb-testimonial-author span{ font-size:.85rem; color: var(--text-3); }

.rgb-testimonials .carousel-control-prev,
.rgb-testimonials .carousel-control-next{
  position: static; width: 44px; height:44px; opacity:1;
  background: var(--surface); border:1px solid var(--border);
  border-radius: 50%; color: var(--text-1);
  display:inline-flex; align-items:center; justify-content:center;
  margin-top: 1.4rem;
}
.rgb-testimonials .carousel-control-prev i,
.rgb-testimonials .carousel-control-next i{ font-size: 1.1rem; }
/* Mirror the carousel chevrons in RTL */
html[dir="rtl"] .rgb-testimonials .carousel-control-prev i,
html[dir="rtl"] .rgb-testimonials .carousel-control-next i{ transform: scaleX(-1); }
.rgb-testimonials .carousel-controls-wrap{ display:flex; justify-content:center; gap:.8rem; }

.rgb-carousel-dots{ position: static; margin-top: 1.4rem; gap:.4rem; }
.rgb-carousel-dots [data-bs-target]{
  width:8px; height:8px; border-radius:50%;
  background: var(--border-strong); opacity:1; border:none;
}
.rgb-carousel-dots .active{ background: var(--b-400); width: 22px; border-radius: 5px; }

/* ================= FAQ ================= */
.rgb-accordion .accordion-item{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-md) !important;
  overflow:hidden; margin-bottom: 1rem;
}
.rgb-accordion .accordion-button{
  background: transparent; color: var(--text-1);
  font-family: var(--font-display); font-weight:700; font-size:1rem;
  padding: 1.2rem 1.4rem; box-shadow:none;
}
.rgb-accordion .accordion-button:not(.collapsed){ color: var(--b-300); background: var(--surface-2); }
.rgb-accordion .accordion-button:focus{ box-shadow: none; }
.rgb-accordion .accordion-button::after{ filter: none; }
html[data-theme="dark"] .rgb-accordion .accordion-button::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2342A5F5'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.rgb-accordion .accordion-body{ color: var(--text-2); padding: 0 1.4rem 1.3rem; font-size:.96rem; }

/* ================= CTA ================= */
.rgb-cta{ padding: 5rem 0; }
.rgb-cta-box{
  background: var(--grad-primary);
  border-radius: var(--radius-lg);
  padding: 3.6rem 2rem;
  text-align:center;
  box-shadow: 0 30px 70px -25px rgba(13,71,161,.6);
}
.rgb-cta-box h2{ color:#fff; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:800; margin-bottom:.9rem; }
.rgb-cta-box p{ color: rgba(255,255,255,.88); max-width: 52ch; margin-inline:auto; margin-bottom:1.8rem; }
.rgb-cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; }

/* ================= CONTACT ================= */
.rgb-contact-info{ display:flex; flex-direction:column; gap: 1rem; }
.rgb-contact-item{
  display:flex; align-items:center; gap:1rem;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-md); padding: 1rem 1.2rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
a.rgb-contact-item:hover{ border-color: var(--border-strong); transform: translateX(-3px); }
html[dir="rtl"] a.rgb-contact-item:hover{ transform: translateX(3px); }
.rgb-contact-item i{ font-size:1.35rem; color: var(--b-400); width: 26px; text-align:center; }
.rgb-contact-item div{ display:flex; flex-direction:column; }
.rgb-contact-item strong{ font-size:.92rem; color: var(--text-1); }
.rgb-contact-item span{ font-size:.85rem; color: var(--text-3); }

.rgb-contact-form{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem;
}
.rgb-contact-form .form-label{ color: var(--text-2); font-weight:600; font-size:.9rem; margin-bottom:.4rem; }
.rgb-contact-form .form-control{
  background: var(--surface-2); border:1px solid var(--border);
  color: var(--text-1); border-radius: var(--radius-sm);
  padding: .7rem .9rem;
}
.rgb-contact-form .form-control:focus{
  background: var(--surface-2); color: var(--text-1);
  border-color: var(--b-400); box-shadow: 0 0 0 .2rem rgba(66,165,245,.18);
}
.rgb-contact-form .form-control::placeholder{ color: var(--text-3); }
.rgb-form-note{ margin-top:.9rem; font-size:.88rem; color: var(--b-300); min-height:1.2em; }
.rgb-phone-group{ display:flex; gap:.75rem; align-items:stretch; cursor: default; }
.rgb-phone-group .rgb-phone-input{ cursor: text; }
.rgb-phone-group .rgb-country-select{ flex:0 1 10rem; width:auto; min-width:7.5rem; max-width:48%; }
.rgb-phone-group .rgb-phone-input{
  flex:1 1 auto; min-width:0;
  direction: ltr; text-align: left;
}

/* ================= FOOTER ================= */
.rgb-footer{
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  border-top:1px solid var(--border);
  padding: 1.25rem 0 .75rem;
}
html[data-theme="light"] .rgb-footer{ background: var(--b-900); }
.rgb-footer .container{ position: relative; z-index: 1; }
.rgb-footer .row{ --bs-gutter-y: 2.2rem; }

/* ---- decorative layer: seam glow, one large ring, one diagonal sweep ---- */
.rgb-footer-decor{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.rgb-footer-decor::before,
.rgb-footer-decor::after{ content:""; position:absolute; }
.rgb-footer-decor::before{
  inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(66,165,245,.13), transparent 70%),
    radial-gradient(ellipse 45% 60% at 100% 100%, rgba(13,71,161,.30), transparent 70%),
    linear-gradient(115deg, transparent 40%, rgba(66,165,245,.05) 50%, transparent 60%);
}
html[data-theme="light"] .rgb-footer-decor::before{
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(144,202,249,.20), transparent 70%),
    radial-gradient(ellipse 45% 60% at 100% 100%, rgba(33,150,243,.22), transparent 70%),
    linear-gradient(115deg, transparent 40%, rgba(227,242,253,.07) 50%, transparent 60%);
}
.rgb-footer-decor::after{
  width:520px; height:520px; border-radius:50%;
  top:-210px; inset-inline-start:-150px;
  border:1px solid rgba(66,165,245,.12);
  box-shadow: 0 0 0 70px rgba(66,165,245,.025);
}

.rgb-footer h4{ color:#fff; font-size:.95rem; font-weight:800; letter-spacing:.3px; margin-bottom:.55rem; }
.rgb-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.3rem; }
.rgb-footer ul li a, .rgb-footer ul li{ color: rgba(255,255,255,.68); font-size:.9rem; line-height:1.45; }
.rgb-footer ul li a{ transition: color .2s var(--ease); }
.rgb-footer ul li a:hover{ color: var(--b-300); }

.rgb-footer .rgb-brand img{ width:92px; height:46px; }
.rgb-footer-brand{ margin-bottom: .3rem; }
.rgb-footer-brand span{ color:#fff; }
.rgb-footer-desc{ color: rgba(255,255,255,.66); font-size:.92rem; line-height:1.45; max-width: 56ch; margin-bottom:.5rem; }
.rgb-footer-social{ display:flex; gap:.5rem; }
.rgb-footer-social a{
  width:33px; height:33px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.9rem; color: rgba(255,255,255,.8);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.rgb-footer-social a:hover{ background: rgba(66,165,245,.18); border-color: var(--b-400); color:#fff; transform: translateY(-2px); }
.rgb-footer-sep{
  height:1px; border:0; opacity:1; margin:.45rem 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}
.rgb-footer-contact li{ display:flex; align-items:flex-start; gap:.55rem; }
.rgb-footer-contact i{ flex:none; font-size:.95rem; line-height:1.45; color: var(--b-300); }

/* ---- areas 2 & 3: services + quick links ---- */
.rgb-footer-links a{ display:flex; align-items:center; gap:.6rem; }
.rgb-footer-links a i{ flex:none; font-size:.9rem; color: var(--b-300); transition: color .2s var(--ease); }
.rgb-footer-links a:hover i{ color: var(--b-200); }
.rgb-footer-links a .rgb-footer-arrow{
  margin-inline-start:auto; font-size:.72rem; color: rgba(255,255,255,.45);
  opacity:0; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.rgb-footer-links a:hover .rgb-footer-arrow{ opacity:1; transform: translateX(3px); }
html[dir="rtl"] .rgb-footer-links a .rgb-footer-arrow{ transform: scaleX(-1); }
html[dir="rtl"] .rgb-footer-links a:hover .rgb-footer-arrow{ transform: scaleX(-1) translateX(3px); }

/* ---- area 4: CTA card ---- */
.rgb-footer-cta{
  position:relative; overflow:hidden;
  background: linear-gradient(160deg, rgba(66,165,245,.14), rgba(13,71,161,.10));
  border:1px solid rgba(66,165,245,.22);
  border-radius: var(--radius-lg);
  padding: .75rem 1rem;
  box-shadow: 0 20px 48px -26px rgba(25,118,210,.6);
}
.rgb-footer-cta-glow{
  position:absolute; top:-60px; inset-inline-end:-40px;
  width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, var(--glow-strong), transparent 70%);
  pointer-events:none;
}
.rgb-footer-cta > :not(.rgb-footer-cta-glow),
.rgb-footer-cta-img{ position:relative; z-index:1; }
.rgb-footer-cta h4{ font-size:1rem; line-height:1.5; margin-bottom:.25rem; }
.rgb-footer-cta p{ color: rgba(255,255,255,.68); font-size:.88rem; line-height:1.45; margin-bottom:.55rem; }
.rgb-footer-cta-img{
  width:auto; max-width:100%; max-height:95px; margin-inline:auto;
  border-radius: var(--radius-md);
  border:1px solid rgba(255,255,255,.1);
}

.rgb-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: .7rem; padding: .5rem 0;
}
.rgb-footer-bottom p{
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  color: rgba(255,255,255,.55); font-size:.85rem; line-height:1.5; margin:0; text-align:center;
}
/* Copyright hairlines (hidden on mobile) */
.rgb-footer-bottom p::before,
.rgb-footer-bottom p::after{
  content:""; height:1px; flex:1 1 0; max-width:200px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}

/* ================= FLOATING BUTTONS ================= */
.rgb-whatsapp-btn{
  position: fixed; z-index: 1040;
  bottom: 24px; inset-inline-start: 24px;
  width: 58px; height: 58px; border-radius:50%;
  background: #25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.6rem;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.6);
  transition: transform .25s var(--ease);
}
.rgb-whatsapp-btn:hover{ color:#fff; transform: scale(1.08); }
.rgb-whatsapp-tooltip{
  position:absolute; inset-inline-start: 68px;
  background: var(--surface); color: var(--text-1);
  border: 1px solid var(--border);
  padding: .5rem .9rem; border-radius: 8px;
  font-size:.8rem; font-weight:600; white-space:nowrap;
  opacity:0; pointer-events:none; transform: translateX(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
html[dir="rtl"] .rgb-whatsapp-tooltip{ transform: translateX(-6px); }
.rgb-whatsapp-btn:hover .rgb-whatsapp-tooltip{ opacity:1; transform: translateX(0); }

.rgb-scroll-top{
  position: fixed; z-index: 1040;
  bottom: 24px; inset-inline-end: 24px;
  width: 46px; height: 46px; border-radius:50%;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border:1px solid rgba(66,165,245,.45);
  color: var(--b-300);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; line-height:1;
  box-shadow: 0 10px 26px -12px rgba(25,118,210,.5);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s,
              background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease);
}
html[data-theme="light"] .rgb-scroll-top{
  background: color-mix(in srgb, #fff 92%, transparent);
  border-color: rgba(33,150,243,.55);
  color: var(--b-600);
  box-shadow: 0 10px 24px -8px rgba(25,118,210,.38), 0 2px 8px -4px rgba(13,71,161,.22);
}
.rgb-scroll-top i{ display:block; line-height:1; transition: transform .25s var(--ease); }
.rgb-scroll-top.is-visible{ opacity:1; visibility:visible; transform: translateY(0); }
.rgb-scroll-top.is-visible:hover{
  background: var(--b-600); border-color: var(--b-600); color:#fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -12px rgba(25,118,210,.75);
}
.rgb-scroll-top.is-visible:hover i{ transform: translateY(-2px); }
.rgb-scroll-top.is-visible:active{
  transform: translateY(-1px) scale(.96);
  box-shadow: 0 8px 18px -12px rgba(25,118,210,.6);
}