*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#1B2D52;--navy-dark:#142342;--cyan:#00ADEF;--cyan-hover:#0095d0;
  --cyan-light:rgba(0,173,239,.08);--gold:#F5B800;
  --slate:#4A4A4A;--slate-light:#6B7280;--white:#FFF;--off-white:#F8FAFC;
  --border:#E2E8F0;--border-focus:#00ADEF;--error:#EF4444;
  --shadow-md:0 4px 20px rgba(27,45,82,.08);--shadow-lg:0 12px 40px rgba(27,45,82,.12);
  --radius:12px;--radius-lg:20px
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--cyan);color:var(--white);padding:10px 20px;border-radius:0 0 8px 8px;font-weight:700;font-size:14px;z-index:9999;text-decoration:none;transition:top .2s ease}.skip-link:focus{top:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;color:var(--navy);background:var(--white);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ===== HEADER BAR ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:0 24px;
}
.header-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.header-logo{height:42px;display:block}
.header-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cyan);color:var(--white);
  padding:10px 24px;border-radius:30px;
  font-family:'Cairo',sans-serif;font-size:14px;font-weight:800;
  border:none;cursor:pointer;text-decoration:none;
  transition:all .3s ease;
  box-shadow:0 3px 12px rgba(0,173,239,.25);
}
.header-btn:hover{
  background:var(--cyan-hover);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(0,173,239,.35);
}
.header-btn:active{transform:translateY(0)}
.header-btn-dot{
  width:7px;height:7px;background:var(--white);border-radius:50%;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ===== HERO ===== */
.hero{
  position:relative;width:100%;overflow:hidden;background:#000;
  height:80vh;min-height:520px;max-height:900px;
}
.hero-media-wrapper{position:relative;display:grid;width:100%;height:100%;background:#000}
.hero-video,.hero-cover{
  display:block;grid-area:1 / 1;width:100%;height:100%;
  object-fit:contain;object-position:center top;
}
.hero-video{
  position:relative;z-index:1;
  opacity:1;
  transition:opacity .9s ease;
}
.hero-video.fading{opacity:0;pointer-events:none}
.hero-video.done{display:none}
.hero-cover{
  position:relative;z-index:2;
  opacity:0;
  transition:opacity .9s ease;
  pointer-events:none;
}
.hero-cover.visible{opacity:1}
.scroll-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;animation:fadeIn .6s ease forwards 1.5s;cursor:pointer}
@keyframes fadeIn{to{opacity:1}}
.scroll-hint span {
  font-size:32px;
  color:rgba(255,255,255, 1);
  font-weight:600;
  text-shadow:0 1px 1px rgba(0,0,0,.8);
  background-color: rgba(0, 0, 0, .5);
  padding: 0px 8px 2px 8px;
  border: 2px;
  border-radius: 5px;
}
.scroll-arrow{width:24px;height:24px;border-left:2px solid rgba(255,255,255,.6);border-bottom:2px solid rgba(255,255,255,.6);transform:rotate(-45deg);animation:bounceDown 1.5s ease-in-out infinite}
@keyframes bounceDown{0%,100%{transform:rotate(-45deg) translateY(0)}50%{transform:rotate(-45deg) translateY(6px)}}

.form-subtitle{text-align:center;font-size:clamp(14px,2.5vw,18px);font-weight:700;color:var(--gold);margin-top:-20px;margin-bottom:32px;line-height:2;opacity:0;transform:translateY(20px)}.form-subtitle.visible{animation:fadeUp .6s ease forwards .1s}.form-subtitle .highlight{display:inline-block;background:linear-gradient(135deg,var(--gold),#E5A700);color:var(--navy-dark);padding:2px 8px;border-radius:6px;font-weight:900;margin:0 2px;white-space:nowrap}.form-subtitle-mobile{display:none;list-style:none;padding:0;margin:-16px auto 28px;max-width:720px;text-align:right;opacity:0;transform:translateY(20px)}.form-subtitle-mobile.visible{animation:fadeUp .6s ease forwards .1s}.form-subtitle-mobile li{position:relative;padding-right:20px;margin-bottom:8px;font-size:15px;font-weight:700;color:var(--gold);line-height:1.6}.form-subtitle-mobile li::before{content:'\25CF';position:absolute;right:0;top:0;color:var(--gold);font-size:10px;line-height:1.6}.form-subtitle-mobile li strong{color:var(--navy);font-weight:900}@media(max-width:560px){.form-subtitle-desktop{display:none!important}.form-subtitle-mobile{display:block}}
.price-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;opacity:0;max-height:0;overflow:hidden;transition:all .4s ease}.price-row.active{opacity:1;max-height:120px;margin-bottom:22px}.price-box{padding:14px 18px;background:linear-gradient(135deg,rgba(0,173,239,.06),rgba(0,173,239,.02));border:2px solid rgba(0,173,239,.2);border-radius:var(--radius);text-align:center}.price-box-label{font-size:12px;color:var(--slate-light);font-weight:600;margin-bottom:4px}.price-box-value{font-size:18px;font-weight:900;color:var(--navy);direction:ltr}@media(max-width:560px){.price-row{grid-template-columns:1fr 1fr;gap:10px}.price-box{padding:10px 12px}.price-box-label{font-size:11px}.price-box-value{font-size:15px}}
/* ===== FORM ===== */
.form-section{padding:60px 24px 48px;background:var(--white)}
.form-heading{text-align:center;font-size:clamp(22px,3.5vw,32px);font-weight:800;color:var(--navy);margin-bottom:36px;opacity:0;transform:translateY(20px)}
.form-heading.visible{animation:fadeUp .6s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.form-card{max-width:720px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(28px,5vw,48px);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(20px)}
.form-card.visible{animation:fadeUp .6s ease forwards .15s}
.form-group{margin-bottom:22px}
.form-label{display:block;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:8px}
.form-label .required{color:var(--error);margin-right:2px}
.form-input,.form-select{width:100%;padding:14px 18px;font-family:'Cairo',sans-serif;font-size:15px;color:var(--navy);background:var(--off-white);border:2px solid var(--border);border-radius:var(--radius);outline:none;transition:all .3s ease;appearance:none;-webkit-appearance:none}
.form-input::placeholder{color:var(--slate-light);font-weight:400}
.form-input:hover,.form-select:hover{border-color:#CBD5E1;background:var(--white)}
.form-input:focus,.form-select:focus{border-color:var(--border-focus);background:var(--white);box-shadow:0 0 0 4px rgba(0,173,239,.1)}
.form-input.error,.form-select.error{border-color:var(--error);box-shadow:0 0 0 4px rgba(239,68,68,.08)}
.error-msg{font-size:12px;color:var(--error);margin-top:6px;display:none;font-weight:600}
.form-group.has-error .error-msg{display:block}
.select-wrapper{position:relative}
.select-wrapper::after{content:'';position:absolute;left:18px;top:50%;transform:translateY(-50%);width:0;height:0;border-right:6px solid transparent;border-left:6px solid transparent;border-top:6px solid var(--slate-light);pointer-events:none}
.form-select{padding-left:44px;cursor:pointer}
.form-select option{font-family:'Cairo',sans-serif}
.submit-btn{width:100%;padding:16px;margin-top:8px;font-family:'Cairo',sans-serif;font-size:18px;font-weight:800;color:var(--white);background:linear-gradient(135deg,var(--cyan),#0095d0);border:none;border-radius:var(--radius);cursor:pointer;position:relative;overflow:hidden;transition:all .3s ease;box-shadow:0 4px 16px rgba(0,173,239,.3)}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,173,239,.4)}
.submit-btn:active{transform:translateY(0)}
.submit-btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.submit-btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.15);border-radius:50%;transform:translate(-50%,-50%);transition:width .5s ease,height .5s ease}
.submit-btn:hover::after{width:400px;height:400px}
.submit-btn span{position:relative;z-index:1}
.success-overlay{display:none;text-align:center;padding:40px 20px}
.success-overlay.active{display:block}
.success-icon{width:72px;height:72px;background:linear-gradient(135deg,#10B981,#059669);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:scaleIn .5s ease forwards}
@keyframes scaleIn{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.success-icon svg{width:36px;height:36px;color:white}
.success-title{font-size:24px;font-weight:800;color:var(--navy);margin-bottom:10px}
.success-msg{font-size:16px;color:var(--slate);line-height:1.7}

/* ===== BENEFITS ===== */
.benefits-section{padding:60px 24px 72px;background:var(--off-white)}
.benefits-heading{text-align:center;font-size:clamp(22px,3.5vw,30px);font-weight:800;color:var(--navy);margin-bottom:48px;opacity:0;transform:translateY(20px)}
.benefits-heading.visible{animation:fadeUp .6s ease forwards}
.benefits-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.benefit-card{text-align:center;padding:32px 16px;background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border);transition:all .4s ease;opacity:0;transform:translateY(24px)}
.benefit-card.visible{animation:fadeUp .5s ease forwards}
.benefit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(0,173,239,.2)}
.benefit-icon{width:56px;height:56px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:var(--cyan-light);border-radius:16px;transition:all .3s ease}
.benefit-card:hover .benefit-icon{background:linear-gradient(135deg,var(--cyan),#0095d0)}
.benefit-icon svg{width:28px;height:28px;color:var(--cyan);stroke-width:1.5;transition:color .3s ease}
.benefit-card:hover .benefit-icon svg{color:var(--white)}
.benefit-label{font-size:15px;font-weight:700;color:var(--navy);line-height:1.5}

/* ===== FOOTER ===== */
.footer{background:var(--navy-dark);color:rgba(255,255,255,.85);padding:56px 24px 0}
.footer-top{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.5fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand-logo{height:64px;margin-bottom:16px;filter:none}
.footer-brand-desc{font-size:13px;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:20px;max-width:320px}
.footer-social{display:flex;gap:12px}
.social-circle{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:all .3s ease;cursor:pointer;text-decoration:none}
.social-circle:hover{border-color:var(--gold);background:rgba(245,184,0,.1);transform:translateY(-3px)}
.social-circle svg{width:17px;height:17px;color:rgba(255,255,255,.7)}
.social-circle:hover svg{color:var(--gold)}
.footer-col-title{font-size:16px;font-weight:800;color:var(--gold);margin-bottom:18px}
.footer-link{display:block;font-size:14px;color:rgba(255,255,255,.65);text-decoration:none;margin-bottom:11px;transition:color .2s ease}
.footer-link:hover{color:var(--white)}
.footer-branch{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;font-size:13px;color:rgba(255,255,255,.65);line-height:1.6}
.footer-branch svg{width:16px;height:16px;color:var(--gold);flex-shrink:0;margin-top:3px}
.footer-contact-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:14px;color:rgba(255,255,255,.75)}
.footer-contact-row svg{width:16px;height:16px;color:var(--gold);flex-shrink:0}
.footer-contact-row strong{color:var(--white)}
.footer-bottom{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 0;flex-wrap:wrap;gap:16px}
.footer-copyright{font-size:13px;color:rgba(255,255,255,.65)}
.payment-logos{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pay-badge{background:rgba(255,255,255,.08);border-radius:6px;padding:6px 12px;font-size:11px;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.5px;white-space:nowrap}
.back-to-top{position:fixed;bottom:24px;left:24px;width:44px;height:44px;border-radius:12px;background:var(--navy);border:1.5px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:all .3s ease;z-index:50;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.back-to-top.visible{opacity:1;pointer-events:auto}
.back-to-top:hover{background:var(--cyan);border-color:var(--cyan);transform:translateY(-3px)}
.back-to-top svg{width:20px;height:20px;color:var(--white)}

.footer-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}.social-circle:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.back-to-top:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.header-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* ===== RESPONSIVE ===== */
@media(max-width:1024px){.footer-top{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:900px){.benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .site-header{padding:0 16px}
  .form-section{padding:44px 16px 36px}
  .benefits-section{padding:44px 16px 52px}
  .footer{padding:44px 16px 0}
  .footer-top{grid-template-columns:1fr}
  .footer-top{gap:24px;padding-bottom:28px}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-bottom{padding:16px 0}
  .payment-logos{justify-content:center}
  .payment-logos{gap:10px}

  .footer-col-title{text-align:center}
  .footer-link{text-align:center}
  footer-brand-desc{text-align:center}
  .footer-brand{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
    gap: 8px;
  }

}
@media(max-width:560px){
  .hero{height:auto;min-height:0;max-height:none;background:var(--white)}
  .hero-media-wrapper{height:219px;overflow:hidden;background:var(--white)}
  .hero-video,.hero-cover{height:219px;object-fit:cover;object-position:left top}
  .hero-video,.hero-cover{transition:none}
  .hero-video{display:none}
  .hero-cover{opacity:1}
  .header-inner{height:56px}
  .header-logo{height:34px}
  .header-btn{padding:8px 16px;font-size:13px}
  .scroll-hint{bottom:10px;gap:4px}
  .scroll-hint span{font-size:14px}
  .scroll-arrow{width:18px;height:18px}
  .form-heading{margin-bottom:24px}
  .form-subtitle-mobile{margin:-8px auto 22px}
  .form-subtitle-mobile li{font-size:14px}
  .form-card{padding:20px 14px;border-radius:16px}
  .form-group{margin-bottom:18px}
  .form-input,.form-select{padding:12px 14px;font-size:16px}
  .form-select{padding-left:38px}
  .select-wrapper::after{left:14px}
  .submit-btn{padding:14px;font-size:16px}
  .benefits-grid{grid-template-columns:1fr 1fr;gap:14px}
  .benefit-card{padding:24px 12px}
  .benefit-label{font-size:14px}
  .footer-brand-logo{height:52px}
  .footer-brand-desc{max-width:none}
  .back-to-top{bottom:16px;left:16px;width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .scroll-hint{opacity:1!important}
}