/* =========================================================
   Garage — Landing Page theme layer
   Strategy: use Bootstrap 5's own components (navbar, collapse,
   card, badge, grid) and re-theme them via Bootstrap's documented
   CSS custom properties. Custom CSS below is only for things
   Bootstrap has no component for (hero, dashboard mock, CTA banner).
   ========================================================= */

:root{
  --navy:#0D3C70;
  --navy-deep:#092A50;
  --blue:#1F7FE0;
  --cyan:#24B3EE;
  --ok:#1AA35C;
  --warn:#F0A324;
  --bad:#E24C4C;

  /* ---- Bootstrap root theme variables ---- */
  --bs-primary: var(--blue);
  --bs-primary-rgb: 31,127,224;
  --bs-success: var(--ok);
  --bs-success-rgb: 26,163,92;
  --bs-warning: var(--warn);
  --bs-warning-rgb: 240,163,36;
  --bs-danger: var(--bad);
  --bs-danger-rgb: 226,76,76;
  --bs-body-bg: #ffffff;
  --bs-body-color: #16212E;
  --bs-border-color: #E4E9F0;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-link-color: var(--blue);
  --bs-link-hover-color: var(--navy);
}

html{scroll-behavior:smooth; overflow-x:hidden;}
body{overflow-x:hidden;}
*{min-width:0;}
html[dir="rtl"] body{font-family:'Tajawal',sans-serif;}
html[dir="ltr"] body{font-family:'Inter',sans-serif;}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] .brand,html[dir="rtl"] .section-label{font-family:'Cairo',sans-serif;}
html[dir="ltr"] h1,html[dir="ltr"] h2,html[dir="ltr"] h3,html[dir="ltr"] h4,
html[dir="ltr"] .brand{font-family:'Inter',sans-serif; font-weight:800;}

.text-muted-soft{color:#65758A;}
.bg-soft{background:#F2F5F9;}

/* ---- Component-level Bootstrap variable overrides ---- */
.btn-primary{
  --bs-btn-bg:var(--blue); --bs-btn-border-color:var(--blue);
  --bs-btn-hover-bg:var(--navy); --bs-btn-hover-border-color:var(--navy);
  --bs-btn-active-bg:var(--navy); --bs-btn-active-border-color:var(--navy);
  --bs-btn-focus-shadow-rgb:31,127,224;
  box-shadow:0 10px 24px rgba(31,127,224,.28);
}
.btn-outline-primary{
  --bs-btn-color:var(--blue); --bs-btn-border-color:var(--blue);
  --bs-btn-hover-bg:var(--blue); --bs-btn-hover-border-color:var(--blue);
  --bs-btn-active-bg:var(--blue); --bs-btn-active-border-color:var(--blue);
}
.btn-whatsapp{
  --bs-btn-bg:#25D366; --bs-btn-border-color:#25D366; --bs-btn-color:#0b3d1e;
  --bs-btn-hover-bg:#1DA851; --bs-btn-hover-border-color:#1DA851; --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:#1DA851; --bs-btn-active-border-color:#1DA851;
  box-shadow:0 10px 24px rgba(37,211,102,.3);
}
.badge-soft-primary{background:#E4F0FF; color:var(--blue);}
.badge-soft-success{background:#E1F8EA; color:var(--ok);}
.badge-soft-warning{background:#FFF1DD; color:#B9761A;}

/* ---- Navbar ---- */
.navbar-brand-mark{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(36,179,238,.35);
}
.navbar .nav-link{font-weight:700; color:var(--navy) !important;}
.navbar .nav-link:hover{color:var(--blue) !important;}

/* ---- Hero ---- */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; padding-block:5.5rem 6.5rem; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset-inline-end:-120px; inset-block-start:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(36,179,238,.28), transparent 70%);
  pointer-events:none;
}
.hero::before{
  content:""; position:absolute; inset-inline-start:-100px; inset-block-end:-140px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(31,127,224,.22), transparent 70%);
  pointer-events:none;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22); padding:.4rem .9rem; border-radius:20px;
  font-size:.8rem; font-weight:700; color:#CFE3F7;
}
.hero h1{font-weight:800; line-height:1.25;}
.hero h1 .accent{color:var(--cyan);}
.hero .lead{color:#B9D0EA;}
.hero-trust{color:#9FB6D6; font-size:.85rem;}
.hero-trust i{color:var(--cyan);}
.btn-ghost-light{
  --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.35); --bs-btn-bg:rgba(255,255,255,.12);
  --bs-btn-hover-bg:rgba(255,255,255,.22); --bs-btn-hover-border-color:rgba(255,255,255,.5); --bs-btn-hover-color:#fff;
}

/* ---- Hero dashboard mock ---- */
.mock-card{border-radius:1.25rem; box-shadow:0 30px 60px rgba(5,20,45,.35); color:#16212E;}
.mock-kpi{background:#F2F5F9; border-radius:.9rem;}
.mock-kpi b{font-family:'Cairo',sans-serif; font-size:1.2rem;}
.mock-row{background:#F2F5F9; border-radius:.9rem;}
.mock-row .icon-chip{
  width:32px; height:32px; border-radius:.6rem; background:#fff; color:var(--blue);
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(13,60,112,.1);
}

/* ---- Value / module cards ---- */
.icon-tile{
  width:50px; height:50px; border-radius:.9rem; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#fff; font-size:1.15rem;
}
.icon-tile-soft{
  width:42px; height:42px; border-radius:.75rem; display:flex; align-items:center; justify-content:center;
  background:#F2F5F9; color:var(--blue); font-size:1.05rem;
}
.hover-lift{transition:transform .18s ease, box-shadow .18s ease;}
.hover-lift:hover{transform:translateY(-4px); box-shadow:0 18px 34px rgba(13,60,112,.1);}
.list-check{list-style:none; padding:0; margin:0;}
.list-check li{
  display:flex; align-items:center; gap:.55rem; font-size:.87rem; color:#65758A;
  padding:.4rem 0; border-top:1px dashed var(--bs-border-color);
}
.list-check li:first-child{border-top:none;}
.list-check i{color:var(--ok); font-size:.7rem;}

/* ---- Screenshots carousel ---- */
.browser-frame{
  max-width:960px; background:#fff; border-radius:1.25rem;
  box-shadow:0 30px 60px rgba(13,60,112,.18); border:1px solid var(--bs-border-color);
  padding:0; position:relative;
}
.browser-bar{
  display:flex; align-items:center; gap:6px; padding:.6rem .9rem;
  background:#F2F5F9; border-bottom:1px solid var(--bs-border-color);
}
.browser-dot{width:9px; height:9px; border-radius:50%; flex:none;}
.browser-title{
  margin-inline-start:.6rem; font-size:.8rem; font-weight:700; color:var(--navy);
}
#screensCarousel .carousel-control-prev,
#screensCarousel .carousel-control-next{width:5%; opacity:.55; transition:opacity .2s;}
.browser-frame:hover .carousel-control-prev,
.browser-frame:hover .carousel-control-next{opacity:1;}
#screensCarousel .carousel-control-prev-icon,
#screensCarousel .carousel-control-next-icon{
  background-color:rgba(13,60,112,.55); border-radius:50%; padding:18px; background-size:50%;
}
#screensCarousel .carousel-indicators{position:relative; margin-bottom:1.25rem;}
#screensCarousel .carousel-indicators [data-bs-target]{
  background-color:var(--navy); opacity:.25; width:9px; height:9px; border-radius:50%; margin:0 4px;
}
#screensCarousel .carousel-indicators .active{opacity:1; background-color:var(--blue);}

/* ---- Workflow steps ---- */
.step-num{
  width:38px; height:38px; border-radius:.75rem; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'Cairo',sans-serif;
}

/* ---- CTA banner ---- */
.cta-banner{
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-deep) 100%);
  border-radius:1.75rem; color:#fff; position:relative; overflow:hidden;
}
.cta-banner::after{
  content:""; position:absolute; inset-inline-end:-100px; inset-block-start:-100px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(36,179,238,.25), transparent 70%);
  pointer-events:none;
}
.cta-banner p{color:#B9D0EA;}

/* ---- Footer ---- */
.footer-dark{background:var(--navy-deep); color:#B9D0EA;}
.footer-dark h4{color:#fff; font-size:.9rem;}
.footer-dark p{color:#8FA9C9; font-size:.87rem;}
.footer-dark a{color:#B9D0EA;}
.footer-dark a.d-inline-flex{overflow-wrap:anywhere; word-break:break-word;}
.footer-dark a:hover{color:var(--cyan);}
.footer-dark hr{border-color:rgba(255,255,255,.1);}

/* ---- WhatsApp floating button ---- */
.whatsapp-fab{
  position:fixed; inset-inline-end:22px; inset-block-end:22px; z-index:60;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow:0 12px 28px rgba(37,211,102,.45);
}
.whatsapp-fab:hover{background:#1DA851; color:#fff;}