/* Landing Page Styles - uses design tokens */
:root {
  /* fallback if tokens not loaded (should be loaded from style.css) */
  --lp-gradient-start: var(--color-primary, #5b6be4);
  --lp-gradient-end: var(--color-secondary, #7f8cff);
}

body.landing-page {
  background: var(--page-bg, #f4f6fb);
  font-family: 'Cairo', system-ui, sans-serif;
  overflow-x: hidden;
}

.hero-gradient {
  background: linear-gradient(135deg, var(--lp-gradient-start) 0%, var(--lp-gradient-end) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-gradient::before {
  content: "";
  position: absolute;inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(255,255,255,0.12), transparent 65%);
  pointer-events: none;
}
.hero-content {position: relative; z-index:1;}
.hero-title {font-size:3.2rem;font-weight:800;line-height:1.1;}
.hero-subtitle {font-size:1.25rem;max-width:640px;}
.hero-illustration {font-size:15rem;opacity:.18;}

.btn-custom {padding:14px 36px;font-weight:600;border-radius:var(--radius-pill);transition:var(--transition-fast);} 
.btn-light-custom {background:#fff;color:var(--color-primary);border:none;box-shadow:0 4px 18px rgba(0,0,0,0.12);} 
.btn-light-custom:hover {transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.22);} 
.btn-outline-custom {border:2px solid #fff;color:#fff;} 
.btn-outline-custom:hover {background:#fff;color:var(--color-primary);} 

.features-section {padding:80px 0;background:var(--page-bg-alt,#eef2f7);} 
.feature-card {background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-card);padding:28px;text-align:center;box-shadow:var(--card-shadow);transition:var(--transition-fast);height:100%;} 
.feature-card:hover {transform:translateY(-6px);box-shadow:var(--card-shadow-hover);} 
.feature-icon {width:80px;height:80px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.18);} 
.feature-title {font-size:1.2rem;font-weight:700;color:var(--color-text);} 
.feature-description {color:var(--color-text-muted);font-size:.95rem;line-height:1.5;}

.stats-section {background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);padding:60px 0;color:#fff;} 
.stat-box {text-align:center;padding:16px;} 
.stat-number {font-size:2.7rem;font-weight:800;display:block;margin-bottom:6px;} 
.stat-label {font-size:1rem;opacity:.9;}

.cta-section {padding:90px 0;text-align:center;} 
.cta-title {font-size:2.4rem;font-weight:700;color:var(--color-text);} 

@media (max-width:992px){.hero-title{font-size:2.4rem;} .hero-illustration{font-size:10rem;} }
@media (max-width:768px){.hero-title{font-size:2.1rem;} .hero-subtitle{font-size:1.05rem;} .btn-custom{display:block;width:100%;margin:10px 0;} .feature-card{padding:22px;} }
/* Accessibility: Skip link style (Bootstrap provides visibility, we add theming) */
.skip-link {
  position: absolute;
  top: 0; inset-inline-start: 0;
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  border-radius: 0 0 10px 10px;
  z-index: 1000;
}

/* Animation utilities */
[data-animate] {opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1);} 
[data-animate].in-view {opacity:1; transform:translateY(0);} 

[data-animate="fade-in"] {transform:none;} 
[data-animate="fade-in"].in-view {opacity:1;} 

/* Allow stagger via transition-delay inline from data-delay */