* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --navy:#2f2d63;
  --dark-navy:#1a1940;
  --gold:#cba85b;
  --light-gold:#e5d5a8;
  --gray:#f8f9fa;
}

body{
  font-family:'Cairo',sans-serif;
  background:#fff; color:#1f2937; line-height:1.7;
  overflow-x:hidden;
}

.container{ max-width:1280px; margin:0 auto; padding:0 2rem; }

/* Top Bar */
.top-bar{
  background:linear-gradient(90deg,var(--dark-navy) 0%,var(--navy) 100%);
  color:#fff; padding:.4rem 0; font-size:.8rem;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.top-bar-content{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.top-bar a{ color:#fff; text-decoration:none; display:flex; align-items:center; gap:.6rem; transition:.3s; font-weight:500; }
.top-bar a:hover{ color:var(--gold); transform:translateX(-3px); }
.top-bar-right{ display:flex; align-items:center; gap:.6rem; color:#d1d5db; font-weight:500; }

/* Header */
header{
  background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.08);
  position:sticky; top:0; z-index:100; backdrop-filter:blur(10px);
}
.header-content{ display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; gap:1.5rem; }
.logo-section{ display:flex; align-items:center; justify-content:flex-start; }
/* Logo */
.logo-img{
  max-height: 72px;      /* كان 115px */
  max-width: 300px;      /* يمنع التمدد العرضي */
  width: auto;
  object-fit: contain;
  transition: transform .3s ease, max-height .2s ease;
}

/* تباعد الهيدر */
.header-content{ padding: .4rem 0 }

/* لو الشعار كبير على اللابتوب */
@media (max-width: 1200px){
  .logo-img{ max-height: 64px; max-width: 260px; }
}

/* تابلت */
@media (max-width: 992px){
  .logo-img{ max-height: 56px; max-width: 240px; }
}

/* جوال */
@media (max-width: 576px){
  .logo-img{ max-height: 44px; max-width: 200px; }
}

/* تصغير إضافي عند التمرير */
header.is-scrolled .logo-img{ max-height: 40px }
header.is-scrolled .header-content{ padding: .25rem 0 }

.logo-img:hover{ transform:scale(1.02); }
.header-nav{ display:flex; align-items:center; gap:1.5rem; }
.back-link{
  color:var(--navy); text-decoration:none; font-weight:600; font-size:.9rem;
  display:flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem;
  border-radius:10px; transition:.3s; border:2px solid transparent; background:var(--gray);
}
.back-link:hover{ background:var(--navy); color:#fff; border-color:var(--navy); transform:translateX(3px); }
.badge{
  padding:.6rem 1.3rem; border-radius:50px; font-size:.85rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--gold) 0%,#d4a853 100%);
  box-shadow:0 4px 15px rgba(203,168,91,.3); white-space:nowrap; animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

/* Hero */
.hero{
  background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);
  padding:5rem 0 6rem; text-align:center; position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; top:0; left:0; right:0; height:100%;
  background:
    radial-gradient(circle at 20% 30%, rgba(203,168,91,.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(47,45,99,.05) 0%, transparent 50%);
  pointer-events:none;
}
.hero-content{ position:relative; z-index:10; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.7rem; padding:.7rem 1.5rem;
  border-radius:50px; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.08);
  margin-bottom:2rem; animation:fadeInDown .6s ease-out;
}
.hero h2{ font-size:4rem; font-weight:900; color:var(--navy); margin-bottom:1.5rem; line-height:1.2; animation:fadeInUp .6s ease-out .2s both; }
.hero h2 span{ font-size:3.2rem; color:var(--gold); font-weight:800; display:block; margin-top:.5rem; }
.hero p{ font-size:1.3rem; color:#6b7280; max-width:50rem; margin:0 auto; line-height:1.8; font-weight:500; animation:fadeInUp .6s ease-out .4s both; }

/* Success */
.success-message{ max-width:55rem; margin:3rem auto; padding:0 2rem; }
.success-box{
  background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);
  border:3px solid #10b981; border-radius:24px; padding:3rem; text-align:center;
  box-shadow:0 20px 40px rgba(16,185,129,.15); animation:bounceIn .6s cubic-bezier(.68,-.55,.265,1.55);
}
.success-icon{
  width:5.5rem; height:5.5rem; margin:0 auto 2rem; border-radius:50%;
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(16,185,129,.3);
}
.success-box h3{ font-size:2.5rem; font-weight:800; color:#065f46; margin-bottom:1rem; }
.success-box p{ font-size:1.2rem; color:#047857; font-weight:500; }

/* Packages */
.packages{ padding:5rem 0; background:var(--gray); }
.packages-header{ text-align:center; margin-bottom:4rem; }
.packages-header h3{ font-size:2.5rem; font-weight:800; color:var(--navy); margin-bottom:1rem; }
.packages-header p{ color:#6b7280; font-size:1.1rem; font-weight:500; }

.packages-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2.5rem; margin-bottom:4rem; align-items:stretch; }

.package-card{
  background:#fff; border-radius:20px; overflow:hidden; border:2px solid #e5e7eb;
  transition:.5s cubic-bezier(.4,0,.2,1); position:relative;
  box-shadow:0 4px 20px rgba(0,0,0,.05); display:flex; flex-direction:column; height:100%;
}
.package-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--gold),var(--light-gold));
  transform:scaleX(0); transition:transform .5s ease;
}
.package-card:hover::before{ transform:scaleX(1); }
.package-card:hover{ transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,.12); border-color:var(--gold); }
.package-card.selected{ border:3px solid var(--gold); transform:translateY(-15px) scale(1.02); box-shadow:0 25px 50px rgba(203,168,91,.25); }
.package-card.selected::before{ transform:scaleX(1); }

.recommended-badge{
  background:linear-gradient(90deg,#10b981,#059669); color:#fff; text-align:center;
  padding:.7rem; font-weight:700; font-size:.9rem; box-shadow:0 2px 10px rgba(16,185,129,.3);
}
.selected-check{
  position:absolute; top:1.5rem; right:1.5rem; width:3rem; height:3rem;
  border-radius:50%; background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(16,185,129,.4);
  animation:scaleIn .4s cubic-bezier(.175,.885,.32,1.275); z-index:20;
}
.package-header{ padding:2.5rem 2rem; text-align:center; background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%); transition:.5s; }
.package-card.selected .package-header{ background:linear-gradient(135deg,var(--navy) 0%,var(--dark-navy) 100%); }

.package-icon{
  width:4rem; height:4rem; margin:0 auto 1.5rem; border-radius:16px; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,.1); transition:.3s;
}
.package-card:hover .package-icon{ transform:rotateY(360deg); }
.package-card.selected .package-icon{ background:rgba(203,168,91,.15); box-shadow:0 4px 20px rgba(203,168,91,.3); }

.package-header h3{ font-size:1.8rem; font-weight:800; color:var(--navy); margin-bottom:.5rem; }
.package-card.selected .package-header h3{ color:var(--gold); }
.package-subtitle{ font-size:.95rem; font-weight:600; color:#6b7280; margin-bottom:1.5rem; }
.package-card.selected .package-subtitle{ color:var(--light-gold); }

.package-price{ font-size:3.5rem; font-weight:900; color:var(--navy); letter-spacing:-1px; }
.package-card.selected .package-price{ color:#fff; }
.package-price-unit{ font-size:1.4rem; font-weight:600; color:#6b7280; margin-right:.5rem; }
.package-card.selected .package-price-unit{ color:var(--light-gold); }

.package-vat{ font-size:.8rem; color:#9ca3af; margin-top:.5rem; font-weight:500; }
.package-card.selected .package-vat{ color:var(--light-gold); }

.package-body{ padding:2.5rem; flex:1; display:flex; flex-direction:column; }
.features-list{ list-style:none; margin-bottom:2.5rem; flex:1; }
.features-list li{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.2rem; padding:.5rem 0; }
.feature-check{ flex-shrink:0; width:1.6rem; height:1.6rem; border-radius:50%; background:linear-gradient(135deg,#dcfce7,#bbf7d0); display:flex; align-items:center; justify-content:center; margin-top:.1rem; }
.features-list li span{ color:#374151; font-weight:500; line-height:1.6; }

.select-btn{
  width:100%; padding:1.2rem; border-radius:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--navy) 0%,var(--dark-navy) 100%);
  border:none; cursor:pointer; transition:.3s; font-size:1.1rem; font-family:'Cairo',sans-serif;
  box-shadow:0 4px 15px rgba(47,45,99,.2);
}
.select-btn:hover{ transform:translateY(-3px); box-shadow:0 8px 25px rgba(47,45,99,.3); }

/* Form */
.form-container{ animation:fadeIn .5s ease-out; }
.form-header{
  background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
  border-radius:14px; padding:1.5rem; margin-bottom:2rem; border:2px solid #fbbf24; text-align:center;
  box-shadow:0 4px 15px rgba(251,191,36,.2);
}
.form-header p{ font-weight:700; color:#1f2937; font-size:1.15rem; }

.form-group{ margin-bottom:1.5rem; }
.form-label{ display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; font-weight:700; font-size:.95rem; color:#374151; }
.form-input{
  width:100%; padding:1rem 1.2rem; border-radius:12px; border:2px solid #e5e7eb; font-size:1rem; font-family:'Cairo',sans-serif; transition:.3s; background:#fff;
}
.form-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(251,191,36,.1); transform:translateY(-2px); }
.form-input::placeholder{ color:#9ca3af; }

.submit-btn{
  width:100%; padding:1.2rem; border-radius:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--gold) 0%,#d4a853 100%);
  border:none; cursor:pointer; transition:.3s; font-size:1.1rem; font-family:'Cairo',sans-serif; margin-bottom:1rem;
  box-shadow:0 4px 15px rgba(203,168,91,.3);
}
.submit-btn:hover:not(:disabled){ transform:translateY(-3px); box-shadow:0 8px 25px rgba(203,168,91,.4); }
.submit-btn:disabled{ opacity:.5; cursor:not-allowed; }

.cancel-btn{
  width:100%; padding:.9rem; border-radius:12px; font-weight:600; color:#6b7280; background:transparent;
  border:2px solid #e5e7eb; cursor:pointer; transition:.3s; font-size:.95rem; font-family:'Cairo',sans-serif;
}
.cancel-btn:hover{ background:#f3f4f6; border-color:#d1d5db; }

/* CTA */
.cta-section{
  background:linear-gradient(135deg,var(--navy) 0%,var(--dark-navy) 100%);
  padding:5rem 0; text-align:center; position:relative; overflow:hidden;
}
.cta-section::before{
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(203,168,91,.1) 0%, transparent 70%);
  animation:rotate 20s linear infinite;
}
@keyframes rotate{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.cta-content{ position:relative; z-index:10; }
.cta-section h3{ font-size:2.8rem; font-weight:800; color:#fff; margin-bottom:1.2rem; }
.cta-section p{ font-size:1.3rem; color:#d1d5db; margin-bottom:2.5rem; font-weight:500; }
.cta-btn{
  display:inline-flex; align-items:center; gap:.8rem; padding:1.3rem 3rem; border-radius:14px; font-weight:700; font-size:1.1rem; color:var(--navy);
  background:linear-gradient(135deg,var(--gold) 0%,var(--light-gold) 100%); text-decoration:none; transition:.3s; box-shadow:0 6px 20px rgba(203,168,91,.3);
}
.cta-btn:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 35px rgba(203,168,91,.4); }

/* Footer */
footer{ background:#111827; color:#fff; padding:4rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:3rem; text-align:center; margin-bottom:2rem; }
.footer-section h4{ font-weight:800; font-size:1.4rem; color:var(--gold); margin-bottom:.8rem; }
.footer-section p{ font-size:.95rem; color:#9ca3af; line-height:1.8; }
.footer-link{ color:var(--gold); text-decoration:none; font-weight:700; transition:.3s; display:inline-block; }
.footer-link:hover{ color:var(--light-gold); transform:translateX(-3px); }

/* Helpers / Animations */
@keyframes fadeIn{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeInDown{ from{opacity:0; transform:translateY(-30px)} to{opacity:1; transform:translateY(0)} }
@keyframes scaleIn{ from{transform:scale(0)} to{transform:scale(1)} }
@keyframes bounceIn{ 0%{transform:scale(.3); opacity:0} 50%{transform:scale(1.05)} 70%{transform:scale(.9)} 100%{transform:scale(1); opacity:1} }

.icon{ width:1.25rem; height:1.25rem; display:inline-block; }
.icon-lg{ width:2rem; height:2rem; }
.icon-xl{ width:3.5rem; height:3.5rem; }
.hidden{ display:none !important; }

/* Responsive */
@media (max-width: 968px){
  .hero h2{ font-size:3rem; }
  .hero h2 span{ font-size:2.4rem; }
  .cta-section h3{ font-size:2.2rem; }
}
@media (max-width: 768px){
  .container{ padding:0 1.5rem; }
  .logo-img{ max-width:320px; height:70px; }
  .hero h2{ font-size:2.5rem; }
  .hero h2 span{ font-size:2rem; }
  .hero p{ font-size:1.1rem; }
  .badge{ font-size:.8rem; padding:.5rem 1.2rem; }
  .packages-grid{ grid-template-columns:1fr; }
  .header-nav{ width:100%; justify-content:space-between; flex-wrap:wrap; }
  .packages{ padding:3rem 0; }
  .cta-section h3{ font-size:2rem; }
  .header-content{ padding:.4rem 0; gap:1rem; }
}