:root {
  --bs-font-sans-serif: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-dark: #071e36;
  --bs-dark-rgb: 7, 30, 54;
  --bs-info: #54b4dc;
  --bs-info-rgb: 84, 180, 220;
  --bs-primary: #1f6fb2;
  --bs-primary-rgb: 31, 111, 178;
  --bs-link-color-rgb: 31, 111, 178;
  --bs-border-radius: 0.75rem;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-size: 1.05rem; }
.btn-primary { --bs-btn-bg: #1f6fb2; --bs-btn-border-color: #1f6fb2; --bs-btn-hover-bg: #155a94; --bs-btn-hover-border-color: #155a94; border-radius: 50rem; padding-inline: 1.5rem; }
.btn-success { border-radius: 50rem; }
.navbar { backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, 0.92) !important; }
.navbar .nav-link { font-weight: 500; white-space: nowrap; font-size: 0.95rem; }
.site-logo { max-height: 50px; }
.page-content { padding-top: 90px; }

.hero { background: #071e36 url("/assets/img/intro-bg.png") center bottom / cover no-repeat; min-height: 650px; }
.page-hero { background: linear-gradient(135deg, #071e36 0%, #1f6fb2 100%); padding-top: 3rem !important; padding-bottom: 3rem !important; }
.page-bg { background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url("/assets/img/joinback.png") center / cover fixed; min-height: 70vh; }

main section h1, main section h2 { position: relative; padding-bottom: 0.75rem; margin-bottom: 1.25rem; font-weight: 500; }
main section h1::after, main section h2::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; margin-inline: auto; width: 60px; height: 4px; border-radius: 4px; background: var(--bs-info); }
main section .card h5 { font-weight: 500; }

.icon-badge { width: 56px; height: 56px; flex-shrink: 0; }
.pkg-card { background: linear-gradient(160deg, #071e36 0%, #1f6fb2 100%); color: #fff; }
.pkg-card .pkg-number { font-size: 5rem; line-height: 1; font-weight: 500; }
.track-frame { height: 75vh; min-height: 520px; }
.icon-circle { width: 110px; height: 110px; transition: transform 0.4s; }
.lift { transition: transform 0.3s, box-shadow 0.3s; }
.lift:hover { transform: translateY(-8px); box-shadow: 0 1rem 2rem rgba(7, 30, 54, 0.18) !important; }
a:hover > .icon-badge { width: 56px; height: 56px; flex-shrink: 0; }
.pkg-card { background: linear-gradient(160deg, #071e36 0%, #1f6fb2 100%); color: #fff; }
.pkg-card .pkg-number { font-size: 5rem; line-height: 1; font-weight: 500; }
.icon-circle { transform: rotate(360deg) scale(1.1); }

.whatsapp-float { position: fixed; bottom: 40px; inset-inline-end: 40px; width: 76px; height: 76px; z-index: 1030; font-size: 42px; display: flex; align-items: center; justify-content: center; animation: pulse 2s infinite; }
.float-y { animation: float-y 4s ease-in-out infinite; }
.fade-in-down { animation: fade-in-down 1s both; }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.3s; }
.js .reveal.show { opacity: 1; transform: none; }
.js .reveal.show.lift:hover { transform: translateY(-8px); transition-delay: 0s; transition-duration: 0.3s; }
.row > :nth-child(2) .reveal { transition-delay: 0.1s; }
.row > :nth-child(3) .reveal { transition-delay: 0.2s; }
.row > :nth-child(4) .reveal { transition-delay: 0.3s; }
.row > :nth-child(5) .reveal { transition-delay: 0.4s; }

@keyframes float-y { 50% { transform: translateY(-14px); } }
@keyframes fade-in-down { from { opacity: 0; transform: translateY(-30px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }