[data-animate]{opacity:0;transform:translateY(12px);transition:all .6s ease}
/* fallback hero bg */
.hero-fallback{background:linear-gradient(135deg,#16234b,#2a3d7a)}
a:focus,button:focus,input:focus,textarea:focus{outline-color:#FFD700;outline-offset:2px}

/* Typography */
body{font-family:'Inter','Tajawal',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}
html[dir="rtl"] body{font-family:'Tajawal','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}

/* Mobile visibility helpers */
@media (max-width: 768px){
  .box-navigation{display:none !important}
  .mobile-cta{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;background:rgba(22,35,75,.95);border:1px solid rgba(255,255,255,.15);padding:8px 10px;border-radius:9999px;z-index:60;box-shadow:0 10px 25px rgba(0,0,0,.2)}
  .mobile-cta .btn{padding:.5rem .875rem}
}

/* Logo styling */
header a img{
  transition:all .3s ease;
  filter:brightness(1);
}
header a:hover img{
  transform:scale(1.05);
  filter:brightness(1.1);
}

/* Header nav underline */
#main-nav a{position:relative}
#main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,#FFD700,rgba(255,215,0,0));opacity:0;transform:scaleX(0);transform-origin:left;transition:all .25s ease}
#main-nav a:hover::after,#main-nav a.text-gold::after{opacity:1;transform:scaleX(1)}
#main-nav a.text-gold::after{background:linear-gradient(90deg,#FFD700,#FFD700)}

/* Mobile nav animation */
#mobile-nav{max-height:0;overflow:hidden;transition:max-height .3s ease}
#mobile-nav.open{max-height:400px}

/* Buttons */
.btn{display:inline-block;border-radius:9999px;padding:.625rem 1.25rem;font-weight:600;transition:all .2s ease}
.btn-sm{padding:.25rem .5rem;font-size:.875rem}
.btn-primary{background:#FFD700;color:#111827;box-shadow:0 10px 20px rgba(255,215,0,.25)}
.btn-primary:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-secondary{background:#16234b;color:#fff}
.btn-secondary:hover{opacity:.95;transform:translateY(-1px)}
.btn-danger{background:#b22134;color:#fff}
.btn-danger:hover{opacity:.95;transform:translateY(-1px)}

/* Cards */
.agu-card{border-radius:1rem;box-shadow:0 10px 25px rgba(22,35,75,.06);border:1px solid rgba(22,35,75,.08);background:#fff}
.agu-card:hover{box-shadow:0 14px 30px rgba(22,35,75,.12);transform:translateY(-2px)}
.agu-card img{transition:transform .4s ease}
.agu-card:hover img{transform:scale(1.03)}

/* Modern helpers */
.glass{background:rgba(255,255,255,.06);backdrop-filter:saturate(180%) blur(12px);border:1px solid rgba(255,255,255,.25)}
.list-check{list-style:none;padding-left:0}
.list-check li{position:relative;padding-left:1.5rem}
.list-check li::before{content:"\2713";position:absolute;left:0;top:0;color:#FFD700;font-weight:700}
.section-gradient{background:linear-gradient(180deg,#f8fafc,transparent)}
.stat-card .value{font-size:1.875rem;line-height:2.25rem;font-weight:800}
.stat-card .label{color:#6B7280}

/* Section accents */
.accent-bar{width:48px;height:4px;background:#FFD700;border-radius:9999px}
.section-lead{color:#4B5563}

/* Form focus ring */
input,textarea,select{outline:none}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(255,215,0,.35);border-color:#FFD700}

/* Badges */
.badge{display:inline-block;border-radius:9999px;padding:.25rem .5rem;font-size:.75rem;font-weight:700}
.badge-new{background:#FEF3C7;color:#92400E}
.badge-read{background:#E5E7EB;color:#111827}
.badge-replied{background:#DCFCE7;color:#065F46}

/* Tables */
.table{border-radius:.75rem;overflow:hidden}
.table thead{background:#F3F4F6}
.table tbody tr{border-top:1px solid #E5E7EB}
.table-zebra tbody tr:nth-child(even){background:#FAFAFA}

/* Icon circle - Modern Enhanced with Glassmorphism */
.icon-circle{
  width:4rem;
  height:4rem;
  border-radius:1.25rem;
  background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(255,215,0,.08));
  backdrop-filter:blur(10px);
  color:#FFD700;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  position:relative;
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 8px 20px rgba(255,215,0,.12), inset 0 1px 0 rgba(255,255,255,.2);
  border:1px solid rgba(255,215,0,.2);
}
.icon-circle::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:1.25rem;
  padding:2px;
  background:linear-gradient(135deg,#FFD700,rgba(255,215,0,.4),#FFD700);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity .4s ease;
  z-index:-1;
}
.icon-circle::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:1.25rem;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent 70%);
  opacity:0;
  transition:opacity .4s ease;
}
.icon-circle:hover{
  transform:translateY(-6px) scale(1.08) rotate(2deg);
  background:linear-gradient(135deg,rgba(255,215,0,.25),rgba(255,215,0,.15));
  box-shadow:0 12px 32px rgba(255,215,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
  border-color:rgba(255,215,0,.4);
}
.icon-circle:hover::before{
  opacity:1;
}
.icon-circle:hover::after{
  opacity:1;
}

/* Icon circle variants */
.icon-circle-lg{
  width:5rem;
  height:5rem;
  font-size:2rem;
  border-radius:1.5rem;
}
.icon-circle-sm{
  width:3rem;
  height:3rem;
  font-size:1.125rem;
  border-radius:1rem;
}

/* Modern feature icon cards with enhanced layout */
.feature-icon-card{
  position:relative;
  overflow:hidden;
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-icon-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#FFD700,#16234b,#FFD700);
  background-size:200% 100%;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s ease;
  animation:shimmer 3s infinite;
}
.feature-icon-card:hover::before{
  transform:scaleX(1);
}
@keyframes shimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Enhanced stat cards with icons - Modern Design */
.stat-card-enhanced{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
  border:1px solid rgba(22,35,75,.08);
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card-enhanced::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#FFD700,#16234b);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.stat-card-enhanced:hover::before{
  transform:scaleX(1);
}
.stat-card-enhanced::after{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle,rgba(255,215,0,.12),transparent 70%);
  opacity:0;
  transition:opacity .5s ease;
}
.stat-card-enhanced:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(22,35,75,.12);
}
.stat-card-enhanced:hover::after{
  opacity:1;
}
.stat-card-enhanced .icon-wrapper{
  width:5rem;
  height:5rem;
  border-radius:1.5rem;
  background:linear-gradient(135deg,rgba(22,35,75,.08),rgba(22,35,75,.03));
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.5rem;
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  box-shadow:0 4px 12px rgba(22,35,75,.08);
}
.stat-card-enhanced .icon-wrapper::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:1.5rem;
  background:linear-gradient(135deg,#FFD700,rgba(255,215,0,.3));
  opacity:0;
  transition:opacity .4s ease;
  z-index:-1;
}
.stat-card-enhanced:hover .icon-wrapper{
  transform:scale(1.15) rotate(8deg);
  background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(255,215,0,.1));
  box-shadow:0 8px 24px rgba(255,215,0,.2);
}
.stat-card-enhanced:hover .icon-wrapper::before{
  opacity:1;
}
.stat-card-enhanced .icon-wrapper i{
  font-size:2rem;
  color:#16234b;
  transition:all .4s ease;
  position:relative;
  z-index:1;
}
.stat-card-enhanced:hover .icon-wrapper i{
  color:#FFD700;
  transform:scale(1.1);
}
.stat-card-enhanced .value{
  font-size:3rem;
  line-height:1;
  font-weight:900;
  background:linear-gradient(135deg,#16234b 0%,#2a3d7a 50%,#FFD700 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:.75rem;
  animation:gradientShift 3s ease infinite;
}
@keyframes gradientShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.stat-card-enhanced .label{
  color:#6B7280;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.025em;
}

/* Modern feature grid cards */
.feature-card-modern{
  position:relative;
  overflow:hidden;
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-card-modern::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#FFD700,#16234b);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s ease;
}
.feature-card-modern:hover::before{
  transform:scaleX(1);
}
.feature-card-modern .icon-circle{
  margin-bottom:1.5rem;
  position:relative;
  z-index:2;
}
.feature-card-modern:hover{
  transform:translateY(-8px);
}
.feature-card-modern img{
  border-radius:.75rem;
  transition:all .5s ease;
}
.feature-card-modern:hover img{
  transform:scale(1.08) translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.15);
}

/* Quick feature cards (horizontal layout) */
.quick-feature-card{
  position:relative;
  overflow:hidden;
  transition:all .3s ease;
  background:linear-gradient(135deg,#ffffff,#f8fafc);
}
.quick-feature-card::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:60px;
  height:60px;
  background:radial-gradient(circle,rgba(255,215,0,.1),transparent);
  border-radius:0 0 0 100%;
  opacity:0;
  transition:opacity .3s ease;
}
.quick-feature-card:hover::after{
  opacity:1;
}
.quick-feature-card:hover{
  transform:translateX(4px);
  box-shadow:0 8px 24px rgba(22,35,75,.1);
}
.quick-feature-card .icon-circle{
  flex-shrink:0;
}

/* Breadcrumb */
.breadcrumb{font-size:.875rem;color:#6B7280}
.breadcrumb a{color:#374151}
.breadcrumb a:hover{color:#16234b}

/* Modern Social Icons Footer */
.social-icon-footer{
  width:3rem;
  height:3rem;
  border-radius:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.9);
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}
.social-icon-footer::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#FFD700,rgba(255,215,0,.5));
  opacity:0;
  transition:opacity .4s ease;
}
.social-icon-footer i{
  font-size:1.25rem;
  position:relative;
  z-index:1;
  transition:transform .4s ease;
}
.social-icon-footer:hover{
  transform:translateY(-4px) scale(1.1);
  background:rgba(255,255,255,.15);
  border-color:rgba(255,215,0,.5);
  box-shadow:0 8px 24px rgba(255,215,0,.2);
}
.social-icon-footer:hover::before{
  opacity:1;
}
.social-icon-footer:hover i{
  transform:scale(1.15) rotate(5deg);
  color:#fff;
}

/* Contact Page Icon Enhancements */
.contact-info-item{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.75rem;
  border-radius:.75rem;
  transition:all .3s ease;
}
.contact-info-item:hover{
  background:rgba(255,215,0,.05);
  transform:translateX(4px);
}
.contact-info-item i{
  width:2.5rem;
  height:2.5rem;
  border-radius:.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(255,215,0,.08));
  color:#FFD700;
  font-size:1.125rem;
  transition:all .3s ease;
}
.contact-info-item:hover i{
  transform:scale(1.1) rotate(5deg);
  background:linear-gradient(135deg,rgba(255,215,0,.25),rgba(255,215,0,.15));
}