.banner { background: linear-gradient(120deg, #0A3D91, #1A86E8); color: #fff; border-radius: 0 0 48px 48px; padding: 56px 0 120px; position: relative; overflow: hidden; }
.banner::after { content: ''; position: absolute; left: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255,255,255,.07); }
.banner h1 { font-size: 52px; margin: 14px 0 10px; }
.banner .lead { color: #D6E5FB; max-width: 640px; }
.banner .crumbs { font-size: 14px; color: #BFD3F3; font-weight: 600; }
.lift { margin-top: -80px; position: relative; z-index: 2; }
.field { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 20px; height: 64px; padding: 0 20px; font-size: 17px; color: var(--muted); }
.field.focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(26,134,232,.12); color: var(--ink); font-weight: 700; }
label.l { display: block; font-weight: 800; margin-bottom: 8px; font-size: 15px; }
.tl { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: start; padding-bottom: 26px; position: relative; }
.tl::before { content: ''; position: absolute; right: 21px; top: 44px; bottom: 0; width: 3px; background: var(--line); }
.tl.done::before { background: var(--blue); }
.tl:last-child::before { display: none; }
.tl .d { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--muted); }
.tl.done .d { background: var(--blue); color: #fff; }
.tl.now .d { background: #fff; border: 4px solid var(--orange); color: var(--orange); }
.tl b { font-size: 17px; display: block; }
.tl small { color: var(--muted); font-size: 14px; }
.tl time { color: var(--muted); font-size: 14px; font-weight: 600; }
.kv { display: flex; justify-content: space-between; }
.kv span { color: var(--muted); }
.contact { padding: 20px; display: flex; gap: 14px; align-items: center; }
.contact .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; }
@media (max-width: 1000px) {
  .banner { padding: 30px 0 100px; border-radius: 0 0 32px 32px; }
  .banner h1 { font-size: 34px; }
  .one { grid-template-columns: 1fr !important; }
  .one > .phones { display: none !important; }
  .tl { grid-template-columns: 44px 1fr; }
  .tl time { grid-column: 2; }
  .toc { position: static !important; }
  .doc { padding: 26px !important; }
}

/* hero */
.hero { position: relative; overflow: hidden; padding: 30px 0 110px; }
.blob { position: absolute; border-radius: 50%; animation: drift 16s ease-in-out infinite alternate; }
.blob.b1 { right: -260px; top: -220px; width: 900px; height: 900px; background: radial-gradient(circle, rgba(0,180,230,.20), rgba(0,180,230,0) 65%); }
.blob.b2 { left: -240px; top: 180px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(10,61,145,.14), rgba(10,61,145,0) 65%); animation-duration: 20s; }
.blob.b3 { left: 30%; bottom: -260px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255,138,0,.12), rgba(255,138,0,0) 65%); animation-duration: 24s; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.08); } }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px; }
.hero h1 { margin: 22px 0 18px; }
.hero .lead { max-width: 540px; }
.hero .cta { display: flex; gap: 14px; margin: 34px 0 30px; flex-wrap: wrap; }
.shine { background: linear-gradient(90deg, #0A3D91, #1A86E8, #00B4E6, #1A86E8, #0A3D91); background-size: 300% 100%; -webkit-background-clip: text; color: transparent; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: -300% 0; } }
.trust { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 15px; font-weight: 600; }
.faces { display: flex; }
.faces i { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--bg); margin-inline-start: -10px; display: block; }
.faces i:first-child { margin-inline-start: 0; }
.stage { position: relative; height: 680px; }
.stage .p1 { position: absolute; right: 120px; top: 20px; z-index: 2; animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(-3deg); } }
.ring { position: absolute; right: 60px; top: 90px; width: 420px; height: 420px; border-radius: 50%; border: 2px dashed rgba(10,61,145,.18); animation: spin 40s linear infinite; }
.ring::before { content: ''; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(255,138,0,.18); }
@keyframes spin { to { transform: rotate(360deg); } }
.chip { position: absolute; z-index: 3; background: #fff; border-radius: 20px; padding: 12px 16px; display: flex; gap: 12px; align-items: center;
  box-shadow: 0 20px 40px -18px rgba(11,29,69,.35); font-weight: 700; font-size: 14px; animation: pop .7s cubic-bezier(.2,1.4,.4,1) both, bob 5s ease-in-out infinite; }
.chip .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; }
.chip small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
.c1 { left: 0; top: 120px; animation-delay: .4s, 1.1s; } .c2 { left: 30px; top: 380px; animation-delay: .8s, 1.5s; } .c3 { right: 40px; bottom: 30px; animation-delay: 1.2s, 1.9s; }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(20px); } }
@keyframes bob { 50% { translate: 0 -8px; } }
.typing { position: absolute; left: 60px; top: 20px; z-index: 3; height: 52px; border-radius: 24px 24px 24px 6px; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 16px 30px -14px rgba(10,61,145,.7);
  overflow: hidden; animation: grow 6s ease-in-out infinite; }
.typing .dots { position: absolute; display: flex; gap: 6px; animation: dotsOut 6s ease-in-out infinite; }
.typing .dots i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: jump 1s ease-in-out infinite; }
.typing .dots i:nth-child(2) { animation-delay: .15s; } .typing .dots i:nth-child(3) { animation-delay: .3s; background: var(--orange); }
.typing .say { white-space: nowrap; animation: textIn 6s ease-in-out infinite; }
@keyframes grow { 0%, 30% { width: 86px; } 40%, 85% { width: 210px; } 95%, 100% { width: 86px; } }
@keyframes dotsOut { 0%, 30% { opacity: 1; } 36%, 88% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes textIn { 0%, 36% { opacity: 0; transform: translateY(8px); } 44%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@keyframes jump { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-6px); } }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; margin-inline-end: 6px; animation: ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -40px; position: relative; z-index: 2; padding: 30px 10px; }
.stats div { text-align: center; border-inline-start: 1px solid var(--line); }
.stats div:first-child { border: 0; }
.stats b { display: block; font-size: 38px; font-weight: 900; color: var(--blue); font-family: Poppins, Cairo; direction: ltr; }
.stats span { color: var(--muted); font-weight: 600; }

/* cards */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc .card { padding: 30px; position: relative; overflow: hidden; }
.svc .card img { width: 64px; height: 64px; transition: transform .4s cubic-bezier(.2,1.4,.4,1); }
.svc .card:hover img { transform: scale(1.12) rotate(-6deg); }
.svc h3 { margin: 18px 0 8px; }
.svc p { color: var(--muted); line-height: 1.8; font-size: 16px; }
.svc .card.big { background: linear-gradient(160deg, #0A3D91, #1A5FC4); color: #fff; border: 0; }
.svc .card.big p { color: #D4E2F8; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.ticks { margin-top: 28px; display: grid; gap: 16px; }
.ticks div { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; font-weight: 600; }
.ticks i { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--soft); color: var(--blue); display: grid; place-items: center; font-style: normal; }
.ticks small { display: block; color: var(--muted); font-weight: 500; font-size: 15px; }
.phones { display: flex; justify-content: center; gap: 22px; align-items: flex-end; }
.phones .phone:nth-child(2) { transform: translateY(-40px); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.steps .card { padding: 30px; }
.steps .n { width: 50px; height: 50px; border-radius: 16px; background: var(--blue); color: #fff; font: 900 22px Poppins; display: grid; place-items: center; }
.steps h3 { margin: 16px 0 6px; }
.steps p { color: var(--muted); line-height: 1.7; }

/* the live chat */
.livechat { width: 330px; height: 640px; border-radius: 46px; background: #0B1D45; padding: 11px; margin: 0 auto; box-shadow: 0 40px 80px -30px rgba(11,29,69,.55); }
.livechat .scr { height: 100%; border-radius: 36px; background: #EEF3FA; overflow: hidden; display: flex; flex-direction: column; }
.livechat .bar { background: #fff; padding: 40px 16px 12px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); }
.livechat .bar .av { width: 40px; height: 40px; border-radius: 50%; background: #7B61FF; }
.livechat .bar b { display: block; font-size: 15px; }
.livechat .bar small { color: #22A55B; font-weight: 700; font-size: 12px; }
.livechat .msgs { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.m { max-width: 76%; padding: 9px 13px; border-radius: 18px; font-size: 14px; font-weight: 600; line-height: 1.6; animation: msg 12s infinite both; }
.m.them { align-self: flex-start; background: #fff; border-end-start-radius: 6px; }
.m.me { align-self: flex-end; background: var(--blue); color: #fff; border-end-end-radius: 6px; }
.m small { display: block; font-size: 10px; opacity: .65; text-align: end; }
.m.voice { display: flex; align-items: center; gap: 8px; }
.m.voice i { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); display: block; flex: none; }
.m.voice em { height: 18px; width: 110px; background: repeating-linear-gradient(90deg, #0B1D45 0 3px, transparent 3px 6px); opacity: .35; display: block; border-radius: 4px; }
.m:nth-child(1) { animation-delay: 0s; } .m:nth-child(2) { animation-delay: .9s; } .m:nth-child(3) { animation-delay: 1.8s; }
.m:nth-child(4) { animation-delay: 2.7s; } .m:nth-child(5) { animation-delay: 3.6s; }
@keyframes msg { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 4%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.tw { align-self: flex-start; background: #fff; border-radius: 18px; padding: 12px 16px; display: flex; gap: 5px; animation: msg 12s infinite both; animation-delay: 4.4s; }
.tw i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: jump 1s infinite; }
.tw i:nth-child(2) { animation-delay: .15s; } .tw i:nth-child(3) { animation-delay: .3s; }
.livechat .input { background: #fff; margin: 0 10px 12px; border-radius: 24px; height: 46px; display: flex; align-items: center; padding: 0 14px; color: var(--muted); font-size: 13px; gap: 10px; }
.livechat .input b { margin-inline-start: auto; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); }

/* privacy */
.dark { background: var(--ink); color: #fff; border-radius: 48px; margin: 0 40px; position: relative; overflow: hidden; }
.dark .lead { color: #AFC0DC; }
.shield { width: 300px; height: 300px; margin: 0 auto; position: relative; display: grid; place-items: center; }
.shield .waves i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(0,180,230,.4); animation: wave 3.6s ease-out infinite; }
.shield .waves i:nth-child(2) { animation-delay: 1.2s; } .shield .waves i:nth-child(3) { animation-delay: 2.4s; }
@keyframes wave { from { transform: scale(.45); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.shield .core { width: 150px; height: 150px; border-radius: 44px; background: linear-gradient(160deg, #1A86E8, #0A3D91); display: grid; place-items: center; color: #fff;
  box-shadow: 0 30px 60px -20px rgba(0,180,230,.6); animation: float2 5s ease-in-out infinite; }
.shield .core svg { width: 70px; height: 70px; }
@keyframes float2 { 50% { transform: translateY(-10px); } }
.priv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 30px; }
.priv div { background: #12285A; border: 1px solid #1E3772; border-radius: 20px; padding: 18px; display: flex; gap: 12px; align-items: center; font-weight: 700; }
.priv span { width: 40px; height: 40px; border-radius: 12px; background: #1B3878; display: grid; place-items: center; color: var(--cyan); flex: none; }

/* more */
.more3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.more3 .card { padding: 26px; display: flex; gap: 16px; align-items: center; }
.more3 img { width: 56px; height: 56px; }
.more3 p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.biz-strip { background: linear-gradient(120deg, #0B1D45, #12306E); color: #fff; border-radius: 36px; padding: 40px 48px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.biz-strip p { color: #AFC0DC; margin-top: 8px; font-size: 17px; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quotes .card { padding: 28px; }
.quotes p { font-size: 17px; line-height: 1.9; font-weight: 600; }
.quotes .who { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
.quotes .who i { width: 46px; height: 46px; border-radius: 50%; display: block; }
.quotes .who small { display: block; color: var(--muted); }
.stars { color: var(--orange); letter-spacing: 2px; font-size: 18px; margin-bottom: 10px; }
.cta-band { background: linear-gradient(120deg, #0A3D91 0%, #1A86E8 100%); border-radius: 44px; padding: 64px 70px; color: #fff; display: grid;
  grid-template-columns: 1fr auto; align-items: center; gap: 40px; position: relative; overflow: hidden; }
.cta-band::after { content: ''; position: absolute; left: -80px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.07); animation: drift 14s ease-in-out infinite alternate; }
.cta-band h2 { font-size: 40px; }
.cta-band p { color: #D6E5FB; font-size: 18px; margin: 10px 0 26px; }
.qr { width: 170px; height: 170px; background: #fff; border-radius: 26px; padding: 16px; position: relative; z-index: 1; }
.qr img { width: 100%; height: 100%; display: block; }
.qr small { position: absolute; bottom: -28px; left: 0; right: 0; text-align: center; color: #D6E5FB; font-size: 13px; font-weight: 700; }

@media (max-width: 1000px) {
  .hero { padding: 10px 0 60px; }
  .hero .wrap, .split, .biz-strip, .priv { grid-template-columns: 1fr; }
  .stage { height: 560px; }
  .stage .p1 { right: 50%; margin-right: -125px; top: 40px; width: 250px; height: 520px; }
  .ring { right: 50%; margin-right: -170px; width: 340px; height: 340px; top: 110px; }
  .typing { left: 0; top: 0; }
  .c1 { left: 0; top: 160px; } .c2 { left: 0; top: 400px; } .c3 { right: 0; bottom: 0; }
  .stats { grid-template-columns: 1fr 1fr; margin-top: 0; row-gap: 24px; }
  .stats div:nth-child(3) { border: 0; }
  .stats b { font-size: 30px; }
  .svc, .steps, .quotes, .more3 { grid-template-columns: 1fr; }
  .phones .phone:not(:first-child) { display: none; }
  .phones .phone:first-child { transform: none; }
  .dark { margin: 0 10px; border-radius: 32px; }
  .shield { width: 220px; height: 220px; }
  .biz-strip { padding: 30px 24px; }
  .cta-band { grid-template-columns: 1fr; padding: 40px 26px; border-radius: 32px; }
  .cta-band h2 { font-size: 30px; }
  .qr { display: none; }
  .livechat { width: 300px; height: 600px; }
}
.kinds-sec{padding-top:160px} @media (max-width:1000px){ .kinds-sec{padding-top:40px} }