:root {
  --brand: #004da6;
  --secondary: #6c757d;
  --line: #eaeef4;
}

* {
  font-family: "Cairo", sans-serif;
}

html {
  scroll-padding-top: 65px;
}
body {
  background: #f1f1f1;
  color: #111827;
}

/*
* links
*/
a {
  text-decoration: none;
}

/*
* cards
*/
.card {
  border-radius: 16px;
  overflow: hidden;
}

/*
* Buttons
*/
.btn {
  border-radius: 12px;
  font-weight:800; 
  padding:.5rem 1rem; 
  box-shadow:var(--shadow-sm, 0 4px 12px rgba(0,0,0,.06));
}
.btn-sm {
  border-radius: 8px;
}
.btn-primary {
  background-color: var(--brand);
}

/*
* Alerts
*/
.alert {
  border-radius: 12px;
}

/*
* Forms
*/
.form-control,
.form-select {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.1);
  font-size: 1rem;
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.06));
}

/*
* Navbar
*/
/* ===== Navbar Styling ===== */
.main-navbar .navbar-brand span {
  color: var(--brand, #004da6);
}
.main-navbar .nav-link {
  font-weight:600;
  color:#333;
  font-size:1rem;
  padding:.5rem 1rem;
}
.main-navbar .nav-link.active,
.main-navbar .nav-link:focus {
  color: var(--brand, #004da6);
}
.main-navbar .btn {
  font-weight:700;
  border-radius:.65rem;
}

/*
* Hero
*/
.section-hero{
  position:relative;
  background:var(--white, #fff);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:clamp(3rem, 6vw, 6rem) 0;
  overflow:hidden;
}

/* decorative background layers */
.section-hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 380px at 100% -10%, rgba(0,77,166,.12), transparent 60%),
    radial-gradient(700px 300px at 0% 100%, rgba(0,77,166,.08), transparent 60%);
}
.section-hero-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.03) 0 1px, transparent 1px 24px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.section-hero .hero-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(1.25rem, 3vw, 3rem);
  align-items:center;
  position:relative;
  z-index:1;
}
@media (max-width: 992px){
  .section-hero .hero-wrap{ grid-template-columns:1fr; }
}
.section-hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:800; font-size:.85rem; color:var(--brand, #004da6);
  background:rgba(0,77,166,.08);
  border:1px solid rgba(0,77,166,.16);
  padding:.45rem .9rem; border-radius:999px; margin-bottom:1rem;
}
.section-hero-title{
  margin:0;
  font-size:clamp(2rem, 3.8vw, 3rem);
  font-weight:900; letter-spacing:-.6px;
  color:var(--ink, #0b1324); line-height:1.12;
}
.section-hero-title .mark{
  background:linear-gradient(transparent 65%, rgba(0,77,166,.18) 0);
  padding-inline:.25rem;
}
.section-hero-subtitle{
  font-size:clamp(1.02rem, 1.2vw, 1.2rem);
  color:var(--muted, #6c757d);
  max-width:48ch; margin-top:1rem;
}
.section-hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.5rem; }
.section-hero-kpis{
  list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-wrap:wrap; gap:1.1rem;
  color:#5f6778; font-size:.95rem;
}
/* media card */
.section-hero-media{
  position:relative; border-radius:calc(var(--radius, 1rem) + 6px);
  background:#f0f3f8; padding:clamp(.6rem, 1vw, 1rem);
  box-shadow:var(--shadow-md, 0 8px 20px rgba(0,0,0,.10));
  overflow:hidden;
}
.section-hero-media::before{
  /* soft glow border */
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background:conic-gradient(from 200deg at 50% 50%, rgba(0,77,166,.28), transparent 55%);
  filter:blur(10px);
}
.section-hero-media img{
  display:block; width:100%; height:auto; border-radius:calc(var(--radius, 1rem) + 2px);
}
.section-hero-media-pill{
  position:absolute; bottom:.9rem; inset-inline-start:.9rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-sm, 0 4px 12px rgba(0,0,0,.06));
  border-radius:999px; padding:.35rem .75rem; font-size:.85rem; font-weight:700; color:var(--brand,#004da6);
}

/*
* Features
*/
.features-section {
  position: relative;
  overflow: hidden;
}
.features-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand, #004da6);
  margin-bottom: .5rem;
}
.features-subtitle {
  color: var(--muted, #6c757d);
  font-size: 1.05rem;
  margin: 0;
}
.features-card {
  background: #f9fafc;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
}
.features-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 12px;
  background: rgba(0,77,166,0.1);
  color: var(--brand, #004da6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin-bottom: 1rem;
}
.features-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: #222;
}
.features-card-text {
  font-size: .95rem;
  color: #666;
  margin: 0;
}

/*
* Statistics
*/
.stats-section {
  background: #f9fafc;
}
.stats-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 2rem 1rem;
}
.stats-number {
  font-size: 2rem;
  font-weight: 900;
  color: var(--brand, #004da6);
  margin-bottom: .5rem;
}
.stats-label {
  font-size: 1rem;
  color: #6c757d;
  font-weight: 500;
}

/*
* Pricing
*/
.section-pricing-card {
  border-radius: 16px;
}

/*
* CTA
*/
.cta-section {
  background: linear-gradient(135deg, var(--brand, #004da6), #0a63d6);
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}
.cta-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 1.25rem;
  padding: 2.5rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.cta-title {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: .5rem;
}
.cta-subtitle {
  font-size: 1.05rem;
  margin: 0;
  color: #f1f3f8;
}
.cta-btn {
  font-weight: 800;
  border-radius: .75rem;
  padding: .9rem 1.2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/*
* Footer
*/
.footer-whatsapp-icon {
  position: fixed;
  background-color: #25D366;
  font-size: 34px;
  bottom: 20px;
  left: 20px;
  border-radius: 60px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 0 rgba(37, 211, 102, 0.7);
  animation: pulse 2s infinite;
  z-index: 9999;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    transform: scale(1);
  }
}

/*
* Auth
*/
.auth-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}
.auth-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(0,77,166,0.08)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.6;
}
.auth-card {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 77, 166, 0.1);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  position: relative;
  z-index: 10;
  transition: all 0.3s ease;
}
.forgot-password {
  color: var(--brand, #004da6);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}
.register-link {
  color: var(--brand, #004da6);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}
.subtitle {
  color: #64748b;
  font-size: 1rem;
  margin-bottom: 2rem;
}
.input-group-text {
  background: transparent;
  border: none;
  color: #6c757d;
  cursor: pointer;
  transition: color 0.3s ease;
}
.input-group-text:hover {
  color: var(--brand, #004da6);
}
@media (max-width: 768px) {
  .auth-card {
    margin: 1rem;
    padding: 2rem 1.5rem;
  }
}

/*
* Contact
*/
.contact-subtitle{ 
  font-size:1.05rem;
}
.contact-grid .col-md-6{ 
  display:flex; 
}
.contact-card{
  gap:1rem; width:100%;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding:1.1rem 1.25rem;
  text-decoration:none;
  color:inherit;
  background-color: #fff;
}
.contact-icon{
  width:3rem; height:3rem;
  display:grid; place-items:center;
  border-radius:12px;
  color:#fff; font-size:1.4rem;
}
.bg-whatsapp{ background:#25D366; }
.bg-instagram{ background:linear-gradient(45deg,#f58529,#feda77,#dd2a7b,#8134af,#515bd4); }
.bg-facebook{ background:#1877F2; }
.bg-email{ background:var(--brand); }
.contact-label{ font-weight:900; color:#222; line-height:1.2; }
.contact-text{ color:#556070; font-size:.95rem; }
.contact-cta{
  background:#f1f4f9; color:#2b3341;
  border:1px solid #e1e6ef;
  padding:.4rem .7rem; border-radius:999px;
  font-weight:800; font-size:.9rem; white-space:nowrap;
}
@media (max-width:575.98px){
  .contact-card{ padding:1rem; }
}