*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --blue:#1852b3;
  --blue-dark:#0f3474;
  --blue-deep:#0a1f4e;
  --blue-navy:#060e2b;
  --blue-mid:#2a5cb8;
  --blue-glow:rgba(24,82,179,.06);
  --blue-glow2:rgba(24,82,179,.10);
  --white:#ffffff;
  --off-white:#fafbfd;
  --surface:#f3f5fa;
  --red:#c62828;
  --red-soft:rgba(198,40,40,.10);
  --gray:#6b7280;
  --gray-mid:#8b95a5;
  --gray-light:#e2e5ec;
  --text:#1a2340;
  --text-soft:#4a5568;
  --shadow-xs:0 1px 2px rgba(10,31,78,.04);
  --shadow-sm:0 2px 10px rgba(10,31,78,.06);
  --shadow-md:0 6px 24px rgba(10,31,78,.09);
  --shadow-blue:0 8px 28px rgba(24,82,179,.13);
  --radius:14px;
  --radius-lg:20px;
  --font:'Cairo',sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.0,0,.2,1)
}
html{scroll-behavior:smooth;height:100%}

body{
  font-family:var(--font);
  color:var(--text);
  background:linear-gradient(170deg,var(--white) 0%,var(--off-white) 35%,var(--surface) 100%);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
  height:100%
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 35%,rgba(24,82,179,.03) 0%,transparent 70%);
  pointer-events:none;
  z-index:0
}

.bg-decor{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden
}
.bg-decor .vec{
  position:absolute;
  color:var(--blue);
  opacity:.04;
  filter:none
}
.bg-decor .v-wrench{top:4%;left:3%;width:140px;height:140px;animation:drift-a 24s ease-in-out infinite}
.bg-decor .v-gear-lg{top:8%;right:5%;width:120px;height:120px;opacity:.035;animation:spin-s 70s linear infinite}
.bg-decor .v-gear-sm{bottom:22%;left:4%;width:70px;height:70px;opacity:.03;animation:spin-s 50s linear infinite reverse}
.bg-decor .v-screw{top:34%;right:2%;width:50px;height:50px;opacity:.04;animation:drift-b 20s ease-in-out infinite}
.bg-decor .v-bolt{top:50%;left:1.5%;width:44px;height:44px;opacity:.03;animation:drift-c 22s ease-in-out infinite}
.bg-decor .v-hammer{bottom:8%;right:7%;width:100px;height:100px;opacity:.025;transform:rotate(35deg);animation:drift-a 28s ease-in-out infinite}
.bg-decor .v-toolbox{top:18%;right:18%;width:80px;height:80px;opacity:.025;transform:rotate(-15deg);animation:drift-b 26s ease-in-out infinite}
.bg-decor .v-helmet{bottom:30%;right:3%;width:70px;height:70px;opacity:.03;transform:rotate(10deg);animation:drift-c 18s ease-in-out infinite}

.bg-decor .dot-grid{
  position:absolute;
  bottom:26%;right:4%;
  display:grid;
  grid-template-columns:repeat(6,4px);
  gap:10px;
  opacity:.04
}
.bg-decor .dot-grid span{width:4px;height:4px;border-radius:50%;background:var(--blue)}
.bg-decor .dot-grid span:nth-child(4n){background:var(--red);opacity:.5}

.bg-decor .dot-grid-2{
  position:absolute;
  top:26%;left:6%;
  display:grid;
  grid-template-columns:repeat(3,4px);
  gap:10px;
  opacity:.025
}
.bg-decor .dot-grid-2 span{width:4px;height:4px;border-radius:50%;background:var(--blue)}

.bg-decor .ln1{position:absolute;top:12%;right:15%;width:90px;height:1px;background:linear-gradient(to right,transparent,rgba(24,82,179,.05),transparent)}
.bg-decor .ln2{position:absolute;bottom:30%;left:7%;width:1px;height:120px;background:linear-gradient(to bottom,transparent,rgba(198,40,40,.035),transparent)}
.bg-decor .ln3{position:absolute;top:44%;right:1%;width:70px;height:1px;background:linear-gradient(to right,transparent,rgba(24,82,179,.04),transparent)}
.bg-decor .ln4{position:absolute;bottom:14%;left:16%;width:1px;height:80px;background:linear-gradient(to bottom,transparent,rgba(24,82,179,.035),transparent)}

@keyframes drift-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes drift-b{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes drift-c{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes spin-s{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.page{
  position:relative;
  z-index:1;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:72px 64px 56px;
  text-align:center
}

.logo-wrap{
  margin-bottom:16px;
  animation:fadeIn .9s var(--ease) both
}
.logo-wrap img{
  width:100%;
  max-width:460px;
  height:auto;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 3px 14px rgba(10,31,78,.07))
}

.logo-slogan{
  font-size:14px;
  font-weight:500;
  color:var(--gray-mid);
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:32px;
  animation:fadeIn .9s var(--ease) .08s both
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 22px 7px 18px;
  border:1.5px solid rgba(24,82,179,.25);
  border-radius:100px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--blue);
  margin-bottom:24px;
  position:relative;
  background:var(--white);
  box-shadow:0 1px 6px rgba(24,82,179,.05);
  animation:fadeIn .9s var(--ease) .14s both
}
.badge::before,.badge::after{
  content:'';
  position:absolute;
  top:50%;
  width:16px;
  height:1.5px;
  background:var(--red);
  border-radius:1px;
  opacity:.5
}
.badge::before{left:-24px;transform:translateY(-50%)}
.badge::after{right:-24px;transform:translateY(-50%)}
.badge i{
  font-size:11px;
  color:var(--red);
  position:relative;
  top:.5px
}

.heading{
  font-size:clamp(26px,4.2vw,40px);
  font-weight:800;
  color:var(--blue-dark);
  margin-bottom:10px;
  letter-spacing:-.6px;
  line-height:1.2;
  animation:fadeIn .9s var(--ease) .2s both
}
.heading .accent-dot{
  display:inline-block;
  width:9px;height:9px;
  background:var(--red);
  border-radius:50%;
  margin-left:4px;
  vertical-align:super
}

.subheading{
  font-size:clamp(16px,2.4vw,19px);
  font-weight:400;
  color:var(--gray-mid);
  margin-bottom:28px;
  letter-spacing:.1px;
  animation:fadeIn .9s var(--ease) .28s both
}

.body-text{
  max-width:500px;
  font-size:clamp(13.5px,1.8vw,15px);
  color:var(--text-soft);
  line-height:1.8;
  margin:0 auto 8px;
  animation:fadeIn .9s var(--ease) .34s both
}
.body-thanks{
  font-size:14.5px;
  font-weight:600;
  color:var(--blue);
  margin-bottom:48px;
  letter-spacing:.2px;
  animation:fadeIn .9s var(--ease) .38s both
}

.contacts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  width:100%;
  max-width:680px;
  margin-bottom:56px;
  animation:fadeInUp .9s var(--ease) .44s both
}

.contact-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:32px 24px 28px;
  border-radius:var(--radius-lg);
  background:var(--white);
  border:1px solid var(--gray-light);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  color:var(--text);
  transition:all .4s var(--ease-out);
  position:relative;
  overflow:hidden
}
.contact-card::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--red));
  opacity:0;
  transition:opacity .4s var(--ease-out)
}
.contact-card:hover{
  border-color:rgba(24,82,179,.14);
  box-shadow:var(--shadow-blue);
  transform:translateY(-6px)
}
.contact-card:hover::after{opacity:1}
.contact-card:hover .card-icon{
  background:var(--blue);
  color:var(--white);
  transform:scale(1.06)
}
.contact-card:hover .card-label{color:var(--blue-dark)}
.contact-card:hover .card-info{color:var(--text-soft)}

.card-icon{
  width:56px;height:56px;
  border-radius:16px;
  background:var(--blue-glow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  color:var(--blue);
  transition:all .4s var(--ease-out);
  flex-shrink:0
}
.card-icon.fa-whatsapp{font-size:26px}

.card-label{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  transition:color .3s ease;
  text-align:center;
  line-height:1.2
}
.card-info{
  font-size:12px;
  font-weight:400;
  color:var(--gray);
  text-align:center;
  line-height:1.3;
  transition:color .3s ease;
  max-width:160px;
  word-break:break-all
}

.wave-section{
  position:relative;
  flex-shrink:0;
  animation:fadeInUp 1s var(--ease) .55s both
}
.wave-section svg.wave-top{
  display:block;
  width:100%;
  height:auto;
  margin-bottom:-1px
}

.trust-bar{
  background:linear-gradient(140deg,#081a40 0%,#0a1f4e 25%,#0d2a60 50%,#0a1f4e 75%,#060e2b 100%);
  position:relative;
  overflow:hidden;
  padding:44px 64px
}
.trust-bar::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent 5%,rgba(198,40,40,.5) 25%,rgba(42,92,184,.4) 50%,rgba(198,40,40,.5) 75%,transparent 95%)
}
.trust-bar::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 0%,rgba(42,92,184,.08) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 100%,rgba(42,92,184,.06) 0%,transparent 50%);
  pointer-events:none
}

.trust-bar-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  max-width:1000px;
  margin:0 auto;
  position:relative;
  z-index:1
}
.trust-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 40px;
  color:rgba(255,255,255,.65);
  font-size:14px;
  font-weight:500;
  letter-spacing:.1px;
  white-space:nowrap
}
.trust-item i{
  font-size:16px;
  color:rgba(255,255,255,.35);
  flex-shrink:0
}
.trust-sep{
  width:1px;
  height:28px;
  background:rgba(255,255,255,.10);
  flex-shrink:0
}

.footer{
  position:sticky;
  bottom:0;
  z-index:50;
  background:rgba(6,14,43,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.06);
  box-shadow:0 -2px 12px rgba(6,14,43,.15);
  padding:18px 64px;
  flex-shrink:0;
  animation:fadeInUp 1s var(--ease) .65s both
}
.footer-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  max-width:1000px;
  margin:0 auto
}
.footer-copy{
  font-size:11.5px;
  color:rgba(255,255,255,.35);
  letter-spacing:.3px
}
.footer-sep{
  width:1px;
  height:12px;
  background:rgba(255,255,255,.10)
}
.footer-phone{
  font-size:12px;
  color:rgba(255,255,255,.55);
  font-weight:600;
  letter-spacing:.4px;
  display:flex;
  align-items:center;
  gap:6px
}
.footer-phone i{font-size:10px;color:rgba(255,255,255,.30)}
.footer-hours{
  font-size:11px;
  color:rgba(255,255,255,.28);
  display:flex;
  align-items:center;
  gap:5px
}
.footer-hours i{font-size:10px}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:768px){
  .page{padding:52px 36px 40px}
  .logo-wrap img{max-width:360px}
  .contacts{max-width:100%;gap:16px}
  .trust-bar{padding:36px 32px}
  .trust-item{padding:0 24px;font-size:13px}
  .footer{padding:16px 32px}
}

@media(max-width:520px){
  .contacts{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .contact-card{padding:22px 10px 18px}
  .card-icon{width:46px;height:46px;border-radius:13px;font-size:20px}
  .card-icon.fa-whatsapp{font-size:22px}
  .card-label{font-size:13px}
  .card-info{font-size:10.5px}
  .page{padding:40px 20px 32px}
  .logo-wrap img{max-width:280px}
  .logo-slogan{font-size:11px;letter-spacing:1px;margin-bottom:24px}
  .badge{font-size:9.5px;padding:5px 14px 5px 12px;letter-spacing:1.5px}
  .badge::before,.badge::after{width:10px}
  .badge::before{left:-14px}
  .badge::after{right:-14px}
  .body-text{font-size:13px}
  .body-thanks{font-size:13px;margin-bottom:36px}
  .trust-bar{padding:28px 20px}
  .trust-bar-inner{flex-direction:column;gap:16px}
  .trust-sep{display:none}
  .trust-item{padding:0}
  .footer{padding:14px 20px}
  .footer-inner{gap:10px}
  .footer-sep{display:none}
  .footer-hours{display:none}
  .bg-decor .vec{display:none}
  .bg-decor .dot-grid,.bg-decor .dot-grid-2{display:none}
  .bg-decor .ln1,.bg-decor .ln2,.bg-decor .ln3,.bg-decor .ln4{display:none}
}