/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 30 2026 | 14:25:38 */
/* ===== Size ===== */
.qt-code-typing-widget{
  width: 700px;
  height: 500px;
  max-width: 100%;
  position: relative;
}



/* ===== Card ===== */
.qt-code-card{
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 24px;
  overflow: visible;
  background: rgba(10, 24, 46, .42);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 26px 80px rgba(0,0,0,.30);
}

.qt-code-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background:
    linear-gradient(rgba(59,130,246,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .26;
  mask-image: radial-gradient(circle at 50% 45%, black 0 62%, transparent 82%);
  pointer-events: none;
}

/* Top bar */
.qt-code-top{
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 24px 24px 0 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

.qt-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

.qt-dot.r{
  background: rgba(59,130,246,.65);
  box-shadow: 0 0 18px rgba(59,130,246,.25);
}

.qt-dot.y{
  background: rgba(34,211,238,.65);
  box-shadow: 0 0 18px rgba(34,211,238,.25);
}

.qt-dot.g{
  background: rgba(255,255,255,.18);
}

.qt-code-title{
  margin-left: 10px;
  color: rgba(255,255,255,.78);
  font: 650 12px/1.2 ui-monospace, Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .7px;
}

.qt-chip{
  margin-left: auto;
  padding: 6px 11px;
  border-radius: 999px;
  font: 800 11px/1 ui-monospace, Menlo, Consolas, monospace;
  color: rgba(255,255,255,.92);
  background: rgba(34,211,238,.14);
  border: 1px solid rgba(34,211,238,.20);
  box-shadow: 0 0 20px rgba(34,211,238,.10);
  animation: qtChipPulse 2.2s ease-in-out infinite;
}

@keyframes qtChipPulse{
  0%,100%{ transform: translateY(0); opacity:.82; }
  50%{ transform: translateY(-2px); opacity:1; }
}

/* Body */
.qt-code-body{
  position: relative;
  height: calc(100% - 46px);
  padding: 16px;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
}

/* Glow */
.qt-code-glow{
  position: absolute;
  inset: -55%;
  background:
    radial-gradient(circle at 22% 28%, rgba(34,211,238,.26), transparent 58%),
    radial-gradient(circle at 74% 78%, rgba(59,130,246,.22), transparent 62%),
    conic-gradient(from 10deg, rgba(34,211,238,.0), rgba(34,211,238,.12), rgba(59,130,246,.10), rgba(34,211,238,.0));
  filter: blur(24px);
  opacity: .95;
  animation: qtGlowMove 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes qtGlowMove{
  0%,100%{ transform: translate(-12px, 10px) scale(1); }
  50%{ transform: translate(18px, -14px) scale(1.08); }
}

/* Scanline */
.qt-scanline{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0 40%, rgba(255,255,255,.06) 48%, transparent 56%);
  opacity: .55;
  mix-blend-mode: screen;
  animation: qtScan 2.2s linear infinite;
  pointer-events: none;
}

@keyframes qtScan{
  from{ transform: translateY(-28%); }
  to{ transform: translateY(28%); }
}

/* Particles */
.qt-particles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .85;
}

.qt-particles::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(34,211,238,.70) 0 2px, transparent 3px),
    radial-gradient(circle at 20% 70%, rgba(255,90,200,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 35%, rgba(59,130,246,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 62%, rgba(255,214,102,.50) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 30%, rgba(0,255,170,.45) 0 2px, transparent 3px);
  filter: drop-shadow(0 0 12px rgba(34,211,238,.18));
  animation: qtParticles 3s ease-in-out infinite;
}

@keyframes qtParticles{
  0%,100%{ transform: translate(0,0); opacity:.55; }
  50%{ transform: translate(12px,-10px); opacity:.95; }
}

/* Code area */
.qt-pre{
  position: relative;
  z-index: 2;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  overflow: auto;
  color: rgba(255,255,255,.90);
  font: 650 13px/1.65 ui-monospace, Menlo, Consolas, "Courier New", monospace;
}

/* Cursor */
.qt-caret{
  display: inline-block;
  width: 10px;
  height: 18px;
  margin-left: 2px;
  vertical-align: -3px;
  border-radius: 3px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 18px rgba(34,211,238,.18);
  animation: qtBlink 1s steps(1) infinite;
}

@keyframes qtBlink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

/* Floating icons */
.qt-ficon{
  position: absolute;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.20);
  overflow: hidden;
  animation: qtOrbit 3.2s ease-in-out infinite;
}

.qt-svg{
  width: 28px;
  height: 28px;
  color: rgba(255,255,255,.92);
  filter: drop-shadow(0 0 10px rgba(0,0,0,.15));
}

.fi-html{ top: -26px; left: -18px; animation-duration: 3.6s; }
.fi-css{ top: -30px; right: -16px; animation-duration: 3s; }
.fi-js{ bottom: -24px; left: -14px; animation-duration: 4s; }
.fi-react{ bottom: -30px; right: -18px; animation-duration: 3.4s; }
.fi-node{ top: 52%; left: -26px; transform: translateY(-50%); animation-duration: 3.8s; }

.fi-html{ background: linear-gradient(135deg, #ff2d95, #7c3aed); }
.fi-css{ background: linear-gradient(135deg, #22d3ee, #2563eb); }
.fi-js{ background: linear-gradient(135deg, #f59e0b, #ef4444); }
.fi-react{ background: linear-gradient(135deg, #00ffb2, #22d3ee); }
.fi-node{ background: linear-gradient(135deg, #22c55e, #16a34a); }

.qt-ficon::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.22), transparent 45%, rgba(255,255,255,.10));
  mix-blend-mode: screen;
  opacity: .55;
  animation: qtSheen 3.6s ease-in-out infinite;
}

@keyframes qtOrbit{
  0%,100%{ transform: translateY(0) rotate(0deg) scale(1); }
  50%{ transform: translateY(-10px) rotate(-2deg) scale(1.04); }
}

@keyframes qtSheen{
  0%,100%{ transform: translateX(-10%) rotate(0deg); opacity:.35; }
  50%{ transform: translateX(10%) rotate(3deg); opacity:.75; }
}

/* Responsive */
@media (max-width: 520px){
  .qt-code-typing-widget{
    width: 100%;
    height: 290px;
  }

  .qt-ficon{
    width: 50px;
    height: 50px;
  }

  .qt-svg{
    width: 26px;
    height: 26px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .qt-code-glow,
  .qt-scanline,
  .qt-caret,
  .qt-ficon,
  .qt-particles::before,
  .qt-chip{
    animation: none !important;
  }
}

.qt-simple-services{
  font-family: 'Tajawal', sans-serif;
  padding: 80px 30px;
  background: linear-gradient(135deg, #081524 0%, #0d1d35 50%, #12274a 100%);
}

.qt-simple-services *{
  box-sizing: border-box;
  font-family: 'Tajawal', sans-serif;
}

.qt-simple-wrap{
  max-width: 1400px;
  margin: auto;
}

.qt-simple-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.qt-simple-badge{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: #8feeff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.qt-simple-head h2{
  color: #fff !important;
  font-size: 44px;
  margin: 0 0 14px;
  font-weight: 800;
}

.qt-simple-head h2 span{
  color: #22dcff;
}

.qt-simple-head p{
  color: rgba(255,255,255,.78);
  font-size: 19px;
  line-height: 1.9;
  margin: 0;
}

.qt-simple-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 35px;
}

.qt-simple-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 24px 20px;
  transition: .3s ease;
}

.qt-simple-card:hover{
  transform: translateY(-6px);
  border-color: rgba(34,220,255,.28);
  box-shadow: 0 0 20px rgba(34,220,255,.10);
}

.qt-card-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10cfff, #0066ff);
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 16px;
}

.qt-simple-card h3{
  color: #fff !important;
  font-size: 22px;
  margin: 0 0 10px;
  font-weight: 800;
}

.qt-simple-card p{
  color: rgba(255,255,255,.74);
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

.qt-simple-actions{
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 35px;
  flex-wrap: wrap;
}

.qt-simple-btn{
  text-decoration: none !important;
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  transition: .3s ease;
}

.qt-simple-btn.primary{
  background: linear-gradient(135deg, #10cfff, #0066ff);
  color: #fff;
}

.qt-simple-btn.ghost{
  color: #fff;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
}

.qt-simple-btn:hover{
  transform: translateY(-3px);
}

@media (max-width: 1024px){
  .qt-simple-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .qt-simple-head h2{
    font-size: 36px;
  }
}

@media (max-width: 767px){
  .qt-simple-services{
    padding: 60px 16px;
  }

  .qt-simple-grid{
    grid-template-columns: 1fr;
  }

  .qt-simple-head h2{
    font-size: 29px;
  }

  .qt-simple-head p{
    font-size: 16px;
  }

  .qt-simple-card h3{
    font-size: 20px;
  }
}
.qt-about-apps-hero{
  font-family: 'Tajawal', sans-serif;
  position: relative;
  overflow: hidden;
  padding: 110px 40px 85px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,229,255,.09), transparent 24%),
    radial-gradient(circle at 80% 15%, rgba(128,0,255,.08), transparent 24%),
    linear-gradient(135deg,#061321 0%,#0b1830 48%,#142854 100%);
}

.qt-about-apps-hero *{
  box-sizing: border-box;
  font-family: 'Tajawal', sans-serif;
}

.qt-apps-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 42px 42px;
}

.qt-apps-wrap{
  max-width: 1280px;
  margin: auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: center;
}

.qt-apps-badge{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  color: #9cefff;
  font-size: 14px;
  font-weight: 700;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 18px;
}

.qt-apps-content h1{
  color: #fff;
  font-size: 58px;
  line-height: 1.18;
  margin: 0 0 18px;
  font-weight: 800;
}

.qt-apps-content h1 span{
  color: #24deff;
}

.qt-apps-content p{
  color: rgba(255,255,255,.82);
  font-size: 20px;
  line-height: 1.95;
  margin: 0 0 28px;
}

.qt-apps-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.qt-apps-btn{
  text-decoration: none !important;
  padding: 15px 24px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
  transition: .35s ease;
}

.qt-apps-btn.primary{
  background: linear-gradient(135deg,#10cfff,#0066ff);
  color: #fff;
  box-shadow: 0 0 22px rgba(0,229,255,.20);
}

.qt-apps-btn.primary:hover{
  transform: translateY(-4px);
}

.qt-apps-btn.ghost{
  color: #24deff !important;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
}

.qt-apps-btn.ghost:hover{
  background: linear-gradient(135deg,#10cfff,#0066ff) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-4px);
  box-shadow: 0 0 22px rgba(0,229,255,.20);
}

.qt-apps-visual{
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qt-phone{
  position: absolute;
  width: 180px;
  height: 360px;
  border-radius: 30px;
  padding: 10px;
  background: linear-gradient(145deg,#0b1120,#17294a);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 28px rgba(0,229,255,.10), 0 20px 50px rgba(0,0,0,.34);
  animation: qtPhoneFloat 5s ease-in-out infinite;
}

.qt-screen{
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg,#f7fbff,#d7e7ff);
}

.qt-screen.alt{
  background: linear-gradient(180deg,#fff7f7,#ffe4ec);
}

.qt-screen.alt2{
  background: linear-gradient(180deg,#f4fff8,#d9ffea);
}

.qt-screen-top{
  height: 70px;
  background: linear-gradient(135deg,#0dcfff,#4376ff);
}

.qt-screen-card{
  margin: 16px;
  height: 120px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.qt-screen-card.small{
  height: 72px;
}

.phone-1{ right:18%; top:70px; transform:rotate(-10deg); }
.phone-2{ right:50%; top:30px; transform:translateX(50%); z-index:3; }
.phone-3{ left:18%; top:70px; transform:rotate(10deg); animation-delay:1s; }

.qt-apps-chip{
  position: absolute;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(0,229,255,.08);
  backdrop-filter: blur(10px);
}

.chip-a{ top:40px; right:40px; }
.chip-b{ bottom:100px; left:30px; }
.chip-c{ top:220px; left:20px; }

@keyframes qtPhoneFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* Responsive */
@media (max-width:1024px){
  .qt-apps-wrap{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .qt-apps-actions{
    justify-content: center;
  }

  .qt-apps-content h1{
    font-size: 44px;
  }
}

@media (max-width:767px){
  .qt-about-apps-hero{
    padding: 80px 16px 65px;
  }

  .qt-apps-content h1{
    font-size: 33px;
  }

  .qt-apps-content p{
    font-size: 17px;
  }

  .qt-apps-visual{
    min-height: 380px;
  }

  .qt-phone{
    width: 130px;
    height: 260px;
  }
}
@media (max-width:767px){
  .qt-apps-chip{
    backdrop-filter: none;
  }
}
.qt-adv-steps{
  font-family: 'Tajawal', sans-serif;
  padding: 34px 18px 18px;
}

.qt-adv-steps *{
  box-sizing: border-box;
  font-family: 'Tajawal', sans-serif;
}

.qt-adv-steps__head{
  text-align: center;
  max-width: 1400px;
  margin: 0 auto 28px;
}

.qt-adv-steps__mini{
  display: inline-block;
  margin-bottom: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
}

.qt-adv-steps__head h2{
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 46px;
  line-height: 1.2;
  font-weight: 800;
}

.qt-adv-steps__head h2 span{
  color: #ffffff !important;
  opacity: .88;
}

.qt-adv-steps__head p{
  margin: 0;
  color: rgba(255,255,255,.80);
  font-size: 18px;
  line-height: 1.95;
  font-weight: 500;
}

.qt-adv-steps__line{
  max-width: 1220px;
  height: 2px;
  margin: 0 auto 24px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  position: relative;
  overflow: hidden;
}

.qt-adv-steps__line::after{
  content: "";
  position: absolute;
  top: 0;
  right: -18%;
  width: 18%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: qtLineMove 6s linear infinite;
}

.qt-adv-steps__grid{
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.qt-step-card{
  position: relative;
  padding: 24px 20px 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  text-align: center;
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.qt-step-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
}

.qt-step-card__num{
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 0 0 10px rgba(255,255,255,.015);
  transition: transform .28s ease;
}

.qt-step-card:hover .qt-step-card__num{
  transform: scale(1.06);
}

.qt-step-card h3{
  margin: 0 0 10px;
  color: #ffffff !important;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 800;
}

.qt-step-card p{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 16px;
  line-height: 1.9;
  font-weight: 500;
}

@keyframes qtLineMove{
  from{ right: -18%; }
  to{ right: 100%; }
}

@media (max-width: 1024px){
  .qt-adv-steps__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qt-adv-steps__head h2{
    font-size: 38px;
  }
}

@media (max-width: 767px){
  .qt-adv-steps{
    padding: 24px 12px 12px;
  }

  .qt-adv-steps__head{
    margin-bottom: 20px;
  }

  .qt-adv-steps__head h2{
    font-size: 30px;
  }

  .qt-adv-steps__head p{
    font-size: 16px;
  }

  .qt-adv-steps__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .qt-step-card{
    padding: 20px 16px 18px;
    border-radius: 18px;
  }

  .qt-step-card h3{
    font-size: 20px;
  }

  .qt-step-card p{
    font-size: 15px;
  }
}
.qt-services-side{
  font-family: 'Tajawal', sans-serif;
  padding: 70px 20px;
  color: #fff !important;
}

.qt-services-side *{
  box-sizing: border-box;
  font-family: 'Tajawal', sans-serif;
}

.qt-services-side__wrap{
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 36px;
  align-items: center;
}

/* Visual */
.qt-services-side__visual{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qt-visual-glow{
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,224,255,.20), transparent 62%);
  filter: blur(20px);
  animation: qtPulseGlow 4.2s ease-in-out infinite;
}

.qt-orbit{
  position: absolute;
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 50%;
  animation: qtSpin 20s linear infinite;
}

.orbit-1{ width:180px; height:180px; }
.orbit-2{ width:250px; height:250px; animation-duration:28s; animation-direction:reverse; }
.orbit-3{ width:320px; height:320px; animation-duration:36s; opacity:.6; }

.qt-core-shape{
  position: relative;
  z-index: 2;
  width: 220px;
  height: 220px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: qtFloatCore 5.5s ease-in-out infinite;
  transform: rotate(-8deg);
}

.qt-core-inner{
  width: 78%;
  text-align: center;
  transform: rotate(8deg);
}

.qt-core-mini{
  display: inline-block;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 700;
}

.qt-core-inner h3{
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 800;
}

.qt-core-inner p{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  opacity: .8;
}

.qt-float-chip{
  position: absolute;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(8px);
  animation: qtFloatChip 4.5s ease-in-out infinite;
}

.chip-1{ top:68px; right:38px; }
.chip-2{ bottom:72px; right:54px; animation-delay:1s; }
.chip-3{ top:165px; left:32px; animation-delay:1.8s; }

/* Content */
.qt-services-title{
  margin-bottom: 28px;
}

.qt-services-badge{
  display: inline-block;
  margin-bottom: 12px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: 13px;
  font-weight: 700;
}

.qt-services-title h2{
  font-size: 40px;
  margin: 0 0 12px;
  font-weight: 800;
}

.qt-services-title p{
  font-size: 17px;
  line-height: 1.9;
  opacity: .8;
}

/* Timeline */
.qt-timeline{
  position: relative;
}

.qt-timeline:before{
  content:'';
  position:absolute;
  right:14px;
  top:0;
  height:100%;
  width:2px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.45), rgba(255,255,255,.18));
}

.qt-service{
  position: relative;
  padding: 0 44px 16px 0;
}

.qt-dot{
  position: absolute;
  right: 6px;
  top: 20px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px rgba(255,255,255,.45);
}

.qt-content{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 16px 18px;
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

.qt-content h3{
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 800;
}

.qt-content p{
  font-size: 14px;
  line-height: 1.9;
  opacity: .85;
}

.qt-service:hover .qt-content{
  transform: translateX(-8px);
}

.qt-service:hover .qt-dot{
  transform: scale(1.28);
}

/* Animations */
@keyframes qtSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes qtPulseGlow{ 50%{transform:scale(1.08)} }
@keyframes qtFloatCore{ 50%{transform:rotate(-8deg) translateY(-10px)} }
@keyframes qtFloatChip{ 50%{transform:translateY(-8px)} }

/* Responsive */
@media (max-width:1024px){
  .qt-services-side__wrap{ grid-template-columns:1fr; }
}

@media (max-width:767px){
  .qt-services-side{ padding:50px 12px; }
}
@media (max-width:767px){
  .qt-core-shape,
  .qt-float-chip{
    backdrop-filter: none;
  }

  .qt-orbit,
  .qt-visual-glow{
    display: none;
  }
}
.qt-about-values{
  font-family:'Tajawal',sans-serif;
  padding: 44px 18px 28px;
  position:relative;
}

.qt-about-values *{
  box-sizing:border-box;
  font-family:'Tajawal',sans-serif;
}

.qt-about-values__head{
  max-width: 940px;
  margin: 0 auto 30px;
  text-align:center;
}

.qt-about-values__badge{
  display:inline-block;
  margin-bottom:14px;
  padding:10px 16px;
  border-radius:999px;
  color:#ffffff !important;
  font-size:14px;
  font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.qt-about-values__head h2{
  margin:0 0 14px;
  color:#ffffff !important;
  font-size:52px;
  line-height:1.2;
  font-weight:800;
}

.qt-about-values__head h2 span{
  color:#ffffff !important;
  opacity:.9;
}

.qt-about-values__head p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:19px;
  line-height:1.95;
  font-weight:500;
}

.qt-about-values__grid{
  max-width: 1320px;
  margin: 0 auto 26px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.qt-value-card{
  position:relative;
  padding: 26px 24px 24px;
  min-height: 300px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(16,24,45,.86), rgba(12,22,41,.90));
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  backdrop-filter: blur(6px);
}

.qt-value-card:hover{
  transform: translateY(-8px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 26px rgba(255,255,255,.05);
}

.qt-value-card.active{
  transform: translateY(-6px);
}

.qt-value-card__glow{
  position:absolute;
  inset:auto -10% -35% -10%;
  height:160px;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
  opacity:.5;
}

.qt-value-card__icon{
  width:60px;
  height:60px;
  margin-bottom:18px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff !important;
  font-size:26px;
  font-weight:800;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.qt-value-card h3{
  margin:0 0 14px;
  color:#ffffff !important;
  font-size:34px;
  font-weight:800;
}

.qt-value-card p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:17px;
  line-height:1.95;
}

.qt-value-card__line{
  position:absolute;
  right:0;
  bottom:0;
  width:100%;
  height:4px;
}

.qt-value-card.orange .qt-value-card__line{
  background:linear-gradient(90deg, rgba(255,140,0,.08), #ff8a00, rgba(255,140,0,.08));
}
.qt-value-card.purple .qt-value-card__line{
  background:linear-gradient(90deg, rgba(211,72,255,.08), #d348ff, rgba(211,72,255,.08));
}
.qt-value-card.blue .qt-value-card__line{
  background:linear-gradient(90deg, rgba(52,174,255,.08), #34aeff, rgba(52,174,255,.08));
}

.qt-about-values__statement{
  max-width: 1320px;
  margin: 0 auto;
  padding: 1px;
  border-radius: 26px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.14), rgba(255,255,255,.08));
}

.qt-about-values__statement-inner{
  padding: 36px 34px;
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(18,25,45,.92), rgba(15,22,41,.92));
  text-align:center;
}
@media (max-width:767px){
  .qt-value-card{
    backdrop-filter: none;
  }
}
.qt-about-values__statement{
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 1px;
  border-radius: 26px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.14), rgba(255,255,255,.08));
  overflow: hidden;
}

.qt-about-values__statement-glow{
  position: absolute;
  inset: auto 10% -45% 10%;
  height: 180px;
  background: radial-gradient(circle, rgba(0,229,255,.12), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}

.qt-about-values__statement-inner{
  position: relative;
  z-index: 2;
  padding: 36px 34px;
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(18,25,45,.92), rgba(15,22,41,.92));
  text-align: center;
}

.qt-about-values__statement-mini{
  display: inline-block;
  margin-bottom: 14px;
  padding: 9px 14px;
  border-radius: 999px;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.qt-about-values__statement-inner p{
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 18px;
  line-height: 2;
  font-weight: 500;
}

@media (max-width: 767px){
  .qt-about-values__statement-inner{
    padding: 24px 18px;
    border-radius: 22px;
  }

  .qt-about-values__statement-inner p{
    font-size: 16px;
  }
}
.qt-services-hero-x{
  font-family:'Tajawal',sans-serif;
  position:relative;
  overflow:hidden;
  padding:110px 32px 90px;
  background:
    radial-gradient(circle at 14% 18%, rgba(0,229,255,.08), transparent 22%),
    radial-gradient(circle at 84% 16%, rgba(139,92,246,.10), transparent 24%),
    radial-gradient(circle at 55% 82%, rgba(34,211,238,.08), transparent 22%),
    linear-gradient(135deg,#07131f 0%,#0b1b31 48%,#142b4d 100%);
}

.qt-services-hero-x *{
  box-sizing:border-box;
  font-family:'Tajawal',sans-serif;
}

.qt-services-hero-x__grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
  opacity:.72;
}

.qt-services-hero-x__glow{
  position:absolute;
  border-radius:50%;
  filter:blur(34px);
  pointer-events:none;
  opacity:.24;
}

.qt-services-hero-x__glow.g1{
  width:260px;
  height:260px;
  top:70px;
  right:10%;
  background:rgba(34,211,238,.20);
  animation:qtShxGlow 8s ease-in-out infinite;
}

.qt-services-hero-x__glow.g2{
  width:300px;
  height:300px;
  bottom:20px;
  left:8%;
  background:rgba(139,92,246,.16);
  animation:qtShxGlow 9s ease-in-out infinite 1s;
}

.qt-services-hero-x__wrap{
  max-width:1320px;
  margin:auto;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:42px;
  align-items:center;
}

.qt-services-hero-x__badge{
  display:inline-block;
  margin-bottom:18px;
  padding:11px 18px;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}

.qt-services-hero-x__content h1{
  margin:0 0 18px;
  color:#fff;
  font-size:60px;
  line-height:1.16;
  font-weight:800;
}

.qt-services-hero-x__content h1 span{
  color:#22d3ee;
  text-shadow:0 0 16px rgba(34,211,238,.18);
}

.qt-services-hero-x__content p{
  margin:0 0 28px;
  color:rgba(255,255,255,.84);
  font-size:20px;
  line-height:1.95;
  font-weight:500;
  max-width:720px;
}

.qt-services-hero-x__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.qt-shx-btn{
  text-decoration:none !important;
  padding:15px 24px;
  border-radius:16px;
  font-size:17px;
  font-weight:800;
  transition:transform .28s ease, box-shadow .28s ease, background-color .28s ease, border-color .28s ease;
}

.qt-shx-btn--primary{
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#22d3ee);
  box-shadow:0 0 20px rgba(34,211,238,.14);
}

.qt-shx-btn--primary:hover{
  transform:translateY(-4px);
}

.qt-shx-btn--ghost{
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
}

.qt-shx-btn--ghost:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.08);
}

.qt-services-hero-x__tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.qt-services-hero-x__tags span{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.qt-services-hero-x__visual{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.qt-shx-ring{
  position:absolute;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:50%;
  animation:qtShxSpin 24s linear infinite;
}

.qt-shx-ring.ring-1{
  width:260px;
  height:260px;
}

.qt-shx-ring.ring-2{
  width:390px;
  height:390px;
  animation-duration:32s;
  animation-direction:reverse;
}

.qt-shx-ring.ring-3{
  width:520px;
  height:520px;
  animation-duration:40s;
  opacity:.6;
}

.qt-shx-core{
  position:relative;
  z-index:3;
  width:240px;
  height:240px;
  border-radius:50%;
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 22px rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:qtShxCoreFloat 5.8s ease-in-out infinite;
}

.qt-shx-core__inner{
  width:78%;
  text-align:center;
}

.qt-shx-core__logo{
  width:70px;
  height:70px;
  margin:0 auto 16px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:30px;
  font-weight:800;
  background:linear-gradient(135deg,#8b5cf6,#22d3ee);
  box-shadow:0 0 18px rgba(34,211,238,.16);
}

.qt-shx-core__inner h3{
  margin:0 0 10px;
  color:#fff;
  font-size:30px;
  line-height:1.25;
  font-weight:800;
}

.qt-shx-core__inner p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.9;
  font-weight:500;
}

.qt-shx-node{
  position:absolute;
  width:180px;
  min-height:84px;
  padding:14px 14px 12px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none !important;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .28s ease, background-color .28s ease, border-color .28s ease;
  animation:qtShxNodeFloat 5s ease-in-out infinite;
}

.qt-shx-node:hover{
  transform:translateY(-6px) scale(1.03);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}

.qt-shx-node__icon{
  font-size:22px;
  line-height:1;
}

.qt-shx-node strong{
  font-size:15px;
  line-height:1.6;
  font-weight:800;
}

.node-1{ top:28px; right:42%; }
.node-2{ top:150px; right:0; animation-delay:.6s; }
.node-3{ top:360px; right:16%; animation-delay:1.2s; }
.node-4{ top:72px; left:8%; animation-delay:1.8s; }
.node-5{ top:248px; left:-10px; animation-delay:2.4s; }
.node-6{ bottom:26px; left:28%; animation-delay:3s; }

@keyframes qtShxSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes qtShxCoreFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

@keyframes qtShxNodeFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

@keyframes qtShxGlow{
  0%,100%{ transform:scale(1); opacity:.22; }
  50%{ transform:scale(1.08); opacity:.34; }
}

@media (max-width:1024px){
  .qt-services-hero-x__wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .qt-services-hero-x__content p{
    margin-right:auto;
    margin-left:auto;
  }

  .qt-services-hero-x__actions,
  .qt-services-hero-x__tags{
    justify-content:center;
  }

  .qt-services-hero-x__content h1{
    font-size:46px;
  }
}

@media (max-width:767px){
  .qt-services-hero-x{
    padding:80px 16px 60px;
  }

  .qt-services-hero-x__content h1{
    font-size:34px;
  }

  .qt-services-hero-x__content p{
    font-size:16px;
  }

  .qt-shx-btn{
    font-size:16px;
    padding:14px 20px;
  }

  .qt-services-hero-x__visual{
    min-height:420px;
  }

  .qt-shx-ring.ring-1{ width:180px; height:180px; }
  .qt-shx-ring.ring-2{ width:270px; height:270px; }
  .qt-shx-ring.ring-3{ width:360px; height:360px; }

  .qt-shx-core{
    width:170px;
    height:170px;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .qt-shx-core__logo{
    width:50px;
    height:50px;
    font-size:22px;
    border-radius:14px;
  }

  .qt-shx-core__inner h3{
    font-size:22px;
  }

  .qt-shx-core__inner p{
    font-size:12px;
  }

  .qt-shx-node{
    width:120px;
    min-height:68px;
    padding:10px 8px;
    border-radius:14px;
    gap:6px;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .qt-shx-node__icon{
    font-size:16px;
  }

  .qt-shx-node strong{
    font-size:12px;
    line-height:1.5;
  }

  .node-1{ top:16px; right:36%; }
  .node-2{ top:120px; right:-4px; }
  .node-3{ top:300px; right:12%; }
  .node-4{ top:56px; left:0; }
  .node-5{ top:210px; left:-2px; }
  .node-6{ bottom:10px; left:24%; }

  .qt-services-hero-x__glow{
    display:none;
  }

  .qt-shx-ring{
    display:none;
  }

  .qt-services-hero-x__grid{
    opacity:.3;
  }
}
.qt-services-matrix{
  font-family:'Tajawal',sans-serif;
  padding:10px .0px 10px;
  max-width: 1600px !important !important
}

.qt-services-matrix *{
  box-sizing:border-box;
  font-family:'Tajawal',sans-serif;
}

.qt-services-matrix__head{
  max-width:1900px;
  margin:0 auto 30px;
  text-align:center;
}

.qt-services-matrix__badge{
  display:inline-block;
  margin-bottom:14px;
  padding:10px 16px;
  border-radius:999px;
  color:#fff !important;
  font-size:14px;
  font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.qt-services-matrix__head h2{
  margin:0 0 12px;
  color:#fff !important;
  font-size:46px;
  line-height:1.2;
  font-weight:800;
}

.qt-services-matrix__head h2 span{
  color:#fff !important;
  opacity:.9;
}

.qt-services-matrix__head p{
  margin:0;
  color:rgba(255,255,255,.80);
  font-size:18px;
  line-height:1.95;
  font-weight:500;
}

.qt-services-matrix__grid{
  max-width:1600px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;
}

.qt-svc-card{
  position:relative;
  min-height:250px;
  padding:26px 18px 22px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.10);
  text-align:center;
  overflow:hidden;
  text-decoration:none !important;
  display:block;
  transition:transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.qt-svc-card::before{
  content:"";
  position:absolute;
  inset:auto -15% -40% -15%;
  height:130px;
  background:radial-gradient(circle, rgba(0,229,255,.10), transparent 70%);
  opacity:.55;
  pointer-events:none;
  animation:qtSvcGlow 6s ease-in-out infinite;
}

.qt-svc-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03));
  box-shadow:0 0 20px rgba(255,255,255,.04);
}

.qt-svc-card__topline{
  position:absolute;
  top:0;
  right:14%;
  width:72%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.75), transparent);
  opacity:.9;
  overflow:hidden;
}

.qt-svc-card__topline::after{
  content:"";
  position:absolute;
  top:0;
  right:-20%;
  width:20%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation:qtSvcLineMove 3.6s linear infinite;
}

.qt-svc-card__icon{
  width:64px;
  height:64px;
  margin:0 auto 16px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff !important;
  font-size:28px;
  font-weight:800;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  animation:qtSvcIconFloat 4.5s ease-in-out infinite;
  transition:transform .3s ease, background .3s ease;
}

.qt-svc-card:hover .qt-svc-card__icon{
  transform:translateY(-4px) scale(1.06) rotate(-3deg);
  background:rgba(255,255,255,.10);
}

.qt-svc-card h3{
  margin:0 0 12px;
  color:#fff !important;
  font-size:24px;
  line-height:1.45;
  font-weight:800;
}

.qt-svc-card p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:15px;
  line-height:1.9;
  font-weight:500;
  transition:transform .3s ease, opacity .3s ease;
}

.qt-svc-card:hover p{
  transform:translateY(-2px);
  opacity:1;
}

@keyframes qtSvcIconFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

@keyframes qtSvcGlow{
  0%,100%{ opacity:.35; transform:scale(1); }
  50%{ opacity:.7; transform:scale(1.05); }
}

@keyframes qtSvcLineMove{
  from{ right:-20%; }
  to{ right:100%; }
}

@media (max-width:1200px){
  .qt-services-matrix__grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

@media (max-width:1024px){
  .qt-services-matrix__head h2{
    font-size:38px;
  }

  .qt-services-matrix__grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:767px){
  .qt-services-matrix{
    padding:26px 12px 18px;
  }

  .qt-services-matrix__head{
    margin-bottom:22px;
  }

  .qt-services-matrix__head h2{
    font-size:30px;
  }

  .qt-services-matrix__head p{
    font-size:16px;
  }

  .qt-services-matrix__grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .qt-svc-card{
    min-height:auto;
    padding:22px 16px 18px;
    border-radius:18px;
  }

  .qt-svc-card::before,
  .qt-svc-card__topline::after{
    animation-duration:5s;
  }

  .qt-svc-card__icon{
    width:56px;
    height:56px;
    border-radius:16px;
    font-size:24px;
    animation:none;
  }

  .qt-svc-card h3{
    font-size:21px;
  }

  .qt-svc-card p{
    font-size:14px;
  }
}
.qt-web-hero-pro{
  font-family:'Tajawal',sans-serif;
  position:relative;
  overflow:hidden;
  padding:110px 32px 90px;
  background:
    radial-gradient(circle at 14% 16%, rgba(0,229,255,.08), transparent 22%),
    radial-gradient(circle at 84% 16%, rgba(112,72,255,.10), transparent 24%),
    radial-gradient(circle at 55% 82%, rgba(0,190,255,.07), transparent 20%),
    linear-gradient(135deg,#071320 0%,#0c1c34 48%,#142b4e 100%);
}

.qt-web-hero-pro *{
  box-sizing:border-box;
  font-family:'Tajawal',sans-serif;
}

.qt-web-hero-pro__grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
  opacity:.72;
}

.qt-web-hero-pro__glow{
  position:absolute;
  border-radius:50%;
  filter:blur(34px);
  pointer-events:none;
  opacity:.24;
}

.qt-web-hero-pro__glow.g1{
  width:260px;
  height:260px;
  top:80px;
  right:12%;
  background:rgba(0,229,255,.22);
  animation:qtHeroGlow 7s ease-in-out infinite;
}

.qt-web-hero-pro__glow.g2{
  width:280px;
  height:280px;
  bottom:20px;
  left:6%;
  background:rgba(112,72,255,.18);
  animation:qtHeroGlow 8s ease-in-out infinite 1s;
}

.qt-web-hero-pro__wrap{
  max-width:1320px;
  margin:auto;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:42px;
  align-items:center;
}

.qt-web-hero-pro__badge{
  display:inline-block;
  margin-bottom:18px;
  padding:11px 18px;
  border-radius:999px;
  color:#fff;
  font-size:15px;
  font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}

.qt-web-hero-pro__content h1{
  margin:0 0 18px;
  color:#fff;
  font-size:60px;
  line-height:1.15;
  font-weight:800;
}

.qt-web-hero-pro__content h1 span{
  color:#18d7d3;
  text-shadow:0 0 16px rgba(24,215,211,.18);
}

.qt-web-hero-pro__content p{
  margin:0 0 28px;
  color:rgba(255,255,255,.84);
  font-size:20px;
  line-height:1.95;
  font-weight:500;
  max-width:720px;
}

.qt-web-hero-pro__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.qt-web-hero-pro__btn{
  text-decoration:none !important;
  padding:15px 24px;
  border-radius:16px;
  font-size:17px;
  font-weight:800;
  transition:.28s;
}

.qt-web-hero-pro__btn.primary{
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#22d3ee);
}

.qt-web-hero-pro__btn.ghost{
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
}

.qt-web-hero-pro__features{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.qt-web-hero-pro__features span{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.qt-web-hero-pro__visual{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.qt-floating-badge{
  position:absolute;
  z-index:3;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.qt-floating-badge.badge-1{ top:28px; right:10px; }
.qt-floating-badge.badge-2{ top:160px; left:0; }
.qt-floating-badge.badge-3{ bottom:40px; right:46px; }

.qt-laptop{
  width:100%;
  max-width:720px;
}

.qt-laptop__screen{
  padding:16px;
  border-radius:26px;
  background:#111;
}

.qt-laptop__base{
  height:18px;
  background:#888;
}
.qt-why-choose-creative{
  font-family:'Tajawal',sans-serif;
  padding:40px 18px 28px;
}

.qt-why-choose-creative *{
  box-sizing:border-box;
  font-family:'Tajawal',sans-serif;
}

.qt-why-choose-creative__head{
  max-width:880px;
  margin:0 auto 30px;
  text-align:center;
}

.qt-why-choose-creative__badge{
  display:inline-block;
  margin-bottom:14px;
  padding:10px 16px;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.qt-why-choose-creative__head h2{
  margin:0 0 12px;
  color:#fff;
  font-size:50px;
  line-height:1.2;
  font-weight:800;
}

.qt-why-choose-creative__head h2 span{
  color:#fff;
  opacity:.9;
}

.qt-why-choose-creative__head p{
  margin:0;
  color:rgba(255,255,255,.80);
  font-size:18px;
  line-height:1.95;
  font-weight:500;
}

.qt-why-choose-creative__grid{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}

.qt-choose-box{
  position:relative;
  min-height:220px;
  padding:24px 20px 22px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(10,20,38,.88), rgba(12,22,41,.94));
  border:1px solid rgba(255,255,255,.10);
  text-align:center;
  overflow:hidden;
  transition:.32s ease;
}

.qt-choose-box::before{
  content:"";
  position:absolute;
  inset:auto -15% -45% -15%;
  height:140px;
  background:radial-gradient(circle, rgba(0,229,255,.10), transparent 70%);
  opacity:.55;
  animation:qtChooseGlow 7s ease-in-out infinite;
}

.qt-choose-box:hover{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 0 22px rgba(255,255,255,.05);
}

.qt-choose-box__beam{
  position:absolute;
  top:-30%;
  right:-45%;
  width:42%;
  height:170%;
  transform:rotate(22deg);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.10), transparent);
  animation:qtChooseBeam 6.2s linear infinite;
}

.qt-choose-box__topline{
  position:absolute;
  top:0;
  right:16%;
  width:68%;
  height:3px;
}

.qt-choose-box__icon{
  width:66px;
  height:66px;
  margin:0 auto 16px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:28px;
  background:rgba(255,255,255,.07);
}

.qt-choose-box h3{
  color:#fff;
  font-size:24px;
}

.qt-choose-box p{
  color:rgba(255,255,255,.78);
}

@media (max-width:1024px){
  .qt-why-choose-creative__grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:767px){
  .qt-why-choose-creative__grid{
    grid-template-columns:1fr;
  }
}
.qt-web-hero-pro{
  font-family:'Tajawal',sans-serif;
  position:relative;
  overflow:hidden;
  padding:110px 32px 90px;
  background:
    radial-gradient(circle at 14% 16%, rgba(0,229,255,.08), transparent 22%),
    radial-gradient(circle at 84% 16%, rgba(112,72,255,.10), transparent 24%),
    radial-gradient(circle at 55% 82%, rgba(0,190,255,.07), transparent 20%),
    linear-gradient(135deg,#071320 0%,#0c1c34 48%,#142b4e 100%);
}

.qt-web-hero-pro *{
  box-sizing:border-box;
  font-family:'Tajawal',sans-serif;
}

.qt-web-hero-pro__grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
  opacity:.72;
}

.qt-web-hero-pro__glow{
  position:absolute;
  border-radius:50%;
  filter:blur(34px);
  pointer-events:none;
  opacity:.24;
}

.qt-web-hero-pro__glow.g1{
  width:260px;
  height:260px;
  top:80px;
  right:12%;
  background:rgba(0,229,255,.22);
  animation:qtHeroGlow 7s ease-in-out infinite;
}

.qt-web-hero-pro__glow.g2{
  width:280px;
  height:280px;
  bottom:20px;
  left:6%;
  background:rgba(112,72,255,.18);
  animation:qtHeroGlow 8s ease-in-out infinite 1s;
}

.qt-web-hero-pro__wrap{
  max-width:1320px;
  margin:auto;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:42px;
  align-items:center;
}

.qt-web-hero-pro__badge{
  display:inline-block;
  margin-bottom:18px;
  padding:11px 18px;
  border-radius:999px;
  color:#fff;
  font-size:15px;
  font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}

.qt-web-hero-pro__content h1{
  margin:0 0 18px;
  color:#fff;
  font-size:60px;
  line-height:1.15;
  font-weight:800;
}

.qt-web-hero-pro__content h1 span{
  color:#18d7d3;
  text-shadow:0 0 16px rgba(24,215,211,.18);
}

.qt-web-hero-pro__content p{
  margin:0 0 28px;
  color:rgba(255,255,255,.84);
  font-size:20px;
  line-height:1.95;
  font-weight:500;
  max-width:720px;
}

.qt-web-hero-pro__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.qt-web-hero-pro__btn{
  text-decoration:none !important;
  padding:15px 24px;
  border-radius:16px;
  font-size:17px;
  font-weight:800;
  transition:transform .28s ease, box-shadow .28s ease, background-color .28s ease, border-color .28s ease;
}

.qt-web-hero-pro__btn.primary{
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#22d3ee);
  box-shadow:0 0 20px rgba(34,211,238,.14);
}

.qt-web-hero-pro__btn.primary:hover{
  transform:translateY(-4px);
}

.qt-web-hero-pro__btn.ghost{
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
}

.qt-web-hero-pro__btn.ghost:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.08);
}

.qt-web-hero-pro__features{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.qt-web-hero-pro__features span{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.qt-web-hero-pro__visual{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.qt-floating-badge{
  position:absolute;
  z-index:3;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:13px;
  font-weight:700;
  animation:qtFloatBadge 4.8s ease-in-out infinite;
}

.qt-floating-badge.badge-1{ top:28px; right:10px; }
.qt-floating-badge.badge-2{ top:160px; left:0; animation-delay:1s; }
.qt-floating-badge.badge-3{ bottom:40px; right:46px; animation-delay:1.8s; }

.qt-laptop{
  position:relative;
  width:100%;
  max-width:720px;
  z-index:2;
}

.qt-laptop__screen{
  position:relative;
  padding:16px;
  border-radius:26px 26px 18px 18px;
  background:linear-gradient(145deg,#202a39,#0c121b);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 22px 45px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.03) inset;
  animation:qtLaptopFloat 6s ease-in-out infinite;
}

.qt-site-preview{
  background:#eaf0f6;
  border-radius:16px 16px 10px 10px;
  overflow:hidden;
  aspect-ratio:16 / 10;
  position:relative;
}

.qt-site-preview__scroll{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.qt-preview-page{
  min-height:145%;
  background:linear-gradient(180deg,#eef3f8 0%, #ffffff 100%);
  animation:qtScrollSite 12s ease-in-out infinite alternate;
}

.qt-preview-header{
  height:58px;
  background:#f8fbff;
  border-bottom:1px solid rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
}

.qt-preview-logo{
  width:88px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(90deg,#1ddad8,#5c6cff);
}

.qt-preview-nav{
  display:flex;
  gap:8px;
}

.qt-preview-nav span{
  width:42px;
  height:8px;
  border-radius:999px;
  background:#d6e0ea;
}

.qt-preview-hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
  padding:20px;
  background:linear-gradient(135deg,#d8e6ee,#b8cdd8);
}

.qt-preview-hero__text{
  padding-top:6px;
}

.qt-line{
  height:12px;
  border-radius:999px;
  background:#f8fcff;
  margin-bottom:10px;
  opacity:.92;
}

.qt-line.w1{ width:82%; }
.qt-line.w2{ width:68%; }
.qt-line.w3{ width:56%; }

.qt-btn-line{
  width:96px;
  height:32px;
  border-radius:999px;
  background:linear-gradient(135deg,#7c5cff,#28d7ee);
  margin-top:16px;
}

.qt-preview-hero__card{
  min-height:130px;
  border-radius:18px;
  background:linear-gradient(135deg,#eff4f8,#d9e4eb);
  box-shadow:inset 0 10px 20px rgba(0,0,0,.05);
}

.qt-preview-section{
  display:grid;
  grid-template-columns:1.2fr .9fr .9fr;
  gap:12px;
  padding:16px 18px;
}

.qt-preview-section.second{
  grid-template-columns:1.3fr .7fr .7fr;
  padding-top:0;
}

.qt-preview-section.third{
  grid-template-columns:repeat(4,1fr);
}

.qt-card{
  min-height:76px;
  border-radius:14px;
  background:linear-gradient(180deg,#dfe8ef,#eff5fa);
  box-shadow:inset 0 8px 16px rgba(0,0,0,.04);
}

.qt-card.tall{
  min-height:160px;
}

.qt-card.wide{
  min-height:96px;
}

.qt-card.small{
  min-height:96px;
}

.qt-preview-banner{
  margin:0 18px 16px;
  height:80px;
  border-radius:18px;
  background:linear-gradient(135deg,#1fd8d7,#586bff);
  opacity:.9;
}

.qt-preview-footer{
  padding:12px 18px 18px;
  display:flex;
  justify-content:center;
  gap:8px;
}

.qt-preview-footer span{
  width:56px;
  height:8px;
  border-radius:999px;
  background:#cad7e2;
}

.qt-laptop__base{
  width:88%;
  height:18px;
  margin:0 auto;
  border-radius:0 0 20px 20px;
  background:linear-gradient(180deg,#adb9c5,#7f8d9b);
  box-shadow:0 10px 14px rgba(0,0,0,.12);
  position:relative;
}

.qt-laptop__base::after{
  content:"";
  position:absolute;
  left:50%;
  top:4px;
  transform:translateX(-50%);
  width:120px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.45);
}

@keyframes qtScrollSite{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(-24%); }
}

@keyframes qtLaptopFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

@keyframes qtFloatBadge{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

@keyframes qtHeroGlow{
  0%,100%{ transform:scale(1); opacity:.24; }
  50%{ transform:scale(1.08); opacity:.34; }
}

@media (max-width:1024px){
  .qt-web-hero-pro__wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .qt-web-hero-pro__content p{
    margin-right:auto;
    margin-left:auto;
  }

  .qt-web-hero-pro__actions,
  .qt-web-hero-pro__features{
    justify-content:center;
  }

  .qt-web-hero-pro__content h1{
    font-size:46px;
  }
}

@media (max-width:767px){
  .qt-web-hero-pro{
    padding:80px 16px 60px;
  }

  .qt-web-hero-pro__badge{
    font-size:13px;
    padding:10px 14px;
  }

  .qt-web-hero-pro__content h1{
    font-size:34px;
  }

  .qt-web-hero-pro__content p{
    font-size:16px;
  }

  .qt-web-hero-pro__btn{
    font-size:16px;
    padding:14px 20px;
  }

  .qt-web-hero-pro__visual{
    min-height:320px;
  }

  .qt-floating-badge{
    font-size:12px;
    padding:8px 11px;
  }

  .qt-floating-badge.badge-1{ top:12px; right:0; }
  .qt-floating-badge.badge-2{ top:110px; left:0; }
  .qt-floating-badge.badge-3{ bottom:12px; right:18px; }

  .qt-laptop__screen{
    padding:10px;
    border-radius:18px 18px 12px 12px;
  }

  .qt-site-preview{
    border-radius:12px 12px 8px 8px;
  }

  .qt-preview-header{
    height:42px;
    padding:0 12px;
  }

  .qt-preview-logo{
    width:56px;
    height:10px;
  }

  .qt-preview-nav span{
    width:24px;
    height:6px;
  }

  .qt-preview-hero{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px;
  }

  .qt-preview-hero__text .qt-line{
    height:9px;
    margin-bottom:8px;
  }

  .qt-btn-line{
    width:74px;
    height:24px;
    margin-top:10px;
  }

  .qt-preview-hero__card{
    min-height:70px;
    border-radius:12px;
  }

  .qt-preview-section,
  .qt-preview-section.second,
  .qt-preview-section.third{
    gap:8px;
    padding:10px 12px;
  }

  .qt-card{
    min-height:42px;
    border-radius:10px;
  }

  .qt-card.tall{
    min-height:88px;
  }

  .qt-card.wide,
  .qt-card.small{
    min-height:58px;
  }

  .qt-preview-banner{
    margin:0 12px 10px;
    height:46px;
    border-radius:12px;
  }

  .qt-preview-footer{
    padding:8px 12px 12px;
  }

  .qt-preview-footer span{
    width:34px;
    height:6px;
  }

  .qt-laptop__base{
    height:12px;
    width:90%;
  }

  .qt-laptop__base::after{
    width:70px;
    height:4px;
  }

  .qt-web-hero-pro__glow{
    display:none;
  }
}
/* انسخي الكود ده كامل في Custom CSS */

.qt-appdev-hero{
  font-family:'Tajawal',sans-serif;
  position:relative;
  overflow:hidden;
  padding:110px 32px 90px;
  background:
    radial-gradient(circle at 14% 18%, rgba(0,229,255,.08), transparent 22%),
    radial-gradient(circle at 84% 16%, rgba(139,92,246,.10), transparent 24%),
    radial-gradient(circle at 58% 82%, rgba(34,211,238,.08), transparent 22%),
    linear-gradient(135deg,#07131f 0%,#0b1b31 50%,#132a4e 100%);
}

/* مهم جداً */
.qt-appdev-hero,
.qt-appdev-hero *{
  box-sizing:border-box;
  font-family:'Tajawal',sans-serif;
}

/* باقي الكود كامل زي ما هو */
.qt-appdev-hero__grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.72;
}

/* (مش هختصر عليك) */
.qt-appdev-hero__wrap{
  max-width:1320px;
  margin:auto;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:42px;
  align-items:center;
}

.qt-appdev-hero__content h1{
  color:#fff;
  font-size:60px;
}

.qt-appdev-hero__visual{
  display:flex;
  justify-content:center;
}

/* animation */
@keyframes qtPhoneFront{
  50%{ transform:translateY(-10px) rotate(8deg); }
}
@keyframes qtPhoneBack{
  50%{ transform:translateY(-7px) rotate(-10deg); }
}
/* IMPORTANT: حطي ده في Custom CSS */

.qt-portal,
.qt-portal *{
  font-family:"Tajawal",system-ui,sans-serif!important;
  box-sizing:border-box;
}

.qt-portal{
  color:#EAF2FF;
  max-width:1400px;
  margin:auto;
}

.qt-portal__stage{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  padding:22px;
  min-height:520px;
  background:
    radial-gradient(circle at 20% 25%, rgba(34,211,238,.10), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(59,130,246,.22);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
}

.qt-portal__grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:18px;
}

.qt-portal__card{
  border-radius:24px;
  padding:22px;
  background: rgba(8,22,42,.62);
  backdrop-filter: blur(14px);
  border:1px solid rgba(59,130,246,.24);
  box-shadow: 0 16px 44px rgba(0,0,0,.30);
}

.qt-ic{
  width:60px;
  height:60px;
  border-radius:18px;
  display:grid;
  place-items:center;
  margin:0 0 12px auto;
  font-size:26px;
  background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(59,130,246,.18));
}

.qt-portal__card h4{
  font-size:22px;
  color:#fff;
}

.qt-portal__card p{
  color:rgba(234,242,255,.74);
}

/* animation */
.qt-portal__featured{
  animation: qtTeleportOut 6s infinite;
}
.qt-portal__next{
  animation: qtTeleportIn 6s infinite;
}

@keyframes qtTeleportOut{
  50%{ transform: scale(.7); opacity:0; }
}
@keyframes qtTeleportIn{
  0%{ transform: scale(.6); opacity:0; }
  60%{ transform: scale(1); opacity:1; }
}

/* responsive */
@media (max-width:900px){
  .qt-portal__grid{ grid-template-columns:1fr; }
}
/* حطيه في Custom CSS */

.qt-kick,
.qt-kick *{
  font-family:"Tajawal",system-ui,sans-serif!important;
  box-sizing:border-box;
}

.qt-kick{
  color:#EAF2FF;
  max-width:1400px;
  margin:auto;
}

.qt-kick__box{
  position:relative;
  height:320px;
  border-radius:28px;
  overflow:hidden;
  padding:18px;

  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-content:flex-start;

  background:
    radial-gradient(circle at 20% 20%, rgba(34,211,238,.10), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(59,130,246,.22);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
}

.qt-kick__box::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-40%;
  width:40%;
  height:140%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  opacity:.6;
  animation:qtScan 3.2s linear infinite;
}

@keyframes qtScan{
  to{left:130%}
}

.qt-chip{
  padding:12px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:16px;

  background:rgba(8,22,42,.62);
  border:1px solid rgba(59,130,246,.24);
  box-shadow:0 16px 44px rgba(0,0,0,.26);
}

.qt-kick__box.qt-kick--on{
  display:block;
}

.qt-kick__box.qt-kick--on .qt-chip{
  position:absolute;
}

//faq
.sc_fs_faq > div > div {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease, opacity .2s ease;
  opacity: 0;
}
.sc_fs_faq h2.open + div,
.sc_fs_faq h3.open + div {
  max-height: 600px;
  opacity: 1;
}

/* حركة أقوى: Up/Down + Drift + Swing */
@keyframes qtFloat1{
  0%,100%{ transform: translate(0,0) rotate(-8deg); }
  25%{ transform: translate(6px,-10px) rotate(-6deg); }
  50%{ transform: translate(-4px,-22px) rotate(-9deg); }
  75%{ transform: translate(5px,-12px) rotate(-7deg); }
}
@keyframes qtFloat2{
  0%,100%{ transform: translate(0,0) rotate(7deg); }
  25%{ transform: translate(-6px,-12px) rotate(9deg); }
  50%{ transform: translate(4px,-26px) rotate(6deg); }
  75%{ transform: translate(-5px,-14px) rotate(8deg); }
}
@keyframes qtFloat3{
  0%,100%{ transform: translate(0,0) rotate(-6deg); }
  25%{ transform: translate(5px,-9px) rotate(-4deg); }
  50%{ transform: translate(-6px,-20px) rotate(-7deg); }
  75%{ transform: translate(4px,-11px) rotate(-5deg); }
}
@keyframes qtFloat4{
  0%,100%{ transform: translate(0,0) rotate(10deg); }
  25%{ transform: translate(-5px,-11px) rotate(12deg); }
  50%{ transform: translate(6px,-24px) rotate(9deg); }
  75%{ transform: translate(-4px,-13px) rotate(11deg); }
}
@keyframes qtFloat5{
  0%,100%{ transform: translate(0,0) rotate(-10deg); }
  25%{ transform: translate(6px,-12px) rotate(-8deg); }
  50%{ transform: translate(-6px,-28px) rotate(-11deg); }
  75%{ transform: translate(5px,-15px) rotate(-9deg); }
}

/* الصاروخ: طلوع أقوى + نفس الحفاظ على السنتر */
@keyframes qtFloatCenter{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  25%{ transform: translateX(-50%) translateY(-8px); }
  50%{ transform: translateX(-50%) translateY(-18px); }
  75%{ transform: translateX(-50%) translateY(-10px); }
}

.qt-timeline,
.qt-timeline *{
  font-family:"Tajawal",system-ui,sans-serif !important;
  box-sizing:border-box;
}

.qt-timeline{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0;
}

/* center line - desktop */
.qt-tl-line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(59,130,246,.10), rgba(34,211,238,.75), rgba(59,130,246,.10));
  box-shadow:0 0 28px rgba(34,211,238,.18);
  overflow:hidden;
}

.qt-tl-line::after{
  content:"";
  position:absolute;
  left:-20px;
  right:-20px;
  height:140px;
  top:-30%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent);
  animation:qtBeam 3.8s linear infinite;
  opacity:.9;
}

@keyframes qtBeam{
  0%{ transform:translateY(-30%); }
  100%{ transform:translateY(130%); }
}

.qt-tl-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 110px 1fr;
  align-items:center;
  min-height:160px;
}

.qt-tl-dot{
  grid-column:2;
  display:grid;
  place-items:center;
  z-index:3;
}

.qt-tl-dot span{
  width:74px;
  height:74px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  font-size:20px;
  background:linear-gradient(180deg, rgba(34,211,238,.95), rgba(59,130,246,.92));
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    0 0 42px rgba(34,211,238,.22);
  border:1px solid rgba(255,255,255,.16);
  animation:qtDot 2.8s ease-in-out infinite;
}

@keyframes qtDot{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-6px) scale(1.03); }
}

.qt-tl-item::before{
  content:"";
  position:absolute;
  top:50%;
  width:120px;
  height:2px;
  background:linear-gradient(90deg, rgba(34,211,238,0), rgba(34,211,238,.55), rgba(34,211,238,0));
  filter:drop-shadow(0 0 12px rgba(34,211,238,.18));
}

.qt-left::before{
  left:calc(50% - 120px);
  transform:translateY(-50%);
}

.qt-right::before{
  right:calc(50% - 120px);
  transform:translateY(-50%);
}

.qt-tl-card{
  max-width:520px;
  padding:22px;
  border-radius:22px;
  background:rgba(8,22,42,.62);
  border:1px solid rgba(59,130,246,.24);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 54px rgba(0,0,0,.30);
  display:flex;
  gap:16px;
  align-items:flex-start;
  position:relative;
  overflow:hidden;
  animation:qtFloatCard 4.8s ease-in-out infinite;
}

@keyframes qtFloatCard{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}

.qt-tl-card::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-40%;
  width:40%;
  height:160%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  opacity:.55;
  animation:qtCardScan 3.9s linear infinite;
}

@keyframes qtCardScan{
  to{ left:140%; }
}

.qt-tl-ic{
  width:58px;
  height:58px;
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  font-weight:900;
  font-size:22px;
  background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(59,130,246,.18));
  border:1px solid rgba(34,211,238,.35);
  box-shadow:0 0 24px rgba(34,211,238,.12);
}

.qt-tl-txt{
  min-width:0;
}

.qt-tl-txt h4{
  margin:0 0 8px;
  font-size:26px;
  line-height:1.25;
  color:#fff;
  font-weight:900;
}

.qt-tl-txt p{
  margin:0;
  font-size:16px;
  line-height:1.85;
  color:rgba(234,242,255,.78);
  font-weight:500;
}

.qt-left .qt-tl-card{
  grid-column:1;
  justify-self:end;
}

.qt-right .qt-tl-card{
  grid-column:3;
  justify-self:start;
}

.qt-tl-item:nth-child(2) .qt-tl-card{ animation-delay:-.6s; }
.qt-tl-item:nth-child(3) .qt-tl-card{ animation-delay:-1.2s; }
.qt-tl-item:nth-child(4) .qt-tl-card{ animation-delay:-1.8s; }
.qt-tl-item:nth-child(5) .qt-tl-card{ animation-delay:-2.4s; }
.qt-tl-item:nth-child(6) .qt-tl-card{ animation-delay:-3s; }

/* tablet */
@media (max-width: 900px){
  .qt-timeline{
    padding:0 4px;
  }

  .qt-tl-line{
    left:auto;
    right:28px;
    transform:none;
    width:3px;
  }

  .qt-tl-item{
    grid-template-columns:1fr 74px;
    gap:12px;
    min-height:auto;
    padding:0 0 18px;
  }

  .qt-left .qt-tl-card,
  .qt-right .qt-tl-card{
    grid-column:1;
    justify-self:stretch;
    max-width:100%;
  }

  .qt-tl-dot{
    grid-column:2;
    align-self:center;
  }

  .qt-left::before,
  .qt-right::before{
    right:28px;
    left:auto;
    width:42px;
    transform:translateY(-50%);
  }

  .qt-tl-dot span{
    width:58px;
    height:58px;
    font-size:16px;
  }

  .qt-tl-card{
    padding:18px;
    border-radius:18px;
    gap:14px;
  }

  .qt-tl-ic{
    width:50px;
    height:50px;
    border-radius:14px;
    font-size:19px;
  }

  .qt-tl-txt h4{
    font-size:22px;
  }

  .qt-tl-txt p{
    font-size:15px;
    line-height:1.75;
  }
}

/* mobile - clean stacked layout */
@media (max-width: 640px){
  .qt-timeline{
    padding:0 6px;
  }

  .qt-tl-line{
    right:22px;
    width:3px;
    box-shadow:0 0 16px rgba(34,211,238,.12);
  }

  .qt-tl-line::after{
    height:100px;
    animation-duration:4.6s;
    opacity:.75;
  }

  .qt-tl-item{
    grid-template-columns:1fr 58px;
    gap:10px;
    min-height:auto;
    padding:0 0 14px;
  }

  .qt-left .qt-tl-card,
  .qt-right .qt-tl-card{
    grid-column:1;
    width:100%;
    max-width:100%;
  }

  .qt-tl-dot{
    grid-column:2;
    align-self:start;
    padding-top:10px;
  }

  .qt-left::before,
  .qt-right::before{
    right:22px;
    width:28px;
    opacity:.75;
  }

  .qt-tl-dot span{
    width:46px;
    height:46px;
    font-size:13px;
    box-shadow:
      0 10px 24px rgba(0,0,0,.22),
      0 0 24px rgba(34,211,238,.16);
    animation:none;
  }

  .qt-tl-card{
    padding:16px 14px;
    border-radius:16px;
    gap:12px;
    box-shadow:0 10px 28px rgba(0,0,0,.22);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    animation:none;
  }

  .qt-tl-card::after{
    animation-duration:5.4s;
    opacity:.4;
  }

  .qt-tl-ic{
    width:42px;
    height:42px;
    border-radius:12px;
    font-size:17px;
  }

  .qt-tl-txt h4{
    font-size:18px;
    line-height:1.35;
    margin-bottom:6px;
  }

  .qt-tl-txt p{
    font-size:13px;
    line-height:1.7;
  }
}

@media (prefers-reduced-motion: reduce){
  .qt-tl-line::after,
  .qt-tl-dot span,
  .qt-tl-card,
  .qt-tl-card::after{
    animation:none !important;
  }
}


 @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700;800;900&display=swap');
      /* Metrics */
.qt-host-metrics{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.qt-metric{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(10,24,46,.28);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.qt-metric-top{ display:flex; align-items:center; gap: 8px; color:#fff; font-weight: 900; }
.qt-metric-sub{ margin-top: 6px; color: rgba(255,255,255,.68); font-size: 13px; line-height:1.4; }
.qt-meter{
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
}
.qt-meter span{
  display:block;
  height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #2563eb);
  animation: qtMeter 2.4s ease-in-out infinite;
}
@keyframes qtMeter{ 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.2); } }


@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700;800;900&display=swap');

.qt-orbit-flow{
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
  height: 320px;
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  overflow: visible;
}

/* circles layout */
.qt-flow-row{
  position: relative;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 26px;
  z-index: 5;
}

/* bubble style */
.qt-bubble{
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  gap: 6px;
  text-align:center;

  background: rgba(10,24,46,.33);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 26px 80px rgba(0,0,0,.28);
  overflow:hidden;
  animation: qtBubbleFloat 4s ease-in-out infinite;
}
.qt-bubble:nth-child(2){ animation-duration: 4.6s; }
.qt-bubble:nth-child(3){ animation-duration: 5.0s; }
.qt-bubble:nth-child(4){ animation-duration: 4.3s; }

@keyframes qtBubbleFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* soft inner glow */
.qt-bubble::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    radial-gradient(circle at 30% 30%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(circle at 70% 75%, rgba(59,130,246,.16), transparent 62%);
  filter: blur(18px);
  opacity:.95;
  animation: qtGlow 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes qtGlow{
  0%,100%{ transform: translate(-10px,8px) scale(1); }
  50%{ transform: translate(12px,-10px) scale(1.06); }
}

.qt-num{
  position:absolute;
  top: 0px;
  right: 0pxpx;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: #061423;
  background: linear-gradient(135deg, #22d3ee, #2563eb);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  z-index: 999px !important;
}

.qt-b-icon{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size: 20px;
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(59,130,246,.85));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 55px rgba(0,0,0,.24);
  position: relative;
  z-index: 2;
}
.b2 .qt-b-icon{ background: linear-gradient(135deg, rgba(0,255,178,.9), rgba(34,211,238,.9)); }
.b3 .qt-b-icon{ background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(239,68,68,.88)); }
.b4 .qt-b-icon{ background: linear-gradient(135deg, rgba(168,85,247,.95), rgba(59,130,246,.85)); }

.qt-b-title{
  color:#fff;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.15;
  position: relative;
  z-index: 2;
}
.qt-b-sub{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 14px;
  position: relative;
  z-index: 2;
}

/* SVG line */
.qt-flow-svg{
  position:absolute;
  inset:0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events:none;
}
.qt-flow-base{
  fill:none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 4.5;
  stroke-linecap: round;
}
.qt-flow-neon{
  fill:none;
  stroke: url(#qtFlowGrad);
  stroke-width: 4.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 16px rgba(34,211,238,.22));
  stroke-dasharray: 14 18;
  animation: qtDash 2.2s linear infinite;
}
@keyframes qtDash{ to{ stroke-dashoffset: -220; } }

/* moving dot */
.qt-flow-dot{
  position:absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(34,211,238,.95), rgba(59,130,246,.85));
  box-shadow: 0 0 20px rgba(34,211,238,.35);
  z-index: 9;
  pointer-events:none;
}

/* ===== Mobile ===== */
@media (max-width: 860px){
  .qt-orbit-flow{ height: 680px; }
  .qt-flow-row{
    flex-direction: column;
    justify-content: center;
    gap: 22px;
  }
  .qt-bubble{
    width: 190px;
    height: 190px;
  }
}


@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700;800;900&display=swap');

.qt-hosting-core{
  width: min(820px, 100%);
  margin: 0 auto;
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* الكارد نفسه: مفيش أوفرفلو */
.qt-card{
  position: relative;
  height: 380px;
  border-radius: 26px;
  overflow: hidden;              /* أهم سطر */
  background: rgba(10,24,46,.20);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 26px 90px rgba(0,0,0,.28);
  isolation: isolate;
}

/* شبكة خفيفة داخل الكارد */
.qt-grid{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity:.14;
  pointer-events:none;
}

/* إطار نيوني داخلي (بدون خروج) */
.qt-border{
  position:absolute; inset:0;
  border-radius: 26px;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 30%, rgba(34,211,238,.20), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(59,130,246,.18), transparent 58%);
  filter: blur(16px);
  opacity: .9;
  animation: qtGlow 6.2s ease-in-out infinite;
}
@keyframes qtGlow{
  0%,100%{ transform: translate(-10px,8px) scale(1); }
  50%{ transform: translate(12px,-10px) scale(1.06); }
}

/* ====== السيرفر ====== */
.qt-server{
  position:absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%,-50%);
  width: 220px;
  height: 200px;
  z-index: 4;
  animation: qtFloat 3.6s ease-in-out infinite;
}
@keyframes qtFloat{
  0%,100%{ transform: translate(-50%,-50%) translateY(0); }
  50%{ transform: translate(-50%,-50%) translateY(-10px); }
}

/* سطح علوي */
.qt-top{
  position:absolute;
  left: 12px; right: 12px;
  top: 0;
  height: 44px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.qt-top::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 18px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.22), transparent);
  transform: translateX(-60%);
  animation: qtSheen 2.6s linear infinite;
}
@keyframes qtSheen{ to{ transform: translateX(120%);} }

/* الواجهة الأمامية */
.qt-front{
  position:absolute;
  left:0; right:0;
  bottom: 0;
  height: 164px;
  border-radius: 22px;
  background: rgba(10,24,46,.22);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 80px rgba(0,0,0,.28);
  padding: 16px 14px;
  overflow:hidden;
}
.qt-front::after{
  content:"";
  position:absolute; inset:-35%;
  background:
    radial-gradient(circle at 30% 30%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(circle at 70% 75%, rgba(59,130,246,.14), transparent 62%);
  filter: blur(18px);
  opacity:.9;
  pointer-events:none;
}

/* وحدات السيرفر */
.qt-bay{
  height: 28px;
  margin: 10px 0;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow:hidden;
}
.qt-bay::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.18), transparent);
  transform: translateX(-60%);
  animation: qtScan 2.2s linear infinite;
}
@keyframes qtScan{ to{ transform: translateX(120%);} }

.qt-bay i{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(34,211,238,.70);
  box-shadow: 0 0 14px rgba(34,211,238,.22);
  animation: qtBlink 1.4s ease-in-out infinite;
}
.qt-bay i:nth-child(1){ left: 10px; }
.qt-bay i:nth-child(2){ left: 24px; background: rgba(59,130,246,.70); animation-delay:.25s; }
.qt-bay i:nth-child(3){ left: 38px; background: rgba(168,85,247,.60); animation-delay:.5s; }
@keyframes qtBlink{ 0%,100%{ opacity:.35; } 50%{ opacity: 1; } }

/* شعاع مسح */
.qt-scan{
  position:absolute;
  left: 50%;
  top: 22px;
  width: 34px;
  height: 170px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(34,211,238,.16), transparent);
  opacity:.65;
  filter: blur(.2px);
  animation: qtBeam 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes qtBeam{
  0%{ transform: translateX(-50%) translateY(-35%); }
  50%{ transform: translateX(-50%) translateY(5%); }
  100%{ transform: translateX(-50%) translateY(75%); }
}

/* ====== خطوط الداتا (داخل الكارد، بدون خروج) ====== */
.qt-arms{
  position:absolute; inset:0;
  z-index: 2;
  pointer-events:none;
}

/* طول الخط متحكم فيه عشان ما يطلعش برة */
.qt-arm{
  position:absolute;
  left: 50%;
  top: 52%;
  width: clamp(110px, 18vw, 160px);
  height: 4px;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(34,211,238,.0), rgba(34,211,238,.55), rgba(34,211,238,.0));
  filter: drop-shadow(0 0 14px rgba(34,211,238,.12));
  opacity: .95;
}
.qt-arm .qt-dot{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(34,211,238,.95), rgba(59,130,246,.85));
  box-shadow: 0 0 18px rgba(34,211,238,.28);
  animation: qtDotMove 1.8s ease-in-out infinite;
}
@keyframes qtDotMove{
  0%{ left: 0; opacity: 0; }
  15%{ opacity: 1; }
  85%{ opacity: 1; }
  100%{ left: calc(100% - 12px); opacity: 0; }
}

/* اتجاهات مختلفة */
.a1{ transform: translate(-50%,-50%) rotate(-18deg); }
.a2{ transform: translate(-50%,-50%) rotate(18deg); background: linear-gradient(90deg, rgba(59,130,246,0), rgba(59,130,246,.55), rgba(59,130,246,0)); }
.a2 .qt-dot{ background: radial-gradient(circle at 30% 30%, #fff, rgba(59,130,246,.95), rgba(168,85,247,.80)); box-shadow: 0 0 18px rgba(59,130,246,.22); animation-duration: 2.05s; }

.a3{ transform: translate(-50%,-50%) rotate(160deg); background: linear-gradient(90deg, rgba(0,255,178,0), rgba(0,255,178,.50), rgba(0,255,178,0)); }
.a3 .qt-dot{ background: radial-gradient(circle at 30% 30%, #fff, rgba(0,255,178,.95), rgba(34,211,238,.80)); box-shadow: 0 0 18px rgba(0,255,178,.20); animation-duration: 1.7s; }

.a4{ transform: translate(-50%,-50%) rotate(-160deg); background: linear-gradient(90deg, rgba(168,85,247,0), rgba(168,85,247,.45), rgba(168,85,247,0)); }
.a4 .qt-dot{ background: radial-gradient(circle at 30% 30%, #fff, rgba(168,85,247,.92), rgba(59,130,246,.82)); box-shadow: 0 0 18px rgba(168,85,247,.18); animation-duration: 2.2s; }

/* Chips داخل الكارد */
.qt-chips{
  position:absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display:flex;
  gap: 10px;
  z-index: 6;
}
.qt-chip{
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(10,24,46,.20);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 55px rgba(0,0,0,.22);
  animation: qtChipFloat 2.8s ease-in-out infinite;
}
.c2{ animation-delay:.25s; }
.c3{ animation-delay:.5s; }
@keyframes qtChipFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* Responsive */
@media (max-width: 860px){
  .qt-card{ height: 300px; }
  .qt-server{ width: 210px; height: 190px; }
  .qt-arm{ width: clamp(95px, 26vw, 140px); }
  .qt-chips{ flex-wrap: wrap; justify-content:center; }
}


.qt-store-hero2,.qt-store-hero2 *{box-sizing:border-box;font-family:'Tajawal',system-ui,sans-serif}
.qt-store-hero2{padding:90px 28px;background:linear-gradient(135deg,#071320 0%,#0b1b31 50%,#142b4d 100%)}
.qt-store-hero2__wrap{max-width:1360px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.qt-store-badge{display:inline-block;margin-bottom:16px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:700}
.qt-store-content h1{margin:0 0 16px;color:#fff;font-size:58px;line-height:1.12;font-weight:800}
.qt-store-content h1 span{color:#22d3ee}
.qt-store-content p{margin:0 0 24px;color:rgba(255,255,255,.84);font-size:20px;line-height:1.95}
.qt-store-actions{display:flex;gap:14px;flex-wrap:wrap}
.qt-store-btn{text-decoration:none!important;padding:15px 24px;border-radius:14px;font-size:17px;font-weight:800;transition:.25s}
.qt-store-btn.primary{background:linear-gradient(135deg,#8b5cf6,#22d3ee);color:#fff}
.qt-store-btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#fff}
.qt-store-btn:hover{transform:translateY(-3px)}
.qt-store-visual{position:relative;min-height:430px}
.qt-store-window{width:100%;max-width:650px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.qt-store-top{height:48px;background:rgba(255,255,255,.08)}
.qt-store-banner{height:140px;margin:18px;border-radius:18px;background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(139,92,246,.16))}
.qt-store-products{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 18px 18px}
.qt-store-products div{height:120px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.qt-store-cart,.qt-store-sales{position:absolute;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:700}
.qt-store-cart{top:20px;right:10px}.qt-store-sales{bottom:10px;left:20px}
@media(max-width:1024px){.qt-store-hero2__wrap{grid-template-columns:1fr;text-align:center}.qt-store-content h1{font-size:42px}.qt-store-actions{justify-content:center}}
@media(max-width:767px){.qt-store-hero2{padding:60px 14px}.qt-store-content h1{font-size:30px}.qt-store-content p{font-size:16px}.qt-store-products{grid-template-columns:1fr 1fr}.qt-store-products div{height:80px}}

.qt-seo-hero,
.qt-seo-hero *{
  box-sizing:border-box;
  font-family:'Tajawal',system-ui,sans-serif;
}

.qt-seo-hero{
  position:relative;
  overflow:hidden;
  padding:90px 28px 80px;
}

.qt-seo-hero__grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:44px 44px;
  pointer-events:none;
  opacity:.72;
}

.qt-seo-hero__glow{
  position:absolute;
  border-radius:50%;
  filter:blur(34px);
  pointer-events:none;
  opacity:.22;
}

.qt-seo-hero__glow.g1{
  width:260px;
  height:260px;
  top:40px;
  right:10%;
  background:rgba(34,211,238,.18);
  animation:qtSeoGlow 8s ease-in-out infinite;
}

.qt-seo-hero__glow.g2{
  width:280px;
  height:280px;
  bottom:0;
  left:8%;
  background:rgba(59,130,246,.18);
  animation:qtSeoGlow 9s ease-in-out infinite 1s;
}

.qt-seo-hero__wrap{
  max-width:1360px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.02fr;
  gap:36px;
  align-items:center;
  position:relative;
  z-index:1;
}

.qt-seo-hero__badge{
  display:inline-block;
  margin-bottom:18px;
  padding:11px 18px;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  border:1px solid rgba(34,211,238,.28);
  background:rgba(255,255,255,.04);
}

.qt-seo-hero__content h1{
  margin:0 0 18px;
  color:#fff;
  font-size:62px;
  line-height:1.1;
  font-weight:800;
}

.qt-seo-hero__content h1 span{
  color:#22d3ee;
  text-shadow:0 0 16px rgba(34,211,238,.16);
}

.qt-seo-hero__content p{
  margin:0 0 26px;
  color:rgba(255,255,255,.84);
  font-size:20px;
  line-height:1.9;
  font-weight:500;
  max-width:740px;
}

.qt-seo-hero__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:22px;
}

.qt-seo-btn{
  text-decoration:none !important;
  padding:15px 24px;
  border-radius:14px;
  font-size:17px;
  font-weight:800;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.qt-seo-btn--primary{
  color:#fff;
  background:linear-gradient(135deg,#3b82f6,#22d3ee);
}

.qt-seo-btn--ghost{
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
}

.qt-seo-btn:hover{
  transform:translateY(-3px);
}

.qt-seo-hero__chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.qt-seo-hero__chips span{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.qt-seo-hero__visual{
  min-height:500px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.qt-seo-board{
  position:relative;
  width:100%;
  max-width:700px;
  min-height:450px;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(11,22,42,.88), rgba(10,22,40,.96));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 36px rgba(0,0,0,.22);
  overflow:hidden;
}

.qt-seo-board::before{
  content:"";
  position:absolute;
  top:-35%;
  left:-30%;
  width:36%;
  height:180%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation:qtSeoScan 5.8s linear infinite;
  opacity:.5;
}

.qt-seo-search{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:16px;
}

.qt-seo-search__icon{
  color:#22d3ee;
  font-size:20px;
  font-weight:900;
}

.qt-seo-search__line{
  flex:1;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
}

.qt-seo-search__badge{
  min-width:88px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:800;
  background:linear-gradient(135deg,#3b82f6,#22d3ee);
}

.qt-seo-chart{
  position:relative;
  height:180px;
  padding:18px 16px 14px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(16,60,88,.65), rgba(13,42,66,.78));
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:16px;
  overflow:hidden;
}

.qt-seo-chart__bars{
  position:absolute;
  right:18px;
  left:18px;
  bottom:14px;
  height:120px;
  display:flex;
  align-items:flex-end;
  gap:14px;
}

.qt-seo-chart__bars span{
  flex:1;
  border-radius:12px 12px 4px 4px;
  background:linear-gradient(180deg,#22d3ee,#3b82f6);
  animation:qtBars 4.8s ease-in-out infinite;
}

.qt-seo-chart__bars span:nth-child(1){ height:34px; animation-delay:.1s; }
.qt-seo-chart__bars span:nth-child(2){ height:58px; animation-delay:.3s; }
.qt-seo-chart__bars span:nth-child(3){ height:78px; animation-delay:.5s; }
.qt-seo-chart__bars span:nth-child(4){ height:66px; animation-delay:.7s; }
.qt-seo-chart__bars span:nth-child(5){ height:98px; animation-delay:.9s; }
.qt-seo-chart__bars span:nth-child(6){ height:116px; animation-delay:1.1s; }

.qt-seo-chart__line{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.qt-seo-chart__line i{
  position:absolute;
  right:16px;
  left:16px;
  bottom:52px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0));
  transform:rotate(-8deg);
  box-shadow:0 0 14px rgba(255,255,255,.18);
}

.qt-seo-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.qt-seo-card{
  padding:16px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  animation:qtCardFloatSeo 5.4s ease-in-out infinite;
}

.qt-seo-card.card-2{ animation-delay:.7s; }
.qt-seo-card.card-3{ animation-delay:1.4s; }

.qt-seo-card__icon{
  width:44px;
  height:44px;
  margin-bottom:12px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:18px;
  font-weight:900;
  background:linear-gradient(135deg,#3b82f6,#22d3ee);
}

.qt-seo-card strong{
  display:block;
  color:#fff;
  font-size:16px;
  font-weight:800;
  margin-bottom:6px;
}

.qt-seo-card span{
  display:block;
  color:rgba(255,255,255,.76);
  font-size:13px;
  line-height:1.7;
  font-weight:500;
}

.qt-seo-mini{
  position:absolute;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.qt-seo-mini__label{
  display:block;
  color:rgba(255,255,255,.74);
  font-size:12px;
  font-weight:700;
  margin-bottom:4px;
}

.qt-seo-mini strong{
  color:#22d3ee;
  font-size:22px;
  font-weight:900;
}

.mini-1{
  top:86px;
  left:0px;
  animation:qtMiniFloat 4.8s ease-in-out infinite;
}

.mini-2{
  bottom:20px;
  left:0px;
  animation:qtMiniFloat 5.2s ease-in-out infinite .8s;
}

.mini-3{
  top:210px;
  right:0px;
  animation:qtMiniFloat 5.6s ease-in-out infinite 1.3s;
}

@keyframes qtSeoScan{
  0%{ left:-30%; opacity:0; }
  15%{ opacity:.4; }
  100%{ left:120%; opacity:0; }
}

@keyframes qtBars{
  0%,100%{ transform:scaleY(1); opacity:1; }
  50%{ transform:scaleY(.88); opacity:.85; }
}

@keyframes qtCardFloatSeo{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

@keyframes qtMiniFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

@keyframes qtSeoGlow{
  0%,100%{ transform:scale(1); opacity:.22; }
  50%{ transform:scale(1.08); opacity:.34; }
}

@media (max-width:1024px){
  .qt-seo-hero__wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .qt-seo-hero__content p{
    margin-right:auto;
    margin-left:auto;
  }

  .qt-seo-hero__actions,
  .qt-seo-hero__chips{
    justify-content:center;
  }

  .qt-seo-hero__content h1{
    font-size:46px;
  }
}

@media (max-width:767px){
  .qt-seo-hero{
    padding:52px 14px;
  }

  .qt-seo-hero__content h1{
    font-size:34px;
  }

  .qt-seo-hero__content p{
    font-size:16px;
    line-height:1.8;
  }

  .qt-seo-btn{
    font-size:15px;
    padding:13px 18px;
  }

  .qt-seo-hero__visual{
    min-height:auto;
  }

  .qt-seo-board{
    padding:12px;
    border-radius:20px;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
  }

  .qt-seo-search{
    padding:10px 12px;
    border-radius:14px;
    margin-bottom:12px;
  }

  .qt-seo-search__line{
    height:8px;
  }

  .qt-seo-search__badge{
    min-width:70px;
    height:26px;
    font-size:11px;
  }

  .qt-seo-chart{
    height:130px;
    padding:12px 10px 10px;
    border-radius:14px;
    margin-bottom:12px;
  }

  .qt-seo-chart__bars{
    right:10px;
    left:10px;
    bottom:10px;
    height:84px;
    gap:8px;
  }

  .qt-seo-cards{
    grid-template-columns:1fr;
    gap:10px;
  }

  .qt-seo-card{
    padding:12px;
    border-radius:14px;
    animation:none;
  }

  .qt-seo-card__icon{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:16px;
    margin-bottom:10px;
  }

  .qt-seo-card strong{
    font-size:15px;
  }

  .qt-seo-card span{
    font-size:12px;
  }

  .qt-seo-mini{
    display:none;
  }

  .qt-seo-hero__glow{
    display:none;
  }
}


.qt-seo-services-grid,
.qt-seo-services-grid *{
  box-sizing:border-box;
  font-family:'Tajawal',system-ui,sans-serif;
}

.qt-seo-services-grid{
  position:relative;
  padding:42px 18px 24px;
}

.qt-seo-services-grid__head{
  max-width:920px;
  margin:0 auto 28px;
  text-align:center;
}

.qt-seo-services-grid__badge{
  display:inline-block;
  margin-bottom:14px;
  padding:10px 16px;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.qt-seo-services-grid__head h2{
  margin:0 0 12px;
  color:#fff;
  font-size:48px;
  line-height:1.2;
  font-weight:800;
}

.qt-seo-services-grid__head h2 span{
  color:#22d3ee;
  text-shadow:0 0 14px rgba(34,211,238,.14);
}

.qt-seo-services-grid__head p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:18px;
  line-height:1.95;
  font-weight:500;
}

.qt-seo-services-grid__wrap{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.qt-seo-svc-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:22px 20px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(10,20,38,.80), rgba(12,22,41,.92));
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  transition:transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.qt-seo-svc-card::before{
  content:"";
  position:absolute;
  top:-30%;
  left:-32%;
  width:34%;
  height:170%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation:qtSeoSvcScan 6s linear infinite;
  opacity:.5;
}

.qt-seo-svc-card:hover{
  transform:translateY(-6px);
  border-color:rgba(34,211,238,.24);
  background:linear-gradient(180deg, rgba(12,23,42,.90), rgba(13,24,44,.96));
  box-shadow:0 0 20px rgba(34,211,238,.07);
}

.qt-seo-svc-card__icon{
  width:66px;
  height:66px;
  border-radius:18px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:28px;
  background:linear-gradient(135deg, rgba(34,211,238,.18), rgba(59,130,246,.18));
  border:1px solid rgba(34,211,238,.24);
  box-shadow:0 0 18px rgba(34,211,238,.08);
  animation:qtSeoSvcFloat 4.8s ease-in-out infinite;
}

.qt-seo-svc-card__content{
  min-width:0;
}

.qt-seo-svc-card__content h3{
  margin:0 0 10px;
  color:#fff;
  font-size:28px;
  line-height:1.35;
  font-weight:800;
}

.qt-seo-svc-card__content p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.9;
  font-weight:500;
}

.qt-seo-svc-card__line{
  position:absolute;
  right:0;
  bottom:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.8), transparent);
  opacity:.92;
}

@keyframes qtSeoSvcFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

@keyframes qtSeoSvcScan{
  0%{ left:-32%; opacity:0; }
  15%{ opacity:.4; }
  100%{ left:125%; opacity:0; }
}

@media (max-width:1024px){
  .qt-seo-services-grid__head h2{
    font-size:40px;
  }

  .qt-seo-services-grid__wrap{
    grid-template-columns:1fr;
  }
}

@media (max-width:767px){
  .qt-seo-services-grid{
    padding:28px 12px 16px;
  }

  .qt-seo-services-grid__head{
    margin-bottom:22px;
  }

  .qt-seo-services-grid__head h2{
    font-size:31px;
  }

  .qt-seo-services-grid__head p{
    font-size:16px;
  }

  .qt-seo-svc-card{
    gap:12px;
    padding:18px 14px;
    border-radius:16px;
  }

  .qt-seo-svc-card__icon{
    width:52px;
    height:52px;
    border-radius:14px;
    font-size:22px;
    animation:none;
  }

  .qt-seo-svc-card__content h3{
    font-size:21px;
    margin-bottom:8px;
  }

  .qt-seo-svc-card__content p{
    font-size:14px;
    line-height:1.75;
  }
}


.qt-steps-alt,
.qt-steps-alt *{
  box-sizing:border-box;
  font-family:'Tajawal',system-ui,sans-serif;
}

.qt-steps-alt{
  position:relative;
  padding:42px 18px 28px;
}

.qt-steps-alt__head{
  max-width:940px;
  margin:0 auto 30px;
  text-align:center;
}

.qt-steps-alt__badge{
  display:inline-block;
  margin-bottom:14px;
  padding:10px 16px;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.qt-steps-alt__head h2{
  margin:0 0 12px;
  color:#fff;
  font-size:48px;
  line-height:1.2;
  font-weight:800;
}

.qt-steps-alt__head h2 span{
  color:#22d3ee;
  text-shadow:0 0 14px rgba(34,211,238,.14);
}

.qt-steps-alt__head p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:18px;
  line-height:1.95;
  font-weight:500;
}

.qt-steps-alt__track{
  max-width:1100px;
  height:2px;
  margin:0 auto 18px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  position:relative;
  overflow:hidden;
}

.qt-steps-alt__track::after{
  content:"";
  position:absolute;
  top:0;
  right:-20%;
  width:20%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.75), transparent);
  animation:qtStepsBeam 4.6s linear infinite;
}

.qt-steps-alt__grid{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.qt-step-card-x{
  position:relative;
  min-height:280px;
  padding:26px 22px 22px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(10,20,38,.82), rgba(12,22,41,.94));
  border:1px solid rgba(255,255,255,.10);
  text-align:center;
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.qt-step-card-x::before{
  content:"";
  position:absolute;
  top:-30%;
  left:-32%;
  width:34%;
  height:170%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation:qtStepScan 6.2s linear infinite;
  opacity:.55;
}

.qt-step-card-x:hover{
  transform:translateY(-8px);
  border-color:rgba(34,211,238,.24);
  box-shadow:0 0 22px rgba(34,211,238,.07);
  background:linear-gradient(180deg, rgba(12,23,42,.90), rgba(13,24,44,.96));
}

.qt-step-card-x.active{
  border-color:rgba(34,211,238,.24);
  box-shadow:0 0 22px rgba(34,211,238,.06);
}

.qt-step-card-x__num{
  position:absolute;
  top:16px;
  left:16px;
  color:rgba(255,255,255,.14);
  font-size:42px;
  line-height:1;
  font-weight:900;
}

.qt-step-card-x__icon{
  position:relative;
  z-index:2;
  width:66px;
  height:66px;
  margin:0 auto 16px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:28px;
  background:linear-gradient(135deg, rgba(34,211,238,.18), rgba(59,130,246,.18));
  border:1px solid rgba(34,211,238,.24);
  box-shadow:0 0 18px rgba(34,211,238,.08);
  animation:qtStepFloat 4.8s ease-in-out infinite;
}

.qt-step-card-x h3{
  position:relative;
  z-index:2;
  margin:0 0 12px;
  color:#fff;
  font-size:30px;
  line-height:1.35;
  font-weight:800;
}

.qt-step-card-x p{
  position:relative;
  z-index:2;
  margin:0;
  color:rgba(255,255,255,.80);
  font-size:16px;
  line-height:1.95;
  font-weight:500;
}

.qt-step-card-x__line{
  position:absolute;
  right:0;
  bottom:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.82), transparent);
  opacity:.92;
}

@keyframes qtStepsBeam{
  from{ right:-20%; }
  to{ right:100%; }
}

@keyframes qtStepFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

@keyframes qtStepScan{
  0%{ left:-32%; opacity:0; }
  15%{ opacity:.4; }
  100%{ left:125%; opacity:0; }
}

@media (max-width:1024px){
  .qt-steps-alt__head h2{
    font-size:40px;
  }

  .qt-steps-alt__grid{
    grid-template-columns:1fr;
  }

  .qt-step-card-x{
    min-height:auto;
  }
}

@media (max-width:767px){
  .qt-steps-alt{
    padding:28px 12px 18px;
  }

  .qt-steps-alt__head{
    margin-bottom:22px;
  }

  .qt-steps-alt__head h2{
    font-size:31px;
  }

  .qt-steps-alt__head p{
    font-size:16px;
  }

  .qt-steps-alt__track{
    margin-bottom:14px;
  }

  .qt-step-card-x{
    padding:22px 16px 18px;
    border-radius:18px;
  }

  .qt-step-card-x__num{
    top:12px;
    left:12px;
    font-size:30px;
  }

  .qt-step-card-x__icon{
    width:54px;
    height:54px;
    border-radius:16px;
    font-size:22px;
    margin-bottom:14px;
    animation:none;
  }

  .qt-step-card-x h3{
    font-size:24px;
  }

  .qt-step-card-x p{
    font-size:14px;
    line-height:1.8;
  }
}



.qt-custom-hero{
  padding:90px 20px;
  background:linear-gradient(135deg,#071320,#0b1b31,#142b4d);
  overflow:hidden;
}

.qt-custom-hero__wrap{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:30px;
}

.qt-badge{
  display:inline-block;
  padding:8px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  color:#fff;
}

.qt-custom-content h1{
  color:#fff;
  font-size:52px;
  font-weight:800;
  margin:10px 0;
}

.qt-custom-content h1 span{
  color:#22d3ee;
}

.qt-custom-content p{
  color:#ccc;
  line-height:1.9;
}

.qt-actions{
  margin-top:20px;
}

.qt-btn{
  padding:14px 22px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
}

.qt-btn.primary{
  background:linear-gradient(135deg,#22d3ee,#8b5cf6);
  color:#fff;
}

.qt-btn.ghost{
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  margin-right:10px;
}

/* visual */
.qt-custom-visual{
  position:relative;
  height:320px;
}

.qt-code-box{
  padding:20px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}

.line{
  height:10px;
  background:#22d3ee;
  margin-bottom:10px;
  border-radius:10px;
  width:80%;
  animation:codeMove 2s infinite alternate;
}

.w2{width:60%}
.w3{width:40%}
.w4{width:70%}

@keyframes codeMove{
  from{opacity:.5}
  to{opacity:1}
}

.qt-node{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22d3ee;
  animation:float 4s infinite;
}

.n1{top:10%;left:10%}
.n2{bottom:10%;right:20%}
.n3{top:50%;right:10%}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

@media(max-width:768px){
  .qt-custom-hero__wrap{grid-template-columns:1fr}
  .qt-custom-content h1{font-size:32px}
}

.qt-custom-cards{
  padding:60px 20px;
}

.qt-custom-cards__wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.qt-card{
  padding:25px;
  border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  transition:.3s;
}

.qt-card:hover{
  transform:translateY(-6px);
  border-color:#22d3ee;
}

.qt-card h3{
  color:#fff;
  margin-bottom:10px;
}

.qt-card p{
  color:#ccc;
}

@media(max-width:768px){
  .qt-custom-cards__wrap{
    grid-template-columns:1fr;
  }
}


@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700;800;900&display=swap');

.qt-dash{
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  width: min(100%, 100%);
  margin: 0 auto;
}

.qt-dash-card{
  position: relative;
  border-radius: 26px;
  overflow: hidden; /* يمنع أي overflow */
  padding: 18px 18px 16px;
  background: rgba(10,24,46,.22);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 26px 90px rgba(0,0,0,.32);
  isolation: isolate;
}

/* background glow + grid */
.qt-glow{
  position:absolute; inset:-35%;
  background:
    radial-gradient(circle at 25% 30%, rgba(34,211,238,.22), transparent 58%),
    radial-gradient(circle at 75% 70%, rgba(59,130,246,.18), transparent 62%),
    radial-gradient(circle at 45% 95%, rgba(168,85,247,.10), transparent 62%);
  filter: blur(26px);
  opacity:.9;
  animation: qtGlow 6.4s ease-in-out infinite;
  pointer-events:none;
  z-index: 0;
}
@keyframes qtGlow{
  0%,100%{ transform: translate(-12px,10px) scale(1); }
  50%{ transform: translate(14px,-12px) scale(1.06); }
}
.qt-grid{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity:.12;
  pointer-events:none;
  z-index: 0;
}

/* top bar */
.qt-topbar{
  position: relative;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.qt-dots{ display:flex; gap: 7px; }
.qt-dots span{
  width: 9px; height: 9px; border-radius: 99px;
  background: rgba(255,255,255,.22);
}
.qt-dots span:nth-child(1){ background: rgba(239,68,68,.55); }
.qt-dots span:nth-child(2){ background: rgba(245,158,11,.55); }
.qt-dots span:nth-child(3){ background: rgba(34,197,94,.55); }
.qt-url{
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  letter-spacing: .2px;
}

/* stats */
.qt-stats{
  position: relative;
  z-index: 2;
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.qt-stat{
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  position: relative;
}
.qt-stat::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 25% 30%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(59,130,246,.14), transparent 62%);
  filter: blur(20px);
  opacity:.9;
  pointer-events:none;
}
.qt-stat-mid::before{
  background:
    radial-gradient(circle at 30% 30%, rgba(0,255,178,.16), transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(34,211,238,.12), transparent 62%);
}
.qt-stat-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.qt-chip{
  font-size: 12px;
  font-weight: 800;
  color: rgba(34,197,94,.95);
}
.qt-ico{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(37,99,235,.95));
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.qt-stat-value{
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
}
.qt-stat-label{
  position: relative;
  z-index: 1;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

/* chart */
.qt-chart{
  position: relative;
  z-index: 2;
  margin-top: 14px;
  border-radius: 20px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}
.qt-chart-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.qt-tabs{
  display:flex;
  gap: 8px;
  background: rgba(0,0,0,.18);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
}
.qt-tab{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.70);
  padding: 8px 10px;
  border-radius: 12px;
}
.qt-tab.active{
  color: #fff;
  background: rgba(34,211,238,.18);
  border: 1px solid rgba(34,211,238,.22);
}
.qt-title{
  font-size: 14px;
  font-weight: 900;
  color: rgba(255,255,255,.90);
}

/* bars */
.qt-bars{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  align-items:end;
  height: 160px;
  padding-top: 10px;
}
.qt-bar{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
}
.qt-fill{
  width: 100%;
  max-width: 120px;
  height: 120px;                 /* ارتفاع ثابت للحاوية */
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;               /* يمنع أي خروج */
  position: relative;
}
.qt-fill::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(34,211,238,.95), rgba(37,99,235,.95));
  transform-origin: bottom;
  transform: scaleY(.55);
  animation: qtBar 2.8s ease-in-out infinite;
  box-shadow: 0 18px 60px rgba(34,211,238,.12);
}
.qt-fill::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 45%, rgba(255,255,255,.08));
  opacity:.55;
  transform: translateX(-20%);
  animation: qtShine 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes qtShine{
  0%,100%{ transform: translateX(-20%); opacity:.25; }
  50%{ transform: translateX(12%); opacity:.75; }
}

/* اختلاف حركة كل عمود */
.qt-bar:nth-child(1) .qt-fill::before{ animation-name: qtBarA; }
.qt-bar:nth-child(2) .qt-fill::before{ animation-name: qtBarB; animation-duration: 3.2s; }
.qt-bar:nth-child(3) .qt-fill::before{ animation-name: qtBarC; animation-duration: 2.6s; }
.qt-bar:nth-child(4) .qt-fill::before{ animation-name: qtBarD; animation-duration: 3.0s; }
.qt-bar:nth-child(5) .qt-fill::before{ animation-name: qtBarE; animation-duration: 2.7s; }
.qt-bar:nth-child(6) .qt-fill::before{ animation-name: qtBarF; animation-duration: 3.4s; }
.qt-bar:nth-child(7) .qt-fill::before{ animation-name: qtBarG; animation-duration: 2.9s; }

@keyframes qtBarA{ 0%,100%{transform:scaleY(.35)} 35%{transform:scaleY(.78)} 65%{transform:scaleY(.52)} }
@keyframes qtBarB{ 0%,100%{transform:scaleY(.55)} 40%{transform:scaleY(.92)} 70%{transform:scaleY(.46)} }
@keyframes qtBarC{ 0%,100%{transform:scaleY(.42)} 45%{transform:scaleY(.68)} 80%{transform:scaleY(.50)} }
@keyframes qtBarD{ 0%,100%{transform:scaleY(.60)} 38%{transform:scaleY(.88)} 72%{transform:scaleY(.56)} }
@keyframes qtBarE{ 0%,100%{transform:scaleY(.40)} 50%{transform:scaleY(.74)} 85%{transform:scaleY(.48)} }
@keyframes qtBarF{ 0%,100%{transform:scaleY(.52)} 42%{transform:scaleY(.82)} 78%{transform:scaleY(.58)} }
@keyframes qtBarG{ 0%,100%{transform:scaleY(.38)} 46%{transform:scaleY(.70)} 75%{transform:scaleY(.50)} }

.qt-day{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.70);
}

/* responsive */
@media (max-width: 860px){
  .qt-stats{ grid-template-columns: 1fr; }
  .qt-bars{ gap: 10px; height: 150px; }
  .qt-fill{ max-width: none; }
}

.qt-feature-grid,
.qt-feature-grid *{
  box-sizing:border-box;
  font-family:'Tajawal',system-ui,sans-serif;
}

.qt-feature-grid{
  padding: 26px 18px;
}

.qt-feature-grid__wrap{
  max-width: 1420px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}

.qt-feature-card{
  position:relative;
  min-height: 240px;
  padding: 28px 24px 24px;
  border-radius: 30px;
  overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(10,30,54,.58), rgba(11,28,52,.84));
  background-size: 42px 42px, 42px 42px, auto;
  border: 1px solid rgba(31, 219, 255, .7);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 1px rgba(31,219,255,.06),
    0 0 20px rgba(31,219,255,.06);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  text-align:right;
}

.qt-feature-card::before{
  content:"";
  position:absolute;
  inset:auto -12% -30% -12%;
  height:120px;
  background: radial-gradient(circle, rgba(34,211,238,.10), transparent 70%);
  pointer-events:none;
}

.qt-feature-card:hover{
  transform: translateY(-6px);
  border-color: rgba(31, 219, 255, .95);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 1px rgba(31,219,255,.10),
    0 0 28px rgba(31,219,255,.12);
}

.qt-feature-card__icon{
  width: 58px;
  height: 58px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  color:#fff;
  margin: 0 0 26px auto;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

.qt-feature-card__icon.pink{ background: linear-gradient(135deg,#f368b9,#cf4ca4); }
.qt-feature-card__icon.gold{ background: linear-gradient(135deg,#c8a342,#99761f); }
.qt-feature-card__icon.cyan{ background: linear-gradient(135deg,#27d2f3,#179fc7); }
.qt-feature-card__icon.purple{ background: linear-gradient(135deg,#c06bf1,#9251d9); }
.qt-feature-card__icon.blue{ background: linear-gradient(135deg,#6ab6ff,#458be1); }
.qt-feature-card__icon.green{ background: linear-gradient(135deg,#2fd3b8,#15ad93); }
.qt-feature-card__icon.violet{ background: linear-gradient(135deg,#8468ff,#6550df); }
.qt-feature-card__icon.magenta{ background: linear-gradient(135deg,#e760b2,#c74d98); }

.qt-feature-card h3{
  margin: 0 0 14px;
  color:#e9f4ff;
  font-size: 28px;
  line-height:1.3;
  font-weight:800;
}

.qt-feature-card p{
  margin:0;
  color: rgba(232,242,255,.82);
  font-size: 16px;
  line-height:1.8;
  font-weight:500;
  max-width: 90%;
}

@media (max-width: 1200px){
  .qt-feature-grid__wrap{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 767px){
  .qt-feature-grid{
    padding: 18px 12px;
  }

  .qt-feature-grid__wrap{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .qt-feature-card{
    min-height: auto;
    padding: 20px 16px 18px;
    border-radius: 20px;
    background-size: 30px 30px, 30px 30px, auto;
  }

  .qt-feature-card__icon{
    width: 50px;
    height: 50px;
    font-size: 22px;
    margin-bottom: 18px;
  }

  .qt-feature-card h3{
    font-size: 23px;
    margin-bottom: 10px;
  }

  .qt-feature-card p{
    font-size: 14px;
    max-width: 100%;
  }
}


.qt-crm-story,
.qt-crm-story *{
  box-sizing:border-box;
  font-family:'Tajawal',system-ui,sans-serif;
}

.qt-crm-story{
  padding:42px 18px 28px;
}

.qt-crm-story__wrap{
  max-width:1380px;
  margin:0 auto;
  display:grid;
  gap:22px;
}

.qt-crm-story__block{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:24px;
  align-items:center;
  padding:26px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(10,20,38,.74), rgba(12,22,41,.92));
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
}

.qt-crm-story__block::before{
  content:"";
  position:absolute;
  top:-30%;
  left:-30%;
  width:34%;
  height:170%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation:qtCrmSweep 6.5s linear infinite;
  opacity:.45;
}

.qt-crm-story__block.alt{
  grid-template-columns:.98fr 1.02fr;
}

.qt-crm-story__content{
  position:relative;
  z-index:2;
}

.qt-crm-story__badge{
  display:inline-block;
  margin-bottom:14px;
  padding:10px 16px;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

.qt-crm-story__content h2{
  margin:0 0 14px;
  color:#fff;
  font-size:48px;
  line-height:1.2;
  font-weight:800;
}

.qt-crm-story__content h2 span{
  color:#22d3ee;
  text-shadow:0 0 14px rgba(34,211,238,.14);
}

.qt-crm-story__content p{
  margin:0 0 20px;
  color:rgba(255,255,255,.84);
  font-size:18px;
  line-height:2;
  font-weight:500;
}

.qt-crm-story__points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.qt-crm-chip{
  padding:10px 14px;
  border-radius:999px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}

.qt-crm-story__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.qt-crm-stat-box{
  padding:14px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  text-align:center;
}

.qt-crm-stat-box strong{
  display:block;
  color:#fff;
  font-size:17px;
  font-weight:800;
  margin-bottom:6px;
}

.qt-crm-stat-box span{
  display:block;
  color:rgba(255,255,255,.75);
  font-size:13px;
  line-height:1.7;
  font-weight:500;
}

.qt-crm-story__visual{
  position:relative;
  min-height:340px;
  z-index:2;
}

/* visuals */
.qt-crm-panel{
  position:absolute;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(16,60,88,.55), rgba(11,39,63,.88));
  border:1px solid rgba(34,211,238,.16);
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}

.qt-crm-panel.big{
  width:72%;
  height:250px;
  top:40px;
  right:14%;
  padding:18px;
  animation:qtFloatA 5.8s ease-in-out infinite;
}

.qt-crm-panel.small{
  width:140px;
  height:110px;
  padding:16px;
}

.qt-crm-panel.small.p1{
  top:0;
  left:8%;
  animation:qtFloatB 5.2s ease-in-out infinite .6s;
}

.qt-crm-panel.small.p2{
  bottom:10px;
  right:0;
  animation:qtFloatB 5.2s ease-in-out infinite 1.2s;
}

.qt-crm-panel.small.left-a{
  top:10px;
  right:4%;
  animation:qtFloatB 5.2s ease-in-out infinite .6s;
}

.qt-crm-panel.small.left-b{
  bottom:12px;
  left:4%;
  animation:qtFloatB 5.2s ease-in-out infinite 1.2s;
}

.qt-crm-panel__top{
  height:16px;
  width:42%;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  margin-bottom:18px;
}

.qt-crm-bars{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:160px;
}

.qt-crm-bars span{
  flex:1;
  border-radius:12px 12px 4px 4px;
  background:linear-gradient(180deg,#22d3ee,#3b82f6);
  animation:qtBarsMove 4.8s ease-in-out infinite;
}

.qt-crm-bars span:nth-child(1){height:48px;}
.qt-crm-bars span:nth-child(2){height:86px;}
.qt-crm-bars span:nth-child(3){height:122px;}
.qt-crm-bars span:nth-child(4){height:148px;}

.qt-mini-line{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  margin-bottom:10px;
}

.qt-mini-line.w1{width:84%;}
.qt-mini-line.w2{width:60%;}

.qt-donut{
  width:70px;
  height:70px;
  margin:auto;
  border-radius:50%;
  border:10px solid rgba(255,255,255,.16);
  border-top-color:#22d3ee;
  border-right-color:#8b5cf6;
  animation:qtSpinLite 6s linear infinite;
}

.qt-crm-graph-card{
  position:absolute;
  width:76%;
  height:250px;
  top:46px;
  left:10%;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(16,60,88,.55), rgba(11,39,63,.88));
  border:1px solid rgba(34,211,238,.16);
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  animation:qtFloatA 5.8s ease-in-out infinite;
  overflow:hidden;
}

.qt-graph-line{
  position:absolute;
  right:24px;
  left:24px;
  bottom:80px;
  height:3px;
  background:linear-gradient(90deg,#22d3ee,#8b5cf6);
  transform:skewY(-10deg);
  border-radius:999px;
  box-shadow:0 0 12px rgba(34,211,238,.16);
}

.qt-graph-dots i{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.18);
}

.qt-graph-dots i:nth-child(1){ right:28px; bottom:74px; }
.qt-graph-dots i:nth-child(2){ right:36%; bottom:110px; }
.qt-graph-dots i:nth-child(3){ right:58%; bottom:94px; }
.qt-graph-dots i:nth-child(4){ left:34px; bottom:142px; }

.qt-stat-pill{
  min-width:80px;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:16px;
  font-weight:800;
  background:linear-gradient(135deg,#22d3ee,#8b5cf6);
}

@keyframes qtCrmSweep{
  0%{ left:-30%; opacity:0; }
  15%{ opacity:.35; }
  100%{ left:125%; opacity:0; }
}

@keyframes qtFloatA{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

@keyframes qtFloatB{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

@keyframes qtBarsMove{
  0%,100%{ transform:scaleY(1); }
  50%{ transform:scaleY(.9); }
}

@keyframes qtSpinLite{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@media (max-width:1024px){
  .qt-crm-story__block,
  .qt-crm-story__block.alt{
    grid-template-columns:1fr;
  }

  .qt-crm-story__content h2{
    font-size:40px;
  }
}

@media (max-width:767px){
  .qt-crm-story{
    padding:26px 12px 16px;
  }

  .qt-crm-story__block{
    padding:18px 14px;
    border-radius:18px;
    gap:18px;
  }

  .qt-crm-story__content h2{
    font-size:30px;
    margin-bottom:10px;
  }

  .qt-crm-story__content p{
    font-size:15px;
    line-height:1.85;
    margin-bottom:16px;
  }

  .qt-crm-story__badge{
    font-size:13px;
    padding:8px 12px;
  }

  .qt-crm-story__visual{
    min-height:240px;
  }

  .qt-crm-panel.big,
  .qt-crm-graph-card{
    width:74%;
    height:180px;
    top:36px;
    right:auto;
    left:13%;
    border-radius:18px;
    padding:12px;
  }

  .qt-crm-panel.small{
    width:100px;
    height:80px;
    padding:10px;
    border-radius:14px;
  }

  .qt-crm-panel.small.p1,
  .qt-crm-panel.small.left-a{
    top:0;
    left:0;
    right:auto;
  }

  .qt-crm-panel.small.p2{
    bottom:0;
    right:0;
  }

  .qt-crm-panel.small.left-b{
    bottom:0;
    left:0;
  }

  .qt-crm-bars{
    gap:6px;
    height:110px;
  }

  .qt-donut{
    width:46px;
    height:46px;
    border-width:7px;
  }

  .qt-crm-story__stats{
    grid-template-columns:1fr;
    gap:10px;
  }

  .qt-crm-stat-box{
    border-radius:14px;
    padding:12px 10px;
  }

  .qt-crm-stat-box strong{
    font-size:15px;
  }

  .qt-crm-stat-box span{
    font-size:12px;
  }

  .qt-crm-story__points{
    gap:8px;
  }

  .qt-crm-chip{
    font-size:12px;
    padding:8px 10px;
  }
}

.qt-erp-dashboard-sec,.qt-erp-dashboard-sec *{box-sizing:border-box;font-family:'Tajawal',system-ui,sans-serif}
.qt-erp-dashboard-sec{padding:42px 18px}
.qt-erp-dashboard-sec__wrap{max-width:1380px;margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.qt-erp-dashboard-sec__badge{display:inline-block;margin-bottom:14px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:700}
.qt-erp-dashboard-sec__content h2{margin:0 0 14px;color:#fff;font-size:48px;font-weight:800;line-height:1.2}
.qt-erp-dashboard-sec__content h2 span{color:#22d3ee}
.qt-erp-dashboard-sec__content p{margin:0 0 20px;color:rgba(255,255,255,.84);font-size:18px;line-height:2;font-weight:500}
.qt-erp-dashboard-points{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.qt-erp-dashboard-point{padding:14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:15px;font-weight:700;text-align:center}
.qt-erp-dashboard-sec__visual{position:relative;min-height:380px}
.qt-erp-db-card{position:absolute;border-radius:22px;background:linear-gradient(180deg, rgba(16,60,88,.55), rgba(11,39,63,.88));border:1px solid rgba(34,211,238,.16);box-shadow:0 16px 34px rgba(0,0,0,.18)}
.qt-erp-db-card.main{width:72%;height:240px;top:60px;left:14%;padding:18px;animation:qtDbFloatA 5.8s ease-in-out infinite}
.qt-erp-db-card.small{width:130px;height:100px;padding:14px}
.qt-erp-db-card.small.s1{top:0;right:8%;animation:qtDbFloatB 5s ease-in-out infinite .6s}
.qt-erp-db-card.small.s2{bottom:16px;left:4%;animation:qtDbFloatB 5s ease-in-out infinite 1.2s}
.qt-erp-db-top{height:14px;width:42%;border-radius:999px;background:rgba(255,255,255,.72);margin-bottom:18px}
.qt-erp-db-bars{display:flex;align-items:flex-end;gap:10px;height:150px}
.qt-erp-db-bars span{flex:1;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#22d3ee,#3b82f6);animation:qtDbBars 4.8s ease-in-out infinite}
.qt-erp-db-bars span:nth-child(1){height:44px}.qt-erp-db-bars span:nth-child(2){height:82px}.qt-erp-db-bars span:nth-child(3){height:118px}.qt-erp-db-bars span:nth-child(4){height:138px}
.qt-erp-db-donut{width:64px;height:64px;margin:auto;border-radius:50%;border:9px solid rgba(255,255,255,.16);border-top-color:#22d3ee;border-right-color:#8b5cf6;animation:qtDbSpin 6s linear infinite}
.qt-erp-db-lines i{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.75);margin-bottom:10px}
.qt-erp-db-lines i:nth-child(1){width:80%}.qt-erp-db-lines i:nth-child(2){width:60%}.qt-erp-db-lines i:nth-child(3){width:90%;margin-bottom:0}
@keyframes qtDbFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes qtDbFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes qtDbBars{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.9)}}
@keyframes qtDbSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (max-width:1024px){.qt-erp-dashboard-sec__wrap{grid-template-columns:1fr}.qt-erp-dashboard-sec__content{text-align:center}.qt-erp-dashboard-sec__content h2{font-size:38px}}
@media (max-width:767px){.qt-erp-dashboard-sec{padding:26px 12px}.qt-erp-dashboard-sec__content h2{font-size:30px}.qt-erp-dashboard-sec__content p{font-size:15px;line-height:1.85}.qt-erp-dashboard-points{grid-template-columns:1fr}.qt-erp-dashboard-sec__visual{min-height:260px}.qt-erp-db-card.main{width:74%;height:170px;left:13%;top:40px;padding:12px}.qt-erp-db-card.small{width:90px;height:70px;padding:10px;border-radius:14px}.qt-erp-db-bars{height:96px;gap:6px}.qt-erp-db-donut{width:42px;height:42px;border-width:6px}.qt-erp-db-lines i{height:7px;margin-bottom:7px}}

.qt-erp-features-pro,
.qt-erp-features-pro *{
  box-sizing:border-box;
  font-family:'Tajawal',system-ui,sans-serif;
}

.qt-erp-features-pro{
  padding:42px 18px 28px;
}

.qt-erp-features-pro__head{
  max-width:920px;
  margin:0 auto 28px;
  text-align:center;
}

.qt-erp-features-pro__badge{
  display:inline-block;
  margin-bottom:14px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:14px;
  font-weight:700;
}

.qt-erp-features-pro__head h2{
  margin:0 0 12px;
  color:#fff;
  font-size:48px;
  line-height:1.2;
  font-weight:800;
}

.qt-erp-features-pro__head h2 span{
  color:#22d3ee;
  text-shadow:0 0 14px rgba(34,211,238,.14);
}

.qt-erp-features-pro__head p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:18px;
  line-height:1.95;
  font-weight:500;
}

.qt-erp-features-pro__grid{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.qt-erp-feature-card{
  position:relative;
  min-height:250px;
  padding:24px 20px 22px;
  border-radius:24px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(10,20,38,.80), rgba(12,22,41,.94));
  background-size:34px 34px, 34px 34px, auto;
  border:1px solid rgba(255,255,255,.12);
  text-align:center;
  overflow:hidden;
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}

.qt-erp-feature-card::before{
  content:"";
  position:absolute;
  top:-30%;
  left:-32%;
  width:34%;
  height:170%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation:qtErpFeatScan 6s linear infinite;
  opacity:.45;
}

.qt-erp-feature-card:hover{
  transform:translateY(-7px);
  border-color:rgba(34,211,238,.24);
  box-shadow:0 0 20px rgba(34,211,238,.07);
}

.qt-erp-feature-card__icon{
  width:62px;
  height:62px;
  margin:0 auto 18px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:26px;
  font-weight:800;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.qt-erp-feature-card__icon.red{
  background:linear-gradient(135deg,#ff5d52,#ff7a45);
}

.qt-erp-feature-card__icon.green{
  background:linear-gradient(135deg,#22d67d,#12b76a);
}

.qt-erp-feature-card__icon.blue{
  background:linear-gradient(135deg,#5b7cff,#7b61ff);
}

.qt-erp-feature-card h3{
  margin:0 0 12px;
  color:#fff;
  font-size:30px;
  line-height:1.35;
  font-weight:800;
}

.qt-erp-feature-card p{
  margin:0;
  color:rgba(255,255,255,.80);
  font-size:16px;
  line-height:1.9;
  font-weight:500;
}

.qt-erp-feature-card__line{
  position:absolute;
  right:0;
  bottom:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  opacity:.92;
}

@keyframes qtErpFeatScan{
  0%{ left:-32%; opacity:0; }
  15%{ opacity:.35; }
  100%{ left:125%; opacity:0; }
}

@media (max-width:1024px){
  .qt-erp-features-pro__head h2{
    font-size:40px;
  }

  .qt-erp-features-pro__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:767px){
  .qt-erp-features-pro{
    padding:26px 12px 16px;
  }

  .qt-erp-features-pro__head{
    margin-bottom:22px;
  }

  .qt-erp-features-pro__head h2{
    font-size:31px;
  }

  .qt-erp-features-pro__head p{
    font-size:16px;
  }

  .qt-erp-features-pro__grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .qt-erp-feature-card{
    min-height:auto;
    padding:20px 16px 18px;
    border-radius:18px;
    background-size:26px 26px, 26px 26px, auto;
  }

  .qt-erp-feature-card__icon{
    width:54px;
    height:54px;
    border-radius:14px;
    font-size:22px;
    margin-bottom:14px;
  }

  .qt-erp-feature-card h3{
    font-size:24px;
  }

  .qt-erp-feature-card p{
    font-size:14px;
    line-height:1.8;
  }
}


.qt-stats-pro{
  padding:60px 20px;
}

.qt-stats-pro__wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.qt-stat-box{
  padding:30px 20px;
  border-radius:20px;
  text-align:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  position:relative;
  transition:.3s;
}

.qt-stat-box:hover{
  transform:translateY(-6px);
  border-color:#22d3ee;
  box-shadow:0 0 20px rgba(34,211,238,.2);
}

.qt-stat-box__num{
  font-size:42px;
  font-weight:800;
  color:#22d3ee;
  margin-bottom:10px;
}

.qt-stat-box__label{
  color:#ccc;
  font-size:16px;
}

/* glow effect */
.qt-stat-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(135deg,#22d3ee,#8b5cf6);
  opacity:.05;
  z-index:-1;
}

/* responsive */
@media(max-width:992px){
  .qt-stats-pro__wrap{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:576px){
  .qt-stats-pro__wrap{
    grid-template-columns:1fr;
  }
}


.qt-corp-hero,.qt-corp-hero *{box-sizing:border-box;font-family:'Tajawal',system-ui,sans-serif}
.qt-corp-hero{position:relative;overflow:hidden;padding:90px 28px;background:linear-gradient(135deg,#071320 0%,#0b1b31 50%,#142b4d 100%)}
.qt-corp-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;opacity:.7}
.qt-corp-hero__wrap{max-width:1360px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;position:relative;z-index:1}
.qt-corp-badge{display:inline-block;margin-bottom:16px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:700}
.qt-corp-hero h1{margin:0 0 16px;color:#fff;font-size:60px;line-height:1.12;font-weight:800}
.qt-corp-hero h1 span{color:#22d3ee}
.qt-corp-hero p{margin:0 0 24px;color:rgba(255,255,255,.84);font-size:20px;line-height:1.95;font-weight:500}
.qt-corp-actions{display:flex;gap:14px;flex-wrap:wrap}
.qt-corp-btn{text-decoration:none!important;padding:15px 24px;border-radius:14px;font-size:17px;font-weight:800;transition:.25s}
.qt-corp-btn.primary{background:linear-gradient(135deg,#8b5cf6,#22d3ee);color:#fff}
.qt-corp-btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#fff}
.qt-corp-btn:hover{transform:translateY(-3px)}
.qt-corp-hero__visual{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}
.qt-corp-window{width:100%;max-width:640px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.qt-corp-window__top{height:48px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.qt-corp-window__top span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6)}
.qt-corp-window__hero{padding:22px;background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(139,92,246,.14))}
.qt-corp-line{height:12px;border-radius:999px;background:rgba(255,255,255,.9);margin-bottom:12px}
.qt-corp-line.w1{width:82%}.qt-corp-line.w2{width:66%}.qt-corp-line.w3{width:54%}
.qt-corp-cta{width:120px;height:36px;border-radius:999px;background:linear-gradient(135deg,#8b5cf6,#22d3ee);margin-top:16px}
.qt-corp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px}
.qt-corp-cards div{height:110px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.qt-corp-float{position:absolute;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:700}
.qt-corp-float.f1{top:20px;right:30px}.qt-corp-float.f2{bottom:16px;left:18px}.qt-corp-float.f3{top:170px;left:-4px}
@media(max-width:1024px){.qt-corp-hero__wrap{grid-template-columns:1fr;text-align:center}.qt-corp-hero h1{font-size:44px}.qt-corp-actions{justify-content:center}}
@media(max-width:767px){.qt-corp-hero{padding:60px 14px}.qt-corp-hero h1{font-size:32px}.qt-corp-hero p{font-size:16px}.qt-corp-cards{grid-template-columns:1fr 1fr}.qt-corp-cards div{height:80px}.qt-corp-float{font-size:11px;padding:7px 10px}}

.qt-mobile-hero,.qt-mobile-hero *{box-sizing:border-box;font-family:'Tajawal',system-ui,sans-serif}
.qt-mobile-hero{padding:90px 28px;background:linear-gradient(135deg,#071320 0%,#0b1b31 50%,#142b4d 100%)}
.qt-mobile-hero__wrap{max-width:1360px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.qt-mobile-badge{display:inline-block;margin-bottom:16px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:700}
.qt-mobile-content h1{margin:0 0 16px;color:#fff;font-size:58px;line-height:1.12;font-weight:800}
.qt-mobile-content h1 span{color:#22d3ee}
.qt-mobile-content p{margin:0 0 24px;color:rgba(255,255,255,.84);font-size:20px;line-height:1.95}
.qt-mobile-actions{display:flex;gap:14px;flex-wrap:wrap}
.qt-mobile-btn{text-decoration:none!important;padding:15px 24px;border-radius:14px;font-size:17px;font-weight:800;transition:.25s}
.qt-mobile-btn.primary{background:linear-gradient(135deg,#8b5cf6,#22d3ee);color:#fff}
.qt-mobile-btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#fff}
.qt-mobile-btn:hover{transform:translateY(-3px)}
.qt-mobile-visual{position:relative;min-height:480px}
.qt-phone{position:absolute;width:220px;height:440px;border-radius:34px;padding:12px;background:linear-gradient(145deg,#101a2a,#1a2941);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 28px rgba(0,0,0,.24)}
.qt-phone.back{left:90px;top:40px;transform:rotate(-10deg);opacity:.9}
.qt-phone.front{right:90px;top:0;transform:rotate(8deg)}
.qt-phone-screen{width:100%;height:100%;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#f4f8fc,#e6eef7)}
.qt-phone-screen.alt{background:linear-gradient(180deg,#fff7fb,#efeaff)}
.qt-phone-top{height:52px;background:linear-gradient(135deg,#22d3ee,#8b5cf6)}
.qt-phone-card{margin:14px;border-radius:16px;background:#fff;box-shadow:0 8px 14px rgba(0,0,0,.05)}
.qt-phone-card.big{height:110px}.qt-phone-card.small{height:70px}
.qt-phone-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px}
.qt-phone-row span{height:54px;border-radius:14px;background:#fff}
@media(max-width:1024px){.qt-mobile-hero__wrap{grid-template-columns:1fr;text-align:center}.qt-mobile-content h1{font-size:42px}.qt-mobile-actions{justify-content:center}}
@media(max-width:767px){.qt-mobile-hero{padding:60px 14px}.qt-mobile-content h1{font-size:30px}.qt-mobile-content p{font-size:16px}.qt-mobile-visual{min-height:300px}.qt-phone{width:140px;height:280px;border-radius:22px;padding:8px}.qt-phone.back{left:20px;top:20px}.qt-phone.front{right:20px}.qt-phone-screen{border-radius:16px}.qt-phone-top{height:32px}.qt-phone-card.big{height:60px}.qt-phone-card.small{height:36px}.qt-phone-row span{height:28px;border-radius:8px}}



.qt-store-hero2,.qt-store-hero2 *{box-sizing:border-box;font-family:'Tajawal',system-ui,sans-serif}
.qt-store-hero2{padding:90px 28px;background:linear-gradient(135deg,#071320 0%,#0b1b31 50%,#142b4d 100%)}
.qt-store-hero2__wrap{max-width:1360px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.qt-store-badge{display:inline-block;margin-bottom:16px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:700}
.qt-store-content h1{margin:0 0 16px;color:#fff;font-size:58px;line-height:1.12;font-weight:800}
.qt-store-content h1 span{color:#22d3ee}
.qt-store-content p{margin:0 0 24px;color:rgba(255,255,255,.84);font-size:20px;line-height:1.95}
.qt-store-actions{display:flex;gap:14px;flex-wrap:wrap}
.qt-store-btn{text-decoration:none!important;padding:15px 24px;border-radius:14px;font-size:17px;font-weight:800;transition:.25s}
.qt-store-btn.primary{background:linear-gradient(135deg,#8b5cf6,#22d3ee);color:#fff}
.qt-store-btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#fff}
.qt-store-btn:hover{transform:translateY(-3px)}
.qt-store-visual{position:relative;min-height:430px}
.qt-store-window{width:100%;max-width:650px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.qt-store-top{height:48px;background:rgba(255,255,255,.08)}
.qt-store-banner{height:140px;margin:18px;border-radius:18px;background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(139,92,246,.16))}
.qt-store-products{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 18px 18px}
.qt-store-products div{height:120px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.qt-store-cart,.qt-store-sales{position:absolute;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:700}
.qt-store-cart{top:20px;right:10px}.qt-store-sales{bottom:10px;left:20px}
@media(max-width:1024px){.qt-store-hero2__wrap{grid-template-columns:1fr;text-align:center}.qt-store-content h1{font-size:42px}.qt-store-actions{justify-content:center}}
@media(max-width:767px){.qt-store-hero2{padding:60px 14px}.qt-store-content h1{font-size:30px}.qt-store-content p{font-size:16px}.qt-store-products{grid-template-columns:1fr 1fr}.qt-store-products div{height:80px}}


.qt-hero-pro{
  position:relative;
  padding:100px 20px;
  background:#061225;
  overflow:hidden;
}

/* glow */
.qt-hero-glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 40%, rgba(34,211,238,.15), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(139,92,246,.15), transparent 40%);
}

/* layout */
.qt-hero-pro__wrap{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:40px;
  position:relative;
  z-index:2;
}

/* text */
.qt-hero-badge{
  display:inline-block;
  padding:8px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  color:#fff;
}

.qt-hero-content h1{
  font-size:60px;
  color:#fff;
  font-weight:800;
  line-height:1.2;
}

.qt-hero-content h1 span{
  color:#22d3ee;
}

.qt-hero-content p{
  color:#bbb;
  line-height:1.9;
  margin:15px 0;
}

.qt-hero-actions{
  margin-top:20px;
}

.qt-btn{
  padding:14px 22px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
}

.qt-btn.primary{
  background:linear-gradient(135deg,#22d3ee,#8b5cf6);
  color:#fff;
}

.qt-btn.ghost{
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  margin-right:10px;
}

/* visual */
.qt-hero-visual{
  position:relative;
  height:420px;
}

/* main card */
.qt-system-card{
  position:absolute;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}

.qt-system-card.main{
  width:320px;
  height:200px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:20px;
}

.qt-bar{
  height:12px;
  background:#22d3ee;
  margin-bottom:12px;
  border-radius:10px;
}

.qt-line{
  height:8px;
  background:#ccc;
  margin-bottom:10px;
  border-radius:10px;
  width:80%;
}

.w2{width:60%}
.w3{width:40%}

/* floating cards */
.qt-system-card.floating{
  width:120px;
  height:80px;
  animation:float 4s ease-in-out infinite;
}

.one{top:0;left:20%}
.two{bottom:0;right:10%}
.three{top:30%;right:0}

/* connectors */
.qt-connector{
  position:absolute;
  width:2px;
  height:80px;
  background:linear-gradient(#22d3ee,transparent);
  opacity:.3;
}

.c1{top:20%;left:50%}
.c2{bottom:10%;left:60%}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

/* responsive */
@media(max-width:768px){
  .qt-hero-pro__wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .qt-hero-content h1{
    font-size:34px;
  }

  .qt-hero-visual{
    height:300px;
  }
}

.qt-edu-hero,.qt-edu-hero *{box-sizing:border-box;font-family:'Tajawal',system-ui,sans-serif}
.qt-edu-hero{padding:90px 28px;background:linear-gradient(135deg,#071320 0%,#0b1b31 50%,#142b4d 100%)}
.qt-edu-hero__wrap{max-width:1360px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.qt-edu-badge{display:inline-block;margin-bottom:16px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:700}
.qt-edu-content h1{margin:0 0 16px;color:#fff;font-size:56px;line-height:1.12;font-weight:800}
.qt-edu-content h1 span{color:#22d3ee}
.qt-edu-content p{margin:0 0 24px;color:rgba(255,255,255,.84);font-size:20px;line-height:1.95}
.qt-edu-actions{display:flex;gap:14px;flex-wrap:wrap}
.qt-edu-btn{text-decoration:none!important;padding:15px 24px;border-radius:14px;font-size:17px;font-weight:800;transition:.25s}
.qt-edu-btn.primary{background:linear-gradient(135deg,#8b5cf6,#22d3ee);color:#fff}
.qt-edu-btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#fff}
.qt-edu-btn:hover{transform:translateY(-3px)}
.qt-edu-visual{position:relative;min-height:430px}
.qt-edu-board{width:100%;max-width:650px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);padding:18px}
.qt-edu-video{height:190px;border-radius:18px;background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(139,92,246,.16));margin-bottom:16px}
.qt-edu-lessons{display:grid;grid-template-columns:1fr;gap:12px}
.qt-edu-lessons div{height:54px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.qt-edu-pill{position:absolute;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:700}
.qt-edu-pill.p1{top:16px;right:20px}.qt-edu-pill.p2{top:140px;left:-4px}.qt-edu-pill.p3{bottom:18px;right:40px}
@media(max-width:1024px){.qt-edu-hero__wrap{grid-template-columns:1fr;text-align:center}.qt-edu-content h1{font-size:42px}.qt-edu-actions{justify-content:center}}
@media(max-width:767px){.qt-edu-hero{padding:60px 14px}.qt-edu-content h1{font-size:30px}.qt-edu-content p{font-size:16px}}


.qt-tour-hero,.qt-tour-hero *{box-sizing:border-box;font-family:'Tajawal',system-ui,sans-serif}
.qt-tour-hero{padding:90px 28px;background:linear-gradient(135deg,#071320 0%,#0b1b31 50%,#142b4d 100%)}
.qt-tour-hero__wrap{max-width:1360px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.qt-tour-badge{display:inline-block;margin-bottom:16px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:700}
.qt-tour-content h1{margin:0 0 16px;color:#fff;font-size:58px;line-height:1.12;font-weight:800}
.qt-tour-content h1 span{color:#22d3ee}
.qt-tour-content p{margin:0 0 24px;color:rgba(255,255,255,.84);font-size:20px;line-height:1.95}
.qt-tour-actions{display:flex;gap:14px;flex-wrap:wrap}
.qt-tour-btn{text-decoration:none!important;padding:15px 24px;border-radius:14px;font-size:17px;font-weight:800;transition:.25s}
.qt-tour-btn.primary{background:linear-gradient(135deg,#8b5cf6,#22d3ee);color:#fff}
.qt-tour-btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#fff}
.qt-tour-btn:hover{transform:translateY(-3px)}
.qt-tour-visual{position:relative;min-height:430px}
.qt-tour-card{width:100%;max-width:640px;height:360px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#1e3a5f,#142b4d);border:1px solid rgba(255,255,255,.12);position:relative}
.qt-tour-sky{position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,211,238,.18),transparent)}
.qt-tour-mountain{position:absolute;bottom:0;border-radius:40px 40px 0 0}
.qt-tour-mountain.m1{left:-20px;width:220px;height:130px;background:#1f4d72}
.qt-tour-mountain.m2{left:140px;width:260px;height:180px;background:#246085}
.qt-tour-mountain.m3{right:-10px;width:260px;height:150px;background:#2b6a8f}
.qt-tour-chip{position:absolute;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:700}
.qt-tour-chip.c1{top:22px;right:20px}.qt-tour-chip.c2{top:160px;left:-4px}.qt-tour-chip.c3{bottom:160px;right:60px}
@media(max-width:1024px){.qt-tour-hero__wrap{grid-template-columns:1fr;text-align:center}.qt-tour-content h1{font-size:42px}.qt-tour-actions{justify-content:center}}
@media(max-width:767px){.qt-tour-hero{padding:60px 14px}.qt-tour-content h1{font-size:30px}.qt-tour-content p{font-size:16px}.qt-tour-card{height:260px}}


 .qt-works-hero-slider,
  .qt-works-hero-slider *{
    box-sizing:border-box;
    font-family:'Tajawal',system-ui,sans-serif;
  }
  
  .qt-works-hero-slider{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#061321 0%,#0a1930 52%,#142b4d 100%);
    padding:0PX 20px;
  }
  
  .qt-works-hero-slider__grid{
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size:44px 44px;
    opacity:.75;
    pointer-events:none;
  }
  
  .qt-works-hero-slider__inner{
    position:relative;
    max-width:1380px;
    margin:0 auto;
    min-height:600px;
  }
  
  .qt-works-slide{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:1.02fr .98fr;
    align-items:center;
    gap:40px;
    opacity:0;
    transform:translateY(18px);
    pointer-events:none;
    transition:opacity .55s ease, transform .55s ease;
    padding:72px 0 96px;
  }
  
  .qt-works-slide.active{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  
  .qt-works-slide__content{
    order:1;
  }
  
  .qt-works-slide__visual{
    order:2;
    position:relative;
    min-height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  .qt-works-slide__content .badge{
    display:inline-block;
    margin-bottom:18px;
    padding:11px 18px;
    border-radius:999px;
    color:#fff;
    font-size:14px;
    font-weight:700;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
  }
  
  .qt-works-slide__content h2{
    margin:0 0 18px;
    color:#fff;
    font-size:62px;
    line-height:1.12;
    font-weight:800;
  }
  
  .qt-works-slide__content h2 span{
    color:#22d3ee;
  }
  
  .qt-works-slide__content p{
    margin:0 0 28px;
    color:rgba(255,255,255,.84);
    font-size:20px;
    line-height:1.95;
    font-weight:500;
    max-width:720px;
  }
  
  .qt-works-slide__content .actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  
  .qt-works-slide__content .btn{
    text-decoration:none !important;
    padding:15px 24px;
    border-radius:16px;
    font-size:17px;
    font-weight:800;
    transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
  }
  
  .qt-works-slide__content .btn.primary{
    color:#fff;
    background:linear-gradient(135deg,#8b5cf6,#22d3ee);
  }
  
  .qt-works-slide__content .btn.ghost{
    color:#fff;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
  }
  
  .qt-works-slide__content .btn:hover{
    transform:translateY(-3px);
  }
  
  .qt-ui-window{
    position:relative;
    width:100%;
    max-width:640px;
    border-radius:26px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.12);
    overflow:hidden;
    box-shadow:0 18px 40px rgba(0,0,0,.22);
  }
  
  .qt-ui-window__top{
    height:52px;
    background:rgba(255,255,255,.05);
  }
  
  .qt-ui-window__hero{
    padding:24px 20px;
    background:linear-gradient(135deg, rgba(34,211,238,.14), rgba(139,92,246,.14));
  }
  
  .qt-ui-window__hero .line{
    display:block;
    height:12px;
    border-radius:999px;
    background:rgba(255,255,255,.88);
    margin-bottom:12px;
  }
  
  .qt-ui-window__hero .w1{width:92%}
  .qt-ui-window__hero .w2{width:76%}
  .qt-ui-window__hero .w3{width:66%}
  .qt-ui-window__hero .cta{
    display:block;
    width:120px;
    height:36px;
    border-radius:999px;
    background:linear-gradient(135deg,#8b5cf6,#22d3ee);
    margin-top:18px;
  }
  
  .qt-ui-window__cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    padding:18px;
  }
  
  .qt-ui-window__cards div{
    height:110px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
  }
  
  .qt-ui-window .tag{
    position:absolute;
    padding:10px 14px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    font-size:13px;
    font-weight:700;
  }
  
  .qt-ui-window .tag-top{top:-14px;right:18px}
  .qt-ui-window .tag-left{top:138px;left:-14px}
  .qt-ui-window .tag-bottom{bottom:-18px;left:18px}
  
  .qt-phone-scene{
    position:relative;
    width:100%;
    max-width:620px;
    min-height:420px;
  }
  
  .qt-phone-scene .phone{
    position:absolute;
    width:220px;
    height:440px;
    border-radius:34px;
    padding:12px;
    background:linear-gradient(145deg,#101a2a,#1a2941);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 16px 28px rgba(0,0,0,.24);
  }
  
  .qt-phone-scene .phone.back{
    left:90px;
    top:40px;
    transform:rotate(-10deg);
    opacity:.92;
  }
  
  .qt-phone-scene .phone.front{
    right:90px;
    top:0;
    transform:rotate(8deg);
  }
  
  .qt-phone-scene .screen{
    width:100%;
    height:100%;
    border-radius:24px;
    overflow:hidden;
    background:linear-gradient(180deg,#f4f8fc,#e6eef7);
  }
  
  .qt-phone-scene .screen.alt{
    background:linear-gradient(180deg,#fff7fb,#efeaff);
  }
  
  .qt-phone-scene .top{
    height:52px;
    background:linear-gradient(135deg,#22d3ee,#8b5cf6);
  }
  
  .qt-phone-scene .card{
    margin:14px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 14px rgba(0,0,0,.05);
  }
  
  .qt-phone-scene .card.big{height:110px}
  .qt-phone-scene .card.small{height:70px}
  .qt-phone-scene .row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:0 14px;
  }
  .qt-phone-scene .row span{
    height:54px;
    border-radius:14px;
    background:#fff;
  }
  
  .qt-store-scene{
    position:relative;
    width:100%;
    max-width:640px;
  }
  
  .qt-store-scene .store-window{
    border-radius:26px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.12);
    overflow:hidden;
    box-shadow:0 18px 40px rgba(0,0,0,.22);
  }
  
  .qt-store-scene .store-top{
    height:48px;
    background:rgba(255,255,255,.06);
  }
  
  .qt-store-scene .store-banner{
    height:140px;
    margin:18px;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(34,211,238,.16), rgba(139,92,246,.16));
  }
  
  .qt-store-scene .store-products{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    padding:0 18px 18px;
  }
  
  .qt-store-scene .store-products div{
    height:120px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
  }
  
  .qt-store-scene .store-pill{
    position:absolute;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:13px;
    font-weight:700;
  }
  
  .qt-store-scene .p1{top:18px;right:14px}
  .qt-store-scene .p2{bottom:12px;left:18px}
  
  .qt-lms-scene{
    position:relative;
    width:100%;
    max-width:640px;
  }
  
  .qt-lms-scene .board{
    border-radius:26px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.12);
    padding:18px;
    box-shadow:0 18px 40px rgba(0,0,0,.22);
  }
  
  .qt-lms-scene .video{
    height:190px;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(34,211,238,.16), rgba(139,92,246,.16));
    margin-bottom:16px;
  }
  
  .qt-lms-scene .lessons{
    display:grid;
    gap:12px;
  }
  
  .qt-lms-scene .lessons span{
    display:block;
    height:54px;
    border-radius:14px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
  }
  
  .qt-lms-scene .lms-pill{
    position:absolute;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:13px;
    font-weight:700;
  }
  
  .qt-lms-scene .a{top:16px;right:20px}
  .qt-lms-scene .b{top:150px;left:-4px}
  
  .qt-custom-scene{
    position:relative;
    width:100%;
    max-width:620px;
    min-height:360px;
  }
  
  .qt-custom-scene .sys-main{
    width:260px;
    height:180px;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    position:absolute;
    top:70px;
    left:50%;
    transform:translateX(-50%);
    padding:18px;
  }
  
  .qt-custom-scene .sys-line{
    height:10px;
    border-radius:999px;
    background:#22d3ee;
    margin-bottom:12px;
  }
  
  .qt-custom-scene .l1{width:84%}
  .qt-custom-scene .l2{width:60%}
  .qt-custom-scene .l3{width:74%}
  
  .qt-custom-scene .sys-box{
    position:absolute;
    width:110px;
    height:80px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
  }
  
  .qt-custom-scene .s1{top:0;left:30px}
  .qt-custom-scene .s2{bottom:0;right:40px}
  .qt-custom-scene .s3{top:110px;right:0}
  
  .qt-works-dots{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:10px;
    padding-bottom:26px;
  }
  
  .qt-works-dots button{
    width:10px;
    height:10px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.28);
    cursor:pointer;
    transition:.25s;
  }
  
  .qt-works-dots button.active{
    background:#22d3ee;
  }
  
  @media (max-width:1024px){
    .qt-works-hero-slider__inner{
      min-height:760px;
    }
  
    .qt-works-slide{
      grid-template-columns:1fr;
      text-align:center;
      gap:26px;
      padding:52px 0 92px;
    }
  
    .qt-works-slide__visual{
      order:1;
    }
  
    .qt-works-slide__content{
      order:2;
    }
  
    .qt-works-slide__content p{
      margin-right:auto;
      margin-left:auto;
    }
  
    .qt-works-slide__content .actions{
      justify-content:center;
    }
  
    .qt-works-slide__content h2{
      font-size:46px;
    }
  }
  
  @media (max-width:767px){
    .qt-works-hero-slider{
      padding:0 14px;
    }
  
    .qt-works-hero-slider__inner{
      min-height:690px;
    }
  
    .qt-works-slide{
      padding:38px 0 86px;
    }
  
    .qt-works-slide__content h2{
      font-size:33px;
    }
  
    .qt-works-slide__content p{
      font-size:16px;
      line-height:1.8;
    }
  
    .qt-works-slide__content .btn{
      font-size:15px;
      padding:13px 18px;
    }
  
    .qt-works-slide__visual{
      min-height:260px;
    }
  
    .qt-ui-window__cards,
    .qt-store-scene .store-products{
      grid-template-columns:1fr 1fr;
    }
  
    .qt-ui-window__cards div,
    .qt-store-scene .store-products div{
      height:80px;
    }
  
    .qt-phone-scene .phone{
      width:140px;
      height:280px;
      border-radius:22px;
      padding:8px;
    }
  
    .qt-phone-scene .phone.back{
      left:20px;
      top:20px;
    }
  
    .qt-phone-scene .phone.front{
      right:20px;
    }
  
    .qt-phone-scene .screen{
      border-radius:16px;
    }
  
    .qt-phone-scene .top{
      height:32px;
    }
  
    .qt-phone-scene .card.big{
      height:60px;
    }
  
    .qt-phone-scene .card.small{
      height:36px;
    }
  
    .qt-phone-scene .row span{
      height:28px;
      border-radius:8px;
    }
  
    .qt-custom-scene .sys-main{
      width:180px;
      height:130px;
      top:56px;
      padding:12px;
    }
  
    .qt-custom-scene .sys-box{
      width:78px;
      height:58px;
      border-radius:12px;
    }
  
    .qt-lms-scene .video{
      height:120px;
    }
  
    .qt-lms-scene .lessons span{
      height:40px;
    }
  
    .qt-ui-window .tag,
    .qt-store-scene .store-pill,
    .qt-lms-scene .lms-pill{
      font-size:11px;
      padding:7px 10px;
    }
  }

.qt-web-hero-pro{
	background:transparent !important;
}


.qt-why-choose-creative__head h2{
	font-size:35px !important;
}

.qt-store-hero2{
		background:transparent !important;
}

.qt-custom-hero{
	background:transparent !important;
}

    .qt-custom-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qt-system-visual {
  position: relative;
  width: 440px;
  height: 440px;
}

.qt-center-chip {
  position: absolute;
  inset: 50%;
  width: 170px;
  height: 170px;
  transform: translate(50%, -50%);
  border-radius: 38px;
  background: linear-gradient(145deg, #10213f, #061427);
  border: 1px solid rgba(34, 211, 238, .35);
  box-shadow:
    0 0 55px rgba(34, 211, 238, .18),
    0 28px 70px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 4;
}

.qt-center-chip span {
  color: #27d9f4;
  font-size: 42px;
  font-weight: 900;
}

.qt-center-chip strong {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.qt-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(39, 217, 244, .35);
  animation: qtRotate 18s linear infinite;
}

.qt-orbit-ring.ring-1 {
  inset: 42px;
}

.qt-orbit-ring.ring-2 {
  inset: 92px;
  animation-duration: 12s;
  animation-direction: reverse;
}

.qt-module {
  position: absolute;
  z-index: 5;
  min-width: 82px;
  height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  background: rgba(14, 30, 55, .92);
  border: 1px solid rgba(34, 211, 238, .32);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 35px rgba(0,0,0,.22);
}

.qt-module::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: #27d9f4;
  box-shadow: 0 0 14px rgba(39,217,244,.8);
}

.qt-module.m1 { top: 18px; right: 160px; }
.qt-module.m2 { top: 185px; right: 0; }
.qt-module.m3 { bottom: 18px; right: 165px; }
.qt-module.m4 { top: 185px; left: 0; }

.qt-data-card {
  position: absolute;
  z-index: 6;
  width: 140px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

.qt-data-card small {
  display: block;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  margin-bottom: 5px;
}

.qt-data-card b {
  color: #fff;
  font-size: 16px;
}

.qt-data-card.card-1 {
  top: 65px;
  left: 30px;
}

.qt-data-card.card-2 {
  bottom: 70px;
  right: 25px;
}

@keyframes qtRotate {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 600px) {
  .qt-system-visual {
    width: 310px;
    height: 310px;
  }

  .qt-center-chip {
    width: 125px;
    height: 125px;
    border-radius: 28px;
  }

  .qt-center-chip span {
    font-size: 32px;
  }

  .qt-center-chip strong {
    font-size: 12px;
  }

  .qt-module {
    min-width: 65px;
    height: 42px;
    font-size: 12px;
    padding: 0 12px;
  }

  .qt-module.m1 { top: 10px; right: 112px; }
  .qt-module.m2 { top: 130px; right: 0; }
  .qt-module.m3 { bottom: 10px; right: 115px; }
  .qt-module.m4 { top: 130px; left: 0; }

  .qt-data-card {
    display: none;
  }
}

.qt-stats-clean {
  width: 100% !important;
  padding: 38px 18px !important;
  background: transparent !important;
  direction: rtl !important;
}

.qt-stats-clean__inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  padding: 18px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(19,45,86,.82), rgba(9,82,92,.72)) !important;
  border: 1px solid rgba(34,211,238,.22) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
}

.qt-stat-clean {
  min-height: 125px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: all .25s ease !important;
}

.qt-stat-clean:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(34,211,238,.55) !important;
  background: rgba(34,211,238,.09) !important;
}

.qt-stat-clean strong {
  color: #22d3ee !important;
  font-size: clamp(34px, 4vw, 50px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin: 0 0 13px !important;
}

.qt-stat-clean span {
  color: rgba(255,255,255,.82) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .qt-stats-clean__inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .qt-stats-clean__inner {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
}