:root {
  /* ===== Brand Colors from Logo ===== */
  --c-primary:       #00AEEF;
  --c-primary-dark:  #0092CC;
  --c-primary-darker:#006E99;
  --c-primary-light: #33C0F5;
  --c-primary-50:    #E6F7FD;
  --c-primary-100:   #B3E6F9;

  --c-accent:        #F7941D;
  --c-accent-dark:   #E07A00;
  --c-accent-light:  #FDB86A;
  --c-accent-50:     #FEF3E6;

  --c-green:         #8DC63F;
  --c-red:           #ED1C24;

  --c-dark:          #0F1A1A;
  --c-dark-2:        #1A2A2A;
  --c-dark-3:        #243030;
  --c-text:          #2C3A3A;
  --c-text-light:    #607070;
  --c-text-muted:    #90A5A5;

  --c-bg:            #FFFFFF;
  --c-bg-soft:       #F4F9FC;
  --c-bg-soft-2:     #EAF5FB;
  --c-border:        #D8EEFA;
  --c-border-2:      #E8EFF0;

  --c-success:       #2EA36B;
  --c-error:         #E0524D;

  /* ===== Shadows ===== */
  --shadow-xs:  0 1px 4px rgba(0,174,239,.08);
  --shadow-sm:  0 2px 10px rgba(0,100,160,.07);
  --shadow-md:  0 8px 28px rgba(0,100,160,.10);
  --shadow-lg:  0 20px 55px rgba(0,100,160,.14);
  --shadow-xl:  0 32px 80px rgba(0,100,160,.20);

  /* ===== Radii ===== */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;

  /* ===== Transitions ===== */
  --t: .35s cubic-bezier(.4, 0, .2, 1);

  /* ===== Typography ===== */
  --font: 'Cairo', sans-serif;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:78px; }
body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.7;
  overflow-x: hidden;
}
::selection { background: var(--c-primary); color:#fff; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ===== Buttons ===== */
.btn { font-family:var(--font); font-weight:600; border-radius:var(--r-md); transition:var(--t); border:none; }

.btn-primary {
  background: var(--c-primary);
  color:#fff;
  padding:.78rem 1.8rem;
  font-weight:700;
  border-radius:var(--r-md);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  box-shadow: 0 6px 18px rgba(0,174,239,.30);
}
.btn-primary:hover {
  background: var(--c-primary-dark);
  color:#fff;
  transform:translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,174,239,.40);
}

.btn-accent {
  background: var(--c-accent);
  color:#fff;
  padding:.78rem 1.8rem;
  font-weight:700;
  border-radius:var(--r-md);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  box-shadow: 0 6px 18px rgba(247,148,29,.28);
}
.btn-accent:hover {
  background: var(--c-accent-dark);
  color:#fff;
  transform:translateY(-3px);
  box-shadow: 0 10px 26px rgba(247,148,29,.38);
}

.btn-outline {
  background:transparent;
  color: var(--c-primary);
  border:2px solid var(--c-primary);
  padding:.72rem 1.6rem;
  font-weight:700;
  border-radius:var(--r-md);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:var(--t);
}
.btn-outline:hover {
  background: var(--c-primary);
  color:#fff;
  transform:translateY(-3px);
}

.btn-ghost-white {
  background:rgba(255,255,255,.12);
  color:#fff;
  border:2px solid rgba(255,255,255,.45);
  padding:.72rem 1.6rem;
  border-radius:var(--r-md);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:var(--t);
  backdrop-filter:blur(4px);
}
.btn-ghost-white:hover {
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.8);
  color:#fff;
}

.btn-whatsapp {
  background:#25D366;
  color:#fff;
  padding:.6rem 1.3rem;
  border-radius:var(--r-md);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:var(--t);
}
.btn-whatsapp:hover {
  background:#1DA851;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(37,211,102,.35);
}

.btn-light {
  background:#fff;
  color:var(--c-primary-darker);
  padding:.78rem 1.8rem;
  font-weight:700;
  border-radius:var(--r-md);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:var(--t);
}
.btn-light:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  color:var(--c-primary-darker);
}

/* ===== Layout Helpers ===== */
.section { padding:5.5rem 0; }
.section-sm { padding:3.5rem 0; }

.section-badge {
  display:inline-block;
  background:var(--c-primary-50);
  color:var(--c-primary-dark);
  font-weight:700;
  font-size:.82rem;
  padding:.32rem .95rem;
  border-radius:50px;
  margin-bottom:.8rem;
  letter-spacing:.03em;
}
.section-title {
  font-size:2.1rem;
  font-weight:900;
  color:var(--c-dark);
  line-height:1.25;
  margin-bottom:.5rem;
}
.section-desc {
  color:var(--c-text-light);
  font-size:1rem;
  margin-top:.4rem;
}
.section-head { max-width:640px; }
.section-head.center { margin-inline:auto; text-align:center; }

/* ===== Navbar ===== */
.navbar {
  background:transparent;
  padding:1rem 0;
  transition:var(--t);
  z-index:1000;
  position:fixed;
  top:0; left:0; right:0;
}
.navbar.scrolled, .navbar.solid {
  background:rgba(255,255,255,.97);
  box-shadow:var(--shadow-md);
  padding:.55rem 0;
  backdrop-filter:blur(12px);
}
.navbar .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; }

/* Brand */
.nav-brand {
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-shrink:0;
}
.nav-brand img { height:52px; width:auto; transition:var(--t); }
.navbar.scrolled .nav-brand img, .navbar.solid .nav-brand img { height:44px; }

/* Menu */
.nav-menu {
  display:flex;
  align-items:center;
  gap:.25rem;
  list-style:none;
  margin:0;
}
.nav-menu .nav-link {
  color:rgba(255,255,255,.92);
  font-weight:600;
  font-size:.92rem;
  padding:.45rem .85rem;
  border-radius:var(--r-sm);
  transition:var(--t);
  position:relative;
  white-space:nowrap;
}
.navbar.scrolled .nav-menu .nav-link,
.navbar.solid .nav-menu .nav-link { color:var(--c-text); }

.nav-menu .nav-link:hover,
.nav-menu .nav-link.active {
  color:var(--c-primary) !important;
}
.nav-menu .nav-link.active::after {
  content:'';
  position:absolute;
  bottom:-2px; right:.85rem; left:.85rem;
  height:2.5px;
  background:var(--c-primary);
  border-radius:2px;
}

/* Hamburger */
.nav-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:.4rem;
  border:none;
  background:transparent;
}
.nav-toggle span {
  display:block;
  width:24px; height:2.5px;
  background:#fff;
  border-radius:2px;
  transition:var(--t);
}
.navbar.scrolled .nav-toggle span,
.navbar.solid .nav-toggle span { background:var(--c-dark); }
.nav-toggle.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* ===== Footer ===== */
.footer {
  background:var(--c-dark);
  color:rgba(255,255,255,.7);
  padding:4.5rem 0 0;
}
.footer-logo img { height:56px; width:auto; margin-bottom:1rem; }
.footer-about { font-size:.92rem; line-height:1.85; max-width:320px; }
.footer-title {
  color:#fff;
  font-size:1rem;
  font-weight:700;
  margin-bottom:1.2rem;
  padding-bottom:.55rem;
  position:relative;
}
.footer-title::after {
  content:'';
  position:absolute;
  bottom:0; right:0;
  width:36px; height:3px;
  background:var(--c-accent);
  border-radius:3px;
}
.footer-links li { padding:.3rem 0; }
.footer-links a {
  color:rgba(255,255,255,.65);
  font-size:.88rem;
  transition:var(--t);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.footer-links a::before {
  content:'›';
  color:var(--c-accent);
  font-weight:700;
}
.footer-links a:hover { color:var(--c-primary-light); padding-right:.3rem; }
.footer-contact-list li {
  display:flex; align-items:flex-start;
  gap:.6rem; padding:.35rem 0;
  font-size:.88rem; color:rgba(255,255,255,.65);
}
.footer-contact-list i { color:var(--c-accent); margin-top:.2rem; min-width:14px; }
.footer-contact-list a { color:rgba(255,255,255,.65); transition:var(--t); }
.footer-contact-list a:hover { color:var(--c-primary-light); }

.social-bar { display:flex; gap:.5rem; margin-top:1.2rem; }
.social-bar a {
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
  transition:var(--t);
}
.social-bar a:hover { transform:translateY(-3px); }
.social-bar a.fb:hover  { background:#1877F2; }
.social-bar a.tk:hover  { background:#000; }
.social-bar a.wa:hover  { background:#25D366; }
.social-bar a.li:hover  { background:#0A66C2; }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.07);
  padding:1.4rem 0;
  margin-top:3rem;
  text-align:center;
  font-size:.85rem;
}

/* ===== WhatsApp Float ===== */
.wa-float {
  position:fixed;
  bottom:1.6rem; left:1.6rem;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.65rem;
  z-index:999;
  box-shadow:0 6px 22px rgba(37,211,102,.42);
  transition:var(--t);
  animation:waPulse 2.5s infinite;
}
.wa-float:hover { transform:scale(1.12); color:#fff; }
@keyframes waPulse {
  0%,100%{ box-shadow:0 6px 22px rgba(37,211,102,.42); }
  50%    { box-shadow:0 6px 22px rgba(37,211,102,.42), 0 0 0 14px rgba(37,211,102,0); }
}

/* ===== Back to top ===== */
.back-top {
  position:fixed;
  bottom:1.6rem; right:1.6rem;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--c-primary);
  color:#fff;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  z-index:999;
  opacity:0; visibility:hidden;
  transform:translateY(16px);
  transition:var(--t);
  box-shadow:var(--shadow-md);
}
.back-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.back-top:hover { background:var(--c-primary-dark); transform:translateY(-3px); }

/* Placeholder styling for unloaded/text images */
img[src$=".jpg"]:not([src^="http"]),
img[src$=".png"]:not([src^="http"]) {
  background: #EAF5FB url('images/placeholder.svg') center/50% no-repeat;
  min-height: 80px;
}

.reveal {
  opacity:0;
  transform:translateY(36px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ===== Page Hero ===== */
.page-hero {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark-2) 50%, var(--c-primary-darker) 100%);
  padding:9rem 0 4rem;
  position:relative;
  overflow:hidden;
}
.page-hero::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 80% 50%, rgba(0,174,239,.18) 0%, transparent 60%),
              radial-gradient(circle at 10% 80%, rgba(247,148,29,.1) 0%, transparent 40%);
}
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { color:#fff; font-size:2.8rem; font-weight:900; }
.page-hero .breadcrumb { background:transparent; padding:0; margin-top:.5rem; }
.page-hero .breadcrumb-item,
.page-hero .breadcrumb-item a { color:rgba(255,255,255,.7); font-size:.9rem; }
.page-hero .breadcrumb-item.active { color:var(--c-accent-light); }
.page-hero .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.4); }

/* ===== CTA Strip ===== */
.cta-strip {
  background:linear-gradient(100deg, var(--c-primary-darker) 0%, var(--c-primary) 60%, var(--c-primary-light) 100%);
  padding:3.5rem 0;
  position:relative; overflow:hidden;
}
.cta-strip::after {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 90% 50%, rgba(247,148,29,.18) 0%, transparent 50%);
}
.cta-strip .container { position:relative; z-index:2; }
.cta-strip h2 { color:#fff; font-size:1.9rem; font-weight:800; margin-bottom:.4rem; }
.cta-strip p  { color:rgba(255,255,255,.85); font-size:1rem; margin:0; }

/* ===== Stats Bar ===== */
.stats-section { background:var(--c-dark); padding:3rem 0; }
.stat-box { text-align:center; padding:1.5rem .5rem; border-inline-end:1px solid rgba(255,255,255,.07); }
.stat-box:last-child { border:none; }
.stat-num  { font-size:2.7rem; font-weight:900; color:var(--c-accent-light); display:inline; }
.stat-plus { font-size:2.7rem; font-weight:900; color:var(--c-accent-light); }
.stat-box p { color:rgba(255,255,255,.65); font-size:.88rem; margin:.2rem 0 0; }

/* ===== Responsive Navbar ===== */
@media(max-width:991px){
  .nav-toggle { display:flex; }
  .nav-actions { display:none !important; }
  .nav-menu {
    display:none;
    position:absolute;
    top:100%; right:0; left:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(16px);
    flex-direction:column;
    gap:.15rem;
    padding:1rem 1.2rem 1.5rem;
    box-shadow:var(--shadow-lg);
    border-top:1px solid var(--c-border);
  }
  .nav-menu.open { display:flex; }
  .nav-menu .nav-link { color:var(--c-text) !important; padding:.6rem .8rem; }
  .nav-menu .nav-link:hover,
  .nav-menu .nav-link.active { color:var(--c-primary) !important; }
}

@media(max-width:575px){
  .section  { padding:4rem 0; }
  .section-title { font-size:1.65rem; }
  .page-hero h1 { font-size:2rem; }
  .wa-float { width:50px; height:50px; font-size:1.4rem; bottom:1rem; left:1rem; }
  .back-top { bottom:1rem; right:1rem; }
}

@media(max-width:767px){
  .stat-box { border-inline-end:none; border-bottom:1px solid rgba(255,255,255,.07); }
  .stat-box:last-child { border:none; }
}